feat: scaffold Vue 3 + Vuetify + Pinia frontend themed to FabledDesignSystem

Curator signature accent (#A87338, aged amber) is baked into
fabled-tokens.js. Vuetify theme consumes the same tokens module the rest
of the SPA does, so updating design system tokens propagates throughout.
Vite dev server proxies /api and /ws to the Quart backend.

App.vue references AppShell (lands in Task 9) and main.js references
router.js (lands in Task 9) — these are intentionally split so Task 8 is
the framework scaffold and Task 9 is the navigation/shell content.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-14 07:35:33 -04:00
parent 8b5711abef
commit ad2ac31f1a
7 changed files with 175 additions and 0 deletions
+29
View File
@@ -0,0 +1,29 @@
import { surfaces, text, action, semantic, accent } from './fabled-tokens.js'
export const fabledCuratorTheme = {
dark: true,
colors: {
background: surfaces.obsidian,
surface: surfaces.iron,
'surface-bright': surfaces.slate,
'surface-light': surfaces.pewter,
primary: action.moss,
secondary: action.bronze,
tertiary: action.pewter,
'on-background': text.parchment,
'on-surface': text.parchment,
'on-primary': text.parchment,
'on-secondary': text.parchment,
success: semantic.success,
warning: semantic.warning,
error: semantic.error,
info: semantic.info,
// Curator signature accent — used for nav-active state, wordmark, selection.
// Not on action buttons (see design-system.md "Accent usage rules").
accent: accent.curator
}
}