@cellarnode/ui 0.209.2 → 0.211.0

package/src/theme/tokens.css

@@ -1,19 +1,61 @@
-/* @cellarnode/ui — Canonical Design Tokens
- * Import in your app: @import "@cellarnode/ui/theme/tokens.css";
- * Then import tailwindcss after it.
- *
- * FONT CONTRACT (CEL-84):
- *   --font-inter and --font-sora MUST be bound by the consumer BEFORE this
- *   file is imported. The lib does not vendor font files. See
- *   ../../FONTS.md (or FONTS.md at the package root) for the full contract,
- *   recommended @font-face blocks, and override-only fallback.
- *   If unbound, the stacks fall through to ui-sans-serif / system-ui /
- *   sans-serif — readable, but not design-system-matching.
- */
+@font-face {
+  font-family: "Instrument Sans Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400 700;
+  src: url("./fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: "Instrument Sans Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400 700;
+  src: url("./fonts/instrument-sans-latin-wght-normal.woff2") format("woff2-variations");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: "Hanken Grotesk Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("./fonts/hanken-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations");
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: "Hanken Grotesk Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url("./fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2-variations");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: "JetBrains Mono Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 800;
+  src: url("./fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2-variations");
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: "JetBrains Mono Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 800;
+  src: url("./fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
 
 @theme inline {
-  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
-  --font-display: var(--font-sora), ui-sans-serif, system-ui, sans-serif;
+  --font-sans: "Instrument Sans Variable", ui-sans-serif, system-ui, sans-serif;
+  --font-display: "Hanken Grotesk Variable", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono Variable", ui-monospace, monospace;
 
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -25,6 +67,8 @@
   --color-popover-foreground: var(--popover-foreground);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
+  --color-primary-soft: var(--primary-soft);
+  --color-primary-soft-foreground: var(--primary-soft-foreground);
   --color-secondary: var(--secondary);
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);
@@ -35,12 +79,15 @@
   --color-accent-secondary-foreground: var(--accent-secondary-foreground);
   --color-success: var(--success);
   --color-success-foreground: var(--success-foreground);
+  --color-success-soft: var(--success-soft);
   --color-warning: var(--warning);
   --color-warning-foreground: var(--warning-foreground);
+  --color-warning-soft: var(--warning-soft);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
   --color-info: var(--info);
   --color-info-foreground: var(--info-foreground);
+  --color-info-soft: var(--info-soft);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-input-hover: var(--input-hover);
@@ -93,6 +140,13 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-muted: var(--sidebar-muted);
+  --color-canvas: var(--canvas);
+  --color-bubble-own: var(--bubble-own);
+  --color-bubble-own-foreground: var(--bubble-own-foreground);
+  --color-bubble-other: var(--bubble-other);
+  --color-label-ink: var(--label-ink);
+  --color-label-paper: var(--label-paper);
 
   /* Marketing surface tokens (CEL-726): semantic page/CTA surfaces for the
      marketing kit so consumers use bg-surface-soft / bg-surface-strong instead
@@ -156,6 +210,7 @@
      `shadow-soft` / `shadow-medium` compiled to nothing. */
   --shadow-soft: var(--shadow-soft);
   --shadow-medium: var(--shadow-medium);
+  --shadow-lift: var(--shadow-lift);
   --shadow-glow: var(--shadow-glow);
   --shadow-warm-glow: var(--shadow-warm-glow);
 
@@ -356,10 +411,13 @@
 }
 
 :root {
-  --radius: 1.2rem;
+  --radius: 0.75rem;
   --glass-blur: 16px;
   --field-placeholder: oklch(0.5 0.018 182);
   --overlay-tinted: oklch(0.18 0.012 180);
+  --canvas: oklch(0.965 0.008 120);
+  --label-ink: oklch(0.2 0.04 220);
+  --label-paper: var(--regulated-mark-contrast-surface);
   /* Fixed carrier for approved artwork. Theme and brand tokens cannot reduce its contrast. */
   --regulated-mark-contrast-surface: oklch(0.985 0.003 95);
   --fic-label-foreground: oklch(0.141 0.005 285.823);
@@ -398,6 +456,7 @@
 
   --print-paper: oklch(0.995 0.002 95);
   --print-ink: var(--light-foreground);
+  --shadow-lift: var(--shadow-medium);
 
   /* Gutter between the AppShell's dark surround and its rounded content card,
      mirroring the shell's own `p-2 pt-0 lg:pt-2 lg:pl-1`. Declared on :root
@@ -419,13 +478,13 @@
   --app-shell-overlay-safe-bottom: max(1rem, env(safe-area-inset-bottom));
   --notification-tray-badge-ring: var(--card);
 
-  --background: oklch(0.995 0.002 95);
-  --foreground: var(--light-foreground);
-  --card: color-mix(in oklab, white 98.5%, oklch(0.40 0.062 178) 1.5%);
+  --background: oklch(0.99 0.004 100);
+  --foreground: oklch(0.22 0.025 165);
+  --card: oklch(1 0 0);
   --card-foreground: var(--foreground);
-  --card-elevated: color-mix(in oklch, var(--card), white 6%);
-  --card-feature: color-mix(in oklab, white 96%, oklch(0.40 0.062 178) 4%);
-  --popover: color-mix(in oklab, white 98.5%, oklch(0.40 0.062 178) 1.5%);
+  --card-elevated: color-mix(in oklch, var(--card), oklch(0.965 0.008 120) 6%);
+  --card-feature: oklch(0.985 0.012 155);
+  --popover: var(--card);
   --popover-foreground: var(--foreground);
 
   /* Marketing surfaces (CEL-726). surface-soft: warm page surface, sits between
@@ -438,14 +497,16 @@
   --surface-strong: oklch(0.22 0.012 180);
   --surface-strong-foreground: var(--primary-foreground);
 
-  --primary: oklch(0.40 0.062 178);
+  --primary: oklch(0.36 0.06 168);
   --primary-foreground: oklch(0.988 0.004 98);
-  --secondary: color-mix(in oklab, white 95%, var(--primary) 5%);
-  --secondary-foreground: color-mix(in oklab, black 54%, var(--primary) 46%);
-  --muted: color-mix(in oklab, white 96%, var(--foreground) 4%);
+  --primary-soft: oklch(0.94 0.03 160);
+  --primary-soft-foreground: oklch(0.3 0.06 168);
+  --secondary: oklch(0.955 0.01 110);
+  --secondary-foreground: oklch(0.28 0.03 165);
+  --muted: oklch(0.96 0.008 110);
   --muted-foreground: var(--light-muted-foreground);
-  --accent: color-mix(in oklab, white 94%, var(--primary) 6%);
-  --accent-foreground: color-mix(in oklab, black 48%, var(--primary) 52%);
+  --accent: oklch(0.95 0.015 140);
+  --accent-foreground: oklch(0.28 0.05 168);
   --accent-secondary: oklch(0.666 0.179 58.318);
   --accent-secondary-foreground: oklch(0.29 0.045 58.318);
   /* L 0.56 -> 0.54: near-white --success-foreground on a --success solid (badge/
@@ -456,6 +517,7 @@
      See CEL-494. */
   --success: var(--light-success);
   --success-foreground: var(--light-success-foreground);
+  --success-soft: oklch(0.94 0.05 155);
   /* CEL-681: --warning is now its own hue (yellow-amber h76) distinct from
      --accent-secondary (warm amber h58 used by the "Your range" band).
      L 0.50 / C 0.102 (sRGB gamut limit at h76) is the highest lightness at
@@ -466,11 +528,13 @@
      derivatives inherit the hue automatically. */
   --warning: var(--light-warning);
   --warning-foreground: var(--light-warning-foreground);
+  --warning-soft: oklch(0.95 0.05 80);
   --destructive: var(--light-destructive);
   --destructive-foreground: var(--light-destructive-foreground);
-  --info: var(--light-info); /* approachable blue */
+  --info: oklch(0.43 0.1 230);
   --info-foreground: var(--light-info-foreground); /* near-white */
-  --border: color-mix(in oklab, white 88%, var(--primary) 12%);
+  --info-soft: oklch(0.95 0.03 230);
+  --border: oklch(0.91 0.01 120);
   /* CEL-2379: WCAG 2.2 SC 1.4.11 needs a form control's boundary at >= 3:1 against what it sits on
      (--card, --background, --muted, --popover). The old 10% tint measured ~1.17:1. These two ARE the boundary
      of every text field, select, combobox, listbox, textarea, checkbox and radio; they are tinted from the brand
@@ -542,8 +606,8 @@
   --surface-selected: color-mix(in oklab, white 90%, var(--primary) 10%);
   --panel-border-strong: color-mix(in oklab, var(--border) 84%, var(--primary) 16%);
   --panel-shadow: 0 26px 60px -34px oklch(0.2 0.005 230 / 0.12);
-  --shadow-soft: 0 18px 42px -30px oklch(0.2 0.005 230 / 0.10);
-  --shadow-medium: 0 26px 60px -34px oklch(0.2 0.005 230 / 0.14);
+  --shadow-soft: 0 1px 2px oklch(0.2 0.03 165 / 6%), 0 8px 24px -12px oklch(0.2 0.03 165 / 18%);
+  --shadow-medium: 0 2px 4px oklch(0.2 0.03 165 / 6%), 0 20px 40px -20px oklch(0.2 0.03 165 / 30%);
   --shadow-glow: 0 20px 60px -34px oklch(0.40 0.062 178 / 0.36);
   --shadow-warm-glow: 0 20px 60px -34px oklch(0.666 0.179 58.318 / 0.30);
   --table-header-bg: color-mix(in oklab, white 98%, var(--primary) 2%);
@@ -653,14 +717,18 @@
   --transition-smooth: all 0.3s var(--ease-emphasized);
 
   /* Sidebar — dark green (matches producer dashboard) */
-  --sidebar-background: oklch(0.22 0.038 155);
-  --sidebar-foreground: oklch(0.95 0 0);
-  --sidebar-primary: oklch(0.85 0.1 95);
-  --sidebar-primary-foreground: oklch(0.22 0.038 155);
-  --sidebar-accent: oklch(0.28 0.042 155);
-  --sidebar-accent-foreground: oklch(0.95 0 0);
-  --sidebar-border: oklch(0.30 0.036 155);
-  --sidebar-ring: oklch(0.85 0.1 95);
+  --sidebar-background: oklch(0.23 0.04 168);
+  --sidebar-foreground: oklch(0.9 0.02 140);
+  --sidebar-muted: oklch(0.68 0.03 160);
+  --sidebar-primary: oklch(0.82 0.1 150);
+  --sidebar-primary-foreground: oklch(0.2 0.04 168);
+  --sidebar-accent: oklch(0.3 0.045 168);
+  --sidebar-accent-foreground: oklch(0.98 0.01 120);
+  --sidebar-border: oklch(0.32 0.04 168);
+  --sidebar-ring: oklch(0.55 0.08 168);
+  --bubble-own: oklch(0.36 0.06 168);
+  --bubble-own-foreground: oklch(0.98 0.01 120);
+  --bubble-other: oklch(0.955 0.01 110);
 }
 
 @media (min-width: 40rem) {
@@ -683,17 +751,20 @@
 .dark {
   --field-placeholder: oklch(0.76 0.02 180);
   --overlay-tinted: oklch(0.08 0.012 180);
+  --canvas: oklch(0.17 0.02 168);
+  --label-ink: oklch(0.2 0.04 220);
+  --label-paper: var(--regulated-mark-contrast-surface);
   --regulated-mark-contrast-surface: oklch(0.985 0.003 95);
   --fic-label-foreground: oklch(0.141 0.005 285.823);
   --fic-label-muted-foreground: oklch(0.37 0.013 285.805);
 
-  --background: oklch(0.21 0.012 184);
-  --foreground: oklch(0.965 0.006 102);
-  --card: color-mix(in oklab, black 78%, var(--primary) 22%);
+  --background: oklch(0.15 0.022 168);
+  --foreground: oklch(0.94 0.01 120);
+  --card: oklch(0.18 0.024 168);
   --card-foreground: var(--foreground);
   --card-elevated: color-mix(in oklch, var(--card), white 4%);
-  --card-feature: color-mix(in oklab, black 82%, var(--primary) 18%);
-  --popover: color-mix(in oklab, black 80%, var(--primary) 20%);
+  --card-feature: oklch(0.21 0.035 168);
+  --popover: oklch(0.19 0.025 168);
   --popover-foreground: var(--foreground);
 
   /* Marketing surfaces (CEL-726) — dark counterparts. The marketing kit ships
@@ -707,27 +778,32 @@
   --surface-strong: oklch(0.17 0.012 180);
   --surface-strong-foreground: var(--foreground);
 
-  --primary: oklch(0.77 0.07 178);
-  --primary-foreground: oklch(0.21 0.012 184);
-  --secondary: color-mix(in oklab, black 70%, var(--primary) 30%);
-  --secondary-foreground: var(--foreground);
-  --muted: color-mix(in oklab, black 78%, var(--foreground) 22%);
-  --muted-foreground: oklch(0.77 0.02 180);
-  --accent: color-mix(in oklab, black 68%, var(--primary) 32%);
-  --accent-foreground: var(--foreground);
+  --primary: oklch(0.8 0.1 155);
+  --primary-foreground: oklch(0.2 0.04 168);
+  --primary-soft: oklch(0.3 0.05 165);
+  --primary-soft-foreground: oklch(0.88 0.08 155);
+  --secondary: oklch(0.28 0.022 165);
+  --secondary-foreground: oklch(0.92 0.01 120);
+  --muted: oklch(0.27 0.02 165);
+  --muted-foreground: oklch(0.72 0.02 150);
+  --accent: oklch(0.3 0.03 165);
+  --accent-foreground: oklch(0.94 0.02 140);
   --accent-secondary: oklch(0.74 0.154 58.318);
   --accent-secondary-foreground: oklch(0.22 0.02 58.318);
-  --success: oklch(0.75 0.112 163);
+  --success: oklch(0.72 0.14 155);
   --success-foreground: oklch(0.19 0.012 163);
+  --success-soft: oklch(0.3 0.06 155);
   /* CEL-681: --warning is now its own hue (yellow-amber h76) distinct from
      --accent-secondary (warm amber h58). Lightened slightly vs light theme to
      read well on dark surfaces. Foreground near-black keeps ≥4.5:1 contrast. */
-  --warning: oklch(0.82 0.155 76);
+  --warning: oklch(0.78 0.14 75);
   --warning-foreground: oklch(0.18 0.04 76);
-  --destructive: oklch(0.69 0.184 29);
+  --warning-soft: oklch(0.32 0.06 75);
+  --destructive: oklch(0.65 0.18 27);
   --destructive-foreground: oklch(0.18 0.01 25);
-  --info: oklch(0.74 0.14 237);              /* lighter blue for dark surfaces */
+  --info: oklch(0.72 0.11 230);              /* lighter blue for dark surfaces */
   --info-foreground: oklch(0.18 0.01 240);   /* near-black */
+  --info-soft: oklch(0.3 0.05 230);
   --border: color-mix(in oklab, black 62%, var(--primary) 38%);
   /* CEL-2379: see the light block. Dark boundary, >= 3:1 on every dark surface. */
   --input: color-mix(in oklab, black 28%, var(--primary) 72%);
@@ -746,7 +822,7 @@
   --chart-other: oklch(0.72 0.012 195);
 
   /* Chart framework — dark theme (CEL-41) */
-  --chart-bg: color-mix(in oklab, black 76%, var(--primary) 24%);
+  --chart-bg: color-mix(in oklab, black 80%, var(--primary) 20%);
   --chart-grid: oklch(0.34 0.012 180 / 0.5);
   --chart-tooltip-bg: color-mix(in oklab, black 70%, var(--primary) 30%);
   --chart-axis-text: var(--muted-foreground);
@@ -784,8 +860,6 @@
   --surface-selected: color-mix(in oklab, black 64%, var(--primary) 36%);
   --panel-border-strong: color-mix(in oklab, black 62%, var(--primary) 38%);
   --panel-shadow: 0 30px 78px -36px oklch(0 0 0 / 0.52);
-  --shadow-soft: 0 20px 44px -30px oklch(0 0 0 / 0.48);
-  --shadow-medium: 0 30px 70px -34px oklch(0 0 0 / 0.58);
   --shadow-glow: 0 20px 60px -36px oklch(0.77 0.07 178 / 0.24);
   --shadow-warm-glow: 0 20px 60px -36px oklch(0.74 0.154 58.318 / 0.20);
   --shadow-kanban-column: 0 1px 3px oklch(0 0 0 / 0.18), 0 8px 24px -12px oklch(0 0 0 / 0.28);
@@ -872,14 +946,18 @@
   --gradient-subtle: linear-gradient(180deg, oklch(0.24 0.012 184) 0%, oklch(0.21 0.012 184) 100%);
 
   /* Sidebar — dark green (matches producer dashboard dark mode) */
-  --sidebar-background: oklch(0.18 0.034 155);
-  --sidebar-foreground: oklch(0.92 0 0);
-  --sidebar-primary: oklch(0.85 0.1 95);
-  --sidebar-primary-foreground: oklch(0.18 0.034 155);
-  --sidebar-accent: oklch(0.24 0.038 155);
-  --sidebar-accent-foreground: oklch(0.92 0 0);
-  --sidebar-border: oklch(0.26 0.034 155);
-  --sidebar-ring: oklch(0.85 0.1 95);
+  --sidebar-background: oklch(0.15 0.02 168);
+  --sidebar-foreground: oklch(0.9 0.02 140);
+  --sidebar-muted: oklch(0.62 0.03 160);
+  --sidebar-primary: oklch(0.82 0.1 150);
+  --sidebar-primary-foreground: oklch(0.2 0.04 168);
+  --sidebar-accent: oklch(0.22 0.03 168);
+  --sidebar-accent-foreground: oklch(0.98 0.01 120);
+  --sidebar-border: oklch(0.25 0.03 168);
+  --sidebar-ring: oklch(0.7 0.09 160);
+  --bubble-own: oklch(0.42 0.07 165);
+  --bubble-own-foreground: oklch(0.97 0.01 120);
+  --bubble-other: oklch(0.28 0.022 165);
 }
 
 @layer base {