Links

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