112 lines
3.9 KiB
TypeScript
112 lines
3.9 KiB
TypeScript
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<string>(PALETTES.map((p) => p.id));
|
|
export const VALID_FONT_PAIRS = new Set<string>(FONT_PAIRS.map((p) => p.id));
|
|
export const VALID_DENSITIES = new Set<string>(DENSITIES.map((p) => p.id));
|
|
export const VALID_DASH_LAYOUTS = new Set<string>(DASH_LAYOUTS.map((p) => p.id));
|
|
export const VALID_CAL_VIEWS = new Set<string>(CAL_VIEWS.map((p) => p.id));
|
|
export const VALID_NAV_STYLES = new Set<string>(NAV_STYLES.map((p) => p.id));
|
|
export const VALID_THEME_MODES = new Set<string>(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 <html>.
|
|
// 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";
|
|
}
|
|
}
|