0.0.10 • Published 1 year ago
@costcolabs/forge-design-tokens v0.0.10
Status
| Component | Status |
|---|---|
| Button | Complete |
| Card | Complete |
| Divider | Complete |
| Input | Single input complete |
| List | Complete |
| Notification | Complete |
| Typography | Complete |
ES6 Modules
Importing modules as individual objects
import {ColorBlue600} from '@costcolabs/forge-design-tokens';
To use
background: ${tokens.ColorBlue600};
Project Structure
/ contains style-dictionary build script and configs
/properties contains the design tokens input files (in JSON format)
/properties/base contains component agnostic tokens
/properties/components contains component tokens
dist/ contains the generated output files (in different formats)
Token Structure
| Key | Example Values |
|---|---|
| Attribute Type | color, font, space, size |
| Attribute | icon, line-height, icon-svg, inset |
| Attribute Variant | gray-500, md, bold, success |
| Component | button, notification, typography, modal |
| Component Variant | alert, primary, t1-desktop, general |
| Component State | default, hover, active, focus |
Base Tokens
| Base Token | Key |
|---|---|
| Breakpoint | bp |
| Color | color |
| Font | font |
| Grid | grid |
| Radius | radius |
| Size | Size |
| Space | space |
| Typography | type |
Attribute Type → Attribute → Attribute Variant
Component Tokens
Component → Attribute Type → Component Variant → Component State → Attribute