Customizing tokens

Classy-UI has a default set of tokens which you can find here. The configuration is structured as:
Tokens
The following categories of tokens is available to you and they are loosely based on system-ui:
{
  breakpoints: {...},
  space: {...},
  size: {...},
  fontStyles: {...},
  fontWeights: {...},
  fontSizes: {...},
  colors: {...},
  fonts: {...},
  borderWidths: {...},
  letterSpacings: {...},
  radii: {...},
  shadows: {...},
  zIndices: {...},
  lineHeights: {...},
  opacity: {...},
  durations: {...},
  timingFunctions: {...},
  gridColumns: {...},
  gridTemplateColumns: {...},
  flex: {...}
}
Each category of tokens maps to one or multiple CSS properties as seen in this table:
Category
Tokens Property
breakpoints
width, maxWidth, minWidth
space
top, right, bottom, left, margin, marginVertical, marginHorizontal, marginLeft, marginRight, marginTop, marginBottom, padding, paddingVertical, paddingHorizontal, paddingLeft, paddingRight, paddingTop, paddingBottom, gridGap, gridRowGap, gridColumnGap, translate, flexGrow, flexShrink
size
width, height, minWidth, minHeight, maxWidth, maxHeight, flexBasis
fontStyles
fontStyle
fontWeights
fontWeight
fontSizes
fontSize
colors
color, backgroundColor, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, placeholder
fonts
fontFamily
borderWidths
borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth, textDecorationThickness
letterSpacings
letterSpacing
radii
borderRadius, borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius
shadows
boxShadow, textShadow
zIndices
zIndex
lineHeights
lineHeight
opacity
opacity
durations
transitionDuration
timingFunctions
transitionTimingFunction
gridColumns
gridColumn, gridColumnStart, gridColumnEnd
gridTemplateColumns
gridTemplateColumns
flex
flexGrow, flexShrink
If you want to build your own set of tokens you can do so by creating a classy-ui.config.js file in the root of the project. 
classy-ui.config.js
module.exports = {
  tokens: {
    opacity: {
      NONE: '0',
      FADED: '0.75',
      FULL: '1'
    },
  }
}
Which creates the tokens of opacity.NONE, opacity.FADED and opacity.FULL.
We highly encourage to use valid CONSTANT names, meaning uppercase, no special chars and can not start with a number
When you restart your development flow the Typescript Server probably has be be restarted. In VSCode use the command palette and search for restart. "Restart TS server" will update the typing.
If you want to extend or reuse existing tokens that can be done by using a function instead:
classy-ui.config.js
module.exports = ({ tokens, screens }) => ({
  tokens: {
    ...tokens,
    opacity: {
      NONE: '0',
      FADED: '0.75',
      FULL: '1'
    },
  },
  screens
})
You can also add metadata to the tokens, the metadata will be displayed in the type documentation. For example:
{
  tokens: {
    colors: {
      RED: {
        value: 'red',
        description: 'This is the primary color'
      }
    },
  }
}
​

How it works

Writing a library

Last updated 2 months ago

Category	Tokens Property
breakpoints	width, maxWidth, minWidth
space	top, right, bottom, left, margin, marginVertical, marginHorizontal, marginLeft, marginRight, marginTop, marginBottom, padding, paddingVertical, paddingHorizontal, paddingLeft, paddingRight, paddingTop, paddingBottom, gridGap, gridRowGap, gridColumnGap, translate, flexGrow, flexShrink
size	width, height, minWidth, minHeight, maxWidth, maxHeight, flexBasis
fontStyles	fontStyle
fontWeights	fontWeight
fontSizes	fontSize
colors	color, backgroundColor, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, placeholder
fonts	fontFamily
borderWidths	borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth, textDecorationThickness
letterSpacings	letterSpacing
radii	borderRadius, borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius
shadows	boxShadow, textShadow
zIndices	zIndex
lineHeights	lineHeight
opacity	opacity
durations	transitionDuration
timingFunctions	transitionTimingFunction
gridColumns	gridColumn, gridColumnStart, gridColumnEnd
gridTemplateColumns	gridTemplateColumns
flex	flexGrow, flexShrink