You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
New variant with smaller spacing and typography. Implementation may evolve when Checkbox List component is built (#2267)
2. Style + Token Comparison Table
Token / Raw Style
CSS Property
Variant / State
Current Value
New Value
Status
Notes
checkbox-border
border-width
Default
{borderWidth.s} (1px)
1.5px
Updated
Border width increased for better definition
checkbox-border
border-color
Default
{color.greyscale.700} (#666666)
#797676
Updated
Updated to refined border color
checkbox-border-hover
border-color
Hover
{color.interactive.hover} (#004f84)
#000000
Updated
Updated to black for stronger hover indication
checkbox-border-focus
outline-color
Focus
{color.interactive.focus} (#feba35)
#006dcc
Updated
Updated focus color for better accessibility
checkbox-border-focus
outline-width
Focus
{borderWidth.l} (3px)
2px
Updated
Reduced focus outline width
checkbox-color-bg-checked
background-color
Checked
{color.interactive.default} (#0070c4)
#006dcc
Updated
Updated checked background color
checkbox-color-bg-checked-hover
background-color
Checked+Hover
{color.interactive.hover} (#004f84)
#045092
Updated
Updated checked hover background color
checkbox-border-error
border-color
Error
{color.interactive.error} (#ec040b)
#da291c
Updated
Updated error border color
checkbox-border-error-hover
border-color
Error+Hover
{color.interactive.error-hover} (#ba0000)
#a91a10
Updated
Updated error hover border color
checkbox-color-label-disabled
color
Disabled
{color.greyscale.500} (#949494)
#bab7b7
Updated
Updated disabled text color
checkbox-gap
gap
Default
{space.xs} (8px)
{space.s} (12px)
Updated
Increased gap between checkbox and label
checkbox-size
width/height
All
{space.l} (24px)
{space.l} (24px)
Unchanged
Checkbox size remains the same
3. New Tokens to Add
Token Name
Value
Description
checkbox-gap-compact
{space.xs} (8px)
Smaller gap between checkbox and label for compact variant
checkbox-label-font-size-compact
{typography.body.s}
Smaller typography for compact variant labels
4. Deprecated / No Longer Used Tokens
Token Name
Last Used In
Notes
None identified
N/A
All existing tokens will be updated rather than deprecated
5. Complete Design Token Inventory
Token Name
Current Value
Used For
State/Variant
CSS Property
Status
checkbox-border
{borderWidth.s} + {color.greyscale.700}
Checkbox border
Default
border
Updated
checkbox-border-disabled
{borderWidth.s} + {color.greyscale.400}
Checkbox border
Disabled
border
Current
checkbox-border-disabled-error
{borderWidth.m} + #F58185
Checkbox border
Disabled+Error
border
Current
checkbox-border-error
{borderWidth.m} + {color.interactive.error}
Checkbox border
Error
border
Updated
checkbox-border-focus
{borderWidth.l} + {color.interactive.focus}
Focus outline
Focus
outline
Updated
checkbox-border-hover
{borderWidth.m} + {color.interactive.hover}
Checkbox border
Hover
border
Updated
checkbox-border-radius
2px
Corner radius
All
border-radius
Current
checkbox-color-bg
{color.greyscale.white}
Background
Default
background-color
Current
checkbox-color-bg-checked
{color.interactive.default}
Background
Checked
background-color
Updated
checkbox-color-bg-checked-disabled
{color.interactive.disabled}
Background
Checked+Disabled
background-color
Current
checkbox-color-bg-checked-error
{color.interactive.error}
Background
Checked+Error
background-color
Current
checkbox-color-bg-checked-hover
{color.interactive.hover}
Background
Checked+Hover
background-color
Updated
checkbox-color-label
{color.text.default}
Label text
Default
color
Current
checkbox-color-label-disabled
{color.greyscale.500}
Label text
Disabled
color
Updated
checkbox-description-font-size
{typography.body.xs}
Description text
All
font
Current
checkbox-gap
{space.xs}
Label spacing
Default
gap
Updated
checkbox-gap-compact
{space.xs}
Label spacing
Compact
gap
New
checkbox-label-font-size
{typography.body.m}
Label text
Default
font
Current
checkbox-label-font-size-compact
{typography.body.s}
Label text
Compact
font
New
checkbox-size
{space.l}
Checkbox dimensions
All
width/height
Current
6. Implementation Notes
Border width updated from 1px to 1.5px for better visual definition and consistency with v2.0 design standards
Focus rings should continue to use outline property, not border, with updated color and reduced width
Color refinements maintain accessibility standards while providing clearer visual hierarchy
Gap between checkbox and label increased from 8px to 12px for improved visual balance
Error message positioning handled by separate form-item component (not part of this checkbox update)
Component structure remains unchanged - only CSS custom properties need updates
The compact variant provides smaller spacing and typography for denser layouts
Compact implementation may be refined when Checkbox List component (Component: Checkbox list #2267) is built, but current implementation should accommodate individual compact checkboxes
7. Clarifications Needed
Topic
Context
Suggested Action
Compact variant future compatibility
Compact variant should be implemented now, but may need adjustment when Checkbox List component (#2267) is built
Implement compact variant as individual prop, design for easy migration to parent-controlled compact mode later
Border width consistency
New 1.5px border width differs from current 1px
✅ Confirmed: Border widths of 1.5px (default) and 2px (focus) approved for implementation and testing
Focus outline implementation
Current uses 3px, new design shows 2px
Confirm this change aligns with accessibility requirements and other component focus states
8. Existing Tokens Requiring Fallbacks
Token Usage
Current Code
Needs Fallback
Suggested Fallback
var(--goa-checkbox-border)
No fallback
✅
1px solid #666666
var(--goa-checkbox-color-bg)
No fallback
✅
white
var(--goa-checkbox-color-bg-checked)
No fallback
✅
#0070c4
var(--goa-checkbox-border-radius)
Has fallback
❌
N/A
9. Cross-Component Impact Analysis
Shared Token
Used By Components
Impact Assessment
Global color tokens
All interactive components
Verify color updates don't break other form components
{borderWidth.s} updates
Input, Select, TextArea
Check if border width changes need to be applied consistently
Focus outline patterns
All interactive components
Ensure focus state changes align with other form components
Typography tokens
All text-containing components
No impact - checkbox uses component-specific typography tokens
10. Implementation Risks & Mitigation
Risk
Impact
Mitigation Strategy
Border width changes affect form alignment
Visual inconsistency with other form elements
Test checkbox alongside other form components, update related components if needed
Color changes break accessibility
Reduced contrast ratios
Verify all new colors meet WCAG 2.1 AA standards before implementation
Focus outline changes conflict with keyboard navigation
Inconsistent focus indication across components
Audit focus states across all form components and update consistently
Gap changes affect existing layouts
Text misalignment in existing implementations
Test with real content and provide migration guidance if needed
Missing compact variant breaks checkbox lists
Checkbox lists may not have proper spacing
Clarify compact requirements with design team before implementation
Handoff Checklist for Implementation
Before proceeding to the component-style-update-process.md implementation phase, ensure:
Complete design token inventory generated
All tokens without fallbacks identified and documented
Breaking changes documented with clear migration paths
Edge cases and clarifications resolved with user (compact variant, border width consistency)
Cross-component impact assessed and documented
Implementation risks identified with mitigation strategies
Specification document complete and ready for AI implementation
User has reviewed and approved all proposed changes
Additional Context
Current Implementation Files Analyzed:
Global tokens: /design-tokens/data/goa-global-design-tokens.json
