Keysat
e6a89450da
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.
67 lines
4.2 KiB
HTML
67 lines
4.2 KiB
HTML
<!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&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Hanken+Grotesk:wght@400;500;600;700&family=Spline+Sans+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;">Type exploration — Fundraising Grid</div>
|
|
<div style="font:400 14px 'IBM Plex Sans'; color:#5a5f66; margin-top:8px; max-width:820px; line-height:1.5;">Same screen, three type pairings (UI sans + the mono that carries every number, date and badge). The current IBM Plex on the left; two alternatives that keep the serious, engineered, financial-instrument character. All three are live and identical apart from type — scan the names, the mono $ figures, and the uppercase badges. Nothing else changed.</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="display:flex; flex-direction:column; gap:2px;">
|
|
<div style="font:600 12px 'IBM Plex Mono'; color:#46505b; letter-spacing:0.08em; text-transform:uppercase;">Current · IBM Plex</div>
|
|
<div style="font:400 12px 'IBM Plex Mono'; color:#8a8f96;">IBM Plex Sans + IBM Plex Mono</div>
|
|
</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" font="plex" hint-size="100%,100%"></dc-import>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex; flex-direction:column; gap:16px; flex:none;">
|
|
<div style="display:flex; flex-direction:column; gap:2px;">
|
|
<div style="font:600 12px 'IBM Plex Mono'; color:#46505b; letter-spacing:0.08em; text-transform:uppercase;">Option B · Manrope</div>
|
|
<div style="font:400 12px 'IBM Plex Mono'; color:#8a8f96;">Manrope + JetBrains Mono</div>
|
|
</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" font="manrope" hint-size="100%,100%"></dc-import>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex; flex-direction:column; gap:16px; flex:none;">
|
|
<div style="display:flex; flex-direction:column; gap:2px;">
|
|
<div style="font:600 12px 'IBM Plex Mono'; color:#46505b; letter-spacing:0.08em; text-transform:uppercase;">Option C · Hanken Grotesk</div>
|
|
<div style="font:400 12px 'IBM Plex Mono'; color:#8a8f96;">Hanken Grotesk + Spline Sans Mono</div>
|
|
</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" font="hanken" hint-size="100%,100%"></dc-import>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</x-dc>
|
|
</body>
|
|
</html>
|