ginnoirandClaude Opus 4.7
9612a54e52
Release / build-and-push (push) Has been cancelled
Replaces the generic shadcn/ui gray theme + horizontal top-bar shell with the paper-and-ink language from the Claude Design handoff bundle: warm off-white paper, near-black ink, Source Serif 4 + Inter, hairline borders, muted ink accents (clay/indigo/sage/plum/ochre) used functionally for calendars and share scopes. Theme switcher expanded from 2 dimensions (theme × mode) to 7: palette × mode × fontPair × density × dashLayout × calView × navStyle. All exposed in Settings → Appearance and persisted on the users row. Pre-paint script applies all four data-* attributes from localStorage so reload doesn't flash. App shell restructured to a CSS-grid driven by data-nav on <html>: sidebar on desktop, bottom-nav + FAB under 760px. Four desktop nav modes wired (sidebar/rail/top/fab-only). Topbar gets a search-→-CommandPalette button, notification bell, "+ New" quick-add, avatar. Dashboard, calendar, lists, notes, settings, login, public share viewer, and quick-add sheet all reskinned. Dashboard editor gains a Preset menu (classic/split/glance) that fills the layout from the registered widgets. FullCalendar wrapped in .fc-skin and inherits all paper-and-ink tokens via CSS variable overrides. Public share viewer (/s/<token>) rebuilt around ShareFrame: expiration banner, brand strip, eyebrow chip, 38px serif title, mini-day + mini-map cards, share-rows. Schema: drops users.theme; adds theme_palette, theme_font_pair, theme_density, theme_dash_layout, theme_cal_view, theme_nav_style with defaults that match the design (clay / serif-sans / regular / classic / month / rail-desktop). Migration 0014_paper_ink_theme. Middleware sets x-pathname so the AppShell server component can render bare for /s/* and /login without a route-group refactor. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
98 lines
3.4 KiB
TypeScript
98 lines
3.4 KiB
TypeScript
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<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".
|
|
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";
|
|
}
|
|
}
|