/* * HELIX v2 — Semantic Token Layer * helix-semantic-tokens.css * * Bridges raw palette tokens (helix-metachrosis-tokens.css) to * component-level intent. Components reference only --hx-* tokens. * * Theme switching: add/remove .hx-light on any ancestor element. * Toast and modal scrim are always dark (brand rule) — they * re-declare their own token values internally. */ /* ============================================================ DARK MODE — default (no class needed) ============================================================ */ :root { /* ── Canvas & surfaces ────────────────────────────────── */ --hx-canvas: var(--surface-dark-bg); /* page / app background */ --hx-surface-1: var(--glass-bg); /* card, panel, sidebar, inputs — glass layer over canvas */ --hx-surface-2: var(--glass-elevated-bg); /* elevated card, suggestion, progress track */ --hx-surface-3: rgba(255, 255, 255, 0.12); /* competitor other-brand fill */ --hx-surface-neutral: var(--grey-6); /* neutral dot, decorative */ /* ── Text ─────────────────────────────────────────────── */ --hx-text-high: var(--text-dark-high); /* primary text */ --hx-text-med: var(--text-dark-medium); /* secondary / supporting text */ --hx-text-low: var(--text-dark-disabled); /* placeholder, disabled, eyebrow */ /* ── Interactive state backgrounds ───────────────────── */ --hx-state-default: var(--dark-state-default); --hx-state-hover: var(--dark-state-hover); --hx-state-border: var(--dark-state-focused); /* resting border / divider colour */ --hx-state-selected: var(--dark-state-selected); --hx-state-activated: var(--dark-state-activated); --hx-state-pressed: var(--dark-state-pressed); /* Brand-keyed active states — opacity-based, mode-agnostic */ --hx-state-brand-default: var(--primary-state-default); --hx-state-brand-selected: var(--primary-state-selected); /* ── Shadows ──────────────────────────────────────────── */ /* Dark canvas: reverse-elevation (shadows cast upward) */ --hx-shadow-sm: var(--elevation-rev-01); --hx-shadow-md: var(--elevation-rev-02); --hx-shadow-lg: var(--elevation-rev-03); /* Floating elements always use forward-direction shadows */ /* (tooltip, select menu, modal, toast) — not routed through --hx-shadow-* */ /* ── Input hover (surface lightening) ────────────────── */ --hx-surface-1-hover: rgba(255, 255, 255, 0.10); /* ── Brand tints (semi-transparent fills / borders) ───── */ /* Primary (Capgemini Blue) */ --hx-tint-primary-subtle: rgba(0,88,171,0.06); --hx-tint-primary-soft: rgba(0,88,171,0.15); --hx-tint-primary-border: rgba(0,88,171,0.30); /* Accent (Light Blue) */ --hx-tint-accent-soft: rgba(41,190,244,0.12); --hx-tint-accent-border: rgba(41,190,244,0.25); --hx-tint-accent-focus: rgba(41,190,244,0.25); /* focus-ring glow */ --hx-tint-accent-bar: rgba(41,190,244,0.15); /* command-bar focus glow */ /* Semantic tints (alerts, badges, deltas) */ --hx-tint-success: rgba(18,183,106,0.12); --hx-tint-success-border: rgba(18,183,106,0.25); --hx-tint-error: rgba(240,68,56,0.12); --hx-tint-error-focus: rgba(240,68,56,0.25); --hx-tint-warning: rgba(234,170,8,0.12); /* ── Badge semantic backgrounds & text ───────────────── */ /* On dark canvas 50-step palette steps are far too light — */ /* use opacity-based tints instead. */ --hx-badge-success-bg: rgba(18,183,106,0.15); --hx-badge-success-text: var(--green-400); --hx-badge-warning-bg: rgba(234,170,8,0.15); --hx-badge-warning-text: var(--yellow-400); --hx-badge-error-bg: rgba(240,68,56,0.15); --hx-badge-error-text: var(--red-400); --hx-badge-info-bg: rgba(29,184,242,0.15); --hx-badge-info-text: var(--cap-lightblue-400); /* ── Skeleton shimmer — glass-aligned, never opaque grey ── */ --hx-skeleton-base: rgba(255, 255, 255, 0.06); /* matches --glass-bg */ --hx-skeleton-peak: rgba(255, 255, 255, 0.14); /* brighter flash for sweep */ /* ── Command bar canvas fade ──────────────────────────── */ --hx-cmd-fade: linear-gradient(to top, var(--hx-canvas) 60%, transparent); /* ── Matte glass surfaces ─────────────────────────────── */ /* Semi-transparent frosted layer over the dark navy canvas */ --glass-bg: rgba(255, 255, 255, 0.06); --glass-elevated-bg: rgba(255, 255, 255, 0.09); /* nested surfaces (suggestion cards) */ --glass-border: rgba(255, 255, 255, 0.10); --glass-blur: blur(16px); --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.08); --glass-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.10); } /* ============================================================ LIGHT MODE — apply .hx-light to any ancestor element ============================================================ */ .hx-light { /* ── Canvas & surfaces ────────────────────────────────── */ --hx-canvas: var(--grey-2); /* off-white page bg */ --hx-surface-1: var(--grey-white); /* card, panel, inputs */ --hx-surface-2: var(--grey-3); /* elevated card, progress track */ --hx-surface-3: var(--grey-5); /* competitor other-brand fill */ --hx-surface-neutral: var(--grey-5); /* ── Text ─────────────────────────────────────────────── */ --hx-text-high: var(--text-surface-high); --hx-text-med: var(--text-surface-medium); --hx-text-low: var(--text-surface-disabled); /* ── Interactive state backgrounds ───────────────────── */ --hx-state-default: var(--surface-state-default); --hx-state-hover: var(--surface-state-hover); --hx-state-border: var(--surface-outline); --hx-state-selected: var(--surface-state-selected); --hx-state-activated: var(--surface-state-activated); --hx-state-pressed: var(--surface-state-pressed); /* brand-keyed states are opacity-based — same in both modes */ /* ── Shadows ──────────────────────────────────────────── */ /* Light canvas: forward-direction (standard downward) shadows */ --hx-shadow-sm: var(--elevation-01); --hx-shadow-md: var(--elevation-02); --hx-shadow-lg: var(--elevation-03); /* ── Input hover ──────────────────────────────────────── */ --hx-surface-1-hover: color-mix(in srgb, var(--grey-white) 97%, black 3%); /* ── Brand tints — slightly reduced opacity on white bg ── */ --hx-tint-primary-subtle: rgba(0,88,171,0.05); --hx-tint-primary-soft: rgba(0,88,171,0.10); --hx-tint-primary-border: rgba(0,88,171,0.25); --hx-tint-accent-soft: rgba(41,190,244,0.10); --hx-tint-accent-border: rgba(41,190,244,0.22); --hx-tint-accent-focus: rgba(41,190,244,0.30); /* higher contrast on white */ --hx-tint-accent-bar: rgba(41,190,244,0.20); --hx-tint-success: rgba(18,183,106,0.10); --hx-tint-success-border: rgba(18,183,106,0.20); --hx-tint-error: rgba(240,68,56,0.10); --hx-tint-error-focus: rgba(240,68,56,0.30); --hx-tint-warning: rgba(234,170,8,0.10); /* ── Badge backgrounds — use palette steps on white bg ── */ --hx-badge-success-bg: var(--green-50); --hx-badge-success-text: var(--green-700); --hx-badge-warning-bg: var(--yellow-50); --hx-badge-warning-text: var(--yellow-700); --hx-badge-error-bg: var(--red-50); --hx-badge-error-text: var(--red-700); --hx-badge-info-bg: var(--cap-lightblue-50); --hx-badge-info-text: var(--cap-lightblue-800); /* ── Skeleton shimmer — glass-aligned ──────────────────── */ --hx-skeleton-base: rgba(0, 0, 0, 0.06); --hx-skeleton-peak: rgba(0, 0, 0, 0.13); /* ── Command bar canvas fade ──────────────────────────── */ --hx-cmd-fade: linear-gradient(to top, var(--grey-2) 60%, transparent); /* ── Matte glass surfaces ─────────────────────────────── */ /* Higher opacity needed for legibility over light canvas */ --glass-bg: rgba(255, 255, 255, 0.55); --glass-elevated-bg: rgba(255, 255, 255, 0.70); --glass-border: rgba(255, 255, 255, 0.75); --glass-blur: blur(20px); --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.90); --glass-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95); }