From a009f8e35eddd0e50b27a5ae685f5b4e87d6adfd Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Thu, 12 Sep 2024 14:14:00 +0200
Subject: [PATCH] wip

---
 src/frontend/apps/impress/.env                |  2 +-
 src/frontend/apps/impress/cunningham.ts       | 10 +++
 .../src/cunningham/cunningham-tokens.css      | 70 ++++++++++++++++++-
 .../src/cunningham/cunningham-tokens.ts       | 10 ++-
 .../docs/doc-header/components/DocHeader.tsx  |  1 +
 .../components/ModalCreateUpdateDoc.tsx       |  2 +-
 .../doc-management/components/ModalShare.tsx  |  2 +-
 .../docs/docs-grid/components/DocsGrid.tsx    | 17 +++--
 .../impress/src/features/footer/Footer.tsx    |  4 +-
 .../impress/src/features/header/Header.tsx    |  8 ++-
 .../src/features/language/LanguagePicker.tsx  |  4 +-
 11 files changed, 117 insertions(+), 13 deletions(-)

diff --git a/src/frontend/apps/impress/.env b/src/frontend/apps/impress/.env
index 033fe3995..e04335f5a 100644
--- a/src/frontend/apps/impress/.env
+++ b/src/frontend/apps/impress/.env
@@ -1,4 +1,4 @@
 NEXT_PUBLIC_API_ORIGIN=
 NEXT_PUBLIC_Y_PROVIDER_URL=
 NEXT_PUBLIC_MEDIA_URL=
-NEXT_PUBLIC_THEME=openDesk
+NEXT_PUBLIC_THEME=dsfr
diff --git a/src/frontend/apps/impress/cunningham.ts b/src/frontend/apps/impress/cunningham.ts
index 7e4fbbddd..d4bc83d69 100644
--- a/src/frontend/apps/impress/cunningham.ts
+++ b/src/frontend/apps/impress/cunningham.ts
@@ -21,6 +21,10 @@ const config = {
             black: 900,
           },
         },
+        spacings: {
+          '0': '0',
+          none: '0',
+        },
       },
     },
     dsfr: {
@@ -102,6 +106,12 @@ const config = {
             base: 'Marianne',
           },
         },
