StyleProvider

Provedor que define o estilo, o modo de cor e a cor da marca de tudo o que está dentro dele. Coloque um na raiz do app e aninhe outros para criar ilhas com outra cara, como um card escuro ou a marca de um cliente.

InstalaçãoCopy Anchor Link

Configure o Camaleo uma vez (Instalação) e importe a folha de estilo de cada estilo que você renderiza, inclusive nas ilhas. Um estilo sem o CSS dele cai nos valores padrão.

import { StyleProvider, useStyleScope, PortalScope, Portal, STYLE_NAMES } from "@camaleo/react";

Para a página inteira, um Server Component pode espalhar styleScopeProps({ styleName, mode, brand }) no <html>: os mesmos atributos, sem código no cliente. Veja em Instalação o CSS e as fontes.

AnatomiaCopy Anchor Link

O StyleProvider renderiza uma <div> com data-style, data-mode e os tokens da marca como variáveis inline. Cada elemento [data-style] redeclara todos os tokens e pinta o próprio fundo, a cor do texto e a fonte, então uma ilha aninhada começa do zero em vez de herdar o estilo do pai. Já o modo e a marca descem pela árvore até uma ilha definir os seus.

Os popups (Menu, Select, Popover, Dialog, Drawer…) são renderizados no <body>, fora de qualquer provider. Eles envolvem o conteúdo num elemento portal-scope que copia o escopo do provider de onde foram abertos.

ExemplosCopy Anchor Link

Cada prévia já fica dentro de um StyleProvider: o que a barra acima controla. Estes exemplos aninham um segundo, para você ver a ilha ao lado da página em volta.

Em contextoCopy Anchor Link

São pedaços inteiros de interface para copiar, com uma ilha dentro do estilo que você escolheu.

Boas práticasCopy Anchor Link

PropsCopy Anchor Link

Styling hooksCopy Anchor Link

O provider é a fonte dos tokens que todo componente lê. Use os atributos dele para mudar um estilo, ou defina um token numa ilha para mudar só aquela seção.

/* controles mais arredondados, só no estilo glass */
[data-style="glass"] {
  --cml-radius-control: 14px;
}

/* uma superfície mais suave numa ilha */
.central-de-ajuda[data-style] {
  --cml-surface: light-dark(var(--cml-brand-50), var(--cml-brand-950));
}

AcessibilidadeCopy Anchor Link

• Sem mode, a raiz segue prefers-color-scheme só com CSS (color-scheme e light-dark()), então não há piscada nem script antes da hidratação.
• Texto, anel de foco e bordas de controle passam no WCAG 2.2 AA nos 13 estilos, claro e escuro, com qualquer cor de marca. A biblioteca testa isso na CI.
• Cores forçadas (alto contraste do Windows) substituem o estilo: os componentes mantêm uma borda transparente e um outline no foco, então continuam visíveis.
• Movimento reduzido acalma as transições de todos os estilos, e transparência reduzida deixa o glass opaco. Os dois vêm do sistema, também em cada ilha.

RelacionadosCopy Anchor Link