Richie
21877ce4e6
- Interactive tag for filtering, selection, and dismissible labels - Wraps MUI Chip with FA tokens: 12 component tokens (height, padding, font, icon sizes) - Two variants (filled/outlined) × two colours (default/primary) × two sizes (sm/md) - Custom `selected` prop promotes to brand colour with warm bg (outlined) - MUI theme overrides: soft tonal fills, branded outlines, hover/focus states - 10 Storybook stories including interactive filter and removable tag demos - Preflight passed all 5 checks Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
46 lines
2.0 KiB
JSON
46 lines
2.0 KiB
JSON
{
|
|
"chip": {
|
|
"$description": "Chip component tokens — interactive tags for filtering, selection, and dismissible labels. Used in ServiceOption, search filters, and arrangement forms.",
|
|
"height": {
|
|
"$type": "dimension",
|
|
"$description": "Chip heights per size.",
|
|
"sm": { "$value": "28px", "$description": "Small — compact inline tags, tight layouts" },
|
|
"md": { "$value": "32px", "$description": "Medium — default interactive chips, filter tags" }
|
|
},
|
|
"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 chip size.",
|
|
"sm": { "$value": "{fontSize.xs}", "$description": "12px — small chip text" },
|
|
"md": { "$value": "{fontSize.sm}", "$description": "14px — default chip text" }
|
|
},
|
|
"iconSize": {
|
|
"$type": "dimension",
|
|
"$description": "Leading icon dimensions per chip size.",
|
|
"sm": { "$value": "16px", "$description": "16px icons in small chips" },
|
|
"md": { "$value": "18px", "$description": "18px icons in medium chips" }
|
|
},
|
|
"deleteIconSize": {
|
|
"$type": "dimension",
|
|
"$description": "Delete/close icon dimensions per chip size.",
|
|
"sm": { "$value": "14px", "$description": "14px delete icon in small chips" },
|
|
"md": { "$value": "16px", "$description": "16px delete icon in medium chips" }
|
|
},
|
|
"iconGap": {
|
|
"$type": "dimension",
|
|
"$description": "Gap between icon/delete-icon and label text.",
|
|
"default": { "$value": "{spacing.1}", "$description": "4px icon-text gap" }
|
|
},
|
|
"borderRadius": {
|
|
"$type": "dimension",
|
|
"$description": "Chip corner radius.",
|
|
"default": { "$value": "{borderRadius.full}", "$description": "Pill shape — fully rounded" }
|
|
}
|
|
}
|
|
}
|