web: Gable light, a calm light mode beside Industrial Dark

[futurebuildai]

Gable light: a calm light mode beside Industrial Dark. Industrial Dark is the default and draws exactly as before; light is the alternative a person sets for themselves and keeps. Palette values are used as given; nothing else from their source is in this PR.

What it is

• Tokens (tokens.css): every colour is an RGB channel variable (--gb-*). :root holds today's values exactly (Tailwind v3 defaults, the brand hex); :root[data-theme="light"] holds the light palette and the semantic HSL values. color-scheme is set only in the light block.
• Tailwind theme: brand aliases, white, black, the neutral and status palettes (now including fuchsia, derived for light) read rgb(var(--gb-...) / <alpha-value>). Glow and elevation shadows read variables (no glow in light).
• Tokens with their own dark value (so dark is byte exact and light follows the palette): plate, backdrop, gable-green-hover, gable-green-tint; the till dialog colours (till-*); pale, well, well-hover; the portal ground and panel; chip-ground, shade, photo-btn, map-note; the glow sizes; chart-tick, chart-fulfilled; picture-plate, tile, hover-row.
• Second voice (voice, voice-soft, voice-text, voice-fill): today's neutrals in dark, sage in light, for the counter's category chips, the quote's "Material list" tag and "draft" chip.
• Switch: theme.ts and <gable-theme-toggle> (a native button named "Light mode" / "Dark mode") in the desk header and on the front door. Stored per signed in subject under gable_theme:<subject>, last used under gable_theme; a person's key only ever holds their own choice; a storage listener follows other tabs; applied at the app entry before the first render and on sign in.
• Boot screens: both index.html pages load /theme-boot.js (a same origin script, because the CSP refuses inline ones) and read the variables, so there is no dark flash.
• One check over all of web/apps (no-literal-colour.test.ts): no hex of three to eight digits, no rgb() literal, no arbitrary hex class, no literal white or black surface, no named colour in a style. The allowlist names file plus literal plus reason, and the rest of the file is still scanned. Its failure message names the file, the literal and the token to use.
• Charts and the route map read the variables at render and redraw on a mode change.

Tests

Dark: every dark variable is listed and pinned (none unlisted, none different). Light: every value equals the palette; the derived fuchsia ramp; no glow. Contrast: every pair computed from the token values. The switch, the control, the boot script, the sweep guard and its planted cases.

Pair	Ratio	Needed
ink on ground	13.52:1	4.5:1
ink on card	14.84:1	4.5:1
ink on modal	15.99:1	4.5:1
muted (neutral 400) on card	6.59:1	4.5:1
muted (neutral 400) on ground	6.01:1	4.5:1
hint (neutral 500) on card	4.99:1	4.5:1
hint (neutral 500) on ground	4.55:1	4.5:1
control edge (neutral 600) on card	3.59:1	3.0:1
control edge (neutral 600) on ground	3.27:1	3.0:1
green control on ground	5.36:1	3.0:1
green text on card	5.89:1	4.5:1
green text on ground	5.36:1	4.5:1
paper label on green	6.23:1	4.5:1
paper label on green hover	7.77:1	4.5:1
blue text on card	5.56:1	4.5:1
blue text on ground	5.06:1	4.5:1
red text on card	5.54:1	4.5:1
red text on ground	5.04:1	4.5:1
paper label on red	5.86:1	4.5:1
sage text on card	5.79:1	4.5:1
sage text on ground	5.27:1	4.5:1
ink label on sage fill	4.57:1	4.5:1
green text on green tint	5.39:1	4.5:1
sage text on sage tint	5.16:1	4.5:1
fuchsia 300 on card	6.69:1	4.5:1
fuchsia 300 on ground	6.09:1	4.5:1

For the principal's ruling

• Five card islands (saved reports, the report builder, the activity modal, the portal's my account, the activity feed) were white cards in dark; they now use the desk's dark card vocabulary so light can work. That moves those five in dark.
• Till dialogs: the confirm buttons are green in light where dark draws them violet.

🤖 Generated with Claude Code