Add Switch and Radio atom components
Switch: - Wraps MUI Switch with FA brand tokens - Bordered pill track (Figma Style One), brand.500 fill when active - 4 component tokens: track width/height/borderRadius, thumb size - Stories include interactive service add-ons demo Radio: - Wraps MUI Radio with FA brand tokens - Brand.500 fill when selected, neutral.400 unchecked - 2 component tokens: outer size, dot size - Stories include card selection and payment method patterns Also: - Added ColourToggle and Slider to component registry (deferred) - Updated token registry and session log Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -244,3 +244,23 @@ the correct token for any design property.
|
||||
| chip.deleteIconSize.md | 16px | Chip | Medium chip delete icon |
|
||||
| chip.iconGap.default | → spacing.1 (4px) | Chip | Icon-to-text gap |
|
||||
| chip.borderRadius.default | → borderRadius.full (9999px) | Chip | Pill shape |
|
||||
|
||||
### Switch
|
||||
|
||||
`tokens/component/switch.json`
|
||||
|
||||
| Token path | Value / Reference | Used by | Description |
|
||||
|-----------|-----------|---------|-------------|
|
||||
| switch.track.width | 44px | Switch | Track width |
|
||||
| switch.track.height | 24px | Switch | Track height |
|
||||
| switch.track.borderRadius | → borderRadius.full (9999px) | Switch | Pill shape |
|
||||
| switch.thumb.size | 18px | Switch | Thumb diameter |
|
||||
|
||||
### Radio
|
||||
|
||||
`tokens/component/radio.json`
|
||||
|
||||
| Token path | Value / Reference | Used by | Description |
|
||||
|-----------|-----------|---------|-------------|
|
||||
| radio.size.default | 20px | Radio | Outer circle size |
|
||||
| radio.dotSize.default | 10px | Radio | Inner selected dot size |
|
||||
|
||||
Reference in New Issue
Block a user