From 425e828083861d524a1a8589d403b96e3a64bdb4 Mon Sep 17 00:00:00 2001 From: josedario87 Date: Thu, 30 Oct 2025 13:26:48 -0600 Subject: [PATCH] =?UTF-8?q?Style:=20Aplicar=20tema=20caf=C3=A9/dorado=20pe?= =?UTF-8?q?rsonalizado=20al=20InputMenu?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Colores aplicados según el sistema de diseño de la app: - Fondo del input: --brand-surface (#1f180f) - Borde: --brand-border (#3a2a16) - Texto: --brand-text (#fef9f0) - Placeholder y iconos: --brand-text-muted (#d8c7a6) - Dropdown: mismo fondo y borde que el input - Item highlighted: rgba(224,192,128,0.12) (tono dorado suave) - Tags seleccionados: rgba(224,192,128,0.14) con borde más fuerte - Color de tags: --brand-primary (#e0c080) - Hover en botón delete: tono dorado más intenso El componente ahora tiene la misma paleta de colores que las cards de Metabase Debug y el resto de la aplicación, eliminando los colores azules/verdes por defecto de Nuxt UI. --- nuxt4-app/app/components/ClienteMultiSelector.vue | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/nuxt4-app/app/components/ClienteMultiSelector.vue b/nuxt4-app/app/components/ClienteMultiSelector.vue index 447dbfd..affebb8 100644 --- a/nuxt4-app/app/components/ClienteMultiSelector.vue +++ b/nuxt4-app/app/components/ClienteMultiSelector.vue @@ -12,6 +12,17 @@ placeholder="Buscar clientes por nombre o cédula..." size="sm" ignore-filter + :ui="{ + base: 'bg-[var(--brand-surface)] text-[var(--brand-text)] border border-[var(--brand-border)]', + 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)]', + itemLeadingIcon: 'text-[var(--brand-text-muted)]', + 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)]' + }" @update:model-value="onSelectionChange" @update:search-term="searchQuery = $event" >