export type ThemeMode = "light" | "dark" | "system"; export type Palette = "clay" | "indigo" | "sage" | "plum" | "ink"; 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 }> = [ { id: "clay", label: "Clay", hex: "#B85C3C" }, { id: "indigo", label: "Indigo ink", hex: "#3E5B8A" }, { id: "sage", label: "Sage", hex: "#6F8B5E" }, { id: "plum", label: "Plum", hex: "#7B4F6E" }, { id: "ink", label: "Ink (mono)", hex: "#1F1B16" }, ]; 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". export function navStyleToDataNav(style: NavStyle): "sidebar" | "rail" | "top" | "fab" { switch (style) { case "compact-rail": return "rail"; case "top-nav": return "top"; case "fab-only": return "fab"; default: return "sidebar"; } }