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.
97 lines
7.1 KiB
JSON
97 lines
7.1 KiB
JSON
{
|
||
"$description": "Ten31 CRM design tokens (W3C DTCG). Extracted as-built from frontend/index.html :root + an inline-style census, 2026-06-18. The app currently inlines these values (CSS :root vars + ~1300 inline style objects); this file is the canonical source going forward. Some real values (composite shadows, the radial-gradient page background) do not map to DTCG primitives and are documented as strings.",
|
||
"color": {
|
||
"bg": {
|
||
"base": { "$type": "color", "$value": "#0b1118", "$description": "Page background (darkest layer). Also the de-facto theme color; use for a future PWA manifest theme_color." },
|
||
"panel": { "$type": "color", "$value": "#111a27", "$description": "Cards, sections, modals, sidebar, slide-over." },
|
||
"elevated": { "$type": "color", "$value": "#152233", "$description": "Elevated/hover panel state." },
|
||
"hover": { "$type": "color", "$value": "#1b2a3a", "$description": "Generic hover background." },
|
||
"input": { "$type": "color", "$value": "#0d1622", "$description": "Form input + table-header background (recessed)." }
|
||
},
|
||
"border": {
|
||
"default": { "$type": "color", "$value": "#263548", "$description": "All borders, dividers, table grid lines. The most-used non-text color." },
|
||
"strong": { "$type": "color", "$value": "#35506a", "$description": "Emphasized border / card hover border." }
|
||
},
|
||
"text": {
|
||
"primary": { "$type": "color", "$value": "#e5edf5", "$description": "Headings, primary content." },
|
||
"secondary": { "$type": "color", "$value": "#c7d3e0", "$description": "Body text, labels." },
|
||
"muted": { "$type": "color", "$value": "#8ea2b7", "$description": "Hints, metadata, table headers. Highest-frequency text color." },
|
||
"subtle": { "$type": "color", "$value": "#70859b", "$description": "Very secondary labels / inactive tabs." }
|
||
},
|
||
"accent": {
|
||
"default": { "$type": "color", "$value": "#3b82c4", "$description": "Primary action, active nav, links, focus ring. The one vibrant brand color." },
|
||
"strong": { "$type": "color", "$value": "#2f6ea9", "$description": "Accent hover / gradient endpoint." },
|
||
"soft": { "$type": "color", "$value": "#3b82c422", "$description": "Accent at ~13% alpha — tinted badge/active backgrounds." },
|
||
"light": { "$type": "color", "$value": "#93c5fd", "$description": "Accent text on dark tinted backgrounds (badges, pills)." }
|
||
},
|
||
"semantic": {
|
||
"success": { "$type": "color", "$value": "#10b981", "$description": "Money / positive values." },
|
||
"success-text": { "$type": "color", "$value": "#6ee7b7" },
|
||
"warning": { "$type": "color", "$value": "#f59e0b", "$description": "Advisor / warning." },
|
||
"warning-text": { "$type": "color", "$value": "#fcd34d" },
|
||
"due-soon": { "$type": "color", "$value": "#e0b341", "$description": "Reminder due-soon urgency." },
|
||
"danger": { "$type": "color", "$value": "#dc2626", "$description": "Destructive action button." },
|
||
"danger-soft": { "$type": "color", "$value": "#e06c6c", "$description": "Overdue / error emphasis." },
|
||
"danger-text": { "$type": "color", "$value": "#fca5a5", "$description": "Inline error text." }
|
||
},
|
||
"constant": {
|
||
"white": { "$type": "color", "$value": "#ffffff", "$description": "Text on accent fills; brand mark." }
|
||
}
|
||
},
|
||
"font": {
|
||
"family": {
|
||
"sans": { "$type": "fontFamily", "$value": ["IBM Plex Sans", "Avenir Next", "Segoe UI", "sans-serif"] },
|
||
"mono": { "$type": "fontFamily", "$value": ["IBM Plex Mono", "monospace"], "$description": "Numbers, dates, badges, logs, nav icons." }
|
||
},
|
||
"size": {
|
||
"xs": { "$type": "dimension", "$value": "11px", "$description": "Table headers, badges, micro-labels." },
|
||
"sm": { "$type": "dimension", "$value": "12px", "$description": "Help text, metadata." },
|
||
"md": { "$type": "dimension", "$value": "13px", "$description": "Body / table cells / inputs (current desktop base). NOTE: bump toward 15–16px for mobile body — see BRIEF.md." },
|
||
"lg": { "$type": "dimension", "$value": "14px", "$description": "Nav items." },
|
||
"xl": { "$type": "dimension", "$value": "16px", "$description": "Section titles." },
|
||
"2xl": { "$type": "dimension", "$value": "18px", "$description": "Modal titles." },
|
||
"3xl": { "$type": "dimension", "$value": "20px", "$description": "Page/header title." },
|
||
"4xl": { "$type": "dimension", "$value": "24px", "$description": "Login title, KPI values." }
|
||
},
|
||
"weight": {
|
||
"regular": { "$type": "fontWeight", "$value": 400 },
|
||
"medium": { "$type": "fontWeight", "$value": 500 },
|
||
"semibold": { "$type": "fontWeight", "$value": 600 },
|
||
"bold": { "$type": "fontWeight", "$value": 700 }
|
||
}
|
||
},
|
||
"space": {
|
||
"2xs": { "$type": "dimension", "$value": "4px" },
|
||
"xs": { "$type": "dimension", "$value": "6px" },
|
||
"sm": { "$type": "dimension", "$value": "8px" },
|
||
"md": { "$type": "dimension", "$value": "12px", "$description": "Most common padding/gap unit." },
|
||
"lg": { "$type": "dimension", "$value": "16px" },
|
||
"xl": { "$type": "dimension", "$value": "20px", "$description": "Sidebar/header/content padding." },
|
||
"2xl": { "$type": "dimension", "$value": "24px", "$description": "Modal padding." }
|
||
},
|
||
"radius": {
|
||
"sm": { "$type": "dimension", "$value": "4px", "$description": "Badges." },
|
||
"md": { "$type": "dimension", "$value": "6px", "$description": "Buttons, inputs, kanban cards." },
|
||
"lg": { "$type": "dimension", "$value": "8px", "$description": "Cards, nav items, sections." },
|
||
"xl": { "$type": "dimension", "$value": "12px", "$description": "Modals." },
|
||
"pill": { "$type": "dimension", "$value": "999px", "$description": "Pills, skeleton lines." }
|
||
},
|
||
"shadow": {
|
||
"$description": "Real composite shadows from the as-built CSS; kept as raw strings (multi-layer + inset highlight don't map to a single DTCG shadow token).",
|
||
"card": { "$type": "shadow", "$value": "0 14px 26px rgba(2,12,24,0.28), inset 0 1px 0 #ffffff07" },
|
||
"card-hover":{ "$type": "shadow", "$value": "0 10px 20px rgba(7,17,30,0.35)" },
|
||
"button-hover": { "$type": "shadow", "$value": "0 6px 14px rgba(12,40,68,0.35)" },
|
||
"modal": { "$type": "shadow", "$value": "0 24px 56px rgba(1,8,17,0.5), inset 0 1px 0 #ffffff08" },
|
||
"slide-over":{ "$type": "shadow", "$value": "-12px 0 32px rgba(4,10,18,0.45), inset 1px 0 0 #ffffff07" },
|
||
"toast": { "$type": "shadow", "$value": "0 10px 24px rgba(4,12,22,0.45)" }
|
||
},
|
||
"motion": {
|
||
"fast": { "$type": "duration", "$value": "120ms", "$description": "Press/transform feedback." },
|
||
"base": { "$type": "duration", "$value": "150ms", "$description": "Hover color/shadow." },
|
||
"panel": { "$type": "duration", "$value": "300ms", "$description": "Slide-over / toast entry." }
|
||
},
|
||
"_unmappable": {
|
||
"$description": "Documented-but-not-tokenized: the page background is a layered radial-gradient ('radial-gradient(1200px 600px at 15% -10%, #1a3c5e44, transparent 60%), radial-gradient(1000px 500px at 90% 0%, #27496b33, transparent 58%), #0b1118') — see DESIGN.md §Depth/elevation."
|
||
}
|
||
}
|