From 3e9a3fb682c21e1a995ef63e2b0b818fc9b78264 Mon Sep 17 00:00:00 2001
From: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com>
Date: Wed, 5 Nov 2025 11:31:34 +0100
Subject: [PATCH] [automated] Update Design Tokens

---
 packages/design-system/src/css/style.css | 33 +++++++++---------------
 1 file changed, 12 insertions(+), 21 deletions(-)

diff --git a/packages/design-system/src/css/style.css b/packages/design-system/src/css/style.css
index 3e7ec9891..12b6a5863 100644
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -28,6 +28,7 @@
   --color-charcoal-600: #262729;
   --color-charcoal-700: #202121;
   --color-charcoal-800: #171718;
+  --color-charcoal-900: #141414;
 
   --color-neutral-550: #636363;
 
@@ -36,8 +37,8 @@
   --color-ash-800: #444444;
 
   --color-ivory-100: #fdfbfa;
-  --color-ivory-200: #faf9f5;
-  --color-ivory-300: #f0eee6;
+  --color-ivory-200: #e1ded5;
+  --color-ivory-300: #d6cfc2;
 
   --color-smoke-100: #f3f3f3;
   --color-smoke-200: #e9e9e9;
@@ -61,6 +62,7 @@
   --color-black: #000000;
 
   --color-electric-400: #f0ff41;
+  --color-saphire-700: #172dd7;
   --color-sapphire-700: #172dd7;
   --color-brand-yellow: var(--color-electric-400);
   --color-brand-blue: var(--color-sapphire-700);
@@ -73,7 +75,8 @@
 
   --color-jade-400: #47e469;
   --color-jade-600: #00cd72;
-  --color-graphite-400: #9C9EAB;
+  --color-graphite-400: #9c9eab;
+  --color-graphite-700: #5b5e7d;
 
   --color-gold-400: #fcbf64;
   --color-gold-500: #fdab34;
@@ -102,21 +105,9 @@
   --color-node-hover-100: rgb(from var(--color-charcoal-800) r g b/ 0.15);
   --color-node-hover-200: rgb(from var(--color-charcoal-800) r g b/ 0.1);
   --color-modal-tag: rgb(from var(--color-smoke-400) r g b/ 0.4);
-  --color-alpha-charcoal-600-30: color-mix(
-    in srgb,
-    var(--color-charcoal-600) 30%,
-    transparent
-  );
-  --color-alpha-ash-500-20: color-mix(
-    in srgb,
-    var(--color-ash-500) 20%,
-    transparent
-  );
-  --color-alpha-smoke-500-50: color-mix(
-    in srgb,
-    var(--color-smoke-500) 50%,
-    transparent
-  );
+  --color-alpha-charcoal-600-30: #2627294d;
+  --color-alpha-ash-500-20: #82828233;
+  --color-alpha-smoke-500-50: #c5c5c580;
   --color-alpha-smoke-500-20: #c5c5c533;
   --color-alpha-smoke-400-40: #d9d9d966;
   --color-alpha-azure-600-30: #0b8ce94d;
@@ -226,9 +217,9 @@
   --muted-foreground: var(--color-charcoal-200);
   --base-foreground: var(--color-charcoal-800);
   --brand-yellow: var(--color-electric-400);
-  --brand-blue: var(--color-sapphire-700);
+  --brand-blue: var(--color-saphire-700);
   --secondary-background: var(--color-smoke-200);
-  --secondary-background-hover: var(--color-smoke-200);
+  --secondary-background-hover: var(--color-smoke-400);
   --secondary-background-selected: var(--color-smoke-600);
   --base-background: var(--color-white);
   --primary-background: var(--color-azure-400);
@@ -335,7 +326,7 @@
   --muted-foreground: var(--color-smoke-800);
   --base-foreground: var(--color-white);
   --brand-yellow: var(--color-electric-400);
-  --brand-blue: var(--color-sapphire-700);
+  --brand-blue: var(--color-saphire-700);
   --secondary-background: var(--color-charcoal-600);
   --secondary-background-hover: var(--color-charcoal-400);
   --secondary-background-selected: var(--color-charcoal-200);