Tokens

Todo estilo é um conjunto de custom properties --cml-*. Mude uma e todo componente que a lê acompanha, em todos os estilos.

Três níveisCopy Anchor Link

Comece pelo topo e só desça quando precisar. Escolha um nível: a demo roda o código que aparece com ela, no estilo, no modo e na marca da barra "visualizar em".

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

Onde os tokens moramCopy Anchor Link

O base.css declara todos os tokens no :root e em todo elemento com data-style (a <div> que um StyleProvider renderiza). É isso que faz de um provider aninhado uma ilha: ele parte dos padrões em vez de herdar a aparência do pai. Os padrões são o estilo minimal.

Um arquivo de estilo só redefine tokens em [data-style="<name>"], dentro da camada cml.style. Todo o CSS da biblioteca fica em camadas, então o seu CSS sem camada vence sem !important nem especificidade extra.

/* Todos os estilos, todos os providers da página */
[data-style] {
  --cml-radius-control: 999px;
}

/* Uma área: um elemento dentro do provider */
.checkout {
  --cml-control-height: 2.75rem;
}

As cores usam light-dark(), então uma declaração cobre os dois modos. O navegador escolhe o lado pelo color-scheme, que o data-mode define (veja Modo escuro).

Os gruposCopy Anchor Link

Tokens por componenteCopy Anchor Link

Os tokens de componente são declarados como initial, então uma ilha aninhada nunca os herda, e toda regra que lê um deles tem um fallback. Definir um muda só aquela parte:

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

Cada página de componente lista os tokens que ele lê em Styling hooks, agrupados em cor, forma, tipografia e os próprios. Comece por lá em vez de adivinhar.

Ganchos de estilizaçãoCopy Anchor Link

Quando nenhum token cobre o que você quer, mire na parte. Todo componente renderiza um data-slot com o nome da parte, e a biblioteca o escreve depois das suas props, então ele não é substituído sem querer. Variantes e estados também são atributos:

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

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

Para limitar uma regra a um estilo ou a uma área, envolva-a em @scope: veja Sobrescritas com escopo.

Todos os tokensCopy Anchor Link

Lidos do tokens.css no build do site. A última coluna mostra o valor no estilo escolhido na barra "visualizar em"; um traço quer dizer que o estilo mantém o padrão.