From 24f52fad0a8e9663e4df1efc88df140283eeaeb2 Mon Sep 17 00:00:00 2001 From: Thomas Joise Date: Sun, 19 Jul 2026 01:37:17 +0530 Subject: [PATCH] feat: theme palettes + Geist font + dashboard cockpit styles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add a `data-palette` theme axis (neutral ground) alongside mode + accent: Warm (default), Slate, Graphite, Zinc — selectable in Settings > Appearance, persisted per browser. Backward-compatible: `warm` needs no attribute so the existing look is unchanged; accent (7 hues) and light/dark stay orthogonal. Swap the UI font Inter -> Geist Variable + Geist Mono Variable (bundled offline). Add the `.dash-*` cockpit styles finishing the redesigned Dashboard markup already in tree (flat Today hero, KPI row, reminder queue, bento sections; low-colour, red reserved for real failures). packages/ui theme.ts/tokens.css/ThemeSwitcher.tsx are shared — restyles every page. Typecheck clean; 410 tests pass. Co-Authored-By: Claude Opus 4.8 (1M context) --- apps/hq-web/package.json | 2 + apps/hq-web/src/app.css | 66 ++++++++++++++++++++-- apps/hq-web/src/main.tsx | 4 +- apps/hq-web/src/pages/Settings.tsx | 2 +- package-lock.json | 20 +++++++ packages/ui/src/ThemeSwitcher.tsx | 89 ++++++++++++++++++++++-------- packages/ui/src/theme.ts | 17 ++++++ packages/ui/src/tokens.css | 53 ++++++++++++++++-- 8 files changed, 219 insertions(+), 34 deletions(-) diff --git a/apps/hq-web/package.json b/apps/hq-web/package.json index bff7492..ea090f0 100644 --- a/apps/hq-web/package.json +++ b/apps/hq-web/package.json @@ -10,6 +10,8 @@ "typecheck": "tsc -p tsconfig.json" }, "dependencies": { + "@fontsource-variable/geist": "^5.2.9", + "@fontsource-variable/geist-mono": "^5.2.8", "@sims/domain": "*", "@sims/ui": "*", "lucide-react": "^1.24.0", diff --git a/apps/hq-web/src/app.css b/apps/hq-web/src/app.css index f44dd45..e948b3a 100644 --- a/apps/hq-web/src/app.css +++ b/apps/hq-web/src/app.css @@ -116,10 +116,68 @@ .hq-content { overflow-y: auto; flex: 1; padding: 4px 20px 20px; } .hq-scrim { display: none; } -/* Dashboard section grid (Task 7). */ -.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; align-items: start; } -.dash-grid > section { min-width: 0; } -@media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr; } } +/* ============================================================================ + Dashboard cockpit (D29) — a calm command view: a "Today" hero strip, the four + KPI stat cards, then a bento grid of section cards. Deliberately low-colour: + ink + warm neutrals, teal accent only for state/links, red reserved for real + failures. Scoped to .dash-* so the flat house style on every other page is + untouched. (Replaces the old two-column .dash-grid.) + ============================================================================ */ +.dash-hero { + border: 1px solid var(--border); border-radius: var(--radius-lg); + background: var(--bg-raised); + padding: 20px 22px; margin: 6px 0 18px; + display: flex; gap: 24px; align-items: center; flex-wrap: wrap; +} +.dash-hero-l { flex: 1 1 320px; min-width: 260px; } +.dash-hero-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); } +.dash-hero h1 { font-size: 24px; margin: 7px 0 4px; } +.dash-hero p { margin: 0; color: var(--text-dim); max-width: 54ch; } +.dash-hero-r { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; } +.dash-money { text-align: right; } +.dash-money .k { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); } +.dash-money .v { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; margin-top: 3px; } +.dash-hero-actions { display: flex; gap: 8px; } +@media (max-width: 760px) { + .dash-hero-r { align-items: flex-start; width: 100%; } + .dash-money { text-align: left; } +} + +/* Everyone / Mine scope toggle (managerial only) */ +.dash-seg { display: inline-flex; background: var(--bg-inset); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; margin-top: 14px; } +.dash-seg button { border: none; background: none; cursor: pointer; font: 600 12.5px var(--font); color: var(--text-dim); padding: 5px 14px; border-radius: 999px; } +.dash-seg button.on { background: var(--bg-raised); color: var(--text); box-shadow: var(--shadow-md); } + +/* Section header shared by the queue block and the bento cards */ +.dash-head { display: flex; align-items: center; gap: 10px; padding: 2px 0 10px; } +.dash-head h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-dim); margin: 0; } +.dash-head .count { font-family: var(--mono); font-size: 11px; color: var(--text-dim); background: var(--bg-inset); border-radius: 999px; padding: 1px 8px; } +.dash-head a { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--accent-strong); text-decoration: none; } +.dash-head a:hover { text-decoration: underline; } +[data-theme='dark'] .dash-head a { color: var(--accent); } + +/* the queue block sits above the bento; its DataTable keeps its own frame */ +.dash-queue { margin: 18px 0 10px; } +.dash-cap { margin-top: 8px; font-size: 12.5px; color: var(--text-dim); } + +/* bento grid of read-only section cards */ +.dash-bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 4px; align-items: start; } +.dash-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; min-width: 0; } +.dash-card .dash-head { padding: 13px 15px 9px; } +/* Long lists scroll inside the card — reachable in full, never silently capped (rule 8). */ +.dash-list { display: flex; flex-direction: column; max-height: 304px; overflow-y: auto; } +.dash-empty { padding: 14px 15px 16px; color: var(--text-dim); font-size: 13px; border-top: 1px solid var(--border); } +.dash-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 9px 15px; border-top: 1px solid var(--border); background: none; color: inherit; font: inherit; } +button.dash-row { cursor: pointer; } +button.dash-row:hover { background: var(--accent-soft); } +.dash-row .rc { min-width: 0; flex: 1; } +.dash-row .t { display: block; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +.dash-row .s { display: block; font-size: 12px; color: var(--text-dim); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +.dash-row .r { text-align: right; white-space: nowrap; flex-shrink: 0; } +.dash-row .amt { display: block; font-variant-numeric: tabular-nums lining-nums; font-size: 13px; font-weight: 600; } +.dash-row .sub { display: block; font-size: 11.5px; color: var(--text-dim); margin-top: 1px; } + +@media (max-width: 900px) { .dash-bento { grid-template-columns: 1fr; } } /* Login — split panel (Task 13). */ .login-wrap { height: 100vh; display: flex; align-items: stretch; justify-content: center; } diff --git a/apps/hq-web/src/main.tsx b/apps/hq-web/src/main.tsx index 17178c9..15906b3 100644 --- a/apps/hq-web/src/main.tsx +++ b/apps/hq-web/src/main.tsx @@ -1,7 +1,7 @@ import { createRoot } from 'react-dom/client' import { HashRouter, Navigate, Route, Routes } from 'react-router-dom' -import '@fontsource-variable/inter' -import '@fontsource-variable/jetbrains-mono' +import '@fontsource-variable/geist' +import '@fontsource-variable/geist-mono' import '../../../packages/ui/src/tokens.css' import './app.css' import { initTheme, ToastProvider } from '@sims/ui' diff --git a/apps/hq-web/src/pages/Settings.tsx b/apps/hq-web/src/pages/Settings.tsx index 6649c67..832347c 100644 --- a/apps/hq-web/src/pages/Settings.tsx +++ b/apps/hq-web/src/pages/Settings.tsx @@ -385,7 +385,7 @@ function AppearancePanel() {

Appearance

- Mode and accent are stored in this browser only — every signed-in user picks their own. + Palette, accent and mode are stored in this browser only — every signed-in user picks their own.

diff --git a/package-lock.json b/package-lock.json index 3c836a7..f6b24f1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41,6 +41,8 @@ "name": "@sims/hq-web", "version": "0.1.0", "dependencies": { + "@fontsource-variable/geist": "^5.2.9", + "@fontsource-variable/geist-mono": "^5.2.8", "@sims/domain": "*", "@sims/ui": "*", "lucide-react": "^1.24.0", @@ -511,6 +513,24 @@ "node": ">=18" } }, + "node_modules/@fontsource-variable/geist": { + "version": "5.2.9", + "resolved": "https://registry.npmjs.org/@fontsource-variable/geist/-/geist-5.2.9.tgz", + "integrity": "sha512-TP+QSBG3wxKGPE33CbMy/L0Nu3qvJ6Fy81Yc4LnQ95xH+i+cfEp8fyU8/kfV14YwszxIFPhnoMTbjL71waVpyQ==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, + "node_modules/@fontsource-variable/geist-mono": { + "version": "5.2.8", + "resolved": "https://registry.npmjs.org/@fontsource-variable/geist-mono/-/geist-mono-5.2.8.tgz", + "integrity": "sha512-KI5bj+hkkRiHttYHmccotUZ80ZuZyai+RwI1d7UId0clkx/jXxlo8qYK8j54WzmpBjtMoEMPyllV7faDcj+6RA==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@fontsource-variable/inter": { "version": "5.2.8", "license": "OFL-1.1", diff --git a/packages/ui/src/ThemeSwitcher.tsx b/packages/ui/src/ThemeSwitcher.tsx index 82ce869..e6e1d66 100644 --- a/packages/ui/src/ThemeSwitcher.tsx +++ b/packages/ui/src/ThemeSwitcher.tsx @@ -1,5 +1,8 @@ import { useState } from 'react' -import { ACCENTS, getAccent, getThemeMode, setAccent, setThemeMode, type Accent } from './theme' +import { + ACCENTS, PALETTES, getAccent, getPalette, getThemeMode, + setAccent, setPalette, setThemeMode, type Accent, type Palette, +} from './theme' const SWATCH: Record = { teal: '#115e59', @@ -11,8 +14,19 @@ const SWATCH: Record = { amber: '#b97e10', } +/** A two-tone paper/ink chip that previews each palette's neutral ground. */ +const PALETTE_SWATCH: Record = { + warm: 'linear-gradient(135deg, #fafaf7 50%, #1a1a17 50%)', + slate: 'linear-gradient(135deg, #f4f5f8 50%, #191c22 50%)', + graphite: 'linear-gradient(135deg, #eef1f1 50%, #14191a 50%)', + zinc: 'linear-gradient(135deg, #fafafa 50%, #18181b 50%)', +} +const PALETTE_LABEL: Record = { + warm: 'Warm', slate: 'Slate', graphite: 'Graphite', zinc: 'Zinc', +} + /** Just the light/dark toggle — a single small button for the top bar. The full - * accent picker lives in Settings → Appearance (keeps the header uncluttered). */ + * palette + accent picker lives in Settings → Appearance (keeps the header uncluttered). */ export function ModeToggle() { const [mode, setMode] = useState(getThemeMode()) return ( @@ -29,37 +43,66 @@ export function ModeToggle() { ) } -/** Compact mode toggle + accent picker; drops into any header (used in Settings). */ +/** Palette + accent + mode picker; drops into any header (used in Settings). The + * three axes are independent — neutral ground, accent hue, and light/dark. */ export function ThemeSwitcher() { const [mode, setMode] = useState(getThemeMode()) const [accent, setAccentState] = useState(getAccent()) + const [palette, setPaletteState] = useState(getPalette()) return (
- {ACCENTS.map((a) => ( +
+ Palette + {PALETTES.map((p) => ( + + ))} +
+ +
+ Accent + {ACCENTS.map((a) => ( +
+ +
+ Mode + > + {mode === 'light' ? '☾ Dark' : '☀ Light'} + +
) } diff --git a/packages/ui/src/theme.ts b/packages/ui/src/theme.ts index 8bc8dfb..b4095b6 100644 --- a/packages/ui/src/theme.ts +++ b/packages/ui/src/theme.ts @@ -8,8 +8,14 @@ export type ThemeMode = 'light' | 'dark' export const ACCENTS = ['teal', 'indigo', 'blue', 'emerald', 'violet', 'rose', 'amber'] as const export type Accent = (typeof ACCENTS)[number] +/** Neutral ground. `warm` is the base (no attribute needed); the rest map to + * `[data-palette=…]` overrides in tokens.css. Orthogonal to mode + accent. */ +export const PALETTES = ['warm', 'slate', 'graphite', 'zinc'] as const +export type Palette = (typeof PALETTES)[number] + const MODE_KEY = 'ui.themeMode' const ACCENT_KEY = 'ui.accent' +const PALETTE_KEY = 'ui.palette' export function getThemeMode(): ThemeMode { return localStorage.getItem(MODE_KEY) === 'dark' ? 'dark' : 'light' @@ -20,6 +26,11 @@ export function getAccent(): Accent { return (ACCENTS as readonly string[]).includes(stored ?? '') ? (stored as Accent) : 'teal' } +export function getPalette(): Palette { + const stored = localStorage.getItem(PALETTE_KEY) + return (PALETTES as readonly string[]).includes(stored ?? '') ? (stored as Palette) : 'warm' +} + export function setThemeMode(mode: ThemeMode): void { localStorage.setItem(MODE_KEY, mode) document.documentElement.dataset['theme'] = mode @@ -30,8 +41,14 @@ export function setAccent(accent: Accent): void { document.documentElement.dataset['accent'] = accent } +export function setPalette(palette: Palette): void { + localStorage.setItem(PALETTE_KEY, palette) + document.documentElement.dataset['palette'] = palette +} + /** Call once before first render. */ export function initTheme(): void { document.documentElement.dataset['theme'] = getThemeMode() document.documentElement.dataset['accent'] = getAccent() + document.documentElement.dataset['palette'] = getPalette() } diff --git a/packages/ui/src/tokens.css b/packages/ui/src/tokens.css index 395ca0a..822785b 100644 --- a/packages/ui/src/tokens.css +++ b/packages/ui/src/tokens.css @@ -8,8 +8,8 @@ ================================================================ */ :root { - --font: 'Inter Variable', 'Segoe UI', system-ui, -apple-system, sans-serif; - --mono: 'JetBrains Mono Variable', 'Cascadia Mono', Consolas, monospace; + --font: 'Geist Variable', 'Segoe UI', system-ui, -apple-system, sans-serif; + --mono: 'Geist Mono Variable', 'Cascadia Mono', Consolas, monospace; --radius-sm: 4px; --radius: 6px; @@ -85,6 +85,37 @@ [data-theme='dark'][data-accent='rose'] { --accent: #e57ba3; --accent-strong: #d4608c; } [data-theme='dark'][data-accent='amber'] { --accent: #d9a247; --accent-strong: #c08a2e; } +/* ================= palette (neutral ground) ================= + A second theme axis alongside mode + accent: the neutral greys. `warm` (the + default, defined in the base light/dark blocks above) needs no attribute; the + others override only the neutral tokens, per mode. Accent stays orthogonal, and + the soft state colours are color-mix over --bg-raised/--accent so they follow. + Applied as by theme.ts; selectable in Settings → Appearance. */ +[data-palette='slate'][data-theme='light'] { + --bg: #f4f5f8; --bg-raised: #ffffff; --bg-hover: #eceef3; --bg-inset: #eef0f4; + --border: #e1e4ea; --border-strong: #ccd1da; --text: #191c22; --text-dim: #5a616d; --scrollbar: #ccd1da; +} +[data-palette='slate'][data-theme='dark'] { + --bg: #0f1217; --bg-raised: #171b21; --bg-hover: #1f242b; --bg-inset: #0b0e12; + --border: #262c34; --border-strong: #363d47; --text: #e6e9ef; --text-dim: #98a0ac; --scrollbar: #363d47; +} +[data-palette='graphite'][data-theme='light'] { + --bg: #f3f5f5; --bg-raised: #ffffff; --bg-hover: #e9eded; --bg-inset: #eef1f1; + --border: #e0e5e5; --border-strong: #ccd3d3; --text: #14191a; --text-dim: #566060; --scrollbar: #ccd3d3; +} +[data-palette='graphite'][data-theme='dark'] { + --bg: #101315; --bg-raised: #191d1f; --bg-hover: #222729; --bg-inset: #0b0e0f; + --border: #272d2f; --border-strong: #383f42; --text: #e7eaeb; --text-dim: #929a9c; --scrollbar: #383f42; +} +[data-palette='zinc'][data-theme='light'] { + --bg: #fafafa; --bg-raised: #ffffff; --bg-hover: #f1f1f2; --bg-inset: #f4f4f5; + --border: #e4e4e7; --border-strong: #d1d1d6; --text: #18181b; --text-dim: #70707a; --scrollbar: #d1d1d6; +} +[data-palette='zinc'][data-theme='dark'] { + --bg: #0b0b0d; --bg-raised: #161618; --bg-hover: #202023; --bg-inset: #0e0e10; + --border: #26262a; --border-strong: #37373d; --text: #ededf0; --text-dim: #9a9aa3; --scrollbar: #37373d; +} + /* ================= base ================= */ * { box-sizing: border-box; } html, body, #root { height: 100%; margin: 0; } @@ -92,7 +123,6 @@ body { background: var(--bg); color: var(--text); font: 400 14px/1.5 var(--font); - font-feature-settings: 'cv05', 'cv11'; -webkit-font-smoothing: antialiased; transition: background var(--speed) ease, color var(--speed) ease; } @@ -355,7 +385,22 @@ table.wf tbody tr.tone-ok:hover td { filter: brightness(0.97); } } /* ================= theme switcher ================= */ -.wf-themer { display: flex; align-items: center; gap: 6px; } +.wf-themer { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } +.wf-themer .themer-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } +.wf-themer .themer-lbl { + width: 62px; flex: none; font-size: 11px; font-weight: 700; + text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); +} +.wf-themer .pchip { + display: inline-flex; align-items: center; gap: 7px; + border: 1px solid var(--border); background: var(--bg-raised); color: var(--text-dim); + border-radius: 999px; padding: 4px 13px 4px 5px; cursor: pointer; + font: 600 12.5px var(--font); + transition: border-color var(--speed), color var(--speed), background var(--speed); +} +.wf-themer .pchip:hover { border-color: var(--border-strong); color: var(--text); } +.wf-themer .pchip.active { border-color: var(--accent); color: var(--text); background: var(--accent-soft); } +.wf-themer .pswatch { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--border-strong); flex: none; } .wf-themer .swatch { width: 16px; height: 16px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; padding: 0;