Repository navigation
The builder wears the theme it lives in - #35
Merged
Merged
Conversation
The window read `--os-ui-accent` for its accent — the control kit's token, which the shell overwrites inline with the user's accent preference. That preference sits at the brand's Pulse pink until the person actually picks one, so under a worn desktop theme the builder painted pink controls inside blue chrome: two brands in one window. Theme first, kit second: the accent now reads `--os-accent` — the token a desktop theme declares — before the kit's, and the embedded os-* components (Save, the segmented pickers, every checkbox) get the kit tokens re-pointed at the window's own accent, scoped to the roots' children because declaring them on the root itself would be a var() cycle. Hovers and focus rings derive from that one accent with color-mix(), so the pair can never disagree. Rounding joins the same contract: cards, tiles and panels wear `--os-ui-card-radius`, controls `--os-ui-btn-radius`, and the card hairline and hover lift come from the shell's card tokens — so a corner or a lift here matches every other window on the desktop. The old fixed values remain as fallbacks for the plain admin page with no shell. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0119U4sRRWGcTQdwYreTwpAp
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.
What
Restyles the builder (and the entries / Theme Studio / analytics windows, which share its tokens) so the UI is driven by the OpenStation desktop theme's own tokens — same colours, same rounding — instead of showing the brand's Pulse pink inside whatever chrome the theme paints.
Why
The shell writes the user's accent preference over
--os-ui-accentas an inline style, and that preference sits at Pulse pink until the person actually picks one. Under a worn theme (Legacy declares WordPress blue) the builder showed pink pills, pink badges and a pink Save inside a blue-chromed window — two brands in one window.How
--atfb-accent: var( --os-accent, var( --os-ui-accent, #2271b1 ) ).--os-accentis the accent a desktop theme declares; with no theme worn both names resolve to the same brand accent and nothing changes.<os-button>,<os-select>,<os-segmented>, checkboxes) get the kit tokens re-pointed at the window's accent — scoped to the roots' children, because declaring them on the root itself is a var() cycle.color-mix()(flat fallbacks first), so they can never disagree with it.--os-ui-card-radius, controls--os-ui-btn-radius; card hairline and hover lift come from the shell's card tokens. Old fixed values remain as fallbacks for the plain admin page.Under Legacy on the QA site: Build pill, REQUIRED badges, + Add option, Save, segmented pickers and focus rings all now match the window's blue chrome. Under the brand theme everything stays Pulse pink, as before. Drag handles, layout and all controls are untouched — styling only.
npx vitest run: 369 passed. Deployed to the 8889 QA site and verified in the shell (Build tab, inspector, Theme tab, Entries window).🤖 Generated with Claude Code
https://claude.ai/code/session_0119U4sRRWGcTQdwYreTwpAp