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
@@ -1,3 +1,5 @@
+@import './lib/styles/fabledsword-tokens.css';
+
@tailwind base;
@tailwind components;
@tailwind utilities;
@@ -11,3 +13,7 @@ body {
  height: 100%;
  margin: 0;
 }
+
+body {
+  font-family: var(--fs-font-body);
+}
@@ -5,9 +5,15 @@
    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Minstrel</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap"
+    />
    %sveltekit.head%
  </head>
-  <body class="bg-surface-900 text-text-primary">
+  <body class="bg-background text-text-primary">
    <div style="display: contents">%sveltekit.body%</div>
  </body>
 </html>
@@ -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;
+}
@@ -4,15 +4,39 @@ export default {
  theme: {
    extend: {
      colors: {
+        background: 'var(--fs-obsidian)',
        surface: {
-          900: '#14161a',
-          800: '#1a1d22',
-          700: '#2a2f36'
+          DEFAULT: 'var(--fs-iron)',
+          hover: 'var(--fs-slate)'
+        },
+        border: {
+          DEFAULT: 'var(--fs-pewter)'
        },
        text: {
-          primary: '#e8ecf2',
-          secondary: '#cdd3db'
-        }
+          primary: 'var(--fs-parchment)',
+          secondary: 'var(--fs-vellum)',
+          muted: 'var(--fs-ash)'
+        },
+        action: {
+          primary: 'var(--fs-moss)',
+          secondary: 'var(--fs-bronze)',
+          destructive: 'var(--fs-oxblood)'
+        },
+        accent: 'var(--fs-accent)',
+        warning: 'var(--fs-warning)',
+        error: 'var(--fs-error)',
+        info: 'var(--fs-info)'
+      },
+      borderRadius: {
+        sm: 'var(--fs-radius-sm)',
+        md: 'var(--fs-radius-md)',
+        lg: 'var(--fs-radius-lg)',
+        xl: 'var(--fs-radius-xl)'
+      },
+      fontFamily: {
+        display: ['Fraunces', 'Georgia', 'serif'],
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+        mono: ['JetBrains Mono', 'ui-monospace', 'monospace']
      }
    }
  },