timothy/ersatztv
1
0
Fork 0
Code Issues 57 Pull Requests 6 Actions Packages Projects Releases 9 Wiki Activity

ChicoryTV SPA: design tokens + 3 themes #79

New Issue
Closed
opened 2026-07-02 01:07:17 +02:00 by timothy · 1 comment
timothy commented 2026-07-02 01:07:17 +02:00
Owner
Copy Link
Copy Source

Port the design foundation from design-system/tokens/ + design-system/styles.css into the SPA.

Do

  • Bring in tokens/colors.css, typography.css, spacing.css, radius-elevation-motion.css, fonts.css, themes.css (single styles.css entry).
  • Load Geist + Geist Mono.
  • Theme switcher for the three schemes (data-theme = warm default / cool / dual) with persistence; wire --action-primary / --ctv-live aliases.
  • Respect prefers-reduced-motion.

Acceptance: all three themes switch live and persist; tokens available as CSS custom properties app-wide. See docs/superpowers/specs/2026-07-01-chicorytv-ui-redesign-design.md + design-system/readme.md (Visual foundations).

Port the design foundation from `design-system/tokens/` + `design-system/styles.css` into the SPA. **Do** - Bring in `tokens/colors.css`, `typography.css`, `spacing.css`, `radius-elevation-motion.css`, `fonts.css`, `themes.css` (single `styles.css` entry). - Load Geist + Geist Mono. - Theme switcher for the three schemes (`data-theme` = warm default / `cool` / `dual`) with persistence; wire `--action-primary` / `--ctv-live` aliases. - Respect `prefers-reduced-motion`. **Acceptance:** all three themes switch live and persist; tokens available as CSS custom properties app-wide. See `docs/superpowers/specs/2026-07-01-chicorytv-ui-redesign-design.md` + `design-system/readme.md` (Visual foundations).
timothy added the frontend label 2026-07-02 01:07:17 +02:00
timothy added a new dependency 2026-07-02 01:08:40 +02:00
#78 ChicoryTV SPA: scaffold + build integration
timothy added a new dependency 2026-07-02 01:08:41 +02:00
#80 ChicoryTV SPA: component library (primitives)
timothy added this to the Design system (Claude Design ↔ prod) milestone 2026-07-02 01:08:43 +02:00
timothy commented 2026-07-02 07:56:30 +02:00
Author
Owner
Copy Link
Copy Source

Done

What was done: Wired the SPA to the ChicoryTV design-system token/theme layer. Added a typed theme contract for warm / cool / dual, persisted the choice in ctv-theme, applied data-theme live on <html> with warm mapped to the design-system :root default, and added accessible swatch controls to the shell. Aligned shell.css to the real design-system tokens/aliases and added reduced-motion handling.

Root cause: n/a - feature implementation.

Files changed: web/src/designSystem.ts, web/src/App.tsx, web/src/App.test.tsx, web/src/shell.css, web/index.html, web/vite.config.ts, docs/superpowers/plans/2026-07-02-chicorytv-spa-design-tokens-themes.md.

Verification: cd web && npm test -- --run passed (Vitest still emits Node's experimental localStorage warning); cd web && npm run lint passed; cd web && npm run typecheck passed; cd web && npm run build passed.

Deferred: none.

Follow-up issues: none.

Docs updated: Added the issue #79 implementation plan under docs/superpowers/plans/.

## Done **What was done**: Wired the SPA to the ChicoryTV design-system token/theme layer. Added a typed theme contract for `warm` / `cool` / `dual`, persisted the choice in `ctv-theme`, applied `data-theme` live on `<html>` with warm mapped to the design-system `:root` default, and added accessible swatch controls to the shell. Aligned `shell.css` to the real design-system tokens/aliases and added reduced-motion handling. **Root cause**: n/a - feature implementation. **Files changed**: `web/src/designSystem.ts`, `web/src/App.tsx`, `web/src/App.test.tsx`, `web/src/shell.css`, `web/index.html`, `web/vite.config.ts`, `docs/superpowers/plans/2026-07-02-chicorytv-spa-design-tokens-themes.md`. **Verification**: `cd web && npm test -- --run` passed (Vitest still emits Node's experimental localStorage warning); `cd web && npm run lint` passed; `cd web && npm run typecheck` passed; `cd web && npm run build` passed. **Deferred**: none. **Follow-up issues**: none. **Docs updated**: Added the issue #79 implementation plan under `docs/superpowers/plans/`.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
ad-hoc
One-off / ad-hoc work not tracked by a dedicated issue
 api
REST API / HTTP endpoints
 bug
Something isn't working
 ci-cd
Build, test, deploy pipeline
 content
Channel content / schedules / playlists
 dependencies
Dependency updates (Renovate)
 enhancement
New feature or improvement
 frontend
ChicoryTV React SPA frontend
 in-progress
Claimed by an active session — do not pick up
 jellyfin
Jellyfin tuner / IPTV integration
 parked
Excluded from automatic queue pickup; work only when explicitly selected
 priority: high
priority: low
priority: medium
review
Adversarial review finding
 security
Security / vulnerability fix
No labels frontend
Milestone
No items
No Milestone Design system (Claude Design ↔ prod)
Projects
Clear projects
No projects
Assignees
Clear assignees
renovate timothy (Timothy)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Blocks
#80 ChicoryTV SPA: component library (primitives)
timothy/ersatztv
Depends on
#78 ChicoryTV SPA: scaffold + build integration
timothy/ersatztv
Reference: timothy/ersatztv#79