Mercurial

diff design_system/src/styles/tokens.css @ 254:2b6e732087ff

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add complete native component catalog Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 15:12:09 -0700
parents 7a7581f040e8
children 30c2196d03d4
line wrap: on
line diff
--- a/design_system/src/styles/tokens.css	Tue Aug 04 12:21:19 2026 -0700
+++ b/design_system/src/styles/tokens.css	Tue Aug 04 15:12:09 2026 -0700
@@ -1,6 +1,143 @@
 :root {
   color-scheme: light;
 
+  /* Warm primitive ramps: restrained enough for large surfaces, distinct
+     enough for data and status work. */
+  --zen-color-neutral-50: #fffdf7;
+  --zen-color-neutral-100: #f7f3e8;
+  --zen-color-neutral-200: #ece5d5;
+  --zen-color-neutral-300: #ddd2bd;
+  --zen-color-neutral-400: #b9aa90;
+  --zen-color-neutral-500: #8e8069;
+  --zen-color-neutral-600: #6f6351;
+  --zen-color-neutral-700: #564c3e;
+  --zen-color-neutral-800: #3b352d;
+  --zen-color-neutral-900: #27241f;
+  --zen-color-neutral-950: #171613;
+
+  --zen-color-red-50: #fff8f5;
+  --zen-color-red-100: #f9e9e2;
+  --zen-color-red-200: #efd1c5;
+  --zen-color-red-300: #dda995;
+  --zen-color-red-400: #c77c63;
+  --zen-color-red-500: #a9553f;
+  --zen-color-red-600: #8f4132;
+  --zen-color-red-700: #71342a;
+  --zen-color-red-800: #5b2e27;
+  --zen-color-red-900: #4b2924;
+  --zen-color-red-950: #291411;
+
+  --zen-color-orange-50: #fff8ed;
+  --zen-color-orange-100: #fcebd1;
+  --zen-color-orange-200: #f7d4a1;
+  --zen-color-orange-300: #efb670;
+  --zen-color-orange-400: #de8d3f;
+  --zen-color-orange-500: #c76a26;
+  --zen-color-orange-600: #a94f1c;
+  --zen-color-orange-700: #873d1b;
+  --zen-color-orange-800: #6d331c;
+  --zen-color-orange-900: #5b2d1d;
+  --zen-color-orange-950: #32160c;
+
+  --zen-color-amber-50: #fffbea;
+  --zen-color-amber-100: #f6efc6;
+  --zen-color-amber-200: #ebde8b;
+  --zen-color-amber-300: #d9c455;
+  --zen-color-amber-400: #bfa332;
+  --zen-color-amber-500: #9e8124;
+  --zen-color-amber-600: #80651e;
+  --zen-color-amber-700: #664e1d;
+  --zen-color-amber-800: #55411e;
+  --zen-color-amber-900: #49391e;
+  --zen-color-amber-950: #291e0c;
+
+  --zen-color-green-50: #f6f8ed;
+  --zen-color-green-100: #e9edd5;
+  --zen-color-green-200: #d0d9aa;
+  --zen-color-green-300: #afbf79;
+  --zen-color-green-400: #8da053;
+  --zen-color-green-500: #6d8139;
+  --zen-color-green-600: #55672d;
+  --zen-color-green-700: #424f27;
+  --zen-color-green-800: #374124;
+  --zen-color-green-900: #303923;
+  --zen-color-green-950: #181f10;
+
+  --zen-color-teal-50: #eff9f5;
+  --zen-color-teal-100: #dcefe8;
+  --zen-color-teal-200: #b9ded1;
+  --zen-color-teal-300: #8cc6b4;
+  --zen-color-teal-400: #5fa793;
+  --zen-color-teal-500: #438878;
+  --zen-color-teal-600: #356d61;
+  --zen-color-teal-700: #2d574f;
+  --zen-color-teal-800: #28463f;
+  --zen-color-teal-900: #243b36;
+  --zen-color-teal-950: #10221f;
+
+  --zen-color-blue-50: #f3f6fa;
+  --zen-color-blue-100: #e4eaf2;
+  --zen-color-blue-200: #cbd7e6;
+  --zen-color-blue-300: #a6bad2;
+  --zen-color-blue-400: #7b99b8;
+  --zen-color-blue-500: #5c7d9d;
+  --zen-color-blue-600: #48647f;
+  --zen-color-blue-700: #3c5167;
+  --zen-color-blue-800: #354655;
+  --zen-color-blue-900: #303c49;
+  --zen-color-blue-950: #1c252e;
+
+  --zen-color-violet-50: #f8f5f8;
+  --zen-color-violet-100: #eee7ee;
+  --zen-color-violet-200: #dfd1df;
+  --zen-color-violet-300: #c9b1c8;
+  --zen-color-violet-400: #ad8dad;
+  --zen-color-violet-500: #916f91;
+  --zen-color-violet-600: #755774;
+  --zen-color-violet-700: #5e465d;
+  --zen-color-violet-800: #4e3b4d;
+  --zen-color-violet-900: #423541;
+  --zen-color-violet-950: #281d27;
+
+  --zen-color-rose-50: #fff6f6;
+  --zen-color-rose-100: #f8e7e7;
+  --zen-color-rose-200: #efcfd0;
+  --zen-color-rose-300: #dfa9ad;
+  --zen-color-rose-400: #ca7d84;
+  --zen-color-rose-500: #ae5b65;
+  --zen-color-rose-600: #924550;
+  --zen-color-rose-700: #763943;
+  --zen-color-rose-800: #63333b;
+  --zen-color-rose-900: #552f36;
+  --zen-color-rose-950: #30171c;
+
+  --zen-color-brown-50: #faf7f2;
+  --zen-color-brown-100: #efe8dd;
+  --zen-color-brown-200: #ddcebb;
+  --zen-color-brown-300: #c5ac91;
+  --zen-color-brown-400: #a8896c;
+  --zen-color-brown-500: #8d6d52;
+  --zen-color-brown-600: #725641;
+  --zen-color-brown-700: #5b4436;
+  --zen-color-brown-800: #4d3a31;
+  --zen-color-brown-900: #42332c;
+  --zen-color-brown-950: #251b17;
+
+  /* Material names are stable aliases for the palette's visual character. */
+  --zen-color-paper: var(--zen-color-neutral-50);
+  --zen-color-washi: var(--zen-color-neutral-100);
+  --zen-color-linen: var(--zen-color-neutral-200);
+  --zen-color-sumi: var(--zen-color-neutral-950);
+  --zen-color-brick: var(--zen-color-red-600);
+  --zen-color-persimmon: var(--zen-color-orange-500);
+  --zen-color-ochre: var(--zen-color-amber-500);
+  --zen-color-moss: var(--zen-color-green-600);
+  --zen-color-patina: var(--zen-color-teal-600);
+  --zen-color-indigo: var(--zen-color-blue-700);
+  --zen-color-plum: var(--zen-color-violet-700);
+  --zen-color-clay: var(--zen-color-rose-500);
+  --zen-color-wood: var(--zen-color-brown-600);
+
   --zen-color-canvas: #f7f3e8;
   --zen-color-surface: #fffdf6;
   --zen-color-surface-raised: #ffffff;
@@ -9,6 +146,7 @@
   --zen-color-border: #272b35;
   --zen-color-accent: #ffb000;
   --zen-color-accent-hover: #ffca4a;
+  --zen-color-on-accent: #171a21;
   --zen-color-info: #2764d7;
   --zen-color-on-info: #ffffff;
   --zen-color-success: #18794e;
@@ -18,6 +156,34 @@
   --zen-color-danger: #c62f3e;
   --zen-color-on-danger: #ffffff;
   --zen-color-focus: #7c3aed;
+  --zen-color-surface-muted: var(--zen-color-neutral-100);
+  --zen-color-surface-sunken: var(--zen-color-neutral-200);
+  --zen-color-surface-overlay: rgba(23, 22, 19, 0.56);
+  --zen-color-text-subtle: var(--zen-color-neutral-600);
+  --zen-color-text-inverse: var(--zen-color-neutral-50);
+  --zen-color-border-muted: var(--zen-color-neutral-300);
+  --zen-color-border-strong: var(--zen-color-neutral-800);
+  --zen-color-accent-muted: var(--zen-color-amber-100);
+  --zen-color-info-muted: var(--zen-color-blue-100);
+  --zen-color-success-muted: var(--zen-color-green-100);
+  --zen-color-warning-muted: var(--zen-color-orange-100);
+  --zen-color-danger-muted: var(--zen-color-red-100);
+  --zen-color-disabled: var(--zen-color-neutral-300);
+  --zen-color-selection: var(--zen-color-amber-200);
+  --zen-color-code-surface: #111318;
+  --zen-color-code-text: #f4f4f5;
+  --zen-color-gridline: rgba(127, 127, 127, 0.08);
+
+  --zen-color-data-1: var(--zen-color-indigo);
+  --zen-color-data-2: var(--zen-color-persimmon);
+  --zen-color-data-3: var(--zen-color-moss);
+  --zen-color-data-4: var(--zen-color-plum);
+  --zen-color-data-5: var(--zen-color-ochre);
+  --zen-color-data-6: var(--zen-color-patina);
+  --zen-color-data-7: var(--zen-color-brick);
+  --zen-color-data-8: var(--zen-color-wood);
+  --zen-color-data-9: var(--zen-color-clay);
+  --zen-color-data-10: var(--zen-color-blue-400);
 
   --zen-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --zen-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
@@ -42,6 +208,8 @@
   --zen-border-width: 2px;
   --zen-shadow-sm: 3px 3px 0 rgba(23, 26, 33, 0.16);
   --zen-shadow-md: 7px 7px 0 rgba(23, 26, 33, 0.16);
+  --zen-shadow-hover: 5px 5px 0 rgba(23, 26, 33, 0.18);
+  --zen-shadow-lifted: 10px 10px 0 rgba(23, 26, 33, 0.18);
   --zen-motion-fast: 120ms;
   --zen-content-width: 76rem;
 }
