wip

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)',
+        },
       },
     },
   },

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);

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)' },
       },
     },
   },

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>

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>

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;
 `;