Tokens de Design com PandaCSS

PandaCSS é uma biblioteca moderna de CSS-in-JS que oferece estilização type-safe com overhead zero em tempo de execução.

Por Que Tokens de Design?

Tokens de design são os átomos visuais do seu sistema de design:

• Cores
• Tipografia
• Espaçamento
• Sombras
• Raio de borda

Configurando o PandaCSS

Instale o PandaCSS no seu projeto HonoX:

npm install -D @pandacss/dev

Criando Tokens de Design

Defina seus tokens em panda.config.ts:

export default defineConfig({
  theme: {
    tokens: {
      colors: {
        primary: { value: "#3b82f6" },
        secondary: { value: "#8b5cf6" },
      },
      spacing: {
        sm: { value: "0.5rem" },
        md: { value: "1rem" },
        lg: { value: "1.5rem" },
      },
    },
  },
});

Usando Tokens

import { css } from "design-system/css";

function Button() {
  return (
    <button
      class={css({
        bg: "primary",
        color: "white",
        px: "md",
        py: "sm",
        borderRadius: "lg",
      })}
    >
      Click me
    </button>
  );
}

Conclusão

Tokens de design com PandaCSS criam um sistema de design consistente e sustentável que escala com seu projeto.