wip

src/frontend/apps/impress/cunningham.ts

@@ -24,6 +24,15 @@ const config = {
       components: {
         card: {
           'box-shadow': 'none',
+          'title-color': 'var(--c--theme--colors--primary-600)',
+        },
+        pill: {
+          background: 'var(--c--theme--colors--primary-600)',
+          color: 'var(--c--theme--colors--greyscale-000)',
+          weight: 'bold',
+          radius: '3px',
+          'padding-x': '4px',
+          'padding-y': '0',
         },
       },
     },
@@ -158,6 +167,7 @@ const config = {
         },
         card: {
           'box-shadow': '2px 2px 5px var(--c--theme--colors--greyscale-300)',
+          'title-color': 'var(--c--theme--colors--primary-600)',
         },
         datagrid: {
           header: {
@@ -238,7 +248,7 @@ const config = {
           'secondary-700': '#006C60',
           'secondary-800': '#00564D',
           'secondary-900': '#004039',
-          'greyscale-000': '#f6f6f6',
+          'greyscale-000': '#ffffff',
           'greyscale-100': '#EEEFF2',
           'greyscale-200': '#D3D7DE',
           'greyscale-300': '#B6BCC8',
@@ -306,9 +316,12 @@ const config = {
             'color-hover': 'var(--c--theme--colors--primary-text)',
           },
         },
+        card: {
+          'title-color': 'var(--c--theme--colors--greyscale-900)',
+        },
         datagrid: {
           header: {
-            color: 'var(--c--theme--colors--primary-700)',
+            color: 'var(--c--theme--colors--greyscale-900)',
             size: 'var(--c--theme--font--sizes--s)',
           },
           body: {
@@ -316,6 +329,14 @@ const config = {
             'background-color-hover': '#F4F4FD',
           },
         },
+        pill: {
+          background: 'var(--c--theme--colors--primary-300)',
+          color: 'var(--c--theme--colors--greyscale-900)',
+          weight: '500',
+          radius: '8px',
+          'padding-x': '16px',
+          'padding-y': '2px',
+        },
       },
     },
   },

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

@@ -40,7 +40,14 @@
 .c__datagrid__table__container > table {
   th:first-child,
   td:first-child {
-    padding-left: 24px;
+    padding-left: 3rem;
+  }
+}
+
+.c__datagrid__table__container > table {
+  th:last-child,
+  td:last-child {
+    padding-right: 3rem;
   }
 }
 

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

@@ -118,6 +118,13 @@
   --c--theme--breakpoints--xl: 1200px;
   --c--theme--breakpoints--xxl: 1400px;
   --c--components--card--box-shadow: none;
+  --c--components--card--title-color: var(--c--theme--colors--primary-600);
+  --c--components--pill--background: var(--c--theme--colors--primary-600);
+  --c--components--pill--color: var(--c--theme--colors--greyscale-000);
+  --c--components--pill--weight: bold;
+  --c--components--pill--radius: 3px;
+  --c--components--pill--padding-x: 4px;
+  --c--components--pill--padding-y: 0;
 }
 .cunningham-theme--dark {
   --c--theme--colors--greyscale-100: #182536;
@@ -285,6 +292,7 @@
   );
   --c--components--card--box-shadow: 2px 2px 5px
     var(--c--theme--colors--greyscale-300);
+  --c--components--card--title-color: var(--c--theme--colors--primary-600);
   --c--components--datagrid--header--color: var(
     --c--theme--colors--primary-600
   );
@@ -364,7 +372,7 @@
   --c--theme--colors--secondary-700: #006c60;
   --c--theme--colors--secondary-800: #00564d;
   --c--theme--colors--secondary-900: #004039;
-  --c--theme--colors--greyscale-000: #f6f6f6;
+  --c--theme--colors--greyscale-000: #ffffff;
   --c--theme--colors--greyscale-100: #eeeff2;
   --c--theme--colors--greyscale-200: #d3d7de;
   --c--theme--colors--greyscale-300: #b6bcc8;
@@ -425,12 +433,19 @@
   --c--components--button--tertiary-text--color-hover: var(
     --c--theme--colors--primary-text
   );
+  --c--components--card--title-color: var(--c--theme--colors--greyscale-900);
   --c--components--datagrid--header--color: var(
-    --c--theme--colors--primary-700
+    --c--theme--colors--greyscale-900
   );
   --c--components--datagrid--header--size: var(--c--theme--font--sizes--s);
   --c--components--datagrid--body--background-color: transparent;
   --c--components--datagrid--body--background-color-hover: #f4f4fd;
