The following predefined CSS Variables (custom properties) can be used to leverage design tokens in your project..
Border Radii
Border Widths
Background colours
Border colours
Icon colours
Shadows
Text colours
Letter spacing
Line heights
Font Size
Font weight
Icon Size
Spacing
Validation
To ensure your project only uses officially supported SDX CSS variables, you can run the sdxcheck.js script. The script scans your source files for var(--sdx-*) usages and verifies that each variable exists in the official SDX stylesheet.
Setup
Add the validation script to your project, thus CSS variables are checked automatically before the build runs:
{
"scripts": {
"prebuild": "node node_modules/@swisscom/sdx/dist/scripts/sdxcheck.js",
}
}