Couleur
Affichez des nuanciers avec valeurs hexadécimales et copie en un clic grâce au composant couleur, pour documenter systèmes de design et identité visuelle.
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.
Affichez les couleurs dans une grille simple, avec leurs noms et leurs valeurs.
<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>Organisez les couleurs en lignes avec des libellés pour la documentation de votre système de design.
<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>Le composant prend en charge tous les formats de couleur CSS, y compris hex, rgb, rgba, hsl et oklch.
<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>Définissez des couleurs distinctes pour les modes clair et sombre à l’aide d’un objet avec les propriétés light et dark.
<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>variantstringrequiredStyle d’affichage de la palette de couleurs. Options : compact ou table.
childrenColor.Item | Color.RowrequiredÉléments ou lignes de couleur à afficher.
titlestringLibellé de la ligne de couleurs.
childrenColor.ItemrequiredÉléments de couleur à afficher dans cette ligne.
namestringNom ou label de la couleur.
valuestring | { light: string, dark: string }requiredValeur de la couleur dans n’importe quel format CSS, ou bien un objet contenant des valeurs distinctes pour les modes light et dark.