feat(web): introduce FabledSword design system tokens + Tailwind aliases

Add the canonical FS token palette (surfaces, text, action, semantic, accent, radii, fonts) as CSS custom properties under web/src/lib/styles/ fabledsword-tokens.css, with a [data-fs-app="minstrel"] hook reserved for future per-app accent overrides. Wire the tokens through Tailwind by aliasing semantic colour utilities (bg-background, bg-surface, bg-surface-hover, text-text-primary/secondary/muted, border-border, bg-action-primary/secondary/destructive, accent, warning/error/info) to the new variables, plus rounded-sm..xl and font-display/sans/mono. Load Fraunces, Inter, and JetBrains Mono (400/500 only) via Google Fonts and default the body to Inter. Existing components inherit the new palette without per-page changes. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-04-29 18:48:20 -04:00
parent d1c1853d49
commit a7090c3768
4 changed files with 95 additions and 7 deletions
@@ -0,0 +1,52 @@
+/*
+ * FabledSword design system tokens
+ *
+ * Shared palette across FabledSword apps (Minstrel, Scribe, Forge, ...).
+ * Per-app accent colour is overridable via the `[data-fs-app="<name>"]`
+ * attribute hook. The `:root` default is forest-teal for Minstrel, the
+ * only consumer of this file today.
+ */
+
+:root {
+  /* Surfaces */
+  --fs-obsidian: #14171A;
+  --fs-iron: #1E2228;
+  --fs-slate: #2C313A;
+  --fs-pewter: #3F4651;
+
+  /* Text */
+  --fs-parchment: #E8E4D8;
+  --fs-vellum: #C2BFB4;
+  --fs-ash: #9C9A92;
+
+  /* Action */
+  --fs-moss: #4A5D3F;
+  --fs-bronze: #8B7355;
+  --fs-oxblood: #6B2118;
+
+  /* Semantic */
+  --fs-warning: #8B6F1E;
+  --fs-error: #C04A1F;
+  --fs-info: #3D5A6E;
+
+  /* Accent (per-app; default = Minstrel forest-teal) */
+  --fs-accent: #4A6B5C;
+
+  /* Radii */
+  --fs-radius-sm: 4px;
+  --fs-radius-md: 8px;
+  --fs-radius-lg: 12px;
+  --fs-radius-xl: 16px;
+
+  /* Fonts */
+  --fs-font-display: 'Fraunces', Georgia, serif;
+  --fs-font-body: 'Inter', system-ui, sans-serif;
+  --fs-font-mono: 'JetBrains Mono', ui-monospace, monospace;
+}
+
+/* Per-app accent overrides. Set `data-fs-app="minstrel"` on <html> or any
+ * ancestor to scope; the :root default already matches Minstrel, so this
+ * block is documentation / future override-point for other FS apps. */
+[data-fs-app="minstrel"] {
+  --fs-accent: #4A6B5C;
+}