@exxatdesignux/ui 0.2.19 → 0.3.0

package/src/tokens/base.css

@@ -1,337 +0,0 @@
-/* ==========================================================================
-   :root — Exxat One · Light Mode (brand hue 286.1)
-   All contrast ratios verified against oklch(1 0 0) white background.
-   ========================================================================== */
-:root {
-  /* font-size intentionally NOT overridden here.
-     Shadcn components assume 1rem = 16px (browser default).
-     Overriding to 87.5% / 14px breaks rem-based spacing on all devices,
-     and compounds incorrectly at Windows 150% system zoom.
-     If a compact 14px density is needed, apply it at the component/page level
-     via a scoped class, not globally on :root. */
-  /* Minimum readable UI copy: 11px (`text-xs` / --text-xs). Do not use smaller arbitrary sizes. */
-
-  /* ── Layout ─────────────────────────────────────────────────── */
-  /* SiteHeader / breadcrumb height. Mirrored on the SidebarProvider for
-     descendants; declared here too so JS that reads from documentElement
-     (e.g. DataTable sticky-head offset) can resolve it. Plain px so
-     `parseFloat` can read it as a number. Keep in sync with `headerHeight`
-     in components/sidebar-shell.tsx (currently `calc(var(--spacing) * 12)` = 48px). */
-  --header-height: 48px;
-
-  /* ── Typography ─────────────────────────────────────────────── */
-  /* Ivy Presto loaded via Adobe Fonts Kit wuk5wqn (use.typekit.net) */
-  --font-heading: "ivypresto-text";
-
-  /* ── Brand — Exxat One (hue 286.1) ─────────────────────────── */
-  /* Primary surface — requested token */
-  --brand-tint:        oklch(0.9676 0.016 286.1);
-  /* Lighter / darker washes (same hue) for nested UI & hovers */
-  --brand-tint-light:  oklch(0.993 0.007 286.1);
-  --brand-tint-subtle: oklch(0.935 0.024 286.1);
-  /* Interactive accent + scale (readable on white; pairs with --brand-tint) */
-  --brand-color:       oklch(0.50 0.14 286.1);
-  --brand-color-light: oklch(0.78 0.09 286.1);
-  --brand-color-dark:  oklch(0.38 0.11 286.1);
-  --brand-color-deep:  oklch(0.28 0.085 286.1);
-  --brand-foreground:  oklch(0.985 0 0);
-  /* Fixed swatches for brand picker (Exxat One vs Prism), independent of active theme */
-  --brand-preview-one:   var(--brand-tint);
-  --brand-preview-prism: oklch(0.57 0.24 342);
-
-  /**
-   * Ask Leo panel tints (same mixes as the vertical wash). Use for blobs, cards, etc.
-   * `--leo-surface-gradient` is the full linear wash on `AskLeoSidebar`.
-   */
-  --leo-surface-tint-a: color-mix(in oklch, var(--brand-color) 4%, var(--background));
-  --leo-surface-tint-b: color-mix(in oklch, var(--brand-color) 8%, var(--background));
-  --leo-surface-gradient: linear-gradient(180deg, var(--leo-surface-tint-a) 0%, var(--leo-surface-tint-b) 100%);
-
-  /* KeyMetrics `variant="flat"` — no band surface; bottom brand glow only (OKLCH). */
-  --key-metrics-flat-cell-bg: transparent;
-  --key-metrics-flat-divider: color-mix(in oklch, var(--sidebar-border) 55%, transparent);
-  --key-metrics-flat-band-radial: radial-gradient(
-    ellipse 120% 68% at 50% 100%,
-    color-mix(in oklch, var(--brand-color) 20%, transparent) 0%,
-    color-mix(in oklch, var(--brand-color) 8%, transparent) 42%,
-    transparent 72%
-  );
-  --key-metrics-flat-band-shadow: none;
-  --key-metrics-card-glow-radial: radial-gradient(
-    ellipse 110% 90% at 50% 100%,
-    color-mix(in oklch, var(--brand-color) 18%, transparent) 0%,
-    transparent 65%
-  );
-
-  /* ── Surfaces ────────────────────────────────────────────────── */
-  --background:         oklch(1 0 0);
-  --foreground:         oklch(0.145 0 0);           /* ≈ #1A1A1A — 17:1 on white ✓ */
-  --card:               oklch(1 0 0);
-  --card-foreground:    oklch(0.145 0 0);
-  --popover:            oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-
-  /* ── Primary ─────────────────────────────────────────────────── */
-  /* Default / ghost / solid primary actions — neutral charcoal (style guide) */
-  --primary:            oklch(0.3457 0.0052 286.13);
-  --primary-foreground: oklch(0.985 0 0);
-
-  /* ── Secondary / Muted / Accent ──────────────────────────────── */
-  --secondary:             oklch(0.95 0.0058 264.53);
-  --secondary-foreground:  oklch(0.082 0 0);
-  --muted:                 oklch(0.945 0.002 270);
-  --muted-foreground:      oklch(0.50 0.012 270);   /* 5.5:1 on white ✓ */
-  --accent:                oklch(0.925 0.005 260);
-  --accent-foreground:     oklch(0.082 0 0);
-
-  /* ── Destructive ─────────────────────────────────────────────── */
-  /* oklch(0.55 0.22 25) ≈ #C0392B — 5.1:1 on white ✓             */
-  --destructive:            oklch(0.55 0.22 25);
-  --destructive-foreground: oklch(1 0 0);
-
-  /* ── Borders ─────────────────────────────────────────────────── */
-  /* Decorative: cards, dividers — no AA contrast requirement        */
-  --border: oklch(0.92 0.002 270);
-
-  /* Form-field boundary — WCAG 1.4.11 requires 3:1 against bg.
-     --border-control-3: L=0.62 ≈ #90929A → borderline; use with care.
-     --border-control-35: L=0.25 → ≥ 3.5:1 — recommended for inputs.   */
-  --border-control:    oklch(0.82 0.004 270);   /* subtle (layout use only) */
-  --border-control-3:  oklch(0.6196 0.0092 270); /* ≈ 3:1 on white (minimum) */
-  --border-control-35: oklch(0.25 0.01 270);    /* ≈ 3.5:1+ (recommended)   */
-  --control-border:    var(--border-control-3);  /* default form-field border */
-
-  /* ── Input ───────────────────────────────────────────────────── */
-  /* Raised contrast target for control outlines (>= 3.1:1 on white). */
-  --input:            oklch(0.62 0.01 264.52);
-  --input-background: oklch(0.97 0.002 270);
-
-  /* ── Focus ring ──────────────────────────────────────────────── */
-  /* 3:1+ contrast on both light & dark backgrounds (WCAG 2.4.11)  */
-  --ring: oklch(0.25 0 0);
-
-  /* ── Charts ──────────────────────────────────────────────────── */
-  --chart-1: oklch(0.55 0.22 264.116);
-  --chart-2: oklch(0.48 0.15 184.704);
-  --chart-3: oklch(0.32 0.08 227.392);
-  --chart-4: oklch(0.65 0.18 84.429);
-  --chart-5: oklch(0.58 0.18 70.08);
-
-  /* ── Chip / Badge ────────────────────────────────────────────── */
-  /* AA-compliant on white: all ≥ 4.5:1 (WCAG 1.4.3)              */
-  --chip-1:           oklch(0.38 0.18 264);   /* indigo   */
-  --chip-2:           oklch(0.35 0.14 184);   /* teal     */
-  --chip-3:           oklch(0.32 0.08 227);   /* slate    */
-  --chip-4:           oklch(0.42 0.12 84);    /* amber    */
-  --chip-5:           oklch(0.42 0.14 70);    /* orange   */
-  --chip-destructive: oklch(0.40 0.18 25);    /* red      */
-
-  /* ── Prism promo banner ──────────────────────────────────────── */
-  /* Rose hue 343 — used universally regardless of active theme    */
-  --banner-prism-bg: oklch(0.97 0.02 343);
-
-  /* ── Sidebar — Exxat One brand tint ───────────────────────────── */
-  --sidebar:                    var(--brand-tint);
-  --sidebar-foreground:         oklch(0.145 0 0);
-  --sidebar-primary:            oklch(0.082 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent:             oklch(0.945 0.025 286.1);
-  --sidebar-accent-foreground:  oklch(0.3457 0.0052 286.13);
-  --sidebar-border:             oklch(0.92 0.025 286.1);
-  --sidebar-ring:               oklch(0.25 0 0);
-  /* Nav section titles — ≥4.5:1 vs --sidebar (not vs page white) */
-  --sidebar-section-label-foreground: color-mix(in oklch, var(--sidebar-foreground) 58%, var(--sidebar));
-  /* Nested secondary rail — elevation 1: brand wash, lighter than `--sidebar` / `--brand-tint`. */
-  --secondary-panel-bg:         color-mix(in oklch, var(--background) 40%, var(--brand-tint-light) 60%);
-
-  /* Browser UI (meta theme-color) — aligned with --brand-tint */
-  --theme-color-chrome: #f3f2f8;
-
-  /* ── Border radius ───────────────────────────────────────────── */
-  --radius: 0.5rem; /* 8px base */
-
-  /* ── Density / touch targets ─────────────────────────────────── */
-  --scaling:              1;
-  --control-height:       calc(40px * var(--scaling));
-  --control-height-sm:    calc(32px * var(--scaling));
-  /* WCAG 2.5.5 — minimum 44×44 px touch target (mobile only)     */
-  --control-height-touch: 44px;
-  --control-padding-y:    calc(8px  * var(--scaling));
-  --control-padding-x:    calc(12px * var(--scaling));
-  --table-row-height:     calc(48px * var(--scaling));
-
-  /* ── Interactive hover (ties to --muted / --accent — theme overrides apply) ─ */
-  --interactive-hover:            var(--muted);
-  --interactive-hover-foreground: var(--foreground);
-  --interactive-hover-subtle:     color-mix(in oklch, var(--muted) 50%, var(--background));
-  --interactive-hover-soft:       color-mix(in oklch, var(--muted) 40%, var(--background));
-  --interactive-hover-medium:     color-mix(in oklch, var(--muted) 60%, var(--background));
-  --interactive-hover-strong:     color-mix(in oklch, var(--muted) 70%, var(--background));
-  --interactive-hover-row:        color-mix(in oklch, var(--accent) 50%, var(--background));
-
-  /* ── DataTable — opaque row/cell surfaces (pinned cells MUST be opaque) ── */
-  --dt-row-bg:             var(--background);
-  --dt-row-hover:          oklch(0.972 0.001 270);
-  --dt-row-selected:       oklch(0.962 0.003 260);
-  --dt-row-selected-fg:    var(--foreground);
-  --dt-header-bg:          var(--background);
-  --dt-group-bg:           oklch(0.972 0.001 270);
-  --dt-new-row-bg:         oklch(from var(--brand-color) 0.985 0.006 h);
-  --dt-new-row-border:     var(--brand-color);
-
-  /* ── Transitions ─────────────────────────────────────────────── */
-  --transition-fast:   0.15s ease;
-  --transition-normal: 0.25s ease-in-out;
-  --transition-colors: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
-
-  /* ── Shadows ─────────────────────────────────────────────────── */
-  --shadow-sm: oklch(0 0 0 / 0.08) 0px 1px 2px 0px;
-  --shadow-md: oklch(0 0 0 / 0.08) 0px 2px 4px -1px, oklch(0 0 0 / 0.06) 0px 1px 2px;
-  --shadow-lg: oklch(0 0 0 / 0.10) 0px 4px 8px -2px, oklch(0 0 0 / 0.06) 0px 2px 4px;
-
-  /* ── Sticky column edge fade (data tables) ───────────────────── */
-  --sticky-edge-fade: oklch(0 0 0 / 0.08);
-
-  /* ── Overlay scrim (Sheet / Drawer / Dialog) ─────────────────── */
-  /* Softer than raw bg-black/10; follows foreground hue (not pure black) */
-  --overlay: color-mix(in oklch, var(--foreground) 5%, transparent);
-
-  /* ── Avatar initials (table) ───────────────────────────────────── */
-  /* Soft brand wash + brand ink — no black fills; ≥4.5:1 on white rows */
-  --avatar-initials-bg: color-mix(in oklch, var(--brand-color) 14%, oklch(1 0 0));
-  --avatar-initials-fg: var(--brand-color-dark);
-
-  /* ── KPI insight severity (KeyMetrics) ────────────────────────── */
-  --insight-severity-warning-bg: color-mix(in oklch, var(--chart-4) 15%, transparent);
-  --insight-severity-warning-fg: color-mix(in oklch, var(--chart-4) 75%, var(--foreground));
-  --insight-severity-info-bg: color-mix(in oklch, var(--chart-1) 14%, transparent);
-  --insight-severity-info-fg: color-mix(in oklch, var(--chart-1) 75%, var(--foreground));
-
-  /* ── Tinted icon discs — soft wash (≈14% tint like legacy inline styles); contrast from --chip-* / brand-dark on fg */
-  --icon-disc-chart-2-bg: color-mix(in oklch, var(--chart-2) 14%, transparent);
-  --icon-disc-chart-2-fg: var(--chip-2);
-  --icon-disc-chart-4-bg: color-mix(in oklch, var(--chart-4) 14%, transparent);
-  --icon-disc-chart-4-fg: var(--chip-4);
-  --icon-disc-brand-bg: color-mix(in oklch, var(--brand-color) 12%, transparent);
-  --icon-disc-brand-fg: var(--brand-color-dark);
-  --icon-disc-danger-bg: color-mix(in oklch, var(--destructive) 14%, transparent);
-  --icon-disc-danger-fg: var(--chip-destructive);
-
-  /* ── Conditional formatting rule backgrounds (table drawer) ─── */
-  --conditional-rule-green: color-mix(in oklch, var(--chart-2) 22%, transparent);
-  --conditional-rule-yellow: color-mix(in oklch, var(--chart-4) 30%, transparent);
-  --conditional-rule-blue: color-mix(in oklch, var(--chart-1) 22%, transparent);
-  --conditional-rule-red: color-mix(in oklch, var(--destructive) 22%, transparent);
-  --conditional-rule-purple: color-mix(in oklch, var(--brand-color) 22%, transparent);
-  --conditional-rule-orange: color-mix(in oklch, var(--chart-5) 25%, transparent);
-}
-
-/* ==========================================================================
-   Dark Mode — Exxat One base (neutral surfaces; brand uses --brand-*)
-   ========================================================================== */
-.dark {
-  --sticky-edge-fade: oklch(0 0 0 / 0.32);
-
-  /* Canvas — charcoal grey (not near-black) */
-  --background:         oklch(0.20 0.008 270);
-  --foreground:         oklch(0.985 0 0);
-  --card:               oklch(0.255 0.008 270);
-  --card-foreground:    oklch(0.985 0 0);
-  --popover:            oklch(0.255 0.008 270);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary:            oklch(0.985 0 0);
-  --primary-foreground: oklch(0.3457 0.0052 286.13);
-  --secondary:          oklch(0.31 0.04 270);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted:              oklch(0.31 0.04 270);
-  --muted-foreground:   oklch(0.72 0.012 270);   /* ≥ 4.5:1 on dark bg ✓ */
-  --accent:             oklch(0.33 0.06 270);
-  --accent-foreground:  oklch(0.985 0 0);
-  --destructive:        oklch(0.65 0.20 25);      /* brighter for dark bg */
-  --destructive-foreground: oklch(0.10 0 0);
-
-  /* KeyMetrics flat band — no surface; bottom brand glow only (OKLCH). */
-  --key-metrics-flat-cell-bg: transparent;
-  --key-metrics-flat-divider: color-mix(in oklch, var(--sidebar-border) 55%, transparent);
-  --key-metrics-flat-band-radial: radial-gradient(
-    ellipse 120% 68% at 50% 100%,
-    color-mix(in oklch, var(--brand-color) 26%, transparent) 0%,
-    color-mix(in oklch, var(--brand-color) 10%, transparent) 42%,
-    transparent 72%
-  );
-  --key-metrics-flat-band-shadow: none;
-  --key-metrics-card-glow-radial: radial-gradient(
-    ellipse 110% 90% at 50% 100%,
-    color-mix(in oklch, var(--brand-color) 22%, transparent) 0%,
-    transparent 62%
-  );
-
-  /* Borders — visible but not washed out on dark surfaces */
-  --border:            oklch(0.38 0.008 270);
-  --border-control:    oklch(0.72 0.012 270);
-  --border-control-3:  oklch(0.78 0.012 270);
-  --border-control-35: oklch(0.75 0.012 270);
-  --control-border:    var(--border-control-3);
-
-  --input:             oklch(0.72 0.012 270);
-  --input-background:  oklch(0.255 0 0);
-
-  /* Focus ring — 3:1+ on dark bg */
-  --ring: oklch(0.85 0 0);
-
-  /* Charts — higher lightness for dark surfaces */
-  --chart-1: oklch(0.70 0.22 264.376);
-  --chart-2: oklch(0.75 0.15 162.48);
-  --chart-3: oklch(0.78 0.12 227.392);
-  --chart-4: oklch(0.80 0.18 84.429);
-  --chart-5: oklch(0.75 0.18 70.08);
-
-  /* Chips — AA-compliant on dark bg (L raised) */
-  --chip-1:           oklch(0.72 0.18 264);
-  --chip-2:           oklch(0.72 0.14 184);
-  --chip-3:           oklch(0.78 0.12 227);
-  --chip-4:           oklch(0.78 0.14 84);
-  --chip-5:           oklch(0.78 0.16 70);
-  --chip-destructive: oklch(0.72 0.18 25);
-
-  /* Tinted icon discs — same soft transparency wash; fg stays readable on dark canvas */
-  --icon-disc-chart-2-bg: color-mix(in oklch, var(--chart-2) 14%, transparent);
-  --icon-disc-chart-2-fg: color-mix(in oklch, var(--foreground) 10%, var(--chart-2));
-  --icon-disc-chart-4-bg: color-mix(in oklch, var(--chart-4) 14%, transparent);
-  --icon-disc-chart-4-fg: color-mix(in oklch, var(--foreground) 10%, var(--chart-4));
-  --icon-disc-brand-bg: color-mix(in oklch, var(--brand-color) 12%, transparent);
-  --icon-disc-brand-fg: color-mix(in oklch, var(--foreground) 8%, var(--brand-color));
-  --icon-disc-danger-bg: color-mix(in oklch, var(--destructive) 14%, transparent);
-  --icon-disc-danger-fg: color-mix(in oklch, var(--foreground) 8%, var(--destructive));
-
-  /* Sidebar */
-  --sidebar:                    oklch(0.245 0.015 270);
-  --sidebar-foreground:         oklch(0.985 0 0);
-  --sidebar-primary:            oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent:             oklch(0.30 0.012 270);
-  --sidebar-accent-foreground:  oklch(0.985 0 0);
-  --sidebar-border:             oklch(0.38 0.010 270);
-  --sidebar-ring:               oklch(0.85 0 0);
-  --sidebar-section-label-foreground: color-mix(in oklch, var(--sidebar-foreground) 48%, var(--sidebar));
-  /* Nested secondary rail — elevation 1: lift from sidebar (sidebar + card, not light `--brand-tint`). */
-  --secondary-panel-bg:         color-mix(in oklch, var(--sidebar) 52%, var(--card) 48%);
-  --theme-color-chrome:         #2f2d36;
-
-  /* Lifted scrim on dark — white-tinted veil, not heavy black */
-  --overlay: color-mix(in oklch, var(--foreground) 10%, transparent);
-
-  /* Mid lavender chip + light text — no black circle; contrasts on dark table rows */
-  --avatar-initials-bg: color-mix(in oklch, var(--brand-color) 38%, oklch(0.40 0.05 286.1));
-  --avatar-initials-fg: oklch(0.99 0.01 286.1);
-
-  /* DataTable — opaque surfaces for dark mode */
-  --dt-row-bg:             var(--background);
-  --dt-row-hover:          oklch(0.24 0.01 270);
-  --dt-row-selected:       oklch(0.27 0.02 270);
-  --dt-row-selected-fg:    var(--foreground);
-  --dt-header-bg:          var(--background);
-  --dt-group-bg:           oklch(0.24 0.01 270);
-  --dt-new-row-bg:         oklch(from var(--brand-color) 0.22 0.02 h);
-  --dt-new-row-border:     var(--brand-color);
-}