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