Estilos e troca

Treze linguagens visuais completas sobre os mesmos componentes. Carregue o CSS, envolva o app num StyleProvider e troque uma palavra para mudar tudo.

ExperimenteCopy Anchor Link

Escreva na nota, curta algumas vezes e escolha outro estilo. Os componentes renderizam de novo com outro CSS; nada é montado outra vez, então o texto e a contagem continuam.

import "@camaleo/styles/base.css";
import "@camaleo/styles/neubrutalism.css";
import "@camaleo/styles/editorial.css";

/* app/layout.tsx: const grotesk = Space_Grotesk({ subsets: ["latin"], variable: "--font-grotesk" }) */
[data-style="neubrutalism"] {
  --cml-font-body: var(--font-grotesk), system-ui, sans-serif;
}

import { StyleProvider } from "@camaleo/react";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <StyleProvider styleName="neubrutalism" mode="system" brand="#3fa34d">
      {children}
    </StyleProvider>
  );
}

Os 13 estilosCopy Anchor Link

Todo estilo renderiza o mesmo DOM: o teste de matriz compara o markup dos 13 e falha se um for diferente. Só o CSS muda, e é por isso que a troca sai barata.

O material se inspira no Material Design e o cupertino nas Human Interface Guidelines. O Camaleo não tem ligação com o Google nem com a Apple e não usa nenhuma fonte, ícone ou marca registrada deles.

AninhamentoCopy Anchor Link

Um StyleProvider aninhado é uma ilha: todo token é declarado de novo no elemento dele, então ele parte de padrões limpos em vez de se misturar com o pai. O mode e o brand do pai ainda chegam até ele, a não ser que você os defina.

Troca em tempo de execuçãoCopy Anchor Link

Guarde o estilo no estado e passe para baixo. Mudar o styleName muda um atributo no mesmo elemento, então o React mantém cada componente e o estado dele. Não coloque o estilo numa key: isso remonta a árvore e zera os formulários.

"use client";
import { useState } from "react";
import { STYLE_NAMES, type StyleName, StyleProvider } from "@camaleo/react";

export function App({ children }: { children: React.ReactNode }) {
  const [skin, setSkin] = useState<StyleName>("minimal");
  return (
    <StyleProvider styleName={skin}>
      <select aria-label="Skin" value={skin} onChange={(e) => setSkin(e.target.value as StyleName)}>
        {STYLE_NAMES.map((name) => <option key={name}>{name}</option>)}
      </select>
      {children}
    </StyleProvider>
  );
}

A página inteira, a partir do servidorCopy Anchor Link

Para aplicar o estilo no próprio <html> (fundo da página, barras de rolagem), espalhe styleScopeProps nele. É seguro no servidor, então um layout raiz pode chamá-lo sem um componente de cliente.

import { styleScopeProps } from "@camaleo/react/style-scope";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="pt-BR" {...styleScopeProps({ styleName: "editorial", mode: "system" })}>
      <body>{children}</body>
    </html>
  );
}