Getting started

Colors

The color is its own class, as in btn primary. The same word works on every control. Indigo, pink, teal, gray, green, red, amber, and sky are the defaults. Set --color-secondary, or any of the eight, to replace one.

Class	Default solid	Default on
primary	Indigo	Button, icon button, badge, checkbox, radio, switch, slider
secondary	Pink	Only when you add the class
tertiary	Teal	Only when you add the class
neutral	Gray	Input, textarea, and select
success	Green	Only when you add the class
error	Red	Message
warning	Amber	Alert
info	Sky	Only when you add the class

A card with no color stays white. A dialog panel with no color stays neutral, and so does its close button.

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 must stay red.

<section class="card primary">
  <p class="message error">Required</p>
</section>