/* ============================================================ Canvas v2 — Canonical --canvas-* variable mapping. Single source of truth: maps every component-local --canvas-* semantic var onto the locked Basalt + Circuit design tokens in tokens.css. Because each value references a theme token via var(), the canvas vars auto-adapt to [data-theme="light"] with no separate light block. Import ONCE at the chrome shell (alongside tokens.css) so the operator/pipeline, decisions and every other canvas surface resolve to brand colors regardless of which component CSS is loaded. Import via "@supraforge/ui/canvas/canvas-vars.css". Resolves AaaS-Love/AaaS.Love#2443 (operator/pipeline token drift: the components previously inlined a parallel palette with Tailwind-era hex fallbacks — #6366f1 indigo etc. — that diverged from this token system). ============================================================ */ :root, [data-theme="dark"], [data-theme="light"] { /* --- Brand leads --- */ --canvas-accent: rgb(var(--circuit-glow)); /* primary brand — circuit cyan (NOT indigo) */ --canvas-danger: rgb(var(--accent-red)); /* co-lead brand red / error states */ /* --- Supportive status (contextual only) --- */ --canvas-ok: rgb(var(--accent-teal)); /* success / all-clear / completed */ --canvas-warn: rgb(var(--pastel-gold)); /* alert-soft / running */ --canvas-info: rgb(var(--pastel-lavender)); /* ready / informational — deliberate (#2443) */ --canvas-decision: rgb(var(--pastel-lavender)); /* decision-branch / model badge */ /* --- Foreground --- */ --canvas-fg: rgb(var(--text)); --canvas-fg-muted: var(--text-muted); --canvas-text-muted: var(--text-muted); /* alias used by operator/pipeline */ /* --- Surfaces & chrome --- */ --canvas-surface: rgb(var(--basalt-surface)); --canvas-surface-hover: rgb(var(--basalt-bright)); --canvas-track: rgb(var(--basalt-bright)); --canvas-border: rgb(var(--basalt-bright)); /* lifted-card edge (NOT an untied #2a2a2a) */ --canvas-scrim: rgba(0, 0, 0, 0.55); } /* ============================================================================ Canvas 2.0 — per-tenant --app-* token contract (resolves build flag #2) ---------------------------------------------------------------------------- DROP-IN for packages/ui/src/canvas/canvas-vars.css (currently has 0 --app-*). This is the SSR/static-export equivalent of the bundle's JS applyTenant() (app/tenants.jsx) — components repaint per tenant via var(--app-*), enabling the dual-use (AaaS vs customer) front-end with NO component changes. Source of truth: canvas2.0-handoff/ (tenants.jsx). Default :root = AaaS. Switch tenant by setting data-tenant on (server-rendered, no window.*). ============================================================================ */ :root, :root[data-tenant="aaas"] { --app-bg: #0e0e10; --app-surface: #1a1a1c; --app-elevated: #2a2a2e; --app-rule: rgba(255, 255, 255, 0.07); --app-rule-soft: rgba(255, 255, 255, 0.04); --app-ink: #e6e3da; --app-ink-soft: rgba(230, 227, 218, 0.62); --app-ink-faint: rgba(230, 227, 218, 0.38); --app-accent: #00f3ff; --app-accent-dim: rgba(0, 243, 255, 0.16); --app-accent-glow: rgba(0, 243, 255, 0.42); --app-accent-ink: #0e0e10; /* black-on-cyan rule */ --app-signal: #f43f6c; --app-signal-dim: rgba(244, 63, 108, 0.18); --app-success: #00d4b8; --app-warn: #f8d974; --app-fail: #f43f6c; --app-running: #00f3ff; --app-radius: 12px; --app-radius-sm: 6px; --app-radius-pill: 9999px; --app-font-display: "Inter", system-ui, sans-serif; --app-font-body: "Inter", system-ui, sans-serif; --app-font-mono: "JetBrains Mono", SFMono-Regular, monospace; --app-display-weight: 900; --app-display-tracking: -0.025em; --app-display-transform: uppercase; --app-density: 1; --app-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6); --app-shadow-glow: 0 0 24px rgba(0, 243, 255, 0.18); --app-glass-bg: rgba(26, 26, 28, 0.6); --app-glass-blur: blur(24px); } :root[data-tenant="squr"] { --app-bg: #f6f7fb; --app-surface: #ffffff; --app-elevated: #ffffff; --app-rule: #dfe3ec; --app-rule-soft: #eaedf3; --app-ink: #0a1628; --app-ink-soft: #5a6478; --app-ink-faint: #8a93a4; --app-accent: #1d4ed8; --app-accent-dim: rgba(29, 78, 216, 0.12); --app-accent-glow: rgba(29, 78, 216, 0.3); --app-accent-ink: #ffffff; --app-signal: #dc2626; --app-signal-dim: rgba(220, 38, 38, 0.1); --app-success: #059669; --app-warn: #d97706; --app-fail: #dc2626; --app-running: #1d4ed8; --app-radius: 6px; --app-radius-sm: 4px; --app-radius-pill: 9999px; --app-font-display: "Inter", system-ui, sans-serif; --app-font-body: "Inter", system-ui, sans-serif; --app-font-mono: "JetBrains Mono", SFMono-Regular, monospace; --app-display-weight: 700; --app-display-tracking: -0.02em; --app-display-transform: none; --app-density: 0.92; --app-shadow: 0 1px 2px rgba(10, 22, 40, 0.06), 0 8px 24px -12px rgba(10, 22, 40, 0.18); --app-shadow-glow: 0 0 0 4px rgba(29, 78, 216, 0.1); --app-glass-bg: rgba(255, 255, 255, 0.86); --app-glass-blur: blur(14px); } /* New tenants (customer mode) add a :root[data-tenant=""] block supplying ALL tokens above. The 7 EDITABLE_TOKENS (bg, surface, ink, accent, signal, radius, density) are the L3 user-tweak surface per tenants.jsx. */