feat(shared): redesign checkbox & radio to match Toggle + Button system#6129
Open
tsahimatsliah wants to merge 6 commits into
Open
feat(shared): redesign checkbox & radio to match Toggle + Button system#6129tsahimatsliah wants to merge 6 commits into
tsahimatsliah wants to merge 6 commits into
Conversation
Align Checkbox and RadioItem with the redesigned Toggle/Switch and Button system so fields, buttons, toggles, checkboxes and radios read as one family: - single semantic brand fill when selected (accent-cabbage-default) with a solid white glyph (white check / white center dot), identical in light & dark - surface-hover halo, surface-focus blue keyboard ring, and a subtle press squeeze — theme-aware via semantic tokens, removing the per-theme overrides Adds /dev/checkbox-radio: a before/after comparison table across all states and variants in light & dark, with live hover/focus/press. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- Checkbox: use the filled (secondary) V glyph, scaled up, so the checkmark reads bold and solid instead of thin/outlined. - Radio: restore the legacy hover affordance where the ring thickens (border 2px → 4px) to text-primary on hover/focus, animated. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…check size - Labels now match the redesigned Switch: font-medium, antialiased, typo-footnote, text-secondary at rest → text-primary when selected/hover (radio was font-bold/tertiary; checkbox was tertiary). - Reduce the checkbox check glyph from scale-125 to scale-110. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Checkbox gains an `indeterminate` prop: renders a white dash, exposes aria-checked="mixed", and drives the native input.indeterminate property via a merged ref. For tri-state / "select all" patterns. - Checkbox & radio disable their press/scale/fatten motion under prefers-reduced-motion (state changes still apply, just no movement). - Review page: add an Indeterminate row to the checkbox states table. Contrast verified (WCAG 1.4.11, 3:1 for graphics): white check on cabbage is 3.76:1 (dark) / 5.18:1 (light) — passes; no cabbage change needed. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Add a spec asserting the native input.indeterminate property, the indeterminate label class, and aria-checked="mixed". - Attach the merged ref after the prop spread so it can't be clobbered. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…e family - Resting outline now uses text-secondary (the label tone) instead of the high-contrast border-subtlest-primary; hover/focus still lift it to text-primary, mirroring the field border behaviour. Stays >=3:1 (1.4.11). - Radio selected hover/focus halo is now the brand cabbage tint (matching the checkbox) instead of grey-on-brand. - Standardise motion to the toggle's timing: colours/box-shadow 0.12s linear, transforms 0.2s cubic-bezier(0.16,1,0.3,1). Focus ring already matches the shared blueCheese token used by toggle, fields and the .focus-outline button convention (surface-focus === accent-blueCheese-default). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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.
Summary
Brings Checkbox and Radio in line with the redesigned Toggle/Switch (#6117) and the Button system, so fields, buttons, toggles, checkboxes and radios read as one family.
accent-cabbage-defaultwith a solid white glyph — a white check for the checkbox, a white center dot for the radio — identical in light & dark. Removes the old hardcodedraw.cabbage.*values and the per-theme.light/.autooverride blocks.surface-hoverhalo on hover, an evensurface-focus(blue) ring on:focus-visible, and a subtle press squeeze on:active— matching the Toggle's motion.The biggest visible win is in light theme: the previous checked check was near-black on dark cabbage (low contrast) — now it's a clean white glyph.
Review page
Added
/dev/checkbox-radio— a before/after comparison table covering every state and variant for both components, in light & dark, with live hover/focus/press.noindex/nofollow; reachable on preview + local, blocked on production.Test plan
/dev/checkbox-radioon the preview domain; flip theme; click/hover/Tab through each control.sharedstrict typecheck + lint clean;Checkbox.spec+FormInputCheckboxGroup.specpass.🤖 Generated with Claude Code
Preview domain
https://feat-checkbox-radio-redesign.preview.app.daily.dev