0.30.0 - Sidebar active gradient tokens: --sidebar-active-start and --sidebar-active-end - #4
Merged
Conversation
…-sidebar-active-end Two overridable colour tokens for the gradient that marks the active navigation sidebar item (@schemavaults/ui DashboardLayout). They sit in the "sidebar" group right after sidebar-ring and default to the brand colours, so re-theming brand-blue / brand-red re-colours the gradient unless these are set separately: --sidebar-active-start: var(--sv-theme-light-sidebar-active-start, var(--schemavaults-brand-blue)); --sidebar-active-end: var(--sv-theme-light-sidebar-active-end, var(--schemavaults-brand-red)); - theme_tokens: ModeThemeToken gains an optional `defaultFrom`, naming the token a default follows; the manifest sync test checks that such a default is exactly `var(<source variable>)` and that no other default hides a `var()` reference. - resolveThemeTokens resolves a `defaultFrom` default to the source token's effective value, its override included, so a settings page shows a real colour rather than `var(...)`. - Tailwind: `sidebar-active-start` / `sidebar-active-end` colours through colorWithAlphaChannel (from-/via-/to-, bg-…/20, …). - README: tokens, env var names, brand-following defaults, and guidance that they are accent colours, not text colours. Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01Edc98fMEUtdYir2GjG9fa4
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
2 participants
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
schemavaults/ui#126 uses a two-colour gradient to mark the DashboardLayout sidebar item for the current page. It reads the colours as
var(--sidebar-active-start, var(--schemavaults-brand-blue))andvar(--sidebar-active-end, var(--schemavaults-brand-red)). This PR defines those two tokens so deployments can re-theme the gradient like any other token. It also bumps the package to 0.30.0. No existing token is changed or repurposed.sidebar-active-startvar(--schemavaults-brand-blue)sidebar-active-endvar(--schemavaults-brand-red)Both are in the
sidebargroup with thecss-colorformat, placed right aftersidebar-ring.Defaults that follow another token
The defaults are references to other tokens, not literal colours, so re-theming
brand-blueorbrand-redalso re-colours the gradient unless these two are set separately:The manifest now represents such a default explicitly instead of hiding it in a string:
ModeThemeToken.defaultFrom(optional): names the token the default follows. A new helper,colorFrom(), buildsdefaultsfrom that token's CSS variable, so the two can't drift apart.defaultFromtoken's default is exactlyvar(<source variable>), that its source has the same scopes, and that no other token's default hides avar()reference.resolveThemeTokens: resolves adefaultFromdefault to the source token's effective value, including the source's override. A settings page therefore shows#0ea5e9after brand-blue is re-themed, notvar(...). For tokens withoutdefaultFrom, nothing changes.No fallback to literal values was needed.
Other changes
globals.css: declares both tokens in:rootand.dark.createThemeOverrideStyle,renderThemeOverrideCssandthemeOverridesFromEnvironmentpick the tokens up from the manifest (THEME_LIGHT_SIDEBAR_ACTIVE_START,THEME_DARK_SIDEBAR_ACTIVE_END, …).sidebarColorsexposessidebar-active-startandsidebar-active-endthroughcolorWithAlphaChannel, sofrom-sidebar-active-start to-sidebar-active-endandbg-sidebar-active-start/20work. The keys are flat rather than nested undersidebar, so they can't collide with an app's ownsidebarcolour.Verification
bun run test: 135 pass (117 before). The newsrc/sidebar_colors.test.tscovers the manifest entries, env var names, override CSS output, defaults following the brand tokens (per mode, and giving way to the token's own override), and the Tailwind classes including gradient stops and opacity modifiers. Withglobals.css, the Tailwind wiring and the resolver change reverted, 10 of the new tests fail.tsc --noEmitandbun run buildare clean;bun pm pack --dry-runincludesdist/sidebar_colors.*.globals.cssthrough the factory's Tailwind config and loaded it in headless Chromium:#60a5fa/#dc2626in both modes..darkon<body>.--sv-theme-light-sidebar-active-startwins over a brand override.--foregroundas the UI does: ≥ 5.59:1 against the plain sidebar background in both modes (sRGB mix; 6.19:1 in oklab). On its own, brand blue is 2.4:1 on the light sidebar, which is why the README calls these accent colours, not text colours.🤖 Generated with Claude Code
https://claude.ai/code/session_01Edc98fMEUtdYir2GjG9fa4
Generated by Claude Code