Richie
e67e8f46f7
- Add lg tokens: height 32px, paddingX 16px, fontSize 14px, iconSize 16px - Refactor component to use size map instead of ternary - Update stories: Sizes now shows all three, CompleteMatrix includes large Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
44 lines
2.0 KiB
JSON
44 lines
2.0 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" },
|
|
"lg": { "$value": "32px", "$description": "Large — prominent labels, hero badges, marketing callouts" }
|
|
},
|
|
"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" },
|
|
"lg": { "$value": "{spacing.4}", "$description": "16px — generous 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" },
|
|
"lg": { "$value": "{fontSize.sm}", "$description": "14px — large 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" },
|
|
"lg": { "$value": "16px", "$description": "16px icons in large 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" }
|
|
}
|
|
}
|
|
}
|