@exxatdesignux/ui 0.2.18 → 0.2.19

package/src/tokens/README.md

@@ -0,0 +1,15 @@
+# Design tokens (CSS modules)
+
+Structural split of the former monolithic `globals.css`. **No token values were changed** — only file boundaries.
+
+| File | Contents |
+|------|----------|
+| `tailwind-bridge.css` | `@theme inline` (Tailwind v4 color/radius map), `html[data-text-size]` |
+| `base.css` | `:root` light defaults, `.dark` semantic overrides |
+| `themes.css` | `.theme-one`, `.theme-prism`, `.theme-assessment`, `.theme-custom`, secondary panel paint |
+| `high-contrast.css` | `data-contrast`, `prefers-contrast`, `forced-colors` |
+| `layers.css` | `@layer base`, `@layer utilities`, global cursor rule |
+
+**Entry points:** `../globals.css` (Tailwind + tokens), `../theme.css` (tokens only for apps that import Tailwind separately).
+
+**App wiring:** `apps/web/app/globals.css` imports Tailwind, `@source`, variants, then these files via `../../../packages/ui/src/tokens/…`.

package/src/tokens/base.css

@@ -0,0 +1,337 @@
+/* ==========================================================================
+   :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);
+}