fix: update the new color palette

ForkbombEu · Mar 13, 2024 · 4e7830e · 4e7830e
1 parent cd3edf2
commit 4e7830e
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 21 deletions.
diff --git a/src/components/tokens/Colors.mdx b/src/components/tokens/Colors.mdx
@@ -3,12 +3,14 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
 <Meta title="Colors" />
 
 <ColorPalette>
-  <ColorItem title="--surface" subtitle="Used for the background of the pages" colors={{ Light: '#E9EBEF', Dark: '#1F2433' }} />
-  <ColorItem title="--primary" subtitle="Used as the primary color" colors={{ Light: '#D2D7E5', Dark: '#253151' }} />
+  <ColorItem title="--surface" subtitle="Used for the background of the pages" colors={{ Light: '#E9EBEF', Dark: '#253151' }} />
+  <ColorItem title="--primary" subtitle="Used as the primary color" colors={{ Light: '#D2D7E5', Dark: '#36415C' }} />
   <ColorItem title="--accent" subtitle="Used for the accent color" colors={{ Light: '#223360', Dark: '#DFDDD7' }} />
-  <ColorItem title="--on-accent" subtitle="Used for the text over the accent color" colors={{ Light: '#DFDDD7', Dark: '#223360' }} />
+  <ColorItem title="--on-accent" subtitle="Used for the text over the accent color" colors={{ Light: '#DFDDD7', Dark: '#36415C' }} />
   <ColorItem title="--on" subtitle="Used for the text main color" colors={{ Light: '#2D2D2D', Dark: '#F7FAFF' }} />
-  <ColorItem title="--on-alt" subtitle="Used for textes alternative colors" colors={{ Light: '#5D5D65', Dark: '#C0C0CA' }} />
+  <ColorItem title="--on-alt" subtitle="Or Secondary used for alternative text colors" colors={{ Light: '#5D5D65', Dark: '#C0C0CA' }} />
+  <ColorItem title="--stroke" subtitle="" colors={{ Light: '#BBC0CD', Dark: '#444e69' }} />
+  <ColorItem title="--ighglight" subtitle="" colors={{ Light: '#C9CEDC', Dark: '#546080' }} />
   <ColorItem title="--success" subtitle="" colors={{ Light: '#279B48', Dark: '#4ECB71' }} />
   <ColorItem title="--warning" subtitle="" colors={{ Light: '#E58600', Dark: '#FF9601' }} />
   <ColorItem title="--error" subtitle="" colors={{ Light: '#EE342B', Dark: '#FF443B' }} />

diff --git a/src/global/global.css b/src/global/global.css
@@ -21,6 +21,8 @@
     --on-accent: #dfddd7;
     --on: #2d2d2d;
     --on-alt: #5d5d65;
+    --stroke: #bbc0cd;
+    --highlight: #c9cedc;
     --success: #279b48;
     --warning: #e58600;
     --error: #ee342b;
@@ -31,12 +33,14 @@
   }
 
   .dark {
-    --surface: #1f2433;
-    --primary: #253151;
+    --surface: #253151;
+    --primary: #36415C;
     --accent: #dfddd7;
-    --on-accent: #223360;
+    --on-accent: #36415C;
     --on: #f7faff;
     --on-alt: #c0c0ca;
+    --stroke: #444E69;
+    --highlight: #546080;
     --success: #4ecb71;
     --warning: #ff9601;
     --error: #ff443b;
@@ -46,18 +50,19 @@
 
   @media (prefers-color-scheme: dark) {
     :root {
-      --surface: #1f2433;
-      --primary: #253151;
-      --accent: #dfddd7;
-      --on-accent: #223360;
-      --on: #f7faff;
-      --on-alt: #c0c0ca;
-      --success: #4ecb71;
-      --warning: #ff9601;
-      --error: #ff443b;
-      --background-card-url: url('https://cdn.jsdelivr.net/npm/@didroom/components@latest/dist/didroom-components/assets/rect-dark.png');
-      --background-card-url: url('/dist/didroom-components/assets/rect-dark.png');
-      --input-background: #374151;
+    --surface: #253151;
+    --primary: #36415C;
+    --accent: #dfddd7;
+    --on-accent: #36415C;
+    --on: #f7faff;
+    --on-alt: #c0c0ca;
+    --stroke: #444E69;
+    --highlight: #546080;
+    --success: #4ecb71;
+    --warning: #ff9601;
+    --error: #ff443b;
+    --background-card-url: url('https://cdn.jsdelivr.net/npm/@didroom/components@latest/dist/didroom-components/assets/rect-dark.png');
+    --input-background: #374151;
     }
   }
 }

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -11,10 +11,12 @@ export default {
       colors: {
         'surface': 'var(--surface)',
         'primary': 'var(--primary)',
-        'on': 'var(--on)',
-        'on-alt': 'var(--on-alt)',
         'accent': 'var(--accent)',
         'on-accent': 'var(--on-accent)',
+        'on': 'var(--on)',
+        'on-alt': 'var(--on-alt)',
+        'stroke': 'var(--stroke)',
+        'highlight': 'var(--highlight)',
         'success': 'var(--success)',
         'warning': 'var(--warning)',
         'error': 'var(--error)',