@innertia-solutions/nuxt-theme-spark 0.1.110 → 0.1.111

package/components/Table.vue

@@ -524,7 +524,7 @@ defineExpose({
                     :checked="table.getIsAllRowsSelected()"
                     :indeterminate="table.getIsSomeRowsSelected()"
                     @change="table.getToggleAllRowsSelectedHandler()($event)"
-                    class="mx-2 shrink-0 border-card-line rounded-sm text-blue-900 focus:ring-0 focus:ring-offset-0 dark:bg-slate-800 border-card-line"
+                    class="mx-2 shrink-0 border-card-line rounded-sm text-blue-900 focus:ring-0 focus:ring-offset-0 dark:bg-card"
                   />
                 </template>
                 <!-- Regular column header -->
@@ -664,7 +664,7 @@ defineExpose({
                     :checked="row.getIsSelected()"
                     :disabled="!row.getCanSelect()"
                     @change="row.getToggleSelectedHandler()($event)"
-                    class="rounded border-card-line focus:ring-0 focus:ring-offset-0 dark:bg-slate-800 border-card-line"
+                    class="rounded border-card-line focus:ring-0 focus:ring-offset-0 dark:bg-card"
                   />
                 </div>
               </template>
@@ -699,7 +699,7 @@ defineExpose({
         class="absolute inset-0 z-10 pointer-events-none flex items-center justify-center backdrop-blur-sm bg-card/60 rounded-xl"
       >
         <slot name="empty">
-          <p class="text-slate-400 dark:text-slate-500 text-lg font-medium italic">No hay registros</p>
+          <p class="text-muted-foreground text-lg font-medium italic">No hay registros</p>
         </slot>
       </div>
 
@@ -708,7 +708,7 @@ defineExpose({
         class="absolute inset-0 z-10 pointer-events-none flex items-center justify-center backdrop-blur-sm bg-card/60 rounded-xl"
       >
         <slot name="empty-search">
-          <p class="text-slate-400 dark:text-slate-500 text-lg font-medium italic">No hay registros en la búsqueda</p>
+          <p class="text-muted-foreground text-lg font-medium italic">No hay registros en la búsqueda</p>
         </slot>
       </div>
     </div>
@@ -744,7 +744,7 @@ defineExpose({
             :class="{ 'ring-2 ring-indigo-400 dark:ring-indigo-600': row.getIsSelected() }">
             <div v-if="checkable" class="absolute top-2 left-2 z-10">
               <input type="checkbox" :checked="row.getIsSelected()" @change="row.toggleSelected()"
-                class="rounded border-card-line dark:bg-slate-800 border-card-line" />
+                class="rounded border-card-line dark:bg-card" />
             </div>
             <div class="space-y-2" :class="{ 'pt-6': checkable }">
               <div v-for="cell in row.getVisibleCells().filter(c => c.column.id !== 'select')" :key="cell.id" class="flex justify-between">
@@ -776,7 +776,7 @@ defineExpose({
         <div v-if="showReloadButton" class="flex items-center gap-x-2">
           <IconReload
             v-if="!loading"
-            class="size-4 cursor-pointer text-muted-foreground hover:text-gray-700 dark:hover:text-slate-300 transition-colors"
+            class="size-4 cursor-pointer text-muted-foreground hover:text-muted-foreground-1 transition-colors"
             @click="reloadTable"
           />
           <div v-else>

package/components/TableExportable.vue

@@ -65,7 +65,7 @@ defineExpose({ open })
     <button
       type="button"
       @click="isOpen = true"
-      class="py-1.5 sm:py-2 px-2.5 inline-flex items-center gap-x-1.5 text-sm font-medium rounded-lg border border-slate-200 bg-white text-slate-800 shadow-2xs hover:bg-slate-50 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden dark:bg-slate-800 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-700"
+      class="py-1.5 sm:py-2 px-2.5 inline-flex items-center gap-x-1.5 text-sm font-medium rounded-lg border border-card-line bg-card text-foreground shadow-2xs hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden"
     >
       <IconDownload class="shrink-0 size-4" stroke="1.5" />
       Exportar
@@ -93,16 +93,16 @@ defineExpose({ open })
           >
             <div
               v-if="isOpen"
-              class="bg-white dark:bg-slate-800 rounded-2xl shadow-2xl w-full max-w-md border border-slate-200 dark:border-slate-700"
+              class="bg-card rounded-2xl shadow-2xl w-full max-w-md border border-card-line"
             >
-              <div class="flex items-center justify-between px-6 py-4 border-b border-slate-100 dark:border-slate-700">
-                <h3 class="font-semibold text-slate-800 dark:text-slate-100">Exportar tabla</h3>
+              <div class="flex items-center justify-between px-6 py-4 border-b border-card-line">
+                <h3 class="font-semibold text-foreground">Exportar tabla</h3>
                 <button
                   type="button"
                   @click="isOpen = false"
-                  class="p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors"
+                  class="p-1.5 rounded-lg hover:bg-muted-hover transition-colors"
                 >
-                  <svg class="size-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg class="size-4 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                   </svg>
                 </button>
@@ -111,7 +111,7 @@ defineExpose({ open })
               <div class="px-6 py-5 space-y-5">
                 <!-- Format selector -->
                 <div>
-                  <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-2">Formato</p>
+                  <p class="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">Formato</p>
                   <div class="grid grid-cols-4 gap-2">
                     <button
                       v-for="f in formats"
@@ -122,7 +122,7 @@ defineExpose({ open })
                         'flex flex-col items-center gap-1.5 p-3 rounded-xl border text-sm font-medium transition-colors',
                         format === f.value
                           ? 'border-indigo-500 bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:border-indigo-500 dark:text-indigo-300'
-                          : 'border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700'
+                          : 'border-card-line text-muted-foreground-1 hover:bg-muted-hover'
                       ]"
                     >
                       <IconFileTypeXls v-if="f.value === 'xlsx'" class="size-5" stroke="1.5" />
@@ -136,23 +136,23 @@ defineExpose({ open })
 
                 <!-- Filename -->
                 <div>
-                  <label class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider block mb-2">
+                  <label class="text-xs font-semibold text-muted-foreground uppercase tracking-wider block mb-2">
                     Nombre de archivo
                   </label>
                   <div class="flex items-center gap-2">
                     <input
                       v-model="filename"
                       type="text"
-                      class="flex-1 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-900 dark:text-white py-2 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+                      class="flex-1 rounded-lg border border-card-line bg-card text-foreground py-2 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
                     />
-                    <span class="text-sm text-slate-400">.{{ format }}</span>
+                    <span class="text-sm text-muted-foreground">.{{ format }}</span>
                   </div>
                 </div>
 
                 <!-- Columns -->
                 <div v-if="columns.length > 0">
                   <div class="flex items-center justify-between mb-2">
-                    <p class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Columnas</p>
+                    <p class="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Columnas</p>
                     <button
                       type="button"
                       @click="toggleAll"
@@ -165,25 +165,25 @@ defineExpose({ open })
                     <label
                       v-for="col in columns"
                       :key="col.key"
-                      class="flex items-center gap-2 py-1.5 px-2 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 cursor-pointer"
+                      class="flex items-center gap-2 py-1.5 px-2 rounded-lg hover:bg-muted-hover cursor-pointer"
                     >
                       <input
                         type="checkbox"
                         :checked="selectedColumns.includes(col.key)"
                         @change="toggleColumn(col.key)"
-                        class="rounded border-gray-300 dark:bg-slate-700 dark:border-slate-600 text-indigo-600"
+                        class="rounded border-card-line dark:bg-surface text-indigo-600"
                       />
-                      <span class="text-sm text-slate-700 dark:text-slate-200 truncate">{{ col.label }}</span>
+                      <span class="text-sm text-foreground truncate">{{ col.label }}</span>
                     </label>
                   </div>
                 </div>
               </div>
 
-              <div class="flex justify-end gap-2 px-6 py-4 border-t border-slate-100 dark:border-slate-700">
+              <div class="flex justify-end gap-2 px-6 py-4 border-t border-card-line">
                 <button
                   type="button"
                   @click="isOpen = false"
-                  class="py-2 px-4 text-sm font-medium rounded-lg border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
+                  class="py-2 px-4 text-sm font-medium rounded-lg border border-card-line text-muted-foreground-1 hover:bg-muted-hover transition-colors"
                 >
                   Cancelar
                 </button>

package/components/TableFilter.vue

@@ -35,13 +35,13 @@ const activeCount = computed(() =>
 
       <!-- text -->
       <div v-if="col.filterType === 'text'">
-        <label class="block text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">{{ col.label }}</label>
+        <label class="block text-xs font-medium text-muted-foreground mb-1">{{ col.label }}</label>
         <input
           type="text"
           :value="localFilters[col.key] ?? ''"
           @input="updateFilter(col.key, $event.target.value)"
           :placeholder="`Filtrar ${col.label.toLowerCase()}...`"
-          class="w-full rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white py-1.5 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+          class="w-full rounded-lg border border-card-line bg-card text-foreground py-1.5 px-3 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
         />
       </div>
 
@@ -57,27 +57,27 @@ const activeCount = computed(() =>
 
       <!-- daterange -->
       <div v-else-if="col.filterType === 'daterange'">
-        <label class="block text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">{{ col.label }}</label>
+        <label class="block text-xs font-medium text-muted-foreground mb-1">{{ col.label }}</label>
         <div class="flex items-center gap-1.5">
           <input
             type="date"
             :value="localFilters[col.key]?.from ?? ''"
             @change="updateFilter(col.key, { ...localFilters[col.key], from: $event.target.value || null })"
-            class="flex-1 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white py-1.5 px-2 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+            class="flex-1 rounded-lg border border-card-line bg-card text-foreground py-1.5 px-2 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
           />
           <span class="text-slate-400 text-xs shrink-0">—</span>
           <input
             type="date"
             :value="localFilters[col.key]?.to ?? ''"
             @change="updateFilter(col.key, { ...localFilters[col.key], to: $event.target.value || null })"
-            class="flex-1 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white py-1.5 px-2 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+            class="flex-1 rounded-lg border border-card-line bg-card text-foreground py-1.5 px-2 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
           />
         </div>
       </div>
 
     </template>
 
-    <div class="pt-2 border-t border-slate-100 dark:border-slate-700/60">
+    <div class="pt-2 border-t border-card-line">
       <button
         v-if="activeCount > 0"
         type="button"
@@ -87,7 +87,7 @@ const activeCount = computed(() =>
         <svg class="size-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
         Limpiar filtros
       </button>
-      <p v-else class="text-xs text-center text-slate-400 dark:text-slate-500 py-0.5">Sin filtros activos</p>
+      <p v-else class="text-xs text-center text-muted-foreground py-0.5">Sin filtros activos</p>
     </div>
   </div>
 </template>

package/components/Toast/Alert.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="max-w-xs relative bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-lg p-4 pr-10 flex items-start overflow-hidden"
+    class="max-w-xs relative bg-card border border-card-line rounded-xl shadow-lg p-4 pr-10 flex items-start overflow-hidden"
     :class="{
       'border-green-200': toast.severity === 'success',
       'border-red-200': toast.severity === 'danger',
@@ -40,7 +40,7 @@
     <!-- Barra de progreso temporal -->
     <div 
       v-if="toast.duration && toast.duration > 0"
-      class="absolute bottom-0 left-0 w-full h-1 bg-gray-200 dark:bg-gray-700"
+      class="absolute bottom-0 left-0 w-full h-1 bg-card-line"
     >
       <div
         class="h-full bg-gradient-to-r"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innertia-solutions/nuxt-theme-spark",
-  "version": "0.1.110",
+  "version": "0.1.111",
   "description": "Innertia Solutions — Spark theme: backoffice, landing and mobile components and layouts",
   "keywords": [
     "nuxt",