CSS-UI Design
General considerations
CSS-UI builds upon TailwindCSS v4 and provides a flexible way to style CSS components.
All components use design tokens for colors and geometry.
The design tokens are set using four groups of utility classes:
- Modes
mode-auto|mode-light|mode-dark- Configures CSS properties for auto/light/dark mode.
- Sizes
size-xs|size-sm|size-md|size-lg|size-xl|size-2xl- Sets the CSS properties for adjusting size of components.
- Themes
theme-neutral|theme-primary|theme-secondary|theme-accent|theme-success|theme-warning|theme-error|theme-info- Sets the CSS properties for adjusting the color of components.
- Variants
- aspect:
variant-aspect-default|variant-aspect-square - density:
variant-density-default|variant-density-dense|variant-density-lax - depth:
variant-depth-0|variant-depth-1|variant-depth-2|variant-depth-3|variant-depth-4|variant-depth-5 - shape:
variant-shape-default|variant-shape-pill|variant-shape-sharp - style:
variant-style-filled|variant-style-soft|variant-style-outlined|variant-style-ghost - Sets the CSS properties for adjusting the final aspect of components.
The effect of the utility classes is inherited based on the DOM structure, and the result of combining utility classes from different groups is cummulative.
The utility classes from groups Modes, Sizes, and Themes are designed to override each other using the normal CSS precedence rules.
The utility classes from group Variants have more freedom - they cand override each other or act in a cummulative way.
What is shown in this documentation is a sample set of utility classes, selected to showcase the power of the components library. They can be recreated and enhanced to fit your requirements.
Mode examples
Text aspect on surface
Text aspect on surface
Text aspect on surface
Text aspect on surface
Text aspect on surface
Text aspect on surface
Text aspect on surface
Text aspect on surface
Text aspect on surface
Text aspect on surface
Text aspect on surface
Text aspect on surface