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.
71 lines
3.7 KiB
HTML
71 lines
3.7 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>
|
|
<script src="store.js"></script>
|
|
<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 — mobile prototype</div>
|
|
<div style="font:400 14px 'IBM Plex Sans'; color:#5a5f66; margin-top:8px; max-width:620px; line-height:1.5;">All four surfaces in one navigable app. The bottom tab bar switches between Grid, Pipeline, Reminders, and Contacts; theme and data are shared — a stage move, a logged communication, or a reminder edit on one tab shows up on the others. Tap around.</div>
|
|
<div style="display:flex; gap:48px; align-items:flex-start; margin-top:36px;">
|
|
<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;">Ten31 CRM · {{ tabLabel }}</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:{{ frameBg }};">
|
|
<sc-if value="{{ isGrid }}" hint-placeholder-val="{{ true }}">
|
|
<dc-import name="GridApp" theme="{{ theme }}" variant="compact" hint-size="100%,100%"></dc-import>
|
|
</sc-if>
|
|
<sc-if value="{{ isPipeline }}" hint-placeholder-val="{{ false }}">
|
|
<dc-import name="PipelineApp" theme="{{ theme }}" mode="swipe" hint-size="100%,100%"></dc-import>
|
|
</sc-if>
|
|
<sc-if value="{{ isReminders }}" hint-placeholder-val="{{ false }}">
|
|
<dc-import name="RemindersApp" theme="{{ theme }}" hint-size="100%,100%"></dc-import>
|
|
</sc-if>
|
|
<sc-if value="{{ isContacts }}" hint-placeholder-val="{{ false }}">
|
|
<dc-import name="ContactsApp" theme="{{ theme }}" hint-size="100%,100%"></dc-import>
|
|
</sc-if>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</x-dc>
|
|
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":620,"height":980}}">
|
|
class Component extends DCLogic {
|
|
componentDidMount() {
|
|
if (window.T31Store) this._unsub = window.T31Store.subscribe(() => this.forceUpdate());
|
|
}
|
|
componentWillUnmount() { if (this._unsub) this._unsub(); }
|
|
|
|
renderVals() {
|
|
const S = window.T31Store || { tab: 'grid', theme: 'dark' };
|
|
const map = { grid: 'GridApp', pipeline: 'PipelineApp', reminders: 'RemindersApp', contacts: 'ContactsApp' };
|
|
const labels = { grid: 'Grid', pipeline: 'Pipeline', reminders: 'Reminders', contacts: 'Contacts' };
|
|
const tab = map[S.tab] ? S.tab : 'grid';
|
|
return {
|
|
tabLabel: labels[tab],
|
|
theme: S.theme,
|
|
frameBg: S.theme === 'light' ? '#eaeef3' : '#0b1118',
|
|
isGrid: tab === 'grid', isPipeline: tab === 'pipeline',
|
|
isReminders: tab === 'reminders', isContacts: tab === 'contacts',
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|