Customizing tokens
Classy-UI has a default set of tokens which you can find here. The configuration is structured as:
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.jsmodule.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.jsmodule.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'}},}}
