Couleur

Color affiche les valeurs hexadécimales, RGB et RGBA sous forme de swatches cliquables pour copier. Deux variantes de mise en page -- une grille compacte et un tableau groupé -- avec prise en charge intégrée des modes clair/sombre.

Utilisez Color dans les cas suivants :

• Documentation des systèmes de design avec les couleurs de marque
• Affichage des couleurs de thème pour les modes clair et sombre
• Présentation des échelles de couleurs (primary-100 à primary-900)
• Partage des chartes graphiques avec les valeurs hex/RGB

Utilisation

<Color>
  <ColorItem name="Primary" value="#635BFF" />
</Color>

Variante compacte

La mise en page par défaut affiche les couleurs dans une grille responsive :

<Color>
  <ColorItem name="Primary" value="#3b82f6" />
  <ColorItem name="Success" value="#22c55e" />
  <ColorItem name="Warning" value="#f59e0b" />
  <ColorItem name="Error" value="#ef4444" />
</Color>

Variante tableau

Regroupez les couleurs en lignes étiquetées pour des palettes organisées :

<Color variant="table">
  <ColorRow title="Brand Colors">
    <ColorItem name="Primary" value="#3b82f6" />
    <ColorItem name="Secondary" value="#6366f1" />
  </ColorRow>
  <ColorRow title="Feedback Colors">
    <ColorItem name="Success" value="#22c55e" />
    <ColorItem name="Error" value="#ef4444" />
  </ColorRow>
</Color>

Conventions de nommage des couleurs

Couleurs adaptées au thème

Définissez des couleurs différentes pour les modes clair et sombre en passant un objet avec les propriétés light et dark :

<Color>
  <ColorItem name="Background" value={{ light: "#ffffff", dark: "#0a0a0a" }} />
  <ColorItem name="Foreground" value={{ light: "#171717", dark: "#ededed" }} />
  <ColorItem name="Border" value={{ light: "#e5e5e5", dark: "#404040" }} />
</Color>

Formats de couleur

Le composant prend en charge les formats de couleur CSS standard :

<Color>
  <ColorItem name="Hex" value="#3b82f6" />
  <ColorItem name="RGB" value="rgb(59, 130, 246)" />
  <ColorItem name="RGBA" value="rgba(59, 130, 246, 0.8)" />
</Color>

Props

Color

ColorRow

ColorItem

Et ensuite ?