Style: Aplicar tema café/dorado personalizado al InputMenu
Some checks failed
build-and-deploy / build-and-deploy (push) Has been cancelled
Some checks failed
build-and-deploy / build-and-deploy (push) Has been cancelled
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.
This commit is contained in:
@@ -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"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user