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:
2026-03-25 17:04:37 +11:00
parent b2349d6c78
commit c10a5e4e1c
14 changed files with 529 additions and 2 deletions

View File

@@ -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 |