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.
50 lines
3.3 KiB
HTML
50 lines
3.3 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&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 — Pipeline, mobile</div>
|
||
<div style="font:400 14px 'IBM Plex Sans'; color:#5a5f66; margin-top:8px; max-width:780px; line-height:1.5;">Canonical Pipeline — swipe between stages. Same shell, data, and theme system as the Grid. Both phones are live: tap a stage chip (or swipe) to move between stages, advance a deal with the inline ‹ / ›, or tap a card for its detail — quick stage move, full activity timeline, and <strong style="color:#3b3f46;">+ Log</strong> to record a communication right here. 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;">Swipe stages · dark (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="PipelineApp" mode="swipe" theme="dark" 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;">One stage fills the screen; horizontal snap + a sticky segmented control. Tap a card to view its activity and log a new communication.</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;">Swipe stages · light</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="PipelineApp" mode="swipe" theme="light" 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;">Same surface, light theme — toggle in-app with the ☀/☾ control in the top bar.</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</x-dc>
|
||
</body>
|
||
</html>
|