Personalizador de tema
Escolha um estilo, uma cor de marca e alguns tokens, veja componentes reais mudarem e leve o CSS, o provider e um preset JSON.
Escolhas
- 5019.4
- 10017.2
- 20014.5
- 30011.2
- 4008.3
- 5006.2
- 6004.7accent
- 7006.7
- 8009.6
- 90012.7
- 95016.1
Cada passo com a cor do texto e o contraste. Marcado: o passo que este estilo usa em --cml-accent, muitas vezes mais escuro que a sua cor para o texto sobre ele continuar legível.
Northwind
Espaço da equipe · 7 de 10 lugares
Convidar alguém
A pessoa terá acesso a todos os projetos da Northwind.
Plano Pro
Renova em 1º de dezembro.
Pessoas
| Nome | Papel | Status |
|---|---|---|
| ARAna Ribeiro | Dono | Ativo |
| BCBruno Costa | Editor | Ausente |
| CMCarla Mendes | Leitor | Ativo |
Contraste nesta prévia
Exportar
Só as suas mudanças, sobre o estilo escolhido. Mantenha o styleName e o CSS do estilo.
/* minimal com as suas mudanças, feito com o personalizador do Camaleo.
* Importe depois de "@camaleo/styles/base.css" e "@camaleo/styles/minimal.css".
* Sem camada de propósito: vence as camadas cml.* da biblioteca sem !important.
*/
[data-style="minimal"] {
/* Nenhum token alterado: o estilo como ele vem. */
}
O que cada escolha define
Cada escolha escreve tokens --cml-* e mais nada. Escolhas que você não tocou mantêm os valores do estilo e ficam fora do arquivo.
| Escolha | Tokens |
|---|---|
| Estilo base, modo, marca | styleName, mode e brand no StyleProvider; o createBrand transforma a marca em --cml-brand-* |
| Raio dos controles | --cml-radius-control, -sm, -lg e --cml-radius-field; a última posição é var(--cml-radius-pill) |
| Raio das superfícies | --cml-radius-surface, e --cml-radius-popover com 80% dele |
| Espessura da borda | --cml-border-width, --cml-field-border-width |
| Altura dos controles | --cml-control-height, -sm, -lg, --cml-field-height, --cml-item-height, todos movidos na mesma medida |
| Fontes | --cml-font-body, --cml-font-display |
| Sombras | --cml-shadow-surface, --cml-shadow-popover, --cml-card-shadow |
| Movimento desligado | --cml-motion-distance: 0px, --cml-motion-scale: 1, --cml-press-translate: 0px, os valores que a biblioteca usa para movimento reduzido |
Sobrescrever ou estilo novo
Sobrescrever escreve as suas mudanças em [data-style="<estilo>"], fora de qualquer camada. Todo o CSS da biblioteca está nas camadas cml.*, então CSS sem camada vence sem !important, inclusive em tokens que o estilo nunca define. Continue importando o CSS do estilo e passando o nome dele.
Estilo novo escreve um estilo próprio em @layer cml.style, a camada dos 13 estilos: os valores de token do estilo base com as suas mudanças por cima. Ele copia só tokens; as regras com escopo do estilo base (chanfros, divisórias, o desfoque do glass) ficam com o nome do estilo base. Se você quer o visual exato do estilo base, exporte uma sobrescrita. A prévia sempre roda o arquivo que você vai exportar.
Os pares de contraste abaixo da prévia são medidos na prévia renderizada, do mesmo jeito que o teste de matriz da biblioteca os lê: texto e texto da marca a 4,5:1, o anel de foco e as bordas de controle a 3:1. Veja Cor da marca para entender por que o texto sobre a marca sempre passa, e Criar um estilo para levar um estilo novo adiante.