@@ -56,6 +224,7 @@
   --zen-color-border: #f5f1e8;
   --zen-color-accent: #ffc247;
   --zen-color-accent-hover: #ffd77d;
+  --zen-color-on-accent: #171a21;
   --zen-color-info: #8ab4ff;
   --zen-color-on-info: #171a21;
   --zen-color-success: #65d6a3;
@@ -65,8 +234,37 @@
   --zen-color-danger: #ff8792;
   --zen-color-on-danger: #171a21;
   --zen-color-focus: #c4a5ff;
+  --zen-color-surface-muted: var(--zen-color-neutral-800);
+  --zen-color-surface-sunken: var(--zen-color-neutral-900);
+  --zen-color-surface-overlay: rgba(0, 0, 0, 0.68);
+  --zen-color-text-subtle: var(--zen-color-neutral-400);
+  --zen-color-text-inverse: var(--zen-color-neutral-950);
+  --zen-color-border-muted: var(--zen-color-neutral-700);
+  --zen-color-border-strong: var(--zen-color-neutral-200);
+  --zen-color-accent-muted: var(--zen-color-amber-800);
+  --zen-color-info-muted: var(--zen-color-blue-800);
+  --zen-color-success-muted: var(--zen-color-green-800);
+  --zen-color-warning-muted: var(--zen-color-orange-800);
+  --zen-color-danger-muted: var(--zen-color-red-800);
+  --zen-color-disabled: var(--zen-color-neutral-700);
+  --zen-color-selection: var(--zen-color-amber-800);
+  --zen-color-code-surface: #0b0d12;
+  --zen-color-code-text: #f4f4f5;
+  --zen-color-gridline: rgba(255, 255, 255, 0.06);
+  --zen-color-data-1: var(--zen-color-blue-300);
+  --zen-color-data-2: var(--zen-color-orange-300);
+  --zen-color-data-3: var(--zen-color-green-300);
+  --zen-color-data-4: var(--zen-color-violet-300);
+  --zen-color-data-5: var(--zen-color-amber-300);
+  --zen-color-data-6: var(--zen-color-teal-300);
+  --zen-color-data-7: var(--zen-color-red-300);
+  --zen-color-data-8: var(--zen-color-brown-300);
+  --zen-color-data-9: var(--zen-color-rose-300);
+  --zen-color-data-10: var(--zen-color-blue-200);
   --zen-shadow-sm: 3px 3px 0 rgba(0, 0, 0, 0.5);
   --zen-shadow-md: 7px 7px 0 rgba(0, 0, 0, 0.5);
