Perguntas frequentes
Respostas curtas para as perguntas que aparecem antes e depois de instalar o Camaleo.
// você vai aprender
- Quanto custa: JavaScript, CSS e fontes
- Onde roda: renderização no servidor, Tailwind, estilos misturados e navegadores
- A licença, as marcas registradas e como relatar um bug
Tem tree shaking? Qual é o tamanho?
O JavaScript tem. O @camaleo/react é só ESM, marcado com "sideEffects": false e gerado com um arquivo por componente, então o bundler mantém só o que você importa. Cada componente também tem a própria entrada (@camaleo/react/button), se você preferir imports explícitos.
O CSS é dividido por estilo, não por componente. O base.css traz os tokens e a estrutura de todos os componentes: cerca de 28 kB com gzip, antes de minificar. Cada estilo soma um arquivo, de cerca de 3 kB (neumorphism, retro-pixel) a 11 kB (material) com gzip. Estilos que você não importa não custam nada.
Quais estilos precisam de fontes da web?
Nenhum traz fontes junto, e toda pilha de fontes termina numa fonte do sistema, então nada quebra sem elas. Para ficar como foi desenhado, carregue as famílias de cada estilo: a tabela de fontes por estilo, e como carregá-las com o next/font, está em Estilos e troca.
Funciona com Server Components e SSR?
Sim. As peças de layout e de exibição são Server Components, o estilo é definido no <html> por uma função comum e o modo escuro não precisa de script. Veja Server Components e SSR.
Posso misturar estilos na mesma página?
Sim, é para isso que serve o StyleProvider. Cada provider renderiza um <div data-style> e vira uma ilha: parte do padrão em vez de herdar a aparência do pai, e os popups dele mantêm o estilo. Importe o CSS de cada estilo usado. A cor da marca passa para as ilhas aninhadas, a menos que elas definam a própria.
<StyleProvider styleName="editorial">
<Article />
<StyleProvider styleName="retro">
<Guestbook />
</StyleProvider>
</StyleProvider>
Preciso do Tailwind?
Não. Os estilos são CSS puro em camadas de cascata e funcionam em qualquer app React. Se você já usa o Tailwind CSS v4, veja Tailwind CSS para a ordem das camadas e o mapeamento dos tokens.
Quais navegadores são suportados?
O CSS usa alguns recursos recentes. Estas são as versões em que cada um chegou:
| Recurso | Usado em | Chrome / Edge | Safari | Firefox |
|---|---|---|---|---|
light-dark() | Todas as cores, nos dois modos | 123 | 17.5 | 120 |
@scope | Regras estruturais de cada estilo | 118 | 17.4 | 146 |
Cores relativas (oklch(from …)) | Fundo do glass tingido pela marca | 119 | 18 | 128 |
@property | Valores de Stack e Grid que não herdam | 85 | 16.4 | 128 |
corner-shape | Cantos squircle no cupertino | 139 | — | — |
backdrop-filter | Vidro no glass e no cupertino | 76 | 18 | 103 |
O light-dark() é o piso: sem ele, as cores não resolvem. Sem @scope, um estilo mantém os tokens mas perde as regras estruturais e parece aplicado pela metade. corner-shape e backdrop-filter degradam sozinhos: os cantos ficam redondos, e o vidro fica opaco por uma alternativa em @supports.
Posso usar num projeto comercial?
Sim. O Camaleo é open source sob a licença MIT: use, altere e publique, mantendo o aviso de copyright.
Tem ligação com o Google ou a Apple?
Não. O material é inspirado no Material Design e o cupertino, nas Human Interface Guidelines da Apple. O Camaleo não tem ligação nem endosso do Google ou da Apple, e não usa fontes, ícones ou marcas deles (o cupertino usa Inter, não SF Pro).
Como relato um bug?
Abra uma issue no GitHub. Ajuda muito incluir:
- o componente, o estilo, o modo (claro ou escuro) e a cor da marca;
- o navegador e a versão, e as versões do React e do Next.js se importarem;
- o menor código que mostra o problema, ou o exemplo das docs que já mostra;
- em bugs de acessibilidade, a tecnologia assistiva (leitor de tela, zoom, alto contraste) e o que você esperava ouvir ou ver.