From a7090c37685e214eef15ac865ef19d05b5b2c805 Mon Sep 17 00:00:00 2001 From: Bryan Van Deusen Date: Wed, 29 Apr 2026 18:48:20 -0400 Subject: [PATCH] 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 --- web/src/app.css | 6 +++ web/src/app.html | 8 +++- web/src/lib/styles/fabledsword-tokens.css | 52 +++++++++++++++++++++++ web/tailwind.config.js | 36 +++++++++++++--- 4 files changed, 95 insertions(+), 7 deletions(-) create mode 100644 web/src/lib/styles/fabledsword-tokens.css diff --git a/web/src/app.css b/web/src/app.css index 38870e67..7f0649f2 100644 --- a/web/src/app.css +++ b/web/src/app.css @@ -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); +} diff --git a/web/src/app.html b/web/src/app.html index cc07c859..44ad21cf 100644 --- a/web/src/app.html +++ b/web/src/app.html @@ -5,9 +5,15 @@ Minstrel + + + %sveltekit.head% - +
%sveltekit.body%
diff --git a/web/src/lib/styles/fabledsword-tokens.css b/web/src/lib/styles/fabledsword-tokens.css new file mode 100644 index 00000000..ab166374 --- /dev/null +++ b/web/src/lib/styles/fabledsword-tokens.css @@ -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=""]` + * 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 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; +} diff --git a/web/tailwind.config.js b/web/tailwind.config.js index 0b37e59d..cbdfe7f4 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -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'] } } },