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/Contacts Mobile.dc.html
+48
View File
@@ -0,0 +1,48 @@
<!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;">Ten31 CRM — Contacts, mobile</div>
<div style="font:400 14px 'IBM Plex Sans'; color:#5a5f66; margin-top:8px; max-width:800px; line-height:1.5;">People-first directory (distinct from the org-centric Grid). Search by name, email, or firm; tap a contact for their detail — email, organization (stage, committed, last-contact staleness), and a quick <strong style="color:#3b3f46;">Log communication</strong>. Existing-LP contacts carry a blue avatar ring + the corner earmark on their org. The top-bar pencil opens the same quick-log. Both phones are live; shown in dark and light.</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;">Dark mode · default</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="ContactsApp" theme="dark" hint-size="100%,100%"></dc-import>
</div>
</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;">Light mode</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:#eaeef3;">
<dc-import name="ContactsApp" theme="light" hint-size="100%,100%"></dc-import>
</div>
</div>
</div>
</div>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;:{&quot;width&quot;:980,&quot;height&quot;:980}}"></script>
</body>
</html>