Docs, ticks, working app

webapp/src/index.css

@@ -1,7 +1,160 @@
 @import "tailwindcss";
 
+/*
+ * Theme system: every visual role the app uses (surfaces, borders, text,
+ * danger banners, accent highlights) is a plain CSS custom property here,
+ * bridged into real Tailwind utilities (bg-surface-0, text-text-muted,
+ * border-accent, ...) via `@theme inline`. Components use those utilities
+ * instead of hardcoded palette classes (bg-neutral-950, text-sky-400, ...),
+ * so re-declaring the `--c-*` variables under a `html.<theme>` selector
+ * re-skins the whole app with no per-component changes.
+ *
+ * `dark` is the baseline defined on :root; every other theme only needs to
+ * override what differs. `light`/`grey` swap the full surface+text scale;
+ * the seven colour themes (red/green/blue/yellow/pink/orange/grey... ) keep
+ * `dark`'s neutral surfaces and swap only the accent trio, since accent is
+ * the only place the app uses a non-neutral colour (selection states, the
+ * timeline histogram, focus/active highlights).
+ */
 :root {
   color-scheme: light dark;
+
+  --c-surface-0: #0a0a0a;
+  --c-surface-1: #171717;
+  --c-surface-2: #262626;
+
+  --c-border: #262626;
+  --c-border-soft: #404040;
+  --c-border-faint: #171717;
+  --c-border-strong: #a3a3a3;
+
+  --c-text: #f5f5f5;
+  --c-text-secondary: #d4d4d4;
+  --c-text-muted: #a3a3a3;
+  --c-text-subtle: #737373;
+  --c-text-faint: #525252;
+  --c-text-faintest: #404040;
+
+  --c-danger-bg: #450a0a;
+  --c-danger-border: #7f1d1d;
+  --c-danger-text: #f87171;
+  --c-danger-text-strong: #fca5a5;
+
+  --c-accent: #0ea5e9;
+  --c-accent-soft: #0369a1;
+  --c-accent-text: #7dd3fc;
+}
+
+html.light {
+  --c-surface-0: #fafaf9;
+  --c-surface-1: #f5f5f4;
+  --c-surface-2: #e7e5e4;
+
+  --c-border: #d6d3d1;
+  --c-border-soft: #a8a29e;
+  --c-border-faint: #e7e5e4;
+  --c-border-strong: #57534e;
+
+  --c-text: #1c1917;
+  --c-text-secondary: #44403c;
+  --c-text-muted: #78716c;
+  --c-text-subtle: #a8a29e;
+  --c-text-faint: #d6d3d1;
+  --c-text-faintest: #d6d3d1;
+
+  --c-danger-bg: #fee2e2;
+  --c-danger-border: #fca5a5;
+  --c-danger-text: #b91c1c;
+  --c-danger-text-strong: #991b1b;
+
+  --c-accent: #0284c7;
+  --c-accent-soft: #7dd3fc;
+  --c-accent-text: #0369a1;
+}
+
+html.grey {
+  --c-surface-0: #020617;
+  --c-surface-1: #0f172a;
+  --c-surface-2: #1e293b;
+
+  --c-border: #1e293b;
+  --c-border-soft: #334155;
+  --c-border-faint: #0f172a;
+  --c-border-strong: #94a3b8;
+
+  --c-text: #f1f5f9;
+  --c-text-secondary: #cbd5e1;
+  --c-text-muted: #94a3b8;
+  --c-text-subtle: #64748b;
+  --c-text-faint: #475569;
+  --c-text-faintest: #334155;
+
+  --c-accent: #38bdf8;
+  --c-accent-soft: #0369a1;
+  --c-accent-text: #7dd3fc;
+}
+
+html.red {
+  --c-accent: #f87171;
+  --c-accent-soft: #b91c1c;
+  --c-accent-text: #fca5a5;
+}
+
+html.green {
+  --c-accent: #4ade80;
+  --c-accent-soft: #15803d;
+  --c-accent-text: #86efac;
+}
+
+html.blue {
+  --c-accent: #60a5fa;
+  --c-accent-soft: #1d4ed8;
+  --c-accent-text: #93c5fd;
+}
+
+html.yellow {
+  --c-accent: #facc15;
+  --c-accent-soft: #a16207;
+  --c-accent-text: #fde047;
+}
+
+html.pink {
+  --c-accent: #f472b6;
+  --c-accent-soft: #be185d;
+  --c-accent-text: #f9a8d4;
+}
+
+html.orange {
+  --c-accent: #fb923c;
+  --c-accent-soft: #c2410c;
+  --c-accent-text: #fdba74;
+}
+
+@theme inline {
+  --color-surface-0: var(--c-surface-0);
+  --color-surface-1: var(--c-surface-1);
+  --color-surface-2: var(--c-surface-2);
+
+  --color-border: var(--c-border);
+  --color-border-soft: var(--c-border-soft);
+  --color-border-faint: var(--c-border-faint);
+  --color-border-strong: var(--c-border-strong);
+
+  --color-text: var(--c-text);
+  --color-text-secondary: var(--c-text-secondary);
+  --color-text-muted: var(--c-text-muted);
+  --color-text-subtle: var(--c-text-subtle);
+  --color-text-faint: var(--c-text-faint);
+  --color-text-faintest: var(--c-text-faintest);
+
+  --color-danger-bg: var(--c-danger-bg);
+  --color-danger-border: var(--c-danger-border);
+  --color-danger-text: var(--c-danger-text);
+  --color-danger-text-strong: var(--c-danger-text-strong);
+
+  --color-accent: var(--c-accent);
+  --color-accent-soft: var(--c-accent-soft);
+  --color-accent-text: var(--c-accent-text);
 }
 
 html,
@@ -12,20 +165,6 @@ body,
 }
 
 body {
-  @apply bg-neutral-950 text-neutral-200;
+  @apply bg-surface-0 text-text;
   font: 14px/1.5 ui-monospace, Consolas, monospace;
 }
-
-/*
- * Ticket 011: colour-scheme picker support. Most of the app's Tailwind
- * classes are hardcoded to a dark palette (e.g. `bg-neutral-950` above)
- * rather than using `dark:`-variant classes, so there isn't a full light
- * theme to switch to yet. This override (keyed off the `light` class
- * `useSettingsPanel` toggles on `<html>`) gives "Light" a real, if minimal,
- * visible effect on the base page colours; a proper light theme would need
- * the rest of the app's components reworked to use theme-aware classes.
- */
-html.light body {
-  background-color: #f5f5f4;
-  color: #1c1917;
-}