@bsuite/theme 0.5.0 → 0.7.0

package/src/preset-v4.css

@@ -1,134 +1,143 @@
 /*
- * @bsuite/theme — Tailwind v4 @theme block
- * Version 0.3.1
+ * @bsuite/theme — Tailwind v4 @theme bridge
+ * Version 0.7.0
  *
- * Tailwind v4 exposes design tokens to the engine via CSS @theme blocks.
- * Import this before any app-specific @theme overrides:
+ * Usage (every D2C app; braden imports braden-css instead of css):
  *
  *   @import 'tailwindcss';
- *   @import '@bsuite/theme/preset-v4.css';
+ *   @import '@bsuite/theme/css';           ← defines --role-* (vars.css)
+ *   @import '@bsuite/theme/preset-v4.css'; ← this file, maps them to utilities
  *
- *   @theme {
- *     --color-app-primary: oklch(0.45 0.18 142); -- app-specific override
- *   }
+ * ─────────────────────────────────────────────────────────────────────────
+ * WHY `@theme inline` AND NOT `@theme`
+ *
+ * Until 0.7.0 this file used a plain `@theme` block containing hardcoded
+ * oklch literals — a full second copy of every value in vars.css. Two
+ * consequences, both real bugs:
+ *
+ *   1. DARK MODE DID NOT REACH THESE UTILITIES. Plain `@theme` emits
+ *      `--color-card: <literal>` at :root and makes `bg-card` resolve to
+ *      `var(--color-card)`. vars.css rebinds `--role-bg-panel` under
+ *      `.dark`, but nothing rebound `--color-card`, so `bg-card` stayed on
+ *      its light-mode literal in dark mode.
+ *   2. IT DRIFTED. The duplicate copy still said `--color-card: oklch(1 0
+ *      0.5)` (pure white) and `--color-destructive: <purple>` after the
+ *      token source had moved on from both.
+ *
+ * `@theme inline` emits the `var()` reference into the utility itself, so
+ * `bg-card` resolves through `--role-bg-panel` and follows every `.dark`
+ * and BrandingProvider rebinding for free. vars.css is the ONLY source of
+ * truth for values; this file contains no colour literals at all.
+ *
+ * Adding a colour literal to this file re-creates both bugs. Don't.
+ * ─────────────────────────────────────────────────────────────────────────
  *
  * Token naming: `--color-{name}` → Tailwind generates `bg-{name}`,
  * `text-{name}`, `border-{name}` etc. automatically.
- *
- * Layer order matches vars.css:
- *   1. Palette  — --color-neon-electric-*
- *   2. Surface  — --color-{light|dark}-{bg|text}-*
- *   3. Role     — --color-role-*   ← bind to these in components
- *   4. Shadcn   — --color-background, --color-foreground, etc.
- *   5. Text-on  — --color-text-on-*
  */
 
