/* ═══════════════════════════════════════════════════════════════════════ theme-aliases.css — LEGACY-TO-CANONICAL TOKEN BRIDGE Grow24 AI Dashboard Design System Created 2026-05-17 (Wave 2 Agent D — cross-cutting hygiene) ═══════════════════════════════════════════════════════════════════════ Purpose Most blueprint CSS files (~89 of them, ~7470 token references) still consume the LEGACY token scheme — `--bg`, `--card-bg`, `--tone-*-fg`, `--text-muted`, etc. The CANONICAL scheme defined in 00-tokens.css uses `--color-bg`, `--color-surface-card`, `--color-success-fg`, `--color-text-muted`, ... This file bridges the two. Without it, themes that override ONLY the canonical tokens (the recommended pattern in 00-tokens.css) leave legacy-token consumers un-recoloured — so a new theme would only re-skin ~10% of the dashboard. Strategy Each legacy token is aliased to `var(--color-*)` via low-specificity `:where(:root)` (specificity 0,0,0). Real themes in `10-themes.css` (specificity 0,0,1 via `body[data-theme="…"]`) still win when they define a legacy token explicitly. The legacy `:root { --bg: #…; }` block in `60-dashboard-base.css` is also unaffected (it loads AFTER this file in the cascade, so its `:root` specificity ties this file but wins by source order). This file is a FALLBACK for themes that haven't redefined the legacy alias. Where to load AFTER `00-tokens.css` (needs canonical token names defined). BEFORE blueprint CSS files (or BEFORE `60-dashboard-base.css` if you want canonical to win; AFTER if you want legacy hardcodes to win — CURRENTLY the import order in `index.css` puts `60-dashboard-base.css` AFTER us, so 60-base wins on default theme, while custom themes that override only canonical tokens still cascade correctly via these aliases). Scope (only tokens actually referenced by blueprint CSS — enumerated via `grep -rhoE` 2026-05-17, 31 distinct names): --bg, --bg-alt, --card-bg, --card-border, --text, --text-muted, --text-dim, --hover-bg, --section-bg, --popover-bg, --footer-text, --input-bg, --input-border, --surface, --surface-raised, --surface-dim, --border, --header-control-bg, --header-control-border, --brand-accent, --tone-success-fg/bg/border, --tone-warn-fg/bg/border, --tone-danger-fg/bg/border, --tone-info-fg/bg/border, --tone-neutral-fg/bg/border. NOT included (intentional) - `--chip-*-solid-bg/fg` — these are defined explicitly in `60-dashboard-base.css :root` and themes that want chip recolouring define them directly. Aliasing here would create circular cascade issues. - `--header-grad-start/-end`, `--header-link*`, `--theme-glow`, `--header-control-text` — header bar is theme-specific by design; each theme owns its header palette. ═══════════════════════════════════════════════════════════════════════ */ @layer themes { :where(:root) { /* ─── Surfaces ─────────────────────────────────────────────────── */ --bg: var(--color-bg); --bg-alt: var(--color-bg-alt); --card-bg: var(--color-surface-card); --card-border: var(--color-border-default); --hover-bg: var(--color-surface-hover); --section-bg: var(--color-surface-section); --popover-bg: var(--color-surface-elevated); --input-bg: var(--color-surface-input); --input-border: var(--color-border-input); --surface: var(--color-surface-card); --surface-raised: var(--color-surface-card-hover); --surface-dim: var(--color-bg-alt); --border: var(--color-border-default); /* ─── Text ─────────────────────────────────────────────────────── */ --text: var(--color-text-body); --text-muted: var(--color-text-muted); --text-dim: var(--color-text-dim); --footer-text: var(--color-text-muted); /* ─── Brand accent (used by blueprints for highlighted labels) ─── */ --brand-accent: var(--color-brand); /* ─── Header controls (kept minimal — themes override directly) ── */ --header-control-bg: var(--color-surface-card); --header-control-border: var(--color-border-default); /* ─── Tone tokens (success / warn / danger / info / neutral) ───── */ --tone-success-fg: var(--color-success-fg); --tone-success-bg: var(--color-success-bg); --tone-success-border: var(--color-success-border); --tone-warn-fg: var(--color-warn-fg); --tone-warn-bg: var(--color-warn-bg); --tone-warn-border: var(--color-warn-border); --tone-danger-fg: var(--color-danger-fg); --tone-danger-bg: var(--color-danger-bg); --tone-danger-border: var(--color-danger-border); --tone-info-fg: var(--color-info-fg); --tone-info-bg: var(--color-info-bg); --tone-info-border: var(--color-info-border); --tone-neutral-fg: var(--color-neutral-fg); --tone-neutral-bg: var(--color-neutral-bg); --tone-neutral-border: var(--color-neutral-border); /* ═══════════════════════════════════════════════════════════════════ British-spelling --colour-* aliases (Wave 7, 17 May 2026) ═══════════════════════════════════════════════════════════════════ Discovered during /amazon/finance audit: 11 blueprints had 286 total occurrences of `var(--colour-*)` (British) tokens that resolved to empty because the canonical scheme uses `--color-*` (American). SYMPTOM: dark mode silently dead on those pages (hex fallbacks only). 35 unique tokens aliased — one central edit, zero per-blueprint touch. If a NEW British token name appears in any blueprint, prefer migrating that blueprint to canonical `--color-*` rather than adding more aliases. ═══════════════════════════════════════════════════════════════════ */ --colour-accent: var(--color-accent); --colour-border: var(--color-border-default); --colour-border-subtle: var(--color-border-subtle); --colour-brand: var(--color-brand); --colour-brand-hover: var(--color-brand-hover); --colour-brand-primary: var(--color-brand); --colour-brand-subtle: var(--color-brand-soft); --colour-danger: var(--color-danger-fg); --colour-danger-bg: var(--color-danger-bg); --colour-danger-fg: var(--color-danger-fg); --colour-danger-subtle: var(--color-danger-bg); --colour-info: var(--color-info-fg); --colour-info-bg: var(--color-info-bg); --colour-on-brand: var(--color-text-on-brand); --colour-orange: var(--color-accent); --colour-orange-subtle: var(--color-accent-soft); --colour-primary: var(--color-brand); --colour-secondary: var(--color-text-muted); --colour-success: var(--color-success-fg); --colour-success-bg: var(--color-success-bg); --colour-success-fg: var(--color-success-fg); --colour-success-subtle: var(--color-success-bg); --colour-surface: var(--color-surface-card); --colour-surface-2: var(--color-bg-alt); --colour-surface-hover: var(--color-surface-hover); --colour-text: var(--color-text-body); --colour-text-muted: var(--color-text-muted); --colour-text-primary: var(--color-text-heading); --colour-text-secondary: var(--color-text-muted); --colour-warn: var(--color-warn-fg); --colour-warn-bg: var(--color-warn-bg); --colour-warn-subtle: var(--color-warn-bg); --colour-warn-text: var(--color-warn-fg); --colour-warning-fg: var(--color-warn-fg); --colour-white: var(--color-text-on-solid, #FFFFFF); /* ═══════════════════════════════════════════════════════════════════ Bare --color-text alias (Wave 8, 7 Jun 2026) ═══════════════════════════════════════════════════════════════════ 6 blueprints (aplus, flipkart_profit, ppc_intelligence, flipkart_rto, flipkart_orders, listings_editor) reference bare `var(--color-text)` (no `-body`/`-heading` suffix, no fallback) — 49 occurrences. The canonical scheme has no bare `--color-text`, so it resolved EMPTY and those elements inherited a parent/UA colour instead of body text. One alias fixes all six. New code should use `--color-text-body`. ─────────────────────────────────────────────────────────────────── */ --color-text: var(--color-text-body); } /* ═══════════════════════════════════════════════════════════════════════ LEGACY DIMENSION ALIASES — --spacing-* + --font-size-* (Wave 8, 7 Jun 2026) ═══════════════════════════════════════════════════════════════════════ Same bug class as the --colour-* sweep above, but for DIMENSION tokens. Several blueprint CSS files consume a legacy semantic-name dimension scheme (`--spacing-md`, `--font-size-sm`, …) that does NOT exist in the canonical scheme — canonical uses the numeric 4-pt grid (`--space-4`) and the `--text-*` type scale (`--text-sm`). SYMPTOM (confirmed 7 Jun 2026): • flipkart_rto.css — 83 BARE references (no fallback). The ENTIRE /flipkart/rto page collapsed to zero padding/gap/margin and browser-default font sizes — unusable layout. • account_health.css `.ah-resp-*` block — 6 bare `--font-size-*`. Files that wrote a fallback (flipkart_growth.css `var(--spacing-md,1rem)`) rendered fine; this alias is harmless/additive for them. Mapping rationale: spacing — xs=4 sm=8 md=16 lg=24 xl=32 2xl=48 (matches the fallback values authors wrote: `--spacing-md,1rem`=16, `--spacing-lg,1.5rem`=24). font-size — mapped 1:1 onto the closest canonical --text-* step. These are dimension constants (theme-independent). `:where(:root)` keeps specificity at 0,0,0 so any blueprint/theme that ever defines one explicitly still wins. NEW code MUST use --space-* / --text-* directly; prefer migrating a touched blueprint over growing this list. ═══════════════════════════════════════════════════════════════════════ */ :where(:root) { /* spacing → 4-pt grid */ --spacing-xs: var(--space-1); /* 4px */ --spacing-sm: var(--space-2); /* 8px */ --spacing-md: var(--space-4); /* 16px */ --spacing-lg: var(--space-6); /* 24px */ --spacing-xl: var(--space-8); /* 32px */ --spacing-2xl: var(--space-12); /* 48px */ /* font-size → --text-* type scale */ --font-size-xs: var(--text-xs); /* 11px */ --font-size-sm: var(--text-sm); /* 12px */ --font-size-base: var(--text-base); /* 14px */ --font-size-md: var(--text-md); /* 15px */ --font-size-lg: var(--text-lg); /* 17px */ --font-size-xl: var(--text-xl); /* 20px */ --font-size-2xl: var(--text-2xl); /* 24px */ } :where(:root) { /* ═══════════════════════════════════════════════════════════════════ SAFE NAMING-VARIANT BRIDGES (Wave 8 cont., 7 Jun 2026) ═══════════════════════════════════════════════════════════════════ Same proven pattern as the --colour-* British block above: each name below is consumed by 1+ blueprint CSS but is UNDEFINED in the canonical scheme (resolves EMPTY in BOTH themes -> dead colour / weight / size). All are UNAMBIGUOUS structural / weight / tone-naming variants, so aliasing is zero-regression — you cannot regress from an empty value. NEW code MUST use the canonical RHS names; prefer migrating a touched blueprint over growing this list. Ambiguous bare semantic shorthands (--color-success / -danger / -warning used as BOTH text AND solid-bg) are intentionally NOT bridged here — those are migrated per-page so a text-tone is never forced onto a solid-background element. */ /* font-weight → --weight-* scale */ --font-weight-thin: var(--weight-thin); --font-weight-regular: var(--weight-regular); --font-weight-medium: var(--weight-medium); --font-weight-semibold: var(--weight-semibold); --font-weight-bold: var(--weight-bold); --font-weight-extrabold: var(--weight-extrabold); /* structural shorthands → canonical surface / border / brand / text */ --color-surface: var(--color-surface-card); --color-border: var(--color-border-default); --color-primary: var(--color-brand); --color-bg-subtle: var(--color-bg-alt); --text-primary: var(--color-text-body); /* tone-* naming variants → canonical tone tokens (dark-tuned via 10-themes) */ --tone-warning-fg: var(--tone-warn-fg); --tone-warning-bg: var(--tone-warn-bg); --tone-warning-border: var(--tone-warn-border); --tone-success-text: var(--tone-success-fg); --tone-warn-text: var(--tone-warn-fg); --tone-danger-text: var(--tone-danger-fg); --tone-info-text: var(--tone-info-fg); --tone-neutral-text: var(--tone-neutral-fg); --tone-ok-fg: var(--tone-success-fg); --tone-ok-bg: var(--tone-success-bg); --tone-ok-border: var(--tone-success-border); --tone-caution-fg: var(--tone-warn-fg); --tone-caution-bg: var(--tone-warn-bg); --tone-caution-border: var(--tone-warn-border); } } /* @layer themes */