♻️(frontend) More multi theme friendly

CHANGELOG.md

@@ -9,6 +9,11 @@ and this project adheres to
 
 ## [Unreleased]
 
+## Changed
+
+♻️(frontend) More multi theme friendly #325
+
+
 ## [1.5.1] - 2024-10-10
 
 ## Fixed

src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts

@@ -26,7 +26,7 @@ test.describe('Header', () => {
       }),
     ).toBeVisible();
 
-    await expect(header.getByAltText('Language Icon')).toBeVisible();
+    await expect(header.getByText('English')).toBeVisible();
 
     await expect(
       header.getByRole('button', {
@@ -87,7 +87,7 @@ test.describe('Header mobile', () => {
       }),
     ).toBeHidden();
 
-    await expect(page.getByAltText('Language Icon')).toBeHidden();
+    await expect(page.getByText('English')).toBeHidden();
 
     await header.getByLabel('Open the header menu').click();
 
@@ -97,7 +97,7 @@ test.describe('Header mobile', () => {
       }),
     ).toBeVisible();
 
-    await expect(page.getByAltText('Language Icon')).toBeVisible();
+    await expect(page.getByText('English')).toBeVisible();
   });
 });
 

src/frontend/apps/impress/cunningham.ts

@@ -189,6 +189,9 @@ const config = {
             },
           },
         },
+        'la-gauffre': {
+          activated: false,
+        },
       },
     },
     dsfr: {
@@ -321,6 +324,7 @@ const config = {
               'color-hover': 'var(--c--theme--colors--primary-100)',
             },
             'color-hover': 'var(--c--theme--colors--primary-text)',
+            color: 'var(--c--theme--colors--primary-600)',
           },
         },
         datagrid: {
@@ -335,6 +339,7 @@ const config = {
           pagination: {
             'background-color': 'transparent',
             'background-color-active': 'var(--c--theme--colors--primary-300)',
+            'border-color': 'var(--c--theme--colors--primary-400)',
           },
         },
         'forms-checkbox': {
@@ -384,6 +389,9 @@ const config = {
         'forms-textarea': {
           'border-radius': '0',
         },
+        'la-gauffre': {
+          activated: true,
+        },
       },
     },
   },

src/frontend/apps/impress/src/assets/fonts/Marianne/Marianne-font.css

@@ -1,77 +1,101 @@
 @font-face {
   font-family: Marianne;
-  src: url('Marianne-Thin.woff') format('truetype');
+  src:
+    url('Marianne-Thin.woff2') format('woff2'),
+    url('Marianne-Thin.woff') format('woff');
   font-weight: 100;
 }
 
 @font-face {
   font-family: Marianne;
-  src: url('Marianne-Thin_Italic.woff') format('truetype');
+  src:
+    url('Marianne-Thin_Italic.woff2') format('woff2'),
+    url('Marianne-Thin_Italic.woff') format('woff');
   font-weight: 100;
   font-style: italic;
 }
 
 @font-face {
   font-family: Marianne;
-  src: url('Marianne-Light.woff') format('truetype');
+  src:
+    url('Marianne-Light.woff2') format('woff2'),
+    url('Marianne-Light.woff') format('woff');
   font-weight: 300;
 }
 
 @font-face {
   font-family: Marianne;
-  src: url('Marianne-Light_Italic.woff') format('truetype');
+  src:
+    url('Marianne-Light_Italic.woff2') format('woff2'),
+    url('Marianne-Light_Italic.woff') format('woff');
   font-weight: 300;
   font-style: italic;
 }
 
 @font-face {
   font-family: Marianne;
-  src: url('Marianne-Regular.woff') format('truetype');
+  src:
+    url('Marianne-Regular.woff2') format('woff2'),
+    url('Marianne-Regular.woff') format('woff');
   font-weight: 400;
 }
 
 @font-face {
   font-family: Marianne;
-  src: url('Marianne-Regular_Italic.woff') format('truetype');
+  src:
+    url('Marianne-Regular_Italic.woff2') format('woff2'),
+    url('Marianne-Regular_Italic.woff') format('woff');
   font-weight: 400;
   font-style: italic;
 }
 
 @font-face {
   font-family: Marianne;
-  src: url('Marianne-Medium.woff') format('truetype');
+  src:
+    url('Marianne-Medium.woff2') format('woff2'),
+    url('Marianne-Medium.woff') format('woff');
   font-weight: 500;
 }
 
 @font-face {
   font-family: Marianne;
-  src: url('Marianne-Medium_Italic.woff') format('truetype');
+  src:
+    url('Marianne-Medium_Italic.woff2') format('woff2'),
+    url('Marianne-Medium_Italic.woff') format('woff');
   font-weight: 500;
   font-style: italic;
 }
 
 @font-face {
   font-family: Marianne;
-  src: url('Marianne-Bold.woff') format('truetype');
+  src:
+    url('Marianne-Bold.woff2') format('woff2'),
+    url('Marianne-Bold.woff') format('woff');
   font-weight: 700;
 }
 
 @font-face {
   font-family: Marianne;
-  src: url('Marianne-Bold_Italic.woff') format('truetype');
+  src:
+    url('Marianne-Bold_Italic.woff2') format('woff2'),
+    url('Marianne-Bold_Italic.woff') format('woff');
   font-weight: 700;
   font-style: italic;
 }
 
 @font-face {
   font-family: Marianne;
-  src: url('Marianne-ExtraBold.woff') format('truetype');
+  src:
+    url('Marianne-ExtraBold.woff2') format('woff2'),
+    url('Marianne-ExtraBold.woff') format('woff');
   font-weight: 800;
 }
 
 @font-face {
   font-family: Marianne;
-  src: url('Marianne-ExtraBold_Italic.woff') format('truetype');
+  src:
+    url('Marianne-ExtraBold_Italic.woff2') format('woff2'),
+    url('Marianne-ExtraBold_Italic.woff') format('woff');
   font-weight: 800;
   font-style: italic;
 }

