@psnext/design-system 1.5.1 → 2.1.0

package/dist/styles/glass.css

@@ -1,8 +1,10 @@
 /* ============================================================
-   Glass-morphism surface tints — ported from the previous DS
-   (not in the Figma export). Used app-wide for glass panels and by
-   the Sheet `glass` overlay variant. Base in :root/.dark; brand
-   overrides per theme. Pair with `backdrop-blur-*`.
+   LEGACY glass-morphism tints — ported from the previous DS (not in
+   the Figma export). As of the pass-2 migration no design-system
+   component uses these; only --glass-blur is part of the live
+   contract (backdrop-blur-glass). The tint variables are kept solely
+   for apps/prototype/src/ds-legacy. New code should use the
+   glass-20/40/60/none-bg tokens instead.
    ============================================================ */
 
 :root {
@@ -12,7 +14,7 @@
   --glass-light: rgba(255, 255, 255, 0.4);
   --glass-medium: rgba(255, 255, 255, 0.5);
   /* Backdrop blur radius for glass surfaces (GlassSurface primitive). */
-  --glass-blur: 45px;
+  --glass-blur: 10px;
 }
 
 .dark {
@@ -32,7 +34,8 @@
   --glass-medium: rgba(255, 255, 255, 0.5);
 }
 
-.theme-slingshot.dark {
+.theme-slingshot.dark,
+.dark .theme-slingshot {
   --glass-heavy: rgba(31, 40, 50, 0.8);
   --glass-strong: rgba(31, 40, 50, 0.8);
   --glass-subtle: rgba(31, 40, 50, 0.3);
@@ -49,7 +52,8 @@
   --glass-medium: rgba(226, 232, 240, 0.5);
 }
 
-.theme-bodhi.dark {
+.theme-bodhi.dark,
+.dark .theme-bodhi {
   --glass-heavy: rgba(30, 41, 59, 0.8);
   --glass-strong: rgba(30, 41, 59, 0.8);
   --glass-subtle: rgba(30, 41, 59, 0.3);
@@ -66,7 +70,8 @@
   --glass-medium: rgba(255, 255, 255, 0.5);
 }
 
-.theme-sustain.dark {
+.theme-sustain.dark,
+.dark .theme-sustain {
   --glass-heavy: rgba(31, 40, 50, 0.8);
   --glass-strong: rgba(31, 40, 50, 0.8);
   --glass-subtle: rgba(31, 40, 50, 0.3);

package/dist/styles/index.css

@@ -17,30 +17,29 @@
    ============================================================ */
 
 /* ── Primitive scales ─────────────────────────────────────── */
-@import "./tokens/colors.css";
-@import "./tokens/alpha.css";
+/* Raw color/alpha scales are NOT shipped — they exist only inside Figma;
+   mode tokens carry resolved values. */
 @import "./tokens/spacing.css";
 @import "./tokens/border-radius.css";
 @import "./tokens/shadows.css";
 @import "./tokens/typography.css";
-@import "./tokens/chart-colors-light.css";
-@import "./tokens/chart-colors-dark.css";
 
-/* ── Mode (light / dark) ──────────────────────────────────── */
+/* ── Mode (light / dark) — bg/txt/border/chart/glass/focus ── */
 @import "./tokens/mode-light.css";
 @import "./tokens/mode-dark.css";
 
-/* ── Brand themes (scoped to .theme-*) ────────────────────── */
+/* ── Brand themes (--theme-brand-*; Slingshot is the :root default) ── */
 @import "./tokens/theme-slingshot.css";
 @import "./tokens/theme-bodhi.css";
 @import "./tokens/theme-sustain.css";
 
+/* ── Re-substitute brand-derived aliases inside nested .theme-*
+      scopes (section-level brand wrappers; see brand-scopes.css) ─ */
+@import "./brand-scopes.css";
+
 /* ── Glass-morphism surface tints (per brand + mode) ──────── */
 @import "./glass.css";
 
-/* ── Semantic role aliases (shadcn/Radix names) ───────────── */
-@import "./semantic.css";
-
 /* ── Tailwind theme bridge (@custom-variant + @theme inline) ─ */
 @import "./theme.css";
 

package/dist/styles/theme.css

@@ -1,123 +1,174 @@
 /* ============================================================
    @psnext/design-system — Tailwind v4 theme bridge.
 
-   Maps design-system vars to Tailwind utility namespaces so
-   semantic utilities (bg-primary, text-muted-foreground,
-   border-border, rounded-lg, shadow-md, …) resolve to our tokens
-   and react to light/dark + brand switching.
+   Maps design-system vars to Tailwind utility namespaces so the
+   token utilities resolve to our vars and react to light/dark +
+   brand switching.
+
+   Naming contract: Tailwind puts every theme color in ONE
+   namespace (a bg color is also available to text-*, border-*, …
+   — unavoidable), so the token NAME carries the usage context:
+
+     bg-primary-bg / bg-info-bg          ← backgrounds (-bg)
+     text-primary-txt / text-danger-txt  ← content     (-txt)
+     border-primary-border               ← borders     (-border)
+     ring-focus / ring-focus-error       ← focus rings
+     bg-chart-blue / fill-chart-blue     ← charts (chart-*)
+     brand-*, *-gradient-from/-to        ← context-free
 
    `inline` is required: the values reference other CSS vars that
    are reassigned at runtime by .dark / .theme-* selectors.
 
    Imported by a consuming app AFTER `@import "tailwindcss"` and the
-   token/semantic vars (see styles/index.css).
+   token vars (see styles/index.css).
    ============================================================ */
 
 /* Class-based dark mode (.dark) instead of OS prefers-color-scheme, so the
    `.dark` selector our mode tokens use also drives `dark:` utilities. */
 @custom-variant dark (&:where(.dark, .dark *));
 
+/* The AI gradient (button/input borders, AI affordances) is not in the Figma
+   export yet — hand-authored here per design discussion 2026-07. The `to` stop
+   follows border/primary-invert (gray-400 light / gray-600 dark), matching the
+   binding on the Figma AI button.
+   TODO(design): add bg/ai-gradient-* to the Figma mode collection. */
+:root {
+  --ai-gradient-from: var(--brand-500-primary);
+  --ai-gradient-to: var(--primary-invert-border);
+}
+
+/* Gradient pill/box border for AI affordances (AI Button variant; AI inputs in
+   later passes). Two-layer background: the inner fill (override per state via
+   `--ai-surface`, e.g. `hover:[--ai-surface:var(--secondary-hover-bg)]`) clipped
+   to padding-box, the gradient clipped to border-box. Follows the element's
+   border-radius. */
+@utility ai-border {
+  border-width: 2px;
+  border-color: transparent;
+  background:
+    linear-gradient(var(--ai-surface, var(--primary-bg)), var(--ai-surface, var(--primary-bg)))
+      padding-box,
+    linear-gradient(90deg, var(--ai-gradient-from), var(--ai-gradient-to)) border-box;
+}
+
 @theme inline {
-  /* ── Semantic colors (→ bg-*, text-*, border-*, ring-*) ── */
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  /* `*-destructive-foreground` = the destructive content red; the on-destructive
-     foreground (white) is `*-destructive-content-foreground`. See semantic.css. */
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-destructive-content-foreground: var(--destructive-content-foreground);
-  --color-destructive-subtle: var(--destructive-subtle);
-  --color-destructive-subtle-foreground: var(--destructive-subtle-foreground);
-  --color-destructive-alpha: var(--destructive-alpha);
-  --color-destructive-border: var(--destructive-border);
-  --color-error: var(--error);
-  --color-error-subtle: var(--error-subtle);
-  --color-error-foreground: var(--error-foreground);
-  --color-error-bold-foreground: var(--error-bold-foreground);
-  /* Inverse surface pair (→ bg-inverse / text-inverse-foreground / fill-inverse). */
-  --color-inverse: var(--inverse);
-  --color-inverse-foreground: var(--inverse-foreground);
-  --color-border: var(--border); /* this is good */
-  --color-input: var(--input);
-  --color-switch-background: var(--switch-background);
-  --color-input-background: var(--input-background);
-  --color-ring: var(--ring);
-  --color-ring-error: var(--ring-error);
-
-  /* ── Sidebar ──────────────────────────────────────────── */
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  /* ── Charts ───────────────────────────────────────────── */
+  /* ── Backgrounds (-bg) ────────────────────────────────── */
+  --color-primary-bg: var(--primary-bg);
+  --color-primary-invert-bg: var(--primary-invert-bg);
+  --color-secondary-bg: var(--secondary-bg);
+  --color-muted-bg: var(--muted-bg);
+  --color-info-bg: var(--info-bg);
+  --color-success-bg: var(--success-bg);
+  --color-warning-bg: var(--warning-bg);
+  --color-danger-bg: var(--danger-bg);
+  /* Interaction states (hover partners live next to their base color). */
+  --color-primary-invert-hover-bg: var(--primary-invert-hover-bg);
+  --color-secondary-hover-bg: var(--secondary-hover-bg);
+  --color-outline-bg: var(--outline-bg);
+  --color-outline-hover-bg: var(--outline-hover-bg);
+  --color-ghost-bg: var(--ghost-bg);
+  --color-ghost-hover-bg: var(--ghost-hover-bg);
+  --color-toggle-active-bg: var(--toggle-active-bg);
+  --color-input-bg: var(--input-bg);
+  --color-switch-active-bg: var(--switch-active-bg);
+  --color-navbar-active-bg: var(--navbar-active-bg);
+  --color-overlay-bg: var(--overlay-bg);
+  /* Glass surfaces (pair with backdrop-blur / --blur-glass). */
+  --color-glass-20-bg: var(--glass-20-bg);
+  --color-glass-40-bg: var(--glass-40-bg);
+  --color-glass-60-bg: var(--glass-60-bg);
+  --color-glass-none-bg: var(--glass-none-bg);
+
+  /* ── Content (-txt) — text and icon fills ─────────────── */
+  --color-primary-txt: var(--primary-txt);
+  --color-primary-invert-txt: var(--primary-invert-txt);
+  --color-secondary-txt: var(--secondary-txt);
+  --color-muted-txt: var(--muted-txt);
+  --color-info-txt: var(--info-txt);
+  --color-success-txt: var(--success-txt);
+  --color-warning-txt: var(--warning-txt);
+  --color-danger-txt: var(--danger-txt);
+
+  /* ── Borders (-border) ────────────────────────────────── */
+  --color-primary-border: var(--primary-border);
+  --color-primary-invert-border: var(--primary-invert-border);
+  --color-secondary-border: var(--secondary-border);
+  --color-muted-border: var(--muted-border);
+  --color-selected-border: var(--selected-border);
+  --color-info-border: var(--info-border);
+  --color-success-border: var(--success-border);
+  --color-warning-border: var(--warning-border);
+  --color-danger-border: var(--danger-border);
+
+  /* ── Focus rings (→ ring-focus / ring-focus-error) ────── */
+  --color-focus: var(--focus);
+  --color-focus-error: var(--focus-error);
+
+  /* ── Brand (context-free; follows .theme-*, flips in .dark) ── */
+  --color-brand-50: var(--brand-50);
+  --color-brand-200: var(--brand-200);
+  --color-brand-500-primary: var(--brand-500-primary);
+  /* 700 is a code-only stop (AI button label) — see style-dictionary.config.mjs */
+  --color-brand-700: var(--brand-700);
+  --color-brand-800: var(--brand-800);
+  --color-brand-950: var(--brand-950);
+
+  /* ── Gradients (context-free stops → from- / to- utilities) ── */
+  --color-brand-gradient-from: var(--brand-gradient-from);
+  --color-brand-gradient-to: var(--brand-gradient-to);
+  --color-ai-gradient-from: var(--ai-gradient-from);
+  --color-ai-gradient-to: var(--ai-gradient-to);
+
+  /* ── Charts (chart-* prefix carries the context) ──────── */
+  /* Categorical multi-series palette (Figma categorical/chart 1-5). Charts are
+     either single-tone (brand-500-primary) or multi-colored via this ramp. */
   --color-chart-1: var(--chart-1);
   --color-chart-2: var(--chart-2);
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
-  /* Brand-tinted ramp (follows the active product) → bg-chart-brand-*, fill-chart-brand-* */
-  --color-chart-brand-1: var(--chart-brand-1);
-  --color-chart-brand-2: var(--chart-brand-2);
-  --color-chart-brand-3: var(--chart-brand-3);
-  --color-chart-brand-4: var(--chart-brand-4);
-  --color-chart-brand-5: var(--chart-brand-5);
-
-  /* ── Brand surfaces (follow the active product) ───────── */
-  --color-brand-surface: var(--brand-surface);
-  --color-brand-surface-foreground: var(--brand-surface-foreground);
-  --color-brand-accent: var(--brand-accent);
-  --color-brand-accent-foreground: var(--brand-accent-foreground);
-
-  /* ── Page Gradient ───────────────────── */
-  --color-page-gradient-edge: var(--page-gradient-edge);
-  --color-page-gradient-mid: var(--page-gradient-mid);
-
-  /* ── Glass Colors ───────────────────── */
-  --color-glass-heavy: var(--glass-heavy);
-  --color-glass-strong: var(--glass-strong);
-  --color-glass-subtle: var(--glass-subtle);
-  --color-glass-light: var(--glass-light);
-  --color-glass-medium: var(--glass-medium);
+  --color-chart-blue: var(--chart-blue);
+  --color-chart-blue-subtle: var(--chart-blue-subtle);
+  --color-chart-emerald: var(--chart-emerald);
+  --color-chart-emerald-subtle: var(--chart-emerald-subtle);
+  --color-chart-amber: var(--chart-amber);
+  --color-chart-amber-subtle: var(--chart-amber-subtle);
+  --color-chart-red: var(--chart-red);
+  --color-chart-red-subtle: var(--chart-red-subtle);
+  --color-chart-purple: var(--chart-purple);
+  --color-chart-purple-subtle: var(--chart-purple-subtle);
+  --color-chart-lime: var(--chart-lime);
+  --color-chart-lime-subtle: var(--chart-lime-subtle);
+  --color-chart-indigo: var(--chart-indigo);
+  --color-chart-indigo-subtle: var(--chart-indigo-subtle);
+  --color-chart-orange: var(--chart-orange);
+  --color-chart-orange-subtle: var(--chart-orange-subtle);
 
   /* ── Blur ───────────────────── */
   --blur-glass: var(--glass-blur);
 
-  /* ── Radius (→ rounded-* utilities) ───────────────────── */
-  --radius-xs: var(--rounded-xs);
-  --radius-sm: var(--rounded-sm);
-  --radius-md: var(--rounded-md);
-  --radius-lg: var(--rounded-lg);
-  --radius-5: var(--rounded-5);
+  /* ── Radius (→ rounded-* utilities, px-named) ─────────── */
+  /* Tailwind's default t-shirt sizes (rounded-sm/md/lg/…) are cleared so only
+     the design scale exists: the number IS the pixel value (rounded-8 = 8px). */
+  --radius-*: initial;
+  --radius-none: var(--rounded-none);
+  --radius-2: var(--rounded-2);
+  --radius-4: var(--rounded-4);
+  --radius-6: var(--rounded-6);
+  --radius-8: var(--rounded-8);
   --radius-10: var(--rounded-10);
-  --radius-xl: var(--rounded-xl);
-  --radius-2xl: var(--rounded-2xl);
-  --radius-3xl: var(--rounded-3xl);
+  --radius-12: var(--rounded-12);
+  --radius-16: var(--rounded-16);
+  --radius-24: var(--rounded-24);
+  --radius-32: var(--rounded-32);
+  --radius-full: var(--rounded-full);
 
-  /* ── Shadows (→ shadow-* utilities) ───────────────────── */
-  --shadow-2xs: var(--shadow-2xs);
-  --shadow-xs: var(--shadow-xs);
+  /* ── Shadows (→ shadow-sm/md/lg/xl only) ──────────────── */
+  --shadow-*: initial;
   --shadow-sm: var(--shadow-sm);
   --shadow-md: var(--shadow-md);
   --shadow-lg: var(--shadow-lg);
   --shadow-xl: var(--shadow-xl);
-  --shadow-2xl: var(--shadow-2xl);
 
   /* ── Font families (→ font-sans / font-heading / font-mono) ── */
   /* Brand font first, then a system fallback stack so text stays styled if the

package/dist/styles/tokens/border-radius.css

@@ -5,14 +5,14 @@
 
 :root {
   --rounded-none: 0;
-  --rounded-xs: 2px;
-  --rounded-sm: 4px;
-  --rounded-5: 5px;
-  --rounded-md: 6px;
-  --rounded-lg: 8px;
+  --rounded-2: 2px;
+  --rounded-4: 4px;
+  --rounded-6: 6px;
+  --rounded-8: 8px;
   --rounded-10: 10px;
-  --rounded-xl: 12px;
-  --rounded-2xl: 16px;
-  --rounded-3xl: 24px;
+  --rounded-12: 12px;
+  --rounded-16: 16px;
+  --rounded-24: 24px;
+  --rounded-32: 32px;
   --rounded-full: 9999px;
 }

package/dist/styles/tokens/mode-dark.css

@@ -4,98 +4,75 @@
  */
 
 .dark {
-  --bg-background: #1f2832; /** Use for general backgrounds. */
-  --bg-primary: #f3f4f6;
-  --bg-secondary: #1f2937;
-  --bg-accent: #111827; /** Level 1, official */
-  --bg-muted: #111827;
-  --bg-destructive: #6c0016;
-  --bg-destructive-alpha: rgb(220 38 38 / 0.2);
-  --bg-destructive-subtle: #3d000d;
-  --bg-input: rgb(255 255 255 / 0.05);
-  --bg-page-bg-brand: #3d000d;
-  --bg-page-bg-neutral: #030712;
-  --bg-info: #075985;
-  --bg-info-subtle: #0c4a6e;
-  --bg-success: #3f6212;
-  --bg-success-subtle: #365314;
-  --bg-warning: #9a3412;
-  --bg-warning-subtle: #431407;
-  --bg-error: #8d011d;
-  --bg-error-subtle: #6c0016;
-  --bg-backdrop: rgb(31 40 50 / 0.4);
-  --content-foreground: #f9fafb;
-  --content-primary-foreground: #030712;
-  --content-secondary-foreground: #f3f4f6;
-  --content-accent-foreground: #f3f4f6;
-  --content-muted-foreground: #9ca3af;
-  --content-destructive-foreground: #ffffff;
-  --content-info: #38bdf8;
-  --content-info-bold: #7dd3fc;
-  --content-success: #84cc16;
-  --content-success-bold: #bef264;
-  --content-warning: #f97316;
-  --content-warning-bold: #fdba74;
-  --content-error: #e90130;
-  --content-error-bold: #f699ac;
-  --content-destructive: #f26783;
-  --content-destructive-subtle: #bc0126;
-  --card-card-100: #1f2832;
-  --card-card-90: rgb(31 40 50 / 0.9);
-  --card-card-80: rgb(31 40 50 / 0.8);
-  --card-card-60: rgb(31 40 50 / 0.6);
-  --card-card-40: rgb(31 40 50 / 0.4);
-  --card-card-20: rgb(31 40 50 / 0.2);
-  --card-card-10: rgb(31 40 50 / 0.1);
-  --card-card-foreground: #ffffff;
-  --brand-colors-brand-50: #3d000d;
-  --brand-colors-brand-100: #6c0016;
-  --brand-colors-brand-200: #8d011d;
-  --brand-colors-brand-300: #bc0126;
-  --brand-colors-brand-400: #d2012b;
-  --brand-colors-brand-500: #e90130;
-  --brand-colors-brand-600: #f26783;
-  --brand-colors-brand-700: #f699ac;
-  --brand-colors-brand-800: #fbccd6;
-  --brand-colors-brand-900: #fde6ea;
-  --brand-colors-brand-950: #fef2f5;
-  --popover-popover: #ffffff;
-  --popover-popover-foreground: #1f2832;
-  --unofficial-foreground-alt: #d1d5db; /** Please use this for body text. */
-  --unofficial-body-background: #030712;
-  --unofficial-mid-alt: #9ca3af;
-  --unofficial-ghost-foreground: #e5e7eb;
-  --unofficial-ghost: rgb(255 255 255 / 0.0001);
-  --unofficial-ghost-hover: rgb(255 255 255 / 0.1);
-  --unofficial-primary-hover: #d1d5db;
-  --unofficial-secondary-hover: #111827;
-  --unofficial-outline: rgb(255 255 255 / 0.05);
-  --unofficial-outline-hover: rgb(255 255 255 / 0.1);
-  --unofficial-outline-active: rgb(255 255 255 / 0.15);
-  --unofficial-accent-0: #030712;
-  --unofficial-accent-2: #1f2937;
-  --unofficial-accent-3: #374151;
-  --border-border-0: #030712;
-  --border-border-1: #111827;
-  --border-border-2: #374151; /** level 2, official. See docs. */
-  --border-border-3: #374151;
-  --border-border-4: #4b5563;
-  --border-border-5: #6b7280;
-  --border-destructive-border: #f26783;
-  --border-success-border: #a3e635;
-  --border-warning-border: #fb923c;
-  --focus-ring: #374151; /** Focus ring */
-  --focus-ring-error: #6d2e2f; /** Focus ring error */
-  --sidebar-sidebar: #030712;
-  --sidebar-sidebar-foreground: #d1d5db;
-  --sidebar-sidebar-accent: #111827;
-  --sidebar-sidebar-accent-foreground: #f3f4f6;
-  --sidebar-sidebar-primary: #f9fafb;
-  --sidebar-sidebar-primary-foreground: #111827;
-  --sidebar-sidebar-border: #1f2937;
-  --sidebar-sidebar-ring: #374151;
-  --sidebar-unofficial-sidebar-muted: #6b7280;
-  --obra-shadcn-docs-obra-shadcn-ui-docs-1: #111628;
-  --obra-shadcn-docs-obra-shadcn-ui-docs-2: #201d1b;
-  --focus-ring-success: var(--content-success-bold); /** Focus ring error */
+  --primary-bg: #111827; /** Use for general backgrounds. */
+  --primary-invert-bg: #ffffff;
+  --secondary-bg: #4b5563;
+  --muted-bg: #111827;
+  --info-bg: #0c4a6e;
+  --success-bg: #365314;
+  --warning-bg: #431407;
+  --danger-bg: #6c0016;
+  --primary-invert-hover-bg: #d1d5db;
+  --secondary-hover-bg: #111827;
+  --outline-bg: rgb(255 255 255 / 0.05);
+  --outline-hover-bg: rgb(255 255 255 / 0.1);
+  --ghost-bg: rgb(255 255 255 / 0.0001);
+  --ghost-hover-bg: rgb(255 255 255 / 0.1);
+  --toggle-active-bg: rgb(255 255 255 / 0.1);
+  --input-bg: #1f2832;
+  --switch-active-bg: #84cc16;
+  --navbar-active-bg: #e90130;
+  --brand-gradient-from: var(--theme-brand-950);
+  --brand-gradient-to: #020617;
+  --overlay-bg: rgb(31 40 50 / 0.4);
+  --primary-txt: #f3f4f6;
+  --primary-invert-txt: #111827;
+  --secondary-txt: #e5e7eb;
+  --muted-txt: #9ca3af;
+  --info-txt: #7dd3fc;
+  --success-txt: #bef264;
+  --warning-txt: #fdba74;
+  --danger-txt: #f699ac;
+  --primary-border: #374151; /** level 2, official. See docs. */
+  --primary-invert-border: #4b5563;
+  --secondary-border: #374151;
+  --muted-border: #111827;
+  --selected-border: #f9fafb;
+  --info-border: #7dd3fc;
+  --success-border: #bef264;
+  --warning-border: #fdba74;
+  --danger-border: #f699ac;
+  --brand-50: #3d000d;
+  --brand-200: #6c0016;
+  --brand-800: var(--theme-brand-200);
+  --brand-950: var(--theme-brand-50);
+  --brand-500-primary: var(--theme-brand-500-primary);
+  --focus: #374151; /** Focus ring */
+  --focus-error: #6c0016; /** Focus ring error */
+  --glass-20-bg: rgb(31 40 50 / 0.2);
+  --glass-40-bg: rgb(31 40 50 / 0.4);
+  --glass-60-bg: rgb(31 40 50 / 0.6);
+  --glass-none-bg: var(--primary-bg);
+  --chart-blue: #1d4ed8;
+  --chart-blue-subtle: #1e3a8a;
+  --chart-emerald: #047857;
+  --chart-emerald-subtle: #064e3b;
+  --chart-amber: #b45309;
+  --chart-amber-subtle: #78350f;
+  --chart-red: #bc0126;
+  --chart-red-subtle: #6c0016;
+  --chart-purple: #7e22ce;
+  --chart-purple-subtle: #581c87;
+  --chart-lime: #4d7c0f;
+  --chart-lime-subtle: #365314;
+  --chart-indigo: #4338ca;
+  --chart-indigo-subtle: #312e81;
+  --chart-orange: #c2410c;
+  --chart-orange-subtle: #7c2d12;
+  --chart-1: #f54a00;
+  --chart-2: #009689;
+  --chart-3: #104e64;
+  --chart-4: #ffb900;
+  --chart-5: #fe9a00;
+  --brand-700: var(--theme-brand-200);
 }