Links
Comment on page

Compose

The API which consumes the tokens is compose.
import { compose, tokens } from 'classy-ui'
const myClassname = compose(
tokens.backgroundColor.RED_50,
tokens.color.WHITE
)
You can also dynamically consume tokens:
import { compose, tokens } from 'classy-ui'
const myDynamicClassname = compose(
tokens.backgroundColor.RED_50,
true ? tokens.color.WHITE : tokens.color.BLACK
)
You can consume other compositions:
import { compose, tokens } from 'classy-ui'
const baseClassName = compose(tokens.backgroundColor.RED_50)
const myDynamicClassname = compose(
baseClassName,
true ? tokens.color.WHITE : tokens.color.BLACK
)

Special tokens

The default tokens of Classy-UI are related to CSS properties. We have taken some freedom to give you some additional tokens:
Name
Description
paddingVertical.$spacing_token
Gives top and bottom padding
paddingHorizontal.$spacing_token
Gives left and right padding
marginVertical.$spacing_token
Give top and bottom margin
marginHorizontal.$spacing_token
Give left and right margin
placeholder.$colors_token
Add color to placeholder
utils.CLEARFIX
Clear floating
utils.SCREEN_READER
Only shows on screen readers
utils.NOT_SCREEN_READER
Does not show on screen readers