From f6da4892e2e775ebaa3e2d26be7903ba101ba5cd Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Fri, 13 Sep 2024 10:09:31 +0200
Subject: [PATCH] wip

---
 src/frontend/apps/impress/cunningham.ts           | 12 ++++++++++++
 .../impress/src/cunningham/cunningham-tokens.css  |  4 ++++
 .../impress/src/cunningham/cunningham-tokens.ts   |  4 ++++
 .../docs/doc-header/components/ModalExport.tsx    | 15 +++++++++++++--
 .../docs/docs-grid/components/DocsGrid.tsx        | 13 ++++++++-----
 .../apps/impress/src/features/header/Header.tsx   |  2 +-
 6 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/src/frontend/apps/impress/cunningham.ts b/src/frontend/apps/impress/cunningham.ts
index f314e1232..0ebd5ba63 100644
--- a/src/frontend/apps/impress/cunningham.ts
+++ b/src/frontend/apps/impress/cunningham.ts
@@ -34,6 +34,12 @@ const config = {
           'padding-x': '4px',
           'padding-y': '0',
         },
+        strip: {
+          color: 'var(--c--theme--colors--danger-500)',
+        },
+        grid: {
+          color: 'var(--c--theme--colors--danger-900)',
+        },
       },
     },
     dsfr: {
@@ -337,6 +343,12 @@ const config = {
           'padding-x': '16px',
           'padding-y': '2px',
         },
+        strip: {
+          color: 'var(--c--theme--colors--primary-300)',
+        },
+        grid: {
+          color: 'var(--c--theme--colors--greyscale-500)',
+        },
       },
     },
   },
diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
index 957e80972..b1929c477 100644
--- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
@@ -125,6 +125,8 @@
   --c--components--pill--radius: 3px;
   --c--components--pill--padding-x: 4px;
   --c--components--pill--padding-y: 0;
+  --c--components--strip--color: var(--c--theme--colors--danger-500);
+  --c--components--grid--color: var(--c--theme--colors--danger-900);
 }
 .cunningham-theme--dark {
   --c--theme--colors--greyscale-100: #182536;
@@ -446,6 +448,8 @@
   --c--components--pill--radius: 8px;
   --c--components--pill--padding-x: 16px;
   --c--components--pill--padding-y: 2px;
+  --c--components--strip--color: var(--c--theme--colors--primary-300);
+  --c--components--grid--color: var(--c--theme--colors--greyscale-500);
 }
 .clr-secondary-text {
   color: var(--c--theme--colors--secondary-text);
diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
index 4cd1f47b0..b04b88d50 100644
--- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
@@ -152,6 +152,8 @@ export const tokens = {
           'padding-x': '4px',
           'padding-y': '0',
         },
+        strip: { color: 'var(--c--theme--colors--danger-500)' },
+        grid: { color: 'var(--c--theme--colors--danger-900)' },
       },
     },
     dark: {
@@ -481,6 +483,8 @@ export const tokens = {
           'padding-x': '16px',
           'padding-y': '2px',
         },
+        strip: { color: 'var(--c--theme--colors--primary-300)' },
+        grid: { color: 'var(--c--theme--colors--greyscale-500)' },
       },
     },
   },
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx
index 612869c13..3b7d1528d 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx
@@ -152,10 +152,21 @@ 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="greyscale"
+            $variation="900"
+          >
             picture_as_pdf
           </Text>
-          <Text as="h2" $size="h3" $margin="none" $theme="primary">
+          <Text
+            as="h2"
+            $size="h3"
+            $margin="none"
+            $theme="greyscale"
+            $variation="900"
+          >
             {t('Export')}
           </Text>
         </Box>
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 e3589c88c..1153f30b5 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
@@ -116,7 +116,10 @@ export const DocsGrid = ({ topSlot }: { topSlot?: ReactNode }) => {
             renderCell: ({ row }) => {
               return (
                 <StyledLink href={`/docs/${row.id}`}>
-                  <Text $weight="bold" $theme="greyscale" $variation="900">
+                  <Text
+                    $weight="bold"
+                    $color="var(--c--components--grid--color)"
+                  >
                     {row.title}
                   </Text>
                 </StyledLink>
@@ -154,7 +157,7 @@ export const DocsGrid = ({ topSlot }: { topSlot?: ReactNode }) => {
             renderCell: ({ row }) => {
               return (
                 <StyledLink href={`/docs/${row.id}`}>
-                  <Text $theme="greyscale" $variation="900">
+                  <Text $color="var(--c--components--grid--color)">
                     {formatDate(row.created_at)}
                   </Text>
                 </StyledLink>
@@ -167,7 +170,7 @@ export const DocsGrid = ({ topSlot }: { topSlot?: ReactNode }) => {
             renderCell: ({ row }) => {
               return (
                 <StyledLink href={`/docs/${row.id}`}>
-                  <Text $theme="greyscale" $variation="900">
+                  <Text $color="var(--c--components--grid--color)">
                     {formatDate(row.updated_at)}
                   </Text>
                 </StyledLink>
@@ -180,7 +183,7 @@ export const DocsGrid = ({ topSlot }: { topSlot?: ReactNode }) => {
             renderCell: ({ row }) => {
               return (
                 <StyledLink href={`/docs/${row.id}`}>
-                  <Text $theme="greyscale" $variation="900">
+                  <Text $color="var(--c--components--grid--color)">
                     {transRole(currentDocRole(row.abilities))}
                   </Text>
                 </StyledLink>
@@ -193,7 +196,7 @@ export const DocsGrid = ({ topSlot }: { topSlot?: ReactNode }) => {
             renderCell: ({ row }) => {
               return (
                 <StyledLink href={`/docs/${row.id}`}>
-                  <Text $theme="greyscale" $variation="900">
+                  <Text $color="var(--c--components--grid--color)">
                     {row.accesses.length}
                   </Text>
                 </StyledLink>
diff --git a/src/frontend/apps/impress/src/features/header/Header.tsx b/src/frontend/apps/impress/src/features/header/Header.tsx
index 4430e2d9e..98d16c40f 100644
--- a/src/frontend/apps/impress/src/features/header/Header.tsx
+++ b/src/frontend/apps/impress/src/features/header/Header.tsx
@@ -18,7 +18,7 @@ const RedStripe = styled.div`
   position: absolute;
   height: 5px;
   width: 100%;
-  background: var(--c--theme--colors--danger-500);
+  background: var(--c--components--strip--color);
   top: 0;
 `;