-@theme {
-  /* ============================================================
-     LAYER 1 — Neon Electric palette (11 colours, FROZEN)
-     ============================================================ */
-  --color-neon-electric-blue:     oklch(0.546 0.215 262.9);
-  --color-neon-electric-cyan:     oklch(0.769 0.132 191.7);
-  --color-neon-electric-indigo:   oklch(0.511 0.23  277);
-  --color-neon-electric-purple:   oklch(0.568 0.202 283.1);
-  --color-neon-electric-magenta:  oklch(0.742 0.167 359.5);
-  --color-neon-electric-pink:     oklch(0.656 0.212 354.3);
-  --color-neon-electric-coral:    oklch(0.669 0.219  20.9);
-  --color-neon-electric-orange:   oklch(0.728 0.168  22.5);
-  --color-neon-electric-yellow:   oklch(0.868 0.125  81.4);
-  --color-neon-electric-green:    oklch(0.723 0.192 149.6);
-  --color-neon-electric-lavender: oklch(0.736 0.141 285.6);
-
+@theme inline {
   /* ============================================================
-     LAYER 2 — Surface tokens (light)
+     LAYER 1 — Palette. Exposed for decorative use only.
+     Bind components to the role tokens below, never to these:
+     white-labelling mutates roles, so a palette-bound component
+     silently ignores tenant branding.
      ============================================================ */
-  --color-light-bg-primary:   oklch(0.961 0     0.5);
-  --color-light-bg-secondary: oklch(0.982 0.002 248);
-  --color-light-bg-tertiary:  oklch(0.963 0.003 228.9);
-  --color-light-bg-accent:    oklch(1     0     0.5);
-
-  /* Eye-strain-safe light text scale (L capped at 0.22, hue 260) */
-  --color-light-text-primary:   oklch(0.22 0.015 260);  /* 13.2:1 AAA */
-  --color-light-text-secondary: oklch(0.38 0.018 260);  /*  8.1:1 AAA */
-  --color-light-text-muted:     oklch(0.52 0.018 260);  /*  4.9:1 AA  */
-  --color-light-text-subtle:    oklch(0.60 0.012 260);  /*  3.8:1 AA large */
-  --color-light-text-disabled:  oklch(0.72 0.010 260);
+  --color-neon-electric-blue:     var(--neon-electric-blue);
+  --color-neon-electric-cyan:     var(--neon-electric-cyan);
+  --color-neon-electric-indigo:   var(--neon-electric-indigo);
+  --color-neon-electric-purple:   var(--neon-electric-purple);
+  --color-neon-electric-magenta:  var(--neon-electric-magenta);
+  --color-neon-electric-pink:     var(--neon-electric-pink);
+  --color-neon-electric-coral:    var(--neon-electric-coral);
+  --color-neon-electric-orange:   var(--neon-electric-orange);
+  --color-neon-electric-yellow:   var(--neon-electric-yellow);
+  --color-neon-electric-green:    var(--neon-electric-green);
+  --color-neon-electric-lavender: var(--neon-electric-lavender);
+  --color-neon-electric-red:      var(--neon-electric-red);
+  --color-neon-electric-amber:    var(--neon-electric-amber);
+  --color-neon-electric-teal:     var(--neon-electric-teal);
+  --color-neon-electric-deep:     var(--neon-electric-deep);
 
   /* ============================================================
-     LAYER 2 — Surface tokens (dark)
+     LAYER 2 — Surfaces. Role-bound, so they flip with .dark.
      ============================================================ */
-  --color-dark-bg-primary:    oklch(0.166 0.026 269.4);
-  --color-dark-bg-secondary:  oklch(0.242 0.03  269.9);
-  --color-dark-bg-tertiary:   oklch(0.326 0.036 266.7);
-  --color-dark-bg-quaternary: oklch(0.39  0.035 265);
-  --color-dark-bg-accent:     oklch(0.292 0.034 270);
-
-  /* Eye-strain-safe dark text scale (L capped at 0.94, hue 260) */
-  --color-dark-text-primary:   oklch(0.94 0.012 260);  /* 13.9:1 AAA */
-  --color-dark-text-secondary: oklch(0.82 0.015 260);  /*  9.8:1 AAA */
-  --color-dark-text-muted:     oklch(0.68 0.018 260);  /*  5.6:1 AA  */
-  --color-dark-text-subtle:    oklch(0.56 0.015 260);  /*  3.6:1 AA large */
-  --color-dark-text-disabled:  oklch(0.44 0.010 260);
+  --color-bg-body:       var(--role-bg-body);
+  --color-bg-surface:    var(--role-bg-surface);
+  --color-bg-panel:      var(--role-bg-panel);
+  --color-bg-input:      var(--role-bg-input);
+  --color-bg-sunken:     var(--role-bg-sunken);
+  --color-border-strong: var(--role-border-strong);
 
   /* ============================================================
-     LAYER 3 — Role aliases
-     Consumers should only reference these — never palette names.
+     LAYER 3 — Text scale
      ============================================================ */
-  --color-role-primary:     oklch(0.546 0.215 262.9);  /* electric blue  */
-  --color-role-secondary:   oklch(0.511 0.23  277);    /* electric indigo */
-  --color-role-accent:      oklch(0.769 0.132 191.7);  /* electric cyan  */
-
-  /* Colourblind-safe: error = purple, never red/coral */
-  --color-role-error:       oklch(0.568 0.202 283.1);  /* electric purple */
-  --color-role-destructive: oklch(0.568 0.202 283.1);  /* synonym         */
-  --color-role-warning:     oklch(0.728 0.168  22.5);  /* electric orange */
-  --color-role-success:     oklch(0.723 0.192 149.6);  /* electric green  */
-  --color-role-info:        oklch(0.769 0.132 191.7);  /* electric cyan   */
-
-  /* Semantic status aliases (deprecated: prefer role-*) */
-  --color-status-success: oklch(0.723 0.192 149.6);
-  --color-status-warning: oklch(0.728 0.168  22.5);
-  --color-status-error:   oklch(0.568 0.202 283.1);  /* purple — colourblind policy */
-  --color-status-info:    oklch(0.769 0.132 191.7);
+  --color-text-heading:   var(--role-text-heading);
+  --color-text-body:      var(--role-text-body);
+  --color-text-secondary: var(--role-text-secondary);
+  --color-text-muted:     var(--role-text-muted);
+  --color-text-subtle:    var(--role-text-subtle);
+  --color-text-disabled:  var(--role-text-disabled);
 
   /* ============================================================
-     LAYER 4 — Shadcn/ui bridge
-     Tailwind generates bg-background, text-foreground, etc.
+     LAYER 3 — Semantic roles.
+     Error is RED because D2C's primary is blue and error must be
+     maximally separated from primary under dichromacy — see the
+     separation policy in vars.css. Not a fixed-hue rule.
      ============================================================ */
-  --color-background:         oklch(0.961 0     0.5);
-  --color-foreground:         oklch(0.22  0.015 260);
-  --color-card:               oklch(1     0     0.5);
-  --color-card-foreground:    oklch(0.22  0.015 260);
-  --color-popover:            oklch(1     0     0.5);
-  --color-popover-foreground: oklch(0.22  0.015 260);
-  --color-primary:            oklch(0.546 0.215 262.9);
-  --color-primary-foreground: oklch(0.99  0     0);
-  --color-secondary:          oklch(0.511 0.23  277);
-  --color-secondary-foreground: oklch(0.99 0    0);
-  --color-muted:              oklch(0.963 0.003 228.9);
-  --color-muted-foreground:   oklch(0.52  0.018 260);
-  --color-accent:             oklch(0.769 0.132 191.7);
-  --color-accent-foreground:  oklch(0.17  0.02  260);
-  --color-destructive:        oklch(0.568 0.202 283.1);  /* purple — colourblind policy */
-  --color-destructive-foreground: oklch(0.99 0  0);
-  --color-border:             oklch(0.942 0.005 247.9);
-  --color-input:              oklch(0.942 0.005 247.9);
-  --color-ring:               oklch(0.546 0.215 262.9);
+  --color-role-primary:     var(--role-primary);
+  --color-role-secondary:   var(--role-secondary);
+  --color-role-accent:      var(--role-accent);
+  --color-role-error:       var(--role-error);
+  --color-role-destructive: var(--role-destructive);
+  --color-role-warning:     var(--role-warning);
+  --color-role-success:     var(--role-success);
+  --color-role-info:        var(--role-info);
+
+  /* AA-safe text variants — the only correct token for coloured type.
+     A saturated fill colour is not a legible text colour. */
+  --color-primary-text: var(--role-primary-text);
+  --color-accent-text:  var(--role-accent-text);
+  --color-error-text:   var(--role-error-text);
+  --color-warning-text: var(--role-warning-text);
+  --color-success-text: var(--role-success-text);
+
+  /* Per-app accent (Layer 5). Resolves through [data-app] on <body>,
+     falling back to the shared accent when no app is declared. */
+  --color-app-accent:      var(--app-accent, var(--role-accent));
+  --color-app-accent-text: var(--app-accent-text, var(--role-accent-text));
 
   /* ============================================================
-     LAYER 5 — Inverse text (for coloured fill surfaces)
+     LAYER 4 — shadcn/ui bridge
      ============================================================ */
-  --color-text-on-primary:  oklch(0.99 0    0);
-  --color-text-on-accent:   oklch(0.17 0.02 260);
-  --color-text-on-error:    oklch(0.99 0    0);
-  --color-text-on-success:  oklch(0.17 0.02 260);
-  --color-text-on-warning:  oklch(0.17 0.02 260);
+  --color-background:             var(--role-bg-body);
+  --color-foreground:             var(--role-text-body);
+  --color-card:                   var(--role-bg-panel);
+  --color-card-foreground:        var(--role-text-body);
+  --color-popover:                var(--role-bg-panel);
+  --color-popover-foreground:     var(--role-text-body);
+  --color-primary:                var(--role-primary);
+  --color-primary-foreground:     var(--text-on-primary);
+  --color-secondary:              var(--role-secondary);
+  --color-secondary-foreground:   var(--text-on-primary);
+  --color-muted:                  var(--role-bg-input);
+  --color-muted-foreground:       var(--role-text-muted);
+  --color-accent:                 var(--role-accent);
+  --color-accent-foreground:      var(--text-on-accent);
+  --color-destructive:            var(--role-destructive);
+  --color-destructive-foreground: var(--text-on-error);
+  --color-border:                 var(--role-border);
+  --color-input:                  var(--role-border);
+  --color-ring:                   var(--role-primary);
 
   /* ============================================================
-     WCAG AA text pairs for raw neons on light backgrounds
+     LAYER 5 — Inverse text on coloured fills
      ============================================================ */
-  --color-accent-text:  oklch(0.486 0.084 191.5);
-  --color-primary-text: oklch(0.485 0.243 263.6);
+  --color-text-on-primary: var(--text-on-primary);
+  --color-text-on-accent:  var(--text-on-accent);
+  --color-text-on-error:   var(--text-on-error);
+  --color-text-on-success: var(--text-on-success);
+  --color-text-on-warning: var(--text-on-warning);
 
   /* ============================================================
      ANIMATIONS
@@ -143,27 +152,28 @@
 }
 
 /* ============================================================
-   KEYFRAMES — outside @theme (v4 doesn't expose them there)
-   oklch used throughout — no rgba/hsl leakage
+   KEYFRAMES — outside @theme (v4 doesn't expose them there).
+   Colour-bearing frames derive from --role-accent, so they follow
+   per-app accent and tenant branding instead of pinning cyan.
    ============================================================ */
 @keyframes pulse-soft {
   0%, 100% { opacity: 1; }
-  50%       { opacity: 0.7; }
+  50%      { opacity: 0.7; }
 }
 
 @keyframes glow {
-  0%   { box-shadow: 0 0  5px oklch(0.769 0.132 191.7 / 0.2); }
-  100% { box-shadow: 0 0 20px oklch(0.769 0.132 191.7 / 0.6); }
+  0%   { box-shadow: 0 0  5px oklch(from var(--role-accent) l c h / 0.2); }
+  100% { box-shadow: 0 0 20px oklch(from var(--role-accent) l c h / 0.6); }
 }
 
 @keyframes neon-pulse {
-  0%, 100% { text-shadow: 0 0 10px oklch(0.769 0.132 191.7 / 0.3); }
-  50%       { text-shadow: 0 0 20px oklch(0.769 0.132 191.7 / 0.8); }
+  0%, 100% { text-shadow: 0 0 10px oklch(from var(--role-accent) l c h / 0.3); }
+  50%      { text-shadow: 0 0 20px oklch(from var(--role-accent) l c h / 0.8); }
 }
 
 @keyframes float {
   0%, 100% { transform: translateY(0px); }
-  50%       { transform: translateY(-10px); }
+  50%      { transform: translateY(-10px); }
 }
 
 @keyframes shimmer {
@@ -173,7 +183,7 @@
 
 @keyframes typing {
   0%, 60% { opacity: 1; }
-  30%      { opacity: 0.4; }
+  30%     { opacity: 0.4; }
 }
 
 @keyframes shine {

package/src/css/runtime-branding.css

@@ -1,22 +0,0 @@
-/*
- * runtime-branding.css — populated at runtime by <BrandingProvider>
- *
- * DO NOT add static values here. BrandingProvider reads the tenant's
- * branding JSON from Supabase and calls
- *   document.documentElement.style.setProperty('--primary', value)
- * for each key. This file is a documentation placeholder only.
- *
- * Keys populated at runtime (if tenant has branding configured):
- *   --primary         (oklch string)
- *   --accent          (oklch string)
- *   --accent-primary  (oklch string)
- *   --app-primary     (oklch string)
- *   --app-accent      (oklch string)
- * Logo URLs are injected via JS into CSS vars:
- *   --logo-url        (url() string)
- *   --mark-url        (url() string)
- */
-
-:root[data-branding-loaded="true"] {
-  /* intentionally empty — BrandingProvider injects vars directly via JS */
-}

package/src/css/tokens-brand-corporate-braden.css

@@ -1,43 +0,0 @@
-/*
- * @bsuite/theme — tokens-brand-corporate-braden.css
- *
- * Braden corporate brand deviation.
- * Applied via .theme-braden or data-brand="braden" — NEVER auto-applied.
- *
- * ⚠️  This file is EXEMPT from the D2C oklch-only rule (BRADEN-EXEMPT).
- *     Do NOT import this file from index.css or any D2C app entry point.
- *     Braden's own stylesheet opts in explicitly.
- *
- * Source of truth: TOKEN-MAPPING.md §4 + §6
- */
-
-.theme-braden,
-[data-brand="braden"] {
-
-  /* ===== Braden brand primitives ===== */
-  --app-primary:      oklch(0.488 0.170 17.6);    /* Braden Red */
-  --app-accent:       oklch(0.769 0.096 90.9);    /* Braden Gold */
-  --app-primary-dark: oklch(0.400 0.137 16.8);    /* Braden Red — pressed/hover state */
-
-  /* ===== Background ===== */
-  --bg-body:    oklch(1 0 0);
-  --bg-panel:   oklch(1 0 0);
-  --bg-surface: oklch(0.975 0 0);
-
-  /* ===== Text ===== */
-  --text-primary: oklch(0.156 0 0);
-
-  /* ===== Border ===== */
-  --border-color: oklch(0.916 0 0);
-
-  /* ===== Accent / brand ===== */
-  --accent-primary:   oklch(0.488 0.170 17.6);   /* Braden Red */
-  --accent-secondary: oklch(0.769 0.096 90.9);   /* Braden Gold */
-
-  /* ===== shadcn/ui bridge tokens ===== */
-  --primary:            oklch(0.488 0.170 17.6);  /* Braden Red */
-  --primary-foreground: oklch(1 0 0);
-  --accent:             oklch(0.769 0.096 90.9);  /* Braden Gold */
-  --accent-foreground:  oklch(0.156 0 0);
-  --ring:               oklch(0.488 0.170 17.6);  /* Braden Red ring */
-}

package/src/css/tokens-dark.css

@@ -1,101 +0,0 @@
-/*
- * @bsuite/theme — tokens-dark.css
- *
- * Full semantic token set for the dark theme.
- * Applied to .dark.
- *
- * All values are in OKLCH — no hex, no hsl() wrappers.
- * Source of truth: TOKEN-MAPPING.md v0.2.0 + vars.css
- */
-
-.dark {
-
-  /* ===== Text ===== */
-  --text-primary:        oklch(0.94 0.012 260);
-  --text-secondary:      oklch(0.82 0.015 260);
-  --text-muted:          oklch(0.68 0.018 260);
-  --text-subtle:         oklch(0.56 0.015 260);
-  --text-disabled:       oklch(0.44 0.010 260);
-  --text-on-primary:     oklch(0.99 0 0);
-  --text-on-surface:     oklch(0.94 0.012 260);
-  --color-primary-text:  oklch(0.623 0.188 259.8);   /* WCAG AA blue text on dark bg */
-  --color-accent-text:   oklch(0.769 0.132 191.7);   /* WCAG AA cyan text on dark bg */
-
-  /* ===== Background ===== */
-  --bg-body:      oklch(0.166 0.026 269.4);           /* deep navy */
-  --bg-surface:   oklch(0.19 0.02 260);
-  --bg-panel:     oklch(0.242 0.03 269.9);
-  --bg-tertiary:  oklch(0.326 0.036 266.7);
-  --bg-elevated:  oklch(0.292 0.034 270);
-  --bg-input:     oklch(0.242 0.03 269.9 / 0.6);
-  --bg-hover:     oklch(0.39 0.035 265);
-  --bg-selected:  oklch(0.546 0.215 262.9 / 0.15);
-
-  /* ===== Border ===== */
-  --border-color:        oklch(0.769 0.132 191.7 / 0.15);
-  --border-color-strong: oklch(0.769 0.132 191.7 / 0.3);
-  --border-shell:        oklch(0.769 0.132 191.7 / 0.18);
-
-  /* ===== Accent / brand ===== */
-  --accent-primary:   oklch(0.546 0.215 262.9);   /* Electric Blue */
-  --accent-secondary: oklch(0.769 0.132 191.7);   /* Electric Cyan */
-
-  /* ===== Status (same values in both themes) ===== */
-  --color-success: oklch(0.697 0.135 172.1);
-  --color-warning: oklch(0.868 0.125 81.4);
-  --color-error:   oklch(0.568 0.202 283.1);
-  --color-info:    oklch(0.769 0.132 191.7);
-
-  /* ===== shadcn/ui bridge tokens ===== */
-  --background:             oklch(0.166 0.026 269.4);
-  --foreground:             var(--text-primary);
-  --card:                   oklch(0.242 0.03 269.9);
-  --card-foreground:        var(--text-primary);
-  --popover:                oklch(0.292 0.034 270);
-  --popover-foreground:     var(--text-primary);
-  --primary:                oklch(0.769 0.132 191.7);  /* Cyan as primary in dark */
-  --primary-foreground:     oklch(0.166 0.026 269.4);
-  --secondary:              oklch(0.242 0.03 269.9);
-  --secondary-foreground:   var(--text-primary);
-  --muted:                  oklch(0.242 0.03 269.9);
-  --muted-foreground:       var(--text-muted);
-  --accent:                 oklch(0.546 0.215 262.9);  /* Blue as accent in dark */
-  --accent-foreground:      var(--text-primary);
-  --destructive:            var(--color-error);
-  --destructive-foreground: oklch(0.99 0 0);
-  --border:                 oklch(0.769 0.132 191.7 / 0.15);
-  --input:                  oklch(0.769 0.132 191.7 / 0.15);
-  --ring:                   oklch(0.769 0.132 191.7);  /* Cyan ring in dark */
-
-  /* ===== Box shadows — deep blacks + neon cyan glow ===== */
-  --shadow-elev-0: none;
-  --shadow-elev-1: 0 1px 3px oklch(0 0 0 / 0.3);
-  --shadow-elev-2: 0 4px 8px oklch(0 0 0 / 0.4), 0 1px 3px oklch(0 0 0 / 0.3);
-  --shadow-elev-3: 0 8px 16px oklch(0 0 0 / 0.5), 0 4px 8px oklch(0 0 0 / 0.3);
-  --shadow-elev-4: 0 16px 32px oklch(0 0 0 / 0.6), 0 8px 16px oklch(0 0 0 / 0.4);
-
-  /* ===== Neon glow helpers ===== */
-  --glow-button:       0 0 20px oklch(0.769 0.132 191.7 / 0.3);
-  --glow-button-hover: 0 0 30px oklch(0.769 0.132 191.7 / 0.5);
-
-  /*
-   * Card glow — subtle neon separation for card surfaces, dark mode only.
-   * Derived from the app's accent colour (--app-accent, falling back to
-   * the shared --role-accent default, matching the live vars.css) so
-   * per-tenant
-   * BrandingProvider overrides and per-app brand accents (Conduit green,
-   * R80.3 amber, etc.) automatically re-colour the glow. Two layers:
-   * a 1px accent ring (edge definition, replaces a hard border) plus a
-   * soft negative-spread halo (ambient separation). Kept subtle by
-   * design — this is surface separation, not a decorative outline.
-   */
-  --card-glow-source: var(--app-accent, var(--role-accent));
-  --glow-card:       0 0 0 1px color-mix(in oklch, var(--card-glow-source) 30%, transparent),
-                      0 0 14px -4px color-mix(in oklch, var(--card-glow-source) 35%, transparent);
-  --glow-card-hover: 0 0 0 1px color-mix(in oklch, var(--card-glow-source) 42%, transparent),
-                      0 0 20px -4px color-mix(in oklch, var(--card-glow-source) 48%, transparent);
-
-  /* ===== Button shadow ===== */
-  --button-shadow:       0 0 20px oklch(0.769 0.132 191.7 / 0.3);
-  --button-hover-shadow: 0 0 30px oklch(0.769 0.132 191.7 / 0.5);
-}

package/src/css/tokens-high-contrast.css

@@ -1,34 +0,0 @@
-/*
- * @bsuite/theme — tokens-high-contrast.css
- *
- * AAA accessibility overrides for users who have opted into
- * "More Contrast" in their OS/browser settings.
- *
- * Kept intentionally minimal — only tokens that fail AAA at default
- * values are overridden. All other tokens inherit from tokens-light.css
- * or tokens-dark.css.
- *
- * Source of truth: TOKEN-MAPPING.md v0.2.0
- */
-
-@media (prefers-contrast: more) {
-
-  /* ----- Light mode overrides (default / :root) ----- */
-  :root,
-  .light {
-    --text-primary:        oklch(0 0 0);   /* pure black */
-    --text-secondary:      oklch(0.1 0 0);
-    --text-muted:          oklch(0.2 0 0);
-    --border-color:        oklch(0 0 0);
-    --border-color-strong: oklch(0 0 0);
-  }
-
-  /* ----- Dark mode overrides ----- */
-  .dark {
-    --text-primary:        oklch(1 0 0);   /* pure white */
-    --text-secondary:      oklch(0.9 0 0);
-    --text-muted:          oklch(0.8 0 0);
-    --border-color:        oklch(1 0 0);
-    --border-color-strong: oklch(1 0 0);
-  }
-}

package/src/css/tokens-light.css

@@ -1,89 +0,0 @@
-/*
- * @bsuite/theme — tokens-light.css
- *
- * Full semantic token set for the light theme.
- * Applied to :root and .light.
- *
- * All values are in OKLCH — no hex, no hsl() wrappers.
- * Source of truth: TOKEN-MAPPING.md v0.2.0
- */
-
-:root,
-.light {
-
-  /* ===== Text ===== */
-  --text-primary:        oklch(0.22 0.015 260);
-  --text-secondary:      oklch(0.38 0.018 260);
-  --text-muted:          oklch(0.52 0.018 260);
-  --text-subtle:         oklch(0.60 0.012 260);
-  --text-disabled:       oklch(0.72 0.010 260);
-  --text-on-primary:     oklch(0.99 0 0);
-  --text-on-surface:     oklch(0.22 0.015 260);
-  --color-primary-text:  oklch(0.485 0.243 263.6);   /* WCAG AA blue text on light bg */
-  --color-accent-text:   oklch(0.486 0.084 191.5);   /* WCAG AA cyan text on light bg */
-
-  /* ===== Background ===== */
-  --bg-body:      oklch(0.961 0 0.5);
-  --bg-surface:   oklch(0.982 0.002 248);
-  --bg-panel:     oklch(1 0 0);
-  --bg-tertiary:  oklch(0.963 0.003 228.9);
-  --bg-elevated:  oklch(1 0 0);
-  --bg-input:     oklch(0.982 0.002 248);
-  --bg-hover:     oklch(0.963 0.003 228.9);
-  --bg-selected:  oklch(0.546 0.215 262.9 / 0.08);
-
-  /* ===== Border ===== */
-  --border-color:        oklch(0.916 0.006 248);
-  --border-color-strong: oklch(0.741 0.022 250 / 0.5);
-  --border-shell:        oklch(0.741 0.022 250 / 0.2);
-
-  /* ===== Accent / brand ===== */
-  --accent-primary:   oklch(0.546 0.215 262.9);   /* Electric Blue */
-  --accent-secondary: oklch(0.769 0.132 191.7);   /* Electric Cyan */
-
-  /* ===== Status ===== */
-  --color-success: oklch(0.697 0.135 172.1);
-  --color-warning: oklch(0.868 0.125 81.4);
-  --color-error:   oklch(0.568 0.202 283.1);
-  --color-info:    oklch(0.769 0.132 191.7);
-
-  /* ===== shadcn/ui bridge tokens ===== */
-  --background:             oklch(0.961 0 0.5);
-  --foreground:             var(--text-primary);
-  --card:                   oklch(1 0 0);
-  --card-foreground:        var(--text-primary);
-  --popover:                oklch(1 0 0);
-  --popover-foreground:     var(--text-primary);
-  --primary:                oklch(0.546 0.215 262.9);  /* Electric Blue */
-  --primary-foreground:     var(--text-on-primary);
-  --secondary:              oklch(0.961 0 0.5);
-  --secondary-foreground:   var(--text-primary);
-  --muted:                  oklch(0.961 0 0.5);
-  --muted-foreground:       var(--text-muted);
-  --accent:                 oklch(0.769 0.132 191.7);  /* Electric Cyan */
-  --accent-foreground:      oklch(0.17 0.02 260);
-  --destructive:            var(--color-error);
-  --destructive-foreground: oklch(0.99 0 0);
-  --border:                 oklch(0.916 0.006 248);    /* from hsl(214.3 31.8% 91.4%) */
-  --input:                  oklch(0.916 0.006 248);
-  --ring:                   oklch(0.546 0.215 262.9);  /* Electric Blue */
-
-  /* ===== Border-radius ===== */
-  --radius: 0.5rem;
-
-  /* ===== Box shadows — soft neutral, no neon glow in light mode ===== */
-  --shadow-elev-0: none;
-  --shadow-elev-1: 0 1px 2px oklch(0 0 0 / 0.05);
-  --shadow-elev-2: 0 4px 6px oklch(0 0 0 / 0.07), 0 2px 4px oklch(0 0 0 / 0.06);
-  --shadow-elev-3: 0 10px 15px oklch(0 0 0 / 0.1), 0 4px 6px oklch(0 0 0 / 0.05);
-  --shadow-elev-4: 0 20px 25px oklch(0 0 0 / 0.1), 0 10px 10px oklch(0 0 0 / 0.04);
-
-  /* ===== Glow helpers — disabled in light mode ===== */
-  --glow-button:       none;
-  --glow-button-hover: none;
-  --glow-card:         none;
-  --glow-card-hover:   none;
-
-  /* ===== Button shadow — transparent/none in light mode ===== */
-  --button-shadow: none;
-}