- 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 (