+  --c--components--pill--background: var(--c--theme--colors--primary-300);
+  --c--components--pill--color: var(--c--theme--colors--greyscale-900);
+  --c--components--pill--weight: 500;
+  --c--components--pill--radius: 8px;
+  --c--components--pill--padding-x: 16px;
+  --c--components--pill--padding-y: 2px;
 }
 .clr-secondary-text {
   color: var(--c--theme--colors--secondary-text);

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

@@ -139,7 +139,20 @@ export const tokens = {
           xxl: '1400px',
         },
       },
-      components: { card: { 'box-shadow': 'none' } },
+      components: {
+        card: {
+          'box-shadow': 'none',
+          'title-color': 'var(--c--theme--colors--primary-600)',
+        },
+        pill: {
+          background: 'var(--c--theme--colors--primary-600)',
+          color: 'var(--c--theme--colors--greyscale-000)',
+          weight: 'bold',
+          radius: '3px',
+          'padding-x': '4px',
+          'padding-y': '0',
+        },
+      },
     },
     dark: {
       theme: {
@@ -316,6 +329,7 @@ export const tokens = {
         },
         card: {
           'box-shadow': '2px 2px 5px var(--c--theme--colors--greyscale-300)',
+          'title-color': 'var(--c--theme--colors--primary-600)',
         },
         datagrid: {
           header: {
@@ -388,7 +402,7 @@ export const tokens = {
           'secondary-700': '#006C60',
           'secondary-800': '#00564D',
           'secondary-900': '#004039',
-          'greyscale-000': '#f6f6f6',
+          'greyscale-000': '#ffffff',
           'greyscale-100': '#EEEFF2',
           'greyscale-200': '#D3D7DE',
           'greyscale-300': '#B6BCC8',
@@ -448,9 +462,10 @@ export const tokens = {
             'color-hover': 'var(--c--theme--colors--primary-text)',
           },
         },
+        card: { 'title-color': 'var(--c--theme--colors--greyscale-900)' },
         datagrid: {
           header: {
-            color: 'var(--c--theme--colors--primary-700)',
+            color: 'var(--c--theme--colors--greyscale-900)',
             size: 'var(--c--theme--font--sizes--s)',
           },
           body: {
@@ -458,6 +473,14 @@ export const tokens = {
             'background-color-hover': '#F4F4FD',
           },
         },
+        pill: {
+          background: 'var(--c--theme--colors--primary-300)',
+          color: 'var(--c--theme--colors--greyscale-900)',
+          weight: '500',
+          radius: '8px',
+          'padding-x': '16px',
+          'padding-y': '2px',
+        },
       },
     },
   },

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx

@@ -90,7 +90,7 @@ export const DocsGrid = ({ topSlot }: { topSlot?: ReactNode }) => {
       <DocsGridStyle />
       <Box
         style={{
-          padding: '1.5rem',
+          padding: '1.5rem 3rem',
           display: 'flex',
           alignItems: 'center',
           flexDirection: 'row',
@@ -100,9 +100,7 @@ export const DocsGrid = ({ topSlot }: { topSlot?: ReactNode }) => {
         <Text
           $weight="bold"
           as="h2"
-          $theme="primary"
-          $margin="none"
-          $variation="700"
+          $color="var(--c--components--card--title-color)"
         >
           {t('Documents')}
         </Text>
@@ -134,11 +132,14 @@ export const DocsGrid = ({ topSlot }: { topSlot?: ReactNode }) => {
                 <StyledLink href={`/docs/${row.id}`}>
                   {row.is_public && (
                     <Text
-                      $weight="bold"
-                      $background={colorsTokens()['primary-600']}
-                      $color="white"
-                      $padding="xtiny"
-                      $radius="3px"
+                      $weight="var(--c--components--pill--bold)"
+                      $background="var(--c--components--pill--background)"
+                      $color="var(--c--components--pill--color)"
+                      $padding={{
+                        horizontal: 'var(--c--components--pill--padding-x)',
+                        vertical: 'var(--c--components--pill--padding-y)',
+                      }}
+                      $radius="var(--c--components--pill--radius)"
                     >
                       {row.is_public ? t('Public') : ''}
                     </Text>
@@ -200,7 +201,7 @@ export const DocsGrid = ({ topSlot }: { topSlot?: ReactNode }) => {
             },
           },
           {
-            id: 'column-actions',
+            id: 'actions',
             renderCell: ({ row }) => {
               return <DocsGridActions doc={row} />;
             },