export type ThemeMode = "light" | "dark" | "system"; export type Palette = | "clay" | "indigo" | "sage" | "plum" | "ink" | "rose" | "amber" | "ocean" | "slate" | "forest"; export type FontPair = "serif-sans" | "newsreader" | "fraunces" | "sans-only"; export type Density = "compact" | "regular" | "comfy"; export type DashLayout = "classic" | "split" | "glance"; export type CalView = "month" | "week" | "day"; export type NavStyle = "rail-desktop" | "compact-rail" | "top-nav" | "fab-only"; export const PALETTES: ReadonlyArray<{ id: Palette; label: string; hex: string; paper: string }> = [ { id: "clay", label: "Clay", hex: "#B85C3C", paper: "#fbf9f4" }, { id: "indigo", label: "Indigo", hex: "#3E5B8A", paper: "#f4f7fb" }, { id: "sage", label: "Sage", hex: "#6F8B5E", paper: "#f5f8f2" }, { id: "plum", label: "Plum", hex: "#7B4F6E", paper: "#faf5fb" }, { id: "ink", label: "Ink", hex: "#1F1B16", paper: "#f8f7f5" }, { id: "rose", label: "Rose", hex: "#B5485E", paper: "#fdf5f7" }, { id: "amber", label: "Amber", hex: "#B07D1E", paper: "#fdf9f0" }, { id: "ocean", label: "Ocean", hex: "#2E7A8A", paper: "#f2f9fb" }, { id: "slate", label: "Slate", hex: "#4A657A", paper: "#f4f6f9" }, { id: "forest", label: "Forest", hex: "#3A6645", paper: "#f2f7f3" }, ]; export const FONT_PAIRS: ReadonlyArray<{ id: FontPair; label: string }> = [ { id: "serif-sans", label: "Source Serif + Inter" }, { id: "newsreader", label: "Newsreader + Inter" }, { id: "fraunces", label: "Fraunces + Inter" }, { id: "sans-only", label: "Inter only" }, ]; export const DENSITIES: ReadonlyArray<{ id: Density; label: string }> = [ { id: "compact", label: "Compact" }, { id: "regular", label: "Regular" }, { id: "comfy", label: "Comfy" }, ]; export const DASH_LAYOUTS: ReadonlyArray<{ id: DashLayout; label: string }> = [ { id: "classic", label: "Classic" }, { id: "split", label: "Split" }, { id: "glance", label: "Glance" }, ]; export const CAL_VIEWS: ReadonlyArray<{ id: CalView; label: string }> = [ { id: "month", label: "Month" }, { id: "week", label: "Week" }, { id: "day", label: "Day" }, ]; export const NAV_STYLES: ReadonlyArray<{ id: NavStyle; label: string }> = [ { id: "rail-desktop", label: "Sidebar" }, { id: "compact-rail", label: "Compact rail" }, { id: "top-nav", label: "Top nav" }, { id: "fab-only", label: "FAB only" }, ]; export const THEME_MODES: ReadonlyArray<{ id: ThemeMode; label: string }> = [ { id: "light", label: "Light" }, { id: "dark", label: "Dark" }, { id: "system", label: "System" }, ]; export const VALID_PALETTES = new Set(PALETTES.map((p) => p.id)); export const VALID_FONT_PAIRS = new Set(FONT_PAIRS.map((p) => p.id)); export const VALID_DENSITIES = new Set(DENSITIES.map((p) => p.id)); export const VALID_DASH_LAYOUTS = new Set(DASH_LAYOUTS.map((p) => p.id)); export const VALID_CAL_VIEWS = new Set(CAL_VIEWS.map((p) => p.id)); export const VALID_NAV_STYLES = new Set(NAV_STYLES.map((p) => p.id)); export const VALID_THEME_MODES = new Set(THEME_MODES.map((p) => p.id)); export type ThemeState = { palette: Palette; mode: ThemeMode; fontPair: FontPair; density: Density; dashLayout: DashLayout; calView: CalView; navStyle: NavStyle; }; export const DEFAULT_THEME: ThemeState = { palette: "clay", mode: "system", fontPair: "serif-sans", density: "regular", dashLayout: "classic", calView: "month", navStyle: "rail-desktop", }; // Map our nav style preference to the data-nav attribute we set on . // On mobile (handled by NavModeProvider) we override to "bottom" or "fab". // fab-only has no desktop equivalent — falls back to sidebar so the nav doesn't disappear. export function navStyleToDataNav(style: NavStyle): "sidebar" | "rail" | "top" | "fab" { switch (style) { case "compact-rail": return "rail"; case "top-nav": return "top"; default: return "sidebar"; } }