From 5aac61d37a7105691b78ff6606b0d2409e4fdd3c Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Wed, 29 Oct 2025 18:23:34 -0600
Subject: [PATCH] =?UTF-8?q?Style:=20aplicar=20colores=20caf=C3=A9=20del=20?=
 =?UTF-8?q?tema=20a=20tabs=20e=20input=20en=20Metabase=20Debug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Personalizar UTabs con prop :ui usando colores de marca
- Tab seleccionada: bg-[#c08040] con texto oscuro
- Tabs inactivas: text-[var(--brand-text-muted)] con hover
- Borde inferior: border-[var(--brand-border)]
- Input de búsqueda con bg, text y border del tema
- Focus ring en color café #c08040
---
 .../metabase/MetabaseCardsTable.vue           |  7 ++++
 nuxt4-app/app/pages/metabase-debug.vue        | 37 ++++++++++++++++++-
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/nuxt4-app/app/components/metabase/MetabaseCardsTable.vue b/nuxt4-app/app/components/metabase/MetabaseCardsTable.vue
index 739ea9e..41ddfdc 100644
--- a/nuxt4-app/app/components/metabase/MetabaseCardsTable.vue
+++ b/nuxt4-app/app/components/metabase/MetabaseCardsTable.vue
@@ -7,6 +7,13 @@
         placeholder="Buscar por nombre o ID..."
         icon="i-heroicons-magnifying-glass"
         class="flex-1"
+        :ui="{
+          base: 'bg-[var(--brand-bg)] text-[var(--brand-text)] border border-[var(--brand-border)] focus:ring-2 focus:ring-[#c08040] focus:border-[#c08040]',
+          placeholder: 'placeholder-[var(--brand-text-muted)]',
+          icon: {
+            base: 'text-[var(--brand-text-muted)]'
+          }
+        }"
       />
       <USelectMenu
         v-model="selectedFilter"
diff --git a/nuxt4-app/app/pages/metabase-debug.vue b/nuxt4-app/app/pages/metabase-debug.vue
index 5994dd5..77eb585 100644
--- a/nuxt4-app/app/pages/metabase-debug.vue
+++ b/nuxt4-app/app/pages/metabase-debug.vue
@@ -70,7 +70,42 @@
       />
 
       <!-- Tabs -->
-      <UTabs v-model="selectedTab" :items="tabs">
+      <UTabs
+        v-model="selectedTab"
+        :items="tabs"
+        :ui="{
+          wrapper: 'space-y-4',
+          container: 'flex items-center gap-4 border-b border-[var(--brand-border)] w-full overflow-x-auto',
+          base: 'focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[#c08040] disabled:cursor-not-allowed disabled:opacity-75',
+          list: {
+            background: 'bg-transparent',
+            rounded: '',
+            shadow: '',
+            padding: '',
+            height: '',
+            width: '',
+            marker: {
+              wrapper: 'absolute top-[4px] left-[4px] duration-200 ease-out focus:outline-none',
+              base: 'w-full h-full',
+              background: 'bg-[#c08040]',
+              rounded: 'rounded-md',
+              shadow: 'shadow-sm'
+            },
+            tab: {
+              base: 'relative inline-flex items-center justify-center flex-shrink-0 w-full ui-focus-visible:outline-0 ui-focus-visible:ring-2 ui-focus-visible:ring-inset ui-focus-visible:ring-[#c08040] ui-disabled:cursor-not-allowed ui-disabled:opacity-75 transition-colors duration-200 ease-out',
+              background: 'ui-not-selected:bg-transparent ui-selected:bg-[#c08040]',
+              active: 'text-[#1b1209]',
+              inactive: 'text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]',
+              height: 'h-8',
+              padding: 'px-3',
+              size: 'text-sm',
+              font: 'font-medium',
+              rounded: 'rounded-md',
+              shadow: ''
+            }
+          }
+        }"
+      >
         <!-- Table View -->
         <template #table>
           <div class="py-4">