patrick/chitai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add themeable design tokens with cookie-backed SSR

Browse Source
This commit is contained in:
patrick
2026-08-11 20:08:53 -04:00
parent a1f39a8dc8
commit d71b53b3c5
8 changed files with 629 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app.css
+92 -62
View File
@@ -8,74 +8,100 @@
:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.129 0.042 264.695);
--card: oklch(1 0 0);
--card-foreground: oklch(0.129 0.042 264.695);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.129 0.042 264.695);
--primary: oklch(0.208 0.042 265.755);
--primary-foreground: oklch(0.984 0.003 247.858);
--secondary: oklch(0.968 0.007 247.896);
--secondary-foreground: oklch(0.208 0.042 265.755);
--muted: oklch(0.968 0.007 247.896);
--muted-foreground: oklch(0.554 0.046 257.417);
--accent: oklch(0.968 0.007 247.896);
--accent-foreground: oklch(0.208 0.042 265.755);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.929 0.013 255.508);
--input: oklch(0.929 0.013 255.508);
--ring: oklch(0.704 0.04 256.788);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.984 0.003 247.858);
--sidebar-foreground: oklch(0.129 0.042 264.695);
--sidebar-primary: oklch(0.208 0.042 265.755);
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
--sidebar-accent: oklch(0.968 0.007 247.896);
--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
--sidebar-border: oklch(0.929 0.013 255.508);
--sidebar-ring: oklch(0.704 0.04 256.788);
/* Typography — system stacks, so nothing depends on a CDN or a webfont build. */
--app-font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--app-font-serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
--app-font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
/* Reading Room — light */
--background: #e9ebee;
--foreground: #1b1f24;
--card: #fbfbfc;
--card-foreground: #1b1f24;
--popover: #fbfbfc;
--popover-foreground: #1b1f24;
--primary: #1f5f5b;
--primary-foreground: #f2f7f6;
--secondary: #dfe3e8;
--secondary-foreground: #1b1f24;
--muted: #e2e5e9;
--muted-foreground: #7d858f;
--accent: #d7e5e3;
--accent-foreground: #164743;
--destructive: #a6402f;
--border: #d2d6dc;
--input: #d2d6dc;
--ring: #1f5f5b;
/* Semantic — deliberately not the accent, so state never reads as branding. */
--success: #2f7d4f;
--success-foreground: #f2f7f6;
--flag: #b08a1e;
--star: #c79a25;
--chart-1: #1f5f5b;
--chart-2: #2f7d4f;
--chart-3: #b08a1e;
--chart-4: #4c6b8a;
--chart-5: #a6402f;
--sidebar: #e2e5e9;
--sidebar-foreground: #1b1f24;
--sidebar-primary: #1f5f5b;
--sidebar-primary-foreground: #f2f7f6;
--sidebar-accent: #d7e5e3;
--sidebar-accent-foreground: #164743;
--sidebar-border: #d2d6dc;
--sidebar-ring: #1f5f5b;
}
.dark {
--background: oklch(0.129 0.042 264.695);
--foreground: oklch(0.984 0.003 247.858);
--card: oklch(0.208 0.042 265.755);
--card-foreground: oklch(0.984 0.003 247.858);
--popover: oklch(0.208 0.042 265.755);
--popover-foreground: oklch(0.984 0.003 247.858);
--primary: oklch(0.929 0.013 255.508);
--primary-foreground: oklch(0.208 0.042 265.755);
--secondary: oklch(0.279 0.041 260.031);
--secondary-foreground: oklch(0.984 0.003 247.858);
--muted: oklch(0.279 0.041 260.031);
--muted-foreground: oklch(0.704 0.04 256.788);
--accent: oklch(0.279 0.041 260.031);
--accent-foreground: oklch(0.984 0.003 247.858);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.551 0.027 264.364);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.208 0.042 265.755);
--sidebar-foreground: oklch(0.984 0.003 247.858);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
--sidebar-accent: oklch(0.279 0.041 260.031);
--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.551 0.027 264.364);
/* Reading Room — dark */
--background: #15191b;
--foreground: #e6eae9;
--card: #1d2226;
--card-foreground: #e6eae9;
--popover: #1d2226;
--popover-foreground: #e6eae9;
--primary: #6fbab0;
--primary-foreground: #0e1a19;
--secondary: #232a2d;
--secondary-foreground: #e6eae9;
--muted: #232a2d;
--muted-foreground: #78868a;
--accent: #1b3330;
--accent-foreground: #9fd8d0;
--destructive: #e0796b;
--border: #2a3034;
--input: #2a3034;
--ring: #6fbab0;
--success: #4fa97a;
--success-foreground: #0e1a19;
--flag: #d4a63a;
--star: #e5b84b;
--chart-1: #6fbab0;
--chart-2: #4fa97a;
--chart-3: #d4a63a;
--chart-4: #7f9dc0;
--chart-5: #e0796b;
--sidebar: #111517;
--sidebar-foreground: #e6eae9;
--sidebar-primary: #6fbab0;
--sidebar-primary-foreground: #0e1a19;
--sidebar-accent: #1b3330;
--sidebar-accent-foreground: #9fd8d0;
--sidebar-border: #2a3034;
--sidebar-ring: #6fbab0;
}
@theme inline {
--font-sans: var(--app-font-sans);
--font-serif: var(--app-font-serif);
--font-mono: var(--app-font-mono);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
@@ -95,6 +121,10 @@
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-success: var(--success);
--color-success-foreground: var(--success-foreground);
--color-flag: var(--flag);
--color-star: var(--star);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);