richie/ADS3-Design-System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Badge, Chip, and IconButton components with token layers

Browse Source 
- Badge: 11 solid-colour variants (navy, info, success, error, warning + light variants, neutral, white) with icon slots
- Chip: bordered interactive element with selected, dismissible, and disabled states
- IconButton: circle/square shapes, 3 variants × 3 intents × 3 sizes, uses lucide-react icons
- Add badge and chip domain token layers to tokens.css
- Configure extendTailwindMerge in cn() to recognise custom font-size utilities (text-small, text-body, etc.)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Richie
2026-05-21 16:01:06 +10:00
parent c00335ef84
commit e025c0eb34
13 changed files with 710 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/tokens/tokens.css
View File

@@ -89,6 +89,28 @@
--color-button-subtle-bg: var(--color-blue-04);
--color-button-subtle-text: var(--color-blue-01);
/* Badge */
--color-badge-navy: var(--color-blue-01);
--color-badge-info: var(--color-blue-02);
--color-badge-info-light: var(--color-blue-04);
--color-badge-success: var(--color-green-02);
--color-badge-success-light: var(--color-green-04);
--color-badge-error: var(--color-red-02);
--color-badge-error-light: var(--color-red-04);
--color-badge-warning: var(--color-orange-02);
--color-badge-warning-light: var(--color-orange-04);
--color-badge-neutral: var(--color-grey-04);
--color-badge-on-success-light: var(--color-green-01);
--color-badge-on-error-light: var(--color-red-01);
--color-badge-on-warning-light: var(--color-orange-01);
/* Chip */
--color-chip-border: var(--color-blue-01);
--color-chip-text: var(--color-blue-01);
--color-chip-bg: var(--color-white);
--color-chip-selected-bg: var(--color-blue-01);
--color-chip-selected-text: var(--color-white);
/* Radius */
--radius-sm: 4px;
--radius-default: 6px;