Docs: Actualizar documentación completa del sistema de temas v2.1
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 50s
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 50s
- Actualizado THEME_SYSTEM.md con nuevas variables --brand-cosecha-2/3/4 - Documentadas implementaciones CSS con color-mix() en todas las clases - Agregada sección 'Mejoras Recientes (v2.1)' en THEME_SYSTEM.md - Actualizada descripción de Surface en settings.vue (cards grandes, tooltips) - Mejorada sección 'Alcance del Sistema de Temas' con ejemplos de clases CSS - Agregado tip sobre cards grandes usando color-mix() - Versión actualizada a 2.1 | Fecha: 2025-10-31 Todos los componentes ahora responden completamente a cambios de tema
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
# Sistema de Temas - Analítica Núcleo
|
||||
|
||||
> **Documentación definitiva del sistema de temas personalizable**
|
||||
> Versión: 2.0 | Última actualización: 2025-10-30
|
||||
> Versión: 2.1 | Última actualización: 2025-10-31
|
||||
|
||||
## Índice
|
||||
|
||||
@@ -75,6 +75,18 @@ Estas variables controlan la apariencia general de la aplicación:
|
||||
| `--brand-text` | Texto principal (alta legibilidad) | `#fef9f0` |
|
||||
| `--brand-text-muted` | Texto secundario, descripciones | `#d8c7a6` |
|
||||
|
||||
### Variables Intermedias para Gráficas (`--brand-cosecha-*`)
|
||||
|
||||
Estas variables se usan en las gráficas de comparativa de cosechas para diferenciar visualmente múltiples series:
|
||||
|
||||
| Variable | Uso | Ejemplo de valor |
|
||||
|----------|-----|------------------|
|
||||
| `--brand-cosecha-2` | Tono intermedio 1 para gráficas de cosechas | `#8b6f47` |
|
||||
| `--brand-cosecha-3` | Tono intermedio 2 para gráficas de cosechas | `#a0826e` |
|
||||
| `--brand-cosecha-4` | Tono intermedio 3 para gráficas de cosechas | `#b89968` |
|
||||
|
||||
> **Nota:** Estas variables se ajustan automáticamente cuando cambias el tema, manteniendo la armonía visual con los colores primarios.
|
||||
|
||||
### Variables de Tipos de Café (`--coffee-*`)
|
||||
|
||||
Estas variables se usan para identificar visualmente los tipos de café en gráficas y tablas:
|
||||
@@ -179,8 +191,10 @@ Estas variables se usan para indicar estados de pago en tablas y badges:
|
||||
|
||||
## Clases Utilitarias
|
||||
|
||||
⚠️ **IMPORTANTE:** Todas las clases utilitarias ahora usan `color-mix()` y variables CSS dinámicas. Esto significa que **todas** responden automáticamente a los cambios de tema.
|
||||
|
||||
### `.brand-shell`
|
||||
Contenedor principal con gradiente radial.
|
||||
Contenedor principal con gradiente radial dinámico.
|
||||
|
||||
```vue
|
||||
<div class="brand-shell">
|
||||
@@ -188,8 +202,19 @@ Contenedor principal con gradiente radial.
|
||||
</div>
|
||||
```
|
||||
|
||||
**Implementación CSS:**
|
||||
```css
|
||||
.brand-shell {
|
||||
background: radial-gradient(circle at 20% 20%,
|
||||
color-mix(in srgb, var(--brand-accent) 8%, transparent), transparent 55%),
|
||||
radial-gradient(circle at 80% 10%,
|
||||
color-mix(in srgb, var(--brand-primary-strong) 8%, transparent), transparent 45%),
|
||||
var(--brand-bg);
|
||||
}
|
||||
```
|
||||
|
||||
### `.brand-card`
|
||||
Tarjetas con estilos consistentes (gradiente, borde, sombra).
|
||||
Tarjetas con estilos consistentes (gradiente, borde, sombra). **Ahora completamente dinámicas.**
|
||||
|
||||
```vue
|
||||
<div class="brand-card">
|
||||
@@ -198,6 +223,17 @@ Tarjetas con estilos consistentes (gradiente, borde, sombra).
|
||||
</div>
|
||||
```
|
||||
|
||||
**Implementación CSS:**
|
||||
```css
|
||||
.brand-card {
|
||||
background: linear-gradient(145deg,
|
||||
color-mix(in srgb, var(--brand-bg) 95%, transparent),
|
||||
color-mix(in srgb, var(--brand-surface) 85%, transparent));
|
||||
border: 1px solid color-mix(in srgb, var(--brand-primary) 12%, transparent);
|
||||
box-shadow: 0 12px 40px color-mix(in srgb, var(--brand-bg) 55%, transparent);
|
||||
}
|
||||
```
|
||||
|
||||
### `.brand-divider`
|
||||
Divisor horizontal decorativo.
|
||||
|
||||
@@ -205,6 +241,13 @@ Divisor horizontal decorativo.
|
||||
<div class="brand-divider"></div>
|
||||
```
|
||||
|
||||
**Implementación CSS:**
|
||||
```css
|
||||
.brand-divider {
|
||||
border-top: 1px solid color-mix(in srgb, var(--brand-primary) 16%, transparent);
|
||||
}
|
||||
```
|
||||
|
||||
### `.brand-section-title`
|
||||
Títulos de sección con color primario.
|
||||
|
||||
@@ -213,13 +256,28 @@ Títulos de sección con color primario.
|
||||
```
|
||||
|
||||
### `.brand-chip` / `.brand-pill`
|
||||
Tags o badges pequeños.
|
||||
Tags o badges pequeños con estilos dinámicos.
|
||||
|
||||
```vue
|
||||
<span class="brand-chip">Estado</span>
|
||||
<span class="brand-pill">Badge</span>
|
||||
```
|
||||
|
||||
**Implementación CSS:**
|
||||
```css
|
||||
.brand-chip {
|
||||
background: color-mix(in srgb, var(--brand-accent) 8%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--brand-accent) 18%, transparent);
|
||||
color: var(--brand-accent);
|
||||
}
|
||||
|
||||
.brand-pill {
|
||||
background: color-mix(in srgb, var(--brand-primary) 14%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--brand-primary) 28%, transparent);
|
||||
color: var(--brand-primary);
|
||||
}
|
||||
```
|
||||
|
||||
### `.brand-badge`
|
||||
Badge con fondo primario sólido.
|
||||
|
||||
@@ -228,7 +286,7 @@ Badge con fondo primario sólido.
|
||||
```
|
||||
|
||||
### `.brand-table`
|
||||
Estilos para tablas.
|
||||
Estilos para tablas con hover dinámico.
|
||||
|
||||
```vue
|
||||
<table class="brand-table">
|
||||
@@ -237,6 +295,19 @@ Estilos para tablas.
|
||||
</table>
|
||||
```
|
||||
|
||||
**Implementación CSS:**
|
||||
```css
|
||||
.brand-table thead {
|
||||
background: linear-gradient(90deg,
|
||||
color-mix(in srgb, var(--brand-surface) 95%, transparent),
|
||||
color-mix(in srgb, var(--brand-bg) 95%, transparent));
|
||||
}
|
||||
|
||||
.brand-table tbody tr:hover {
|
||||
background: color-mix(in srgb, var(--brand-accent) 6%, transparent);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Composable useTheme()
|
||||
@@ -778,8 +849,25 @@ text-[var(--status-anulado)] <!-- Gray - Anulado -->
|
||||
- **Usa el composable** `useTheme()` para manipulación programática
|
||||
- **Consulta este documento** ante cualquier duda sobre colores
|
||||
|
||||
## Mejoras Recientes (v2.1)
|
||||
|
||||
✅ **Todas las clases CSS ahora son completamente dinámicas**
|
||||
- Las cards grandes (`.brand-card`) responden a cambios de tema
|
||||
- Los gradientes de fondo (`.brand-shell`) se ajustan automáticamente
|
||||
- Todas las clases utilitarias usan `color-mix()` con variables CSS
|
||||
|
||||
✅ **Nuevas variables para gráficas**
|
||||
- `--brand-cosecha-2`, `--brand-cosecha-3`, `--brand-cosecha-4`
|
||||
- Colores intermedios que mantienen armonía con el tema activo
|
||||
- Usadas en gráficas de comparativa de cosechas
|
||||
|
||||
✅ **Eliminación de colores hardcodeados**
|
||||
- Ya no existe `--brand-bg-secondary` (ahora usa `--brand-surface`)
|
||||
- Todos los colores RGB/hex hardcodeados fueron reemplazados
|
||||
- El background de `html/body` ahora usa `var(--brand-bg)`
|
||||
|
||||
---
|
||||
|
||||
**Mantenido por:** Claude Code para Núcleo Río Frío
|
||||
**Versión del sistema:** 2.0
|
||||
**Última revisión:** 2025-10-30
|
||||
**Versión del sistema:** 2.1
|
||||
**Última revisión:** 2025-10-31
|
||||
|
||||
Reference in New Issue
Block a user