design-system 3.2.0: control boundaries clear SC 1.4.11's 3:1 via --control-border - #18
Merged
Merged
Conversation
…11's 3:1 --border measured 1.22-1.50:1 against the page in every theme and palette, under WCAG 2.2 SC 1.4.11's 3:1 for the visual information that identifies a control, and no decorative border token cleared the bar (#16). - New per-theme/per-palette token --control-border, hue-matched to each ground, clearing 3:1 against both --page-bg and the --surface-2 field with headroom (3.15:1+). tidsro aliases its --border-strong, already tuned as its control affordance. One shared light-mode value, since palettes keep the base light surfaces; wend carries its own dark value (the base one only reaches 2.7:1 on its lifted ground). - .input/.textarea/.select and the bordered .btn variants point at it. .btn-secondary/.btn-danger keep their hue by color-mixing 28% of the tint over the token; hovers strengthen toward the text ink because --border-strong now sits below the resting boundary. - Decorative edges (.card/.alert/.table/.toast/.modal) keep --border, per the issue's scope, and a test pins that they never adopt the token. - New contrast-loop test asserts the 3:1 floor for the token and the composed secondary/danger borders across every theme x palette; tidsro and the _oled.css foundation joined the shared scope builder. - Scaffolds re-synced (web-vite, web-react-ts) at 3.2.0. Closes #16
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
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.
Closes #16.
.input/.textarea/.selectand the bordered.btnvariants drew their edge with--border, which measures 1.22–1.50:1 against the page in every theme and palette — under WCAG 2.2 SC 1.4.11 (AA)'s 3:1 for the visual information that identifies a control. No existing border token clears the bar, so this adds the dedicated control-boundary token the issue called for, per Malin's 2026-08-21 decision: fixed upstream, synced out, no consumer-local overrides.What changed
--control-border, set per theme and per palette, hue-matched to each ground, clearing 3:1 against both--page-bgand the--surface-2field with headroom (every value ≥3.15:1).tidsroaliases its--border-strong, which was already tuned as its control affordance (4.17:1). Light mode carries one shared value since palettes keep the base light surfaces;wendneeds its own dark value (the base one only reaches 2.7:1 on its lifted ground).classicandgoldinherit:root's correctly and stay untouched..input/.textarea/.selectand base.btn(so.btn-ghosttoo) directly;.btn-secondary/.btn-dangerkeep their hue bycolor-mixing 28% of their tint over the token, which keeps the floor. Hovers strengthen toward the text ink —--border-strongnow sits below the resting boundary, so pointing hover at it would dim the edge..card/.alert/.table/.toast/.modalkeep--border, per the issue's scope, and a test pins that they never adopt the control token.--border/--border-strongvalues are unchanged.tidsroand the_oled.cssfoundation, which the contrast loops had never checked. Floors, not equalities.Verification
node --test "tools/*.test.mjs": 68/68 pass locally (was 67; +1 new, and the extended kenaz/scope coverage rides existing tests). Link check green.border-colorof a live.inputand.btn-secondarychecked across 11 palette × theme combos in the gallery via headless browser — every combo resolves the intended value, includingwend's light mode falling back to the shared light token andtidsro's--border-strongalias.Visual note: every input and bordered button gets a visibly stronger edge in every theme — that is the point of the fix, but it's a look change worth an eyeball in the gallery before merging.