/* ============================================================ ZAK theme → Bootstrap 5 bridge ------------------------------------------------------------ Maps the ZAK tokens in zak-theme.css onto the --bs-* custom properties Sneat and Bootstrap 5.3.5 already read, so existing markup takes on the house look without being rewritten. Follows theme/MERGE-GUIDE.md §2 step 2. TWO RULES, BOTH DELIBERATE. 1. SCOPED, NEVER :root. The guide is explicit that "a reskin that changes everything the moment it loads cannot be tried on one screen", so every mapping below hangs off .zak-theme. A page opts in with @section('body-class', 'zak-theme') and nothing else in the app moves. Putting these on :root would reskin all 589 routes in one commit, which is exactly the change nobody could review. 2. LIGHT ONLY, STILL. Since the Elevation revision the dark palette exists — dusk graphite — but it lives in zak-colours.css, which maps the same --bs-* tokens under :where(html[data-bs-theme="dark"]) .zak-theme. This file stays light-only so no rule here ever has to be taken back, and ZakThemeTest keeps holding every selector to that scope. It stands down by NOT MATCHING, never by undoing. Every selector below begins with :where(html:not([data-bs-theme="dark"])) so in dark mode no rule here applies, nothing is declared on the body, and Sneat's dark tokens on inherit straight through to the page. :where() weighs nothing, so each rule keeps exactly the specificity it had before the scope was added, and light mode does not move. It says not-dark rather than [data-bs-theme="light"] because the customizer can briefly write "system" there, and a page should keep its theme through that rather than drop to Sneat purple. Section 5 explains what the undo version broke. ============================================================ */ /* ------------------------------------------------------------ 1. TOKEN MAP (MERGE-GUIDE.md §2 step 2, "If it is Bootstrap 5") ------------------------------------------------------------ */ :where(html:not([data-bs-theme="dark"])) .zak-theme { --bs-body-bg: var(--paper); --bs-body-color: var(--body); --bs-secondary-bg: var(--paper2); --bs-tertiary-bg: var(--card); --bs-border-color: var(--line); --bs-border-radius: var(--r); --bs-border-radius-sm: var(--r-sm); --bs-border-radius-lg: var(--r-lg); --bs-border-radius-xl: var(--r-lg); --bs-border-radius-pill: var(--r-pill); /* One typeface, ABC Normal, at the kit's body size (13.5px, 1.5). Sneat names Public Sans in --bs-font-sans-serif; nothing else may be named. */ --bs-font-sans-serif: var(--font); --bs-body-font-family: var(--font); --bs-body-font-size: var(--size-md); --bs-body-line-height: var(--lh); /* The filled button is the ACCENT, Deep Orange with white Bold words (App\Support\Accent holds the house name). Red is danger only. */ --bs-primary: var(--accent); --bs-danger: var(--red); --bs-success: var(--green); --bs-warning: var(--amber); /* Small text needs 4.5:1, and the kit's good and warn fills are 3.6-3.8 as words on the page, so text uses the status tones' values and fills keep the fill colour (zak-theme.css, 1). */ --bs-danger-text-emphasis: var(--red-text); --bs-success-text-emphasis: var(--green-text); --bs-warning-text-emphasis: var(--amber-text); /* Info is the status tones' blue; secondary is muted. The charts read these tokens directly. */ --bs-info: var(--blue); /* --bs-secondary does double duty: Sneat fills with it AND inherits text from it, and one value cannot be both. --muted works as a fill (ink on it is 4.51) but not as text (3.56 on card). The darkened value works as text (5.05) and as a fill if the label is paper rather than ink (4.84). So: darkened here, and the fills below flip their text to paper. */ --bs-secondary: var(--zak-muted-text); /* Bootstrap's inline is #e83e8c pink. There is no pink in this palette, and code on these screens is route names in a permissions table. */ --bs-code-color: var(--accent-text); /* -------------------------------------------------------------------- Bootstrap's .bg-*, .text-bg-* and .border-* utilities do NOT read the hex tokens above — they read RGBA(var(--bs-success-rgb), …). Mapping only the hex leaves every `.bg-success` / `.badge.bg-secondary` on Sneat's palette, which is why the dashboard looked done and the events list did not: the dashboard used .bg-label-* (handled below) and never a plain .bg-*. Triplets, therefore, alongside every hex. -------------------------------------------------------------------- */ --bs-primary-rgb: var(--accent-rgb); --bs-danger-rgb: 192, 57, 43; /* danger #c0392b */ --bs-success-rgb: 47, 143, 91; /* good #2f8f5b */ --bs-warning-rgb: 181, 106, 0; /* warn #b56a00 */ --bs-info-rgb: 31, 95, 184; /* info #1f5fb8 */ /* Must track --bs-secondary above, which is the DARKENED muted. Left on the lighter #8a7f6b these disagreed, and anything reading the triplet — Sneat's .btn-text-secondary, for one — still rendered 3.56 text while the hex said otherwise. A token and its own rgb form are one value in two notations. */ --bs-secondary-rgb: 115, 108, 98; /* zak-muted-text #736c62 */ --bs-body-color-rgb: 58, 54, 48; /* Graphite #3a3630 */ --bs-body-bg-rgb: 246, 242, 236; /* Warm Chalk #f6f2ec */ /* Sneat paints the page shell from its own --bs-paper-bg, not --bs-body-bg. */ --bs-paper-bg: var(--paper); /* Sneat's form-control token. Quill reads it for the editor chrome, and so do the inputs — found by tracing quill's own border rule rather than guessed. */ --bs-input-border-color: var(--line); /* Bootstrap 5.3's subtle families. Widely read by things that never mention a colour directly — flatpickr's "today" is `var(--bs-primary-bg-subtle)`, and unmapped it stayed a purple wash behind a gold border. This is the third time the answer was "map the token", not "write a longer selector": a rule at (0,4,0) beats any reasonable scoped override, and should. */ --bs-primary-bg-subtle: var(--accent-soft); --bs-secondary-bg-subtle: var(--line2); --bs-success-bg-subtle: var(--green-soft); --bs-danger-bg-subtle: var(--red-soft); --bs-warning-bg-subtle: var(--amber-soft); --bs-info-bg-subtle: var(--blue-soft); --bs-primary-border-subtle: var(--brand); --bs-secondary-border-subtle: var(--line); --bs-success-border-subtle: rgba(47, 143, 91, .35); --bs-danger-border-subtle: rgba(192, 57, 43, .35); --bs-warning-border-subtle: rgba(181, 106, 0, .35); --bs-info-border-subtle: rgba(31, 95, 184, .35); --bs-primary-text-emphasis: var(--accent-text); --bs-secondary-text-emphasis: var(--zak-muted-text); --bs-info-text-emphasis: var(--blue-text); /* .text-bg-* picks the text colour from --bs-*-contrast: white on every text-bearing fill, each fill a text value (3b). */ --bs-primary-contrast: var(--on-accent); --bs-success-contrast: var(--on-bar); --bs-danger-contrast: var(--on-bar); --bs-warning-contrast: var(--on-bar); --bs-info-contrast: var(--on-bar); --bs-secondary-contrast: var(--on-bar); /* The kit ships darkened pairs for red/green/amber/gold because the brand values fail small text — but not for muted, and --bs-secondary-color is the token behind every .text-body-secondary on the page. Measured on both surfaces this theme actually uses: muted #8a7f6b card 3.56 paper 3.22 FAIL darkened #6f6757 card 5.05 paper 4.57 ok So the bridge defines the missing pair rather than shipping 3.5:1 body text. Since 27-Oct-2026 it is the Zak ONE kit's muted, #736c62: 5.18 on a card, 4.65 on the page. */ --zak-muted-text: #736c62; /* The kit's --gold-text does not meet its own promise. Measured on both surfaces this theme uses: --gold-text #a37b31 on the old paper 3.16 FAIL darkened #80611b white card 5.6 ok The kit has no gold; since 27-Oct-2026 the name carries warn's text value, which the rules below read for the old "info" uses that were gold. */ --zak-gold-text: #8a5300; --bs-secondary-color: var(--zak-muted-text); --bs-heading-color: var(--ink); --bs-link-color: var(--accent-text); --bs-link-hover-color: var(--accent-strong); --bs-link-color-rgb: var(--accent-text-rgb); --bs-link-hover-color-rgb: 166, 60, 21; --bs-focus-ring-color: rgba(217, 83, 31, .45); /* Sneat styles `a` from its own --bs-custom-link-color, not --bs-link-color. Left unmapped it kept 205 elements on Sneat purple — mostly invisible (anchors with no text, images whose border defaults to currentColor), but it is the token every real link reads too. */ --bs-custom-link-color: var(--accent-text); /* The classic dashboard's Tailwind palette (ink-* was a cool green-grey and zwof-* a teal): the kit's warm neutrals and the brand's orange. Production cannot rebuild the Tailwind sheet, so the colours change here, through the variables it already reads. */ --tw-color-white: var(--card); --tw-color-ink-50: #f6f2ec; --tw-color-ink-100: #efeae3; --tw-color-ink-200: #e6e1db; --tw-color-ink-300: #d2cbc0; --tw-color-ink-400: #a7a094; --tw-color-ink-500: #736c62; --tw-color-ink-600: #5e574e; --tw-color-ink-700: #3a3630; --tw-color-ink-800: #282622; --tw-color-ink-900: #141414; --tw-color-zwof-50: #fcf1ed; --tw-color-zwof-100: #f9e5dd; --tw-color-zwof-200: #f4c9b6; --tw-color-zwof-300: #f0834f; --tw-color-zwof-400: #e06a36; --tw-color-zwof-500: #d9531f; --tw-color-zwof-600: #c1471a; --tw-color-zwof-700: #a63c15; --tw-color-zwof-800: #7a2c10; background-color: var(--paper); color: var(--body); font-family: var(--font); } /* ------------------------------------------------------------ 2. SURFACES The kit's card: Paper White on the chalk page, a 1px line, 16px corners and a soft neutral shadow (27-Oct-2026). A modal and a sheet are cards too. ------------------------------------------------------------ */ :where(html:not([data-bs-theme="dark"])) .zak-theme .card, :where(html:not([data-bs-theme="dark"])) .zak-theme .modal-content, :where(html:not([data-bs-theme="dark"])) .zak-theme .dropdown-menu, :where(html:not([data-bs-theme="dark"])) .zak-theme .offcanvas { background-color: var(--card); border: 1px solid var(--card-edge); box-shadow: var(--shadow); } :where(html:not([data-bs-theme="dark"])) .zak-theme .card { --bs-card-border-radius: var(--r-card); --bs-card-inner-border-radius: calc(var(--r-card) - 1px); --bs-card-border-color: var(--card-edge); } :where(html:not([data-bs-theme="dark"])) .zak-theme .modal { --bs-modal-border-radius: var(--r-card); --bs-modal-inner-border-radius: calc(var(--r-card) - 1px); --bs-backdrop-bg: #141414; --bs-backdrop-opacity: .45; } :where(html:not([data-bs-theme="dark"])) .zak-theme .modal-content { box-shadow: 0 18px 50px rgba(20, 20, 20, .22); } :where(html:not([data-bs-theme="dark"])) .zak-theme .dropdown-menu { --bs-dropdown-border-radius: var(--r); } :where(html:not([data-bs-theme="dark"])) .zak-theme .card-header { background-color: transparent; border-bottom: 1px solid var(--line2); } :where(html:not([data-bs-theme="dark"])) .zak-theme .table { --bs-table-bg: transparent; --bs-table-color: var(--ink); /* Bootstrap's own is --bs-gray-200, a cool grey that reads purple at dusk. */ --bs-table-border-color: var(--line); --bs-table-hover-bg: var(--paper2); } :where(html:not([data-bs-theme="dark"])) .zak-theme .table > :not(caption) > * > * { border-bottom-color: var(--line); } :where(html:not([data-bs-theme="dark"])) .zak-theme .table > thead th { /* The kit's table header: 10px capitals, Bold, muted, +0.05em. */ color: var(--zak-muted-text); font-size: var(--size-th); font-weight: var(--w-strong); letter-spacing: var(--track-th); text-transform: uppercase; border-bottom-color: var(--line); } /* ------------------------------------------------------------ 3. CONTROLS ------------------------------------------------------------ */ /* No button casts a shadow: depth is a rule, not a blur. Core declares --bs-btn-box-shadow on .btn itself (a 0 .125rem .25rem drop in the button's own colour, so a charcoal smudge under every primary and a red glow under every destructive one), out of the token map's reach, so it is re-declared on .btn. The delegate pages' buttons and z-btn never had one. */ :where(html:not([data-bs-theme="dark"])) .zak-theme .btn { --bs-btn-box-shadow: none; --bs-btn-focus-box-shadow: none; --bs-btn-border-radius: var(--r-btn); --bs-btn-font-weight: var(--w-strong); } :where(html:not([data-bs-theme="dark"])) .zak-theme .btn-sm { --bs-btn-border-radius: var(--r-sm); } :where(html:not([data-bs-theme="dark"])) .zak-theme .btn-lg { --bs-btn-border-radius: var(--r-btn); } /* Two sizes, btn and btn-sm. Sneat's btn-xs (10px words on 2px corners, in sixteen views) draws as btn-sm: core's btn-sm values, so no view has to change. */ :where(html:not([data-bs-theme="dark"])) .zak-theme .btn-xs { --bs-btn-padding-y: .317rem; --bs-btn-padding-x: .75rem; --bs-btn-font-size: .8125rem; --bs-btn-border-radius: var(--bs-border-radius-sm); } /* A button is a box, never a pill: rounded-pill on a .btn (Marketing's list and edit page, the event cards' menu) takes the button's own corner. The utility is !important, so this is too. */ :where(html:not([data-bs-theme="dark"])) .zak-theme .btn.rounded-pill { border-radius: var(--bs-btn-border-radius) !important; } :where(html:not([data-bs-theme="dark"])) .zak-theme .btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-color: var(--on-accent); --bs-btn-hover-bg: var(--accent-strong); --bs-btn-hover-border-color: var(--accent-strong); --bs-btn-hover-color: var(--on-accent); } /* Destructive is one look: outlined, never filled at rest ("a red block invites the click it is warning about"), Deep Red words in a Signal Red line, Deep Red fill under the pointer and when pressed. btn-outline-danger drew Signal Red words (4.2:1 on the card, under AA) and btn-label-danger a fainter ring; since 2026-10-19 the three are this one rule. The group border is the line's colour, or a btn-group draws its inner edges in core's darkened red. */ :where(html:not([data-bs-theme="dark"])) .zak-theme .btn-danger, :where(html:not([data-bs-theme="dark"])) .zak-theme .btn-outline-danger, :where(html:not([data-bs-theme="dark"])) .zak-theme .btn-label-danger { --bs-btn-bg: transparent; --bs-btn-color: var(--red-text); --bs-btn-border-color: var(--red); --bs-btn-hover-bg: var(--red-text); --bs-btn-hover-color: var(--on-bar); --bs-btn-hover-border-color: var(--red-text); --bs-btn-active-bg: var(--red-deep); --bs-btn-active-color: var(--on-bar); --bs-btn-active-border-color: var(--red-deep); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-color: var(--red-text); --bs-btn-disabled-border-color: var(--red); --bs-btn-group-border-color: var(--red); } /* Solid buttons are the badge problem again: small text on a fill. White on the kit's good #2f8f5b is 4.04, so each fill is its text value, with white on it: 5.39 green, 6.33 amber, 5.18 muted, 6.20 blue (see 3b). */ :where(html:not([data-bs-theme="dark"])) .zak-theme .btn-success { --bs-btn-bg: var(--green-text); --bs-btn-border-color: var(--green-text); --bs-btn-color: var(--on-bar); --bs-btn-hover-bg: #15632f; --bs-btn-hover-border-color: #15632f; --bs-btn-hover-color: var(--on-bar); } :where(html:not([data-bs-theme="dark"])) .zak-theme .btn-warning { --bs-btn-bg: var(--amber-text); --bs-btn-border-color: var(--amber-text); --bs-btn-color: var(--on-bar); --bs-btn-hover-bg: #6f4300; --bs-btn-hover-border-color: #6f4300; --bs-btn-hover-color: var(--on-bar); } :where(html:not([data-bs-theme="dark"])) .zak-theme .btn-secondary { --bs-btn-bg: var(--zak-muted-text); --bs-btn-border-color: var(--zak-muted-text); --bs-btn-color: var(--on-bar); --bs-btn-hover-bg: #5e574e; --bs-btn-hover-border-color: #5e574e; --bs-btn-hover-color: var(--on-bar); } :where(html:not([data-bs-theme="dark"])) .zak-theme .btn-info { --bs-btn-bg: var(--blue); --bs-btn-border-color: var(--blue); --bs-btn-color: var(--on-bar); --bs-btn-hover-bg: #184c93; --bs-btn-hover-border-color: #184c93; --bs-btn-hover-color: var(--on-bar); } /* Secondary is one look, the kit's secondary button (27-Oct-2026): transparent, muted words (5.18 on a card, 4.65 on the page) in a 1px line; under the pointer the words go to ink and the edge to muted. Until then it was the Line box, ink words on the card. Selected (.active, a checked btn-check, a press) is the accent fill, as a picked segment is everywhere else (z-tab.is-on, the Events page's layout switch). */ :where(html:not([data-bs-theme="dark"])) .zak-theme .btn-outline-secondary, :where(html:not([data-bs-theme="dark"])) .zak-theme .btn-label-secondary, :where(html:not([data-bs-theme="dark"])) .zak-theme .btn-label-primary { --bs-btn-bg: transparent; --bs-btn-color: var(--zak-muted-text); --bs-btn-border-color: var(--line); --bs-btn-hover-bg: transparent; --bs-btn-hover-color: var(--ink); --bs-btn-hover-border-color: var(--zak-muted-text); --bs-btn-active-bg: var(--accent); --bs-btn-active-color: var(--on-accent); --bs-btn-active-border-color: var(--accent); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-color: var(--zak-muted-text); --bs-btn-disabled-border-color: var(--line); --bs-btn-group-border-color: var(--line); } /* In a btn-group or an input-group core draws a button's two side edges from --bs-btn-group-border-color, and makes the outer side edge of a non-outline button transparent, since a fill needs no edge there. A Line box does: without this, "Invoices" at the end of the payment documents' switcher had no right edge. The side edges follow the button's state, so a picked segment is one accent block, not an accent block with Line-coloured sides. */ :where(html:not([data-bs-theme="dark"])) .zak-theme :is(.btn-outline-secondary, .btn-label-secondary, .btn-label-primary):hover { --bs-btn-group-border-color: var(--zak-muted-text); } :where(html:not([data-bs-theme="dark"])) .zak-theme :is(.btn-outline-secondary, .btn-label-secondary, .btn-label-primary):is(.active, :active), :where(html:not([data-bs-theme="dark"])) .zak-theme .btn-check:checked + :is(.btn-outline-secondary, .btn-label-secondary, .btn-label-primary) { --bs-btn-group-border-color: var(--accent); } :where(html:not([data-bs-theme="dark"])) .zak-theme :is(.btn-group, .input-group) > :is(.btn-outline-secondary, .btn-label-secondary, .btn-label-primary) { border-inline-color: var(--bs-btn-group-border-color) !important; } :where(html:not([data-bs-theme="dark"])) .zak-theme .btn-label-success { --bs-btn-bg: var(--green-soft); --bs-btn-color: var(--green-text); --bs-btn-border-color: transparent; } :where(html:not([data-bs-theme="dark"])) .zak-theme .btn-label-warning { --bs-btn-bg: var(--amber-soft); --bs-btn-color: var(--amber-text); --bs-btn-border-color: transparent; } :where(html:not([data-bs-theme="dark"])) .zak-theme .btn-label-info { --bs-btn-bg: var(--blue-soft); --bs-btn-color: var(--blue-text); --bs-btn-border-color: transparent; } /* The active pill's text. .nav-pills declares its own --bs-nav-pills-link-active-color: var(--bs-white), out of the token map's reach. White is right here, but dusk needs the contrast token (zak-colours.css), so the pill names it in both themes. */ :where(html:not([data-bs-theme="dark"])) .zak-theme .nav-pills { --bs-nav-pills-link-active-color: var(--bs-primary-contrast); } /* The active dropdown item and list-group item, out of the map's reach the same way: .dropdown-menu declares --bs-dropdown-link-active-color: var(--bs-primary) on a rgba(--bs-primary-rgb, .16) wash, and .list-group --bs-list-group-active-color: var(--bs-primary) on --bs-primary-bg-subtle. That is the accent FILL used as text on its own tint: 3.88 on teal, 4.05 on violet, 4.13 on blue for the dropdown; 4.11-4.40 for the list group. The navbar's theme and language menus are frosted, so the wash came out lighter there: 3.63-4.39, sky failing too. Text on a tint is --accent-text, 7.3+ on --accent-soft. The tint is opaque, so the pair holds on any menu, .dropdown-menu-dark included. .list-group-item-primary and its siblings declare their own active pair on the item, so this leaves them alone. */ :where(html:not([data-bs-theme="dark"])) .zak-theme .dropdown-menu { --bs-dropdown-link-active-color: var(--accent-text); --bs-dropdown-link-active-bg: var(--accent-soft); } :where(html:not([data-bs-theme="dark"])) .zak-theme .list-group { --bs-list-group-active-color: var(--accent-text); --bs-list-group-active-bg: var(--accent-soft); } /* The kit's input: Paper White, a 1px line, 9px corners; focus is the brand ring. */ :where(html:not([data-bs-theme="dark"])) .zak-theme .form-control, :where(html:not([data-bs-theme="dark"])) .zak-theme .form-select { background-color: var(--card); border-color: var(--line); color: var(--ink); border-radius: var(--r-input); } :where(html:not([data-bs-theme="dark"])) .zak-theme .form-control:focus, :where(html:not([data-bs-theme="dark"])) .zak-theme .form-select:focus { border-color: var(--brand); box-shadow: none; } /* Sneat's soft label badges, as the kit's status pills: each tone's soft fill with its own text (27-Oct-2026). Measured as 10px words: brand 4.53 (the tint is lighter than the kit's #f9e5dd, which is 4.13), green 4.68, red 5.59, amber 5.56, blue 5.25, grey 5.95. Not badge-only: .avatar-initial, .btn and bare spans all take .bg-label-*, so the selectors match any element. */ :where(html:not([data-bs-theme="dark"])) .zak-theme .bg-label-primary { background-color: var(--accent-soft) !important; color: var(--accent-text) !important; } :where(html:not([data-bs-theme="dark"])) .zak-theme .bg-label-success { background-color: var(--green-soft) !important; color: var(--green-text) !important; } :where(html:not([data-bs-theme="dark"])) .zak-theme .bg-label-danger { background-color: var(--red-soft) !important; color: var(--red-text) !important; } :where(html:not([data-bs-theme="dark"])) .zak-theme .bg-label-warning { background-color: var(--amber-soft) !important; color: var(--amber-text) !important; } :where(html:not([data-bs-theme="dark"])) .zak-theme .bg-label-info { background-color: var(--blue-soft) !important; color: var(--blue-text) !important; } :where(html:not([data-bs-theme="dark"])) .zak-theme .bg-label-secondary, :where(html:not([data-bs-theme="dark"])) .zak-theme .bg-label-dark { background-color: var(--gray-soft) !important; color: var(--gray-text) !important; } :where(html:not([data-bs-theme="dark"])) .zak-theme .progress { background-color: var(--line2); --bs-progress-bar-bg: var(--brand); --bs-progress-border-radius: var(--r-pill); } /* ------------------------------------------------------------ 3b. SOLID BADGES, MEASURED A .badge is small text on a filled surface, so it needs 4.5:1 — and the brand colours do not reach it. Measured in the browser against this theme's own tokens rather than estimated: on-bar on green 3.75 FAIL on-bar on green-text 4.91 ok on-bar on red 4.05 FAIL on-bar on red-text 4.96 ok on-bar on amber 3.34 FAIL on-bar on amber-text 5.00 ok on-bar on muted 3.41 FAIL INK on muted 4.51 ok ink on gold 7.90 ok Which is exactly what the theme says about itself: fills keep the brand colour, text uses the darkened pair. A badge is both at once, so it takes the darkened value as its FILL and pays for it in saturation, not legibility. Sneat also hardcodes #fff on these, which is the no-pure-white rule broken as well as the contrast one — hence the explicit colour on every line. ------------------------------------------------------------ */ /* Sneat sets color:#fff on .badge itself — rule 1 of this theme is no pure white, so it becomes paper. Wrapped in :where() so it weighs (0,1,0) and loses to any page-level rule like `.badge.ev-count-attendee` at (0,2,0). The first attempt was a plain `.zak-theme .badge` at (0,2,0), which — because the bridge loads after @yield('page-style') — silently out-ranked classes a screen had deliberately set and repainted their text. A theme must not win arguments it was not having. */ :where(html:not([data-bs-theme="dark"])) :where(.zak-theme) .badge { color: var(--on-bar); } :where(html:not([data-bs-theme="dark"])) .zak-theme .badge.bg-success { background-color: var(--green-text) !important; color: var(--on-bar) !important; } :where(html:not([data-bs-theme="dark"])) .zak-theme .badge.bg-danger { background-color: var(--red-text) !important; color: var(--on-bar) !important; } :where(html:not([data-bs-theme="dark"])) .zak-theme .badge.bg-warning { background-color: var(--amber-text) !important; color: var(--on-bar) !important; } :where(html:not([data-bs-theme="dark"])) .zak-theme .badge.bg-primary { background-color: var(--accent) !important; color: var(--on-accent) !important; } :where(html:not([data-bs-theme="dark"])) .zak-theme .badge.bg-dark { background-color: var(--ink) !important; color: var(--on-bar) !important; } :where(html:not([data-bs-theme="dark"])) .zak-theme .badge.bg-secondary { background-color: var(--zak-muted-text) !important; color: var(--on-bar) !important; } :where(html:not([data-bs-theme="dark"])) .zak-theme .badge.bg-info { background-color: var(--blue) !important; color: var(--on-bar) !important; } /* core's .text-bg-* hardcodes #fff !important. White read fine on the old glazings, but the house accent is ink with cream on it since 2026-10-09, and there is no pure white on these screens: each pair is the badge's above. */ :where(html:not([data-bs-theme="dark"])) .zak-theme .text-bg-primary { background-color: var(--accent) !important; color: var(--on-accent) !important; } :where(html:not([data-bs-theme="dark"])) .zak-theme .text-bg-success { background-color: var(--green-text) !important; color: var(--on-bar) !important; } :where(html:not([data-bs-theme="dark"])) .zak-theme .text-bg-danger { background-color: var(--red-text) !important; color: var(--on-bar) !important; } :where(html:not([data-bs-theme="dark"])) .zak-theme .text-bg-warning { background-color: var(--amber-text) !important; color: var(--on-bar) !important; } :where(html:not([data-bs-theme="dark"])) .zak-theme .text-bg-secondary { background-color: var(--zak-muted-text) !important; color: var(--on-bar) !important; } :where(html:not([data-bs-theme="dark"])) .zak-theme .text-bg-dark { background-color: var(--ink) !important; color: var(--on-bar) !important; } :where(html:not([data-bs-theme="dark"])) .zak-theme .text-bg-info { background-color: var(--blue) !important; color: var(--on-bar) !important; } /* ------------------------------------------------------------ 4. THE WHITE LEAK (MERGE-GUIDE.md §2 step 4, first item) Pure white arrives from places that do not read tokens: the page shell, the content wrapper, alerts, and any widget that hardcodes #fff. Named here rather than chased one at a time. ------------------------------------------------------------ */ :where(html:not([data-bs-theme="dark"])) .zak-theme .content-wrapper, :where(html:not([data-bs-theme="dark"])) .zak-theme .container-xxl, :where(html:not([data-bs-theme="dark"])) .zak-theme .layout-page, :where(html:not([data-bs-theme="dark"])) .zak-theme .alert { background-color: transparent; } :where(html:not([data-bs-theme="dark"])) .zak-theme .alert { border: 1px solid var(--line); } /* Sneat colours alert text with the FULL brand value rather than the darkened one, which is 3.48 for the amber case. Same rule as everywhere else in this file: fills keep the brand colour, text uses the darkened pair. */ :where(html:not([data-bs-theme="dark"])) .zak-theme .alert { border-radius: var(--r-tile); } :where(html:not([data-bs-theme="dark"])) .zak-theme .alert-warning { color: var(--amber-text); border-color: rgba(181,106,0,.35); background-color: var(--amber-soft); } :where(html:not([data-bs-theme="dark"])) .zak-theme .alert-danger { color: var(--red-text); border-color: rgba(192,57,43,.35); background-color: var(--red-soft); } :where(html:not([data-bs-theme="dark"])) .zak-theme .alert-success { color: var(--green-text); border-color: rgba(47,143,91,.35); background-color: var(--green-soft); } :where(html:not([data-bs-theme="dark"])) .zak-theme .alert-info { color: var(--blue-text); border-color: rgba(31,95,184,.3); background-color: var(--blue-soft); } :where(html:not([data-bs-theme="dark"])) .zak-theme .alert-primary, :where(html:not([data-bs-theme="dark"])) .zak-theme .alert-secondary { color: var(--ink); border-color: var(--line); } /* The chat empty state is a hardcoded Sneat grey, 2.3 on paper. */ :where(html:not([data-bs-theme="dark"])) .zak-theme .chat-empty, :where(html:not([data-bs-theme="dark"])) .zak-theme .chat-empty * { color: var(--zak-muted-text); } /* ------------------------------------------------------------ 4b. THE SHELL The navbar and the sidebar are painted by Sneat's own bg-navbar-theme / menu classes, which hardcode white rather than reading a token. They sit inside .zak-theme but do not inherit from it, so they are named here — this is the "pure white leaks in" item again, at page-shell scale. ------------------------------------------------------------ */ /* The top bar is Ink, in both themes (the kit). Its own words and icons are set on it in layouts/sections/navbar/navbar-partial. */ :where(html:not([data-bs-theme="dark"])) .zak-theme .layout-navbar.bg-navbar-theme { background-color: var(--bar) !important; border-color: var(--bar); box-shadow: var(--shadow); } :where(html:not([data-bs-theme="dark"])) .zak-theme .layout-navbar.navbar-detached { box-shadow: var(--shadow); } /* The sidebar is Ink, in both themes (the Zak ONE kit, 27-Oct-2026). It carries the white ZAK mark and the product name, white links, Ash headings, and the active row as a Deep Orange block with white words on it (5.02:1), with the Burnt Orange marker at its edge. Dusk says the same in zak-colours.css. The menu is driven entirely by --bs-menu-* tokens, so it is mapped rather than overridden. The first attempt wrote `.zak-theme .menu-inner .menu-item.active > .menu-link` and lost anyway: Sneat's own rule is `.menu-vertical .menu-inner > .menu-item.active > .menu-link:not(.menu-toggle)` at higher specificity, reading var(--bs-menu-active-bg). Mapping the token wins without a specificity war. The tokens sit on .layout-menu itself, not on .zak-theme: the sidebar is the only Ink surface beside the top bar, and a dropdown or list elsewhere that reads --bs-menu-* must keep the paper's pair. Measured: white on Ink 18.4:1, Ash headings 7.1:1, white on the Deep Orange row 5.02:1. */ :where(html:not([data-bs-theme="dark"])) .zak-theme .layout-menu, :where(html:not([data-bs-theme="dark"])) .zak-theme .menu-vertical, :where(html:not([data-bs-theme="dark"])) .zak-theme .bg-menu-theme { /* An active sub-item is drawn in --bs-heading-color: charcoal, on charcoal. */ --bs-heading-color: var(--on-bar); background-color: var(--bar) !important; border-color: var(--bar); color: var(--on-bar); --bs-menu-color: var(--on-bar); --bs-menu-hover-color: var(--on-bar); --bs-menu-hover-bg: rgba(255, 255, 255, .08); --bs-menu-active-color: var(--on-accent); --bs-menu-active-bg: var(--accent); /* The open submenu parent reads its own pair. Core declares the row's on as var(--bs-primary-bg-subtle), where it resolves to the hidden template customizer's colour (Sneat lavender, or a saved primaryColor cookie). */ --bs-menu-sub-active-color: var(--on-bar); --bs-menu-sub-active-bg: rgba(255, 255, 255, .1); --bs-menu-bg: var(--bar); --bs-menu-divider-color: rgba(255, 255, 255, .12); } /* Everything else that reads the menu's tokens (dropdowns, the All pages list) keeps the paper's pair. */ :where(html:not([data-bs-theme="dark"])) .zak-theme { --bs-menu-color: var(--ink); --bs-menu-hover-color: var(--ink); --bs-menu-hover-bg: var(--line2); --bs-menu-active-color: var(--accent-text); --bs-menu-sub-active-color: var(--accent-text); --bs-menu-sub-active-bg: var(--accent-soft); --bs-menu-active-bg: var(--accent-soft); --bs-menu-bg: var(--card); } :where(html:not([data-bs-theme="dark"])) .zak-theme .menu-header, :where(html:not([data-bs-theme="dark"])) .zak-theme .menu-header-text { color: var(--zak-muted-text); } :where(html:not([data-bs-theme="dark"])) .zak-theme .layout-menu .menu-header, :where(html:not([data-bs-theme="dark"])) .zak-theme .layout-menu .menu-header-text { color: var(--bar-muted); font-weight: var(--w-label); letter-spacing: var(--track); } :where(html:not([data-bs-theme="dark"])) .zak-theme .menu-icon { color: currentColor; } :where(html:not([data-bs-theme="dark"])) .zak-theme .layout-menu .menu-inner-shadow { background: linear-gradient(var(--bar) 41%, rgba(20, 20, 20, .11) 95%, transparent); } /* ------------------------------------------------------------ 6. THIRD-PARTY WIDGETS The merge guide's third warning: "Third party widgets do not read your tokens… list them before starting rather than discovering them one at a time." docs/ZAK-THEME.md holds that list; this is where they get handled. All of these portal their markup onto , and .zak-theme is ON the body, so the scoping still holds — a widget opened from an unconverted screen is untouched. ------------------------------------------------------------ */ /* --- DataTables (28 screens, the big one) -------------------------------- */ :where(html:not([data-bs-theme="dark"])) .zak-theme .dataTables_wrapper .dataTables_length select, :where(html:not([data-bs-theme="dark"])) .zak-theme .dataTables_wrapper .dataTables_filter input, :where(html:not([data-bs-theme="dark"])) .zak-theme div.dt-container .dt-input, :where(html:not([data-bs-theme="dark"])) .zak-theme div.dt-container .dt-search input { background-color: var(--paper2); border-color: var(--line); color: var(--ink); } :where(html:not([data-bs-theme="dark"])) .zak-theme .dataTables_wrapper .dataTables_info, :where(html:not([data-bs-theme="dark"])) .zak-theme .dataTables_wrapper .dataTables_length, :where(html:not([data-bs-theme="dark"])) .zak-theme .dataTables_wrapper .dataTables_filter, :where(html:not([data-bs-theme="dark"])) .zak-theme div.dt-container .dt-info { color: var(--zak-muted-text); } :where(html:not([data-bs-theme="dark"])) .zak-theme table.dataTable { border-color: var(--line2); } :where(html:not([data-bs-theme="dark"])) .zak-theme table.dataTable > thead > tr > th { border-bottom-color: var(--line); color: var(--zak-muted-text); } :where(html:not([data-bs-theme="dark"])) .zak-theme table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: var(--paper2); box-shadow: inset 0 0 0 9999px var(--paper2); } :where(html:not([data-bs-theme="dark"])) .zak-theme table.dataTable > tbody > tr:hover > * { box-shadow: inset 0 0 0 9999px var(--line2); } /* Pagination runs through Bootstrap's .page-link, so it follows --bs-* — except the active page, which Sneat fills with its own primary. */ :where(html:not([data-bs-theme="dark"])) .zak-theme .pagination .page-link { color: var(--ink); background-color: transparent; border-color: var(--line); } :where(html:not([data-bs-theme="dark"])) .zak-theme .pagination .page-item.active .page-link { background-color: var(--accent); border-color: var(--accent); color: var(--on-accent); } :where(html:not([data-bs-theme="dark"])) .zak-theme .pagination .page-item.disabled .page-link { color: var(--zak-muted-text); } :where(html:not([data-bs-theme="dark"])) .zak-theme .pagination .page-link:hover { background-color: var(--line2); color: var(--ink); } /* The responsive extension's expand control and child rows. */ :where(html:not([data-bs-theme="dark"])) .zak-theme table.dtr-column > tbody > tr > td.control:before, :where(html:not([data-bs-theme="dark"])) .zak-theme table.dtr-inline.collapsed > tbody > tr > td:first-child:before { background-color: var(--accent); color: var(--on-accent); border-color: var(--accent); } :where(html:not([data-bs-theme="dark"])) .zak-theme table.dataTable > tbody > tr.child ul.dtr-details > li { border-bottom-color: var(--line2); } :where(html:not([data-bs-theme="dark"])) .zak-theme .dtr-title { color: var(--zak-muted-text); } /* --- bootstrap-select (6 screens) --------------------------------------- */ :where(html:not([data-bs-theme="dark"])) .zak-theme .bootstrap-select > .dropdown-toggle { background-color: var(--paper2); border-color: var(--line); color: var(--ink); } :where(html:not([data-bs-theme="dark"])) .zak-theme .bootstrap-select .dropdown-menu { background-color: var(--card); border-color: var(--line); } :where(html:not([data-bs-theme="dark"])) .zak-theme .bootstrap-select .dropdown-item.active, :where(html:not([data-bs-theme="dark"])) .zak-theme .bootstrap-select .dropdown-item:active { background-color: var(--accent); color: var(--on-accent); } /* --- sweetalert2 (29 screens) ------------------------------------------- */ :where(html:not([data-bs-theme="dark"])) .zak-theme .swal2-popup { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); } :where(html:not([data-bs-theme="dark"])) .zak-theme .swal2-title { color: var(--ink); } :where(html:not([data-bs-theme="dark"])) .zak-theme .swal2-html-container { color: var(--zak-muted-text); } :where(html:not([data-bs-theme="dark"])) .zak-theme .swal2-actions { gap: var(--s2); } /* The icons, the loader and the error marks: one block, word for word the same in both bridges, each state from its --bs-* text token so the colours follow the theme. Anchored on the container and the popup, because Sneat's sweetalert2.scss colours the icons from .swal2-container .swal2-popup and beats anything lighter: until 2026-10-19 the rules here lost to it, and the error cross, which nothing set, kept the library's salmon #f27474. Info and question are neutral, as on delegate pages. */ :where(html:not([data-bs-theme="dark"])) .zak-theme .swal2-container .swal2-popup .swal2-icon.swal2-success { border-color: var(--bs-success-text-emphasis); color: var(--bs-success-text-emphasis); } :where(html:not([data-bs-theme="dark"])) .zak-theme .swal2-container .swal2-popup .swal2-icon.swal2-success .swal2-success-ring { border-color: var(--bs-success-text-emphasis); } :where(html:not([data-bs-theme="dark"])) .zak-theme .swal2-container .swal2-popup .swal2-icon.swal2-success [class^=swal2-success-line] { background-color: var(--bs-success-text-emphasis); } :where(html:not([data-bs-theme="dark"])) .zak-theme .swal2-container .swal2-popup .swal2-icon.swal2-error { border-color: var(--bs-danger-text-emphasis); color: var(--bs-danger-text-emphasis); } :where(html:not([data-bs-theme="dark"])) .zak-theme .swal2-container .swal2-popup .swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: var(--bs-danger-text-emphasis); } :where(html:not([data-bs-theme="dark"])) .zak-theme .swal2-container .swal2-popup .swal2-icon.swal2-warning { border-color: var(--bs-warning-text-emphasis); color: var(--bs-warning-text-emphasis); } :where(html:not([data-bs-theme="dark"])) .zak-theme .swal2-container .swal2-popup .swal2-icon.swal2-info, :where(html:not([data-bs-theme="dark"])) .zak-theme .swal2-container .swal2-popup .swal2-icon.swal2-question { border-color: var(--bs-secondary-color); color: var(--bs-secondary-color); } :where(html:not([data-bs-theme="dark"])) .zak-theme .swal2-container .swal2-loader { border-color: var(--bs-body-color) transparent var(--bs-body-color) transparent; } :where(html:not([data-bs-theme="dark"])) .zak-theme .swal2-container .swal2-timer-progress-bar { background: var(--bs-border-color); } :where(html:not([data-bs-theme="dark"])) .zak-theme .swal2-container .swal2-popup .swal2-validation-message { background: var(--bs-secondary-bg); color: var(--bs-body-color); } :where(html:not([data-bs-theme="dark"])) .zak-theme .swal2-container .swal2-popup .swal2-validation-message::before { background-color: var(--bs-danger-text-emphasis); color: var(--bs-paper-bg); } :where(html:not([data-bs-theme="dark"])) .zak-theme .swal2-container :is(.swal2-input, .swal2-file, .swal2-textarea).swal2-inputerror { border-color: var(--bs-danger-text-emphasis) !important; box-shadow: none !important; } /* --- select2 (29 screens) ----------------------------------------------- */ :where(html:not([data-bs-theme="dark"])) .zak-theme .select2-container--default .select2-selection--single, :where(html:not([data-bs-theme="dark"])) .zak-theme .select2-container--default .select2-selection--multiple { background-color: var(--paper2); border-color: var(--line); color: var(--ink); } :where(html:not([data-bs-theme="dark"])) .zak-theme .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink); } :where(html:not([data-bs-theme="dark"])) .zak-theme .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--zak-muted-text); } :where(html:not([data-bs-theme="dark"])) .zak-theme .select2-dropdown { background-color: var(--card); border-color: var(--line); box-shadow: var(--shadow); } :where(html:not([data-bs-theme="dark"])) .zak-theme .select2-container--default .select2-results__option { color: var(--ink); } :where(html:not([data-bs-theme="dark"])) .zak-theme .select2-container--default .select2-results__option--highlighted[aria-selected], :where(html:not([data-bs-theme="dark"])) .zak-theme .select2-container--default .select2-results__option--highlighted[data-selected] { background-color: var(--accent); color: var(--on-accent); } :where(html:not([data-bs-theme="dark"])) .zak-theme .select2-container--default .select2-results__option[aria-selected='true'], :where(html:not([data-bs-theme="dark"])) .zak-theme .select2-container--default .select2-results__option[data-selected='true'] { background-color: var(--line2); color: var(--ink); } :where(html:not([data-bs-theme="dark"])) .zak-theme .select2-container--default .select2-search--dropdown .select2-search__field { background-color: var(--paper2); border-color: var(--line); color: var(--ink); } :where(html:not([data-bs-theme="dark"])) .zak-theme .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--line2); border-color: var(--line); color: var(--ink); } /* --- flatpickr (12 screens) --------------------------------------------- */ :where(html:not([data-bs-theme="dark"])) .zak-theme .flatpickr-calendar { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); } :where(html:not([data-bs-theme="dark"])) .zak-theme .flatpickr-calendar.arrowTop:before, :where(html:not([data-bs-theme="dark"])) .zak-theme .flatpickr-calendar.arrowTop:after { border-bottom-color: var(--card); } :where(html:not([data-bs-theme="dark"])) .zak-theme .flatpickr-months .flatpickr-month, :where(html:not([data-bs-theme="dark"])) .zak-theme .flatpickr-current-month, :where(html:not([data-bs-theme="dark"])) .zak-theme .flatpickr-weekday { color: var(--ink); fill: var(--ink); } :where(html:not([data-bs-theme="dark"])) .zak-theme .flatpickr-weekday { color: var(--zak-muted-text); } :where(html:not([data-bs-theme="dark"])) .zak-theme .flatpickr-day { color: var(--ink); } /* Adjacent-month days are meant to recede, not to disappear. The muted text token alone measures 5.05 on the calendar surface; the .55 opacity that was here as well took it to 2.1. Recede by colour, not by opacity. */ :where(html:not([data-bs-theme="dark"])) .zak-theme .flatpickr-day.prevMonthDay, :where(html:not([data-bs-theme="dark"])) .zak-theme .flatpickr-day.nextMonthDay { color: var(--zak-muted-text); opacity: 1; } :where(html:not([data-bs-theme="dark"])) .zak-theme .flatpickr-day.flatpickr-disabled { color: var(--zak-muted-text); opacity: .6; } :where(html:not([data-bs-theme="dark"])) .zak-theme .flatpickr-day:hover { background: var(--line2); border-color: var(--line2); } /* Sneat tints "today" with a 10% primary wash that is still purple — setting only the border left rgba(105,108,255,.1) sitting behind it. */ :where(html:not([data-bs-theme="dark"])) .zak-theme .flatpickr-day.today { /* background now arrives through --bs-primary-bg-subtle, mapped above */ border-color: var(--brand); color: var(--ink); } :where(html:not([data-bs-theme="dark"])) .zak-theme .flatpickr-day.today:hover { background: var(--accent-soft); } :where(html:not([data-bs-theme="dark"])) .zak-theme .flatpickr-day.selected, :where(html:not([data-bs-theme="dark"])) .zak-theme .flatpickr-day.selected:hover, :where(html:not([data-bs-theme="dark"])) .zak-theme .flatpickr-day.startRange, :where(html:not([data-bs-theme="dark"])) .zak-theme .flatpickr-day.endRange { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } :where(html:not([data-bs-theme="dark"])) .zak-theme .flatpickr-day.inRange { background: var(--line2); border-color: var(--line2); box-shadow: none; } /* --- jquery-timepicker (4 screens) -------------------------------------- */ :where(html:not([data-bs-theme="dark"])) .zak-theme .ui-timepicker-wrapper { background: var(--card); border-color: var(--line); box-shadow: var(--shadow); } :where(html:not([data-bs-theme="dark"])) .zak-theme .ui-timepicker-list li { color: var(--ink); } :where(html:not([data-bs-theme="dark"])) .zak-theme .ui-timepicker-list li.ui-timepicker-selected, :where(html:not([data-bs-theme="dark"])) .zak-theme .ui-timepicker-list li:hover { background: var(--accent); color: var(--on-accent); } /* --- pickr, the colour picker (8 screens) ------------------------------- */ :where(html:not([data-bs-theme="dark"])) .zak-theme .pcr-app { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); } :where(html:not([data-bs-theme="dark"])) .zak-theme .pcr-app .pcr-interaction .pcr-result { background: var(--paper2); border: 1px solid var(--line); color: var(--ink); } :where(html:not([data-bs-theme="dark"])) .zak-theme .pcr-app .pcr-interaction .pcr-save { background: var(--accent); color: var(--on-accent); } /* --- datatables-buttons (6 screens: 4 check-in desks + the user list) ---- */ :where(html:not([data-bs-theme="dark"])) .zak-theme .dt-buttons .btn, :where(html:not([data-bs-theme="dark"])) .zak-theme .dt-buttons .dt-button { background-color: var(--card); border-color: var(--line); color: var(--ink); } :where(html:not([data-bs-theme="dark"])) .zak-theme .dt-buttons .btn:hover, :where(html:not([data-bs-theme="dark"])) .zak-theme .dt-buttons .dt-button:hover { background-color: var(--line2); border-color: var(--line); color: var(--ink); } :where(html:not([data-bs-theme="dark"])) .zak-theme .dt-button-collection { background-color: var(--card); border-color: var(--line); box-shadow: var(--shadow); } :where(html:not([data-bs-theme="dark"])) .zak-theme .dt-button-collection .dt-button { background-color: transparent; border-color: transparent; } :where(html:not([data-bs-theme="dark"])) .zak-theme .dt-button-collection .dt-button.active, :where(html:not([data-bs-theme="dark"])) .zak-theme .dt-button-collection .dt-button:hover { background-color: var(--accent); color: var(--on-accent); } /* --- typeahead-js (organizer create/edit) ------------------------------- */ :where(html:not([data-bs-theme="dark"])) .zak-theme .tt-menu { background-color: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: var(--r); } :where(html:not([data-bs-theme="dark"])) .zak-theme .tt-suggestion { color: var(--ink); } :where(html:not([data-bs-theme="dark"])) .zak-theme .tt-suggestion:hover, :where(html:not([data-bs-theme="dark"])) .zak-theme .tt-suggestion.tt-cursor { background-color: var(--accent); color: var(--on-accent); } /* The match inside a suggestion. Bold rather than a second colour — on the highlighted row the background is ink, and a coloured match on ink would need its own contrast answer for every hue. */ /* (0,3,0) so it beats typeahead's own .tt-highlight{font-weight:500}, which a plain .zak-theme .tt-highlight tied with and lost on source order. */ :where(html:not([data-bs-theme="dark"])) .zak-theme .tt-suggestion .tt-highlight, :where(html:not([data-bs-theme="dark"])) .zak-theme .tt-menu .tt-highlight { color: inherit; font-weight: 700; } :where(html:not([data-bs-theme="dark"])) .zak-theme .tt-hint { color: var(--zak-muted-text); } /* --- quill (ap/email, ap/calendar) -------------------------------------- */ :where(html:not([data-bs-theme="dark"])) .zak-theme .ql-toolbar.ql-snow, :where(html:not([data-bs-theme="dark"])) .zak-theme .ql-container.ql-snow { border-color: var(--line); } :where(html:not([data-bs-theme="dark"])) .zak-theme .ql-toolbar.ql-snow { background-color: var(--paper2); } :where(html:not([data-bs-theme="dark"])) .zak-theme .ql-container.ql-snow { background-color: var(--card); } :where(html:not([data-bs-theme="dark"])) .zak-theme .ql-editor { color: var(--ink); } :where(html:not([data-bs-theme="dark"])) .zak-theme .ql-editor.ql-blank::before { color: var(--zak-muted-text); font-style: normal; } /* Quill draws its icons as SVG strokes and fills, which do not read text colour. */ :where(html:not([data-bs-theme="dark"])) .zak-theme .ql-snow .ql-stroke { stroke: var(--ink); } :where(html:not([data-bs-theme="dark"])) .zak-theme .ql-snow .ql-fill, :where(html:not([data-bs-theme="dark"])) .zak-theme .ql-snow .ql-stroke.ql-fill { fill: var(--ink); } :where(html:not([data-bs-theme="dark"])) .zak-theme .ql-snow .ql-picker { color: var(--ink); } :where(html:not([data-bs-theme="dark"])) .zak-theme .ql-snow .ql-picker-options { background-color: var(--card); border-color: var(--line); box-shadow: var(--shadow); } :where(html:not([data-bs-theme="dark"])) .zak-theme .ql-snow.ql-toolbar button:hover .ql-stroke, :where(html:not([data-bs-theme="dark"])) .zak-theme .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--accent-strong); } :where(html:not([data-bs-theme="dark"])) .zak-theme .ql-snow.ql-toolbar button:hover .ql-fill, :where(html:not([data-bs-theme="dark"])) .zak-theme .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--accent-strong); } /* --- notyf toasts (11 screens) ------------------------------------------ */ :where(html:not([data-bs-theme="dark"])) .zak-theme .notyf__toast { border-radius: var(--r); box-shadow: var(--shadow); } :where(html:not([data-bs-theme="dark"])) .zak-theme .notyf__toast--success .notyf__ribbon, :where(html:not([data-bs-theme="dark"])) .zak-theme .notyf__toast--success { background-color: var(--green-text); color: var(--on-bar); } :where(html:not([data-bs-theme="dark"])) .zak-theme .notyf__toast--error .notyf__ribbon, :where(html:not([data-bs-theme="dark"])) .zak-theme .notyf__toast--error { background-color: var(--red-text); color: var(--on-bar); } /* --- spinkit + block-ui (12 / 14 screens) ------------------------------- */ :where(html:not([data-bs-theme="dark"])) .zak-theme .sk-wave .sk-rect, :where(html:not([data-bs-theme="dark"])) .zak-theme .sk-rect { background-color: var(--accent); } :where(html:not([data-bs-theme="dark"])) .zak-theme .blockUI.blockOverlay { background-color: var(--ink) !important; } :where(html:not([data-bs-theme="dark"])) .zak-theme .blockUI.blockMsg { color: var(--on-bar); } /* ------------------------------------------------------------ 5. DARK MODE STANDS DOWN — and there is deliberately nothing here Every rule above carries the light-only scope from rule 2 in the header, so in dark mode there is nothing to undo. There used to be. The first version applied everything unconditionally and then took it back under [data-bs-theme="dark"] .zak-theme, resetting each --bs-* token to `initial` and each surface's colours to `initial`. Neither means what it reads as: - For a custom property, `initial` is the guaranteed-invalid value, not "whatever Sneat set on ". Every var(--bs-border-color), var(--bs-primary) or var(--bs-paper-bg) under the body resolved to nothing, so borders, card fills, filled buttons and input outlines vanished on every screen. - For an ordinary property, `initial` is the CSS default (transparent, currentColor), not Sneat's value either. - And it could not beat !important at all. The navbar and the sidebar are painted with !important in 4b, so in dark mode they stayed cream under Sneat's white text. Screens that noticed worked around it locally, drawing colours from currentColor. Do not bring the undo back: a rule that must not apply in dark mode should not match there. ZakThemeTest holds every selector to the scope. ------------------------------------------------------------ */ /* The menu's collapse button is a --bs-primary disc, and core colours its chevron var(--bs-white): white on ink, out of the token map's reach. It takes the text that pairs with the fill; zak-colours.css says the same for dusk. */ :where(html:not([data-bs-theme="dark"])) .zak-theme .menu .app-brand .layout-menu-toggle i { color: var(--bs-primary-contrast); } /* Bootstrap's .bg-white is var(--bs-white) !important, out of the token map's reach: the Email templates badges and the 471 link cards on Short URL Analytics were the last pure white on the panel on 2026-10-10. It is the card's cream here. */ :where(html:not([data-bs-theme="dark"])) .zak-theme .bg-white { background-color: var(--card) !important; } /* ------------------------------------------------------------ TYPE, AT THE KIT'S WEIGHTS (docs/ZAK-ONE-UI.md, 3) ABC Normal only. Headings are Heavy (800), line height 1.3, Ink; names, buttons, badges and emphasis are Bold (700). Emphasis is Bold, never italic. Sneat compiles its heading weight (500) and Public Sans into the selectors, so they are named here rather than mapped. The same block is in zak-colours.css for dusk: type is not a colour, but each sheet is held to its own theme's scope. ------------------------------------------------------------ */ :where(html:not([data-bs-theme="dark"])) .zak-theme :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { font-weight: var(--w-head); letter-spacing: -.01em; line-height: 1.3; color: var(--bs-heading-color); } :where(html:not([data-bs-theme="dark"])) .zak-theme :is(body, button, input, select, textarea, .btn, .form-control, .form-select, .dropdown-menu, .tooltip, .popover, .menu, .layout-navbar) { font-family: var(--font); } :where(html:not([data-bs-theme="dark"])) .zak-theme :is(em, i:not([class]), cite, .fst-italic) { font-style: normal !important; font-weight: var(--w-strong); } :where(html:not([data-bs-theme="dark"])) .zak-theme :is(.font-monospace) { font-family: var(--font-mono); } /* The focus ring: 2.5px Burnt Orange, 2px off the edge, on everything a keyboard reaches. */ :where(html:not([data-bs-theme="dark"])) .zak-theme :focus-visible { outline: var(--focus-ring); outline-offset: 2px; box-shadow: none; } :where(html:not([data-bs-theme="dark"])) .zak-theme :is(h1, .h1, h2, .h2) { letter-spacing: -.02em; } :where(html:not([data-bs-theme="dark"])) .zak-theme :is(.btn, .badge, .nav-link.active, .page-link, b, strong) { font-weight: var(--w-strong); } :where(html:not([data-bs-theme="dark"])) .zak-theme .card-title { font-weight: var(--w-head); } /* The active row's marker at the sidebar's edge is Burnt Orange, a marker being orange's job. Core draws it in --bs-primary at a specificity of six classes; !important rather than a seventh, as for the shell above. */ :where(html:not([data-bs-theme="dark"])) .zak-theme .layout-menu .menu-inner > .menu-item.active::before { background-color: var(--brand) !important; } /* The marker at the sidebar's edge stood apart from the active row as a second orange block: beside the square when the menu is collapsed (the owner's screenshot of 27-Oct-2026), and past the row's end when it is open. The Deep Orange row already says which page this is, so the marker is not drawn, in either theme (dark's twin is in zak-colours.css: the bridge holds light rules only, ZakThemeTest). */ :where(html:not([data-bs-theme="dark"])) .zak-theme .layout-menu .menu-inner > .menu-item.active::before { display: none !important; } /* Bootstrap's text and surface utilities (light). They paint from the -rgb triplets with !important, out of the token map's reach, and the triplets are the FILL colours: Signal Red as small text measures 3.67:1 on cream, gold about 2:1. So the words take the text tokens, as .bg-label-* already do, and the cool-grey surfaces (.bg-light, navy at dusk) take paper2. Found across a dozen screens on 2026-10-19; mapped once here rather than screen by screen. */ :where(html:not([data-bs-theme="dark"])) .zak-theme .text-danger { color: var(--red-text) !important; } :where(html:not([data-bs-theme="dark"])) .zak-theme .text-warning { color: var(--amber-text) !important; } :where(html:not([data-bs-theme="dark"])) .zak-theme .text-info { color: var(--blue-text) !important; } :where(html:not([data-bs-theme="dark"])) .zak-theme .text-primary { color: var(--accent-text) !important; } :where(html:not([data-bs-theme="dark"])) .zak-theme .text-success { color: var(--green-text) !important; } :where(html:not([data-bs-theme="dark"])) .zak-theme .text-dark { color: var(--ink) !important; } :where(html:not([data-bs-theme="dark"])) .zak-theme .bg-light, :where(html:not([data-bs-theme="dark"])) .zak-theme .bg-light-subtle { background-color: var(--paper2) !important; } /* .btn-outline-info draws its words in info's blue, 5.56:1 on the page. */ :where(html:not([data-bs-theme="dark"])) .zak-theme .btn-outline-info { --bs-btn-color: var(--blue-text); --bs-btn-border-color: var(--blue); --bs-btn-hover-bg: var(--blue); --bs-btn-hover-color: var(--on-bar); --bs-btn-hover-border-color: var(--blue); --bs-btn-active-bg: var(--blue); --bs-btn-active-color: var(--on-bar); --bs-btn-active-border-color: var(--blue); }