> ## Documentation Index
> Fetch the complete documentation index at: https://wiki.another-horizon.eu/llms.txt
> Use this file to discover all available pages before exploring further.

# Color

> Muestra paletas de colores con funcionalidad de copiar al hacer clic.

Usa el componente Color para mostrar paletas de colores en tu documentación. Los colores pueden mostrarse en una cuadrícula compacta u organizarse en una tabla con filas etiquetadas.

<div id="compact-variant">
  ## Variante compacta
</div>

Muestra colores en una cuadrícula simple con nombres y valores de color.

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

```mdx Compact example theme={null}
<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>
```

<div id="table-variant">
  ## Variante de tabla
</div>

Organiza los colores en filas etiquetadas para la documentación del sistema de diseño.

<Color variant="table">
  <Color.Row title="Primario">
    <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="Secundario">
    <Color.Item name="secondary-500" value="#8B5CF6" />

    <Color.Item name="secondary-600" value="#7C3AED" />
  </Color.Row>
</Color>

```mdx Table example theme={null}
<Color variant="table">
  <Color.Row title="Primario">
    <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="Secundario">
    <Color.Item name="secondary-500" value="#8B5CF6" />
    <Color.Item name="secondary-600" value="#7C3AED" />
  </Color.Row>
</Color>
```

<div id="color-formats">
  ## Formatos de color
</div>

El componente admite todos los formatos de color CSS, incluyendo hex, rgb, rgba, hsl y 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>

```mdx Color formats example theme={null}
<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>
```

<div id="theme-aware-colors">
  ## Colores según el tema
</div>

Define distintos colores para los modos claro y oscuro usando un objeto con las propiedades `light` y `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>

```mdx Theme-aware example theme={null}
<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>
```

<div id="properties">
  ## Propiedades
</div>

<div id="color">
  ### Color
</div>

<ResponseField name="variant" type="string" required>
  Estilo de presentación de la paleta de colores. Opciones: `compact` o `table`.
</ResponseField>

<ResponseField name="children" type="Color.Item | Color.Row" required>
  Elementos o filas de color que se mostrarán.
</ResponseField>

<div id="colorrow">
  ### Color.Row
</div>

<ResponseField name="title" type="string">
  Etiqueta de la fila de colores.
</ResponseField>

<ResponseField name="children" type="Color.Item" required>
  Elementos de color que se muestran en la fila.
</ResponseField>

<div id="coloritem">
  ### Color.Item
</div>

<ResponseField name="name" type="string">
  Nombre o etiqueta del color.
</ResponseField>

<ResponseField name="value" type="string | { light: string, dark: string }" required>
  Valor del color en cualquier formato CSS, o un objeto con valores para los modos claro y oscuro.
</ResponseField>