Tokens de Design avec PandaCSS

PandaCSS est une bibliothèque CSS-in-JS moderne qui offre un style type-safe sans surcoût à l'exécution.

Pourquoi des Tokens de Design ?

Les tokens de design sont les atomes visuels de votre système de design :

• Couleurs
• Typographie
• Espacement
• Ombres
• Rayon de bordure

Configuration de PandaCSS

Installez PandaCSS dans votre projet HonoX :

npm install -D @pandacss/dev

Création de Tokens de Design

Définissez vos tokens dans 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" },
      },
    },
  },
});

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

Conclusion

Les tokens de design avec PandaCSS créent un système de design cohérent et maintenable qui évolue avec votre projet.