+        logo: {
+          src: '/assets/logo-gouv.svg',
+          widthHeader: '110px',
+          widthFooter: '220px',
+          alt: 'Gouvernement Logo',
+        },
       },
       components: {
         alert: {
diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
index 2d0151d7e..f772d66fb 100644
--- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
@@ -99,12 +99,14 @@
   --c--theme--font--letterspacings--l: normal;
   --c--theme--font--letterspacings--m: normal;
   --c--theme--font--letterspacings--s: normal;
+  --c--theme--spacings--0: 0;
   --c--theme--spacings--xl: 4rem;
   --c--theme--spacings--l: 3rem;
   --c--theme--spacings--b: 1.625rem;
   --c--theme--spacings--s: 1rem;
   --c--theme--spacings--t: 0.5rem;
   --c--theme--spacings--st: 0.25rem;
+  --c--theme--spacings--none: 0;
   --c--theme--transitions--ease-in: cubic-bezier(0.32, 0, 0.67, 0);
   --c--theme--transitions--ease-out: cubic-bezier(0.33, 1, 0.68, 1);
   --c--theme--transitions--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
@@ -236,6 +238,10 @@
   --c--theme--colors--danger-900: #3a1c1c;
   --c--theme--font--families--accent: Marianne;
   --c--theme--font--families--base: Marianne;
+  --c--theme--logo--src: /assets/logo-gouv.svg;
+  --c--theme--logo--widthHeader: 110px;
+  --c--theme--logo--widthFooter: 220px;
+  --c--theme--logo--alt: Gouvernement Logo;
   --c--components--alert--border-radius: 0;
   --c--components--alert--background-color: var(
     --c--theme--colors--greyscale-000
@@ -363,7 +369,9 @@
   --c--components--button--primary--background--color-hover: var(
     --c--theme--colors--primary-900
   );
-  --c--components--button--primary--background--color-active: #2323ff;
+  --c--components--button--primary--background--color-active: var(
+    --c--theme--colors--primary-900
+  );
   --c--components--button--primary--color: #ffffff;
   --c--components--button--primary--color-hover: #ffffff;
   --c--components--button--primary--color-active: #ffffff;
@@ -889,6 +897,21 @@
 .f-accent {
   font-family: var(--c--theme--font--families--accent);
 }
+.m-0 {
+  margin: var(--c--theme--spacings--0);
+}
+.mb-0 {
+  margin-bottom: var(--c--theme--spacings--0);
+}
+.mt-0 {
+  margin-top: var(--c--theme--spacings--0);
+}
+.ml-0 {
+  margin-left: var(--c--theme--spacings--0);
+}
+.mr-0 {
+  margin-right: var(--c--theme--spacings--0);
+}
 .m-xl {
   margin: var(--c--theme--spacings--xl);
 }
@@ -979,6 +1002,36 @@
 .mr-st {
   margin-right: var(--c--theme--spacings--st);
 }
+.m-none {
+  margin: var(--c--theme--spacings--none);
+}
+.mb-none {
+  margin-bottom: var(--c--theme--spacings--none);
+}
+.mt-none {
+  margin-top: var(--c--theme--spacings--none);
+}
+.ml-none {
+  margin-left: var(--c--theme--spacings--none);
+}
+.mr-none {
+  margin-right: var(--c--theme--spacings--none);
+}
+.p-0 {
+  padding: var(--c--theme--spacings--0);
+}
+.pb-0 {
+  padding-bottom: var(--c--theme--spacings--0);
+}
+.pt-0 {
+  padding-top: var(--c--theme--spacings--0);
+}
+.pl-0 {
+  padding-left: var(--c--theme--spacings--0);
+}
+.pr-0 {
+  padding-right: var(--c--theme--spacings--0);
+}
 .p-xl {
   padding: var(--c--theme--spacings--xl);
 }
@@ -1069,3 +1122,18 @@
 .pr-st {
   padding-right: var(--c--theme--spacings--st);
 }
+.p-none {
+  padding: var(--c--theme--spacings--none);
+}
+.pb-none {
+  padding-bottom: var(--c--theme--spacings--none);
+}
+.pt-none {
+  padding-top: var(--c--theme--spacings--none);
+}
+.pl-none {
+  padding-left: var(--c--theme--spacings--none);
+}
+.pr-none {
+  padding-right: var(--c--theme--spacings--none);
+}
diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
index d311c85cf..059f2b6ef 100644
--- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
@@ -115,12 +115,14 @@ export const tokens = {
           },
         },
         spacings: {
+          '0': '0',
           xl: '4rem',
           l: '3rem',
           b: '1.625rem',
           s: '1rem',
           t: '0.5rem',
           st: '0.25rem',
+          none: '0',
         },
         transitions: {
           'ease-in': 'cubic-bezier(0.32, 0, 0.67, 0)',
@@ -264,6 +266,12 @@ export const tokens = {
           'danger-900': '#3a1c1c',
         },
         font: { families: { accent: 'Marianne', base: 'Marianne' } },
+        logo: {
+          src: '/assets/logo-gouv.svg',
+          widthHeader: '110px',
+          widthFooter: '220px',
+          alt: 'Gouvernement Logo',
+        },
       },
       components: {
         alert: {
@@ -386,7 +394,7 @@ export const tokens = {
             background: {
               color: 'var(--c--theme--colors--primary-700)',
               'color-hover': 'var(--c--theme--colors--primary-900)',
-              'color-active': '#2323ff',
+              'color-active': 'var(--c--theme--colors--primary-900)',
             },
             color: '#ffffff',
             'color-hover': '#ffffff',
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx
index ad99f4f13..75f003adb 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx
@@ -39,6 +39,7 @@ export const DocHeader = ({ doc, versionId }: DocHeaderProps) => {
             <Text
               $isMaterialIcon
               $theme="primary"
+              $variation="600"
               $size="2rem"
               $css={`&:hover {background-color: ${colorsTokens()['primary-100']}; };`}
               $hasTransition
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalCreateUpdateDoc.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalCreateUpdateDoc.tsx
index 9bf692a81..384518481 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalCreateUpdateDoc.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalCreateUpdateDoc.tsx
@@ -145,7 +145,7 @@ const ModalDoc = <T,>({
       size={ModalSize.MEDIUM}
       title={
         <Box $align="center" $gap="1rem" $margin={{ bottom: '2.5rem' }}>
-          <IconEdit width={48} color={colorsTokens()['primary-text']} />
+          <IconEdit width={48} color={colorsTokens()['primary-8 00']} />
           <Text as="h2" $size="h3" $margin="none">
             {titleModal}
           </Text>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalShare.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalShare.tsx
index 0f11a6a9e..294c2437b 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalShare.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalShare.tsx
@@ -54,7 +54,7 @@ export const ModalShare = ({ onClose, doc }: ModalShareProps) => {
             $padding="tiny"
             $gap="1rem"
           >
-            <Text $isMaterialIcon $size="48px" $theme="primary">
+            <Text $isMaterialIcon $size="48px" $theme="primary" $variation="600">
               share
             </Text>
             <Box $align="flex-start">
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
index 90fb9d68b..de90bc69d 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
@@ -94,6 +94,7 @@ export const DocsGrid = () => {
         as="h2"
         $theme="primary"
         $margin={{ bottom: 'none' }}
+        $variation="600"
       >
         {t('Documents')}
       </Text>
@@ -130,7 +131,7 @@ export const DocsGrid = () => {
             renderCell: ({ row }) => {
               return (
                 <StyledLink href={`/docs/${row.id}`}>
-                  <Text $weight="bold" $theme="primary">
+                  <Text $weight="bold" $theme="primary" $variation="900">
                     {row.title}
                   </Text>
                 </StyledLink>
@@ -143,7 +144,9 @@ export const DocsGrid = () => {
             renderCell: ({ row }) => {
               return (
                 <StyledLink href={`/docs/${row.id}`}>
-                  <Text $weight="bold">{formatDate(row.created_at)}</Text>
+                  <Text $weight="bold" $theme="primary" $variation="900">
+                    {formatDate(row.created_at)}
+                  </Text>
                 </StyledLink>
               );
             },
@@ -154,7 +157,9 @@ export const DocsGrid = () => {
             renderCell: ({ row }) => {
               return (
                 <StyledLink href={`/docs/${row.id}`}>
-                  <Text $weight="bold">{formatDate(row.updated_at)}</Text>
+                  <Text $weight="bold" $theme="primary" $variation="900">
+                    {formatDate(row.updated_at)}
+                  </Text>
                 </StyledLink>
               );
             },
@@ -165,7 +170,7 @@ export const DocsGrid = () => {
             renderCell: ({ row }) => {
               return (
                 <StyledLink href={`/docs/${row.id}`}>
-                  <Text $weight="bold">
+                  <Text $weight="bold" $theme="primary" $variation="900">
                     {transRole(currentDocRole(row.abilities))}
                   </Text>
                 </StyledLink>
@@ -178,7 +183,9 @@ export const DocsGrid = () => {
             renderCell: ({ row }) => {
               return (
                 <StyledLink href={`/docs/${row.id}`}>
-                  <Text $weight="bold">{row.accesses.length}</Text>
+                  <Text $weight="bold" $theme="primary" $variation="900">
+                    {row.accesses.length}
+                  </Text>
                 </StyledLink>
               );
             },
diff --git a/src/frontend/apps/impress/src/features/footer/Footer.tsx b/src/frontend/apps/impress/src/features/footer/Footer.tsx
index acc9c9704..8cdcb56e7 100644
--- a/src/frontend/apps/impress/src/features/footer/Footer.tsx
+++ b/src/frontend/apps/impress/src/features/footer/Footer.tsx
@@ -84,7 +84,9 @@ export const Footer = () => {
                   }
                 `}
               >
-                <Text $weight="bold">{label}</Text>
+                <Text $weight="bold" $theme="greyscale" $variation="800">
+                  {label}
+                </Text>
                 <IconLink width={18} />
               </StyledLink>
             ))}
diff --git a/src/frontend/apps/impress/src/features/header/Header.tsx b/src/frontend/apps/impress/src/features/header/Header.tsx
index 4e5a0e109..4430e2d9e 100644
--- a/src/frontend/apps/impress/src/features/header/Header.tsx
+++ b/src/frontend/apps/impress/src/features/header/Header.tsx
@@ -78,7 +78,13 @@ export const Header = () => {
               >
                 BETA
               </Text>
-              <Text $margin="none" as="h2" $theme="primary" $zIndex={1}>
+              <Text
+                $margin="none"
+                as="h2"
+                $theme="primary"
+                $variation="800"
+                $zIndex={1}
+              >
                 {t('Docs')}
               </Text>
             </Box>
diff --git a/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx b/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx
index 990cd7729..2e925e755 100644
--- a/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx
+++ b/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx
@@ -49,7 +49,9 @@ export const LanguagePicker = () => {
           $align="center"
         >
           <Image priority src={IconLanguage} alt={t('Language Icon')} />
-          <Text $theme="primary">{lang.toUpperCase()}</Text>
+          <Text $theme="greyscale" $variation="900">
+            {lang.toUpperCase()}
+          </Text>
         </Box>
       ),
     }));