Variable Taxonomy: Themes (Colors)
Themes define the color palettes using Semantic Functional Naming. These variables map to the theme="..." attribute (e.g. primary, alert, dark) and only control hues, lightness, and opacities.
| Variable Name | Description |
|---|---|
--surface-base |
The background color of a container (e.g., the empty track of a meter, or background of a popup). |
--surface-fill |
The active/primary color (e.g., the progress bar of a meter, or active button background). |
--surface-text |
The typography color used within the component. |
--border-color |
The color applied to borders or outlines. |
--overlay-stripe-color |
The color overlay used for candy-stripe patterns. |
Variable Taxonomy: Styles (Appearances)
Styles define the physical appearances and effects. These map to the variant="..." attribute (e.g. flat, 3d, rounded) and control dimensions, radiuses, shadows, and animations.
| Variable Name | Description |
|---|---|
--surface-radius |
Controls rounded corners (e.g., 0px for flat, 25px for pill-shaped). |
--surface-shadow |
Controls drop shadows or inner shadows to simulate depth. |
--overlay-convex-opacity |
Controls visibility of a 3D glossy/convex shine overlay (0 for flat, 1 for 3D). |
--border-width |
Controls the thickness of the border. |
--transition-speed |
Controls the timing of animations (e.g. candy-stripe moving speed). |