feat(web): unify tailwind theme with design tokens + add light palette #208
Labels
No labels
area:agents
area:dashboard
area:database
area:design
area:design-review
area:flows
area:infra
area:meta
area:security
area:sessions
area:webhook
area:workdir
security
type:bug
type:chore
type:meta
type:user-story
No milestone
No project
No assignees
1 participant
code-lead
Notifications
Due date
No due date set.
Blocks
#209 chore(web): migrate text-[Npx] literals to semantic font-size utilities
charles/claude-hooks
#210 chore(web): fix card radius hierarchy + replace rounded-[var(...)] arbitraries
charles/claude-hooks
Reference
charles/claude-hooks#208
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
User story
As a dashboard operator, I want every Tailwind utility class in
apps/webto resolve through the design-token system (including a brand-new light palette and a mode switcher), so that every color/size change lives in one place (design/tokens.json) instead of being sprinkled across 36 component files — and follow-up cleanups can rely on a stable token surface.Context
From the styling audit (2026-04-21):
bg-bg,text-text-primary,border-border, role/state/stage utilities all flow throughtokens.css→@themeinindex.css. No raw hex in components.text-[11px],text-[12px],text-[13px]literals instead of the--ch-font-size-*tokens. Thehtml { zoom: 1.2 }block inindex.cssis a workaround.design/tokens.jsonhas nolightpalette. Dashboard is dark-first, but the option should exist.--ch-font-size-caption(for 26text-[10px]sites) and--ch-font-size-h3(for 3text-[14px]sites jumping from body=13 → h2=18).Acceptance criteria
Tokens
design/tokens.jsongains a full light palette alongside Tokyo Night Storm dark — everycolor.*slot (bg, surface, surface-high, border, text-, accent, state., role., stage.).design/tokens.jsonaddsfont-size.caption = 10pxandfont-size.h3 = 14px.apps/web/src/styles/tokens.cssregenerated: dark under:root, light under:root[data-theme="light"].@media (prefers-color-scheme: light)fallback for operators who never toggle.@theme wiring
apps/web/src/styles/index.css@themeblock exposes--text-meta,--text-small,--text-body,--text-body-lg,--text-h3,--text-h2,--text-h1,--text-display,--text-captionsotext-meta,text-small, etc. become first-class Tailwind utilities.rounded-compact,rounded-default,rounded-card,rounded-pillstill resolve cleanly.Mode switcher
components/app-shell.tsx(or a dedicated<ThemeToggle>) adds a dark/light toggle in the top bar.ch-theme.<script>inindex.htmlor equivalent).Verification
bun run buildsucceeds with no new warnings./monitor,/planner,/planner/board,/agents,/stats,/usage,/specs) renders correctly in both palettes.zoom: 1.2stays in place for now; removing it is scoped to the follower ticket.Out of scope
text-[Npx]literals → follower ticket (depends on this).rounded-[var(...)]refactor → follower ticket (depends on this).<Button>component in spec-editor forms → independent ticket.zoom: 1.2hack → transitively depends on this.References
apps/web/src/styles/tokens.css— current dark-only tokens.apps/web/src/styles/index.css:16-60— current@thememapping.apps/web/src/styles/index.css:71-79— thezoom: 1.2block that follow-up work can remove.design/tokens.json— DTCG spec source of truth.