siesa-ui-kit 1.0.4 → 1.0.6

package/docs/colors.md

@@ -1,832 +0,0 @@
-# 🎨 Sistema de Colores - Siesa UI Kit
-
-## 📋 Tabla de Contenidos
-
-1. [Introducción](#introducción)
-2. [Arquitectura de Colores](#arquitectura-de-colores)
-3. [Colores Primitivos](#colores-primitivos)
-4. [Tokens Semánticos](#tokens-semánticos)
-5. [Modos de Color (Light/Dark)](#modos-de-color-lightdark)
-6. [Guía de Uso en Componentes](#guía-de-uso-en-componentes)
-7. [Ejemplos de Código](#ejemplos-de-código)
-8. [Mejores Prácticas](#mejores-prácticas)
-9. [Referencia Rápida](#referencia-rápida)
-
----
-
-## Introducción
-
-Este documento describe el sistema de colores del **Siesa UI Kit**, diseñado para garantizar consistencia visual, accesibilidad y mantenibilidad en todos los componentes de la interfaz.
-
-### 🎯 Objetivos del Sistema
-
-- **Consistencia**: Colores unificados en toda la aplicación
-- **Accesibilidad**: Ratios de contraste WCAG AA/AAA
-- **Mantenibilidad**: Tokens semánticos fáciles de actualizar
-- **Escalabilidad**: Sistema extensible para nuevos componentes
-- **Dark Mode**: Soporte completo para modo oscuro
-
----
-
-## Arquitectura de Colores
-
-El sistema de colores está estructurado en 3 capas:
-
-```
-┌─────────────────────────────────────┐
-│  CAPA 3: Componentes                │
-│  (Button, Alert, Badge, etc.)       │
-└─────────────────────────────────────┘
-              ▲
-              │ usa tokens
-              │
-┌─────────────────────────────────────┐
-│  CAPA 2: Tokens Semánticos          │
-│  (content-primary, bg-primary, etc) │
-└─────────────────────────────────────┘
-              ▲
-              │ mapea a
-              │
-┌─────────────────────────────────────┐
-│  CAPA 1: Colores Primitivos         │
-│  (primary-custom-600, gray-100, etc)│
-└─────────────────────────────────────┘
-```
-
-### Principios de Diseño
-
-1. **Primitivos = Valores Hex**: Colores base inmutables
-2. **Tokens = Intención de Uso**: Nombres semánticos que describen propósito
-3. **Componentes = Aplicación**: Uso consistente de tokens
-
----
-
-## Colores Primitivos
-
-Los colores primitivos son la base del sistema. Están organizados en escalas de 100-700 (actualmente) con planes de expandir a 50-950.
-
-### 📘 Primary Custom (Azul Principal)
-
-Color primario de marca Siesa. Usado en botones, enlaces y elementos interactivos principales.
-
-| Escala | Valor Hex | CSS Class | Uso Principal |
-|--------|-----------|-----------|---------------|
-| **100** | `#dbeefe` | `primary-custom-100` | Hover backgrounds (outline buttons) |
-| **300** | `#93d1fd` | `primary-custom-300` | Bordes (outline buttons, inputs) |
-| **400** | `#60b6fa` | `primary-custom-400` | Focus rings |
-| **500** | `#3c9bf6` | `primary-custom-500` | Hover state (default buttons) |
-| **600** | `#0e79fd` | `primary-custom-600` | **Color principal** (contenido, íconos) |
-| **700** | `#0c6ade` | `primary-custom-700` | Active/Pressed states |
-
-**Ejemplo de Aplicación**:
-```tsx
-// Botón primario
-<button className="bg-primary-custom-600 hover:bg-primary-custom-500 focus:ring-primary-custom-400">
-  Click me
-</button>
-```
-
----
-
-### 🎨 Colores Inverse (Para fondos oscuros)
-
-Colores optimizados para usar sobre fondos de color primario.
-
-| Token | Valor Hex | Uso |
-|-------|-----------|-----|
-| `primary-inverse-content` | `#eff8ff` | Texto sobre fondo primario |
-| `primary-inverse-background` | `#0e79fd` | Fondo de botones primarios |
-| `primary-inverse-border` | `#3c9bf6` | Bordes sobre fondo primario |
-
-**Ejemplo de Aplicación**:
-```tsx
-// Botón con fondo primario y texto claro
-<button className="bg-primary-inverse-background text-primary-inverse-content border-primary-inverse-border">
-  Botón Primario
-</button>
-```
-
----
-
-### 🌈 Colores del Sistema (Light Mode)
-
-Paleta neutral para textos, fondos y bordes en modo claro.
-
-#### Contenido (Texto)
-
-| Token | Valor Hex | Uso | Contraste |
-|-------|-----------|-----|-----------|
-| `content-primary` | `#18181b` | Texto principal | AAA (18:1) |
-| `content-secondary` | `#a1a1aa` | Descripciones, labels | AA (4.5:1) |
-| `content-tertiary` | `#71717a` | Placeholders, disabled text | AA (4.5:1) |
-
-#### Fondos
-
-| Token | Valor Hex | Uso |
-|-------|-----------|-----|
-| `bg-primary` | `#ffffff` | Fondo principal de la app |
-| `background-secondary` | `#f4f4f5` | Cards, fondos disabled |
-
-#### Bordes
-
-| Token | Valor Hex | Uso |
-|-------|-----------|-----|
-| `border-primary` | `#e4e4e7` | Bordes normales (inputs, cards) |
-| `border-secondary` | `#f4f4f5` | Dividers, bordes suaves |
-
-**Ejemplo de Aplicación**:
-```tsx
-// Card con sistema de colores semánticos
-<div className="bg-bg-primary border border-border-primary">
-  <h3 className="text-content-primary">Título Principal</h3>
-  <p className="text-content-secondary">Descripción secundaria</p>
-</div>
-```
-
----
-
-### 🔴 Colores de Error
-
-Paleta para estados de error y validación.
-
-| Token | Valor Hex | Base Color | Uso |
-|-------|-----------|------------|-----|
-| `error-bg` | `#fef2f2` | Red 50 | Fondo de alertas de error |
-| `error-border` | `#ef4444` | Red 500 | Bordes de inputs con error |
-| `error-content` | `#dc2626` | Red 600 | Texto de mensajes de error |
-
-**Ejemplo de Aplicación**:
-```tsx
-// Input con error
-<div className="border-2 border-error-border bg-error-bg">
-  <input type="text" />
-  <span className="text-error-content">Email inválido</span>
-</div>
-```
-
-> **⚠️ PENDIENTE**: Agregar colores para Success, Warning, Info con la misma estructura.
-
----
-
-## Tokens Semánticos
-
-Los tokens semánticos describen **dónde y cómo** usar los colores, no **qué color** son.
-
-### 📊 Estructura de Tokens
-
-```
-{categoria}-{proposito}-{variante}
-
-Ejemplos:
-- content-primary (Categoría: content, Propósito: primary)
-- bg-secondary (Categoría: bg, Propósito: secondary)
-- border-custom (Categoría: border, Propósito: custom)
-```
-
-### Categorías de Tokens
-
-| Categoría | Prefijo | Uso | Ejemplos |
-|-----------|---------|-----|----------|
-| **Content** | `content-` | Texto, íconos | `content-primary`, `content-secondary` |
-| **Background** | `bg-`, `background-` | Fondos | `bg-primary`, `background-secondary` |
-| **Border** | `border-` | Bordes, divisores | `border-primary`, `border-secondary` |
-| **Primary Custom** | `primary-custom-` | Color de marca | `primary-custom-600`, `primary-custom-300` |
-| **Error** | `error-` | Estados de error | `error-bg`, `error-border`, `error-content` |
-
----
-
-## Modos de Color (Light/Dark)
-
-### Configuración de Tailwind CSS
-
-Siesa UI Kit utiliza la estrategia **class-based** de Tailwind CSS para dark mode:
-
-```javascript
-// tailwind.config.js
-module.exports = {
-  darkMode: 'class', // ✅ Estrategia basada en clases
-  // ... resto de la configuración
-}
-```
-
-Con `darkMode: 'class'`, el modificador `dark:` se activa cuando un elemento ancestro (típicamente `<html>`) tiene la clase `dark`:
-
-### 🌞 Light Mode (Por Defecto)
-
-```html
-<html>
-  <!-- Sin clase 'dark' = Light Mode activo -->
-  <body>
-    <div class="bg-white text-content-primary">
-      Contenido en light mode
-    </div>
-  </body>
-</html>
-```
-
-### 🌙 Dark Mode
-
-```html
-<html class="dark">
-  <!-- Con clase 'dark' = Dark Mode activo -->
-  <body>
-    <div class="bg-white dark:bg-dark-bg-primary text-content-primary dark:text-dark-content-primary">
-      Contenido adaptado a dark mode
-    </div>
-  </body>
-</html>
-```
-
-### Modificador dark: en Tailwind
-
-El modificador `dark:` funciona como prefijo para cualquier utilidad de Tailwind:
-
-```tsx
-// Sintaxis básica
-dark:{utility}
-
-// Ejemplos
-dark:bg-dark-bg-primary    // Background en dark mode
-dark:text-white            // Texto en dark mode
-dark:border-gray-700       // Borde en dark mode
-dark:hover:bg-blue-600     // Hover en dark mode
-```
-
-### Colores para Dark Mode
-
-| Token (Dark) | Valor Hex | Descripción |
-|--------------|-----------|-------------|
-| `dark-bg-primary` | `#000000` | Fondo principal oscuro |
-| `dark-content-primary` | `#ffffff` | Texto principal claro (blanco) |
-| `dark-border-primary` | `#71717a` | Bordes en dark mode |
-| `dark-border-custom` | `#0f6ae3` | Bordes de componentes interactivos |
-| `dark-bg-inverse` | `#bfe2fe` | Fondos inversos (botones) |
-| `dark-content-inverse` | `#0e79fd` | Texto inverso |
-
-### Combinación con Otros Modificadores
-
-El modificador `dark:` se puede combinar con cualquier otro modificador de Tailwind:
-
-```tsx
-// dark: + hover:
-<button className="
-  bg-primary-custom-600
-  hover:bg-primary-custom-500
-  dark:bg-dark-bg-inverse
-  dark:hover:bg-dark-bg-inverse/90
-">
-  Button con hover en ambos modos
-</button>
-
-// dark: + focus:
-<input className="
-  border-border-primary
-  focus:border-primary-custom-400
-  dark:border-dark-border-primary
-  dark:focus:border-dark-border-custom
-" />
-
-// dark: + responsive (orden correcto: responsive → dark → state)
-<div className="
-  bg-white
-  md:bg-gray-50
-  dark:bg-dark-bg-primary
-  dark:md:bg-gray-900
-">
-  Responsive + dark mode
-</div>
-
-// dark: + group-hover:
-<div className="group">
-  <p className="
-    text-content-secondary
-    group-hover:text-content-primary
-    dark:text-gray-400
-    dark:group-hover:text-white
-  ">
-    Text con group hover
-  </p>
-</div>
-```
-
-### Orden de Modificadores
-
-Cuando combines múltiples modificadores, sigue este orden:
-
-**Formato**: `{responsive}:{dark}:{state}:{utility}`
-
-```tsx
-// ✅ CORRECTO - Orden consistente
-<button className="
-  md:bg-blue-500
-  md:dark:bg-blue-700
-  md:dark:hover:bg-blue-800
-">
-
-// ❌ INCORRECTO - Orden inconsistente
-<button className="
-  dark:md:hover:bg-blue-800
-">
-```
-
-Ejemplos correctos:
-```tsx
-sm:dark:hover:bg-blue-500          // responsive → dark → state
-lg:dark:focus:text-white           // responsive → dark → state
-md:dark:group-hover:opacity-100    // responsive → dark → state
-```
-
-### Estados Hover con Dark Mode
-
-| Token | Light Mode | Dark Mode | Uso |
-|-------|------------|-----------|-----|
-| Hover Overlay | `rgba(0, 0, 0, 0.1)` | `rgba(255, 255, 255, 0.2)` | Botones ghost |
-| Hover Primary | `-primary-custom-500` | `dark-bg-inverse/90` | Botones primarios |
-| Hover Border | `-primary-custom-300` | `dark-border-custom` | Cards interactivas |
-
-```tsx
-// Hover overlay para botones ghost
-<button className="
-  bg-transparent
-  hover:bg-hover-overlay
-  dark:hover:bg-hover-overlay-dark
-">
-  Ghost Button
-</button>
-
-// Hover para botones primarios
-<button className="
-  bg-primary-custom-600
-  hover:bg-primary-custom-500
-  dark:bg-dark-bg-inverse
-  dark:hover:bg-dark-bg-inverse/90
-">
-  Primary Button
-</button>
-
-// Hover para cards interactivas
-<div className="
-  border-border-primary
-  hover:border-primary-custom-300
-  dark:border-dark-border-primary
-  dark:hover:border-dark-border-custom
-">
-  Interactive Card
-</div>
-```
-
-### Implementación con JavaScript
-
-Para alternar entre modos, agrega/quita la clase `dark` del elemento `<html>`:
-
-```tsx
-// Toggle básico
-const toggleDarkMode = () => {
-  document.documentElement.classList.toggle('dark');
-};
-
-// Con persistencia en localStorage
-const toggleDarkMode = () => {
-  const isDark = document.documentElement.classList.contains('dark');
-
-  if (isDark) {
-    document.documentElement.classList.remove('dark');
-    localStorage.setItem('theme', 'light');
-  } else {
-    document.documentElement.classList.add('dark');
-    localStorage.setItem('theme', 'dark');
-  }
-};
-
-// Aplicar tema guardado al cargar
-const savedTheme = localStorage.getItem('theme');
-if (savedTheme === 'dark') {
-  document.documentElement.classList.add('dark');
-}
-```
-
-**Ver**: `docs/dark-mode-guide.md` para implementación completa con React hooks y Context API.
-
-### Ejemplo Completo de Componente
-
-```tsx
-// Card que adapta todos sus colores a dark mode
-export const AdaptiveCard = () => {
-  return (
-    <div className="
-      p-6
-      bg-white dark:bg-dark-bg-primary
-      border border-border-primary dark:border-dark-border-primary
-      rounded-2xl
-      shadow-base
-      hover:shadow-lg
-      transition-shadow
-    ">
-      {/* Header */}
-      <div className="mb-4 flex items-center justify-between">
-        <h3 className="
-          text-content-primary dark:text-dark-content-primary
-          font-bold
-          text-lg
-        ">
-          Card Title
-        </h3>
-        <span className="
-          text-content-secondary dark:text-content-secondary
-          text-sm
-        ">
-          Just now
-        </span>
-      </div>
-
-      {/* Content */}
-      <p className="
-        mb-4
-        text-content-secondary dark:text-content-secondary
-      ">
-        Card content que se adapta automáticamente según el modo activo.
-        Todos los colores usan el modificador dark: correctamente.
-      </p>
-
-      {/* Actions */}
-      <div className="flex gap-3">
-        <button className="
-          px-4 py-2
-          bg-primary-custom-600 dark:bg-dark-bg-inverse
-          text-primary-inverse-content dark:text-dark-content-inverse
-          hover:bg-primary-custom-500 dark:hover:bg-dark-bg-inverse/90
-          rounded-md
-          font-bold
-          transition-colors
-        ">
-          Primary
-        </button>
-
-        <button className="
-          px-4 py-2
-          border border-border-primary dark:border-dark-border-custom
-          text-content-primary dark:text-dark-content-primary
-          hover:bg-background-secondary dark:hover:bg-dark-bg-primary
-          rounded-md
-          font-bold
-          transition-colors
-        ">
-          Secondary
-        </button>
-      </div>
-    </div>
-  );
-};
-```
-
----
-
-## Guía de Uso en Componentes
-
-### ✅ Buenas Prácticas
-
-#### 1. **Usar Tokens Semánticos, NO Primitivos**
-
-```tsx
-// ✅ CORRECTO - Usa tokens semánticos
-<p className="text-content-primary">Texto principal</p>
-
-// ❌ INCORRECTO - Usa primitivos directamente
-<p className="text-primary-custom-600">Texto</p>
-```
-
-**Razón**: Los tokens permiten cambiar el sistema de colores sin tocar componentes.
-
----
-
-#### 2. **Especificar Dark Mode Explícitamente**
-
-```tsx
-// ✅ CORRECTO - Dark mode explícito
-<div className="bg-white dark:bg-dark-bg-primary">
-  Contenido
-</div>
-
-// ⚠️ EVITAR - Confiar en defaults
-<div className="bg-white">
-  Contenido
-</div>
-```
-
----
-
-#### 3. **Agrupar Colores Relacionados**
-
-```tsx
-// ✅ CORRECTO - Colores agrupados por propósito
-<button className="
-  bg-primary-inverse-background
-  text-primary-inverse-content
-  border-primary-inverse-border
-">
-  Botón
-</button>
-```
-
----
-
-#### 4. **Usar Hover Overlay para Interacciones Sutiles**
-
-```tsx
-// ✅ CORRECTO - Hover overlay ligero
-<button className="
-  bg-transparent
-  hover:bg-hover-overlay
-  dark:hover:bg-hover-overlay-dark
-">
-  Plain Button
-</button>
-```
-
----
-
-### ❌ Anti-Patrones a Evitar
-
-#### 1. **NO mezclar capas**
-
-```tsx
-// ❌ INCORRECTO - Mezcla tokens y primitivos
-<div className="text-content-primary bg-primary-custom-600">
-  Contenido
-</div>
-```
-
-#### 2. **NO hardcodear valores hex**
-
-```tsx
-// ❌ INCORRECTO - Valor hex hardcodeado
-<div style={{ backgroundColor: '#0e79fd' }}>
-  Contenido
-</div>
-```
-
-#### 3. **NO usar colores Tailwind nativos en componentes core**
-
-```tsx
-// ❌ INCORRECTO - Tailwind nativo (inconsistente)
-<div className="bg-blue-500 text-white">
-  Contenido
-</div>
-
-// ✅ CORRECTO - Tokens del sistema
-<div className="bg-primary-inverse-background text-primary-inverse-content">
-  Contenido
-</div>
-```
-
----
-
-## Ejemplos de Código
-
-### Ejemplo 1: Botón Primario
-
-```tsx
-import React from 'react';
-
-export const PrimaryButton = ({ children, onClick }) => {
-  return (
-    <button
-      onClick={onClick}
-      className="
-        bg-primary-inverse-background
-        text-primary-inverse-content
-        border border-primary-inverse-border
-        hover:bg-primary-custom-500
-        focus:ring-2 focus:ring-primary-custom-400 focus:ring-offset-2
-        active:scale-95
-        disabled:opacity-50 disabled:cursor-not-allowed
-        px-4 py-2 rounded-md font-bold
-        transition-all duration-150
-        dark:bg-primary-inverse-background
-        dark:text-primary-inverse-content
-        dark:hover:bg-primary-custom-500
-      "
-    >
-      {children}
-    </button>
-  );
-};
-```
-
----
-
-### Ejemplo 2: Card con Dark Mode
-
-```tsx
-import React from 'react';
-
-export const Card = ({ title, description }) => {
-  return (
-    <div className="
-      bg-white dark:bg-dark-bg-primary
-      border border-border-primary dark:border-dark-border-primary
-      rounded-lg p-6
-      shadow-sm
-    ">
-      <h3 className="
-        text-content-primary dark:text-dark-content-primary
-        text-xl font-bold mb-2
-      ">
-        {title}
-      </h3>
-      <p className="
-        text-content-secondary dark:text-dark-content-primary
-        opacity-80
-      ">
-        {description}
-      </p>
-    </div>
-  );
-};
-```
-
----
-
-### Ejemplo 3: Input con Validación
-
-```tsx
-import React from 'react';
-
-export const Input = ({ label, error, ...props }) => {
-  return (
-    <div className="space-y-1">
-      <label className="text-content-primary dark:text-dark-content-primary text-sm font-medium">
-        {label}
-      </label>
-      <input
-        {...props}
-        className={`
-          w-full px-3 py-2 rounded-md
-          bg-white dark:bg-dark-bg-primary
-          text-content-primary dark:text-dark-content-primary
-          border-2
-          ${error
-            ? 'border-error-border bg-error-bg focus:ring-error-border'
-            : 'border-border-primary dark:border-dark-border-primary focus:ring-primary-custom-400'
-          }
-          focus:outline-none focus:ring-2 focus:ring-offset-1
-          disabled:opacity-50 disabled:cursor-not-allowed
-        `}
-      />
-      {error && (
-        <p className="text-error-content text-sm">
-          {error}
-        </p>
-      )}
-    </div>
-  );
-};
-```
-
----
-
-## Mejores Prácticas
-
-### 🎯 Principios de Uso
-
-1. **Jerarquía de Texto**
-   - `content-primary`: Títulos y contenido principal
-   - `content-secondary`: Descripciones y labels
-   - `content-tertiary`: Placeholders y texto deshabilitado
-
-2. **Contraste y Accesibilidad**
-   - Verificar ratios de contraste (WCAG AA mínimo: 4.5:1)
-   - Usar herramientas como [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
-   - Contenido principal debe tener AAA (7:1)
-
-3. **Estados Interactivos**
-   - **Default**: Color base del token
-   - **Hover**: Tono más claro/oscuro (+100 en escala)
-   - **Active**: Tono más oscuro (-100 en escala)
-   - **Focus**: Ring con `primary-custom-400`
-   - **Disabled**: Reducir opacity a 50%
-
-4. **Consistencia en Componentes**
-   - Todos los botones primarios usan los mismos colores
-   - Todos los inputs usan los mismos bordes
-   - Todos los errores usan la misma paleta
-
----
-
-### 🔧 Flujo de Trabajo Recomendado
-
-```
-1. Diseño en Figma
-   ↓
-2. Identificar colores usados
-   ↓
-3. Mapear a tokens existentes
-   ↓
-4. Si no existe token → Crear nuevo en tailwind.config.js
-   ↓
-5. Implementar en componente
-   ↓
-6. Probar en Light y Dark mode
-   ↓
-7. Verificar accesibilidad (contraste)
-```
-
----
-
-## Referencia Rápida
-
-### Cheat Sheet: Colores por Caso de Uso
-
-| Caso de Uso | Light Mode | Dark Mode |
-|-------------|------------|-----------|
-| **Fondo principal** | `bg-white` | `dark:bg-dark-bg-primary` |
-| **Fondo secundario** | `background-secondary` | `dark:bg-dark-bg-primary` |
-| **Texto principal** | `text-content-primary` | `dark:text-dark-content-primary` |
-| **Texto secundario** | `text-content-secondary` | `dark:text-dark-content-primary opacity-80` |
-| **Bordes normales** | `border-border-primary` | `dark:border-dark-border-primary` |
-| **Botón primario BG** | `bg-primary-inverse-background` | `dark:bg-primary-inverse-background` |
-| **Botón primario texto** | `text-primary-inverse-content` | `dark:text-primary-inverse-content` |
-| **Focus ring** | `focus:ring-primary-custom-400` | `focus:ring-primary-custom-400` |
-| **Error BG** | `bg-error-bg` | `bg-error-bg` |
-| **Error texto** | `text-error-content` | `text-error-content` |
-| **Hover overlay** | `hover:bg-hover-overlay` | `dark:hover:bg-hover-overlay-dark` |
-
----
-
-### Configuración en `tailwind.config.js`
-
-```javascript
-// Archivo: tailwind.config.js
-module.exports = {
-  darkMode: 'class',
-  theme: {
-    extend: {
-      colors: {
-        // Primary Custom Colors
-        'primary-custom': {
-          100: '#dbeefe',
-          300: '#93d1fd',
-          400: '#60b6fa',
-          500: '#3c9bf6',
-          600: '#0e79fd',
-          700: '#0c6ade',
-        },
-
-        // Primary Inverse
-        'primary-inverse-content': '#eff8ff',
-        'primary-inverse-background': '#0e79fd',
-        'primary-inverse-border': '#3c9bf6',
-
-        // System Colors (Light)
-        'content-primary': '#18181b',
-        'content-secondary': '#a1a1aa',
-        'content-tertiary': '#71717a',
-        'bg-primary': '#ffffff',
-        'background-secondary': '#f4f4f5',
-        'border-primary': '#e4e4e7',
-        'border-secondary': '#f4f4f5',
-
-        // Error Colors
-        'error-border': '#ef4444',
-        'error-content': '#dc2626',
-        'error-bg': '#fef2f2',
-
-        // Dark Mode Colors
-        'dark-bg-primary': '#18181b', // zinc-900 - gris muy oscuro
-        'dark-content-primary': '#ffffff',
-        'dark-border-primary': '#71717a',
-        'dark-border-custom': '#0f6ae3',
-        'dark-bg-inverse': '#bfe2fe',
-        'dark-content-inverse': '#0e79fd',
-      },
-
-      backgroundColor: {
-        'hover-overlay': 'rgba(0, 0, 0, 0.1)',
-        'hover-overlay-dark': 'rgba(255, 255, 255, 0.2)',
-      },
-    },
-  },
-};
-```
-
----
-
-## 📚 Referencias
-
-- **Figma**: [Color Primitives](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=16-4560&m=dev)
-- **Figma**: [Color Tokens](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4001-1314&m=dev)
-- **Código**: `tailwind.config.js` (líneas 15-73)
-- **WCAG**: [Web Content Accessibility Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
-
----
-
-## 🔄 Historial de Cambios
-
-| Versión | Fecha | Cambios |
-|---------|-------|---------|
-| 1.0.0 | 2025-11-11 | Documentación inicial del sistema de colores |
-
----
-
-**Última actualización**: 2025-11-11
-**Mantenido por**: Equipo de Siesa UI Kit