/* ========================================================================== EXXAT DESIGN SYSTEM — globals.css Brands: Exxat One (Lavender · hue 270) · Exxat Prism (Rose · hue 343) Standard: WCAG 2.1 Level AA • Text contrast ≥ 4.5 : 1 (SC 1.4.3) • UI control contrast ≥ 3 : 1 (SC 1.4.11) • Focus ring ≥ 3 : 1 (SC 2.4.11) • Touch targets ≥ 44 × 44 px (SC 2.5.5 / mobile) ========================================================================== */ @import "tailwindcss"; @import "tw-animate-css"; /* Inter is loaded via next/font/google in the consuming app's layout — no @import needed here. */ /* -------------------------------------------------------------------------- Self-describing Tailwind sources — see docs/migrations/0003-globals-css-canonical.md -------------------------------------------------------------------------- Tailwind v4 only emits a utility when it sees the class string in a scanned file. The package's component classes live in two different places depending on how the package is consumed: • Published npm install: node_modules/@exxatdesignux/ui/dist/ (compiled JS) • Monorepo workspace dev: packages/ui/src/ (.tsx sources) @source paths resolve relative to THIS file. Both forms below resolve correctly under both consumption modes; the missing branch (e.g. `./components` in a published install where src/components/ isn't shipped) is silently skipped by Tailwind, so leaving them both in is safe. This frees consumer apps from having to know the path — their globals.css just needs `@import "@exxatdesignux/ui/globals.css";` plus their own folders. -------------------------------------------------------------------------- */ @source "../dist"; @source "./components"; @source "./hooks"; @source "./lib"; @source "./product-framework"; /* RTL layout direction support */ @custom-variant dark (&:is(.dark *)); /* High-contrast variant — in-app High or Windows (JSON) contrast */ @custom-variant hc (&:is([data-contrast="high"] *, [data-contrast="windows"] *)); /* -------------------------------------------------------------------------- Tailwind v4 theme bridge — maps CSS custom-props → utility classes -------------------------------------------------------------------------- */ @theme inline { /* Typography — use Tailwind utilities (`font-sans`, `font-heading`, `text-*`), not raw px / inline font-family. */ --font-heading: "ivypresto-text", Georgia, serif; --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif; /* Minimum product text: 12px — use `text-xs` or larger. Never use raw px in components. */ --text-xs: 12px; --text-xs--line-height: 16px; /* Dense count badges / "New" pills — same 12px floor as `--text-xs`; tighter line-height only. */ --text-2xs: 12px; --text-2xs--line-height: 14px; /* Dense FA icons + secondary-panel chrome (between xs and sm). */ --text-icon: 13px; --text-icon--line-height: 1; /* Command palette input + nav rows that sit between body (14px) and base (16px). */ --text-md: 15px; --text-md--line-height: 22px; /* Semantic color map */ --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); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-border-control: var(--border-control); --color-input: var(--input); --color-input-background: var(--input-background); --color-ring: var(--ring); /* Modal / sheet / drawer scrim */ --color-overlay: var(--overlay); /* Chart tokens */ --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); /* Chip / badge tokens (AA-compliant on light bg: ≥ 4.5:1) */ --color-chip-1: var(--chip-1); --color-chip-2: var(--chip-2); --color-chip-3: var(--chip-3); --color-chip-4: var(--chip-4); --color-chip-5: var(--chip-5); --color-chip-destructive: var(--chip-destructive); /* Brand accent + Exxat One tint scale (see :root --brand-*) */ --color-brand: var(--brand-color); --color-brand-dark: var(--brand-color-dark); --color-brand-foreground: var(--brand-foreground); --color-brand-tint: var(--brand-tint); --color-brand-tint-light: var(--brand-tint-light); --color-brand-tint-subtle: var(--brand-tint-subtle); --color-brand-color-light: var(--brand-color-light); --color-brand-deep: var(--brand-color-deep); /* Prism banner highlight */ --color-banner-prism: var(--banner-prism-bg); /* 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); /* WCAG 1.4.3 — always mixed against real --sidebar (lavender / rose / dark) */ --color-sidebar-section-label: var(--sidebar-section-label-foreground); /* Interactive hover — single source for ghost controls, lists, table chrome */ --color-interactive-hover: var(--interactive-hover); --color-interactive-hover-foreground: var(--interactive-hover-foreground); --color-interactive-hover-subtle: var(--interactive-hover-subtle); --color-interactive-hover-soft: var(--interactive-hover-soft); --color-interactive-hover-medium: var(--interactive-hover-medium); --color-interactive-hover-strong: var(--interactive-hover-strong); --color-interactive-hover-row: var(--interactive-hover-row); /* Icon-only controls — SC 1.4.11 (≥3:1 UI) on canvas / sidebar */ --color-icon-button-foreground: var(--icon-button-foreground); --color-icon-button-foreground-on-sidebar: var(--icon-button-foreground-on-sidebar); --color-icon-button-foreground-on-secondary-panel: var(--icon-button-foreground-on-secondary-panel); --color-secondary-action-foreground: var(--secondary-action-foreground); --color-placeholder-foreground: var(--placeholder-foreground); /* DataTable — opaque surfaces for pinned/sticky cells and row states */ --color-dt-row-bg: var(--dt-row-bg); --color-dt-row-hover: var(--dt-row-hover); --color-dt-row-selected: var(--dt-row-selected); --color-dt-row-selected-fg: var(--dt-row-selected-fg); --color-dt-header-bg: var(--dt-header-bg); --color-dt-group-bg: var(--dt-group-bg); --color-dt-new-row-bg: var(--dt-new-row-bg); --color-dt-new-row-border: var(--dt-new-row-border); /* Border-radius scale (4 px base → 8 px default) */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 24px; /* ============================================================ Exxat L0 — Tailwind utility bridges (additive) ------------------------------------------------------------ Short utility forms backed by --exxat-* canonical primitives. They coexist with the shadcn-named bridges above. Prefer these for new code; see apps/web/docs/token-taxonomy.md. ============================================================ */ --color-surface-1: var(--exxat-color-surface-1); --color-surface-2: var(--exxat-color-surface-2); --color-surface-3: var(--exxat-color-surface-3); --color-surface-muted: var(--exxat-color-surface-muted); --color-surface-accent: var(--exxat-color-surface-accent); --color-surface-sidebar: var(--exxat-color-surface-sidebar); --color-ink-1: var(--exxat-color-ink-1); --color-ink-2: var(--exxat-color-ink-2); --color-ink-on-brand: var(--exxat-color-ink-on-brand); --color-brand-1: var(--exxat-color-brand-1); --color-brand-2: var(--exxat-color-brand-2); --color-brand-3: var(--exxat-color-brand-3); --color-brand-tint-1: var(--exxat-color-brand-tint-1); --color-brand-tint-2: var(--exxat-color-brand-tint-2); --color-brand-tint-3: var(--exxat-color-brand-tint-3); --color-border-1: var(--exxat-color-border-1); --color-focus-ring: var(--exxat-color-focus-ring); /* Exxat L0 radius scale → rounded-1 … rounded-6 */ --radius-1: var(--exxat-radius-1); --radius-2: var(--exxat-radius-2); --radius-3: var(--exxat-radius-3); --radius-4: var(--exxat-radius-4); --radius-5: var(--exxat-radius-5); --radius-6: var(--exxat-radius-6); } /* -------------------------------------------------------------------------- Text size (Settings → Appearance) Pattern: root `font-size` steps like iOS Larger Text / Android font scale / browser zoom-at-root so rem-based components track together. We keep steps modest; `compact` keeps `--text-xs` / `--text-2xs` at the 12px floor when root scales down. -------------------------------------------------------------------------- */ html[data-text-size="compact"] { font-size: 94%; --text-xs: 12px; /* hard 12px floor — do not shrink readable copy */ --text-xs--line-height: 16px; --text-2xs: 12px; --text-2xs--line-height: 14px; --text-icon: 13px; --text-icon--line-height: 1; --text-md: 15px; --text-md--line-height: 22px; } html[data-text-size="large"] { font-size: 112.5%; } /* ========================================================================== :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: 12px (`text-xs` / `text-2xs`). Never ship visible copy below 12px. */ /* ── 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, AND so the rendered breadcrumb height does not drift under `data-text-size` font-size scaling. Keep in sync with `headerHeight` in components/sidebar-shell.tsx (also literal `48px` — the previous `calc(var(--spacing) * 12)` form resolved to ~45.12px in compact mode and ~54px in large mode, which opened a sub-pixel gap or overlap between the stuck breadcrumb and the floating table column header). */ --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` — full-screen Leo landing / search blobs only; * panel mode uses `--secondary-panel-bg` via `NestedSecondaryPanelShell`. */ --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); /* Horizontal radius is intentionally < 50% of the band width so the glow fades to fully transparent before reaching the band's left and right edges. The band sits inside the page chrome with no border of its own — leaving tint at the edges read as a hard seam where the band meets the surrounding canvas. */ --key-metrics-flat-band-radial: radial-gradient( ellipse 60% 70% 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); /* near-black — 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) — destructive red, 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. #8E9095 → oklch(0.6533 0.0077 268.51) — lighter neutral field outline. */ --border-control: oklch(0.86 0.004 268.51); /* subtle (layout use only) */ --border-control-3: oklch(0.6533 0.0077 268.51); /* default field border */ --border-control-35: oklch(0.6533 0.0077 268.51); /* same rung — inputs, chips */ --control-border: var(--border-control-3); /* default form-field border */ /* ── Input ───────────────────────────────────────────────────── */ /* Field outline — matches --border-control-3 (#8E9095 → OKLCH). */ --input: oklch(0.6533 0.0077 268.51); --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: oklch(0.9635 0.0071 295.8); /* ── 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)); /* Icon + secondary chrome — ≥4.5:1 on --background / --card (not --muted-foreground L=0.50) */ --icon-button-foreground: color-mix(in oklch, var(--foreground) 68%, var(--background)); --secondary-action-foreground: var(--icon-button-foreground); --placeholder-foreground: color-mix(in oklch, var(--foreground) 54%, var(--background)); /* Sidebar / Ask Leo rail — mixed on --sidebar (not opacity /70 hacks) */ --icon-button-foreground-on-sidebar: color-mix(in oklch, var(--sidebar-foreground) 82%, var(--sidebar)); /* Library / Tokens nested rail — mixed on --secondary-panel-bg (brand-tinted wash) */ --icon-button-foreground-on-secondary-panel: color-mix(in oklch, var(--foreground) 82%, var(--secondary-panel-bg)); /* ── 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; /* Nav flyouts (primary + secondary) and floating product sheets (Export, Properties, …) */ --shadow-sheet-flyout: oklch(0 0 0 / 0.11) 0px 4px 14px -2px, oklch(0 0 0 / 0.07) 0px 2px 6px; --shadow-sheet-panel: oklch(0 0 0 / 0.14) 0px 14px 32px -8px, oklch(0 0 0 / 0.09) 0px 6px 14px -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); /* ── Switch (ToggleSwitch) — "on" track ──────────────────────── */ /* iOS-style affirmative green so the on/off semantic reads at a glance. Knob keeps --primary-foreground (white in light mode) for ≥3:1 contrast against the green track per WCAG 1.4.11. The high-contrast mode override in the [data-contrast="high"] block continues to use --accent — green stays constant across brand themes (Prism rose / One lavender) since it encodes "on", not brand identity. */ --switch-on: oklch(0.62 0.16 150); /* ============================================================ Exxat L0 — canonical namespace (additive aliases) ------------------------------------------------------------ SLDS-style flat namespace. These are the official names the DS scales on — components SHOULD migrate to these over time. Existing shadcn-style names above are L1 aliases that resolve to the same values. The L0 names use var(...) so they inherit every theme override (.dark / .theme-one / .theme-prism / [data-contrast="high"]) automatically — no per-theme block needed. Reference: apps/web/docs/token-taxonomy.md (§ L0 Exxat). ============================================================ */ /* ── Surfaces (canvas → muted → input) ──────────────────────── */ --exxat-color-surface-1: var(--background); --exxat-color-surface-2: var(--card); --exxat-color-surface-3: var(--popover); --exxat-color-surface-muted: var(--muted); --exxat-color-surface-accent: var(--accent); --exxat-color-surface-secondary: var(--secondary); --exxat-color-surface-sidebar: var(--sidebar); --exxat-color-surface-input: var(--input-background); /* ── Ink (foreground / on-surface text) ─────────────────────── */ --exxat-color-ink-1: var(--foreground); --exxat-color-ink-2: var(--muted-foreground); --exxat-color-icon-button-1: var(--icon-button-foreground); --exxat-color-icon-button-sidebar: var(--icon-button-foreground-on-sidebar); --exxat-color-icon-button-secondary-panel: var(--icon-button-foreground-on-secondary-panel); --exxat-color-ink-on-surface-2: var(--card-foreground); --exxat-color-ink-on-surface-3: var(--popover-foreground); --exxat-color-ink-on-brand: var(--brand-foreground); --exxat-color-ink-on-primary: var(--primary-foreground); --exxat-color-ink-on-secondary: var(--secondary-foreground); --exxat-color-ink-on-accent: var(--accent-foreground); --exxat-color-ink-on-destructive: var(--destructive-foreground); /* ── Brand (interactive accent + scale) ─────────────────────── */ --exxat-color-brand-1: var(--brand-color); --exxat-color-brand-2: var(--brand-color-dark); --exxat-color-brand-3: var(--brand-color-light); --exxat-color-brand-deep: var(--brand-color-deep); --exxat-color-brand-tint-1: var(--brand-tint); --exxat-color-brand-tint-2: var(--brand-tint-subtle); --exxat-color-brand-tint-3: var(--brand-tint-light); /* ── Wordmark ink (Exxat product logo SVG + HTML prefix) ───── Brand-frozen slate/cool-grey pair used by the "Exxat" SVG letters and the HTML wordmark prefix. Held outside the `--foreground` family because the wordmark stays at brand ink even when the rest of the surface inverts. Replaces the bare light/dark wordmark literals in `apps/web/components/exxat-product-logo.tsx` and `product-wordmark.tsx`. */ --exxat-color-wordmark-ink-light: oklch(0.301 0.022 252); --exxat-color-wordmark-ink-dark: oklch(0.755 0.012 230); /* ── Action surfaces ────────────────────────────────────────── */ --exxat-color-action-primary: var(--primary); --exxat-color-action-secondary: var(--secondary); --exxat-color-action-destructive: var(--destructive); /* ── Borders (decorative + form-field ladder) ──────────────── */ --exxat-color-border-1: var(--border); --exxat-color-border-control-subtle: var(--border-control); --exxat-color-border-control-1: var(--border-control-3); --exxat-color-border-control-2: var(--border-control-35); /* ── Focus + overlay ────────────────────────────────────────── */ --exxat-color-focus-ring: var(--ring); --exxat-color-overlay: var(--overlay); /* ── Chart slots ────────────────────────────────────────────── */ --exxat-color-chart-1: var(--chart-1); --exxat-color-chart-2: var(--chart-2); --exxat-color-chart-3: var(--chart-3); --exxat-color-chart-4: var(--chart-4); --exxat-color-chart-5: var(--chart-5); /* ── Chip / badge slots ─────────────────────────────────────── */ --exxat-color-chip-1: var(--chip-1); --exxat-color-chip-2: var(--chip-2); --exxat-color-chip-3: var(--chip-3); --exxat-color-chip-4: var(--chip-4); --exxat-color-chip-5: var(--chip-5); --exxat-color-chip-destructive: var(--chip-destructive); /* ── Radius scale ──────────────────────────────────────────── */ --exxat-radius-1: 4px; --exxat-radius-2: 8px; --exxat-radius-3: 12px; --exxat-radius-4: 16px; --exxat-radius-5: 20px; --exxat-radius-6: 24px; /* ── Spacing scale ─────────────────────────────────────────── */ --exxat-spacing-1: 0.25rem; --exxat-spacing-2: 0.5rem; --exxat-spacing-3: 0.75rem; --exxat-spacing-4: 1rem; --exxat-spacing-5: 1.25rem; --exxat-spacing-6: 1.5rem; --exxat-spacing-8: 2rem; --exxat-spacing-12: 3rem; /* ── Sidebar / outline tree vertical guides ─────────────────── */ /* Primary nav: px-2 row padding + half of size-4 icon column. */ --sidebar-tree-guide-x: var(--exxat-spacing-4); /* Half of min-h-7 (1.75rem) primary row — line meets icon vertical center. */ --sidebar-tree-guide-overhang: 0.875rem; /* Folder tree: px-2 + half of size-6 chevron hit target. */ --outline-tree-guide-x: calc(var(--outline-tree-row-padding-x) + var(--outline-tree-chevron-half)); --outline-tree-guide-overhang: var(--outline-tree-chevron-half); /* Per nesting level — flat sub-lists; indent lives on the row only. */ --outline-tree-row-padding-x: var(--exxat-spacing-2); --outline-tree-depth-step: var(--exxat-spacing-3); --outline-tree-chevron-half: 0.75rem; /* ── Control height scale ──────────────────────────────────── */ --exxat-control-height-1: var(--control-height-sm); --exxat-control-height-2: var(--control-height); --exxat-control-height-3: var(--control-height-touch); } /* ========================================================================== Dark Mode — Exxat One base (neutral surfaces; brand uses --brand-*) ========================================================================== */ .dark { --sticky-edge-fade: oklch(0 0 0 / 0.32); /* Brand-tint scale for dark mode — same hue family as :root but at dark-mode lightness so derived surfaces (`--secondary-panel-bg`, `--sidebar` fallback via `var(--brand-tint)`, etc.) read as dark brand surfaces, not pale pastel washes. Themed `.dark` variants (`.theme-one.dark`, `.theme-prism.dark`, …) override these with their own hue. Chroma note: at L≈0.27 the OKLCH hue-discrimination threshold is much higher than at L≈0.97 (Helmholtz–Kohlrausch). The PRIMARY brand surface (`--brand-tint`) needs ~3–4× the chroma of its light-mode counterpart so different products read as visibly different in dark mode. The lighter / subtler scale steps stay low-chroma — they're elevation hints, not the brand carrier. */ --brand-tint: oklch(0.30 0.05 286.1); --brand-tint-light: oklch(0.34 0.04 286.1); --brand-tint-subtle: oklch(0.26 0.025 286.1); /* Canvas — charcoal grey with a perceptible whisper of brand chroma (still ≥ 12:1 against --foreground). Was 0.008 — below the OKLCH hue-perception threshold at L 0.20, so the canvas read as dead-neutral grey. 0.014 ties the canvas to the lavender-blue family (286.1), not cyan-green (270). */ --background: oklch(0.20 0.014 286.1); --foreground: oklch(0.985 0 0); /* Dark surface elevation ladder (see commentary at line ~605 for the full stack across themed blocks): --background L=0.20 canvas --secondary-panel-bg L=0.22 nested chrome (between sidebar & canvas) --card L=0.225 subtle inline elevation --sidebar /input-bg L=0.245 outer chrome --popover L=0.275 floating menus / dropdowns Card stays at +0.025 above canvas so it reads as the same surface family. Popover lifts further (+0.075) so it visibly floats above the canvas it covers — a too-close popover blends into the page and a dropdown loses its boundary. */ --card: oklch(0.225 0.017 286.1); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.275 0.022 286.1); --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 286.1); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.31 0.04 286.1); --muted-foreground: oklch(0.72 0.012 286.1); /* ≥ 4.5:1 on dark bg ✓ */ --accent: oklch(0.33 0.06 286.1); --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); /* See the light-theme block above for the rationale: horizontal radius < 50% so the glow lives in the middle and fades fully transparent at the band edges. */ --key-metrics-flat-band-radial: radial-gradient( ellipse 60% 70% 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.010 286.1); --border-control: oklch(0.76 0.008 286.1); --border-control-3: oklch(0.82 0.008 286.1); --border-control-35: oklch(0.82 0.008 286.1); --control-border: var(--border-control-3); --input: oklch(0.82 0.008 286.1); --input-background: oklch(0.245 0.010 286.1); /* Focus ring — 3:1+ on dark bg */ --ring: oklch(0.85 0 0); /* Switch "on" track — slightly lighter L so the green still reads as vibrant against the dark canvas; knob picks up --primary-foreground (charcoal) for clear knob/track separation in dark mode. */ --switch-on: oklch(0.66 0.17 150); /* 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 — same chroma-bump principle as `--brand-tint`: at L≈0.245 the OKLCH hue-perception threshold is ~0.04, so 0.015 read as dead grey regardless of brand. 0.04 reads as the brand without competing with the content panel. `.theme-*.dark` blocks restate this scale at their hue. */ --sidebar: oklch(0.245 0.04 286.1); --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.035 286.1); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.38 0.025 286.1); --sidebar-ring: oklch(0.85 0 0); --sidebar-section-label-foreground: color-mix(in oklch, var(--sidebar-foreground) 48%, var(--sidebar)); /* Nested secondary rail — nested chrome wedged between the outer sidebar (L=0.245) and the page canvas (L=0.20). Previously this resolved to `var(--brand-tint)` at L=0.30, which made the panel *brighter* than the sidebar — it popped out instead of nestling in. Now L=0.22 places it just above canvas with a whisper of brand chroma; each themed dark block below overrides with the brand hue so it still reads as Exxat One vs Prism vs Assessment vs custom. */ --secondary-panel-bg: oklch(0.22 0.025 286.1); --theme-color-chrome: oklch(0.2950 0.0143 286.1); /* 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); --icon-button-foreground: color-mix(in oklch, var(--foreground) 78%, var(--background)); --secondary-action-foreground: var(--icon-button-foreground); --placeholder-foreground: color-mix(in oklch, var(--foreground) 64%, var(--background)); --icon-button-foreground-on-sidebar: color-mix(in oklch, var(--sidebar-foreground) 88%, var(--sidebar)); --icon-button-foreground-on-secondary-panel: color-mix(in oklch, var(--foreground) 88%, var(--secondary-panel-bg)); /* DataTable — opaque surfaces for dark mode */ --dt-row-bg: var(--background); --dt-row-hover: oklch(0.24 0.012 286.1); --dt-row-selected: oklch(0.27 0.02 286.1); --dt-row-selected-fg: var(--foreground); --dt-header-bg: var(--background); --dt-group-bg: oklch(0.24 0.012 286.1); --dt-new-row-bg: oklch(from var(--brand-color) 0.22 0.02 h); --dt-new-row-border: var(--brand-color); } /* ========================================================================== Theme: Exxat One · Lavender (explicit — also applied as :root default) Usage: or ========================================================================== */ .theme-one, .theme-lavender { --brand-tint: oklch(0.9676 0.016 286.1); --brand-tint-light: oklch(0.993 0.007 286.1); --brand-tint-subtle: oklch(0.935 0.024 286.1); --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); --ring: var(--brand-color-dark); } /* Light surfaces only — must NOT override .dark (otherwise muted/accent stay “paper white” in dark mode) */ .theme-one:not(.dark), .theme-lavender:not(.dark) { --sidebar: var(--brand-tint); --sidebar-accent: oklch(0.945 0.025 286.1); --sidebar-border: oklch(0.92 0.025 286.1); --secondary: oklch(0.95 0.012 286.1); --accent: oklch(0.925 0.015 286.1); --muted: oklch(0.945 0.008 286.1); } .theme-one.dark, .dark.theme-one, .theme-lavender.dark, .dark.theme-lavender { --ring: var(--brand-color); --background: oklch(0.20 0.014 286.1); --sidebar: oklch(0.245 0.04 286.1); --sidebar-accent: oklch(0.30 0.035 286.1); --sidebar-border: oklch(0.38 0.025 286.1); /* Restore dark surfaces (base .dark is overridden by :not(.dark) rules above when both classes apply) */ --secondary: oklch(0.31 0.04 286.1); --muted: oklch(0.31 0.04 286.1); --accent: oklch(0.33 0.06 286.1); /* Surface elevation ladder — dark mode. Card / input-background are *inline* elevations (same surface family as canvas, small step). Popover is a *floating* surface — lifts further so a dropdown over canvas reads as clearly above it instead of blending in. Secondary panel is nested chrome — wedged between canvas (L=0.20) and sidebar (L=0.245), so it nestles into the shell rather than popping out. Brand chroma stays gentle on all three; the saturated brand expression lives on --brand-tint / --sidebar. */ --secondary-panel-bg: oklch(0.22 0.025 286.1); --card: oklch(0.225 0.017 286.1); --popover: oklch(0.275 0.022 286.1); --input-background: oklch(0.245 0.010 286.1); /* Brand-tint scale — same hue (286.1 — Exxat One lavender), dark lightness. PRIMARY (`--brand-tint`) carries enough chroma to read as visibly lavender against the page canvas; LIGHT / SUBTLE steps are elevation aides only. */ --brand-tint: oklch(0.30 0.05 286.1); --brand-tint-light: oklch(0.34 0.04 286.1); --brand-tint-subtle: oklch(0.26 0.025 286.1); } /* ========================================================================== Theme: Exxat Prism · Rose · hue 343 Usage: or ========================================================================== */ .theme-prism, .theme-rose { /* Prism rose washes — base tint sampled from the approved Prism shell reference. Keep the scale pale; Prism should read as a soft rose canvas, not a saturated pink sidebar. */ --brand-tint: oklch(0.9695 0.0158 341.4); --brand-tint-light: oklch(0.9834 0.0100 345.4); --brand-tint-subtle: oklch(0.9465 0.0247 348.5); --brand-color: oklch(0.57 0.24 342); /* Prism rose */ --brand-color-light: oklch(0.78 0.14 342); --brand-color-dark: oklch(0.42 0.24 342); --brand-color-deep: oklch(0.32 0.20 342); --ring: var(--brand-color-dark); } .theme-prism:not(.dark), .theme-rose:not(.dark) { --sidebar: var(--brand-tint); --sidebar-accent: oklch(0.9465 0.0247 348.5); --sidebar-border: oklch(0.9152 0.0394 347.1); --secondary: oklch(0.9601 0.0120 345); --accent: oklch(0.9465 0.0180 348); --muted: oklch(0.9560 0.0080 345); --banner-prism-bg: var(--brand-tint); --theme-color-chrome: oklch(0.9695 0.0158 341.4); } .theme-prism.dark, .dark.theme-prism, .theme-rose.dark, .dark.theme-rose { --ring: var(--brand-color); --background: oklch(0.20 0.014 342); --sidebar: oklch(0.245 0.045 342); --sidebar-accent: oklch(0.30 0.04 342); --sidebar-border: oklch(0.38 0.028 342); --secondary: oklch(0.31 0.04 342); --muted: oklch(0.31 0.04 342); --accent: oklch(0.33 0.06 342); --theme-color-chrome: oklch(0.2657 0.0107 353.7); /* Surface elevation ladder — see commentary in .theme-one.dark. Chroma is a touch higher than lavender at every step because rose reads slightly dimmer at equal chroma at these lightnesses. */ --secondary-panel-bg: oklch(0.22 0.030 342); --card: oklch(0.225 0.020 342); --popover: oklch(0.275 0.026 342); --input-background: oklch(0.245 0.011 342); /* Brand-tint scale — same hue (342 — Prism rose), dark lightness. Rose can carry slightly higher chroma without warming-shift on dark surfaces. */ --brand-tint: oklch(0.30 0.055 342); --brand-tint-light: oklch(0.34 0.045 342); --brand-tint-subtle: oklch(0.26 0.028 342); } /* ========================================================================== Theme: Dynamic accent override · user-selected hue Usage: Activated by `ProductProvider` whenever the user sets a per-product brand color override in Settings → Appearance (across any of the three built-in products). The default look for each product still flows from `theme-one` / `theme-prism`; this block kicks in only when an override is present. The `exxat-custom` product was removed in a prior cleanup, so this is now a generic accent-override mechanism. ========================================================================== */ /* * Tint chroma is **derived from the source's chroma** so neighbouring hues * (e.g. Blue h=252 vs Indigo h=280 vs Purple h=286) read as distinct pale * tints instead of collapsing to the same near-white. The earlier formula * pinned chroma to a fixed `0.018`, which is below the hue-discrimination * threshold at L≈0.96 for closely-spaced hues — that's why Blue / Indigo / * Purple looked identical in the sidebar. * * `max(, calc(c * ))` rules: * - vibrant brand colours (c ≈ 0.10–0.23) get a meaningfully tinted * sidebar / accent / muted scale → product chrome visibly changes per * pick * - low-chroma custom-hex picks (greys) fall back to the floor so they * don't render as pure white * - lightness + hue stay pinned to the original mock-up values, so the * overall "very pale background" feel is unchanged */ .theme-custom { --brand-tint: oklch(from var(--custom-product-brand-color) 0.965 max(0.018, calc(c * 0.20)) h); --brand-tint-light: oklch(from var(--custom-product-brand-color) 0.992 max(0.008, calc(c * 0.08)) h); --brand-tint-subtle: oklch(from var(--custom-product-brand-color) 0.93 max(0.028, calc(c * 0.30)) h); --brand-color: var(--custom-product-brand-color); --brand-color-light: oklch(from var(--custom-product-brand-color) 0.82 c h); --brand-color-dark: oklch(from var(--custom-product-brand-color) 0.48 c h); --brand-color-deep: oklch(from var(--custom-product-brand-color) 0.34 c h); --ring: var(--brand-color-dark); } .theme-custom:not(.dark) { --sidebar: var(--brand-tint); --sidebar-accent: oklch(from var(--custom-product-brand-color) 0.945 max(0.026, calc(c * 0.28)) h); --sidebar-border: oklch(from var(--custom-product-brand-color) 0.90 max(0.026, calc(c * 0.28)) h); --secondary: oklch(from var(--custom-product-brand-color) 0.95 max(0.012, calc(c * 0.14)) h); --accent: oklch(from var(--custom-product-brand-color) 0.925 max(0.016, calc(c * 0.18)) h); --muted: oklch(from var(--custom-product-brand-color) 0.945 max(0.008, calc(c * 0.10)) h); --theme-color-chrome: color-mix(in oklch, var(--custom-product-brand-color) 10%, white); } .theme-custom.dark, .dark.theme-custom { --ring: var(--brand-color); --background: oklch(from var(--custom-product-brand-color) 0.20 max(0.014, calc(c * 0.12)) h); --sidebar: oklch(from var(--custom-product-brand-color) 0.245 max(0.035, calc(c * 0.28)) h); --sidebar-accent: oklch(from var(--custom-product-brand-color) 0.30 max(0.030, calc(c * 0.24)) h); --sidebar-border: oklch(from var(--custom-product-brand-color) 0.38 max(0.022, calc(c * 0.18)) h); --secondary: oklch(from var(--custom-product-brand-color) 0.31 max(0.04, calc(c * 0.40)) h); --muted: oklch(from var(--custom-product-brand-color) 0.31 max(0.04, calc(c * 0.40)) h); --accent: oklch(from var(--custom-product-brand-color) 0.33 max(0.06, calc(c * 0.50)) h); --theme-color-chrome: color-mix(in oklch, var(--custom-product-brand-color) 12%, black); /* Surface elevation ladder — derived from the custom picked hue. See commentary in .theme-one.dark for the full ladder. Chroma scales with the source colour (~13% for inline cards / 16% for floating popovers / 20% for secondary panel) with floors that keep near-grey picks from collapsing back to neutral. */ --secondary-panel-bg: oklch(from var(--custom-product-brand-color) 0.22 max(0.020, calc(c * 0.20)) h); --card: oklch(from var(--custom-product-brand-color) 0.225 max(0.015, calc(c * 0.13)) h); --popover: oklch(from var(--custom-product-brand-color) 0.275 max(0.018, calc(c * 0.16)) h); --input-background: oklch(from var(--custom-product-brand-color) 0.245 max(0.008, calc(c * 0.08)) h); /* Brand-tint scale — derived from the picked hue, dark lightness. PRIMARY carries chroma high enough for the secondary panel to read as the brand hue; floor 0.04 prevents low-chroma picks (greys) from collapsing back to a flat surface. */ --brand-tint: oklch(from var(--custom-product-brand-color) 0.30 max(0.04, calc(c * 0.30)) h); --brand-tint-light: oklch(from var(--custom-product-brand-color) 0.34 max(0.03, calc(c * 0.24)) h); --brand-tint-subtle: oklch(from var(--custom-product-brand-color) 0.26 max(0.022, calc(c * 0.20)) h); } /* ========================================================================== HIGH CONTRAST MODE ────────────────────────────────────────────────────────────────────────── Three guiding principles (WCAG 1.4.6 Enhanced + research-backed UX): 1. FORCED-COLORS APPROACH Strip gradients, shadows, and background images. Use borders to define shape and elevation — not fills. Limited palette: 4–6 named tokens, nothing decorative. 2. DON'T RELY ON COLOR ALONE Error/warning states get a thick border AND an icon differentiator. Charts and badges use luminance separation (grayscale steps), not hue. Interactive state (hover / focus / active) is communicated via outline, not background-color change alone. 3. DARK MODE ≠ HIGH CONTRAST Dark mode = aesthetic; uses subtle greys. High-contrast dark = functional; uses near-black grey canvas, pure white (white), and a "hot" neon-yellow focus accent for maximum visibility. ========================================================================== */ /* ── Light High Contrast ─────────────────────────────────────────────────── */ /* Fluent 2 / Microsoft 6-color strategy. */ /* Highlight = saturated bright brand color (follows theme hue). */ html[data-contrast="high"]:not(.dark) { --hc-highlight: oklch(from var(--brand-color) 0.35 0.30 h); --hc-highlight-text: oklch(1 0 0); --background: oklch(1 0 0); --foreground: oklch(0.14 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.14 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.14 0 0); --primary: oklch(0.14 0 0); --primary-foreground: oklch(1 0 0); --secondary: oklch(1 0 0); --secondary-foreground: oklch(0.14 0 0); --muted: oklch(0.94 0 0); --muted-foreground: oklch(0.14 0 0); --accent: var(--hc-highlight); --accent-foreground: var(--hc-highlight-text); --destructive: oklch(0.45 0.24 25); --destructive-foreground: oklch(1 0 0); --border: oklch(0.14 0 0); --border-control: oklch(0.14 0 0); --border-control-3: oklch(0.14 0 0); --border-control-35: oklch(0.14 0 0); --control-border: oklch(0.14 0 0); --input: oklch(0.14 0 0); --input-background: oklch(1 0 0); --ring: var(--hc-highlight); --sidebar: oklch(1 0 0); --sidebar-foreground: oklch(0.14 0 0); --sidebar-primary: oklch(0.14 0 0); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.90 0 0); --sidebar-accent-foreground: oklch(0.14 0 0); --sidebar-border: oklch(0.14 0 0); --sidebar-ring: var(--hc-highlight); --sidebar-section-label-foreground: oklch(0.40 0 0); --chart-1: oklch(0.14 0 0); --chart-2: oklch(0.35 0 0); --chart-3: oklch(0.55 0 0); --chart-4: oklch(0.72 0 0); --chart-5: oklch(0.86 0 0); --chip-1: oklch(0.14 0 0); --chip-2: oklch(0.14 0 0); --chip-3: oklch(0.14 0 0); --chip-4: oklch(0.14 0 0); --chip-5: oklch(0.14 0 0); --chip-destructive: oklch(0.45 0.24 25); --interactive-hover: oklch(0.88 0 0); --interactive-hover-foreground: oklch(0.14 0 0); --interactive-hover-subtle: oklch(0.92 0 0); --interactive-hover-soft: oklch(0.92 0 0); --interactive-hover-medium: oklch(0.86 0 0); --interactive-hover-strong: oklch(0.82 0 0); --interactive-hover-row: oklch(0.88 0 0); --overlay: color-mix(in oklch, var(--foreground) 18%, transparent); --dt-row-bg: oklch(1 0 0); --dt-row-hover: oklch(0.92 0 0); --dt-row-selected: var(--accent); --dt-row-selected-fg: var(--accent-foreground); --dt-header-bg: oklch(1 0 0); --dt-group-bg: oklch(0.92 0 0); --dt-new-row-bg: oklch(1 0 0); --dt-new-row-border: oklch(0.14 0 0); } /* ── Dark High Contrast ──────────────────────────────────────────────────── */ /* Same 6-color strategy inverted for dark canvas. */ /* Highlight = very bright saturated brand (like MS cyan but brand hue). */ html[data-contrast="high"].dark { --hc-highlight: oklch(from var(--brand-color) 0.78 0.30 h); --hc-highlight-text: oklch(0.08 0 0); --background: oklch(0.14 0 0); --foreground: oklch(0.96 0 0); --card: oklch(0.14 0 0); --card-foreground: oklch(0.96 0 0); --popover: oklch(0.20 0 0); --popover-foreground: oklch(0.96 0 0); --primary: oklch(0.96 0 0); --primary-foreground: oklch(0.10 0 0); --secondary: oklch(0.14 0 0); --secondary-foreground: oklch(0.96 0 0); --muted: oklch(0.22 0 0); --muted-foreground: oklch(0.96 0 0); --accent: var(--hc-highlight); --accent-foreground: var(--hc-highlight-text); --destructive: oklch(0.72 0.18 18); --destructive-foreground: oklch(0.10 0 0); --border: oklch(0.75 0 0); --border-control: oklch(0.75 0 0); --border-control-3: oklch(0.75 0 0); --border-control-35: oklch(0.75 0 0); --control-border: oklch(0.75 0 0); --input: oklch(0.75 0 0); --input-background: oklch(0.14 0 0); --ring: var(--hc-highlight); --sidebar: oklch(0.14 0 0); --sidebar-foreground: oklch(0.96 0 0); --sidebar-primary: oklch(0.96 0 0); --sidebar-primary-foreground: oklch(0.10 0 0); --sidebar-accent: oklch(0.24 0 0); --sidebar-accent-foreground: oklch(0.96 0 0); --sidebar-border: oklch(0.75 0 0); --sidebar-ring: var(--hc-highlight); --sidebar-section-label-foreground: oklch(0.65 0 0); --chart-1: oklch(0.96 0 0); --chart-2: oklch(0.75 0 0); --chart-3: oklch(0.55 0 0); --chart-4: oklch(0.38 0 0); --chart-5: oklch(0.22 0 0); --chip-1: oklch(0.96 0 0); --chip-2: oklch(0.96 0 0); --chip-3: oklch(0.96 0 0); --chip-4: oklch(0.96 0 0); --chip-5: oklch(0.96 0 0); --chip-destructive: oklch(0.72 0.18 18); --interactive-hover: oklch(0.26 0 0); --interactive-hover-foreground: oklch(0.96 0 0); --interactive-hover-subtle: oklch(0.22 0 0); --interactive-hover-soft: oklch(0.22 0 0); --interactive-hover-medium: oklch(0.28 0 0); --interactive-hover-strong: oklch(0.32 0 0); --interactive-hover-row: oklch(0.26 0 0); --overlay: color-mix(in oklch, var(--foreground) 22%, transparent); --dt-row-bg: oklch(0.14 0 0); --dt-row-hover: oklch(0.22 0 0); --dt-row-selected: var(--accent); --dt-row-selected-fg: var(--accent-foreground); --dt-header-bg: oklch(0.14 0 0); --dt-group-bg: oklch(0.22 0 0); --dt-new-row-bg: oklch(0.14 0 0); --dt-new-row-border: oklch(0.96 0 0); } /* Neutralize brand tint washes in HC so bg-brand-tint doesn't compete */ html:is([data-contrast="high"], [data-contrast="windows"]):not(.dark) { --brand-tint: oklch(0.94 0 0); --brand-tint-light: oklch(0.97 0 0); --brand-tint-subtle: oklch(0.98 0 0); } html:is([data-contrast="high"], [data-contrast="windows"]).dark { --brand-tint: oklch(0.22 0 0); --brand-tint-light: oklch(0.18 0 0); --brand-tint-subtle: oklch(0.16 0 0); } /* ── Structural rules shared by BOTH light and dark HC ──────────────────── */ /* Pattern 1: "Borders over Fills" — strip decorative chrome */ html:is([data-contrast="high"], [data-contrast="windows"]) { /* 1a. Remove ALL box-shadows (elevation via outline, not shadow) */ & * { box-shadow: none !important; text-shadow: none !important; } /* 1b. Strip gradient fills from cards; use border to define shape */ & [data-slot="card"] { background-image: none !important; border: 2px solid var(--foreground) !important; } /* 1c. Thicker borders on all form controls (WCAG 1.4.11: 3:1 UI contrast) */ & [data-slot="input"], & [data-slot="select-trigger"], & [data-slot="textarea"], & [data-slot="checkbox"], & [data-slot="switch"] { border-width: 2px !important; border-color: var(--foreground) !important; } /* 1d. Sidebar defined by its edge border, not background colour */ & [data-slot="sidebar"] { border-inline-end: 2px solid var(--sidebar-border) !important; } /* 1d-bis. Secondary panel (nested rail — Library, Tokens, …) — HC chrome. Normal mode reads the panel via `--secondary-panel-bg` (brand-tinted OKLCH) + `ring-1 ring-sidebar-border shadow-sm`. In HC mode the brand wash collapses to ~white/near-canvas and `box-shadow: none` above kills the ring, leaving the panel invisible against the background. Force a flat canvas fill and a 2px solid border so the panel reads as a distinct chrome surface — same treatment cards and the sidebar receive. */ & [data-slot="secondary-panel"] { background-color: var(--background) !important; background-image: none !important; border: 2px solid var(--sidebar-border) !important; } /* 1d-bis2. Secondary panel — active row uses the HC --accent highlight (saturated brand) instead of the normal-mode --sidebar-accent grey wash. The Library/Tokens nav rows are raw elements (not SidebarMenuButton), so the existing 'Pattern 3: Active nav' rule on [data-slot="sidebar-menu-button"][data-active="true"] doesn't fire. Two selectors: 1. `[aria-current="page"]` — the active link itself (NavRow, IconNavRow, the inner Link inside LibraryFolderTreeBranch). 2. `[class~="bg-sidebar-accent"]` — the folder-tree row WRAPPER (a
that puts the active fill class on the row and has its own `rounded-md`). The `~=` matcher is whole-token only so we don't accidentally match `hover:bg-sidebar-accent/50`. Both targets already carry `rounded-md` (or `rounded-sm` for the inner folder-tree link), so the bg fill follows that radius and reads as a pill. We deliberately avoid `:has(> [aria-current])` here because that also matched
  • wrappers which don't have a border-radius — painting them yielded a flat-cornered fill. */ & [data-slot="secondary-panel"] [aria-current="page"], & [data-slot="secondary-panel"] [class~="bg-sidebar-accent"] { background-color: var(--accent) !important; color: var(--accent-foreground) !important; /* No ring/outline — `outline` ignores border-radius and would render a square ring on top of the rounded bg. */ box-shadow: none !important; } & [data-slot="secondary-panel"] [aria-current="page"] *, & [data-slot="secondary-panel"] [class~="bg-sidebar-accent"] * { color: var(--accent-foreground) !important; } /* Active row count chip — invert against the highlighted row so the count remains legible on the saturated accent fill (same trick used by the SidebarMenuButton active-state rule above). */ & [data-slot="secondary-panel"] [aria-current="page"] [data-slot="badge"], & [data-slot="secondary-panel"] [aria-current="page"] [data-slot="sidebar-menu-badge"], & [data-slot="secondary-panel"] [class~="bg-sidebar-accent"] [data-slot="badge"], & [data-slot="secondary-panel"] [class~="bg-sidebar-accent"] [data-slot="sidebar-menu-badge"] { background-color: var(--accent-foreground) !important; color: var(--accent) !important; border-color: var(--accent-foreground) !important; } /* 1e. Tab list — border not fill */ & [data-slot="tabs-list"] { background-color: transparent !important; border: 2px solid var(--foreground) !important; } /* 1f. Badge / chip — border-based; no decorative fills */ & [data-slot="badge"] { border-width: 2px !important; border-color: var(--foreground) !important; background-color: var(--background) !important; font-weight: 700 !important; box-shadow: none !important; outline: none !important; color: var(--foreground) !important; } & [data-slot="badge"] * { color: var(--foreground) !important; } /* Status chip — same treatment as Badge (border-based, no decorative fill) */ & [data-slot="status-badge"] { border-width: 2px !important; border-color: var(--foreground) !important; background-color: var(--background) !important; font-weight: 700 !important; box-shadow: none !important; outline: none !important; color: var(--foreground) !important; } /* Sidebar wrapper is positioning-only when it wraps Badge/StatusBadge — avoid double border */ & [data-slot="sidebar-menu-badge"]:has([data-slot="badge"]), & [data-slot="sidebar-menu-badge"]:has([data-slot="status-badge"]) { border-width: 0 !important; background-color: transparent !important; box-shadow: none !important; outline: none !important; } & [data-slot="view-toolbar-count"] { border-width: 2px !important; border-color: currentColor !important; background-color: var(--background) !important; font-weight: 700 !important; color: var(--foreground) !important; box-shadow: none !important; outline: none !important; } & [data-slot="sidebar-menu-badge"]:not(:has([data-slot="badge"])):not(:has([data-slot="status-badge"])) { border-width: 2px !important; border-color: currentColor !important; background-color: var(--background) !important; font-weight: 700 !important; color: var(--foreground) !important; } /* Segmented tab buttons: global HC button border + count pill border = double ring */ & button[data-slot="view-segmented-item"] { border-width: 0 !important; border-color: transparent !important; } /* Radix Tabs — active state must not rely on muted fill / pseudo underline only */ & [data-slot="tabs-trigger"] { color: var(--foreground) !important; opacity: 1 !important; } & [data-slot="tabs-trigger"][data-state="active"] { background-color: var(--accent) !important; color: var(--accent-foreground) !important; outline: none !important; font-weight: 600 !important; } /* KPI strip + chart card mini-metrics — force readable copy (muted grays fail in HC) */ & [data-slot="key-metrics"] :where(span, p, button, a, i, label, div) { color: var(--foreground) !important; } & [data-slot="key-metrics"] :where(svg) { color: var(--foreground) !important; } /* List / menu rows — Highlight brand color for selection */ & [data-slot="dropdown-menu-item"][data-highlighted], & [data-slot="dropdown-menu-checkbox-item"][data-highlighted], & [data-slot="dropdown-menu-radio-item"][data-highlighted], & [data-slot="dropdown-menu-sub-trigger"][data-highlighted], & [data-slot="select-item"][data-highlighted], & [data-slot="command-item"][data-selected], & [data-slot="command-item"][aria-selected="true"] { background-color: var(--accent) !important; color: var(--accent-foreground) !important; } & [data-slot="dropdown-menu-item"][data-highlighted] *, & [data-slot="dropdown-menu-checkbox-item"][data-highlighted] *, & [data-slot="dropdown-menu-radio-item"][data-highlighted] *, & [data-slot="dropdown-menu-sub-trigger"][data-highlighted] *, & [data-slot="select-item"][data-highlighted] *, & [data-slot="command-item"][data-selected] *, & [data-slot="command-item"][aria-selected="true"] * { color: var(--accent-foreground) !important; } /* List hub views toolbar + segmented radiogroup (not Radix Tabs / tabs-list) */ & [data-slot="view-segmented-toolbar"] { background-color: transparent !important; border: 2px solid var(--foreground) !important; } & [data-slot="view-segmented-item"][aria-pressed="true"], & [data-slot="view-segmented-item"][aria-checked="true"] { background-color: var(--accent) !important; color: var(--accent-foreground) !important; outline: none !important; } /* Composed view-tab active shell (list-page.tsx) — wraps the label button and its chevron disclosure. Fill the shell so the chevron sibling sits on the same `--accent` highlight as the label, then cascade `--accent-foreground` to descendants so the chevron glyph stays legible. */ & [data-slot="view-segmented-item-shell"] { background-color: var(--accent) !important; color: var(--accent-foreground) !important; outline: none !important; } & [data-slot="view-segmented-item-shell"] * { color: var(--accent-foreground) !important; } /* Floating surfaces — portal menus, popovers, sheets, dialogs */ & [data-slot="dropdown-menu-content"], & [data-slot="dropdown-menu-sub-content"], & [data-slot="popover-content"], & [data-slot="select-content"], & [data-slot="dialog-content"], & [data-slot="sheet-content"], & [data-slot="drawer-content"] { border: 2px solid var(--foreground) !important; background-color: var(--background) !important; color: var(--foreground) !important; } & [data-slot="command"] { background-color: var(--background) !important; color: var(--foreground) !important; } /* Strip conditional-formatting inline bg from table cells in HC */ & td[style*="background"] { background: var(--dt-row-bg) !important; } & td.pinned-cell { background-color: var(--dt-row-bg) !important; } & tr:hover td.pinned-cell, & tr:hover td { background-color: var(--dt-row-hover) !important; } & tr[data-state="selected"] td.pinned-cell, & tr[data-state="selected"] td { background-color: var(--dt-row-selected) !important; color: var(--dt-row-selected-fg) !important; } /* Table selected rows — Highlight brand color (like MS Teams selection) */ & tr[data-state="selected"] { background-color: var(--dt-row-selected) !important; color: var(--dt-row-selected-fg) !important; } & tr[data-state="selected"] *:not([data-slot="checkbox"] *):not([data-slot="badge"] *):not([data-slot="checkbox"]):not([data-slot="badge"]) { color: var(--accent-foreground) !important; } & tr[data-state="selected"] [data-slot="badge"] { background-color: var(--accent-foreground) !important; color: var(--accent) !important; border-color: var(--accent-foreground) !important; } & tr[data-state="selected"] [data-slot="badge"] * { color: var(--accent) !important; } & tr[data-state="selected"] [data-slot="checkbox"][data-state="checked"], & tr[data-state="selected"] [data-slot="checkbox"][data-state="indeterminate"] { background-color: var(--accent-foreground) !important; border-color: var(--accent-foreground) !important; color: var(--accent) !important; } & tr[data-state="selected"] [data-slot="checkbox"][data-state="checked"] *, & tr[data-state="selected"] [data-slot="checkbox"][data-state="indeterminate"] * { color: var(--accent) !important; } & tr[data-state="selected"] [data-slot="checkbox"]:not([data-state="checked"]):not([data-state="indeterminate"]) { background-color: var(--accent) !important; border-color: var(--accent-foreground) !important; color: var(--accent-foreground) !important; } /* ── Pattern 2: Stronger focus ring (WCAG 2.4.11 / 2.4.12) ── */ & :focus-visible { outline: 3px solid var(--ring) !important; outline-offset: 3px !important; } /* ── Pattern 2: Error state — thick border + no colour-only signal ── */ & [aria-invalid="true"], & [data-invalid] { border-width: 3px !important; border-color: var(--destructive) !important; /* Downstream: pair with a ⚠ icon in the component for non-colour signal */ } /* ── Pattern 3: Active nav — Highlight brand fill (like MS Teams) ── */ & [data-slot="sidebar-menu-button"][data-active="true"] { background-color: var(--accent) !important; color: var(--accent-foreground) !important; outline: none !important; } & [data-slot="sidebar-menu-button"][data-active="true"] * { color: var(--accent-foreground) !important; } & [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="badge"], & [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="sidebar-menu-badge"] { background-color: var(--accent-foreground) !important; color: var(--accent) !important; border-color: var(--accent-foreground) !important; } & [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="badge"] *, & [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="sidebar-menu-badge"] * { color: var(--accent) !important; } & [data-slot="toggle-group-item"][data-state="on"] { outline: 2px solid var(--accent) !important; outline-offset: -2px !important; background-color: var(--accent) !important; color: var(--accent-foreground) !important; } /* ── Pattern 3b: Checked checkboxes — Highlight brand fill ── */ & [data-slot="checkbox"][data-state="checked"], & [data-slot="checkbox"][data-state="indeterminate"] { background-color: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-foreground) !important; } & [data-slot="checkbox"][data-state="checked"] *, & [data-slot="checkbox"][data-state="indeterminate"] * { color: var(--accent-foreground) !important; } /* ── Pattern 3c: Checked radio buttons — Highlight brand fill ── */ & [data-slot="radio-group-item"][data-state="checked"] { background-color: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-foreground) !important; } & [data-slot="radio-group-item"][data-state="checked"] [data-slot="radio-group-indicator"] span { background-color: var(--accent-foreground) !important; } /* ── Pattern 3d: Toggle on state — Highlight brand fill ── */ & [data-slot="toggle"][data-state="on"] { background-color: var(--accent) !important; color: var(--accent-foreground) !important; border: 2px solid var(--accent) !important; } /* ── Pattern 3e: Switch (toggle-switch) — visible track + knob ── */ & [role="switch"] { border: 2px solid var(--foreground) !important; background-color: var(--background) !important; } & [role="switch"][aria-checked="true"] { background-color: var(--accent) !important; border-color: var(--accent) !important; } & [role="switch"] > span { background-color: var(--foreground) !important; } & [role="switch"][aria-checked="true"] > span { background-color: var(--accent-foreground) !important; } /* ── Pattern 3f: Select / dropdown item focus — Highlight brand fill ── */ & [data-slot="select-item"]:focus, & [data-slot="dropdown-menu-item"]:focus, & [data-slot="dropdown-menu-checkbox-item"]:focus, & [data-slot="dropdown-menu-radio-item"]:focus, & [data-slot="dropdown-menu-sub-trigger"]:focus { background-color: var(--accent) !important; color: var(--accent-foreground) !important; } & [data-slot="select-item"]:focus *, & [data-slot="dropdown-menu-item"]:focus *, & [data-slot="dropdown-menu-checkbox-item"]:focus *, & [data-slot="dropdown-menu-radio-item"]:focus *, & [data-slot="dropdown-menu-sub-trigger"]:focus * { color: var(--accent-foreground) !important; } /* ── Pattern 3g: Dropdown check / radio indicator — inherit from parent ── */ & [data-slot="dropdown-menu-checkbox-item"][data-state="checked"], & [data-slot="dropdown-menu-radio-item"][data-state="checked"] { font-weight: 700 !important; } /* ── Pattern 4: Board cards — border-defined, no decorative fills ── */ & [data-slot="board-card"] { border: 2px solid var(--foreground) !important; background-image: none !important; } /* ── Pattern 6: List hub status badges — border not fill ── */ & [data-slot="list-hub-status-badge"] { border: 2px solid var(--foreground) !important; background-color: var(--background) !important; font-weight: 700 !important; color: var(--foreground) !important; } /* ── Pattern 7: Insight cards — border-based, strip gradient bg ── */ & [aria-label="Insight"], & [data-slot="insight-card"] { border: 2px solid var(--foreground) !important; background-image: none !important; background: var(--background) !important; } /* ── Pattern 8: Coach marks — strong border + readable text ── */ & [data-slot="coach-mark"] { border: 2px solid var(--foreground) !important; background: var(--background) !important; background-color: var(--background) !important; color: var(--foreground) !important; background-image: none !important; opacity: 1 !important; } & [data-slot="coach-mark"] *:not(button):not(button *) { color: var(--foreground) !important; } /* ── Pattern 9: Avatars — thicken ring, strip blend modes, force contrast ── */ & [data-slot="avatar"] { border: 2px solid var(--foreground) !important; } & [data-slot="avatar"]::after { display: none !important; } & [data-slot="avatar-fallback"] { background-color: var(--background) !important; color: var(--foreground) !important; } & tr[data-state="selected"] [data-slot="avatar"] { border-color: var(--accent-foreground) !important; } & tr[data-state="selected"] [data-slot="avatar-fallback"] { background-color: var(--accent-foreground) !important; color: var(--accent) !important; } /* ── Pattern 10: Breadcrumbs — ensure separators are visible ── */ & [data-slot="breadcrumb-separator"] { color: var(--foreground) !important; } & [data-slot="breadcrumb-link"] { color: var(--foreground) !important; text-decoration: underline !important; } & [data-slot="breadcrumb-page"] { color: var(--foreground) !important; font-weight: 700 !important; } /* ── Pattern 11: Tooltip / popover arrow — match border ── */ & [data-slot="tooltip-content"] { border: 2px solid var(--foreground) !important; background-color: var(--background) !important; color: var(--foreground) !important; } /* ── Pattern 12: Separator — visible in HC ── */ & [data-slot="separator"] { background-color: var(--foreground) !important; opacity: 1 !important; } /* ── Pattern 13: Strip ALL hardcoded Tailwind palette colors ──────────── */ & [data-slot="banner"], & [data-slot="local-banner"] { background-color: var(--background) !important; background-image: none !important; border: 2px solid var(--foreground) !important; color: var(--foreground) !important; } & [data-slot="banner"] *, & [data-slot="local-banner"] * { color: var(--foreground) !important; } & .recharts-bar-rectangle, & .recharts-funnel-trapezoid { stroke: var(--background) !important; stroke-width: 2 !important; } & [role="progressbar"] { border: 1px solid var(--foreground) !important; background-color: var(--background) !important; } & [role="progressbar"] > * { background-color: var(--foreground) !important; } & [class*="text-emerald"], & [class*="text-amber"], & [class*="text-red-"], & [class*="text-blue-"], & [class*="text-green-"], & [class*="text-yellow-"], & [class*="text-slate-"], & [class*="text-orange-"], & [class*="text-pink-"], & [class*="text-purple-"] { color: var(--foreground) !important; } & [class*="text-brand"] { color: var(--accent) !important; } & [class*="bg-brand"]:not([data-slot="coach-mark"]) { background-color: var(--background) !important; } & [class*="border-brand"] { border-color: var(--foreground) !important; } & [class*="bg-emerald"], & [class*="bg-amber"], & [class*="bg-red-"], & [class*="bg-blue-"], & [class*="bg-green-"], & [class*="bg-yellow-"], & [class*="bg-slate-"], & [class*="bg-orange-"], & [class*="bg-pink-"], & [class*="bg-purple-"] { background-color: var(--background) !important; } & [class*="border-emerald"], & [class*="border-amber"], & [class*="border-red-"], & [class*="border-blue-"], & [class*="border-green-"], & [class*="border-yellow-"], & [class*="border-slate-"], & [class*="border-orange-"], & [class*="border-pink-"], & [class*="border-purple-"] { border-color: var(--foreground) !important; } } /* Coach mark HC override (top-level, outside nesting — bulletproof for portaled content) */ html:is([data-contrast="high"], [data-contrast="windows"]) [data-slot="coach-mark"] { border: 2px solid var(--foreground) !important; background: var(--background) !important; background-color: var(--background) !important; color: var(--foreground) !important; background-image: none !important; opacity: 1 !important; } html:is([data-contrast="high"], [data-contrast="windows"]) [data-slot="coach-mark"] *:not(button):not(button *) { color: var(--foreground) !important; } /* ── OS-level "Increase Contrast" — macOS / iOS / Android ───────────────── */ @media (prefers-contrast: more) { :root:not([data-contrast="off"]):not([data-contrast="windows"]) { --foreground: oklch(0.06 0 0); --muted-foreground: oklch(0.10 0 0); --border: oklch(0.10 0 0); --border-control: oklch(0.06 0 0); --border-control-35: oklch(0.06 0 0); --border-control-3: oklch(0.06 0 0); --ring: oklch(0.06 0 0); } .dark:not([data-contrast="off"]):not([data-contrast="windows"]) { --foreground: oklch(1 0 0); --muted-foreground: oklch(0.88 0 0); --border: oklch(1 0 0); --border-control: oklch(0.88 0 0); --border-control-35: oklch(0.88 0 0); --border-control-3: oklch(0.88 0 0); --ring: oklch(0.97 0.19 110); /* neon yellow on dark */ } } /* ── Windows Forced Colors (High Contrast Mode in OS) ───────────────────── */ /* When `forced-colors: active`, Windows REPLACES our colours entirely. */ /* Our job: map semantic roles to system palette keywords so the OS */ /* colouring makes sense, and ensure borders/outlines remain visible. */ @media (forced-colors: active) { :root { --border: CanvasText; --border-control: CanvasText; --border-control-35: CanvasText; --border-control-3: CanvasText; --ring: Highlight; --destructive: LinkText; } /* Always show a 2px outline so focus is forced-color-safe */ :focus-visible { outline: 2px solid Highlight !important; outline-offset: 2px !important; } body { background-color: Canvas; color: CanvasText; } a { color: LinkText; } button { border: 1px solid ButtonText !important; } /* Cards: OS strips bg fills — add explicit border so shape is preserved */ [data-slot="card"], .card { border: 2px solid CanvasText !important; } /* Sidebar edge */ [data-slot="sidebar"] { border-inline-end: 2px solid CanvasText !important; } /* Wrapper-only sidebar badge (no inner Badge) — rare; keep single ring */ [data-slot="sidebar-menu-badge"]:not(:has([data-slot="badge"])) { border: 2px solid CanvasText !important; background-color: Canvas !important; color: CanvasText !important; outline: none !important; box-shadow: none !important; } /* Positioning shell around — do not draw a second ring */ [data-slot="sidebar-menu-badge"]:has([data-slot="badge"]) { border: none !important; background: transparent !important; outline: none !important; box-shadow: none !important; } [data-slot="badge"], [data-slot="view-toolbar-count"] { border: 2px solid CanvasText !important; background-color: Canvas !important; color: CanvasText !important; outline: none !important; box-shadow: none !important; } [data-slot="badge"] *, [data-slot="view-toolbar-count"] * { color: CanvasText !important; } /* Avoid button chrome + inner count pill = double border */ button[data-slot="view-segmented-item"] { border: none !important; } /* Radix Tabs (ChartCard, library, etc.) — gray inactive + invisible active in OS HC */ [data-slot="tabs-list"] { border: 2px solid CanvasText !important; background-color: transparent !important; } [data-slot="tabs-trigger"] { color: CanvasText !important; background-color: transparent !important; opacity: 1 !important; } [data-slot="tabs-trigger"][data-state="active"] { background-color: Highlight !important; color: HighlightText !important; outline: none !important; font-weight: 600 !important; } /* Key metrics strip — labels/values/trend icons must not stay muted */ [data-slot="key-metrics"] :where(span, p, button, a, i, label, div) { color: CanvasText !important; } /* Menu / select / command palette — accent fill is often low-contrast in forced mode */ [data-slot="dropdown-menu-item"][data-highlighted]:not([data-disabled]), [data-slot="dropdown-menu-checkbox-item"][data-highlighted]:not([data-disabled]), [data-slot="dropdown-menu-radio-item"][data-highlighted]:not([data-disabled]), [data-slot="dropdown-menu-sub-trigger"][data-highlighted]:not([data-disabled]), [data-slot="select-item"][data-highlighted]:not([data-disabled]), [data-slot="command-item"][data-selected]:not([data-disabled]), [data-slot="command-item"][aria-selected="true"]:not([data-disabled]) { background-color: Highlight !important; color: HighlightText !important; } [data-slot="dropdown-menu-item"][data-highlighted] *, [data-slot="dropdown-menu-checkbox-item"][data-highlighted] *, [data-slot="dropdown-menu-radio-item"][data-highlighted] *, [data-slot="dropdown-menu-sub-trigger"][data-highlighted] *, [data-slot="select-item"][data-highlighted] *, [data-slot="command-item"][data-selected] *, [data-slot="command-item"][aria-selected="true"] * { color: HighlightText !important; } /* Views toolbar (list hubs) + segmented radiogroup — selection via outline, not fill */ [data-slot="view-segmented-toolbar"] { border: 2px solid CanvasText !important; background: transparent !important; } [data-slot="view-segmented-item"] { color: CanvasText !important; background: transparent !important; } [data-slot="view-segmented-item"][aria-pressed="true"], [data-slot="view-segmented-item"][aria-checked="true"] { background-color: Highlight !important; color: HighlightText !important; outline: none !important; } /* Composed view-tab active shell — see the html[data-contrast="high"] block above for rationale. Fill the shell + cascade `HighlightText` so the chevron disclosure stays attached to the active fill in forced-colors. */ [data-slot="view-segmented-item-shell"] { background-color: Highlight !important; color: HighlightText !important; outline: none !important; } [data-slot="view-segmented-item-shell"] * { color: HighlightText !important; } /* Sidebar active item — Highlight brand fill */ [data-slot="sidebar-menu-button"][data-active="true"] { background-color: Highlight !important; color: HighlightText !important; outline: none !important; } [data-slot="sidebar-menu-button"][data-active="true"] * { color: HighlightText !important; } [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="badge"], [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="sidebar-menu-badge"] { background-color: HighlightText !important; color: Highlight !important; border-color: HighlightText !important; } [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="badge"] *, [data-slot="sidebar-menu-button"][data-active="true"] [data-slot="sidebar-menu-badge"] * { color: Highlight !important; } /* Strip conditional-formatting inline bg in forced-colors */ td[style*="background"] { background: Canvas !important; } td.pinned-cell { background-color: Canvas !important; } tr:hover td, tr:hover td.pinned-cell { background-color: Highlight !important; color: HighlightText !important; } /* Table selected rows — Highlight brand fill */ tr[data-state="selected"] { background-color: Highlight !important; color: HighlightText !important; } tr[data-state="selected"] td { background: Highlight !important; background-color: Highlight !important; color: HighlightText !important; } tr[data-state="selected"] *:not([data-slot="checkbox"] *):not([data-slot="badge"] *):not([data-slot="checkbox"]):not([data-slot="badge"]) { color: HighlightText !important; } tr[data-state="selected"] [data-slot="checkbox"][data-state="checked"], tr[data-state="selected"] [data-slot="checkbox"][data-state="indeterminate"] { background-color: HighlightText !important; border-color: HighlightText !important; color: Highlight !important; } tr[data-state="selected"] [data-slot="checkbox"][data-state="checked"] *, tr[data-state="selected"] [data-slot="checkbox"][data-state="indeterminate"] * { color: Highlight !important; } tr[data-state="selected"] [data-slot="checkbox"]:not([data-state="checked"]):not([data-state="indeterminate"]) { background-color: Highlight !important; border-color: HighlightText !important; color: HighlightText !important; } tr[data-state="selected"] [data-slot="badge"] { background-color: HighlightText !important; color: Highlight !important; border-color: HighlightText !important; } tr[data-state="selected"] [data-slot="badge"] * { color: Highlight !important; } tr[data-state="selected"] [data-slot="avatar"] { border-color: HighlightText !important; } tr[data-state="selected"] [data-slot="avatar-fallback"] { background-color: HighlightText !important; color: Highlight !important; } /* Badge in forced-colors — opaque canvas bg */ [data-slot="badge"] { background-color: Canvas !important; border-color: CanvasText !important; color: CanvasText !important; } /* Checked checkboxes — Highlight fill */ [data-slot="checkbox"][data-state="checked"] *, [data-slot="checkbox"][data-state="indeterminate"] * { color: HighlightText !important; } /* Avatar in forced-colors */ [data-slot="avatar"] { border: 2px solid CanvasText !important; } [data-slot="avatar"]::after { display: none !important; } [data-slot="avatar-fallback"] { background-color: Canvas !important; color: CanvasText !important; } /* Checked checkboxes / radios — Highlight fill */ [data-slot="checkbox"][data-state="checked"], [data-slot="checkbox"][data-state="indeterminate"] { background-color: Highlight !important; border-color: Highlight !important; color: HighlightText !important; } [data-slot="radio-group-item"][data-state="checked"] { background-color: Highlight !important; border-color: Highlight !important; } /* Switch ON — Highlight fill */ [role="switch"][aria-checked="true"] { background-color: Highlight !important; border-color: Highlight !important; } [role="switch"][aria-checked="true"] > span { background-color: HighlightText !important; } /* Toggle ON — Highlight fill */ [data-slot="toggle"][data-state="on"], [data-slot="toggle-group-item"][data-state="on"] { background-color: Highlight !important; color: HighlightText !important; border-color: Highlight !important; } /* Progress bars — bordered track with CanvasText fill */ [role="progressbar"] { border: 1px solid CanvasText !important; background-color: Canvas !important; } [role="progressbar"] > * { background-color: CanvasText !important; } /* Portal overlays — explicit Canvas pairing (OS often strips popover fills) */ [data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-sub-content"], [data-slot="popover-content"], [data-slot="select-content"], [data-slot="dialog-content"], [data-slot="sheet-content"], [data-slot="drawer-content"] { border: 2px solid CanvasText !important; background-color: Canvas !important; color: CanvasText !important; } [data-slot="command"] { background-color: Canvas !important; color: CanvasText !important; } /* Board cards — border-defined shape when fills are stripped */ [data-slot="board-card"] { border: 2px solid CanvasText !important; background-color: Canvas !important; color: CanvasText !important; } /* List hub status badges — border-only, text readable */ [data-slot="list-hub-status-badge"] { border: 2px solid CanvasText !important; background-color: Canvas !important; color: CanvasText !important; font-weight: 700 !important; } /* Insight cards — strip gradient, add border */ [aria-label="Insight"], [data-slot="insight-card"] { border: 2px solid CanvasText !important; background: Canvas !important; color: CanvasText !important; } /* Coach marks / guided tours */ [data-slot="coach-mark"] { border: 2px solid CanvasText !important; background-color: Canvas !important; color: CanvasText !important; } [data-slot="coach-mark"] * { color: CanvasText !important; } /* Avatars — thicken existing ::after ring */ [data-slot="avatar"]::after { border-width: 2px !important; border-color: CanvasText !important; } /* Breadcrumbs */ [data-slot="breadcrumb-separator"] { color: CanvasText !important; } [data-slot="breadcrumb-link"] { color: LinkText !important; } [data-slot="breadcrumb-page"] { color: CanvasText !important; font-weight: 700 !important; } /* Tooltip */ [data-slot="tooltip-content"] { border: 2px solid CanvasText !important; background-color: Canvas !important; color: CanvasText !important; } /* Export drawer */ [data-slot="export-drawer"] { border: 2px solid CanvasText !important; background-color: Canvas !important; color: CanvasText !important; } /* Separators */ [data-slot="separator"] { background-color: CanvasText !important; opacity: 1 !important; } /* Charts — forced-colors strips SVG fills; add stroke as fallback */ svg path, svg rect, svg circle { forced-color-adjust: none; } /* Recharts radial bars, lines, and area — explicit stroke fallbacks */ .recharts-radial-bar-sector, .recharts-line-curve, .recharts-area-curve { forced-color-adjust: none; stroke: CanvasText !important; } .recharts-radial-bar-background-sector { forced-color-adjust: none; fill: Canvas !important; stroke: GrayText !important; } .recharts-cartesian-axis-tick-value { fill: CanvasText !important; } .recharts-cartesian-grid line { stroke: GrayText !important; } .recharts-legend-item-text { color: CanvasText !important; } .recharts-tooltip-wrapper { border: 2px solid CanvasText !important; background-color: Canvas !important; } } /* ========================================================================== Base layer — global element defaults with AA focus management ========================================================================== */ @layer base { /* Reset + border-color default */ *, *::before, *::after { @apply border-border; box-sizing: border-box; } /* Body — outer canvas matches sidebar; main column uses bg-background (white in light) */ body { @apply bg-sidebar text-foreground antialiased; font-family: var(--font-sans); /* 14px baseline on body. 1rem stays = 16px so all shadcn rem-based layout (spacing, heights, radii) is unaffected at any zoom level. */ font-size: 0.875rem; line-height: 1.5; /* Font smoothing (Tailwind `antialiased` = -webkit-font-smoothing + -moz-osx): Industry practice per Josh Comeau’s CSS reset and 2024 cross-browser testing (e.g. David Bushell): the -webkit property affects macOS WebKit browsers only — it tones down browser-only subpixel AA (Mojave+ system UI already moved away). Windows/Linux/iOS/Android: no practical effect; OS font rasterizer (ClearType, etc.) owns rendering. Safe to apply on body for Mac parity without changing Windows output. */ } html { @apply font-sans; color-scheme: light; /* Match sidebar canvas (body) on overscroll */ background-color: var(--sidebar); } html.dark { color-scheme: dark; } /* ── Focus management (WCAG 2.4.11 / 2.4.7) ──────────────────── */ /* Visible on keyboard navigation only; hidden for mouse users */ :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm, 4px); } /* Suppress outline for mouse/touch (Safari workaround) */ :focus:not(:focus-visible) { outline: none; } /* ── Reduced motion (WCAG 2.3.3) ────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── Touch targets (WCAG 2.5.5) ─────────────────────────────── */ /* Applied via utility: min-h-[var(--control-height-touch)] */ /* Coarse pointer only: browser zoom (200–400%) shrinks the *layout* viewport in CSS px, so max-width: 767px becomes true on desktop — without pointer: coarse, 44px min-height hits every button and [role=checkbox], stretching 16px-wide checkboxes into tall pills and blowing up table/toolbar controls. Real phones and tablets report pointer: coarse. */ @media (max-width: 767px) and (pointer: coarse) { button, [role="button"], [role="radio"], [role="switch"], [role="menuitem"], [role="tab"], a { min-height: var(--control-height-touch, 44px); } } /* Checkboxes use compact box + pseudo-element hit slop (see ui/checkbox). */ /* ── Heading hierarchy ───────────────────────────────────────── */ /* Ivy Presto (font-heading) applied ONLY via explicit class/inline style on PageHeader

    . All other headings use Inter (font-sans). */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: 600; line-height: 1.25; color: var(--foreground); } /* ── Skip to main content (WCAG 2.4.1) ─────────────────────── */ .skip-to-content { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 9999; } .skip-to-content:focus { position: fixed; top: 0; left: 0; width: auto; height: auto; padding: 0.75rem 1.25rem; background: var(--background); color: var(--foreground); border: 2px solid var(--ring); border-radius: var(--radius-md); font-weight: 600; font-size: 1rem; z-index: 9999; } } /* ========================================================================== Utility layer — design-system helpers ========================================================================== */ @layer utilities { /* Visually hidden but accessible to screen readers (WCAG 1.3.1) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* AA-safe muted text — use instead of text-muted-foreground on light bg */ .text-aa-muted { color: oklch(0.50 0.012 270); /* 5.5:1 on white ✓ */ } /* Touch-target wrapper for icon buttons (mobile only) */ .touch-target { min-height: var(--control-height-touch, 44px); min-width: var(--control-height-touch, 44px); display: inline-flex; align-items: center; justify-content: center; } /* Floating sheets (Properties, export, invite) use z-80 — portaled menus/tooltips must sit above. */ .z-properties-sheet-portal { z-index: 90; } .z-properties-sheet-tooltip { z-index: 100 !important; } /* Floating sheet open — elevate every portaled tooltip above sheet chrome (`z-[80]`). */ body:has([data-slot="sheet-content"][data-state="open"]) [data-slot="tooltip-content"], body:has([data-slot="sheet-content"][data-open]) [data-slot="tooltip-content"], body:has([data-slot="sheet-content"][data-state="open"]) [role="tooltip"], body:has([data-slot="sheet-content"][data-open]) [role="tooltip"] { z-index: 100 !important; } /* Secondary panel flyout (`z-[60]`) — portaled tooltips must sit above. */ body:has([data-slot="secondary-panel"][data-overlay][data-state="open"]) [data-slot="tooltip-content"], body:has([data-slot="secondary-panel"][data-overlay][data-state="open"]) [role="tooltip"] { z-index: 100 !important; } /* Primary sidebar flyout (`z-50`, high zoom / mobile) — above panel chrome + drill-in. */ body:has([data-slot="sidebar"][data-nav-flyout="true"][data-state="expanded"]) [data-slot="tooltip-content"], body:has([data-slot="sidebar"][data-nav-flyout="true"][data-state="expanded"]) [role="tooltip"] { z-index: 100 !important; } @media (min-width: 768px) { .touch-target { min-height: unset; min-width: unset; } } /* Form field border — use --control-border (3:1 minimum) */ .field-border { border-color: var(--control-border); } /* Exxat Prism highlight banner */ .banner-prism { background-color: var(--banner-prism-bg); } /* Primary + secondary sidebar row labels — wrap; never ellipsis. */ [data-slot="sidebar-menu-button"] [data-sidebar-nav-label], [data-slot="sidebar-menu-sub-button"] [data-sidebar-nav-label], [data-sidebar-nav-label] { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } /* Font Awesome glyphs — block + leading-none so icons center with row labels. */ [data-slot="sidebar-menu-button"] > span[aria-hidden="true"] i, [data-slot="sidebar-menu-button"] > i[aria-hidden="true"], [data-slot="sidebar-menu-sub-button"] > span[aria-hidden="true"] i, [data-sidebar="menu-button"] > span[aria-hidden="true"] i, [data-sidebar="menu-button"] > i[aria-hidden="true"] { display: block; line-height: 1; } /* Collapsible parents: TooltipTrigger overwrites data-slot; match primary row metrics. */ [data-sidebar="menu-button"]:not([data-size="lg"]) { overflow: visible; min-height: 1.75rem; align-items: center; padding-block: var(--exxat-spacing-1); padding-inline: var(--exxat-spacing-2); } /* Child sub-menu — indent only; no vertical guide (overlaps row icons). */ [data-slot="sidebar-menu-sub"] { margin-inline: 0; margin-inline-start: var(--exxat-spacing-3); padding-inline-end: 0; padding-inline-start: 0; width: calc(100% - var(--exxat-spacing-3)); box-sizing: border-box; border-inline-start: none; } /* Primary sidebar collapsible — guide disabled (was overlapping icon columns). */ [data-sidebar="menu-item"].group\/collapsible { position: relative; } [data-sidebar="menu-item"].group\/collapsible::before { content: none !important; display: none !important; } /* Library / outline folder tree — guide spans parent row icon center → next sibling row. */ [data-slot="outline-tree-menu-item"]:has( > .group\/collapsible[data-state="open"] [data-slot="outline-tree-sub"] ), li:has(> .group\/collapsible[data-state="open"] [data-slot="outline-tree-sub"]) { position: relative; } [data-slot="outline-tree-menu-item"]:has( > .group\/collapsible[data-state="open"] [data-slot="outline-tree-sub"] )::before, li:has(> .group\/collapsible[data-state="open"] [data-slot="outline-tree-sub"])::before { content: ""; position: absolute; left: calc( var(--outline-tree-row-padding-x) + var(--outline-tree-depth, 0) * var(--outline-tree-depth-step) + var(--outline-tree-chevron-half) ); top: var(--outline-tree-guide-overhang); bottom: calc(-1 * var(--outline-tree-guide-overhang)); border-left: 1px solid var(--sidebar-border); pointer-events: none; z-index: 0; } /* Secondary panel folder tree — depth indent only; no vertical guide rails. */ [data-slot="secondary-panel"] [data-slot="outline-tree-menu-item"]:has( > .group\/collapsible[data-state="open"] [data-slot="outline-tree-sub"] )::before, [data-slot="secondary-panel"] li:has(> .group\/collapsible[data-state="open"] [data-slot="outline-tree-sub"])::before { content: none; display: none; } /* Folder picker popover — same tree chrome as secondary panel, no guide rails. */ [data-slot="folder-picker-panel"] [data-slot="outline-tree-menu-item"]:has( > .group\/collapsible[data-state="open"] [data-slot="outline-tree-sub"] )::before, [data-slot="folder-picker-panel"] li:has(> .group\/collapsible[data-state="open"] [data-slot="outline-tree-sub"])::before { content: none; display: none; } /* Flat width — depth indent is on each row, not repeated sub-list margins. */ [data-slot="outline-tree-sub"][data-guide-layout="chevronRail"] { margin-inline: 0; padding-inline: 0; width: 100%; min-width: 0; box-sizing: border-box; border-inline-start: none; } [data-slot="sidebar-menu-sub-item"] { display: flex; align-items: center; width: 100%; } [data-slot="sidebar-menu-sub-item"].group\/collapsible-sub { flex-direction: column; align-items: stretch; } [data-slot="sidebar-menu-sub-button"] { flex: 1 1 0%; min-width: 0; translate: none; align-items: center; padding-block: var(--exxat-spacing-1); padding-inline: var(--exxat-spacing-2); } [data-sidebar="nav-sub-badge"] { flex-shrink: 0; align-self: center; margin-inline-end: var(--exxat-spacing-2); pointer-events: none; } /* Sidebar nav — little pop when an item becomes active. Key swap on the wrapper remounts the span, so the animation replays on selection. */ @keyframes sidebar-icon-pop { 0% { opacity: 0.4; transform: scale(0.7) rotate(-6deg); } 60% { opacity: 1; transform: scale(1.15) rotate(2deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } } /* Radix Collapsible / Accordion — slide the children open/closed using the `--radix-collapsible-content-height` CSS var that Radix sets on the content element. Mirrors the shadcn accordion pattern (Tailwind v3 "accordion-down" / "accordion-up"); we keep our own name so it can be reused by both Collapsible and Accordion primitives. */ @keyframes collapsible-down { from { height: 0; } to { height: var(--radix-collapsible-content-height); } } @keyframes collapsible-up { from { height: var(--radix-collapsible-content-height); } to { height: 0; } } /* Ask Leo suggestion chips — staggered fade-in + lift on first render. */ @keyframes leo-chip-in { 0% { opacity: 0; transform: translateY(8px) scale(0.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* Leo typing indicator — 3 dots bouncing opacity/scale, staggered via delay. */ @keyframes leo-typing-dot { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } } /* Whole-panel brand radial glow pulse — runs on the BG layer while Leo thinks. */ @keyframes leo-panel-pulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.75; transform: scale(1.01); } } /* Chart “Leo insight” marker — soft breathing halo behind the chip. */ @keyframes leo-chart-insight-halo { 0%, 100% { opacity: 0.45; transform: scale(1); } 50% { opacity: 0.72; transform: scale(1.12); } } /* Accent dot on the insight marker — gentle pulse (respect motion-reduce in markup). */ @keyframes leo-chart-insight-dot { 0%, 100% { opacity: 0.9; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } } } @import "./styles/leo-blob-animations.css"; @layer components { /* * Icon-only Button glyphs (ghost / outline / secondary, size icon*). * WCAG 1.4.11 — ≥3:1 vs surface; hover uses --interactive-hover-foreground. */ [data-slot="button"][data-size^="icon"]:where([data-variant="ghost"], [data-variant="outline"]):not( :disabled ):not([disabled]):not([aria-disabled="true"]) { color: var(--icon-button-foreground); } [data-slot="button"][data-size^="icon"]:where([data-variant="ghost"], [data-variant="outline"]):is( :hover, :focus-visible, [aria-expanded="true"] ):not(:disabled):not([disabled]):not([aria-disabled="true"]) { color: var(--interactive-hover-foreground); } [data-sidebar="sidebar"] [data-slot="button"][data-size^="icon"]:where([data-variant="ghost"], [data-variant="outline"]):not( :disabled ):not([disabled]):not([aria-disabled="true"]):not(:hover):not(:focus-visible):not([aria-expanded="true"]) { color: var(--icon-button-foreground-on-sidebar); } [data-sidebar="sidebar"] [data-slot="button"][data-size^="icon"]:where([data-variant="ghost"], [data-variant="outline"]):is( :hover, :focus-visible, [aria-expanded="true"] ):not(:disabled):not([disabled]):not([aria-disabled="true"]) { color: var(--sidebar-accent-foreground); } /* Bespoke icon-only controls (no data-slot) — opt in via utility class */ .icon-button-chrome { color: var(--icon-button-foreground); } .icon-button-chrome:hover, .icon-button-chrome:focus-visible { color: var(--interactive-hover-foreground); } /* Secondary text+icon actions (Add filter, Add view, dashed pills) */ .secondary-action-chrome { color: var(--secondary-action-foreground); } .secondary-action-chrome:hover, .secondary-action-chrome:focus-visible { color: var(--interactive-hover-foreground); } /* Inputs / composers — placeholder copy (SC 1.4.3 ≥4.5:1) */ .placeholder-aa::placeholder { color: var(--placeholder-foreground); } [data-sidebar="sidebar"] .icon-button-chrome:not(:hover):not(:focus-visible) { color: var(--icon-button-foreground-on-sidebar); } [data-sidebar="sidebar"] .icon-button-chrome:hover, [data-sidebar="sidebar"] .icon-button-chrome:focus-visible { color: var(--sidebar-accent-foreground); } :is([data-slot="secondary-panel"], [data-slot="ask-leo-panel"]) [data-slot="button"][data-size^="icon"]:where([data-variant="ghost"], [data-variant="outline"]):not( :disabled ):not([disabled]):not([aria-disabled="true"]):not(:hover):not(:focus-visible):not([aria-expanded="true"]) { color: var(--icon-button-foreground-on-secondary-panel); } :is([data-slot="secondary-panel"], [data-slot="ask-leo-panel"]) [data-slot="button"][data-size^="icon"]:where([data-variant="ghost"], [data-variant="outline"]):is( :hover, :focus-visible, [aria-expanded="true"] ):not(:disabled):not([disabled]):not([aria-disabled="true"]) { color: var(--interactive-hover-foreground); } :is([data-slot="secondary-panel"], [data-slot="ask-leo-panel"]) .icon-button-chrome:not(:hover):not(:focus-visible) { color: var(--icon-button-foreground-on-secondary-panel); } :is([data-slot="secondary-panel"], [data-slot="ask-leo-panel"]) .icon-button-chrome:hover, :is([data-slot="secondary-panel"], [data-slot="ask-leo-panel"]) .icon-button-chrome:focus-visible { color: var(--interactive-hover-foreground); } :is([data-slot="secondary-panel"], [data-slot="ask-leo-panel"]) .secondary-action-chrome:not(:hover):not(:focus-visible) { color: var(--icon-button-foreground-on-secondary-panel); } } /* After all @layer rules: win over Tailwind preflight / layer merge so real controls show a pointer. */ button:not(:disabled):not([disabled]), [role="button"]:not([aria-disabled="true"]):not([data-disabled]) { cursor: pointer; }