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:
15
tokens/component/radio.json
Normal file
15
tokens/component/radio.json
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"radio": {
|
||||
"$description": "Radio component tokens — single-select control for mutually exclusive options. Used in service selection, payment method, and arrangement forms.",
|
||||
"size": {
|
||||
"$type": "dimension",
|
||||
"$description": "Radio button outer circle size.",
|
||||
"default": { "$value": "20px", "$description": "Default radio size — matches Figma 16px + padding for 44px touch target area" }
|
||||
},
|
||||
"dotSize": {
|
||||
"$type": "dimension",
|
||||
"$description": "Inner dot size when selected.",
|
||||
"default": { "$value": "10px", "$description": "Selected indicator dot — 50% of outer size" }
|
||||
}
|
||||
}
|
||||
}
|
||||
17
tokens/component/switch.json
Normal file
17
tokens/component/switch.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"switch": {
|
||||
"$description": "Switch component tokens — toggle control for enabling/disabling options. Used in arrangement forms for add-on services.",
|
||||
"track": {
|
||||
"$type": "dimension",
|
||||
"$description": "Switch track dimensions.",
|
||||
"width": { "$value": "44px", "$description": "Track width — slightly narrower than Figma 52px for better proportion with 44px touch target" },
|
||||
"height": { "$value": "24px", "$description": "Track height" },
|
||||
"borderRadius": { "$value": "{borderRadius.full}", "$description": "Pill shape" }
|
||||
},
|
||||
"thumb": {
|
||||
"$type": "dimension",
|
||||
"$description": "Switch thumb (knob) dimensions.",
|
||||
"size": { "$value": "18px", "$description": "Thumb diameter — sits inside the track with 3px inset" }
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user