nucleo000/analiticaNucleo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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
Details

Browse Source 
- 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:
josedario87
2025-10-31 11:14:20 -06:00
parent c1d4e5ef57
commit ed08fa8957
2 changed files with 117 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
nuxt4-app/app/pages/settings.vue
View File

@@ -777,7 +777,7 @@ watch(() => theme.value, (newTheme) => {
<div class="w-6 h-6 rounded border-2 border-[var(--brand-border)] mt-0.5" :style="{ backgroundColor: theme.surface }"></div>
<div class="flex-1">
<p class="text-sm font-medium text-[var(--brand-text)]">Fondo Secundario (Surface)</p>
<p class="text-xs text-[var(--brand-text-muted)]">Usado en cards, modales y elementos elevados</p>
<p class="text-xs text-[var(--brand-text-muted)]">Usado en cards grandes, modales, tooltips y elementos elevados</p>
</div>
</div>
@@ -904,6 +904,12 @@ watch(() => theme.value, (newTheme) => {
<strong class="text-[var(--brand-text)]">Resetear:</strong> Si no te gusta el resultado, usa "Restaurar por defecto" para volver al tema Café original
</p>
</div>
<div class="flex items-start gap-2">
<UIcon name="i-lucide-lightbulb" class="size-4 text-[var(--brand-accent)] mt-0.5" />
<p class="text-sm text-[var(--brand-text-muted)]">
<strong class="text-[var(--brand-text)]">Cards grandes:</strong> Las cards de "Filtros", "Panorama" y otras ahora responden completamente al tema gracias a color-mix() con variables CSS
</p>
</div>
</div>
</div>
@@ -917,11 +923,22 @@ watch(() => theme.value, (newTheme) => {
<p class="text-sm font-medium text-[var(--brand-text)] mb-1">
Alcance del Sistema de Temas
</p>
<p class="text-xs text-[var(--brand-text-muted)] leading-relaxed">
<p class="text-xs text-[var(--brand-text-muted)] leading-relaxed mb-2">
El tema se aplica a <strong class="text-[var(--brand-text)]">toda la aplicación</strong>: sidebar,
menús, tablas, cards, gráficas, botones, inputs y más. Los únicos colores que NO cambian son
los semánticos (estados de éxito/error/advertencia) y los identificadores de tipos de café
(Uva/Oreado/Mojado/Verde) que mantienen sus colores específicos para mejor identificación.
menús, tablas, cards grandes (Filtros, Panorama, etc.), gráficas de comparativa de cosechas,
botones, inputs, tooltips y más.
</p>
<p class="text-xs text-[var(--brand-text-muted)] leading-relaxed mb-2">
<strong class="text-[var(--brand-text)]">Clases CSS que responden:</strong>
<code class="text-[var(--brand-accent)] bg-[var(--brand-accent)]/10 px-1 rounded">.brand-card</code>,
<code class="text-[var(--brand-accent)] bg-[var(--brand-accent)]/10 px-1 rounded">.brand-shell</code>,
<code class="text-[var(--brand-accent)] bg-[var(--brand-accent)]/10 px-1 rounded">.brand-table</code>,
<code class="text-[var(--brand-accent)] bg-[var(--brand-accent)]/10 px-1 rounded">.brand-chip</code> y más.
</p>
<p class="text-xs text-[var(--brand-text-muted)] leading-relaxed">
Los únicos colores que NO cambian son los semánticos (estados de éxito/error/advertencia) y
los identificadores de tipos de café (Uva/Oreado/Mojado/Verde) que mantienen sus colores
específicos para mejor identificación visual.
</p>
</div>
</div>