From 0a754958ae73e93297a7d67d56298d004ecc64c8 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Thu, 30 Oct 2025 16:51:11 -0600
Subject: [PATCH] =?UTF-8?q?Fix:=20Agregar=20variables=20de=20tema=20a=20UC?=
 =?UTF-8?q?ard=20en=20p=C3=A1gina=20de=20configuraci=C3=B3n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Configurar prop :ui en todos los UCard para usar variables CSS del tema
- Reemplazar colores hardcoded (amber, green) por variables de tema
- Los UCard ahora responden correctamente a cambios de tema
- Corrige problema donde los cards no cambiaban de color al seleccionar presets

Archivos modificados:
- app/pages/settings.vue: Agregar :ui prop con bg-[var(--brand-surface)] y border
---
 nuxt4-app/app/pages/settings.vue | 44 ++++++++++++++++++++++++++------
 1 file changed, 36 insertions(+), 8 deletions(-)

diff --git a/nuxt4-app/app/pages/settings.vue b/nuxt4-app/app/pages/settings.vue
index 4e7d4fd..599d0ca 100644
--- a/nuxt4-app/app/pages/settings.vue
+++ b/nuxt4-app/app/pages/settings.vue
@@ -155,7 +155,14 @@ watch(() => theme.value, (newTheme) => {
       <UDashboardPanelContent>
         <div class="max-w-4xl mx-auto space-y-8">
           <!-- Configuración de Tema -->
-          <UCard>
+          <UCard
+            :ui="{
+              base: 'bg-[var(--brand-surface)]',
+              ring: 'ring-1 ring-[var(--brand-border)]',
+              body: { base: '', padding: 'px-4 py-5 sm:p-6' },
+              header: { base: 'border-b border-[var(--brand-border)]', padding: 'px-4 py-5 sm:px-6' }
+            }"
+          >
             <template #header>
               <div class="flex items-center justify-between">
                 <div class="flex items-center gap-3">
@@ -463,7 +470,14 @@ watch(() => theme.value, (newTheme) => {
           </UModal>
 
           <!-- Vista previa de colores -->
-          <UCard>
+          <UCard
+            :ui="{
+              base: 'bg-[var(--brand-surface)]',
+              ring: 'ring-1 ring-[var(--brand-border)]',
+              body: { base: '', padding: 'px-4 py-5 sm:p-6' },
+              header: { base: 'border-b border-[var(--brand-border)]', padding: 'px-4 py-5 sm:px-6' }
+            }"
+          >
             <template #header>
               <div class="flex items-center gap-3">
                 <UIcon name="i-lucide-eye" class="size-5 text-[var(--brand-primary)]" />
@@ -495,11 +509,18 @@ watch(() => theme.value, (newTheme) => {
 
           <!-- Otras configuraciones (placeholder) -->
           <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <UCard>
+            <UCard
+              :ui="{
+                base: 'bg-[var(--brand-surface)]',
+                ring: 'ring-1 ring-[var(--brand-border)]',
+                body: { base: '', padding: 'px-4 py-5 sm:p-6' },
+                header: { base: 'border-b border-[var(--brand-border)]', padding: 'px-4 py-5 sm:px-6' }
+              }"
+            >
               <template #header>
                 <div class="flex items-center gap-3">
-                  <div class="w-10 h-10 rounded-lg bg-amber-50 dark:bg-amber-950/30 flex items-center justify-center">
-                    <UIcon name="i-lucide-bell" class="size-5 text-amber-600 dark:text-amber-400" />
+                  <div class="w-10 h-10 rounded-lg bg-[var(--brand-primary)]/20 flex items-center justify-center">
+                    <UIcon name="i-lucide-bell" class="size-5 text-[var(--brand-accent)]" />
                   </div>
                   <h3 class="font-semibold text-[var(--brand-text)]">
                     Notificaciones
@@ -511,11 +532,18 @@ watch(() => theme.value, (newTheme) => {
               </p>
             </UCard>
 
-            <UCard>
+            <UCard
+              :ui="{
+                base: 'bg-[var(--brand-surface)]',
+                ring: 'ring-1 ring-[var(--brand-border)]',
+                body: { base: '', padding: 'px-4 py-5 sm:p-6' },
+                header: { base: 'border-b border-[var(--brand-border)]', padding: 'px-4 py-5 sm:px-6' }
+              }"
+            >
               <template #header>
                 <div class="flex items-center gap-3">
-                  <div class="w-10 h-10 rounded-lg bg-green-50 dark:bg-green-950/30 flex items-center justify-center">
-                    <UIcon name="i-lucide-shield" class="size-5 text-green-600 dark:text-green-400" />
+                  <div class="w-10 h-10 rounded-lg bg-[var(--brand-primary)]/20 flex items-center justify-center">
+                    <UIcon name="i-lucide-shield" class="size-5 text-[var(--brand-accent)]" />
                   </div>
                   <h3 class="font-semibold text-[var(--brand-text)]">
                     Privacidad