timothy/ersatztv
1
0
Fork 0
Code Issues 51 Pull Requests 5 Actions Packages Projects Releases 9 Wiki Activity
Files
41291b36869a228cb05bdd3c8eeb9ea47546e669
ersatztv/docs/superpowers/plans/2026-07-02-chicorytv-spa-design-tokens-themes.md
T
timothy e282bcecfa feat(frontend): wire ChicoryTV SPA themes 
refs #79
2026-07-02 07:56:12 +02:00

3.1 KiB
Raw Blame History

ChicoryTV SPA Design Tokens Themes Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Implement issue #79 by making the SPA consume the ChicoryTV design-system token layer and switch live among the three shipped themes with persistence.

Architecture: Keep design-system/styles.css as the single token entry imported by web/src/designSystem.ts. Add a small typed theme contract in web/src/designSystem.ts that applies data-theme to <html>, maps warm to the design-system default, and persists the selection. Render a compact theme switcher from App.tsx, and align shell.css to real design-system custom properties.

Tech Stack: Vite, React 19, TypeScript, Vitest, Testing Library, CSS custom properties.

Task 1: Theme Contract Tests

Files:

  • Modify: web/src/App.test.tsx

  • Step 1: Write failing tests

Add tests that assert:

  • applyDesignSystemTheme("warm") removes data-theme from <html> and stores warm.

  • applyDesignSystemTheme("cool") sets data-theme="cool" and stores cool.

  • Invalid persisted values fall back to warm.

  • The app renders three theme buttons and clicking dual sets data-theme="dual".

  • Step 2: Run tests to verify failure

Run: cd web && npm test -- --run src/App.test.tsx Expected: FAIL because the theme functions and switcher do not exist yet.

Task 2: Minimal Theme Implementation

Files:

  • Modify: web/src/designSystem.ts

  • Modify: web/src/App.tsx

  • Step 1: Implement theme functions

Export designSystemThemes, defaultDesignSystemTheme, getStoredDesignSystemTheme, and applyDesignSystemTheme.

  • Step 2: Render switcher

Use React state initialized from getStoredDesignSystemTheme(), apply the theme on mount and click, and expose accessible buttons named for Warm chicory, Cool periwinkle, and Dual accent.

  • Step 3: Run focused tests

Run: cd web && npm test -- --run src/App.test.tsx Expected: PASS.

Task 3: Token-Aligned Shell CSS

Files:

  • Modify: web/src/shell.css

  • Modify: web/index.html

  • Step 1: Replace scaffold token names

Replace non-existent custom properties with actual design-system aliases: --surface-app, --ctv-bg-sunken, --surface-card, --surface-raised, --border-hairline, --text-on-accent, --ctv-ok-soft, spacing, radius, type, and motion tokens.

  • Step 2: Use warm default correctly

Remove data-theme="warm" from web/index.html so the design-system default :root warm theme is used until JavaScript applies persisted state.

  • Step 3: Respect reduced motion

Add @media (prefers-reduced-motion: reduce) rules that disable shell transitions.

Task 4: Verification

Files:

  • No further production changes expected.

  • Step 1: Run verification

Run:

  • cd web && npm test -- --run

  • cd web && npm run lint

  • cd web && npm run typecheck

  • cd web && npm run build

  • Step 2: Use done skill

Run the done skill workflow for issue #79 before final handoff.

Reference in New Issue View Git Blame Copy Permalink