src/frontend/apps/impress/src/components/Icon.tsx

@@ -13,6 +13,7 @@ export const IconBG = ({ iconName, ...textProps }: IconBGProps) => {
       $isMaterialIcon
       $size="36px"
       $theme="primary"
+      $variation="600"
       $background={colorsTokens()['primary-bg']}
       $css={`
         border: 1px solid ${colorsTokens()['primary-200']}; 

src/frontend/apps/impress/src/cunningham/cunningham-style.css

@@ -255,6 +255,7 @@ input:-webkit-autofill:focus {
   gap: 3px;
   border-radius: 4px;
   background: var(--c--components--datagrid--pagination--background-color);
+  border-color: var(--c--components--datagrid--pagination--border-color);
 }
 
 .c__pagination__list .c__button--tertiary-text.c__button--active {
@@ -452,6 +453,7 @@ input:-webkit-autofill:focus {
 
 .c__button--tertiary-text {
   border: none;
+  color: var(--c--components--button--tertiary-text--color);
 }
 
 .c__button--tertiary-text:hover,

src/frontend/apps/impress/src/cunningham/cunningham-tokens.css

@@ -283,6 +283,7 @@
   );
   --c--components--button--disabled--color: white;
   --c--components--button--disabled--background--color: #b3cef0;
+  --c--components--la-gauffre--activated: false;
 }
 
 .cunningham-theme--dark {
@@ -451,6 +452,9 @@
   --c--components--button--tertiary-text--color-hover: var(
     --c--theme--colors--primary-text
   );
+  --c--components--button--tertiary-text--color: var(
+    --c--theme--colors--primary-600
+  );
   --c--components--datagrid--header--color: var(
     --c--theme--colors--primary-text
   );
@@ -461,6 +465,9 @@
   --c--components--datagrid--pagination--background-color-active: var(
     --c--theme--colors--primary-300
   );
+  --c--components--datagrid--pagination--border-color: var(
+    --c--theme--colors--primary-400
+  );
   --c--components--forms-checkbox--border-radius: 0;
   --c--components--forms-checkbox--color: var(--c--theme--colors--primary-text);
   --c--components--forms-checkbox--text--color: var(
@@ -504,6 +511,7 @@
     --c--theme--colors--primary-text
   );
   --c--components--forms-textarea--border-radius: 0;
+  --c--components--la-gauffre--activated: true;
 }
 
 .clr-secondary-text {

src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts

@@ -276,6 +276,7 @@ export const tokens = {
           },
           disabled: { color: 'white', background: { color: '#b3cef0' } },
         },
+        'la-gauffre': { activated: false },
       },
     },
     dark: {
@@ -450,6 +451,7 @@ export const tokens = {
               'color-hover': 'var(--c--theme--colors--primary-100)',
             },
             'color-hover': 'var(--c--theme--colors--primary-text)',
+            color: 'var(--c--theme--colors--primary-600)',
           },
         },
         datagrid: {
@@ -464,6 +466,7 @@ export const tokens = {
           pagination: {
             'background-color': 'transparent',
             'background-color-active': 'var(--c--theme--colors--primary-300)',
+            'border-color': 'var(--c--theme--colors--primary-400)',
           },
         },
         'forms-checkbox': {
@@ -503,6 +506,7 @@ export const tokens = {
           'accent-color': 'var(--c--theme--colors--primary-text)',
         },
         'forms-textarea': { 'border-radius': '0' },
+        'la-gauffre': { activated: true },
       },
     },
   },

src/frontend/apps/impress/src/features/docs/doc-editor/components/PanelEditor.tsx

@@ -102,6 +102,7 @@ export const PanelEditor = ({
               $weight="bold"
               $size="m"
               $theme="primary"
+              $variation="600"
               $padding={{ vertical: 'small', horizontal: 'small' }}
             >
               {t('Table of content')}
@@ -118,6 +119,7 @@ export const PanelEditor = ({
                 $weight="bold"
                 $size="m"
                 $theme="primary"
+                $variation="600"
                 $padding={{ vertical: 'small', horizontal: 'small' }}
               >
                 {t('Versions')}

src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx

@@ -44,6 +44,7 @@ export const DocHeader = ({ doc, versionId }: DocHeaderProps) => {
             <Text
               $isMaterialIcon
               $theme="primary"
+              $variation="600"
               $size="2rem"
               $css={`&:hover {background-color: ${colorsTokens()['primary-100']}; };`}
               $hasTransition

src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx

@@ -2,7 +2,7 @@ import { Button } from '@openfun/cunningham-react';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Box, DropButton, IconOptions, Text } from '@/components';
+import { Box, DropButton, IconOptions } from '@/components';
 import { useAuthStore } from '@/core';
 import { usePanelEditorStore } from '@/features/docs/doc-editor/';
 import {
@@ -86,7 +86,7 @@ export const DocToolBox = ({ doc, versionId }: DocToolBoxProps) => {
                 icon={<span className="material-icons">history</span>}
                 size="small"
               >
-                <Text $theme="primary">{t('Version history')}</Text>
+                {t('Version history')}
               </Button>
             )}
             <Button
@@ -99,7 +99,7 @@ export const DocToolBox = ({ doc, versionId }: DocToolBoxProps) => {
               icon={<span className="material-icons">summarize</span>}
               size="small"
             >
-              <Text $theme="primary">{t('Table of contents')}</Text>
+              {t('Table of contents')}
             </Button>
             <Button
               onClick={() => {
@@ -110,7 +110,7 @@ export const DocToolBox = ({ doc, versionId }: DocToolBoxProps) => {
               icon={<span className="material-icons">file_download</span>}
               size="small"
             >
-              <Text $theme="primary">{t('Export')}</Text>
+              {t('Export')}
             </Button>
             {doc.abilities.destroy && (
               <Button
@@ -122,7 +122,7 @@ export const DocToolBox = ({ doc, versionId }: DocToolBoxProps) => {
                 icon={<span className="material-icons">delete</span>}
                 size="small"
               >
-                <Text $theme="primary">{t('Delete document')}</Text>
+                {t('Delete document')}
               </Button>
             )}
           </Box>

src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx

@@ -152,7 +152,12 @@ export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => {
       size={ModalSize.MEDIUM}
       title={
         <Box $align="center" $gap="1rem">
-          <Text className="material-icons" $size="3.5rem" $theme="primary">
+          <Text
+            className="material-icons"
+            $size="3.5rem"
+            $theme="primary"
+            $variation="600"
+          >
             picture_as_pdf
           </Text>
           <Text as="h2" $size="h3" $margin="none" $theme="primary">

src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx

@@ -14,7 +14,6 @@ import useCunninghamTheme from '@/cunningham/useCunninghamTheme';
 
 import { useRemoveDoc } from '../api/useRemoveDoc';
 import IconDoc from '../assets/icon-doc.svg';
-import IconRemove from '../assets/icon-trash.svg';
 import { Doc } from '../types';
 
 interface ModalRemoveDocProps {
@@ -73,7 +72,9 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
       size={ModalSize.MEDIUM}
       title={
         <Box $align="center" $gap="1rem">
-          <IconRemove width={48} color={colorsTokens()['primary-text']} />
+          <Text $isMaterialIcon $size="48px" $theme="primary" $variation="600">
+            delete_forever
+          </Text>
           <Text as="h2" $size="h3" $margin="none">
             {t('Deleting the document "{{title}}"', { title: doc.title })}
           </Text>