Mobile Phase 6: app-wide light theme + [data-theme] toggle
Ship the light palette behind a :root[data-theme="light"] switch; dark
stays the default and brand identity. A pre-paint boot script applies
localStorage.venture_crm_theme (no flash, no prefers-color-scheme), and an
app-wide toggle lives in the desktop sidebar footer + the mobile top bar,
both driven by one theme state in App.
Method keeps dark mode byte-identical: :root grew to 44 themed color slots
whose dark values equal the original literals, then 319 hex literals were
migrated to var() across the JSX inline region and the <style> block. The
StageChip is now className-based (.stage-chip--{stage}); PIPELINE_STAGE_CHIP
is removed. Every light tint (stage/recency/note/priority/reminder/money)
uses the designer's exact values from the full Claude Design export
(store.js + the four *App.dc.html DCLogic palettes), now committed as
provenance under design/_imports/2026-06-19_zip-file/ (zip + screenshots
gitignored).
Mobile surfaces + chrome are fully var-based, so mobile light is complete.
Desktop light has known rough edges (bespoke <style> shades, the legacy
off-palette .badge-* family, dark-tuned shadows) folded into a new Phase 7
design-conformance pass.
Verified: render-smoke green; a jsdom interaction harness on the authed
shell exercised the toggle (boot-dark -> light+persist+relabel -> dark);
dark-identity, theme-parity, and no-undefined-var checks all green. Not yet
checked on a real phone/browser.
This commit is contained in:
Keysat
+38
-5
@@ -412,11 +412,44 @@ migration into each surface's build, behind one shared foundation step. No upfro
|
||||
green + a throwaway jsdom 375px harness (grouping/counts, swipe done + snooze PATCH, tap→edit prefilled,
|
||||
create POST, Done-filter reload — 12/12). No real-phone check yet (same deferral as P1–P4). **Deploy:**
|
||||
folds into the next s9pk.
|
||||
- **Phase 6 — Light theme + toggle (adopted as a planned feature, 2026-06-19).** The inline-hex→`var()`
|
||||
axis (183 literals) + ship the light palette (`tokens.tokens.json` `color.light`) behind a
|
||||
`[data-theme]` switch + a top-bar toggle; dark stays the default. Mechanical; co-lands after the
|
||||
surfaces. Per-component light tints (stage/staleness/note badges) are in
|
||||
`_imports/2026-06-19/GridApp.dc.html`.
|
||||
- **Phase 6 — Light theme + toggle — BUILT 2026-06-19 (deploy pending).** App-wide light theme
|
||||
behind a `:root[data-theme="light"]` switch; **dark stays the default** (a pre-paint boot script
|
||||
in `<head>` reads `localStorage.venture_crm_theme`, no `prefers-color-scheme` auto-switch). Toggle
|
||||
is **app-wide**: a labeled control in the desktop sidebar footer + a sun/moon icon in the mobile
|
||||
top bar, both driven by one `theme` state in `App` (single source of truth). Authoritative color
|
||||
pairs came from the **full Claude Design export** (`design/_imports/2026-06-19_zip-file/`, incl. the
|
||||
previously-missing `store.js` + the four `*App.dc.html` `DCLogic` palettes) — every stage/recency/
|
||||
note/priority/reminder/money tint uses the designer's exact dark+light values, not guesses.
|
||||
- **Method (zero dark-mode regression by construction):** grew `:root` to a full token set (44
|
||||
themed color slots) whose **dark values equal the originals byte-for-byte**, so `var(--x)`
|
||||
resolves identically in dark — verified (16 exact-match vars asserted == their original hex).
|
||||
Migrated **319 hex literals → `var()`** across the JSX inline region *and* the `<style>` block
|
||||
(a context-aware script for the unambiguous structural ones; targeted edits for the
|
||||
context-dependent semantic/chip helpers — `StageChip` is now className-based off
|
||||
`.stage-chip--{stage}`, `PIPELINE_STAGE_CHIP` deleted). All mobile surfaces + chrome are fully
|
||||
var-based → **mobile light is complete**.
|
||||
- **Known light rough edges (desktop only — for the conformance pass below, NOT mobile):** a
|
||||
handful of bespoke `<style>`-block desktop shades (login glow/gradients `#101926`/`#4a9adf`,
|
||||
scrollbar `#36506a`, desktop table row-hover `#172435`, dashboard KPI green `#10b981`) and the
|
||||
legacy off-palette `.badge-*` family (`#ec407a`/`#ff9800`/etc., partly vestigial old-stage
|
||||
badges) stay dark-tuned in light; **shadows** also stay dark-tuned (not yet tokenized). A few
|
||||
desktop one-off shades were *consolidated* to the nearest token (small intentional dark deltas:
|
||||
e.g. `#2a3a4d`→border, `#d9a15f`→due-soon, `#f3b2b2`→danger-text) — enumerate when polishing.
|
||||
- **Verified:** render-smoke green (Babel transform + jsdom mount); a throwaway jsdom interaction
|
||||
harness mounted the **authed shell** and exercised the toggle (boot-defaults-dark → click→light
|
||||
+persist+relabel → click→dark, 7/7); theme parity + dark-identity + no-undefined-var checks all
|
||||
green. **No real-phone / real-browser check yet** (same deferral as P1–P5 — verify on a device).
|
||||
**Deploy:** folds into the next s9pk.
|
||||
|
||||
- **Phase 7 (NEW) — Full design-conformance pass against the complete Claude Design export
|
||||
(`design/_imports/2026-06-19_zip-file/`).** Per Grant (2026-06-19): make sure *everything we
|
||||
implement* matches what he built in Claude Design — **all buttons, colors, spacing, and
|
||||
functionality**, across all four surfaces + the light theme. Concretely: (1) run `design-checker`
|
||||
now that the surfaces exist; (2) reconcile remaining drift (the P6 desktop light rough edges
|
||||
above — bespoke `<style>` shades, the legacy `.badge-*` family, themed shadows; plus any
|
||||
button/interaction deltas vs the `*App.dc.html` comps + the ~25 `screenshots/`); (3) re-pull
|
||||
anything still cloud-only. This is the "conform to the design" sweep that the per-surface builds
|
||||
(P2–P6) deferred.
|
||||
|
||||
**Note on `design-checker`:** not run for this round-trip — it audits *existing* UI conformance,
|
||||
and the desktop UI still conforms to §1–7 (unchanged). The mobile gap is greenfield
|
||||
|
||||
Reference in New Issue
Block a user