Getting started
Colors
The color is its own class, as in btn primary. The same word works on every control. A control with no color class stays plain. Each slot has a solid, a content color for text on a button or badge, and a surface content color for text on a field, card, alert, or dialog panel. Primary is Indigo 500 in both themes. Neutral is Neutral 500 in both themes. Secondary, tertiary, success, warning, error, and info are the 600 step in both themes.
| Class | Default solid |
|---|---|
| primary | Indigo |
| secondary | Pink |
| tertiary | Teal |
| neutral | Gray |
| success | Green |
| error | Red |
| warning | Amber |
| info | Sky |
A card, an alert, or a dialog panel with no color stays plain, and the close button follows that text. A slot tints that text with the surface content color: the 800 step in light, the 200 step in dark. Text on a button or a badge is the content color: the 950 step in light, the 100 step in dark. A message with a slot uses the solid itself. A message with no slot stays the plain content color. It is not an error style.
A disabled control replaces its fill and its text with the disabled colors. It does not keep its slot. The range track keeps its own color. A disabled bump button has no fill. It fades, and its icon stays the plain content color.
A color on a parent
The color class sets a variable, and variables inherit. A message inside a primary card follows that card. Put the color on the message itself when it should use its own solid.
<section class="card primary">
<p class="message error">Required</p>
</section>