grant/ten31-database
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile Phase 6: app-wide light theme + [data-theme] toggle

Browse Source 
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
2026-06-19 16:38:30 -05:00
parent 7f711d1fae
commit e6a89450da
21 changed files with 5521 additions and 374 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design/_imports/2026-06-19_zip-file/Venture-CRM mobile redesign/Existing-LP Flag Options.dc.html
+60
View File
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style>
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif; }
</style>
</helmet>
<div style="min-width:100%; min-height:100vh; width:max-content; box-sizing:border-box; padding:48px 56px 64px; background:#e7e5df; display:flex; flex-direction:column;">
<div style="font:700 22px 'IBM Plex Sans'; color:#161b22; letter-spacing:-0.01em;">Existing-investor flag — three treatments</div>
<div style="font:400 14px 'IBM Plex Sans'; color:#5a5f66; margin-top:8px; max-width:820px; line-height:1.5;">All in the single blue accent, on the same Main Fundraising list (existing LPs: Northwall, Cedarline, Polaris, Meridian, Granite). Pick one and I'll lock it in across both themes; the others stay one prop-flip away.</div>
<div style="display:flex; gap:56px; align-items:flex-start; margin-top:40px;">
<div style="display:flex; flex-direction:column; gap:16px; flex:none;">
<div style="font:600 12px 'IBM Plex Mono'; color:#46505b; letter-spacing:0.08em; text-transform:uppercase;">A · Star by name (current)</div>
<div style="width:393px; height:812px; background:#05080c; border-radius:52px; padding:11px; box-shadow:0 40px 80px -20px rgba(10,20,35,0.45), 0 0 0 2px #1c2530; flex:none;">
<div style="width:100%; height:100%; border-radius:42px; overflow:hidden; position:relative; background:#0b1118;">
<dc-import name="GridApp" variant="compact" theme="dark" lp-flag="star" hint-size="100%,100%"></dc-import>
</div>
</div>
<div style="font:400 12px 'IBM Plex Sans'; color:#6a6f76; max-width:393px; line-height:1.5;">Inline ★ before the name. Lightest touch, zero extra height, but quietest.</div>
</div>
<div style="display:flex; flex-direction:column; gap:16px; flex:none;">
<div style="font:600 12px 'IBM Plex Mono'; color:#46505b; letter-spacing:0.08em; text-transform:uppercase;">B · Corner earmark</div>
<div style="width:393px; height:812px; background:#05080c; border-radius:52px; padding:11px; box-shadow:0 40px 80px -20px rgba(10,20,35,0.45), 0 0 0 2px #1c2530; flex:none;">
<div style="width:100%; height:100%; border-radius:42px; overflow:hidden; position:relative; background:#0b1118;">
<dc-import name="GridApp" variant="compact" theme="dark" lp-flag="earmark" hint-size="100%,100%"></dc-import>
</div>
</div>
<div style="font:400 12px 'IBM Plex Sans'; color:#6a6f76; max-width:393px; line-height:1.5;">Folded blue triangle in the top-left corner. Scannable down the left edge, no height cost.</div>
</div>
<div style="display:flex; flex-direction:column; gap:16px; flex:none;">
<div style="font:600 12px 'IBM Plex Mono'; color:#46505b; letter-spacing:0.08em; text-transform:uppercase;">C · Thin top banner</div>
<div style="width:393px; height:812px; background:#05080c; border-radius:52px; padding:11px; box-shadow:0 40px 80px -20px rgba(10,20,35,0.45), 0 0 0 2px #1c2530; flex:none;">
<div style="width:100%; height:100%; border-radius:42px; overflow:hidden; position:relative; background:#0b1118;">
<dc-import name="GridApp" variant="compact" theme="dark" lp-flag="banner" hint-size="100%,100%"></dc-import>
</div>
</div>
<div style="font:400 12px 'IBM Plex Sans'; color:#6a6f76; max-width:393px; line-height:1.5;">Slim accent bar across the card top. Most assertive — strongest "special to us," heaviest on a dense list.</div>
</div>
</div>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;:{&quot;width&quot;:1300,&quot;height&quot;:920}}"></script>
</body>
</html>