Repository navigation
fix(theme): give the select trigger a 3:1 border - #342
Merged
Merged
Conversation
The Select trigger's `gray-200` border is 1.58:1 on white, its `ghost` variant has no edge at rest, and its read-only state differs from the editable one only by a 1.09:1 tint, so none of them meets the 3:1 that WCAG 1.4.11 asks of a control's boundary. Move the `solid` and `soft` borders to `gray-450` and `gray-500`, with the other one on hover. Give `ghost` a bottom border in the same colour with square bottom corners, set the error bottom colour in the invalid compound so an invalid ghost trigger stays red, and give read-only a dashed border. A new contrast test checks every border token against the trigger's fill, the read-only fill and the four page backgrounds. Describe the new surface on the Select page, add a Read-only story, and declare `invalid`, `readonly` and an enum `variant` type in the story meta, so the controls and URL args reach the story. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch was successfully deployed
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.
Description
The Select trigger copies the field surface into its own recipe, so it needs the same contrast fix as Input and Textarea. Its
gray-200border is 1.58:1 on white,ghosthas no edge at rest, and read-only differs from the editable state only by a 1.09:1 tint. WCAG 1.4.11 asks for 3:1 on a control's boundary.In
useSelectRecipe:solidandsoftborders usegray-450andgray-500(light, dark and adaptiveneutral), with the other one on hover.ghostkeeps a transparent fill and side borders, and gets a bottom border in the same colours with square bottom corners.borderBottomColor: "@color.error"in all four slots, so an invalid ghost trigger's bottom edge stays red.The lowest ratio is now 3.20:1 (
gray-450on thegray-100soft fill). A newuseSelectRecipeContrast.test.tsreads every border token from the recipe and checks it against the trigger's fill, the read-only fill and the four page backgrounds with culori'swcagContrast. It fails when a border goes back togray-200.The Select page gets a new Ghost description, a
## Statessection with Read-only, a 3:1 line under Accessibility and a corrected FAQ. Storybook gets aReadOnlystory, and the meta declaresinvalid,readonlyand an enum type forvariant. Without that type, Storybook dropsvariantURL args, because the inferred Vue prop type is a union.Related issue
None.
Type of change
Checklist
feat(theme): …)pnpm build:nodocs && pnpm lint && pnpm typecheck && pnpm testand everything passespnpm changeset) for changes to publishable packages, or this change only touches docs/storybook/app/playground/testsdist/,.styleframe/)mainand stays focused in scopeNotes / screenshots
What ran:
pnpm build:nodocs,pnpm --filter @styleframe/theme test,pnpm typecheck, oxlint and oxfmt on the touched files,pnpm --filter @styleframe/storybook build, andpnpm build:docs && pnpm --filter @styleframe/docs test:build. The rootpnpm lintandpnpm testdid not run, since the package checks cover this change.The shared field surface used by Input, Textarea, InputDate and OTP gets the same fix in a separate PR.
🤖 Generated with Claude Code