/* ============================================================ Light Theme — WhyGoLess Applied when is set A pure mapping layer: every value below resolves to a --wgl-* token from tokens.css. No literal hex belongs in this file. Design principles: - Paper, not gray. The page sits on --wgl-paper (#FAFAF8), warm, because a cold #f5f5f7 fights the yellow. - Yellow is the ACTION color and appears as a fill only: buttons, the sidebar active marker, selection bars, focus halos, badges. It never carries white text and never becomes text on paper. - Ink carries meaning. Links are black with a yellow underline — yellow text on paper is 1.4:1 and simply cannot be read. - --wgl-yellow-deep is the escape hatch: the one yellow-family value legible as text/icon on a light surface. ============================================================ */ :root.theme-azure-light { /* ── Base background ────────────────────────────────────── */ --bs-body-bg: var(--wgl-paper); --bs-body-bg-rgb: var(--wgl-paper-rgb); --bs-body-color: var(--wgl-ink2); --bs-body-color-rgb: 27, 27, 27; /* ── Bootstrap system ───────────────────────────────────── */ --bs-emphasis-color: var(--wgl-black); --bs-secondary-color: var(--wgl-gray); --bs-tertiary-color: var(--wgl-gray-lt); --bs-secondary-bg: var(--wgl-paper-2); --bs-tertiary-bg: var(--wgl-paper-3); --bs-heading-color: var(--wgl-black); --bs-border-color: var(--wgl-line); --bs-border-color-translucent: rgba(var(--wgl-black-rgb), 0.07); /* ── Links — black text, yellow rule underneath. Hover drops to the deep yellow, which is the only readable yellow here. ── */ --bs-link-color: var(--wgl-black); --bs-link-hover-color: var(--wgl-yellow-deep); --bs-link-color-rgb: var(--wgl-black-rgb); --bs-link-hover-color-rgb: 185, 154, 0; /* ── Primary accent — brand yellow. Foreground is forced to black in overrides.css; Bootstrap would otherwise compute white. ── */ --bs-primary: var(--wgl-yellow); --bs-primary-rgb: var(--wgl-yellow-rgb); --bs-primary-text-emphasis: var(--wgl-yellow-deep); --bs-primary-bg-subtle: var(--wgl-tint); --bs-primary-border-subtle: var(--wgl-yellow); --accent-color: var(--wgl-yellow); /* On-primary foreground. Referenced by overrides.css. */ --s-on-primary: var(--wgl-black); /* ── Semantic state colors ──────────────────────────────── */ --bs-danger: var(--wgl-red); --bs-danger-rgb: var(--wgl-red-rgb); --bs-success: var(--wgl-green); --bs-success-rgb: var(--wgl-green-rgb); /* 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); --bs-warning: var(--wgl-yellow); --bs-warning-rgb: var(--wgl-yellow-rgb); /* ── Info — Bootstrap uses this for .category-title in common-theme */ --bs-info-text-emphasis: var(--wgl-gray); /* ── Form validation ────────────────────────────────────── */ --bs-form-valid-color: var(--wgl-green); --bs-form-valid-border-color: var(--wgl-green); --bs-form-invalid-color: var(--wgl-red); --bs-form-invalid-border-color: var(--wgl-red); /* ── Row / grid — kept whisper-quiet. Banding a dense grid in brand color is the fastest way to make it tiring. ── */ --s-group-row-bg: var(--wgl-tint-2); --s-alt-row-bg: rgba(var(--wgl-black-rgb), 0.018); --s-row-bg-hover: rgba(var(--wgl-yellow-rgb), 0.13); /* Selected row: tint fill + a yellow bar, never a saturated fill */ --s-row-bg-selected: var(--wgl-tint); --s-row-marker: var(--wgl-yellow); /* ── Cards ──────────────────────────────────────────────── */ --s-card-solid-bg: var(--wgl-white); --s-card-bg: var(--wgl-white); --s-card-border: var(--wgl-line); --s-card-title: var(--wgl-black); --s-bright-rgb: var(--wgl-black-rgb); /* ── Category ───────────────────────────────────────────── */ --s-category-title: var(--wgl-gray); --s-category-border: var(--wgl-line); --s-category-divider: rgba(var(--wgl-black-rgb), 0.07); /* ── Column headers ─────────────────────────────────────── */ --s-column-header: var(--wgl-gray); --s-column-header-hover-bg: rgba(var(--wgl-black-rgb), 0.04); --s-column-header-border: var(--wgl-line); --s-column-footer: var(--wgl-black); /* ── State ──────────────────────────────────────────────── */ --s-deleted: var(--wgl-gray-lt); --s-disabled: var(--wgl-gray-lt); --s-inactive: var(--wgl-gray-lt); /* ── Inputs ─────────────────────────────────────────────── */ --s-input-bg: var(--wgl-white); --s-input-text: var(--wgl-ink2); --s-input-clear: var(--wgl-red); --s-input-dirty-bg: var(--wgl-tint-2); --s-input-outline: var(--wgl-tint); --s-input-outline-error: rgba(var(--wgl-red-rgb), 0.18); --s-input-readonly-bg: var(--wgl-paper-3); --s-input-border-focus: var(--wgl-black); /* ── UI elements ────────────────────────────────────────── */ --s-no-results: var(--wgl-gray); --s-pager-icon: var(--wgl-gray); --s-pager-text: var(--wgl-gray); --s-placeholder: var(--wgl-gray-lt); /* Modal scrim — from the source's rgba(17,17,17,.72) on #enhModal */ --s-modal-backdrop: rgba(var(--wgl-black-rgb), 0.72); /* ── Scrollbar ──────────────────────────────────────────── */ --s-scroll-thumb: rgba(var(--wgl-black-rgb), 0.15); --s-scroll-thumb-hover: rgba(var(--wgl-black-rgb), 0.30); --s-scroll-track: transparent; /* ── Sidebar — a BLACK rail, in the light theme too ───────── The brand's chrome is black with a yellow rule on the edge facing content: .topbar, .totals and .toast in the quotation builder are all that shape. A sidebar is that element turned on its side, so it does not follow the page surface. Because the rail no longer matches the page, it cannot borrow the page's foreground/divider/field tokens — those are tuned for paper. It carries its own set below, and sidebar.css consumes only these. (Repointing the shared ones was never an option: --s-card-border alone has 16 call sites.) Contrast note: --wgl-gray is 3.6:1 on #111 and FAILS here (see tokens.css:54-56). Icons take --wgl-gray-lt at 6.6:1. ── */ --s-sidebar-bg: var(--wgl-black); --s-sidebar-seam: var(--wgl-yellow); --s-sidebar-band-bg: var(--wgl-black); --s-sidebar-band-link: var(--wgl-paper-dim-2); --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-white); --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-gray-lt); --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(var(--wgl-black-rgb), 0.06); --s-cell-input-border: rgba(var(--wgl-black-rgb), 0.16); /* ── Sidebar active pill — solid brand fill, black text. Yellow-on-black is 13:1 and black-on-yellow is 13.4:1, so on a dark rail the state can be carried by the fill alone. The 3px leading marker bar this replaced is gone. ── */ --s-sidebar-active-bg: var(--wgl-yellow); --s-sidebar-active-color: var(--wgl-black); /* ── Tabs ───────────────────────────────────────────────── */ --s-tabs-border: var(--wgl-line); --s-tabs-border-active: var(--wgl-yellow); --s-tabs-text: var(--wgl-gray); --s-tabs-text-active: var(--wgl-black); /* ── Tool icons ─────────────────────────────────────────── */ --s-tool-icon: var(--wgl-gray); --s-tool-icon-hover: var(--wgl-black); /* ── Chips ──────────────────────────────────────────────── */ --s-chip-bg: rgba(var(--wgl-black-rgb), 0.05); --s-chip-bg-hover: var(--wgl-tint); /* ── Hover surfaces ───────────────────────────────────────── --s-hover-bg neutral, for chrome that isn't navigation --s-nav-hover-bg yellow-tinted, for nav/menu rows — kept low-alpha so a sidebar of 20 items doesn't glow ── */ --s-hover-bg: rgba(var(--wgl-black-rgb), 0.04); --s-nav-hover-bg: rgba(var(--wgl-yellow-rgb), 0.16); --s-scrim: rgba(var(--wgl-black-rgb), 0.35); /* ── Logo ─────────────────────────────────────────────────── Two lockups, picked by how much width the surface has: -img-url wide (2821x615) — expanded sidebar badge -compact-url stacked (647x384) — collapsed band, account panels Both files carry a textured mustard background baked into the pixels (sampled #D7B33A, drifting #CFA82E-#DCB952) — it is not --wgl-yellow, and it cannot be cropped away because the mark is drawn on top of it. The sidebar therefore paints them as sized background-images on a fixed badge rather than letting them span the rail; see sidebar.css. The account panel still paints -compact-url through `content:` on .s-site-logo-img (site.css + overrides.css), which is why that element carries no src attribute. ── */ --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: none; /* The eye alone (215x215), on the same baked mustard field. It is the one lockup that survives being small, so it is what the rail's brand stamp and the collapsed band both paint. */ --s-site-logo-eye-url: url(/Content/site/images/logo/logo_eyet.png); /* ── Dashboard ground veil ────────────────────────────────── The dashboard paints bg.png — the brand's mustard paper — full strength behind its cards (see dashboard.css). On the light theme that field IS the intended surface, so nothing is laid over it. ── */ --s-dash-veil: transparent; /* Dashboard cards let the texture through. This is a translucent FILL, not opacity on the element — opacity would fade the figures, icons and charts with it. At 0.3 the card composites to ~#F2E7C5. Headings and body copy stay at 14:1 or better, but the small semantic text (muted, success, danger) drops just under 4.5:1 — see dashboard.css, which darkens those three for this surface only. */ --s-dash-card-bg: rgba(var(--wgl-white-rgb), 0.3); /* Small semantic text on that warm card. The normal values are tuned for paper and lose ~0.5:1 against #F2E7C5, which drops all three under AA. Same hues, one darkened step. */ --s-dash-muted: var(--wgl-gray-dk); --s-dash-success: var(--wgl-green-dk); --s-dash-danger: var(--wgl-red-dk); /* ── WGL hand-written screens — the paper the shape language sits on legacy-shapes.css used to name --wgl-white / --wgl-black / --wgl-line directly, which pinned the eight WGL screens to paper in BOTH themes. These are the one surface set it consumes instead, so the same file describes a shape in light and in dark without restating itself. Light is the theme those values were written for, so every mapping here is the literal token legacy-shapes.css used to hard-code. ── */ --s-wgl-surface: var(--wgl-white); /* panel, card, input, chip ground */ --s-wgl-surface-2: var(--wgl-paper-2); /* filter band, quiet tag, chip hover */ --s-wgl-sunken: var(--wgl-paper); /* the dashed photo well */ --s-wgl-ink: var(--wgl-black); /* text on that ground */ --s-wgl-ink-dim: var(--wgl-gray); /* field labels, ghost button */ --s-wgl-ink-mute: var(--wgl-gray-lt); /* chip counts, placeholders */ --s-wgl-hairline: var(--wgl-line); /* the 1.5px quiet border */ /* The 2px outline and its hard offset shadow. Black on paper — the single detail the whole legacy look hangs off. */ --s-wgl-edge: var(--wgl-black); --s-wgl-on-edge: var(--wgl-paper); /* text on an --s-wgl-edge fill */ /* ── 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='%23FAFAF8' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); /* --wgl-paper, on the black fill */ /* A wash of brand, used as a FILL behind a row that wants attention without a border: hover states, the due-expense row. */ --s-wgl-tint-bg: var(--wgl-tint); --s-wgl-tint-bg-2: var(--wgl-tint-2); --s-wgl-focus-tint: var(--wgl-tint); /* the 3px focus halo */ /* Semantic foregrounds for text/icons on an --s-wgl-surface. Named separately from --bs-danger etc. because those are FILL colours and these have to stay readable as 9px type. */ --s-wgl-accent-fg: var(--wgl-yellow-deep); /* yellow as text: legal only here */ --s-danger-text: var(--wgl-red); --s-success-text: var(--wgl-green); /* ── Shadows ────────────────────────────────────────────── */ --s-card-shadow: var(--s-shadow-sm); --s-modal-shadow: var(--s-shadow-xl); } /* ── Page background — warm paper, a barely-there yellow lift in the corner so the surface reads as brand-adjacent rather than plain off-white. Kept under 3% alpha; anything stronger tires the eye across a full working day. ── */ .theme-azure-light #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.10) 0%, rgba(var(--wgl-yellow-rgb), 0.03) 38%, rgba(var(--wgl-yellow-rgb), 0) 68%), var(--wgl-paper); overflow: hidden; }