From b0f9430d2334ce8dabaff37319ebc86f9430a661 Mon Sep 17 00:00:00 2001
From: Steven Straatemans <steven@straatemans.nl>
Date: Thu, 5 Dec 2024 16:44:33 +0100
Subject: [PATCH] syncen colours

---
 .../kode-ui/src/components/Table/Table.css.ts |  4 +-
 .../kode-ui/src/styles/tokens/contract.css.ts | 86 +++++++++++--------
 .../kode-ui/src/styles/tokens/dark.css.ts     | 32 ++++---
 .../kode-ui/src/styles/tokens/light.css.ts    | 32 ++++---
 4 files changed, 90 insertions(+), 64 deletions(-)

diff --git a/packages/libs/kode-ui/src/components/Table/Table.css.ts b/packages/libs/kode-ui/src/components/Table/Table.css.ts
index 7cb5723fd4..bf59e11450 100644
--- a/packages/libs/kode-ui/src/components/Table/Table.css.ts
+++ b/packages/libs/kode-ui/src/components/Table/Table.css.ts
@@ -244,7 +244,7 @@ export const tableDataCell = recipe({
           border: 'hairline',
         }),
         {
-          backgroundColor: token('color.background.layer.default'),
+          backgroundColor: token('color.background.table.row.default'),
           backdropFilter: 'blur(18px)',
           borderInlineWidth: '0!important',
           selectors: {
@@ -259,7 +259,7 @@ export const tableDataCell = recipe({
               borderInlineEndWidth: `${token('border.width.hairline')}!important`,
             },
             [`${tableRow}[data-hovered] &`]: {
-              backgroundColor: token('color.neutral.n1@alpha80'),
+              backgroundColor: token('color.background.table.row.@hover'),
             },
           },
         },
diff --git a/packages/libs/kode-ui/src/styles/tokens/contract.css.ts b/packages/libs/kode-ui/src/styles/tokens/contract.css.ts
index c1a4f516d3..274c689fd8 100644
--- a/packages/libs/kode-ui/src/styles/tokens/contract.css.ts
+++ b/packages/libs/kode-ui/src/styles/tokens/contract.css.ts
@@ -783,6 +783,42 @@ export const tokens = createThemeContract({
          */
         toast: '',
       },
+      effect: {
+        shadow: {
+          /**
+           * This is the shadow 1 description
+           * @light  `"4px 0.5rem tokens.kda.foundation.size.n2 4px #000000"`
+           * @dark  `"4px 0.5rem tokens.kda.foundation.size.n2 4px #000000"`
+           */
+          level1: '',
+          /**
+           * This is the shadow 2 description
+           * @light  `"4rem 4rem tokens.kda.foundation.size.n2 2rem #000000"`
+           * @dark  `"4rem 4rem tokens.kda.foundation.size.n2 2rem #000000"`
+           */
+          level2: '',
+          /**
+           * This is the shadow 3 description updated
+           * @light  `"0px 0px tokens.kda.foundation.size.n2 24px #000000"`
+           * @dark  `"0px 0px tokens.kda.foundation.size.n2 24px #000000"`
+           */
+          level3: '',
+        },
+      },
+      layout: {
+        content: {
+          /**
+           * @light  `"33.75rem"`
+           * @dark  `"33.75rem"`
+           */
+          minWidth: '',
+          /**
+           * @light  `"42.5rem"`
+           * @dark  `"42.5rem"`
+           */
+          maxWidth: '',
+        },
+      },
       color: {
         accent: {
           /**
@@ -1593,6 +1629,20 @@ export const tokens = createThemeContract({
              */
             default: '',
           },
+          table: {
+            row: {
+              /**
+               * @light {@link tokens.kda.foundation.color.background.layer.default}
+               * @dark {@link tokens.kda.foundation.color.background.layer.default}
+               */
+              default: '',
+              /**
+               * @light {@link tokens.kda.foundation.color.neutral.n1@alpha80}
+               * @dark {@link tokens.kda.foundation.color.neutral.n10@alpha80}
+               */
+              '@hover': '',
+            },
+          },
         },
         border: {
           base: {
@@ -5041,28 +5091,6 @@ export const tokens = createThemeContract({
           },
         },
       },
-      effect: {
-        shadow: {
-          /**
-           * This is the shadow 1 description
-           * @light  `"4px 0.5rem tokens.kda.foundation.size.n2 4px #000000"`
-           * @dark  `"4px 0.5rem tokens.kda.foundation.size.n2 4px #000000"`
-           */
-          level1: '',
-          /**
-           * This is the shadow 2 description
-           * @light  `"4rem 4rem tokens.kda.foundation.size.n2 2rem #000000"`
-           * @dark  `"4rem 4rem tokens.kda.foundation.size.n2 2rem #000000"`
-           */
-          level2: '',
-          /**
-           * This is the shadow 3 description updated
-           * @light  `"0px 0px tokens.kda.foundation.size.n2 24px #000000"`
-           * @dark  `"0px 0px tokens.kda.foundation.size.n2 24px #000000"`
-           */
-          level3: '',
-        },
-      },
       icon: {
         size: {
           /**
@@ -5102,20 +5130,6 @@ export const tokens = createThemeContract({
           xxl: '',
         },
       },
-      layout: {
-        content: {
-          /**
-           * @light  `"33.75rem"`
-           * @dark  `"33.75rem"`
-           */
-          minWidth: '',
-          /**
-           * @light  `"42.5rem"`
-           * @dark  `"42.5rem"`
-           */
-          maxWidth: '',
-        },
-      },
       typography: {
         family: {
           /**
diff --git a/packages/libs/kode-ui/src/styles/tokens/dark.css.ts b/packages/libs/kode-ui/src/styles/tokens/dark.css.ts
index 90be2f4159..c746f9558e 100644
--- a/packages/libs/kode-ui/src/styles/tokens/dark.css.ts
+++ b/packages/libs/kode-ui/src/styles/tokens/dark.css.ts
@@ -207,6 +207,19 @@ export const darkThemeValues = {
         sticky: '100',
         toast: '10000',
       },
+      effect: {
+        shadow: {
+          level1: `4px 0.5rem ${tokens.kda.foundation.size.n2} 4px #000000`,
+          level2: `4rem 4rem ${tokens.kda.foundation.size.n2} 2rem #000000`,
+          level3: `0px 0px ${tokens.kda.foundation.size.n2} 24px #000000`,
+        },
+      },
+      layout: {
+        content: {
+          minWidth: '33.75rem',
+          maxWidth: '42.5rem',
+        },
+      },
       color: {
         accent: {
           blue: tokens.kda.foundation.color.palette.blue.n50,
@@ -449,6 +462,12 @@ export const darkThemeValues = {
           skeleton: {
             default: tokens.kda.foundation.color.neutral['n20@alpha80'],
           },
+          table: {
+            row: {
+              default: tokens.kda.foundation.color.background.layer.default,
+              '@hover': tokens.kda.foundation.color.neutral['n10@alpha80'],
+            },
+          },
         },
         border: {
           base: {
@@ -1309,13 +1328,6 @@ export const darkThemeValues = {
           },
         },
       },
-      effect: {
-        shadow: {
-          level1: `4px 0.5rem ${tokens.kda.foundation.size.n2} 4px #000000`,
-          level2: `4rem 4rem ${tokens.kda.foundation.size.n2} 2rem #000000`,
-          level3: `0px 0px ${tokens.kda.foundation.size.n2} 24px #000000`,
-        },
-      },
       icon: {
         size: {
           xxs: tokens.kda.foundation.size.n3,
@@ -1327,12 +1339,6 @@ export const darkThemeValues = {
           xxl: tokens.kda.foundation.size.n16,
         },
       },
-      layout: {
-        content: {
-          minWidth: '33.75rem',
-          maxWidth: '42.5rem',
-        },
-      },
       typography: {
         family: {
           primaryFont: 'Inter',
diff --git a/packages/libs/kode-ui/src/styles/tokens/light.css.ts b/packages/libs/kode-ui/src/styles/tokens/light.css.ts
index 35f731494d..f2dac26c73 100644
--- a/packages/libs/kode-ui/src/styles/tokens/light.css.ts
+++ b/packages/libs/kode-ui/src/styles/tokens/light.css.ts
@@ -207,6 +207,19 @@ export const lightThemeValues = {
         sticky: '100',
         toast: '10000',
       },
+      effect: {
+        shadow: {
+          level1: `4px 0.5rem ${tokens.kda.foundation.size.n2} 4px #000000`,
+          level2: `4rem 4rem ${tokens.kda.foundation.size.n2} 2rem #000000`,
+          level3: `0px 0px ${tokens.kda.foundation.size.n2} 24px #000000`,
+        },
+      },
+      layout: {
+        content: {
+          minWidth: '33.75rem',
+          maxWidth: '42.5rem',
+        },
+      },
       color: {
         accent: {
           blue: tokens.kda.foundation.color.palette.blue.n50,
@@ -449,6 +462,12 @@ export const lightThemeValues = {
           skeleton: {
             default: tokens.kda.foundation.color.neutral.n10,
           },
+          table: {
+            row: {
+              default: tokens.kda.foundation.color.background.layer.default,
+              '@hover': tokens.kda.foundation.color.neutral['n1@alpha80'],
+            },
+          },
         },
         border: {
           base: {
@@ -1309,13 +1328,6 @@ export const lightThemeValues = {
           },
         },
       },
-      effect: {
-        shadow: {
-          level1: `4px 0.5rem ${tokens.kda.foundation.size.n2} 4px #000000`,
-          level2: `4rem 4rem ${tokens.kda.foundation.size.n2} 2rem #000000`,
-          level3: `0px 0px ${tokens.kda.foundation.size.n2} 24px #000000`,
-        },
-      },
       icon: {
         size: {
           xxs: tokens.kda.foundation.size.n3,
@@ -1327,12 +1339,6 @@ export const lightThemeValues = {
           xxl: tokens.kda.foundation.size.n16,
         },
       },
-      layout: {
-        content: {
-          minWidth: '33.75rem',
-          maxWidth: '42.5rem',
-        },
-      },
       typography: {
         family: {
           primaryFont: 'Inter',