Design-Tokens mit PandaCSS

PandaCSS ist eine moderne CSS-in-JS-Bibliothek, die typsicheres Styling ohne Laufzeit-Overhead bietet.

Warum Design-Tokens?

Design-Tokens sind die visuellen Design-Atome Ihres Designsystems:

• Farben
• Typografie
• Abstände
• Schatten
• Randradius

PandaCSS Einrichten

Installieren Sie PandaCSS in Ihrem HonoX-Projekt:

npm install -D @pandacss/dev

Design-Tokens Erstellen

Definieren Sie Ihre Tokens in 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" },
      },
    },
  },
});

Tokens Verwenden

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>
  );
}

Fazit

Design-Tokens mit PandaCSS schaffen ein konsistentes, wartbares Designsystem, das mit Ihrem Projekt skaliert.