Scoped overrides

Change one area, one skin or one part without touching the rest. Tokens on an element, @scope rules and nested providers, and how the cml.* layers decide who wins.

Try itCopy Anchor Link

The card has a "danger zone" (<div className="danger-zone">). Each option restyles only that area; the code shown with it is what runs.

<div className="danger-zone">
  <Text>Danger zone</Text>
  <Button variant="outline">Transfer</Button>
  <Button variant="danger">Delete workspace</Button>
</div>

Pick the narrowest toolCopy Anchor Link

Start with tokens. A token keeps the skin's states working (hover, focus, disabled) because the skin still writes the rules; you only change the values they read.

/* Taller controls in the checkout only */
.checkout {
  --cml-control-height: 2.75rem;
  --cml-field-height: 2.75rem;
}

When the change is not a value (a border that isn't there, a different layout), write a rule inside @scope. Add to ([data-style]) so it stops at nested skins, the way the skin files do:

@scope (.pricing) to ([data-style]) {
  [data-slot="card"] {
    border-style: dashed;
  }
}

For a whole different look in one area, nest a provider. It is an island: it starts from clean tokens, and its popups keep its skin.

<StyleProvider styleName="minimal">
  <Article />
  <StyleProvider styleName="retro" mode="dark">
    <Terminal />
  </StyleProvider>
</StyleProvider>

The layer orderCopy Anchor Link

base.css declares four layers before anything else. Later layers win over earlier ones, and CSS that is not in any layer wins over all of them:

@layer cml.tokens, cml.components, cml.style, cml.preferences;

If your own CSS lives in a layer (a design system, a CSS framework), order the layers once, at the top of your entry stylesheet, before any import. A layer listed after cml wins over all of its sub-layers:

@layer cml, app;

@import "@camaleo/styles/base.css";
@import "@camaleo/styles/glass.css";

@layer app {
  [data-style] { --cml-radius-surface: 20px; }
}

Specificity pitfallsCopy Anchor Link

• Unlayered rules beat skin states. [data-slot="button"] { background: navy } outside any layer also beats every skin's :hover, [data-disabled] and :focus-visible rules, so the button stops reacting. Change --cml-accent and --cml-accent-hover instead, or write the states yourself.
• !important turns the layers upside down. An important declaration in an earlier layer beats one in a later layer, and any layered important beats an unlayered one. You never need it to beat the library; leave it out.
• Your CSS also beats cml.preferences. If you add a transition or an animation, put it inside @media (prefers-reduced-motion: no-preference) yourself.
• A scope without a limit leaks into islands. @scope (.pricing) also styles a nested provider inside .pricing; add to ([data-style]).
• A token set too high is lost. On :root or outside the provider, it is overwritten by the provider's own declarations. Use [data-style] or an element inside.