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
)
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 |
Last modified 3yr ago