0.0.10 • Published 2 years ago

@costcolabs/forge-design-tokens v0.0.10

Weekly downloads
-
License
UNLICENSED
Repository
-
Last release
2 years ago

Status

ComponentStatus
ButtonComplete
CardComplete
DividerComplete
InputSingle input complete
ListComplete
NotificationComplete
TypographyComplete

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

KeyExample Values
Attribute Typecolor, font, space, size
Attributeicon, line-height, icon-svg, inset
Attribute Variantgray-500, md, bold, success
Componentbutton, notification, typography, modal
Component Variantalert, primary, t1-desktop, general
Component Statedefault, hover, active, focus

Base Tokens

Base TokenKey
Breakpointbp
Colorcolor
Fontfont
Gridgrid
Radiusradius
SizeSize
Spacespace
Typographytype

Attribute Type → Attribute → Attribute Variant

Component Tokens

Component → Attribute Type → Component Variant → Component State → Attribute

References

0.0.10

2 years ago

0.0.9

3 years ago

0.0.8

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago