From 87ec3b1eb3391e08a26a7c5aa41c094744cd1aea Mon Sep 17 00:00:00 2001 From: josedario87 Date: Thu, 30 Oct 2025 14:02:15 -0600 Subject: [PATCH] Style: Aplicar tema personalizado a todos los filtros InputMenu MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Se aplica el mismo tema café/dorado a todos los InputMenu de filtros: - Tipo de café - Estado - Ubicación - Calidad Estilos aplicados (igual que ClienteMultiSelector): - Fondo: --brand-surface (#1f180f) - Borde: --brand-border (#3a2a16) - Focus ring: ring-1 con --brand-primary (#e0c080) - Item highlighted: rgba(224,192,128,0.12) - Tags: color --brand-primary con bordes dorados - Transición suave en el borde de focus Todos los filtros ahora mantienen la coherencia visual con el resto de la aplicación. --- .../informe-ingresos/FiltrosPanel.vue | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/nuxt4-app/app/components/informe-ingresos/FiltrosPanel.vue b/nuxt4-app/app/components/informe-ingresos/FiltrosPanel.vue index 2a76833..6ceed4a 100644 --- a/nuxt4-app/app/components/informe-ingresos/FiltrosPanel.vue +++ b/nuxt4-app/app/components/informe-ingresos/FiltrosPanel.vue @@ -62,6 +62,17 @@ size="xs" icon="i-lucide-coffee" class="w-full" + :ui="{ + root: 'focus-within:ring-1 focus-within:ring-[var(--brand-primary)] transition-shadow', + base: 'bg-[var(--brand-surface)] text-[var(--brand-text)] border border-[var(--brand-border)] focus:ring-1 focus:ring-[var(--brand-primary)] focus:border-[var(--brand-primary)]', + placeholder: 'placeholder-[var(--brand-text-muted)]', + leadingIcon: 'text-[var(--brand-text-muted)]', + content: 'bg-[var(--brand-surface)] border border-[var(--brand-border)]', + item: 'text-[var(--brand-text)] data-highlighted:bg-[rgba(224,192,128,0.12)] data-highlighted:text-[var(--brand-text)]', + tagsItem: 'bg-[rgba(224,192,128,0.14)] border border-[rgba(224,192,128,0.28)] text-[var(--brand-primary)]', + tagsItemText: 'text-[var(--brand-primary)]', + tagsItemDelete: 'text-[var(--brand-text-muted)] hover:text-[var(--brand-primary)] hover:bg-[rgba(224,192,128,0.2)]' + }" /> @@ -86,6 +97,17 @@ size="xs" icon="i-lucide-check-circle" class="w-full" + :ui="{ + root: 'focus-within:ring-1 focus-within:ring-[var(--brand-primary)] transition-shadow', + base: 'bg-[var(--brand-surface)] text-[var(--brand-text)] border border-[var(--brand-border)] focus:ring-1 focus:ring-[var(--brand-primary)] focus:border-[var(--brand-primary)]', + placeholder: 'placeholder-[var(--brand-text-muted)]', + leadingIcon: 'text-[var(--brand-text-muted)]', + content: 'bg-[var(--brand-surface)] border border-[var(--brand-border)]', + item: 'text-[var(--brand-text)] data-highlighted:bg-[rgba(224,192,128,0.12)] data-highlighted:text-[var(--brand-text)]', + tagsItem: 'bg-[rgba(224,192,128,0.14)] border border-[rgba(224,192,128,0.28)] text-[var(--brand-primary)]', + tagsItemText: 'text-[var(--brand-primary)]', + tagsItemDelete: 'text-[var(--brand-text-muted)] hover:text-[var(--brand-primary)] hover:bg-[rgba(224,192,128,0.2)]' + }" /> @@ -110,6 +132,17 @@ size="xs" icon="i-lucide-map-pin" class="w-full" + :ui="{ + root: 'focus-within:ring-1 focus-within:ring-[var(--brand-primary)] transition-shadow', + base: 'bg-[var(--brand-surface)] text-[var(--brand-text)] border border-[var(--brand-border)] focus:ring-1 focus:ring-[var(--brand-primary)] focus:border-[var(--brand-primary)]', + placeholder: 'placeholder-[var(--brand-text-muted)]', + leadingIcon: 'text-[var(--brand-text-muted)]', + content: 'bg-[var(--brand-surface)] border border-[var(--brand-border)]', + item: 'text-[var(--brand-text)] data-highlighted:bg-[rgba(224,192,128,0.12)] data-highlighted:text-[var(--brand-text)]', + tagsItem: 'bg-[rgba(224,192,128,0.14)] border border-[rgba(224,192,128,0.28)] text-[var(--brand-primary)]', + tagsItemText: 'text-[var(--brand-primary)]', + tagsItemDelete: 'text-[var(--brand-text-muted)] hover:text-[var(--brand-primary)] hover:bg-[rgba(224,192,128,0.2)]' + }" /> @@ -134,6 +167,17 @@ size="xs" icon="i-lucide-star" class="w-full" + :ui="{ + root: 'focus-within:ring-1 focus-within:ring-[var(--brand-primary)] transition-shadow', + base: 'bg-[var(--brand-surface)] text-[var(--brand-text)] border border-[var(--brand-border)] focus:ring-1 focus:ring-[var(--brand-primary)] focus:border-[var(--brand-primary)]', + placeholder: 'placeholder-[var(--brand-text-muted)]', + leadingIcon: 'text-[var(--brand-text-muted)]', + content: 'bg-[var(--brand-surface)] border border-[var(--brand-border)]', + item: 'text-[var(--brand-text)] data-highlighted:bg-[rgba(224,192,128,0.12)] data-highlighted:text-[var(--brand-text)]', + tagsItem: 'bg-[rgba(224,192,128,0.14)] border border-[rgba(224,192,128,0.28)] text-[var(--brand-primary)]', + tagsItemText: 'text-[var(--brand-primary)]', + tagsItemDelete: 'text-[var(--brand-text-muted)] hover:text-[var(--brand-primary)] hover:bg-[rgba(224,192,128,0.2)]' + }" />