+  --zen-shadow-hover: 5px 5px 0 rgba(0, 0, 0, 0.55);
+  --zen-shadow-lifted: 10px 10px 0 rgba(0, 0, 0, 0.55);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -80,6 +278,7 @@
     --zen-color-border: #f5f1e8;
     --zen-color-accent: #ffc247;
     --zen-color-accent-hover: #ffd77d;
+    --zen-color-on-accent: #171a21;
     --zen-color-info: #8ab4ff;
     --zen-color-on-info: #171a21;
     --zen-color-success: #65d6a3;
@@ -89,5 +288,36 @@
     --zen-color-danger: #ff8792;
     --zen-color-on-danger: #171a21;
     --zen-color-focus: #c4a5ff;
+    --zen-color-surface-muted: var(--zen-color-neutral-800);
+    --zen-color-surface-sunken: var(--zen-color-neutral-900);
+    --zen-color-surface-overlay: rgba(0, 0, 0, 0.68);
+    --zen-color-text-subtle: var(--zen-color-neutral-400);
+    --zen-color-text-inverse: var(--zen-color-neutral-950);
+    --zen-color-border-muted: var(--zen-color-neutral-700);
+    --zen-color-border-strong: var(--zen-color-neutral-200);
+    --zen-color-accent-muted: var(--zen-color-amber-800);
+    --zen-color-info-muted: var(--zen-color-blue-800);
+    --zen-color-success-muted: var(--zen-color-green-800);
+    --zen-color-warning-muted: var(--zen-color-orange-800);
+    --zen-color-danger-muted: var(--zen-color-red-800);
+    --zen-color-disabled: var(--zen-color-neutral-700);
+    --zen-color-selection: var(--zen-color-amber-800);
+    --zen-color-code-surface: #0b0d12;
+    --zen-color-code-text: #f4f4f5;
+    --zen-color-gridline: rgba(255, 255, 255, 0.06);
+    --zen-color-data-1: var(--zen-color-blue-300);
+    --zen-color-data-2: var(--zen-color-orange-300);
+    --zen-color-data-3: var(--zen-color-green-300);
+    --zen-color-data-4: var(--zen-color-violet-300);
+    --zen-color-data-5: var(--zen-color-amber-300);
+    --zen-color-data-6: var(--zen-color-teal-300);
+    --zen-color-data-7: var(--zen-color-red-300);
+    --zen-color-data-8: var(--zen-color-brown-300);
+    --zen-color-data-9: var(--zen-color-rose-300);
+    --zen-color-data-10: var(--zen-color-blue-200);
+    --zen-shadow-sm: 3px 3px 0 rgba(0, 0, 0, 0.5);
+    --zen-shadow-md: 7px 7px 0 rgba(0, 0, 0, 0.5);
+    --zen-shadow-hover: 5px 5px 0 rgba(0, 0, 0, 0.55);
+    --zen-shadow-lifted: 10px 10px 0 rgba(0, 0, 0, 0.55);
   }
 }