pp-nm-app-constants
v1.0.0
Published
Manage design tokens
Downloads
1
Readme
PP-NM-APP-CONSTANTS
Repository created for handling Design Tokens.
Design Tokens
"These central and tiny pieces of UI information will be used across several platform during the conception of a digital product. They’re called: design tokens." https://uxdesign.cc/design-tokens-for-dummies-8acebf010d71
Naming convention
To define new tokens should be used CTI convention. CTI - Category Type Item. Also it can be a bit modified to CT or CTIS (add Item and State). Basically should be used CT (Category Type).
Category
Category can be:
- color
- font
- size
Type
Type can be:
- (for color) brand, background, text, border
- (for font) size, letter-spacing, line-height, weight, family
- (for size) spacing, border-radius
Item (optional)
Item can be any component name to which token should be applied. Button, avatar, progressbar, etc.
State (optional)
State of the component. Base, active, disabled, etc.
Design Tokens Examples
- color.background.green
- color.brand.green
- size.spacing.large
- size.radius.large
- color.brand.red
- color.background.dark-grey
- color.background.button.disabled