Couleur

Utilisez le composant Color pour présenter des palettes de couleurs dans votre documentation. Affichez les couleurs dans une grille compacte ou organisez-les dans un tableau avec des lignes nommées.

Variante compacte

Affichez les couleurs dans une grille simple, avec leurs noms et leurs valeurs.

blue-500

#3B82F6

blue-600

#2563EB

blue-700

#1D4ED8

blue-800

#1E40AF

Compact example

<Color variant="compact">
  <Color.Item name="blue-500" value="#3B82F6" />
  <Color.Item name="blue-600" value="#2563EB" />
  <Color.Item name="blue-700" value="#1D4ED8" />
  <Color.Item name="blue-800" value="#1E40AF" />
</Color>

Variante en tableau

Organisez les couleurs en lignes avec des libellés pour la documentation de votre système de design.

Primaire

Secondaire

Table example

<Color variant="table">
  <Color.Row title="Primaire">
    <Color.Item name="primary-500" value="#3B82F6" />
    <Color.Item name="primary-600" value="#2563EB" />
    <Color.Item name="primary-700" value="#1D4ED8" />
  </Color.Row>
  <Color.Row title="Secondaire">
    <Color.Item name="secondary-500" value="#8B5CF6" />
    <Color.Item name="secondary-600" value="#7C3AED" />
  </Color.Row>
</Color>

Formats de couleur

Le composant prend en charge tous les formats de couleur CSS, y compris hex, rgb, rgba, hsl et oklch.

hex

#FF5733

rgb

rgb(51, 255, 87)

rgba

rgba(51, 87, 255, 0.7)

hsl

hsl(180, 70%, 55%)

oklch

oklch(70% 0.2 145)

Color formats example

<Color variant="compact">
  <Color.Item name="hex" value="#FF5733" />
  <Color.Item name="rgb" value="rgb(51, 255, 87)" />
  <Color.Item name="rgba" value="rgba(51, 87, 255, 0.7)" />
  <Color.Item name="hsl" value="hsl(180, 70%, 55%)" />
  <Color.Item name="oklch" value="oklch(70% 0.2 145)" />
</Color>

Couleurs adaptées au thème

Définissez des couleurs distinctes pour les modes clair et sombre à l’aide d’un objet avec les propriétés light et dark.

bg-primary

#FFFFFF

bg-secondary

#F9FAFB

text-primary

#111827

Theme-aware example

<Color variant="compact">
  <Color.Item name="bg-primary" value={{ light: "#FFFFFF", dark: "#000000" }} />
  <Color.Item name="bg-secondary" value={{ light: "#F9FAFB", dark: "#0A0A0A" }} />
  <Color.Item name="text-primary" value={{ light: "#111827", dark: "#F9FAFB" }} />
</Color>

Propriétés

string

requis

Style d’affichage de la palette de couleurs. Options : compact ou table.

Color.Item | Color.Row

requis

Éléments ou lignes de couleur à afficher.

string

Classes CSS supplémentaires à appliquer à la palette de couleurs.

Color.Row

string

Libellé de la ligne de couleurs. Prend en charge la mise en forme Markdown en ligne, comme **bold**, _italic_ et `code`.

Color.Item

requis

Éléments de couleur à afficher dans cette ligne.

Color.Item

string

Nom ou label de la couleur.

string | { light: string, dark: string }

requis

Valeur de la couleur dans n’importe quel format CSS, ou bien un objet contenant des valeurs distinctes pour les modes light et dark.

Sujets connexes

Badge Scripts personnalisés Arborescence

⌘I

Prise en main

Créer du contenu

Gérer votre site

Agent

Assistant

Contenu adapté aux agents

Recherche et SEO

Documenter des API

Intégrations

Référence

Couleur

Variante compacte

Variante en tableau

Formats de couleur

Couleurs adaptées au thème

Propriétés

Couleur

Color.Row

Color.Item

​Variante compacte

​Variante en tableau

​Formats de couleur

​Couleurs adaptées au thème

​Propriétés

​Couleur

​Color.Row

​Color.Item

Variante compacte

Variante en tableau

Formats de couleur

Couleurs adaptées au thème

Propriétés

Couleur

Color.Row

Color.Item