/* ================================================================ PostPro Nexus - Console design system - LEGACY TOKEN BRIDGE ---------------------------------------------------------------- TEMPORARY. Delete this file when the last page has migrated. Why it exists ------------- The restyle spans 46 pages. Without a bridge the app would show two design systems side by side for the whole migration. Every legacy page reads its colours through the custom properties nexus.css defines, so re-pointing those definitions at Console tokens gives every unmigrated page the Console palette immediately, keeping its old layout. Migrated pages use --nx-* directly and ignore this file. Only tokens holding a LITERAL colour are listed. nexus.css defines ~80 more as aliases (--surface-muted: var(--bg-tertiary), ...) and those follow automatically once their base is re-pointed. Specificity note ---------------- nexus.css themes itself with `html[data-theme="dark"]` (0,1,1) and `html:not([data-theme="light"]):not([data-theme="dark"])` (0,2,1). A plain `:root` (0,1,0) would lose to both. `:root:root:root` is (0,3,0), which wins on specificity alone - so the bridge holds even if the stylesheet load order changes. No !important, per project CSS convention. The --nx-* values are already theme-aware, so ONE block covers light and dark. ================================================================ */ :root:root:root { /* ---- AMT brand palette -> Console accent ramp ---------------- */ --amt-turquoise: var(--nx-accent); --amt-turquoise-dark: var(--nx-accent-text); --amt-turquoise-darker: var(--nx-accent-text); --amt-turquoise-light: var(--nx-accent-soft-bg); --amt-turquoise-100: var(--nx-accent-soft-bg); --amt-turquoise-200: var(--nx-accent-soft-line); --amt-turquoise-700: var(--nx-accent-text); --amt-turquoise-900: var(--nx-accent-soft-fg); --amt-dark-grey: var(--nx-ink); --amt-grey: var(--nx-muted); --amt-light-grey: var(--nx-faint); --amt-green: var(--nx-green-fg); --amt-green-dark: var(--nx-green-fg); --amt-green-light: var(--nx-green-bg); --amt-pp-grey: var(--nx-faint); --amt-dms-grey: var(--nx-faint); --amt-grey-200: var(--nx-border-strong); --amt-grey-300: var(--nx-faint); --amt-grey-900: var(--nx-ink); --amt-line: var(--nx-line); --amt-paper: var(--nx-sunken); --amt-white: var(--nx-surface); /* ---- Surfaces ------------------------------------------------ */ --bg-color: var(--nx-page-bg); --bg-primary: var(--nx-page-bg); --bg-secondary: var(--nx-surface); --bg-tertiary: var(--nx-sunken); --bg-hover: var(--nx-sunken); --bg-active: var(--nx-accent-soft-bg); --card-bg: var(--nx-surface); /* ---- Text ---------------------------------------------------- --text-muted carries 2242 usages and is mostly body-adjacent secondary text, so it maps to --nx-muted (5.4:1 on white), not --nx-faint (2.6:1, overline-only). Console runs a shorter grey ramp than the old slate scale, so secondary and muted converge. */ --text-main: var(--nx-ink); --text-primary: var(--nx-ink); --text-secondary: var(--nx-muted); --text-muted: var(--nx-muted); --text-dim: var(--nx-faint); --text-on-accent: var(--nx-btn-primary-fg); /* ---- Borders ------------------------------------------------- */ --border-color: var(--nx-line); --border-light: var(--nx-line); --border-medium: var(--nx-border-strong); --border-strong: var(--nx-border-strong); --grid-line: var(--nx-row-divider); --grid-color: var(--nx-row-divider); /* ---- Accent -------------------------------------------------- */ --accent-gradient: linear-gradient(135deg, var(--nx-accent) 0%, var(--nx-accent-text) 100%); /* ---- Header bar (legacy called it "sidebar") ----------------- */ --sidebar-bg: var(--nx-topbar-bg); --sidebar-bg-hover: var(--nx-sunken); --sidebar-bg-active: var(--nx-accent-soft-bg); --sidebar-text: var(--nx-topbar-dim); --sidebar-text-bright: var(--nx-topbar-fg); --sidebar-border: var(--nx-topbar-line); /* ---- Signal colours ----------------------------------------- Console runs teal / green / amber / rose only. Blue, cyan and purple have no twin, so they fold into the accent: colour is signal, not decoration (library section 5). */ --tech-blue: var(--nx-accent); --tech-cyan: var(--nx-accent); --tech-purple: var(--nx-accent); --tech-green: var(--nx-green-fg); --tech-red: var(--nx-rose-fg-2); --tech-orange: var(--nx-amber-fg); --tech-yellow: var(--nx-amber-fg); --status-success: var(--nx-green-fg); --status-warning: var(--nx-amber-fg); --status-error: var(--nx-rose-fg-2); --status-info: var(--nx-accent); --rec-violet: var(--nx-accent); /* ---- Alert surfaces ------------------------------------------ */ --alert-warning-bg: var(--nx-amber-bg); --alert-warning-border: var(--nx-amber-tint-line); --alert-warning-text: var(--nx-amber-fg); --alert-warning-subtext: var(--nx-amber-fg); --alert-danger-bg: var(--nx-rose-bg); --alert-danger-border: var(--nx-rose-line); --alert-danger-text: var(--nx-rose-fg); --alert-success-bg: var(--nx-green-bg); --alert-success-border: var(--nx-green-dot); --alert-success-text: var(--nx-green-fg); --alert-info-bg: var(--nx-accent-soft-bg); --alert-info-border: var(--nx-accent-soft-line); --alert-info-text: var(--nx-accent-soft-fg); --alert-blue-bg: var(--nx-accent-soft-bg); --alert-blue-border: var(--nx-accent-soft-line); --alert-blue-text: var(--nx-accent-soft-fg); --alert-purple-bg: var(--nx-accent-soft-bg); --alert-purple-border: var(--nx-accent-soft-line); --alert-purple-text: var(--nx-accent-soft-fg); --alert-pink-bg: var(--nx-rose-bg); --alert-pink-text: var(--nx-rose-fg); /* ---- Shadows - Console gives cards a border, not a shadow ---- */ --shadow-sm: none; --shadow-card: none; --shadow-md: var(--nx-shadow-menu); --shadow-lg: var(--nx-shadow-menu); /* ---- Type ---------------------------------------------------- */ --font-mono: var(--nx-font-mono); /* ---- Radii --------------------------------------------------- */ --radius-sm: var(--nx-r-chip); --radius-md: var(--nx-r-control); --radius-lg: var(--nx-r-card); }