Colore

Color visualizza valori esadecimali, RGB e RGBA come campioni su cui fare clic per copiare. Offre due varianti di layout: una griglia compatta e una tabella raggruppata, con supporto integrato per le modalità chiara e scura.

Usa Color per:

• Documentare sistemi di design con i colori del brand
• Mostrare i colori del tema per le modalità chiara e scura
• Visualizzare scale cromatiche (da primary-100 a primary-900)
• Condividere linee guida del brand con valori esadecimali/RGB

Utilizzo

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

Variante compatta

Il layout predefinito visualizza i colori in una griglia adattiva:

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

Variante tabella

Raggruppa i colori in righe con etichette per organizzare le palette:

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

Convenzioni per i nomi dei colori

Colori adattivi al tema

Definisci colori diversi per le modalità chiara e scura passando un oggetto con le proprietà light e 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>

Formati dei colori

Il componente supporta i formati di colore 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>

Proprietà

Color

ColorRow

ColorItem

Prossimi passi