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>
This commit is contained in:
@@ -1,3 +1,5 @@
|
|||||||
|
@import './lib/styles/fabledsword-tokens.css';
|
||||||
|
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
@@ -11,3 +13,7 @@ body {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--fs-font-body);
|
||||||
|
}
|
||||||
|
|||||||
+7
-1
@@ -5,9 +5,15 @@
|
|||||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<title>Minstrel</title>
|
<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%
|
%sveltekit.head%
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-surface-900 text-text-primary">
|
<body class="bg-background text-text-primary">
|
||||||
<div style="display: contents">%sveltekit.body%</div>
|
<div style="display: contents">%sveltekit.body%</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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;
|
||||||
|
}
|
||||||
+30
-6
@@ -4,15 +4,39 @@ export default {
|
|||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
|
background: 'var(--fs-obsidian)',
|
||||||
surface: {
|
surface: {
|
||||||
900: '#14161a',
|
DEFAULT: 'var(--fs-iron)',
|
||||||
800: '#1a1d22',
|
hover: 'var(--fs-slate)'
|
||||||
700: '#2a2f36'
|
},
|
||||||
|
border: {
|
||||||
|
DEFAULT: 'var(--fs-pewter)'
|
||||||
},
|
},
|
||||||
text: {
|
text: {
|
||||||
primary: '#e8ecf2',
|
primary: 'var(--fs-parchment)',
|
||||||
secondary: '#cdd3db'
|
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']
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user