Add large size to Badge

- 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:
2026-03-25 16:08:17 +11:00
parent d1ae1a6f27
commit e67e8f46f7
5 changed files with 47 additions and 28 deletions

View File

@@ -5,8 +5,10 @@
:root {
--fa-badge-height-sm: 22px; /** Small — compact inline status indicators */
--fa-badge-height-md: 26px; /** Medium — default status badges, card labels */
--fa-badge-height-lg: 32px; /** Large — prominent labels, hero badges, marketing callouts */
--fa-badge-icon-size-sm: 12px; /** 12px icons in small badges */
--fa-badge-icon-size-md: 14px; /** 14px icons in medium badges */
--fa-badge-icon-size-lg: 16px; /** 16px icons in large badges */
--fa-button-height-xs: 28px; /** Extra-small — compact text buttons, inline actions */
--fa-button-height-sm: 32px; /** Small — secondary actions, toolbar buttons */
--fa-button-height-md: 40px; /** Medium — default size, form submissions */
@@ -212,8 +214,10 @@
--fa-typography-overline-sm-letter-spacing: 1.5px;
--fa-badge-padding-x-sm: var(--fa-spacing-2); /** 8px — compact horizontal padding */
--fa-badge-padding-x-md: var(--fa-spacing-3); /** 12px — default horizontal padding */
--fa-badge-padding-x-lg: var(--fa-spacing-4); /** 16px — generous horizontal padding */
--fa-badge-font-size-sm: var(--fa-font-size-2xs); /** 11px — small badge text */
--fa-badge-font-size-md: var(--fa-font-size-xs); /** 12px — default badge text */
--fa-badge-font-size-lg: var(--fa-font-size-sm); /** 14px — large badge text */
--fa-badge-icon-gap-default: var(--fa-spacing-1); /** 4px icon-text gap */
--fa-badge-border-radius-default: var(--fa-border-radius-full); /** Pill shape — fully rounded */
--fa-button-padding-x-xs: var(--fa-spacing-2); /** 8px — compact horizontal padding */