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:
1. Inlining
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>
)
2. Lifting and composing
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
3. Reusable compositions
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
)
4. Factories
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
)
5. UI components
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.

How to think atomic

How it works

Last modified 3yr ago