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'
}
},
}
}

‚Äč