[DS 2.0] Repoint the remaining controls, overlays and effects - #91
Open
librowski wants to merge 5 commits into
Open
[DS 2.0] Repoint the remaining controls, overlays and effects#91librowski wants to merge 5 commits into
librowski wants to merge 5 commits into
Conversation
librowski
force-pushed
the
ds2-repoint
branch
2 times, most recently
from
August 26, 2026 09:37
0ea9a98 to
2e9bc0c
Compare
librowski
marked this pull request as ready for review
August 26, 2026 10:43
librowski
requested review from
lukasz-jazwa,
piotrblaszczyk and
szymon-t-sc
as code owners
August 26, 2026 10:43
librowski
changed the title
piotrblaszczyk
approved these changes
Aug 31, 2026
…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
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.
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 (the medium radio dot grows 8px → 10px, matching the Radio button component set in Figma); 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 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.