How to use
There are several steps you can take to make your tokens more reusable and structured in your app. Let us take you through the levels of abstraction:
The most straight forward way is to inline tokens directly into your code. Depending on your framework of choice this comes in different colors. Here is an example with React:
import React from 'react'
import { compose, tokens } from 'classy-ui'
export const MyComponent = () => (
<div className={compose(tokens.backgroundColor.GRAY_40)}>
This is my inline awesome grey bacgkround
</div>
)
To avoid having too many tokens in your UI composition you can lift them out and now you can even compose them:
import { compose, tokens } from 'classy-ui'
const button = compose(
tokens.borderWidth.WIDTH_10,
tokens.color.GRAY_80,
tokens.backgroundColor.GRAY_40,
tokens.borderRadius.RADIUS_10
)
const alertButton = compose(
button,
tokens.backgroundColor.RED_50,
tokens.color.WHITE
)
// UI code goes here
You typically want to reuse compositions of tokens and by putting them into their own file you allow any component to use them:
styles.js
import { compose, tokens } from 'classy-ui'
const button = compose(
tokens.borderWidth.WIDTH_10,
tokens.color.GRAY_80,
tokens.backgroundColor.GRAY_40,
tokens.borderRadius.RADIUS_10
)
const alertButton = compose(
button,
tokens.backgroundColor.RED_50,
tokens.color.WHITE
)
You can make your compositions dynamic by defining them as functions:
import { compose, tokens } from 'classy-ui'
export const button = (disabled) => compose(
tokens.borderWidth.WIDTH_10,
tokens.color.GRAY_80,
tokens.backgroundColor.GRAY_40,
tokens.borderRadius.RADIUS_10,
disabled && tokens.opacity.OPACITY_50
)
A popular patterns is to create stateless UI components. Here is an example of the same button, but it includes the actual element as well, using React:
import React from 'react'
import { compose, tokens } from 'classy-ui'
export const Button = ({ disabled, children }) => {
const className= compose(
tokens.borderWidth.WIDTH_10,
tokens.color.GRAY_80,
tokens.backgroundColor.GRAY_40,
tokens.borderRadius.RADIUS_10,
disabled && tokens.opacity.OPACITY_50
)
return (
<button className={className} disabled={disabled}>
{children}
</button>
)
}
As you can see we are able to use the same property, disabled, to both disable the button and give it the proper styling.
Last modified 3yr ago