richie/Parsons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add large size to Badge

Browse Source 
- 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>
This commit is contained in:
Richie
2026-03-25 16:08:17 +11:00
parent d1ae1a6f27
commit e67e8f46f7
5 changed files with 47 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
tokens/component/badge.json
View File

@@ -5,25 +5,29 @@
"$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" }
"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" }
"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" }
"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" }
"md": { "$value": "14px", "$description": "14px icons in medium badges" },
"lg": { "$value": "16px", "$description": "16px icons in large badges" }
},
"iconGap": {
"$type": "dimension",