Repository navigation
feat(sidepanel): Arc-style saturated Space tint + auto palette swap - #78
Merged
Merged
Conversation
- COLOR_GRADIENT: saturated, opaque (was translucent pastel) — body reads as the space's color the way Arc's sidebar does. Muted hues (e.g. #6886c1 → #4f6aa3 for blue) so white text stays readable without feeling neon. grey keeps a subtle translucent overlay since the palette isn't swapped for it. - globalStyles: when html has data-space-tint != grey, override the palette to white-on-color: --fg=#fff, --muted/--subtle/--border/ --bg-soft/-hover/-active become rgba(white, …) for the frosted pill look, while --bg flips to opaque #15171c so menus/popovers stay legible when they float over the saturated body. - App.tsx: derive activeColor with the same activeId ?? spaces[0] fallback the render uses. Without this, a freshly-created Space — which doesn't call switchTo and so leaves activeSpaceByWindow alone — would render its content but never apply the tint until the user clicked its pill. Also writes data-space-tint on <html> so the palette swap kicks in. - SpaceTint.stories.tsx (new): Theme/SpaceTint with per-color stories + an AllColors swatch grid for tuning hues from Storybook without reloading the extension. Co-Authored-By: Claude Opus 4.7 <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
activeColornow mirrors the sameactiveId ?? spaces[0]fallback the render path uses.Theme/SpaceTint) so hue/lightness tuning doesn't require reloading the extension.How it works
theme.tsCOLOR_GRADIENT— opaque saturated gradient per color (muted to keep white text readable; grey stays translucent because the palette isn't swapped for it).globalStyles.tsx—html[data-space-tint]:not([data-space-tint='grey'])flips the palette:--fg/--muted/--subtle/--border→#fffandrgba(white, …)--bg-soft/--bg-hover/--bg-active→rgba(white, …)(frosted pills/buttons)--bg→ opaque#15171cso menus/popovers stay legible over the saturated bodyApp.tsxwrites both--space-tint(body bg-image) anddata-space-tint(html attribute) in a single useEffect.Test plan
bun run buildpassesbun run storybook→Theme / SpaceTint→ each color story renders the saturated body with white text and frosted pills;AllColorsswatches matchdist/and:grey— panel reverts to the OS prefers-color-scheme (light or dark) instead of forcing the tinted palette🤖 Generated with Claude Code