/** * Light-theme override for the federated api-keys embed * (/account/api-keys/?embed=1). Hub-local, NOT synced to sibling * properties via sync-shared.sh — do not add abundera-shared header * comments here, and do not fold this into tokens.css. * * Why a separate file instead of editing tokens.css or style.css: * - tokens.css is the canonical shared file every Abundera property * pulls via sync-shared.sh. Adding a light palette there would fan * out to every consumer, most of which don't have a light theme * and never asked for one. * - style.css's `:root[data-theme="light"]` block IS the hub's * normal light-theme mechanism, but it isn't loaded on this page * (the embed intentionally ships a minimal CSS set: tokens+base+ * nav+account+api-keys). Loading the whole of style.css just for * its theme block would also pull in unrelated marketing-page * rules. * - account.css / api-keys.css already reference a second family of * CSS variables (--surface, --accent, --danger, --success, * --warning, --input-bg, --on-accent, ...) that are never DEFINED * anywhere, so every var() call silently falls through to its * inline fallback hex. That fallback IS today's dark palette, so * defining these names only under [data-theme="light"] changes * nothing for dark (no fallback in account.css/api-keys.css was * touched) and gives light mode a real value to resolve to. * * Activation: federated-iframe.js sets `data-theme="light"` on * from the `?theme=light` URL param or a trusted * `{type:"abundera.theme"}` postMessage. No attribute (or * data-theme="dark") keeps the existing all-dark rendering. * * Palette source: sign.abundera.ai's shipped light theme (WCAG-AA * checked). --accent-hover / --danger-hover / --warning / the * scrollbar + status-badge tokens aren't part of that reference * palette; they're derived (documented inline) to keep the existing * per-element contrast relationships instead of collapsing every * hover/tint to one flat value. */ :root[data-theme="light"] { /* Shared tokens.css names (base.css / account.css / api-keys.css already consume these; tokens.css itself stays dark-only). */ --bg: #f7f8fa; --surface-1: #ffffff; --surface-2: #f1f3f5; --surface-3: #e7e9ee; --text: #18181b; --text-secondary: #3f3f46; --text-muted: #52525b; --border: rgba(0, 0, 0, 0.10); --border-hover: rgba(37, 99, 235, 0.40); /* Page-local names used only by account.css / api-keys.css. These have no dark definition anywhere (see file header), so this block is the ONLY place they resolve to something other than each call site's own inline fallback. */ --surface: #ffffff; --surface-alt: #f1f3f5; --surface-hover: rgba(0, 0, 0, 0.05); --input-bg: #f1f3f5; --accent: #2563eb; --accent-hover: #1d4ed8; /* derived: one Tailwind step darker than --accent, standard hover shift */ --accent-bg: rgba(37, 99, 235, 0.08); --danger: #dc2626; --danger-hover: #b91c1c; /* derived: one step darker than --danger */ --success: #059669; --warning: #b45309; /* derived: amber-700, AA-contrast on white (no warning color in the reference palette) */ /* "Text drawn on top of a solid --accent / --danger fill" (button labels). Dark mode's near-black-on-pastel flips to white-on- saturated for light mode, both pairs clear WCAG AA (4.5:1) for normal text. */ --on-accent: #ffffff; --on-danger: #ffffff; /* .status-error plain text (not on a tinted background). */ --error-text: #dc2626; /* Scrollbar thumb (account.css), white-on-dark tints don't work on a light track. */ --scrollbar-thumb: rgba(0, 0, 0, 0.18); --scrollbar-thumb-hover: rgba(0, 0, 0, 0.28); /* Key-status badges (api-keys.css .status-active/-inactive/-revoked), tint-bg + solid-text pairs, kept independent so each status keeps its own bg/text contrast instead of sharing --success/--danger. */ --status-ok-bg: rgba(5, 150, 105, 0.12); --status-ok-text: #059669; --status-warn-bg: rgba(180, 83, 9, 0.12); --status-warn-text: #b45309; --status-danger-bg: rgba(220, 38, 38, 0.12); --status-danger-text: #dc2626; } /* ── Embed-mode chrome dedupe ──────────────────────────────────────────── Inside a product iframe the host page already renders the "API Keys" title and description in its own topbar, so the in-page h1 + subtitle duplicated the header and stacked ~120px of dead space above the "Create a new key" card. Hide them (and any leaked nav) in embed mode; full-page mode is untouched. Both attribute hosts covered (early marker + late marker — see federated-iframe.js). */ html[data-mode="embed"] #page-title, html[data-mode="embed"] #page-subtitle, html[data-mode="embed"] site-nav, body[data-mode="embed"] #page-title, body[data-mode="embed"] #page-subtitle, body[data-mode="embed"] site-nav { display: none; } html[data-mode="embed"] .account-main, body[data-mode="embed"] .account-main { padding-top: 0.5rem; }