💄(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 7, 2023 · 797c938 · 797c938
1 parent 7738ef2
commit 797c938
Show file tree

Hide file tree

Showing 66 changed files with 297 additions and 195 deletions.
diff --git a/...ecutter/{{cookiecutter.app_name}}/components/SelectContent/SelectContentSection/index.tsx b/...ecutter/{{cookiecutter.app_name}}/components/SelectContent/SelectContentSection/index.tsx
@@ -1,6 +1,6 @@
 import { Box, Card, CardBody, Grid, Text, Tip } from 'grommet';
 import { Group } from 'grommet-icons/icons';
-import { Nullable } from 'lib-common';
+import { Nullable, colorsTokens } from 'lib-common';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -74,7 +74,7 @@ export const SelectContentSection = ({
         <Card
           height="144px"
           justify="center"
-          background="light-3"
+          background={colorsTokens['greyscale-300']}
           align="center"
           onClick={addAndSelectContent}
         >

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/App/AppContentLoader/index.tsx b/src/frontend/apps/lti_site/components/App/AppContentLoader/index.tsx
@@ -2,7 +2,7 @@ import { CunninghamProvider } from '@openfun/cunningham-react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { Grommet } from 'grommet';
-import { colors, theme } from 'lib-common';
+import { colorsTokens, theme } from 'lib-common';
 import {
   BoundaryScreenError,
   BoxLoader,
@@ -201,13 +201,14 @@ const AppContentLoader = () => {
                     duration: 5000,
                     success: {
                       style: {
-                        background: colors['status-ok'],
+                        background: colorsTokens['success-600'],
+                        color: 'white',
                       },
                     },
                     error: {
                       style: {
-                        color: colors.white,
-                        background: colors['accent-2'],
+                        color: 'white',
+                        background: colorsTokens['danger-400'],
                       },
                     },
                   }}

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,
@@ -32,11 +32,11 @@ import { buildContentItems } from '../utils';
 const customTheme = deepMerge(baseTheme, {
   tab: {
     active: {
-      background: 'bg-menu-hover',
-      color: 'blue-active',
+      background: colorsTokens['info-150'],
+      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,
@@ -73,22 +73,22 @@ export const UploadableObjectStatusBadge = ({
   switch (object.upload_state) {
     case uploadState.READY:
       return (
-        <Badge role="status" background="status-ok">
+        <Badge role="status" background={colorsTokens['success-600']}>
           <FormattedMessage {...messages[uploadState.READY]} />
         </Badge>
       );
 
     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,36 +98,36 @@ 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>
           );
 
         default:
           return (
-            <Badge role="status" background="dark-5">
+            <Badge role="status" background={colorsTokens['greyscale-700']}>
               <FormattedMessage {...messages[uploadState.PENDING]} />
             </Badge>
           );

diff --git a/src/frontend/apps/standalone_site/src/features/App/App.tsx b/src/frontend/apps/standalone_site/src/features/App/App.tsx
@@ -2,7 +2,7 @@ import { CunninghamProvider } from '@openfun/cunningham-react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { Grommet } from 'grommet';
-import { colors } from 'lib-common';
+import { colorsTokens } from 'lib-common';
 import { retryQuery } from 'lib-components';
 import { Toaster } from 'react-hot-toast';
 import { BrowserRouter } from 'react-router-dom';
@@ -32,13 +32,14 @@ const App = () => {
               duration: 5000,
               success: {
                 style: {
-                  background: colors['status-ok'],
+                  background: colorsTokens['success-600'],
+                  color: 'white',
                 },
               },
               error: {
                 style: {
-                  color: colors['white'],
-                  background: colors['accent-2'],
+                  color: 'white',
+                  background: colorsTokens['danger-400'],
                 },
               },
             }}

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 && (