Repoint the remaining controls, overlays and effects - #91
Draft
librowski wants to merge 3 commits into
Draft
Conversation
…en set Focusable controls draw the ring the design system defines: the focus-element geometry with the focus colour, replacing the hardcoded offsets each component carried. Elevation comes from the shadow ramp with its own colour token, so dark mode no longer needs a second rule. Selector, snackbar, tooltip and date-picker surfaces bind their component tokens, and the sizes that were literal rem values now take the size scale.
The SDK global stylesheet, the diagram surface and the execution markers bind canvas and ui tokens; app-scoped variables stay app-scoped.
The public snackbar background variables carry the complete layered value again - a status tint over the surface, consumed as one background - because two SDK surfaces read them directly and lost their tint when the tint moved into a private rule. Selector and switch dimensions go back to the values they had. The size scale has no step for most of them, so snapping to the nearest one silently resized every checkbox, radio and switch; a token is bound only where it resolves to the same value. The date-picker popup takes the base surface again, so hovering a day is visible, and the generic radio dot rule no longer overrides the size classes that follow it.
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.
Repoints the remaining controls, overlays and effects onto the token set. No public API changes.
Focus rings — every focusable control (buttons and fields excepted; they are handled in their own layers) draws the ring the design system defines: the focus-element geometry with the focus colour, replacing the hardcoded offsets each component carried. The alternative
ui-focus-ringandui-stroke-focustokens exist for other purposes and are deliberately not used here.Elevation — shadows bind the
shadow-ui-{xs,s,m,l,xl}geometry withshadow-ui-color, so the dark theme no longer needs a second rule. Modal takes thelstep.Components — selector metrics for checkbox, radio and switch; snackbar, tooltip and date-picker surfaces on their component tokens; canvas dot pattern and the scrollbar (kept a global style, not a component) on theirs.
SDK and AI Studio — the SDK global stylesheet, the diagram surface and the execution markers bind canvas and ui tokens; app-scoped
--ai-studio-*variables stay app-scoped.Values with no matching token were left as literals rather than snapped to a near miss, and are listed here so design can decide: date-picker elevation
0 4px 20px, SDK variable-suggestion elevation0 4px 12px, the chip's decorative 1px outline, the indicator pulse spread, the scrollbar's 6px width, and a handful of component-specific widths, icon dimensions, transitions and z-indexes. Snackbar has no opaque surface token, so it keepsui-bg-basebeneath its accent overlay; tooltip component tokens define backgrounds only.Two commits: the ui package, then the sdk/app styles.
Verified: ui lint + typecheck,
build:ui,build:lib, stylelint, all test suites, docs build, demo build — re-run after rebasing onto the field layer.