/* GENERATED - vendored from shared/theme/theme.css by tools/build/vendor-shared.ps1. DO NOT EDIT. Edit the source in shared/theme/. */ /* * theme.css — one light palette, one dark palette, and the roles they fill. * * Mike, 2026-09-09: *"light mode for everything, with the option to have plan and drive two * separate modes."* * * ⚠ LIGHT IS THE BASELINE, NOT AN ALTERNATIVE. `:root` carries the light values, so a page whose * JavaScript fails still renders light — the requested default — rather than unstyled or dark. Dark * is an override in two places: the OS preference (when nothing has been chosen) and an explicit * `data-theme`. That ordering is also what stops the flash of the wrong theme on load: the correct * colours are in the cascade before any script runs. * * ⚠ IT DEFINES ROLES, NOT PAGE VOCABULARY, BECAUSE THE VOCABULARIES DISAGREE. `--ink` means the * primary TEXT colour in the ops maps (#EDE6D6, bone on dark) and the text ON AN ACCENT in the * drive app (#151C24, near-black on gold). Defining it once globally would have made one of the two * unreadable, and the failure would have been a page of invisible text rather than an error. So * every surface keeps its own names and aliases them onto the `--h-*` roles below; the alias block * is a few lines and it is honest about the fact that the two vocabularies are different. * * ⚠ AND THE DARK VALUES ARE THE ONES THAT WERE ALREADY THERE. The drive app's dark palette was * tuned for a phone on a dashboard at night; this does not re-pick it. What changes is that light * now exists, and that the choice is a person's rather than an accident of which file they opened. * * Light comes from shared/brand/tokens.css — the brand has always been warm paper and dark ink, and * the tools drifted from it one private :root block at a time. */ :root { color-scheme: light; /* ── surfaces, back to front ─────────────────────────────────────────────────────────────── */ --h-bg: #f6f1e7; /* the page itself — brand --paper */ --h-surface: #fffdf8; /* panels and cards. LIGHTER than the page, which is the opposite of dark mode, where a panel lifts by getting brighter than black */ --h-raised: #ffffff; /* the thing on top of the panel */ --h-line: rgba(27,32,28,.14); --h-scrim: rgba(27,32,28,.45); /* behind a sheet */ /* ⭐ A SURFACE THAT FLOATS OVER CONTENT, AND A VEIL OVER A TRACK. Both existed as literals in sites/drive/public/index.html — `rgba(21,28,36,.92)` on `.pill` and `rgba(21,28,36,.74)` on the range track — which is the DARK surface, written before light mode existed. The text on them was already `var(--text)`, so in light mode the map chips became near-black ink on a dark navy pill: the "Layers" control was invisible on the trip screen (found 2026-09-13). A colour that does not change with the theme is not a colour, it is a bug waiting for the other mode. The dark values below are byte-identical to those literals, so dark is unmoved. */ --h-float: rgba(255,253,248,.92); /* --h-surface, floating over the map */ --h-veil: rgba(246,241,231,.74); /* --h-bg, laid over a track or a gradient */ /* ── text ────────────────────────────────────────────────────────────────────────────────── */ --h-fg: #1b201c; /* brand --ink */ --h-fg-2: #4a514a; /* brand --ink-soft: captions, metadata */ --h-fg-3: #6b726b; /* the quietest thing that is still meant to be read */ /* ── accent ──────────────────────────────────────────────────────────────────────────────── */ /* ⚠ SPRUCE IN LIGHT, GOLD IN DARK, AND THAT IS NOT A WHIM. The dark accent is #F3E3B0, a pale gold that reads as a lit surface against near-black. On warm paper the same gold is nearly invisible — it is a highlight, not a fill. Brand spruce is the light-mode primary and takes paper-coloured text, so --h-on-accent flips with it. Anything using accent as a TEXT colour stays legible either way: spruce on paper, gold on ink. */ --h-accent: #1f4d42; /* brand --spruce */ --h-accent-2: #2c6b5b; /* brand --spruce-2, hover */ --h-on-accent: #f6f1e7; --h-highlight: #c2613b; /* brand --clay: the second accent, for the thing being pointed at */ --h-accent-tint: #e6ede9; /* a selected chip: the accent at low strength, not the accent */ --h-accent-line: #9dbdb1; /* the border of something pinned or chosen */ /* brand --clay: the second accent, for the thing being pointed at */ /* ── judgement ───────────────────────────────────────────────────────────────────────────── */ --h-ok: #2f6f52; --h-warn: #9a6b1f; --h-bad: #a8371f; /* ── banners and tints ───────────────────────────────────────────────────────────────────── */ /* A caution banner and an input well are their own roles. Left as literal hexes they were the single biggest source of "light mode, but this box is still black" — the panel themed and the thing inside it did not. */ --h-sunken: #f0ebe0; /* inputs and wells: BELOW the panel, so it recedes in either palette */ --h-warn-bg: #fdf6e3; --h-warn-line: #e3d3a4; --h-warn-fg: #6d5310; --h-ok-tint: #e8f2ec; --h-ok-fg: #1f5c42; --h-on-ok: #f6f1e7; --h-bad-tint: #fbeceb; --h-bad-line: #e6c3bd; --h-bad-fg: #8d2f1b; /* ── the unknown (N1/U1) ─────────────────────────────────────────────────────────────────── */ /* An absence is drawn as an absence and never as a fact (ADR-0072), so it gets its own three tokens in both palettes rather than borrowing the muted text colour. */ --h-unk-fill: #eae4d6; --h-unk-edge: #a9a294; --h-unk-text: #5f6660; /* ── the map ─────────────────────────────────────────────────────────────────────────────── */ /* Read by theme.js, not by CSS: the basemap is a style document, so switching it is a fetch rather than a repaint. Kept here so the whole palette is one file. */ --h-map-style: "mapbox://styles/mapbox/light-v11"; --h-map-ctrl-filter: none; } /* * Dark, when the operating system asks for it and nobody has said otherwise. * * ⚠ GUARDED BY :not([data-theme="light"]). Without the guard, choosing light on a machine set to * dark would be overruled by the media query — the toggle would appear to do nothing on exactly * the machines where somebody would reach for it. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --h-bg: #101821; --h-surface: #151C24; --h-raised: #1E2731; --h-line: #2B3541; --h-scrim: rgba(6,10,14,.62); --h-float: rgba(21,28,36,.92); --h-veil: rgba(21,28,36,.74); --h-fg: #EDE6D6; --h-fg-2: #B9B2A3; --h-fg-3: #7C8894; --h-accent: #F3E3B0; --h-accent-2: #E6D399; --h-on-accent: #151C24; --h-highlight: #E3A83B; --h-accent-tint: #2E2A20; --h-accent-line: #4A5A45; --h-ok: #3F9A6E; --h-warn: #E3A83B; --h-bad: #C8442D; --h-sunken: #0D141C; --h-warn-bg: #221A12; --h-warn-line: #4A3A22; --h-warn-fg: #E4C78A; --h-ok-tint: #122019; --h-ok-fg: #9BD8B8; --h-on-ok: #08130D; --h-bad-tint: #2A1614; --h-bad-line: #4A2A24; --h-bad-fg: #E9A08F; --h-unk-fill: #2E3A47; --h-unk-edge: #7C8894; --h-unk-text: #B9B2A3; --h-map-style: "mapbox://styles/mapbox/dark-v11"; --h-map-ctrl-filter: invert(1) hue-rotate(180deg); } } /* * Dark, chosen. Identical values to the block above, and they have to be: a media query cannot be * re-used as a selector, and CSS has no way to say "those declarations, but for this attribute". * `check_theme.mjs` compares the two blocks token for token so they cannot drift. */ :root[data-theme="dark"] { color-scheme: dark; --h-bg: #101821; --h-surface: #151C24; --h-raised: #1E2731; --h-line: #2B3541; --h-scrim: rgba(6,10,14,.62); --h-float: rgba(21,28,36,.92); --h-veil: rgba(21,28,36,.74); --h-fg: #EDE6D6; --h-fg-2: #B9B2A3; --h-fg-3: #7C8894; --h-accent: #F3E3B0; --h-accent-2: #E6D399; --h-on-accent: #151C24; --h-highlight: #E3A83B; --h-accent-tint: #2E2A20; --h-accent-line: #4A5A45; --h-ok: #3F9A6E; --h-warn: #E3A83B; --h-bad: #C8442D; --h-sunken: #0D141C; --h-warn-bg: #221A12; --h-warn-line: #4A3A22; --h-warn-fg: #E4C78A; --h-ok-tint: #122019; --h-ok-fg: #9BD8B8; --h-on-ok: #08130D; --h-bad-tint: #2A1614; --h-bad-line: #4A2A24; --h-bad-fg: #E9A08F; --h-unk-fill: #2E3A47; --h-unk-edge: #7C8894; --h-unk-text: #B9B2A3; --h-map-style: "mapbox://styles/mapbox/dark-v11"; --h-map-ctrl-filter: invert(1) hue-rotate(180deg); } /* * ── the ops vocabulary ────────────────────────────────────────────────────────────────────── * What the review maps and the intake page already call things. Aliases only: every value comes * from the roles above, so a colour is decided once. */ :root { --bg: var(--h-bg); --map: var(--h-bg); /* --paper is the PAGE in the two pages that use it, not a card on it — checked, rather than assumed from the name. Mapping it to the panel role would have lifted the whole body one shade and made the panel that sits on it disappear. */ --paper: var(--h-bg); --ink: var(--h-fg); --ink-2: var(--h-fg-2); --ink-3: var(--h-fg-3); --sub: var(--h-fg-2); --edge: var(--h-line); --rule: var(--h-line); --moon: var(--h-accent); --ok: var(--h-ok); --no: var(--h-bad); --flag: var(--h-bad); /* Stances. These carry meaning on a map, so they are named for what they mean rather than for the colour they happen to be. */ --visited: var(--h-ok); --reviewed: var(--h-highlight); --want: #5b6fa8; --none: var(--h-unk-edge); --asserted: var(--h-ok); --candidate: var(--h-bad); --recorded: #2f7c8c; --inferred: var(--h-warn); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --want: #8FA3D8; --recorded: #6BA8B8; } } :root[data-theme="dark"] { --want: #8FA3D8; --recorded: #6BA8B8; } /* * ── the control ───────────────────────────────────────────────────────────────────────────── * Styled here so a page gets a usable switch from `themeControl()` without writing any CSS, and * so the switch looks the same on every surface. Everything is a role token, so it themes itself. */ .theme-control { display: inline-flex; gap: 4px; } .theme-control button { font: inherit; font-size: 12px; line-height: 1; padding: 6px 10px; border-radius: 999px; cursor: pointer; border: 1px solid var(--h-line); background: transparent; color: var(--h-fg-2); } .theme-control button:hover { border-color: var(--h-accent); color: var(--h-fg); } .theme-control button.on { background: var(--h-accent); color: var(--h-on-accent); border-color: var(--h-accent); font-weight: 600; } /* The resolved answer beside "Auto", so choosing it is not a leap of faith. Dimmed on the selected chip too, where it sits on the accent rather than the page. */ .theme-hint { opacity: .65; font-variant: all-small-caps; letter-spacing: .04em; } /* ⚠ EACH CLASS IS DOUBLED, AND THAT IS NOT A STYLE TIC. mapbox-gl.css is a plain and on several pages it is linked AFTER this palette — so at equal specificity Mapbox wins and the fix applies on some surfaces and not others. Measured after the first attempt: popups fixed on four pages and still 1.2:1 on two. Doubling the class raises specificity without !important, so the palette wins wherever a page happens to put the two links. */ /* ── Mapbox's own chrome ─────────────────────────────────────────────────────────────────────── ⚠ MAPBOX PAINTS ITS POPUP WHITE AND SETS NO TEXT COLOUR, so a dark page's light text lands on white and the popup is unreadable. Mike, 2026-09-11: "in dark mode some of the map popups are hard to read because it is light on light text." Measured across every ops surface in both themes: light every element clears WCAG dark .mapboxgl-popup-content 1.2 : 1 .mapboxgl-ctrl button 1.0 : 1 — the same colour as its own background 1.2:1 is unreadable; 1:1 is invisible. The drive app fixed this in its own stylesheet months ago and every ops page inherited the bug, which is exactly the shape ADR-0087 names: a decision made correctly in one place and not known about in another. So it lives HERE, once, and every surface that links the palette gets it. ⚠ AND THE ELEMENTS ONLY EXIST AFTER A CLICK, which is why no amount of looking at the pages found it — a popup is created on demand and a screenshot of a map has nothing to measure. */ .mapboxgl-popup-content.mapboxgl-popup-content { background: var(--h-surface); color: var(--h-fg); border: 1px solid var(--h-line); border-radius: 10px; box-shadow: 0 8px 24px rgb(0 0 0 / 28%); } .mapboxgl-popup-content.mapboxgl-popup-content b { color: var(--h-fg); } .mapboxgl-popup-content.mapboxgl-popup-content small { color: var(--h-fg-2); } /* The tip is a separate triangle and keeps its own colour, so it has to follow the body or the popup grows a white spike in dark mode. */ .mapboxgl-popup-anchor-top.mapboxgl-popup-anchor-top .mapboxgl-popup-tip { border-bottom-color: var(--h-surface); } .mapboxgl-popup-anchor-bottom.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip { border-top-color: var(--h-surface); } .mapboxgl-popup-anchor-left.mapboxgl-popup-anchor-left .mapboxgl-popup-tip { border-right-color: var(--h-surface); } .mapboxgl-popup-anchor-right.mapboxgl-popup-anchor-right .mapboxgl-popup-tip { border-left-color: var(--h-surface); } .mapboxgl-popup-close-button.mapboxgl-popup-close-button { color: var(--h-fg-2); background: transparent; } .mapboxgl-popup-close-button.mapboxgl-popup-close-button:hover { background: transparent; color: var(--h-fg); } /* The zoom and compass buttons, and the attribution strip. */ .mapboxgl-ctrl-group.mapboxgl-ctrl-group { background: var(--h-surface); border: 1px solid var(--h-line); } .mapboxgl-ctrl-group.mapboxgl-ctrl-group button + button { border-top-color: var(--h-line); } .mapboxgl-ctrl-group.mapboxgl-ctrl-group button { background: var(--h-surface); color: var(--h-fg); } .mapboxgl-ctrl-group.mapboxgl-ctrl-group button:hover { background: var(--h-raised); } /* The glyphs are SVG icons, not text, so a colour alone leaves them black on a dark button. */ .mapboxgl-ctrl-group.mapboxgl-ctrl-group button .mapboxgl-ctrl-icon { filter: var(--h-map-ctrl-filter, none); } .mapboxgl-ctrl-attrib.mapboxgl-ctrl-attrib { background: var(--h-surface); color: var(--h-fg-2); } /* The "i" toggle is NOT inside a ctrl-group, so the rule above never reached it — it kept Mapbox's half-transparent white and sat on a dark map as a pale blob. It carries no text, only an icon, which is why a text-contrast check cannot see it and a person can. */ .mapboxgl-ctrl-attrib-button.mapboxgl-ctrl-attrib-button { background-color: var(--h-surface); filter: var(--h-map-ctrl-filter, none); } .mapboxgl-ctrl-attrib.mapboxgl-ctrl-attrib a { color: var(--h-fg-2); }