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

package/components/Forms/SelectServer.vue

@@ -331,7 +331,7 @@ const sizeClasses = computed(() => {
 // Computed classes for validation states
 const validationClasses = computed(() => {
   if (props.error) return "border-red-400 dark:border-red-500";
-  return "border-slate-200 dark:border-slate-700";
+  return "border-card-line";
 });
 
 // Combined select classes
@@ -339,7 +339,7 @@ const selectClasses = computed(() => {
   let base, focus, disabled;
 
   base =
-    "relative w-full rounded-lg border bg-white dark:bg-slate-800 transition-colors cursor-pointer text-slate-900 dark:text-white";
+    "relative w-full rounded-lg border bg-card transition-colors cursor-pointer text-foreground";
 
   if (props.multiple && props.tagsMode) {
     base += " px-3 pe-8 min-h-[2.375rem] flex items-center flex-wrap text-nowrap";
@@ -499,7 +499,7 @@ onMounted(() => {
 <template>
   <div class="space-y-1.5">
     <!-- Label -->
-    <label v-if="label" class="block text-sm font-medium text-slate-700 dark:text-slate-300">
+    <label v-if="label" class="block text-sm font-medium text-foreground">
       {{ label }}
     </label>
 
@@ -526,7 +526,7 @@ onMounted(() => {
         <!-- Tags mode for multiple selection -->
         <div v-if="multiple && tagsMode && selectedOptions.length" class="flex flex-wrap items-center gap-1 flex-1">
           <div v-for="option in selectedOptions" :key="option.id"
-            class="flex flex-nowrap items-center relative z-10 bg-white border border-gray-200 rounded-full p-1 m-1 dark:bg-gray-900 dark:border-gray-700">
+            class="flex flex-nowrap items-center relative z-10 bg-card border border-card-line rounded-full p-1 m-1">
             <!-- Avatar/Icon -->
             <div v-if="option.avatar || option.icon" class="size-6 me-1">
               <img v-if="option.avatar" :src="option.avatar" :alt="getOptionLabel(option)"
@@ -535,7 +535,7 @@ onMounted(() => {
             </div>
 
             <!-- Label -->
-            <div class="whitespace-nowrap text-gray-800 dark:text-gray-200 text-sm pl-1.5">
+            <div class="whitespace-nowrap text-foreground text-sm pl-1.5">
               <slot name="tag" :option="option">
                 {{ getOptionLabel(option) }}
               </slot>
@@ -543,7 +543,7 @@ onMounted(() => {
 
             <!-- Remove button -->
             <button type="button" v-if="!disabled" @click.stop="removeTag(option)"
-              class="inline-flex shrink-0 justify-center items-center size-5 ms-2 rounded-full text-gray-800 bg-gray-200 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 text-sm dark:bg-gray-700/50 dark:hover:bg-gray-700 dark:text-gray-400 cursor-pointer">
+              class="inline-flex shrink-0 justify-center items-center size-5 ms-2 rounded-full text-foreground bg-surface-1 hover:bg-surface-1 focus:outline-none focus:ring-2 focus:ring-gray-400 text-sm cursor-pointer">
               <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M18 6 6 18" />
@@ -551,13 +551,13 @@ onMounted(() => {
               </svg>
             </button>
           </div>
-          <span v-if="!selectedOptions.length" class="text-gray-500 dark:text-gray-400 py-2.5 px-2">
+          <span v-if="!selectedOptions.length" class="text-muted-foreground py-2.5 px-2">
             {{ placeholder }}
           </span>
         </div>
 
         <span v-else class="truncate flex-1 text-left pr-10"
-          :class="{ 'text-gray-400 dark:text-slate-500': !selectedOptions.length, 'text-slate-900 dark:text-white': selectedOptions.length }">
+          :class="{ 'text-muted-foreground': !selectedOptions.length, 'text-foreground': selectedOptions.length }">
           <slot name="display" :selectedOptions="selectedOptions" :displayText="displayText">
             {{ displayText }}
           </slot>
@@ -566,7 +566,7 @@ onMounted(() => {
         <!-- Clear button -->
         <button type="button" v-if="clearable && selectedOptions.length && !disabled && !loading"
           @click.stop="clearSelection"
-          class="absolute end-8 top-1/2 -translate-y-1/2 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-full p-1 transition-colors focus:outline-none focus:ring-1 focus:ring-slate-400">
+          class="absolute end-8 top-1/2 -translate-y-1/2 hover:bg-muted-hover rounded-full p-1 transition-colors focus:outline-none focus:ring-1 focus:ring-slate-400">
           <svg class="size-3.5 text-slate-400" fill="currentColor" viewBox="0 0 20 20">
             <path fill-rule="evenodd"
               d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
@@ -576,7 +576,7 @@ onMounted(() => {
 
         <!-- Dropdown arrow -->
         <div class="absolute top-1/2 end-3 -translate-y-1/2">
-          <svg class="shrink-0 size-3.5 text-gray-500 dark:text-gray-500 transition-transform"
+          <svg class="shrink-0 size-3.5 text-muted-foreground transition-transform"
             :class="{ 'rotate-180': isOpen }" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
             viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
             stroke-linejoin="round">
@@ -592,12 +592,12 @@ onMounted(() => {
       enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75"
       leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
       <div v-show="isOpen" ref="optionsListRef" @scroll="handleScroll"
-        class="absolute z-50 w-full mt-1 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-xl max-h-60 overflow-auto">
+        class="absolute z-50 w-full mt-1 bg-dropdown border border-dropdown-line rounded-xl shadow-xl max-h-60 overflow-auto">
         <!-- Search input -->
-        <div v-if="searchable" class="p-2 border-b border-slate-100 dark:border-slate-700/50 relative">
+        <div v-if="searchable" class="p-2 border-b border-card-line relative">
           <input type="text" :value="searchQuery" :placeholder="searchPlaceholder" @input="handleSearchInput"
             @keydown.enter.prevent
-            class="w-full px-3 py-2.5 pr-8 border border-gray-200 dark:border-slate-700 rounded-lg focus:outline-none focus:ring-0 focus:border-gray-400 dark:bg-slate-700 dark:text-white text-sm transition-colors" />
+            class="w-full px-3 py-2.5 pr-8 border border-card-line rounded-lg focus:outline-none focus:ring-0 focus:border-gray-400 dark:bg-surface dark:text-white text-sm transition-colors" />
           <button type="button" v-if="searchQuery" @click.prevent="clearSearch"
             class="absolute top-1/2 right-4 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
             <svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@@ -607,7 +607,7 @@ onMounted(() => {
         </div>
 
         <!-- Initial Loader if list is empty -->
-        <div v-if="isFetching && filteredOptions.length === 0" class="px-3 py-6 text-center text-slate-500">
+        <div v-if="isFetching && filteredOptions.length === 0" class="px-3 py-6 text-center text-muted-foreground">
           <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-current mx-auto mb-2"></div>
           <span class="text-sm">Buscando...</span>
         </div>
@@ -615,9 +615,9 @@ onMounted(() => {
         <!-- Empty option -->
         <button type="button" v-if="allowEmpty && !multiple && !isFetching && filteredOptions.length" @click="
           selectOption({ id: '__empty__', value: null, label: 'Ninguno' })
-          " class="w-full px-3 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700 text-sm">
+          " class="w-full px-3 py-2 text-left hover:bg-muted-hover text-sm">
           <slot name="empty-option">
-            <span class="text-gray-500 dark:text-gray-400">Ninguno</span>
+            <span class="text-muted-foreground">Ninguno</span>
           </slot>
         </button>
 
@@ -625,11 +625,11 @@ onMounted(() => {
         <div v-if="filteredOptions.length">
           <button type="button" v-for="(option, index) in filteredOptions" :key="option.id"
             @click="selectOption(option)" :class="[
-              'w-full px-3 py-2 text-left hover:bg-slate-50 dark:hover:bg-slate-700 flex items-center text-sm',
+              'w-full px-3 py-2 text-left hover:bg-muted-hover flex items-center text-sm',
               {
-                'bg-slate-50 dark:bg-slate-700/50': isOptionSelected(option),
+                'bg-muted': isOptionSelected(option),
                 'opacity-50 cursor-not-allowed': option.disabled,
-                'bg-slate-100 dark:bg-slate-700': focusedIndex === index,
+                'bg-surface': focusedIndex === index,
               },
             ]" :disabled="option.disabled">
             <!-- Multiple selection checkbox -->
@@ -638,7 +638,7 @@ onMounted(() => {
                 'w-4 h-4 rounded-lg border-2 flex items-center justify-center',
                 isOptionSelected(option)
                   ? 'bg-slate-600 border-slate-600 text-white'
-                  : 'border-slate-300 dark:border-slate-600',
+                  : 'border-card-line',
               ]">
                 <svg v-if="isOptionSelected(option)" class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                   <path fill-rule="evenodd"
@@ -660,11 +660,11 @@ onMounted(() => {
               <div class="flex-1">
                 <slot name="option" :option="option" :selected="isOptionSelected(option)">
                   <div>
-                    <div class="font-bold text-slate-800 dark:text-slate-200">
+                    <div class="font-bold text-foreground">
                       {{ getOptionLabel(option) }}
                     </div>
                     <div v-if="getOptionDescription(option)"
-                      class="text-[10px] text-slate-400 uppercase tracking-tight">
+                      class="text-[10px] text-muted-foreground uppercase tracking-tight">
                       {{ getOptionDescription(option) }}
                     </div>
                   </div>
@@ -684,33 +684,33 @@ onMounted(() => {
         </div>
 
         <!-- Infinite Scroll Mini Loader -->
-        <div v-if="isFetching && filteredOptions.length > 0" class="py-3 text-center border-t border-slate-100 dark:border-slate-700/50">
+        <div v-if="isFetching && filteredOptions.length > 0" class="py-3 text-center border-t border-card-line">
           <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-slate-400 mx-auto"></div>
         </div>
 
         <!-- End of list marker -->
-        <div v-else-if="!hasMorePages && filteredOptions.length > 0" class="py-2 text-center text-[10px] text-slate-400 uppercase tracking-widest border-t border-slate-100 dark:border-slate-700/50">
+        <div v-else-if="!hasMorePages && filteredOptions.length > 0" class="py-2 text-center text-[10px] text-muted-foreground uppercase tracking-widest border-t border-card-line">
           No hay más opciones
         </div>
 
         <!-- No options message -->
         <div v-else-if="!isFetching && searchQuery && filteredOptions.length === 0"
-          class="px-3 py-4 text-center text-gray-500 dark:text-gray-400 text-sm">
+          class="px-3 py-4 text-center text-muted-foreground text-sm">
           <slot name="no-options"> No se encontraron opciones </slot>
         </div>
 
         <!-- No data message -->
         <div v-else-if="!serverOptions.length && !isFetching" class="px-3 py-8 text-center">
           <div class="flex flex-col items-center gap-y-2">
-            <div class="size-10 rounded-full bg-slate-50 dark:bg-slate-900/50 flex items-center justify-center">
-              <svg class="size-5 text-slate-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+            <div class="size-10 rounded-full bg-muted flex items-center justify-center">
+              <svg class="size-5 text-muted-foreground-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                 stroke-width="1.5" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round"
                   d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
               </svg>
             </div>
-            <p class="text-sm font-bold text-slate-400">No hay datos disponibles</p>
-            <p class="text-[10px] text-slate-300 uppercase font-black tracking-widest">Intenta refrescar la página</p>
+            <p class="text-sm font-bold text-muted-foreground">No hay datos disponibles</p>
+            <p class="text-[10px] text-muted-foreground-2 uppercase font-black tracking-widest">Intenta refrescar la página</p>
           </div>
         </div>
       </div>
@@ -721,6 +721,6 @@ onMounted(() => {
 
     <!-- Error / Hint -->
     <p v-if="error" class="text-xs text-red-500 dark:text-red-400">{{ error }}</p>
-    <p v-else-if="hint" class="text-xs text-slate-400 dark:text-slate-500">{{ hint }}</p>
+    <p v-else-if="hint" class="text-xs text-muted-foreground">{{ hint }}</p>
   </div>
 </template>

package/components/Layout/Auth.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="bg-slate-50 dark:bg-slate-900">
+  <div class="bg-muted">
     <div class="absolute top-4 right-4 z-20">
       <slot name="theme-switch" />
     </div>
     <main class="flex min-h-full">
       <!-- Columna izquierda: imagen/bienvenida -->
-      <div class="relative hidden min-h-screen lg:w-200 xl:w-[65%] bg-slate-100 lg:flex flex-col justify-between p-6 dark:bg-slate-950 overflow-hidden">
+      <div class="relative hidden min-h-screen lg:w-200 xl:w-[65%] bg-surface lg:flex flex-col justify-between p-6 overflow-hidden">
         <slot name="background" />
         <div class="z-0 p-20 pt-[max(180px,10vh)]">
           <slot name="welcome" />
@@ -13,13 +13,13 @@
       </div>
 
       <!-- Columna derecha: formulario -->
-      <div class="grow px-12 z-10 -ml-6 pr-6 bg-white dark:bg-slate-900 rounded-tl-[1.5rem] rounded-bl-[1.5rem]">
+      <div class="grow px-12 z-10 -ml-6 pr-6 bg-card rounded-tl-[1.5rem] rounded-bl-[1.5rem]">
         <div class="h-full min-h-screen sm:w-112 flex flex-col justify-center mx-auto space-y-5 p-4">
           <div class="flex justify-center mb-6">
             <slot name="logo" />
           </div>
           <slot />
-          <div class="absolute bottom-4 right-4 text-xs text-slate-400">
+          <div class="absolute bottom-4 right-4 text-xs text-muted-foreground">
             <slot name="version" />
           </div>
         </div>

package/components/Modal/DeleteConfirm.vue

@@ -26,7 +26,7 @@ const close = () => {
     :backdrop-dismiss="!loading"
     @update:model-value="$emit('update:modelValue', $event)"
   >
-    <p class="text-sm text-slate-500 dark:text-slate-400">{{ message }}</p>
+    <p class="text-sm text-muted-foreground">{{ message }}</p>
 
     <div class="flex justify-end gap-2 mt-5">
       <AppButton

package/components/Modal.vue

@@ -52,18 +52,18 @@ onUnmounted(() => {
         @click="onBackdrop"
       >
         <div
-          :class="['bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-xl w-full modal-content', sizeClass]"
+          :class="['bg-card border border-card-line rounded-xl shadow-xl w-full modal-content', sizeClass]"
           @click.stop
         >
           <!-- Header -->
-          <div v-if="showHeader" class="flex items-center justify-between px-5 py-4 border-b border-slate-200 dark:border-slate-700">
-            <h3 :id="`${modalId}-label`" class="text-sm font-semibold text-slate-800 dark:text-slate-100">
+          <div v-if="showHeader" class="flex items-center justify-between px-5 py-4 border-b border-card-line">
+            <h3 :id="`${modalId}-label`" class="text-sm font-semibold text-foreground">
               <slot name="header">{{ title }}</slot>
             </h3>
             <button
               v-if="closable"
               type="button"
-              class="size-7 flex items-center justify-center rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100 dark:hover:text-slate-200 dark:hover:bg-slate-700 transition-colors"
+              class="size-7 flex items-center justify-center rounded-lg text-muted-foreground hover:text-muted-foreground-1 hover:bg-muted-hover transition-colors"
               @click="close"
             >
               <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
@@ -78,7 +78,7 @@ onUnmounted(() => {
           </div>
 
           <!-- Footer -->
-          <div v-if="showFooter" class="flex items-center justify-end gap-2 px-5 py-4 border-t border-slate-200 dark:border-slate-700">
+          <div v-if="showFooter" class="flex items-center justify-end gap-2 px-5 py-4 border-t border-card-line">
             <slot name="footer">
               <AppButton v-if="closable" text="Cerrar" severity="secondary" size="sm" @click="close" />
             </slot>

package/components/Nav/Tabs.vue

@@ -18,8 +18,8 @@ const props = withDefaults(defineProps<{
 
 const colorTextClass = computed(() => ({
   blue:   'text-blue-600   dark:text-blue-400',
-  gray:   'text-slate-700  dark:text-slate-200',
-  slate:  'text-slate-700  dark:text-slate-200',
+  gray:   'text-foreground',
+  slate:  'text-foreground',
   green:  'text-green-600  dark:text-green-400',
   amber:  'text-amber-600  dark:text-amber-400',
   red:    'text-red-600    dark:text-red-400',

package/components/Table/Database.vue

@@ -89,12 +89,12 @@ defineExpose({ reload })
         v-model="search"
         type="search"
         :placeholder="searchPlaceholder"
-        class="block 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 ps-9 pe-4 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+        class="block w-full rounded-lg border border-card-line bg-card text-foreground py-1.5 ps-9 pe-4 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
       />
     </div>
 
     <!-- Dense table wrapper — override Table's default padding with compact styles -->
-    <div class="overflow-x-auto border border-slate-200 dark:border-slate-700 rounded-xl">
+    <div class="overflow-x-auto border border-card-line rounded-xl">
       <Table
         ref="tableRef"
         :endpoint="endpoint"
@@ -122,7 +122,7 @@ defineExpose({ reload })
               @blur="saveEdit(row, col)"
               @keydown.enter="saveEdit(row, col)"
               @keydown.escape="cancelEdit"
-              class="flex-1 min-w-0 rounded border border-indigo-400 bg-white dark:bg-slate-700 text-slate-900 dark:text-white py-0.5 px-1.5 text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500"
+              class="flex-1 min-w-0 rounded border border-indigo-400 bg-card text-foreground py-0.5 px-1.5 text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500"
             >
               <option v-for="opt in col.options" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
             </select>
@@ -134,7 +134,7 @@ defineExpose({ reload })
               @blur="saveEdit(row, col)"
               @keydown.enter="saveEdit(row, col)"
               @keydown.escape="cancelEdit"
-              class="flex-1 min-w-0 rounded border border-indigo-400 bg-white dark:bg-slate-700 text-slate-900 dark:text-white py-0.5 px-1.5 text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500"
+              class="flex-1 min-w-0 rounded border border-indigo-400 bg-card text-foreground py-0.5 px-1.5 text-xs focus:outline-none focus:ring-1 focus:ring-indigo-500"
             />
           </div>
 

package/components/Table/DownloadDropdown.vue

@@ -31,7 +31,7 @@ const exportTable = (format) => {
     <button
       id="hs-as-table-table-export-dropdown"
       type="button"
-      class="py-1.5 sm:py-2 px-2.5 inline-flex items-center gap-x-1.5 text-sm sm:text-xs 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 focus:bg-slate-50 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-700 dark:focus:bg-slate-700"
+      class="py-1.5 sm:py-2 px-2.5 inline-flex items-center gap-x-1.5 text-sm sm:text-xs 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 focus:bg-muted-hover"
       aria-haspopup="menu"
       aria-expanded="false"
       aria-label="Dropdown"
@@ -40,14 +40,14 @@ const exportTable = (format) => {
       Exportar
     </button>
     <div
-      class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden divide-y divide-slate-200 min-w-48 z-10 bg-white shadow-md rounded-lg p-2 mt-2 dark:divide-slate-700 dark:bg-slate-800 dark:border dark:border-slate-700 border-t border-slate-200 dark:border-slate-700"
+      class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden divide-y divide-card-line min-w-48 z-10 bg-dropdown shadow-md rounded-lg p-2 mt-2 dark:border dark:border-dropdown-line border-t border-card-line"
       role="menu"
       aria-orientation="vertical"
       aria-labelledby="hs-as-table-table-export-dropdown"
     >
       <div class="py-2 first:pt-0 last:pb-0">
         <a
-          class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-slate-800 hover:bg-slate-100 focus:outline-hidden focus:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-300 dark:focus:bg-slate-700 dark:focus:text-slate-300"
+          class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-hover"
           href="#"
           @click="exportTable('xlsx')"
         >
@@ -55,7 +55,7 @@ const exportTable = (format) => {
           Excel
         </a>
         <a
-          class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-slate-800 hover:bg-slate-100 focus:outline-hidden focus:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-300 dark:focus:bg-slate-700 dark:focus:text-slate-300"
+          class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-hover"
           href="#"
           @click="exportTable('csv')"
         >
@@ -63,7 +63,7 @@ const exportTable = (format) => {
           CSV
         </a>
         <a
-          class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-slate-800 hover:bg-slate-100 focus:outline-hidden focus:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-300 dark:focus:bg-slate-700 dark:focus:text-slate-300"
+          class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-hover"
           href="#"
           @click="exportTable('pdf')"
         >
@@ -71,7 +71,7 @@ const exportTable = (format) => {
           PDF
         </a>
         <a
-          class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-slate-800 hover:bg-slate-100 focus:outline-hidden focus:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-slate-300 dark:focus:bg-slate-700 dark:focus:text-slate-300"
+          class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-hover"
           href="#"
           @click="exportTable('json')"
         >
@@ -85,23 +85,23 @@ const exportTable = (format) => {
         data-hs-dropdown-ignore-click
       >
         <label
-          class="inline-flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200"
+          class="inline-flex items-center gap-2 text-sm text-foreground"
         >
           <input
             type="checkbox"
             v-model="exportAllPages"
-            class="shrink-0 border-slate-300 rounded-sm text-blue-600 focus:ring-blue-500 dark:bg-slate-800 dark:border-slate-600"
+            class="shrink-0 border-card-line rounded-sm text-blue-600 focus:ring-blue-500 dark:bg-card"
           />
           Todas las páginas
         </label>
 
         <label
-          class="inline-flex items-center gap-2 text-sm text-slate-700 dark:text-slate-200"
+          class="inline-flex items-center gap-2 text-sm text-foreground"
         >
           <input
             type="checkbox"
             v-model="exportFilteredRows"
-            class="shrink-0 border-slate-300 rounded-sm text-blue-600 focus:ring-blue-500 dark:bg-slate-800 dark:border-slate-600"
+            class="shrink-0 border-card-line rounded-sm text-blue-600 focus:ring-blue-500 dark:bg-card"
           />
           Solo filas filtradas
         </label>

package/components/Table/FilterDropdown.vue

@@ -55,8 +55,8 @@ const displayText = computed(() => {
 
 const selectClasses = computed(() => {
   const base =
-    "relative w-full rounded-lg border bg-white dark:bg-slate-800 transition-colors cursor-pointer text-slate-900 dark:text-white py-2 px-3 text-sm focus:outline-none focus:ring-0 focus:border-gray-400";
-  const validation = "border-gray-200 dark:border-slate-700";
+    "relative w-full rounded-lg border bg-card transition-colors cursor-pointer text-foreground py-2 px-3 text-sm focus:outline-none focus:ring-0 focus:border-gray-400";
+  const validation = "border-card-line";
   const disabled = props.disabled ? "opacity-50 cursor-not-allowed" : "";
   return `${base} ${validation} ${disabled}`;
 });
@@ -110,7 +110,7 @@ onUnmounted(() => document.removeEventListener("mousedown", handleClickOutside))
         <span
           class="truncate flex-1 text-left pr-10"
           :class="{
-            'text-gray-400 dark:text-slate-500': !hasSelection,
+            'text-muted-foreground': !hasSelection,
             'text-slate-900 dark:text-white': hasSelection,
           }"
         >
@@ -121,7 +121,7 @@ onUnmounted(() => document.removeEventListener("mousedown", handleClickOutside))
 
         <span
           v-if="clearable && hasSelection && !disabled"
-          class="absolute end-8 top-1/2 -translate-y-1/2 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-full p-1 transition-colors focus:outline-none focus:ring-1 focus:ring-slate-400"
+          class="absolute end-8 top-1/2 -translate-y-1/2 hover:bg-muted-hover rounded-full p-1 transition-colors focus:outline-none focus:ring-1 focus:ring-slate-400"
           role="button"
           tabindex="0"
           @click.stop="clearSelection"
@@ -139,7 +139,7 @@ onUnmounted(() => document.removeEventListener("mousedown", handleClickOutside))
 
         <div class="absolute top-1/2 end-3 -translate-y-1/2">
           <svg
-            class="shrink-0 size-3.5 text-gray-500 dark:text-gray-500 transition-transform"
+            class="shrink-0 size-3.5 text-muted-foreground transition-transform"
             :class="{ 'rotate-180': isOpen }"
             xmlns="http://www.w3.org/2000/svg"
             width="24"
@@ -169,7 +169,7 @@ onUnmounted(() => document.removeEventListener("mousedown", handleClickOutside))
       <div
         v-show="isOpen"
         :class="[
-          'absolute z-50 w-full mt-1 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-xl max-h-60 overflow-auto',
+          'absolute z-50 w-full mt-1 bg-dropdown border border-dropdown-line rounded-xl shadow-xl max-h-60 overflow-auto',
           menuClass,
         ]"
       >
@@ -179,8 +179,8 @@ onUnmounted(() => document.removeEventListener("mousedown", handleClickOutside))
             :key="getOptionValue(option)"
             type="button"
             :class="[
-              'w-full px-3 py-2 text-left hover:bg-slate-50 dark:hover:bg-slate-700 flex items-center text-sm',
-              isOptionSelected(option) ? 'bg-slate-50 dark:bg-slate-700/50' : '',
+              'w-full px-3 py-2 text-left hover:bg-muted-hover flex items-center text-sm',
+              isOptionSelected(option) ? 'bg-muted' : '',
             ]"
             @click="selectOption(option)"
           >
@@ -196,7 +196,7 @@ onUnmounted(() => document.removeEventListener("mousedown", handleClickOutside))
                   />
                   <span :class="['relative inline-flex rounded-full size-2.5', option.dot]" />
                 </span>
-                <span class="font-bold text-slate-800 dark:text-slate-200 truncate">
+                <span class="font-bold text-foreground truncate">
                   {{ getOptionLabel(option) }}
                 </span>
               </div>
@@ -217,7 +217,7 @@ onUnmounted(() => document.removeEventListener("mousedown", handleClickOutside))
           </button>
         </div>
 
-        <div v-else class="px-3 py-4 text-center text-gray-500 dark:text-gray-400 text-sm">
+        <div v-else class="px-3 py-4 text-center text-muted-foreground text-sm">
           Sin opciones
         </div>
       </div>

package/components/Table/Grid.vue

@@ -35,7 +35,7 @@ defineExpose({ reload, clearCache })
         v-model="search"
         type="search"
         :placeholder="searchPlaceholder"
-        class="block 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-2 ps-10 pe-4 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+        class="block w-full rounded-lg border border-card-line bg-card text-foreground py-2 ps-10 pe-4 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
       />
     </div>
 

package/components/Table/Kanban.vue

@@ -106,7 +106,7 @@ const onDrop = async (targetState) => {
 
 // ─── Color map ────────────────────────────────────────────────────────────────
 const colorMap = {
-  slate:  { header: 'bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300', over: 'ring-2 ring-slate-400' },
+  slate:  { header: 'bg-surface text-foreground', over: 'ring-2 ring-slate-400' },
   red:    { header: 'bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300',       over: 'ring-2 ring-red-400' },
   yellow: { header: 'bg-yellow-50 dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-300', over: 'ring-2 ring-yellow-400' },
   green:  { header: 'bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300', over: 'ring-2 ring-green-400' },
@@ -135,7 +135,7 @@ defineExpose({ reload, rows })
       <div
         v-for="state in states"
         :key="state.key"
-        class="flex-shrink-0 w-72 flex flex-col rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden transition-shadow"
+        class="flex-shrink-0 w-72 flex flex-col rounded-xl border border-card-line overflow-hidden transition-shadow"
         :class="dragOverState === state.key ? getColors(state).over : ''"
         @dragover="onDragOver($event, state.key)"
         @dragleave="onDragLeave"
@@ -150,13 +150,13 @@ defineExpose({ reload, rows })
         </div>
 
         <!-- Cards -->
-        <div class="flex-1 flex flex-col gap-2 p-3 bg-slate-50/60 dark:bg-slate-900/30 min-h-24">
+        <div class="flex-1 flex flex-col gap-2 p-3 bg-muted min-h-24">
           <div
             v-for="row in columnRows[state.key]"
             :key="row.id"
             draggable="true"
             @dragstart="onDragStart(row, state.key)"
-            class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-3 cursor-grab active:cursor-grabbing hover:shadow-md transition-shadow select-none"
+            class="bg-card border border-card-line rounded-lg p-3 cursor-grab active:cursor-grabbing hover:shadow-md transition-shadow select-none"
             :class="draggedId === row.id ? 'opacity-40' : ''"
             @click="emit('card-click', row)"
           >
@@ -168,8 +168,8 @@ defineExpose({ reload, rows })
                   :key="key"
                   class="text-sm"
                 >
-                  <span class="text-slate-400 dark:text-slate-500 text-xs capitalize">{{ key }}: </span>
-                  <span class="text-slate-800 dark:text-slate-200 font-medium">{{ val }}</span>
+                  <span class="text-muted-foreground text-xs capitalize">{{ key }}: </span>
+                  <span class="text-foreground font-medium">{{ val }}</span>
                 </div>
               </div>
             </slot>
@@ -177,7 +177,7 @@ defineExpose({ reload, rows })
 
           <div
             v-if="!columnRows[state.key]?.length"
-            class="flex-1 flex items-center justify-center py-6 text-sm text-slate-300 dark:text-slate-600"
+            class="flex-1 flex items-center justify-center py-6 text-sm text-muted-foreground-2"
           >
             Sin elementos
           </div>

package/components/Table/List.vue

@@ -76,7 +76,7 @@ defineExpose({ reload, rows })
         v-model="search"
         type="search"
         :placeholder="searchPlaceholder"
-        class="block 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-2 ps-10 pe-4 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+        class="block w-full rounded-lg border border-card-line bg-card text-foreground py-2 ps-10 pe-4 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
       />
     </div>
 
@@ -85,7 +85,7 @@ defineExpose({ reload, rows })
       <div
         v-for="i in 8"
         :key="i"
-        class="h-16 bg-slate-100 dark:bg-slate-800 rounded-xl animate-pulse"
+        class="h-16 bg-surface rounded-xl animate-pulse"
       />
     </div>
 
@@ -94,7 +94,7 @@ defineExpose({ reload, rows })
       <div
         v-for="row in rows"
         :key="row.id ?? JSON.stringify(row)"
-        class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl px-4 py-3 hover:border-indigo-300 dark:hover:border-indigo-600 transition-colors cursor-pointer"
+        class="bg-card border border-card-line rounded-xl px-4 py-3 hover:border-indigo-300 dark:hover:border-indigo-600 transition-colors cursor-pointer"
         @click="emit('row-click', row)"
       >
         <slot name="item" :row="row">
@@ -105,14 +105,14 @@ defineExpose({ reload, rows })
               :key="key"
               class="text-sm"
             >
-              <span class="text-slate-400 dark:text-slate-500 text-xs">{{ key }}: </span>
-              <span class="text-slate-800 dark:text-slate-200">{{ val }}</span>
+              <span class="text-muted-foreground text-xs">{{ key }}: </span>
+              <span class="text-foreground">{{ val }}</span>
             </div>
           </div>
         </slot>
       </div>
 
-      <div v-if="rows.length === 0" class="text-center py-12 text-slate-400 dark:text-slate-500 text-sm">
+      <div v-if="rows.length === 0" class="text-center py-12 text-muted-foreground text-sm">
         Sin resultados
       </div>
     </div>