aerimagne/MeshiTrack
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Cleanup after initial plan

Browse source
This commit is contained in:
Aerilyn Weber 2026-05-19 10:13:40 +09:00
parent d2a7e652b3
commit 245520fb50
53 changed files with 6733 additions and 621 deletions
Download patch file Download diff file Expand all files Collapse all files

35
packages/web/src/components/ThemeProvider.tsx
View file

@ -7,17 +7,27 @@ type Theme = 'light' | 'dark';
type Accent = 'sage' | 'cobalt' | 'terracotta' | 'graphite';
interface AccentTokens {
brand: string;
deep: string;
soft: string;
softInk: string;
light: { brand: string; deep: string; soft: string; softInk: string; brandInk: string };
dark: { brand: string; deep: string; soft: string; softInk: string; brandInk: string };
}
const ACCENTS: Record<Accent, AccentTokens> = {
sage: { brand: '#2f6b4a', deep: '#1e4a32', soft: '#e6efe8', softInk: '#1e4a32' },
cobalt: { brand: '#2e5aa8', deep: '#1d3d75', soft: '#e4eaf5', softInk: '#1d3d75' },
terracotta: { brand: '#b55438', deep: '#7d3825', soft: '#f6e6de', softInk: '#7d3825' },
graphite: { brand: '#2c2c28', deep: '#000000', soft: '#e8e6df', softInk: '#2c2c28' },
sage: {
light: { brand: '#10b981', deep: '#059669', soft: 'rgba(16,185,129,0.1)', softInk: '#047857', brandInk: '#ffffff' },
dark: { brand: '#34d399', deep: '#10b981', soft: 'rgba(52,211,153,0.15)', softInk: '#6ee7b7', brandInk: '#022c22' },
},
cobalt: {
light: { brand: '#3b82f6', deep: '#2563eb', soft: 'rgba(59,130,246,0.1)', softInk: '#1d4ed8', brandInk: '#ffffff' },
dark: { brand: '#60a5fa', deep: '#3b82f6', soft: 'rgba(96,165,250,0.15)', softInk: '#93c5fd', brandInk: '#172554' },
},
terracotta: {
light: { brand: '#f43f5e', deep: '#e11d48', soft: 'rgba(244,63,94,0.1)', softInk: '#be123c', brandInk: '#ffffff' },
dark: { brand: '#fb7185', deep: '#f43f5e', soft: 'rgba(251,113,133,0.15)', softInk: '#fda4af', brandInk: '#4c0519' },
},
graphite: {
light: { brand: '#52525b', deep: '#3f3f46', soft: 'rgba(82,82,91,0.1)', softInk: '#27272a', brandInk: '#ffffff' },
dark: { brand: '#a1a1aa', deep: '#71717a', soft: 'rgba(161,161,170,0.15)', softInk: '#d4d4d8', brandInk: '#18181b' },
},
};
interface ThemeContextValue {
@ -36,13 +46,14 @@ export function useTheme(): ThemeContextValue {
return ctx;
}
function applyAccent(accent: Accent) {
const ac = ACCENTS[accent];
function applyAccent(accent: Accent, theme: Theme) {
const ac = ACCENTS[accent][theme];
const r = document.documentElement.style;
r.setProperty('--brand', ac.brand);
r.setProperty('--brand-deep', ac.deep);
r.setProperty('--brand-soft', ac.soft);
r.setProperty('--brand-soft-ink', ac.softInk);
r.setProperty('--brand-ink', ac.brandInk);
r.setProperty('--viz-1', ac.brand);
}
@ -66,9 +77,9 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
// Sync accent to DOM + localStorage.
useEffect(() => {
applyAccent(accent);
applyAccent(accent, theme);
localStorage.setItem('mt-accent', accent);
}, [accent]);
}, [accent, theme]);
function setTheme(t: Theme) {
setThemeState(t);