The raw accent fails AA as text on every dark surface, not only on its
own tint: 3.04:1 on the page, 2.70 on iron, 2.21 on slate, against 4.5.
accent-fg (the house formula, 45% toward parchment) measures 5.62 at
worst across both modes. The operator chose the readable colour over the
signature teal for text, on 2026-10-08.
- 36 sites swap. They are 35 Tailwind uses: links, "Now playing", the
ingest progress line, active shuffle/repeat, the liked heart, the app
download icon and its hover. The last is the alphabet rail's pending
spinner in CSS. Icons follow the text: as graphics they need only
3:1, and the raw accent misses even that on iron.
- check-tint-contrast adds accent to TEXT_NEVER_RAW, so a new raw
text-accent or color: var(--fs-accent) fails the web lane. Run against
the files before the swap, it finds all 36. Borders, rings and fills
keep the raw accent.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
A hue painted as text on a color-mix tint of itself sits close to the
surface under it. On Minstrel's surfaces the raw accent on its 15% tint
measures 1.97:1 at worst (dark mode, hover surface), against AA's 4.5.
- tokens.json gains colors.fg: the five FabledSword -fg formulas (accent
45%, success 45%, warning, error and info 50%), each mixed toward
parchment so one declaration serves both modes. Success is Minstrel's
moss. tokens-to-css emits them in :root.
- Tailwind exposes them as text-accent-fg, text-warning-fg, text-error-fg
and text-info-fg.
- 23 sites swapped: 14 Tailwind class strings (PlayerBar and the admin
count pills) and 9 CSS rules (StatusPill's four tones and five accent
chips). Worst case after: accent-fg 5.03, error-fg 4.75, warning-fg
4.92, success-fg 4.85.
- scripts/check-tint-contrast.js finds the pair in either spelling. Its
test scans src in the web Vitest lane and fails on any new site, with
fixture cases showing it can fail.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Replaces the :global scoped-style workaround in AdminSidebar with a proper
accent.tint color tier in tailwind.config.js. Tailwind generates bg-accent-tint
deterministically; the global class no longer leaks from a single component.
Future consumers (e.g. /admin/requests tab counts) get the same utility.
Removes duplication between fabledsword-tokens.css and tailwind.config.js;
font stacks now live in one place so per-app overrides reach Tailwind utilities.
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>
- SvelteKit 2.x + Svelte 5 + TypeScript + Vite 5
- adapter-static with fallback:'index.html' for SPA deep-link routing
- Tailwind configured with dark-only palette matching spec
- Placeholder landing page at /
- Committed web/build/index.html placeholder (via .gitignore negation) so
go:embed works before the SvelteKit build has been run
bvandeusenandClaude Opus 5.5