💄(frontend) change grommet colors by cunningham colors

The grommet theme colors are correctly displayed only by grommet components, we change the color of the grommet components to the cunningham color.
openfun · Nov 6, 2023 · aa78e26 · aa78e26
1 parent 7738ef2
commit aa78e26
Show file tree

Hide file tree

Showing 46 changed files with 208 additions and 115 deletions.
diff --git a/...frontend/apps/lti_site/apps/classroom/components/SelectContent/SelectContentTab/index.tsx b/...frontend/apps/lti_site/apps/classroom/components/SelectContent/SelectContentTab/index.tsx
@@ -1,5 +1,6 @@
 import { Tab } from 'grommet';
 import { useCreateClassroom } from 'lib-classroom';
+import { colorsTokens } from 'lib-common';
 import { ClassroomSVG } from 'lib-components';
 import React from 'react';
 import { useIntl } from 'react-intl';
@@ -76,7 +77,13 @@ const SelectContentTab = ({
     <Tab
       title={
         <RichTabTitle
-          icon={<ClassroomSVG width={30} height={30} iconColor="blue-active" />}
+          icon={
+            <ClassroomSVG
+              width={30}
+              height={30}
+              iconColor={colorsTokens['info-500']}
+            />
+          }
           label={intl.formatMessage(commonMessages.titleClassroom)}
         />
       }

diff --git a/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/index.tsx b/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/index.tsx
@@ -1,7 +1,6 @@
 import { Loader } from '@openfun/cunningham-react';
 import { ThemeContext, ThemeType } from 'grommet';
-import { normalizeColor } from 'grommet/utils';
-import { theme } from 'lib-common';
+import { colorsTokens } from 'lib-common';
 import { Box, UploadManager, useCurrentResourceContext } from 'lib-components';
 import React, { Fragment } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@@ -41,7 +40,7 @@ const extendedTheme: ThemeType = {
     font: {
       family: 'Roboto-Bold',
     },
-    color: 'blue-active',
+    color: colorsTokens['info-500'],
     level: {
       1: {
         medium: {
@@ -54,14 +53,14 @@ const extendedTheme: ThemeType = {
     primary: {},
   },
   text: {
-    extend: `color: ${normalizeColor('blue-active', theme)};`,
+    extend: `color: ${colorsTokens['info-500']};`,
   },
   paragraph: {
-    extend: `color: ${normalizeColor('blue-active', theme)};`,
+    extend: `color: ${colorsTokens['info-500']};`,
   },
   pagination: {
     button: {
-      extend: `color: ${normalizeColor('blue-active', theme)};`,
+      extend: `color: ${colorsTokens['info-500']};`,
     },
   },
 };

diff --git a/src/frontend/apps/lti_site/apps/deposit/components/SelectContent/SelectContentTab/index.tsx b/src/frontend/apps/lti_site/apps/deposit/components/SelectContent/SelectContentTab/index.tsx
@@ -1,5 +1,6 @@
 import { Tab } from 'grommet';
 import { DocumentStore } from 'grommet-icons';
+import { colorsTokens } from 'lib-common';
 import React from 'react';
 import { useIntl } from 'react-intl';
 
@@ -78,7 +79,11 @@ const SelectContentTab = ({
       title={
         <RichTabTitle
           icon={
-            <DocumentStore a11yTitle="" size="medium" color="blue-active" />
+            <DocumentStore
+              a11yTitle=""
+              size="medium"
+              color={colorsTokens['info-500']}
+            />
           }
           label={intl.formatMessage(commonMessages.titleDeposit)}
         />

diff --git a/src/frontend/apps/lti_site/apps/markdown/components/SelectContent/SelectContentTab/index.tsx b/src/frontend/apps/lti_site/apps/markdown/components/SelectContent/SelectContentTab/index.tsx
@@ -1,5 +1,6 @@
 import { Tab } from 'grommet';
 import { TextWrap } from 'grommet-icons';
+import { colorsTokens } from 'lib-common';
 import { useCreateMarkdownDocument } from 'lib-markdown';
 import React from 'react';
 import { useIntl } from 'react-intl';
@@ -78,7 +79,13 @@ const SelectContentTab = ({
     <Tab
       title={
         <RichTabTitle
-          icon={<TextWrap a11yTitle="" size="medium" color="blue-active" />}
+          icon={
+            <TextWrap
+              a11yTitle=""
+              size="medium"
+              color={colorsTokens['info-500']}
+            />
+          }
           label={intl.formatMessage(commonMessages.titleMarkdown)}
         />
       }

diff --git a/src/frontend/apps/lti_site/components/PlaylistPortability/index.tsx b/src/frontend/apps/lti_site/components/PlaylistPortability/index.tsx
@@ -1,5 +1,6 @@
 import { Button, Input, Loader } from '@openfun/cunningham-react';
 import { AddCircle, Trash } from 'grommet-icons';
+import { colorsTokens } from 'lib-common';
 import {
   Box,
   BoxError,
@@ -240,7 +241,7 @@ export const PlaylistPortability = ({ object }: PlaylistPortabilityProps) => {
                 <AddCircle
                   aria-label={intl.formatMessage(messages.addPortability)}
                   onClick={addPlaylistPortability}
-                  color="blue-active"
+                  color={colorsTokens['info-500']}
                   style={{ cursor: 'pointer' }}
                   role="button"
                 />

diff --git a/src/frontend/apps/lti_site/components/SelectContent/SelectContentTabs/index.tsx b/src/frontend/apps/lti_site/components/SelectContent/SelectContentTabs/index.tsx
@@ -1,7 +1,7 @@
 import { Grommet, Tab, Tabs } from 'grommet';
 import { deepMerge } from 'grommet/utils';
 import { Document as DocumentIcon } from 'grommet-icons';
-import { theme as baseTheme } from 'lib-common';
+import { theme as baseTheme, colorsTokens } from 'lib-common';
 import {
   Box,
   BoxLoader,
@@ -33,10 +33,10 @@ const customTheme = deepMerge(baseTheme, {
   tab: {
     active: {
       background: 'bg-menu-hover',
-      color: 'blue-active',
+      color: colorsTokens['info-500'],
     },
     border: undefined,
-    color: 'blue-active',
+    color: colorsTokens['info-500'],
     margin: 'none',
     pad: '6px 12px',
     extend: 'border-radius: 6px;',
@@ -157,7 +157,11 @@ export const SelectContentTabs = ({
             title={
               <RichTabTitle
                 icon={
-                  <WebinarSVG width={30} height={30} iconColor="blue-active" />
+                  <WebinarSVG
+                    width={30}
+                    height={30}
+                    iconColor={colorsTokens['info-500']}
+                  />
                 }
                 label={intl.formatMessage(commonMessages.titleWebinar)}
               />
@@ -185,7 +189,11 @@ export const SelectContentTabs = ({
             title={
               <RichTabTitle
                 icon={
-                  <PlaySVG width={30} height={30} iconColor="blue-active" />
+                  <PlaySVG
+                    width={30}
+                    height={30}
+                    iconColor={colorsTokens['info-500']}
+                  />
                 }
                 label={intl.formatMessage(commonMessages.titleVideo)}
               />
@@ -216,7 +224,7 @@ export const SelectContentTabs = ({
                   <DocumentIcon
                     a11yTitle=""
                     size="medium"
-                    color="blue-active"
+                    color={colorsTokens['info-500']}
                   />
                 }
                 label={intl.formatMessage(commonMessages.titleDocument)}

diff --git a/src/frontend/apps/lti_site/components/UploadableObjectStatusBadge/index.tsx b/src/frontend/apps/lti_site/components/UploadableObjectStatusBadge/index.tsx
@@ -1,5 +1,5 @@
 import { normalizeColor } from 'grommet/utils';
-import { theme } from 'lib-common';
+import { colorsTokens, theme } from 'lib-common';
 import {
   UploadManagerStatus,
   UploadableObject,
@@ -81,14 +81,14 @@ export const UploadableObjectStatusBadge = ({
     case uploadState.DELETED:
     case uploadState.PROCESSING:
       return (
-        <Badge role="status" background="brand">
+        <Badge role="status" background={colorsTokens['info-300']}>
           <FormattedMessage {...messages[object.upload_state]} />
         </Badge>
       );
 
     case uploadState.ERROR:
       return (
-        <Badge role="status" background="status-error">
+        <Badge role="status" background={colorsTokens['danger-400']}>
           <FormattedMessage {...messages[uploadState.ERROR]} />
         </Badge>
       );
@@ -98,29 +98,29 @@ export const UploadableObjectStatusBadge = ({
         case UploadManagerStatus.INIT:
         case UploadManagerStatus.UPLOADING:
           return (
-            <Badge role="status" background="brand">
+            <Badge role="status" background={colorsTokens['info-300']}>
               <FormattedMessage {...messages.uploading} />
             </Badge>
           );
 
         case UploadManagerStatus.ERR_POLICY:
         case UploadManagerStatus.ERR_UPLOAD:
           return (
-            <Badge role="status" background="status-error">
+            <Badge role="status" background={colorsTokens['danger-400']}>
               <FormattedMessage {...messages[uploadState.ERROR]} />
             </Badge>
           );
 
         case UploadManagerStatus.ERR_SIZE:
           return (
-            <Badge role="status" background="status-error">
+            <Badge role="status" background={colorsTokens['danger-400']}>
               <FormattedMessage {...messages[uploadState.ERROR]} />
             </Badge>
           );
 
         case UploadManagerStatus.SUCCESS:
           return (
-            <Badge role="status" background="brand">
+            <Badge role="status" background={colorsTokens['info-300']}>
               <FormattedMessage {...messages[uploadState.PROCESSING]} />
             </Badge>
           );

diff --git a/...tend/apps/standalone_site/src/features/Authentication/components/RenaterAuthenticator.tsx b/...tend/apps/standalone_site/src/features/Authentication/components/RenaterAuthenticator.tsx
@@ -104,7 +104,7 @@ export const RenaterAuthenticator = () => {
               )}
             </Fragment>
           }
-          background="status-error"
+          background={colorsTokens['danger-400']}
           width="full"
           margin={{ bottom: 'small' }}
         />
@@ -116,7 +116,7 @@ export const RenaterAuthenticator = () => {
         align="center"
         gap="small"
       >
-        <Box background="blue-active" height="1px" width="100%" />
+        <Box background={colorsTokens['info-500']} height="1px" width="100%" />
         <Box width="100%">
           <Text
             size={isSmallerBreakpoint(breakpoint, 'small') ? 'tiny' : 'small'}
@@ -126,7 +126,7 @@ export const RenaterAuthenticator = () => {
             {intl.formatMessage(messages.textConnectWith)}
           </Text>
         </Box>
-        <Box background="blue-active" height="1px" width="100%" />
+        <Box background={colorsTokens['info-500']} height="1px" width="100%" />
       </Box>
       <ThemeContext.Extend value={{ select: { step: options.length || 20 } }}>
         <FormField label={intl.formatMessage(messages.labelSelectRenater)}>

diff --git a/...d/apps/standalone_site/src/features/Contents/components/ContentsFilter/ContentsFilter.tsx b/...d/apps/standalone_site/src/features/Contents/components/ContentsFilter/ContentsFilter.tsx
@@ -1,5 +1,5 @@
 import { Filter } from 'grommet-icons';
-import { Breakpoints } from 'lib-common';
+import { Breakpoints, colorsTokens } from 'lib-common';
 import { Badge, Box, Playlist, Text, useResponsive } from 'lib-components';
 import { Fragment, useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -127,7 +127,7 @@ const ContentsFilter = ({ setFilter, filter }: ContentsFilterProps) => {
         }}
       >
         <Text>
-          <Filter color="blue-active" size="20px" />
+          <Filter color={colorsTokens['info-500']} size="20px" />
           {intl.formatMessage(messages.labelFilter)}
         </Text>
         {badgeCounter > 0 && (

diff --git a/...tandalone_site/src/features/Contents/features/ClassRoom/components/Read/ClassRoomItem.tsx b/...tandalone_site/src/features/Contents/features/ClassRoom/components/Read/ClassRoomItem.tsx
@@ -1,5 +1,6 @@
 import { Checkbox } from '@openfun/cunningham-react';
 import { FormSchedule, InProgress } from 'grommet-icons';
+import { colorsTokens } from 'lib-common';
 import {
   Box,
   ClassroomLite,
@@ -83,22 +84,29 @@ const ClassRoom = ({ classroom }: { classroom: ClassroomLite }) => {
           <Fragment>
             {classroom.starting_at && (
               <Box gap="small" align="center" direction="row">
-                <FormSchedule size="medium" color="blue-active" />
+                <FormSchedule size="medium" color={colorsTokens['info-500']} />
                 <Text size="tiny" weight="bold">
                   {localDate(classroom.starting_at, intl.locale)}
                 </Text>
               </Box>
             )}
             {classroom.estimated_duration && (
               <Box gap="small" align="center" direction="row">
-                <InProgress color="blue-active" style={{ height: '20px' }} />
+                <InProgress
+                  color={colorsTokens['info-500']}
+                  style={{ height: '20px' }}
+                />
                 <Text size="tiny" weight="bold">
                   {classroom.estimated_duration}
                 </Text>
               </Box>
             )}
             <Box gap="small" align="center" direction="row">
-              <VueListIcon width={20} height={20} color="blue-active" />
+              <VueListIcon
+                width={20}
+                height={20}
+                color={colorsTokens['info-500']}
+              />
               <Text size="tiny" weight="bold">
                 {classroom.playlist.title}
               </Text>

diff --git a/...rontend/apps/standalone_site/src/features/Contents/features/Live/components/Read/Live.tsx b/...rontend/apps/standalone_site/src/features/Contents/features/Live/components/Read/Live.tsx
@@ -1,4 +1,5 @@
 import { Checkbox } from '@openfun/cunningham-react';
+import { colorsTokens } from 'lib-common';
 import { Box, ContentCard, StyledLink, Text, Video } from 'lib-components';
 import { useEffect, useState } from 'react';
 
@@ -69,7 +70,11 @@ const Live = ({ live }: { live: Video }) => {
         }
         footer={
           <Box gap="small" align="center" direction="row">
-            <VueListIcon width={20} height={20} color="blue-active" />
+            <VueListIcon
+              width={20}
+              height={20}
+              color={colorsTokens['info-500']}
+            />
             <Text size="tiny" weight="bold">
               {live.playlist.title}
             </Text>

diff --git a/...ntend/apps/standalone_site/src/features/Contents/features/Video/components/Read/Video.tsx b/...ntend/apps/standalone_site/src/features/Contents/features/Video/components/Read/Video.tsx
@@ -1,4 +1,5 @@
 import { Checkbox } from '@openfun/cunningham-react';
+import { colorsTokens } from 'lib-common';
 import {
   Box,
   ContentCard,
@@ -76,7 +77,11 @@ const Video = ({ video }: { video: IVideo }) => {
         }
         footer={
           <Box gap="small" align="center" direction="row">
-            <VueListIcon width={20} height={20} color="blue-active" />
+            <VueListIcon
+              width={20}
+              height={20}
+              color={colorsTokens['info-500']}
+            />
             <Text size="tiny" weight="bold">
               {video.playlist.title}
             </Text>

diff --git a/src/frontend/apps/standalone_site/src/features/Header/Header.tsx b/src/frontend/apps/standalone_site/src/features/Header/Header.tsx
@@ -1,7 +1,6 @@
 import { Button } from '@openfun/cunningham-react';
 import { DropButton } from 'grommet';
-import { normalizeColor } from 'grommet/utils';
-import { Breakpoints, Nullable, theme } from 'lib-common';
+import { Breakpoints, Nullable, colorsTokens } from 'lib-common';
 import {
   AnonymousUser,
   Box,
@@ -24,7 +23,7 @@ import { LanguagePicker } from 'features/Language/';
 import { Burger } from 'features/Menu';
 import { routes } from 'routes/routes';
 
-const colorMenu = normalizeColor('blue-active', theme);
+const colorMenu = colorsTokens['info-500'];
 
 interface PropsExtended {
   $isScrollTop: boolean;
@@ -42,7 +41,7 @@ const HeaderBox = styled(Box)<PropsExtended>`
         background: #fff;                                                                     
         box-shadow: 1px 1px 20px #cce4f3;
       `}
-  z-index: 11;
+  z-index: 20;
   height: auto;
 `;
 
@@ -221,7 +220,7 @@ const Header = forwardRef<Nullable<HTMLDivElement>>((_props, ref) => {
           dropProps={{
             round: 'xsmall',
             border: {
-              color: 'blue-active',
+              color: colorsTokens['info-500'],
               size: '2px',
             },
             style: {