Customizing tokens
{
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'
}
},
}
}
Last modified 2yr ago