/** * @file * Bridges Gin's admin-theme accent variables into DevPortal's brand-token * namespace. * * WHY: gin sets --gin-color-primary-rgb on via [data-gin-accent]. * DevPortal components use --color-brand-primary (and relatives) which are * defined in tokens/colors.css and overridden by tokens/accent.css only when * data-devportal-accent is on . On admin pages (gin is the active * theme) data-devportal-accent is never set on , so DevPortal tokens * stay at their static navy default even when gin's accent changes. * * HOW: the selector `html:not([data-devportal-accent]) > body[data-gin-accent]` * fires ONLY on admin pages (gin active, no devportal accent on html). * On portal frontend pages an authenticated user with the gin toolbar sees * both data-gin-accent AND data-devportal-accent on , so the :not() * guard prevents this rule from firing and DevPortal's own accent wins. * * RESULT: clicking any gin colour swatch on the admin settings page causes * DevPortal buttons, links, and other brand-coloured components on the same * page to update in real time — no JS required. */ html:not([data-devportal-accent]) > body[data-gin-accent] { /* ── Primitives ─────────────────────────────────────────────────────────── */ --color-brand-primary-rgb: var(--gin-color-primary-rgb); --color-brand-primary-hover-val: var(--gin-color-primary-hover); --color-brand-primary-active-val: var(--gin-color-primary-active); /* ── Derived brand tokens ───────────────────────────────────────────────── */ --color-brand-primary: rgb(var(--gin-color-primary-rgb)); --color-brand-primary-hover: var(--gin-color-primary-hover); --color-brand-secondary: rgb(var(--gin-color-primary-rgb)); --color-brand-accent: rgb(var(--gin-color-primary-rgb)); --color-brand-accent-hover: var(--gin-color-primary-hover); --color-brand-primary-light: rgba(var(--gin-color-primary-rgb), 0.12); /* ── Interactive / focus ────────────────────────────────────────────────── */ --color-text-link: rgb(var(--gin-color-primary-rgb)); --color-text-link-hover: var(--gin-color-primary-hover); --color-border-focus: rgb(var(--gin-color-primary-rgb)); --color-interactive-primary: rgb(var(--gin-color-primary-rgb)); --color-interactive-primary-hover: var(--gin-color-primary-hover); /* ── Subtle backgrounds (badges, alerts, cards) ─────────────────────────── */ --color-brand-primary-subtle: rgba(var(--gin-color-primary-rgb), 0.08); --color-brand-primary-subtle-border: rgba(var(--gin-color-primary-rgb), 0.20); --color-brand-primary-subtle-hover: rgba(var(--gin-color-primary-rgb), 0.14); /* ── Toggle switch "on" state ────────────────────────────────────────────── */ /* Gin hardcodes --gin-switch: #26a769 (green) in light mode regardless of */ /* the selected accent. Override it here so the pill toggle active colour */ /* always matches the chosen accent on every admin page. */ --gin-switch: rgb(var(--gin-color-primary-rgb)); }