feat: rework mint/lavender/lemon into a poppy mint/grape/lemon palette - #31
Merged
Conversation
The three colored themes were derived from dark's near-black neutral
scale and read as muted/restrained ("dark theme, different accent dot").
Rebuilds them on light's neutral scale instead, with much higher
saturation throughout — bg-base carries a bold, instantly-recognizable
tint, accents are deep and vivid rather than muted, and lemon's bg-base
and grape's accent are anchored on literal reference colors (#ffff81,
#6f2da8) per direct request. Renames lavender -> grape to match the
fruit/candy naming of mint and lemon.
Also:
- Lemon gets a unique "hover flip": hovering or playing a track row
inverts to a dark chip with glowing ink instead of staying light,
implemented as a dedicated --row-* token family (pass-through no-op
for every other theme) rather than repurposing the shared
--bg-hover/--bg-selected tokens, since those are consumed by many
other components that assume a light background.
- Sidebar and transport bar get their own --chrome-* token family (same
pass-through pattern) so those two always-visible surfaces read as
themed too, instead of staying near-white regardless of which colored
theme is active. Popovers/settings/drawer and the light theme are
unaffected.
- Theme switcher swatches now show each theme's --bg-base instead of
--accent, since accent is a deliberately dark/muted token for text
contrast, not what a theme actually looks like at a glance (this also
fixes dark's swatch reading lighter than light's).
docs/DESIGN_SYSTEM.md is updated throughout: the old "muted, 25-40%
saturation" accent rule is replaced, and both new token families (row-*
and chrome-*) are documented with the same rationale captured here.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
dark's near-black scale, reading as muted/restrained) onlight's neutral scale with much higher saturation throughout, per "fun and poppy, not restrained" direction.lavender→grapeto match the fruit/candy naming ofmint/lemon.lemon'sbg-baseandgrape'saccentare anchored on literal reference colors (#ffff81,#6f2da8).lemongets a unique hover flip: hovering/playing a track row inverts to a dark chip with glowing ink, via a dedicated--row-*token family (pass-through no-op for every other theme).--chrome-*token family (same pass-through pattern) so those two always-visible surfaces read as themed instead of staying near-white. Popovers/settings/drawer andlightare unaffected.--bg-baseinstead of--accent— accent is a deliberately dark/muted token for text contrast, not what a theme looks like at a glance (this also fixesdark's swatch reading lighter thanlight's).docs/DESIGN_SYSTEM.mdupdated throughout: the old "muted, 25–40% saturation" accent rule is replaced, and both new token families are documented with rationale.Test plan
npm run checkpassescargo test --lib appearancepasses (no theme-list coupling there)lavenderid gracefully falls back todarkon next load (existingisTheme()guard)Screencast.from.2026-07-09.21-25-36.mp4
🤖 Generated with Claude Code