From 0beb01c03ccef46851b6ff610b7aee807da6e971 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Thu, 30 Oct 2025 17:58:58 -0600
Subject: [PATCH] Docs: Actualizar THEME_SYSTEM.md con nuevas variables
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Cambios:
- Agregar sección de Variables de Tipos de Café (--coffee-*)
- Agregar sección de Variables de Estados (--status-*)
- Agregar Ejemplo 7: Usar Colores de Tipos de Café
- Agregar Ejemplo 8: Usar Colores de Estados
- Actualizar Ejemplo 6 con todas las propiedades del tema
- Actualizar Resumen de Comandos Rápidos con nuevas variables
- Documentación completa para las 15 variables CSS del sistema

La documentación ahora refleja el sistema extendido de temas.
---
 nuxt4-app/docs/THEME_SYSTEM.md | 136 ++++++++++++++++++++++++++++++++-
 1 file changed, 133 insertions(+), 3 deletions(-)

diff --git a/nuxt4-app/docs/THEME_SYSTEM.md b/nuxt4-app/docs/THEME_SYSTEM.md
index 3eb21f2..96898e6 100644
--- a/nuxt4-app/docs/THEME_SYSTEM.md
+++ b/nuxt4-app/docs/THEME_SYSTEM.md
@@ -60,9 +60,9 @@ Usuario modifica tema en /settings
 
 ## Variables CSS Disponibles
 
-### Variables de Tema (`--brand-*`)
+### Variables Base (`--brand-*`)
 
-Estas son las **ÚNICAS** variables que debes usar en tu código:
+Estas variables controlan la apariencia general de la aplicación:
 
 | Variable | Uso | Ejemplo de valor |
 |----------|-----|------------------|
@@ -75,6 +75,27 @@ Estas son las **ÚNICAS** variables que debes usar en tu código:
 | `--brand-text` | Texto principal (alta legibilidad) | `#fef9f0` |
 | `--brand-text-muted` | Texto secundario, descripciones | `#d8c7a6` |
 
+### Variables de Tipos de Café (`--coffee-*`)
+
+Estas variables se usan para identificar visualmente los tipos de café en gráficas y tablas:
+
+| Variable | Uso | Ejemplo de valor |
+|----------|-----|------------------|
+| `--coffee-uva` | Color de identificación para Café Uva | `#a855f7` (Purple) |
+| `--coffee-oreado` | Color de identificación para Café Oreado | `#f97316` (Orange) |
+| `--coffee-mojado` | Color de identificación para Café Mojado | `#06b6d4` (Cyan) |
+| `--coffee-verde` | Color de identificación para Café Verde | `#22c55e` (Green) |
+
+### Variables de Estados (`--status-*`)
+
+Estas variables se usan para indicar estados de pago en tablas y badges:
+
+| Variable | Uso | Ejemplo de valor |
+|----------|-----|------------------|
+| `--status-pendiente` | Estado de pago pendiente | `#f59e0b` (Amber) |
+| `--status-pagado` | Estado pagado completamente | `#10b981` (Emerald) |
+| `--status-anulado` | Estado anulado o cancelado | `#6b7280` (Gray) |
+
 ### Variables de Nuxt UI (`--ui-color-neutral-*`)
 
 ⚠️ **NO uses estas variables directamente**. Están mapeadas automáticamente a `--brand-*` en `main.css`.
@@ -395,7 +416,16 @@ const aplicarTemaAzul = () => {
     primaryStrong: '#3b82f6',
     accent: '#93c5fd',
     text: '#f0f4f8',
-    textMuted: '#cbd5e1'
+    textMuted: '#cbd5e1',
+    // Colores de café (mantener consistentes)
+    coffeeUva: '#a855f7',
+    coffeeOreado: '#f97316',
+    coffeeMojado: '#06b6d4',
+    coffeeVerde: '#22c55e',
+    // Colores de estados (mantener consistentes)
+    statusPendiente: '#f59e0b',
+    statusPagado: '#10b981',
+    statusAnulado: '#6b7280'
   }
   applyTheme()
   saveTheme()
