Tokens

Every skin is a set of --cml-* custom properties. Change one and every component that reads it follows, in every skin.

Three levelsCopy Anchor Link

Start at the top and go further down only when you need to. Pick a level: the demo runs the code shown with it, in the skin, mode and brand of the "preview in" bar.

<StyleProvider styleName="minimal">
  <InviteCard />
</StyleProvider>

Where tokens liveCopy Anchor Link

base.css declares every token on :root and on every element with data-style (the <div> a StyleProvider renders). That is what makes a nested provider an island: it starts from the defaults instead of inheriting its parent's look. The defaults are the minimal skin.

A skin file only redefines tokens on [data-style="<name>"], inside the cml.style layer. The library CSS is all layered, so your unlayered CSS beats it without !important or extra specificity.

/* Every skin, every provider on the page */
[data-style] {
  --cml-radius-control: 999px;
}

/* One area: an element inside the provider */
.checkout {
  --cml-control-height: 2.75rem;
}

Colors use light-dark(), so one declaration covers both modes. The browser picks the side from color-scheme, which data-mode sets (see Dark mode).

The groupsCopy Anchor Link

Per-component tokensCopy Anchor Link

Component tokens are declared as initial, so a nested island never inherits them, and every rule that reads one has a fallback. Setting one changes that part only:

/* button.css reads var(--cml-button-outline-bg, var(--cml-surface-raised)) */
[data-style] {
  --cml-button-outline-bg: transparent;
}

Each component page lists the tokens it reads under Styling hooks, grouped into color, shape, type and its own. Start there instead of guessing.

Styling hooksCopy Anchor Link

When no token covers what you want, target the part. Every component renders a data-slot with its part name, and the library writes it after your props, so it can't be replaced by accident. Variants and states are attributes too:

[data-slot="button"][data-variant="outline"] {
  border-style: dashed;
}

[data-slot="switch"][data-checked] {
  --cml-accent: var(--cml-success);
}

To limit a rule to one skin or one area, wrap it in @scope: see Scoped overrides.

All tokensCopy Anchor Link

Read from tokens.css when the site is built. The last column shows the value in the skin picked in the "preview in" bar; a dash means the skin keeps the default.