Couleur

Color affiche les valeurs hexadécimales, RVB et RVBA sous forme de nuanciers cliquables pour copier. Il propose deux variantes de mise en page, une grille compacte et un tableau groupé, avec une prise en charge intégrée des modes clair et sombre.

Utilisez Color pour :

Documenter des systèmes de design avec des couleurs de marque
Afficher les couleurs de thème pour les modes clair et sombre
Présenter des échelles de couleurs (primary-100 à primary-900)
Partager des chartes graphiques avec des valeurs hex/RVB

Utilisation

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

Variante compacte

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

Primary

#3b82f6

Success

#22c55e

Warning

#f59e0b

Error

#ef4444

<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 :

Brand Colors

Primary#3b82f6

Secondary#6366f1

Feedback Colors

Success#22c55e

Error#ef4444

<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

Modèle	Exemple	Utilisation
Sémantique	`success`, `error`, `warning`	Couleurs de retour
Échelle numérique	`primary-500`, `gray-100`	Palettes de couleurs
Descriptif	`brand-blue`, `accent-gold`	Couleurs de marque

Couleurs adaptées au thème

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

Theme

Background

#ffffff

Theme

Foreground

#171717

Theme

Border

#e5e5e5

<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 :

Hex

#3b82f6

RGB

rgb(59, 130, 246)

RGBA

rgba(59, 130, 246, 0.8)

<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

stringdefault: compact

Style de mise en page : compact (grille) ou table (lignes groupées).

node

Éléments ColorItem ou ColorRow.

ColorRow

string

Étiquette affichée au-dessus de la ligne.

node

Éléments ColorItem.

ColorItem

string

Nom d'affichage de la couleur.

string | object

Valeur de couleur sous forme de chaîne CSS, ou { light: string, dark: string } pour les couleurs adaptées au thème.

Et ensuite ?

Vue d'ensemble des composants

Parcourir tous les composants disponibles

Bases de MDX

Apprendre à utiliser les composants dans MDX