Cor

Color exibe valores hexadecimais, RGB e RGBA como amostras que podem ser clicadas para copiar. Ele oferece duas variantes de layout: uma grade compacta e uma tabela agrupada, com suporte integrado aos modos claro e escuro.

Use Color para:

• Documentar sistemas de design com cores da marca
• Exibir cores de tema para os modos claro e escuro
• Exibir escalas de cores (primary-100 até primary-900)
• Compartilhar diretrizes de marca com valores hexadecimais/RGB

Uso

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

Variante compacta

O layout padrão exibe as cores em uma grade responsiva:

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

Variante de tabela

Agrupe as cores em linhas identificadas para organizar as paletas:

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

Convenções de nomenclatura de cores

Cores adaptadas ao tema

Defina cores diferentes para os modos claro e escuro passando um objeto com as propriedades 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>

Formatos de cor

O componente aceita formatos de cores CSS padrão:

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

Propriedades

Color

ColorRow

ColorItem

O que vem a seguir?