@@ -410,6 +440,79 @@ const aplicarTemaAzul = () => {
 </template>
 ```
 
+### Ejemplo 7: Usar Colores de Tipos de Café
+
+```vue
+<template>
+  <!-- Badge para tipo de café -->
+  <UBadge
+    :style="{ backgroundColor: 'var(--coffee-uva)', color: 'white' }"
+    size="sm"
+  >
+    Café Uva
+  </UBadge>
+
+  <!-- Indicador visual de tipo -->
+  <div class="flex items-center gap-2">
+    <div class="w-3 h-3 rounded-full" style="background: var(--coffee-oreado)"></div>
+    <span>Café Oreado</span>
+  </div>
+
+  <!-- En gráficas (ejemplo con Chart.js) -->
+  <script setup>
+  const chartData = {
+    datasets: [{
+      label: 'Uva',
+      backgroundColor: 'var(--coffee-uva)',
+      data: [10, 20, 30]
+    }, {
+      label: 'Oreado',
+      backgroundColor: 'var(--coffee-oreado)',
+      data: [15, 25, 35]
+    }]
+  }
+  </script>
+</template>
+```
+
+### Ejemplo 8: Usar Colores de Estados
+
+```vue
+<template>
+  <!-- Badge de estado pendiente -->
+  <UBadge
+    class="text-[var(--status-pendiente)] bg-[var(--status-pendiente)]/10 border border-[var(--status-pendiente)]/30"
+    size="sm"
+  >
+    Pendiente
+  </UBadge>
+
+  <!-- Badge de estado pagado -->
+  <UBadge
+    class="text-[var(--status-pagado)] bg-[var(--status-pagado)]/10 border border-[var(--status-pagado)]/30"
+    size="sm"
+  >
+    Pagado
+  </UBadge>
+
+  <!-- Badge de estado anulado -->
+  <UBadge
+    class="text-[var(--status-anulado)] bg-[var(--status-anulado)]/10 border border-[var(--status-anulado)]/30"
+    size="sm"
+  >
+    Anulado
+  </UBadge>
+
+  <!-- Indicador en tabla -->
+  <td>
+    <div class="flex items-center gap-2">
+      <div class="w-2 h-2 rounded-full" :style="{ backgroundColor: 'var(--status-pagado)' }"></div>
+      <span>Pagado</span>
+    </div>
+  </td>
+</template>
+```
+
 ---
 
 ## Integración con Nuxt UI
@@ -616,6 +719,8 @@ Antes de hacer commit, verifica:
 ## Resumen de Comandos Rápidos
 
 ```vue
+<!-- VARIABLES BASE -->
+
 <!-- Fondos -->
 bg-[var(--brand-bg)]        <!-- Fondo principal -->
 bg-[var(--brand-surface)]   <!-- Cards, modales -->
@@ -636,6 +741,31 @@ bg-[var(--brand-primary-strong)]    <!-- Backgrounds intensos -->
 hover:bg-[var(--brand-primary)]/10
 hover:border-[var(--brand-primary)]
 hover:text-[var(--brand-accent)]
+
+<!-- VARIABLES DE TIPOS DE CAFÉ -->
+
+<!-- Colores de café -->
+bg-[var(--coffee-uva)]      <!-- Purple - Café Uva -->
+bg-[var(--coffee-oreado)]   <!-- Orange - Café Oreado -->
+bg-[var(--coffee-mojado)]   <!-- Cyan - Café Mojado -->
+bg-[var(--coffee-verde)]    <!-- Green - Café Verde -->
+
+<!-- Ejemplo en badges -->
+<UBadge :style="{ backgroundColor: 'var(--coffee-uva)', color: 'white' }">
+  Café Uva
+</UBadge>
+
+<!-- VARIABLES DE ESTADOS -->
+
+<!-- Colores de estados -->
+text-[var(--status-pendiente)]  <!-- Amber - Pendiente -->
+text-[var(--status-pagado)]     <!-- Green - Pagado -->
+text-[var(--status-anulado)]    <!-- Gray - Anulado -->
+
+<!-- Ejemplo en badges con fondo suave -->
+<UBadge class="text-[var(--status-pagado)] bg-[var(--status-pagado)]/10">
+  Pagado
+</UBadge>
 ```
 
 ---