First file in the visual track consolidation, retried after the theme
system was rewritten in 919fcca4b. The earlier attempt failed because
themes.css was inconsistent (--color-X resolved to wrapped string from
@theme inline, then to raw channels after runtime store ran, with raw
channels being invalid as a CSS color). With the new single-layer
themes.css all hsl(var(--color-X)) usages resolve correctly in light
and dark mode regardless of hydration state.
Substitution applied (the canonical pattern):
color: #374151 + :global(.dark) #e5e7eb → color: hsl(var(--color-foreground))
color: #9ca3af → color: hsl(var(--color-muted-foreground))
border: 1px rgba(0,0,0,0.08) + dark dup → border: 1px solid hsl(var(--color-border))
background: rgba(0,0,0,0.04) + dark dup → background: hsl(var(--color-surface-hover))
Net: 260 → 245 LOC, 7 hand-rolled palette rules eliminated, all 6
:global(.dark) selectors removed (theme system handles both modes via
.dark class on <html>).
Brand colors that should NOT track the theme primary stay literal:
- violet category badge (#8b5cf6) — kept hardcoded with color-mix for
the 12% alpha background, since this is a deliberate accent
indicating quote category, not a theme color
- favorite-active red — switched from literal to var(--color-error)
so it follows the theme's error color (consistent with other
delete/danger affordances in the app)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
c06e685754