Saltar al contenido principal

Documentation Index

Fetch the complete documentation index at: https://mintlify-mintlify-bump-workflow-daily-runs-1777424378.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

Usa el componente Color para mostrar paletas de colores en tu documentación. Muestra los colores en una cuadrícula compacta u organízalos en una tabla con filas etiquetadas.

​
Variante compacta

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

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

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

Primario

Secundario

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

​
Formatos de color

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

​
Colores según el tema

Define distintos colores para los modos claro y oscuro usando un objeto con las propiedades light y dark.

bg-primary

bg-secondary

text-primary

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>

​
Propiedades

​
Color

​
variant
string
requerido
Estilo de presentación de la paleta de colores. Opciones: compact o table.
​
children
Color.Item | Color.Row
requerido
Elementos o filas de color que se mostrarán.

​
Color.Row

​
title
string
Etiqueta de la fila de colores.
​
children
Color.Item
requerido
Elementos de color que se muestran en la fila.

​
Color.Item

​
name
string
Nombre o etiqueta del color.
​
value
string | { light: string, dark: string }
requerido
Valor del color en cualquier formato CSS, o un objeto con valores para los modos claro y oscuro.