/* ===================================================================== AGENT ELITE INTERNAL TOOLS: THEME LAYER --------------------------------------------------------------------- This is OUR file. The brand values live in the style guide submodule and are served from /vendor/ae/css/. Link order on every /tools page: /vendor/ae/css/agent-elite-tokens.css the brand tokens /vendor/ae/css/agent-elite-components.css the .ae-* class library /css/ae-theme.css <- this file /css/ae-shell.css the app shell (hub only) It does exactly three jobs: 1. DARK MODE. The style guide is light-only, by design. The internal tools have always had a persisted light/dark toggle and staff use it, so this file adds a dark layer. Every dark value is either an existing brand token reused in a new role or a documented lift of one; nothing is sampled from thin air. Each is labelled below. 2. RE-TINTS THE CLASS LIBRARY FOR DARK. agent-elite-components.css hardcodes `#fff` in ~10 places (cards, inputs, panels, modals), which is correct for a light-only system but has to be overridden here rather than upstream. 3. BRIDGES THE LEGACY VARIABLES. The tool pages were built before the design system existed and each carries its own palette vocabulary (--ground/--ink-2/--line/--accent on the dense pages, --bg/--surface/--muted on the shell pages). Rather than rewrite thousands of declarations, those names are re-pointed at brand tokens here. Deleting a page's local `:root` block and linking this file is all it takes to bring that page on-brand. THEME SWITCHING: js/ae-toggle.js and js/ae-shell.js both stamp data-theme AND data-ae-theme on and . Everything below keys off :root[data-theme] / :root[data-ae-theme] so either name works. ===================================================================== */ /* --------------------------------------------------------------------- 1. DARK PALETTE Overriding the brand tokens themselves means every .ae-* component and every bridged legacy variable follows automatically. --------------------------------------------------------------------- */ /* The guide has no "second surface" token: --ae-bg is both the page canvas and, in its words, "the only subtle fill gray". Naming that role gives the dark theme somewhere to diverge, where canvas and fill must differ. */ :root { --ae-fill: var(--ae-bg); } :root[data-theme="dark"], :root[data-ae-theme="dark"] { /* Neutrals. The canvas is --ae-chrome-bg (#0e0e10), an existing brand value in its existing role: the dark surface. Card, fill and border are lifts of it; --ae-ink reuses the light theme's own canvas value (#f5f5f7) as text, and --ae-gray reuses --ae-chrome-fg-dim (#9b9b9f), which the guide already pairs with #0e0e10. */ --ae-bg: #0e0e10; /* = --ae-chrome-bg */ --ae-white: #17171a; /* EXTENSION: card surface, chrome-bg lifted */ --ae-fill: #202024; /* EXTENSION: subtle fill / second surface */ --ae-border: #2c2c31; /* EXTENSION: divider, lifted to ~1.35:1 on card */ --ae-ink: #f5f5f7; /* = the light theme's --ae-bg, inverted role */ --ae-gray: #9b9b9f; /* = --ae-chrome-fg-dim, 6.4:1 on the canvas */ /* Elite Blue is unchanged and finally has enough contrast: #11a7e0 is 2.75:1 on white (the guide's own accessibility caveat) but 6.9:1 on #0e0e10, so it is safe as link text here. The hover step has to LIGHTEN rather than darken, so --ae-blue-dark is re-pointed at a lift. */ --ae-blue: #11a7e0; --ae-blue-dark: #3cbcec; /* EXTENSION: hover, blue lifted (dark inverts the direction) */ --ae-blue-light: rgba(17,167,224,.14); /* the tint, as alpha over the canvas */ /* Status. The text values are lifts of the light-theme hues to clear 4.5:1 on the card surface; the tints become low-alpha washes of the same hue so nothing needs a new opaque color. */ --ae-success: #35bb8b; /* EXTENSION: lift of #1f9d6e */ --ae-success-light: rgba(31,157,110,.18); --ae-warning: #e0a441; /* EXTENSION: lift of #c8790f */ --ae-warning-light: rgba(200,121,15,.20); --ae-danger: #e9736f; /* EXTENSION: lift of #cf4343 */ --ae-danger-light: rgba(207,67,67,.20); /* Amber keeps its saturated brand value; only the fills and the text that sits on them move. Amber still means progress and opportunity here. */ --ae-amber: #eda32a; --ae-amber-light: rgba(237,163,42,.16); --ae-amber-cream: rgba(237,163,42,.11); --ae-amber-text: #f0be6b; /* EXTENSION: amber lifted, 8.9:1 on the fills above */ --ae-star: #e5aa2b; /* EXTENSION: lift of #d99a1b */ /* Nav chrome. The hub rail is a white surface (see ae-shell.css for why), so it rides --ae-white and needs no dark-specific value. --ae-chrome-bg stays put: it is the canvas now, so nothing may sit on it as a "dark card" and .ae-card-dark is off-limits in this theme. */ --ae-portal-nav-bg: #17171a; --ae-portal-nav-fg-dim: #9b9b9f; color-scheme: dark; } /* Early paint: html gets its background before the body vars resolve, so the first frame is not a white flash on the way into a dark page. */ :root[data-theme="light"], :root[data-ae-theme="light"] { background: #f5f5f7; color-scheme: light; } :root[data-theme="dark"], :root[data-ae-theme="dark"] { background: #0e0e10; } /* --------------------------------------------------------------------- 2. CLASS LIBRARY, DARK Only the rules where agent-elite-components.css hardcodes white. Kept in the same order as that file so the two can be diffed after a submodule bump. Everything else there is already token-driven. --------------------------------------------------------------------- */ :root[data-theme="dark"] .ae-card, :root[data-ae-theme="dark"] .ae-card, :root[data-theme="dark"] .ae-panel, :root[data-ae-theme="dark"] .ae-panel, :root[data-theme="dark"] .ae-plugin-shell, :root[data-ae-theme="dark"] .ae-plugin-shell, :root[data-theme="dark"] .ae-modal, :root[data-ae-theme="dark"] .ae-modal, :root[data-theme="dark"] .ae-option-row, :root[data-ae-theme="dark"] .ae-option-row, :root[data-theme="dark"] .ae-btn-secondary, :root[data-ae-theme="dark"] .ae-btn-secondary, :root[data-theme="dark"] .ae-field input, :root[data-ae-theme="dark"] .ae-field input, :root[data-theme="dark"] .ae-field select, :root[data-ae-theme="dark"] .ae-field select, :root[data-theme="dark"] .ae-field textarea, :root[data-ae-theme="dark"] .ae-field textarea, :root[data-theme="dark"] .ae-checkbox .box, :root[data-ae-theme="dark"] .ae-checkbox .box, :root[data-theme="dark"] .ae-radio .dot-outer, :root[data-ae-theme="dark"] .ae-radio .dot-outer { background: var(--ae-white); } /* The badge/table/segmented "neutral gray" is the page canvas in light, which in dark would vanish into it. Step it up to the fill instead. */ :root[data-theme="dark"] .ae-badge-neutral, :root[data-ae-theme="dark"] .ae-badge-neutral, :root[data-theme="dark"] .ae-delta-flat, :root[data-ae-theme="dark"] .ae-delta-flat, :root[data-theme="dark"] .ae-table thead th, :root[data-ae-theme="dark"] .ae-table thead th, :root[data-theme="dark"] .ae-table tfoot td, :root[data-ae-theme="dark"] .ae-table tfoot td, :root[data-theme="dark"] .ae-segmented, :root[data-ae-theme="dark"] .ae-segmented, :root[data-theme="dark"] .ae-btn-primary:disabled, :root[data-ae-theme="dark"] .ae-btn-primary:disabled, :root[data-theme="dark"] .ae-field input:disabled, :root[data-ae-theme="dark"] .ae-field input:disabled { background: var(--ae-fill); } /* Toast is ink-on-white text reversed out of an ink fill. In dark, --ae-ink IS the light color, so the fill and the label both have to swap. */ :root[data-theme="dark"] .ae-toast, :root[data-ae-theme="dark"] .ae-toast { background: var(--ae-fill); color: var(--ae-ink); border: 1px solid var(--ae-border); } /* Icon tiles read as blue-on-pale-blue in light. The alpha tint carries that over, but the icon itself needs the lifted blue to stay legible. */ :root[data-theme="dark"] .ae-icon-tile, :root[data-ae-theme="dark"] .ae-icon-tile, :root[data-theme="dark"] .ae-chip, :root[data-ae-theme="dark"] .ae-chip { color: var(--ae-blue); } :root[data-theme="dark"] .ae-avatar-tile, :root[data-ae-theme="dark"] .ae-avatar-tile { background: var(--ae-fill); } /* --------------------------------------------------------------------- 3. LEGACY VARIABLE BRIDGE Every name below is consumed by markup written before the design system existed. Re-pointing them here is what brings those pages on-brand without touching their rules. New code should use the --ae-* tokens and the .ae-* classes directly; nothing in this block is a brand value. --------------------------------------------------------------------- */ :root { /* -- Shell-page vocabulary (tools.html, tools-login.html, contact-tech-team.html) -- */ --bg: var(--ae-bg); --surface: var(--ae-white); --surface2: var(--ae-fill); --border: var(--ae-border); --ink: var(--ae-ink); --muted: var(--ae-gray); --faint: var(--ae-gray); /* -- Dense-page vocabulary (provisioning, sync-dashboard, site-build-logs, facebook-leadads) -- */ --ground: var(--ae-bg); --surface-2: var(--ae-fill); --ink-2: var(--ae-gray); --ink-3: var(--ae-gray); --line: var(--ae-border); --line-strong: var(--ae-border); /* Both files' accents collapse onto Elite Blue: the guide has exactly one action color, so the old two-blue --accent/--accent-2 pair is gone and the second slot becomes the hover step. */ --accent: var(--ae-blue); --accent-2: var(--ae-blue-dark); --on-accent: #fff; --good: var(--ae-success); --good-bg: var(--ae-success-light); --good-line: var(--ae-success); --warn: var(--ae-warning); --warn-bg: var(--ae-warning-light); --warn-line: var(--ae-warning); --danger: var(--ae-danger); --danger-bg: var(--ae-danger-light); --danger-line: var(--ae-danger); /* "Running" was a second blue; it is the action blue's tint now. */ --accent-h: var(--ae-blue-dark); --running: var(--ae-blue); --running-bg: var(--ae-blue-light); /* The sync dashboard's violet marked one thing: the "dryrun" badge, i.e. which mode the sweep ran in. The guide has no violet and says an unlisted color must resolve to a listed one; operating context is precisely what rule 3 reserves amber-cream for, so that is where it lands. */ --violet: var(--ae-amber-text); --violet-bg: var(--ae-amber-cream); /* Rule 6: radii are tokens only. The old 14px card radius is not a token, so it resolves to the 12px card token; the old 8px is already one. */ --radius: var(--ae-radius-lg); --radius-sm: var(--ae-radius); /* Rule 1: no shadows, anywhere. Elevation is which surface you are on and separation is a 1px border, so every `box-shadow: var(--shadow)` still sitting in page CSS resolves to nothing. Kept as a name rather than deleted from ~40 call sites. */ --shadow: none; /* Type. --mono drops JetBrains Mono for the guide's system mono stack, which is one fewer webfont on every page. */ --sans: var(--ae-font-body); --head: var(--ae-font-display); --mono: var(--ae-font-mono); /* Motion, under the old names used by the shell. */ --ae-duration: var(--ae-dur); } /* --------------------------------------------------------------------- 4. HOUSE RULES THE OLD CSS BREAKS Blanket corrections so the guide's two absolute rules hold even where a page still declares its own decoration. Listed last so they win. --------------------------------------------------------------------- */ /* Rule 1, enforced: no shadow and no gradient survives anywhere under /tools. The gradients that were here (the sidebar rail, the login backdrop, the provisioning brand glyph) are all replaced with a flat brand surface at their call sites. */ .ae-app, .ae-app *, .wrap, .wrap *, .topbar, .topbar *, .ae-center, .ae-center * { box-shadow: none; } /* The floating theme button injected by ae-toggle.js is styled inline, so it cannot be reached by a class. It is the one element allowed to keep a backdrop filter (it floats over arbitrary content), but not a shadow. */ [data-ae-theme-toggle] { box-shadow: none !important; background: var(--ae-white) !important; border: 1px solid var(--ae-border) !important; border-radius: var(--ae-radius) !important; color: var(--ae-gray) !important; } [data-ae-theme-toggle]:hover { color: var(--ae-blue) !important; border-color: var(--ae-blue) !important; } /* Rule 9, the 55+ audience: 36px minimum hit target. The dense pages were built with 32px controls. */ .themebtn, .keybtn { min-height: 36px; } /* Focus is one treatment system-wide: a 2px Elite Blue ring, never a shadow. */ :focus-visible { outline: 2px solid var(--ae-blue); outline-offset: 2px; }