/** * Admin design tokens — light and dark. * * The design draws every screen twice: turn Na light, turn Nb dark. Reading the * two palettes side by side, they are one system in two modes rather than two * designs — 2a is the WordPress admin palette, 2b is the anthracite palette the * ledger already used, and the accent, the amber and the lilac are identical in * both. So they live here once, and every screen consumes the same names. * * Mode resolution, in the order a browser applies it: * 1. `:root` carries the light palette. * 2. `prefers-color-scheme: dark` swaps it, guarded so an explicit light * choice still wins over a dark OS. * 3. `[data-ag-mode="dark"]` / `="light"` on or the screen wrapper wins * over both, which is what a toggle sets. * * Never style a component inside a mode block. Components read tokens; only this * file knows a mode exists. A colour whose sole definition sits behind a media * query stops applying the moment someone adds a toggle. * * WordPress admin has no dark mode of its own, so a dark screen still sits on * WP's light chrome. Each screen paints its own ground rather than assuming one. */ :root { /* ── surfaces ─────────────────────────────────────────────────────── */ --ag-page: #f0f0f1; /* WP's own admin ground, so light is unchanged */ --ag-bg: #fff; --ag-bg-sunk: #f6f7f7; --ag-bg-head: #f6f7f7; --ag-bg-hover: #f6f7f7; --ag-border: #c3c4c7; --ag-rule: #dcdcde; --ag-rule-soft: #e4e5e7; /* ── text ─────────────────────────────────────────────────────────── */ --ag-text: #1d2327; --ag-text-soft: #50575e; --ag-text-mute: #787c82; --ag-text-faint: #8c8f94; /* ── the brand accent — identical in both modes ───────────────────── */ --ag-accent: #d6f32d; --ag-accent-dim: #b7d02a; --ag-accent-ink: #111314; --ag-accent-ground: #fcfee8; /* ── semantic, deliberately separate from the accent ──────────────── */ --ag-warn: #8a4b00; --ag-warn-rule: #e0a340; --ag-warn-ground: #fffaf2; --ag-warn-code: #fff1dc; --ag-warn-ink: #6b3a00; --ag-relation: #6d28d9; --ag-relation-label: #6d28d9; /* Form controls. The ledger drew its own checkbox for a dark ground and its borders were near-white at low alpha, so on the light ground the boxes simply were not there. Named here because every screen that draws a control needs the same four. */ --ag-control-line: #8c8f94; --ag-control-line-hi: #50575e; --ag-control-bg: #fff; --ag-control-on: #1d2327; /* A wash over the current ground, either direction. */ --ag-wash: rgba(0, 0, 0, .03); /* Scope bands and the pipeline chip. */ --ag-band-global: rgba(74, 102, 112, .09); --ag-band-page: rgba(183, 208, 42, .16); --ag-pipe-line: rgba(43, 108, 176, .4); /* A warning ground with more presence than --ag-warn-ground, for a panel header sitting on top of one. */ --ag-warn-ground-hi: #fdeecd; --ag-scope: #4a6670; --ag-scope-light: #3e5a63; --ag-pipe: #2b6cb0; /* ── type ─────────────────────────────────────────────────────────── */ --ag-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --ag-sans: 'Instrument Sans', system-ui, -apple-system, sans-serif; } /* Guarded so an explicit light choice beats a dark operating system. */ @media (prefers-color-scheme: dark) { :root:not([data-ag-mode="light"]) { --ag-page: #0e1011; --ag-bg: #17191a; --ag-bg-sunk: #131516; --ag-bg-head: #131516; --ag-bg-hover: #1e2223; --ag-accent-ground: rgba(214, 243, 45, .07); --ag-border: #2c3133; --ag-rule: rgba(255, 255, 255, .11); --ag-rule-soft: rgba(255, 255, 255, .06); --ag-text: #e8eaea; --ag-text-soft: rgba(232, 234, 234, .6); --ag-text-mute: rgba(232, 234, 234, .5); --ag-text-faint: rgba(232, 234, 234, .38); --ag-warn: #d8b24a; --ag-warn-rule: rgba(216, 178, 74, .4); --ag-warn-ground: rgba(138, 106, 18, .16); --ag-warn-code: rgba(216, 178, 74, .16); --ag-warn-ink: #e8c877; --ag-control-line: rgba(232, 234, 234, .34); --ag-control-line-hi: rgba(232, 234, 234, .6); --ag-control-bg: rgba(255, 255, 255, .04); --ag-control-on: rgba(232, 234, 234, .82); --ag-wash: rgba(255, 255, 255, .03); --ag-band-global: rgba(143, 179, 190, .07); --ag-band-page: rgba(183, 208, 42, .07); --ag-pipe-line: rgba(127, 179, 224, .4); --ag-warn-ground-hi: rgba(138, 106, 18, .22); --ag-relation: #7c3aed; --ag-relation-label: #b79cf7; --ag-scope: #4a6670; --ag-scope-light: #8fb3be; --ag-pipe: #7fb3e0; } } /* A toggle wins over both, in either direction. */ :root[data-ag-mode="dark"] { --ag-page: #0e1011; --ag-bg: #17191a; --ag-bg-sunk: #131516; --ag-bg-head: #131516; --ag-bg-hover: #1e2223; --ag-accent-ground: rgba(214, 243, 45, .07); --ag-border: #2c3133; --ag-rule: rgba(255, 255, 255, .11); --ag-rule-soft: rgba(255, 255, 255, .06); --ag-text: #e8eaea; --ag-text-soft: rgba(232, 234, 234, .6); --ag-text-mute: rgba(232, 234, 234, .5); --ag-text-faint: rgba(232, 234, 234, .38); --ag-warn: #d8b24a; --ag-warn-rule: rgba(216, 178, 74, .4); --ag-warn-ground: rgba(138, 106, 18, .16); --ag-warn-code: rgba(216, 178, 74, .16); --ag-warn-ink: #e8c877; --ag-control-line: rgba(232, 234, 234, .34); --ag-control-line-hi: rgba(232, 234, 234, .6); --ag-control-bg: rgba(255, 255, 255, .04); --ag-control-on: rgba(232, 234, 234, .82); --ag-wash: rgba(255, 255, 255, .03); --ag-band-global: rgba(143, 179, 190, .07); --ag-band-page: rgba(183, 208, 42, .07); --ag-pipe-line: rgba(127, 179, 224, .4); --ag-warn-ground-hi: rgba(138, 106, 18, .22); --ag-relation: #7c3aed; --ag-relation-label: #b79cf7; --ag-scope: #4a6670; --ag-scope-light: #8fb3be; --ag-pipe: #7fb3e0; } /* Screens paint their own ground: wp-admin's is light in both modes, so a dark screen that inherits it renders dark text on a light page. */ .ag-ledger, .ag-ov { color: var(--ag-text); font-family: var(--ag-sans); } /* The screen must paint its own ground. * * WordPress admin has no dark mode, so #wpcontent is transparent and body keeps * WP's light grey whatever these tokens say. Leave it, and a dark screen's own * panels go dark while the page behind them does not -- the title and lede then * sit in near-white on light grey and vanish. Observed, not theorised. * * One unconditional rule reading one token, so no colour is defined only inside * a mode block. In light --ag-page IS WP's own ground, so nothing changes there. */ body { background: var(--ag-page); } /* Every suite screen wraps itself in WordPress's .wrap and lets WP style the heading, which is #1d2327 -- fine on the light ground, invisible on the dark one. Four of the five screens never restyled it. One rule here rather than five there, since this sheet is loaded by exactly the screens that need it. */ .wrap h1 { color: var(--ag-text); } /* ─── the appearance switch ─────────────────────────────────────────────── * * Lives with the tokens rather than with a screen, because it belongs to none * of them: it appears wherever this sheet is enqueued. See * inc/Support/admin-mode.php. */ .ag-mode { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 10px 20px 0; font-family: var(--ag-sans); } .ag-mode__label { font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ag-text-faint); } .ag-mode__set { display: inline-flex; background: var(--ag-bg-sunk); border: 1px solid var(--ag-border); border-radius: 3px; overflow: hidden; } .ag-mode__opt { padding: 4px 11px; font-size: 11.5px; line-height: 1.5; color: var(--ag-text-soft); text-decoration: none; border-right: 1px solid var(--ag-rule); } .ag-mode__opt:last-child { border-right: 0; } .ag-mode__opt:hover, .ag-mode__opt:focus { background: var(--ag-bg-hover); color: var(--ag-text); } .ag-mode__opt.is-on { background: var(--ag-accent); color: var(--ag-accent-ink); font-weight: 600; } .ag-mode__opt:focus-visible { outline: 2px solid #2271b1; outline-offset: -2px; } /* ─── what a save says ──────────────────────────────────────────────────── * * The suite's screens save without reloading, so the page can no longer * announce the result by simply being a new page. See assets/js/admin/suite.js. */ .ag-suite__notice { margin: 0 0 14px; padding: 9px 14px; background: var(--ag-accent-ground); border-left: 3px solid var(--ag-accent); font-family: var(--ag-sans); font-size: 12.5px; line-height: 1.5; color: var(--ag-text); } .ag-suite__notice.is-error { background: var(--ag-warn-ground); border-left-color: var(--ag-warn-rule); color: var(--ag-warn); } [aria-busy="true"] { opacity: .6; pointer-events: none; }