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
​

install - Previous

Typescript

Next - api

Pseudo decorators

Last modified 3yr ago

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