Richie
eb1099a4d0
- Create badge component tokens (height, paddingX, fontSize, iconSize, iconGap, borderRadius for sm/md sizes) — 10 tokens - Build Badge component: pill-shaped status indicator label - 6 colours: default, brand, success, warning, error, info - 2 variants: soft (tonal, default) and filled (solid) - 2 sizes: small (22px) and medium (26px) - Optional leading icon prop - All colours use CSS variables from token system (no hardcoded hex) - Create 10 Storybook stories: Default, AllColoursSoft, AllColoursFilled, WithIcons, WithIconsFilled, Sizes, SmallSizes, InPriceCard, ServiceStatus, CompleteMatrix - Regenerate token pipeline outputs Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
40 lines
1.7 KiB
JSON
40 lines
1.7 KiB
JSON
{
|
|
"badge": {
|
|
"$description": "Badge component tokens — status indicator labels used in PriceCard, ServiceOption, and other contexts. Display-only, not interactive.",
|
|
"height": {
|
|
"$type": "dimension",
|
|
"$description": "Badge heights per size.",
|
|
"sm": { "$value": "22px", "$description": "Small — compact inline status indicators" },
|
|
"md": { "$value": "26px", "$description": "Medium — default status badges, card labels" }
|
|
},
|
|
"paddingX": {
|
|
"$type": "dimension",
|
|
"$description": "Horizontal padding per size.",
|
|
"sm": { "$value": "{spacing.2}", "$description": "8px — compact horizontal padding" },
|
|
"md": { "$value": "{spacing.3}", "$description": "12px — default horizontal padding" }
|
|
},
|
|
"fontSize": {
|
|
"$type": "dimension",
|
|
"$description": "Font size per badge size.",
|
|
"sm": { "$value": "{fontSize.2xs}", "$description": "11px — small badge text" },
|
|
"md": { "$value": "{fontSize.xs}", "$description": "12px — default badge text" }
|
|
},
|
|
"iconSize": {
|
|
"$type": "dimension",
|
|
"$description": "Icon dimensions per badge size.",
|
|
"sm": { "$value": "12px", "$description": "12px icons in small badges" },
|
|
"md": { "$value": "14px", "$description": "14px icons in medium badges" }
|
|
},
|
|
"iconGap": {
|
|
"$type": "dimension",
|
|
"$description": "Gap between icon and label text.",
|
|
"default": { "$value": "{spacing.1}", "$description": "4px icon-text gap" }
|
|
},
|
|
"borderRadius": {
|
|
"$type": "dimension",
|
|
"$description": "Badge corner radius.",
|
|
"default": { "$value": "{borderRadius.full}", "$description": "Pill shape — fully rounded" }
|
|
}
|
|
}
|
|
}
|