/* ============================================================ Dark Theme — WhyGoLess Applied when is set A pure mapping layer: every value resolves to a --wgl-* token. Dark is where this palette is strongest. On #111 the brand yellow hits 12.8:1, so the rule that bans yellow text on light is lifted here — links, active nav and emphasis all go yellow directly. Depth ladder: --wgl-black #111 (page) -> --wgl-ink2 #1B1B1B (cards, inputs) -> --wgl-ink3 #2A2A2A (elevated / hover) ============================================================ */ :root.theme-cosmos-dark { color-scheme: dark; /* ── Base ───────────────────────────────────────────────── */ --bs-body-bg: var(--wgl-black); --bs-body-bg-rgb: var(--wgl-black-rgb); --bs-body-color: var(--wgl-paper-dim); --bs-body-color-rgb: 230, 228, 223; --bs-border-color: rgba(255, 255, 255, 0.10); /* ── Bootstrap system ───────────────────────────────────── */ --bs-secondary-bg: var(--wgl-ink2); --bs-tertiary-bg: var(--wgl-ink3); --bs-heading-color: var(--wgl-paper); --bs-secondary-color: rgba(230, 228, 223, 0.58); --bs-tertiary-color: rgba(230, 228, 223, 0.40); --bs-emphasis-color: var(--wgl-white); --bs-border-color-translucent: rgba(255, 255, 255, 0.06); /* ── Links — yellow is legal here: 12.8:1 on #111 ───────── */ --bs-link-color: var(--wgl-yellow); --bs-link-hover-color: var(--wgl-yellow-hi); --bs-link-color-rgb: var(--wgl-yellow-rgb); /* ── Primary — same brand yellow, same black foreground ─── */ --bs-primary: var(--wgl-yellow); --bs-primary-rgb: var(--wgl-yellow-rgb); --bs-primary-text-emphasis: var(--wgl-yellow-hi); --bs-primary-bg-subtle: rgba(var(--wgl-yellow-rgb), 0.14); --bs-primary-border-subtle: rgba(var(--wgl-yellow-rgb), 0.34); --accent-color: var(--wgl-yellow); --s-on-primary: var(--wgl-black); /* ── Semantic state colors — lifted for dark legibility ─── */ --bs-danger: var(--wgl-red-lt); --bs-danger-rgb: 228, 104, 90; --bs-success: var(--wgl-green-lt); --bs-success-rgb: 143, 191, 74; /* Money OWED and not yet paid. It cannot borrow --bs-warning: that maps to the brand yellow, which is a FILL and fails as text on any light surface (the contrast invariant at the top of tokens.css). Pending is a text colour, so it gets its own token and its own dark-theme twin. */ --wgl-pending-text: var(--wgl-amber-lt); --bs-warning: var(--wgl-yellow); --bs-warning-rgb: var(--wgl-yellow-rgb); --bs-info-text-emphasis: var(--wgl-gray-lt); /* ── Form validation ────────────────────────────────────── */ --bs-form-valid-color: var(--wgl-green-lt); --bs-form-valid-border-color: var(--wgl-green-lt); --bs-form-invalid-color: var(--wgl-red-lt); --bs-form-invalid-border-color: var(--wgl-red-lt); /* ── Row / grid ─────────────────────────────────────────── */ --s-group-row-bg: rgba(var(--wgl-yellow-rgb), 0.05); --s-alt-row-bg: rgba(255, 255, 255, 0.020); --s-row-bg-hover: rgba(var(--wgl-yellow-rgb), 0.09); --s-row-bg-selected: rgba(var(--wgl-yellow-rgb), 0.15); --s-row-marker: var(--wgl-yellow); /* ── Cards ──────────────────────────────────────────────── */ --s-card-solid-bg: var(--wgl-ink2); --s-card-bg: var(--wgl-ink2); --s-card-border: rgba(255, 255, 255, 0.09); --s-card-shadow: var(--s-shadow-sm); --s-card-title: var(--wgl-paper); --s-bright-rgb: var(--wgl-paper-rgb); /* ── Category ───────────────────────────────────────────── */ --s-category-title: var(--wgl-gray-lt); --s-category-divider: rgba(255, 255, 255, 0.07); --s-category-border: rgba(255, 255, 255, 0.11); /* ── Column headers ─────────────────────────────────────── */ --s-column-header: var(--wgl-gray-lt); --s-column-header-hover-bg: rgba(255, 255, 255, 0.05); --s-column-header-border: rgba(255, 255, 255, 0.09); --s-column-footer: var(--wgl-paper); /* ── State ──────────────────────────────────────────────── */ --s-deleted: var(--wgl-ink-mute); --s-disabled: var(--wgl-ink-mute-2); --s-inactive: var(--wgl-ink-mute); /* ── Inputs ─────────────────────────────────────────────── */ --s-input-bg: var(--wgl-ink2); --s-input-text: var(--wgl-paper); --s-input-clear: var(--wgl-red-lt); --s-input-dirty-bg: rgba(var(--wgl-yellow-rgb), 0.08); --s-input-outline: rgba(var(--wgl-yellow-rgb), 0.22); --s-input-outline-error: rgba(228, 104, 90, 0.28); --s-input-readonly-bg: var(--wgl-black); --s-input-border-focus: var(--wgl-yellow); /* ── UI elements ────────────────────────────────────────── */ --s-no-results: var(--wgl-gray-lt); --s-pager-icon: var(--wgl-gray-lt); --s-pager-text: var(--wgl-gray-lt); --s-placeholder: var(--wgl-ink-mute); --s-modal-backdrop: rgba(0, 0, 0, 0.78); /* ── Scrollbar ──────────────────────────────────────────── */ --s-scroll-thumb: rgba(255, 255, 255, 0.14); --s-scroll-thumb-hover: rgba(var(--wgl-yellow-rgb), 0.45); --s-scroll-track: transparent; /* ── Sidebar ──────────────────────────────────────────────── The rail stays at --wgl-ink2, one step ABOVE the --wgl-black body, so it still reads as elevated. The light theme pins its rail to --wgl-black instead: there it needs maximum separation from paper, here it needs lift off the page. Pinning both to #111 would dissolve the rail into the background. The extra tokens below match the light theme's, because the rail is dark in both and sidebar.css consumes only these rather than the page-surface tokens. ── */ --s-sidebar-bg: var(--wgl-ink2); --s-sidebar-seam: var(--wgl-yellow); --s-sidebar-band-bg: var(--wgl-black); --s-sidebar-band-link: rgba(230, 228, 223, 0.50); --s-sidebar-band-link-active: var(--wgl-yellow); --s-sidebar-band-title: var(--wgl-paper); --s-sidebar-band-title2: var(--wgl-gray-lt); --s-sidebar-icon: var(--wgl-gray-lt); --s-sidebar-icon-active: var(--wgl-yellow); --s-sidebar-link: var(--wgl-paper-dim-2); --s-sidebar-link-active: var(--wgl-yellow); --s-sidebar-fg-strong: var(--wgl-paper); --s-sidebar-title: var(--wgl-gray-lt); --s-sidebar-divider: rgba(var(--wgl-paper-rgb), 0.10); --s-sidebar-field-bg: rgba(var(--wgl-paper-rgb), 0.05); --s-sidebar-field-border: rgba(var(--wgl-paper-rgb), 0.14); --s-sidebar-field-text: var(--wgl-paper-dim); --s-sidebar-field-ph: var(--wgl-ink-mute); --s-sidebar-hover-bg: rgba(var(--wgl-yellow-rgb), 0.10); --s-sidebar-scroll-thumb: rgba(var(--wgl-paper-rgb), 0.14); /* ── Cell borders ───────────────────────────────────────── */ --s-cell-border: rgba(255, 255, 255, 0.06); --s-cell-input-border: rgba(255, 255, 255, 0.14); /* ── Sidebar active pill — solid brand fill, black text. Black-on-yellow is 13.4:1. The 14% wash this replaced sat too close to the 10% hover to carry the state on its own, which is what the (now deleted) leading marker bar was compensating for. ── */ --s-sidebar-active-bg: var(--wgl-yellow); --s-sidebar-active-color: var(--wgl-black); /* ── Tabs ───────────────────────────────────────────────── */ --s-tabs-border: rgba(255, 255, 255, 0.09); --s-tabs-border-active: var(--wgl-yellow); --s-tabs-text: var(--wgl-gray-lt); --s-tabs-text-active: var(--wgl-paper); /* ── Tool icons ─────────────────────────────────────────── */ --s-tool-icon: var(--wgl-gray-lt); --s-tool-icon-hover: var(--wgl-yellow); /* ── Chips ──────────────────────────────────────────────── */ --s-chip-bg: rgba(255, 255, 255, 0.07); --s-chip-bg-hover: rgba(var(--wgl-yellow-rgb), 0.16); /* ── Hover surfaces ─────────────────────────────────────── */ --s-hover-bg: rgba(255, 255, 255, 0.05); --s-nav-hover-bg: rgba(var(--wgl-yellow-rgb), 0.10); --s-scrim: rgba(0, 0, 0, 0.55); /* ── Logo — the mark is drawn on its own yellow field, so it needs no inversion on dark; a touch of lift keeps it from muddying. */ --s-site-logo-img-url: url(/Content/site/images/logo/HeaderLogoWhite.png); --s-site-logo-compact-url: url(/Content/site/images/logo/logo_compact.png); --s-site-logo-img-filter: brightness(104%) contrast(108%); --s-site-logo-eye-url: url(/Content/site/images/logo/logo_eyet.png); /* ── Shadows — deeper on dark ───────────────────────────── */ --s-shadow-xs: 0 1px 3px rgba(0,0,0,0.35); --s-shadow-sm: 0 2px 8px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.22); --s-shadow-md: 0 4px 16px rgba(0,0,0,0.52), 0 1px 4px rgba(0,0,0,0.24); --s-shadow-lg: 0 8px 32px rgba(0,0,0,0.60), 0 2px 8px rgba(0,0,0,0.30); --s-shadow-xl: 0 20px 60px rgba(0,0,0,0.72), 0 4px 16px rgba(0,0,0,0.38); --s-modal-shadow: var(--s-shadow-xl); /* Focus halo has to change on dark — the light tint would glare */ --s-focus-ring: 0 0 0 3px rgba(var(--wgl-yellow-rgb), 0.22); /* ── Dashboard ground veil ────────────────────────────────── The dashboard paints bg.png — the brand's mustard paper — behind its cards (see dashboard.css). At full strength that is a bright field, which is the wrong answer on a dark theme: it would glare and it would break the black rail's relationship to the page. This veil composites it down to roughly #211E14, so the texture survives as warm grain on near-black instead of a lit surface. Same asset, one token's difference. ── */ --s-dash-veil: rgba(var(--wgl-black-rgb), 0.92); /* Dark keeps its cards solid. The veiled ground here lands around #171612 and --wgl-ink2 cards are #1B1B1B — barely a step apart already, with the card border doing most of the separating. Made translucent, the little separation that exists would disappear. Light gets the 60% fill; here it would only erase the card. */ --s-dash-card-bg: var(--s-card-solid-bg); /* Dark cards stay ink, so the small semantic text keeps the lifted twins it already uses everywhere else on this theme — the warm darkened variants would be unreadable here. */ --s-dash-muted: var(--wgl-gray-lt); --s-dash-success: var(--wgl-green-lt); --s-dash-danger: var(--wgl-red-lt); /* ── WGL hand-written screens ─────────────────────────────── The eight screens under `.s-WglPage` used to be pinned to paper in BOTH themes: legacy-shapes.css named --wgl-white for every panel, card, input and chip while the type tokens flipped to light. On this theme that produced light-on-white — the Shop dashboard's five white panels are the most visible instance, but every WGL screen had it. The depth ladder is the page's own, so a panel reads as lifted off the body exactly the way a Serenity card does: --wgl-black #111 (page) -> --wgl-ink2 #1B1B1B (panel) -> --wgl-ink3 #2A2A2A (quiet fill inside a panel) The photo well inverts: on paper it was a step DOWN into --wgl-paper, so here it is a step down into --wgl-black rather than a step up. ── */ --s-wgl-surface: var(--wgl-ink2); --s-wgl-surface-2: var(--wgl-ink3); --s-wgl-sunken: var(--wgl-black); --s-wgl-ink: var(--wgl-paper); --s-wgl-ink-dim: var(--wgl-gray-lt); --s-wgl-ink-mute: var(--wgl-ink-mute); --s-wgl-hairline: rgba(var(--wgl-paper-rgb), 0.14); /* A black 2px outline and a black hard offset are both invisible on #1B1B1B — the silhouette IS the look, so the edge inverts to paper and the offset with it. This was already written in legacy-shapes.css but behind `@media (prefers-color-scheme: dark)` and `:root[data-theme]`, neither of which this app ever sets: the switcher swaps a `theme-cosmos-dark` CLASS on . So it had never once applied. */ --s-wgl-edge: var(--wgl-paper-dim); --s-wgl-on-edge: var(--wgl-black); /* ── The checkbox tick ────────────────────────────────────── Serenity ships ONE tick, stroked white, drawn for a --bs-primary fill. Two things go wrong with that here. On the brand yellow it is 1.4:1 — the grid's Is Supplier column was a row of yellow squares with an invisible mark on them. And the box now fills with --s-wgl-edge, which inverts per theme, so a fixed stroke cannot contrast with it in both. So the glyph follows the fill: it is the framework's own path, stroked in whatever --s-wgl-on-edge resolves to. The hex is written out because a data URI cannot read a custom property. ── */ --s-check-tick: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); /* --wgl-black, on the paper-dim fill */ /* --wgl-tint is #FFF6C9. As a FILL on this theme it is a lit white box, which is what made hovering a POS match or a due expense row flash. The wash has to be built from the yellow's alpha instead. */ --s-wgl-tint-bg: rgba(var(--wgl-yellow-rgb), 0.16); --s-wgl-tint-bg-2: rgba(var(--wgl-yellow-rgb), 0.10); --s-wgl-focus-tint: rgba(var(--wgl-yellow-rgb), 0.24); /* Yellow as TEXT is legal here (12.8:1 on #111) — the light theme's --wgl-yellow-deep escape hatch is the one that would fail, at 2.6:1. */ --s-wgl-accent-fg: var(--wgl-yellow); --s-danger-text: var(--wgl-red-lt); --s-success-text: var(--wgl-green-lt); } /* ── Page background ────────────────────────────────────────── */ .theme-cosmos-dark #PageBackground { position: fixed; inset: 0; z-index: -10000; display: block !important; background: radial-gradient(120% 90% at 100% 0%, rgba(var(--wgl-yellow-rgb), 0.07) 0%, rgba(var(--wgl-yellow-rgb), 0) 62%), var(--wgl-black); } /* ── Dark mobile header ─────────────────────────────────────── */ .theme-cosmos-dark .s-mobile-header { background: var(--wgl-ink2); } /* ── Dark sub-menu left border ──────────────────────────────── */ .theme-cosmos-dark .s-sidebar-menu .s-sidebar-menu { border-left-color: rgba(255, 255, 255, 0.10); } /* ── Checkboxes / radios — yellow check on dark, black glyph. The old rule used filter:invert(1) on a near-white fill; with a yellow fill that would invert to blue, so the accent is set directly instead. ── */ .theme-cosmos-dark .form-check-input { background-color: var(--wgl-ink3); border-color: rgba(255, 255, 255, 0.30); } .theme-cosmos-dark .form-check-input:checked, .theme-cosmos-dark input[type=checkbox]:checked, .theme-cosmos-dark input[type=radio]:checked, .theme-cosmos-dark .check-box.checked { background-color: var(--wgl-yellow); border-color: var(--wgl-yellow); } .theme-cosmos-dark .form-check-input:focus { border-color: var(--wgl-yellow); box-shadow: var(--s-focus-ring); }