Component Groups
Component tokens let you style groups of related components at once. Rather than overriding individual component styles, these tokens propagate the style across every component that shares a given visual quality.
Form Controls
Components such as input, select, textarea, checkbox, and others share styles defined with the --cs-form-control-* prefix.
Not every form control uses all of these custom properties. For example, radio defines its own height and border radius to achieve its familiar shape but shares many other styles with other components for a cohesive look and feel. Similarly, button defines many of its own styles but matches the height and border width of other form controls.
| Custom Property | Description |
|---|---|
--cs-form-control-background-color |
Background color of form control inputs |
--cs-form-control-border-color |
Border color of form control inputs |
--cs-form-control-border-style |
Border line style of form control inputs |
--cs-form-control-border-width |
Border thickness of form control inputs |
--cs-form-control-border-radius |
Corner rounding of form control inputs |
--cs-form-control-activated-color |
Accent color when a control is active, checked, or selected |
--cs-form-control-label-color |
Text color of form control labels |
--cs-form-control-label-font-weight |
Font weight of form control labels |
--cs-form-control-label-line-height |
Line height of form control labels |
--cs-form-control-value-color |
Text color of the user-entered or selected value |
--cs-form-control-value-font-weight |
Font weight of the user-entered or selected value |
--cs-form-control-value-line-height |
Line height of the user-entered or selected value |
--cs-form-control-hint-color |
Text color of the hint text below a form control |
--cs-form-control-hint-font-weight |
Font weight of hint text |
--cs-form-control-hint-line-height |
Line height of hint text |
--cs-form-control-placeholder-color |
Text color of input placeholder text |
--cs-form-control-required-content |
Content appended to labels of required fields |
--cs-form-control-required-content-color |
Color of the required field indicator |
--cs-form-control-required-content-offset |
Inline spacing between the label text and required indicator |
--cs-form-control-padding-block |
Block (top/bottom) padding inside form control inputs |
--cs-form-control-padding-inline |
Inline (left/right) padding inside form control inputs |
--cs-form-control-height |
Computed height of single-line form controls; derived from padding and line height |
--cs-form-control-toggle-size |
Size of toggle controls (checkboxes, radios, switches) |
Buttons
In addition to sharing styles with form controls, buttons have their own subset of unique tokens.
| Custom Property | Description | Preview |
|---|---|---|
--cs-button-transform-hover |
A transform function to apply to buttons on mouseover/hover | |
--cs-button-transform-active |
A transform function to apply to buttons when pressed/active |
Panels
Panel tokens apply to components with larger, contained surface areas, like callout, card, details, and dialog.
| Custom Property | Description |
|---|---|
--cs-panel-border-style |
Border line style for panel components |
--cs-panel-border-width |
Border thickness for panel components |
--cs-panel-border-radius |
Corner rounding for panel components |
cs-details, at your service. Tooltips
Tooltips have no group tokens. How they look comes from custom properties of the tooltip itself, named --cs-tooltip-* and listed with their defaults in its API reference. No theme sets them; the tooltip reads each one with its default as a fallback.
They still reach every tooltip, because a value set on :root, a theme class or a section is inherited. That includes the built-in tooltips in slider and copy button, which are tooltips too. Only a tooltip reads them, though, so your own CSS that uses one needs the same fallback, such as var(--cs-tooltip-background-color, var(--cs-color-text-normal)).