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

package/components/Admin/Header.vue

@@ -7,10 +7,10 @@ const sidebar = inject('vantage:sidebar', null) as any
 </script>
 
 <template>
-  <header class="sticky top-0 z-40 bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 px-4 lg:px-6 h-14 flex items-center gap-x-3">
+  <header class="sticky top-0 z-40 bg-card border-b border-card-line px-4 lg:px-6 h-14 flex items-center gap-x-3">
     <!-- Hamburger mobile -->
     <button type="button"
-      class="lg:hidden size-8 flex items-center justify-center text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
+      class="lg:hidden size-8 flex items-center justify-center text-muted-foreground hover:text-foreground"
       @click="sidebar?.open()">
       <svg class="size-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
         <line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" />
@@ -20,7 +20,7 @@ const sidebar = inject('vantage:sidebar', null) as any
     <!-- Left slot -->
     <div class="flex-1 flex items-center gap-x-3">
       <slot name="left">
-        <span v-if="title" class="text-sm font-medium text-slate-700 dark:text-slate-300">{{ title }}</span>
+        <span v-if="title" class="text-sm font-medium text-foreground">{{ title }}</span>
       </slot>
     </div>
 

package/components/Admin/Page.vue

@@ -13,15 +13,15 @@ const slots = useSlots()
 const iconComponent = computed(() => props.icon ? TablerIcons[props.icon] ?? null : null)
 
 const iconColorClass = computed(() => ({
-  slate:  'bg-slate-100  dark:bg-slate-800  text-slate-600  dark:text-slate-400',
+  slate:  'bg-surface text-muted-foreground-1',
   blue:   'bg-blue-100   dark:bg-blue-900/30  text-blue-600   dark:text-blue-400',
   green:  'bg-green-100  dark:bg-green-900/30 text-green-600  dark:text-green-400',
   amber:  'bg-amber-100  dark:bg-amber-900/30 text-amber-600  dark:text-amber-400',
   red:    'bg-red-100    dark:bg-red-900/30   text-red-600    dark:text-red-400',
   purple: 'bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400',
   rose:   'bg-rose-100   dark:bg-rose-900/30  text-rose-600   dark:text-rose-400',
-  gray:   'bg-slate-100  dark:bg-slate-800    text-slate-600  dark:text-slate-400',
-}[props.color] ?? 'bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400'))
+  gray:   'bg-surface text-muted-foreground-1',
+}[props.color] ?? 'bg-surface text-muted-foreground-1'))
 </script>
 
 <template>

package/components/Admin/PageHeader.vue

@@ -8,15 +8,15 @@ defineProps<{
 
 <template>
   <div :class="sticky ? 'sticky top-3 z-20' : ''">
-  <div class="flex items-center justify-between bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-2xl shadow-sm px-4 py-3">
+  <div class="flex items-center justify-between bg-card border border-card-line rounded-2xl shadow-sm px-4 py-3">
     <div class="flex items-center gap-x-4">
       <slot name="icon" />
       <div>
         <div class="flex items-baseline gap-x-2">
-          <h1 class="text-lg font-semibold text-slate-800 dark:text-slate-100">{{ title }}</h1>
+          <h1 class="text-lg font-semibold text-foreground">{{ title }}</h1>
           <template v-if="description">
-            <span class="size-1 rounded-full bg-slate-300 dark:bg-slate-600 shrink-0 self-center"></span>
-            <p class="text-sm text-slate-400 dark:text-slate-500">{{ description }}</p>
+            <span class="size-1 rounded-full bg-surface-1 shrink-0 self-center"></span>
+            <p class="text-sm text-muted-foreground">{{ description }}</p>
           </template>
         </div>
         <div v-if="$slots.breadcrumb" class="flex items-center gap-x-1 mt-0.5">

package/components/App/Button.vue

@@ -22,11 +22,11 @@ const iconSizeClasses = computed(() => ({ xs:"size-2", sm:"size-3", md:"size-4",
 
 const severityClasses = computed(() => {
   if (props.variant === "dropdown") {
-    const d = { primary:"text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-900/20", secondary:"text-gray-800 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-300", success:"text-emerald-600 hover:bg-emerald-50 dark:text-emerald-400 dark:hover:bg-emerald-900/20", danger:"text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20", warning:"text-yellow-600 hover:bg-yellow-50 dark:text-yellow-400 dark:hover:bg-yellow-900/20", info:"text-cyan-600 hover:bg-cyan-50 dark:text-cyan-400 dark:hover:bg-cyan-900/20" }
+    const d = { primary:"text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-900/20", secondary:"text-foreground hover:bg-muted-hover", success:"text-emerald-600 hover:bg-emerald-50 dark:text-emerald-400 dark:hover:bg-emerald-900/20", danger:"text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20", warning:"text-yellow-600 hover:bg-yellow-50 dark:text-yellow-400 dark:hover:bg-yellow-900/20", info:"text-cyan-600 hover:bg-cyan-50 dark:text-cyan-400 dark:hover:bg-cyan-900/20" }
     return d[props.severity] || d.secondary
   }
   const base = "rounded-lg border transition-colors"
-  const v = { primary:"border-blue-600 bg-blue-50 text-blue-700 hover:bg-blue-100 dark:border-blue-500 dark:bg-blue-900/20 dark:text-blue-300 dark:hover:bg-blue-900/35", secondary:"border-slate-300 bg-slate-50 text-slate-700 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700", success:"border-emerald-600 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:border-emerald-500 dark:bg-emerald-900/20 dark:text-emerald-300 dark:hover:bg-emerald-900/35", danger:"border-red-600 bg-red-50 text-red-700 hover:bg-red-100 dark:border-red-500 dark:bg-red-900/20 dark:text-red-300 dark:hover:bg-red-900/35", warning:"border-yellow-600 bg-yellow-50 text-yellow-700 hover:bg-yellow-100 dark:border-yellow-500 dark:bg-yellow-900/20 dark:text-yellow-300 dark:hover:bg-yellow-900/35", info:"border-cyan-600 bg-cyan-50 text-cyan-700 hover:bg-cyan-100 dark:border-cyan-500 dark:bg-cyan-900/20 dark:text-cyan-300 dark:hover:bg-cyan-900/35" }
+  const v = { primary:"border-blue-600 bg-blue-50 text-blue-700 hover:bg-blue-100 dark:border-blue-500 dark:bg-blue-900/20 dark:text-blue-300 dark:hover:bg-blue-900/35", secondary:"border-slate-300 bg-slate-50 text-slate-700 hover:bg-muted-hover dark:border-card-line dark:bg-card dark:text-muted-foreground-1 dark:hover:bg-muted-hover", success:"border-emerald-600 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:border-emerald-500 dark:bg-emerald-900/20 dark:text-emerald-300 dark:hover:bg-emerald-900/35", danger:"border-red-600 bg-red-50 text-red-700 hover:bg-red-100 dark:border-red-500 dark:bg-red-900/20 dark:text-red-300 dark:hover:bg-red-900/35", warning:"border-yellow-600 bg-yellow-50 text-yellow-700 hover:bg-yellow-100 dark:border-yellow-500 dark:bg-yellow-900/20 dark:text-yellow-300 dark:hover:bg-yellow-900/35", info:"border-cyan-600 bg-cyan-50 text-cyan-700 hover:bg-cyan-100 dark:border-cyan-500 dark:bg-cyan-900/20 dark:text-cyan-300 dark:hover:bg-cyan-900/35" }
   return `${base} ${v[props.severity] || v.primary}`
 })
 

package/components/App/Dropdown.vue

@@ -91,8 +91,8 @@ const triggerSeverityClasses = computed(() => {
       ? "border-blue-600 text-blue-600 hover:bg-blue-50 dark:border-blue-500 dark:text-blue-500 dark:hover:bg-blue-900/20"
       : "border-transparent bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700",
     secondary: props.triggerOutline
-      ? "border-gray-300 text-gray-700 hover:bg-gray-100 dark:border-gray-400 dark:text-gray-300 dark:hover:bg-gray-700/50"
-      : "border-transparent bg-gray-600 text-white hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-700",
+      ? "border-card-line text-foreground hover:bg-muted-hover"
+      : "border-transparent bg-muted text-foreground hover:bg-muted-hover",
     success: props.triggerOutline
       ? "border-green-600 text-green-600 hover:bg-green-50 dark:border-green-500 dark:text-green-500 dark:hover:bg-green-900/20"
       : "border-transparent bg-green-600 text-white hover:bg-green-700 dark:bg-green-600 dark:hover:bg-green-700",
@@ -164,7 +164,7 @@ const getItemButtonClasses = (item) => {
 
   const severityClasses = {
     default:
-      "text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300",
+      "text-foreground hover:bg-muted-hover",
     primary:
       "text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-900/20",
     success:
@@ -231,7 +231,7 @@ const handleItemClick = (item, event) => {
 
     <!-- Dropdown menu -->
     <div
-      class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-40 bg-white shadow-md rounded-lg p-1 space-y-0.5 mt-2 dark:bg-gray-800 dark:border dark:border-gray-700 dark:divide-gray-700 z-50 border border-gray-200"
+      class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-40 bg-dropdown shadow-md rounded-lg p-1 space-y-0.5 mt-2 dark:border dark:border-dropdown-line dark:divide-card-line z-50 border border-dropdown-line"
       :class="[menuClass, placementClass]"
       role="menu"
       :aria-orientation="'vertical'"
@@ -265,7 +265,7 @@ const handleItemClick = (item, event) => {
           <!-- Link if type is link or has href -->
           <a
             v-else
-            class="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
+            class="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 text-foreground hover:bg-muted-hover"
             :class="item.class"
             :href="item.href || '#'"
             @click="handleItemClick(item, $event)"

package/components/App/EmptyState.vue

@@ -390,10 +390,10 @@ defineProps({
     </slot>
 
     <div class="max-w-sm mx-auto">
-      <p class="mt-2 font-medium text-slate-800 dark:text-slate-200">
+      <p class="mt-2 font-medium text-foreground">
         {{ title }}
       </p>
-      <p class="mb-5 text-sm text-slate-500 dark:text-slate-500 text-wrap">
+      <p class="mb-5 text-sm text-muted-foreground text-wrap">
         {{ description }}
       </p>
     </div>
@@ -401,7 +401,7 @@ defineProps({
     <a
       v-if="showAction"
       :href="actionLink"
-      class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-slate-200 bg-white text-slate-800 shadow-2xs hover:bg-slate-50 focus:outline-hidden focus:bg-slate-50 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-700"
+      class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-card-line bg-card text-foreground shadow-2xs hover:bg-muted-hover focus:outline-hidden focus:bg-muted-hover"
     >
       {{ actionText }}
     </a>

package/components/App/LoadingState.vue

@@ -4,7 +4,7 @@
   >
     <!-- Ícono/loader -->
     <svg
-      class="animate-spin w-10 h-10 text-slate-400 dark:text-slate-600"
+      class="animate-spin w-10 h-10 text-muted-foreground-2"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill="none"
@@ -20,14 +20,14 @@
     <!-- Skeleton líneas -->
     <div class="w-full max-w-xs space-y-3">
       <div
-        class="h-4 bg-slate-200 dark:bg-slate-700 rounded animate-pulse"
+        class="h-4 bg-surface-1 rounded animate-pulse"
       ></div>
       <div
-        class="h-4 bg-slate-200 dark:bg-slate-700 rounded animate-pulse"
+        class="h-4 bg-surface-1 rounded animate-pulse"
       ></div>
       <div
         v-if="showHint"
-        class="h-4 w-1/2 bg-slate-200 dark:bg-slate-700 rounded animate-pulse mx-auto"
+        class="h-4 w-1/2 bg-surface-1 rounded animate-pulse mx-auto"
       ></div>
     </div>
   </div>

package/components/App/SwitchColorTheme.vue

@@ -2,7 +2,7 @@
 <template>
   <button
     type="button"
-    class="hs-dark-mode-active:hidden block hs-dark-mode font-medium text-slate-400 rounded-full hover:bg-slate-200 focus:outline-hidden focus:bg-slate-200 dark:text-slate-200 dark:hover:bg-slate-800 dark:focus:bg-slate-800"
+    class="hs-dark-mode-active:hidden block hs-dark-mode font-medium text-slate-400 rounded-full hover:bg-surface focus:outline-hidden focus:bg-surface dark:text-foreground dark:hover:bg-card dark:focus:bg-card"
     data-hs-theme-click-value="dark"
   >
     <span class="group inline-flex shrink-0 justify-center items-center size-9">
@@ -24,7 +24,7 @@
   </button>
   <button
     type="button"
-    class="hs-dark-mode-active:block hidden hs-dark-mode font-medium text-slate-800 rounded-full hover:bg-slate-200 focus:outline-hidden focus:bg-slate-200 dark:text-slate-200 dark:hover:bg-slate-800 dark:focus:bg-slate-800"
+    class="hs-dark-mode-active:block hidden hs-dark-mode font-medium text-slate-800 rounded-full hover:bg-surface focus:outline-hidden focus:bg-surface dark:text-foreground dark:hover:bg-card dark:focus:bg-card"
     data-hs-theme-click-value="light"
   >
     <span class="group inline-flex shrink-0 justify-center items-center size-9">

package/components/App/Tag.vue

@@ -95,7 +95,7 @@ const severityClasses = computed(() => {
       primary:
         "border border-blue-600 text-blue-600 bg-blue-50 dark:border-blue-500 dark:text-blue-500 dark:bg-blue-900/20",
       secondary:
-        "border border-gray-500 text-gray-700 bg-gray-50 dark:border-gray-400 dark:text-gray-300 dark:bg-gray-800",
+        "border border-card-line text-muted-foreground-1 bg-card",
       success:
         "border border-green-600 text-green-600 bg-green-50 dark:border-green-500 dark:text-green-500 dark:bg-green-900/20",
       danger:

package/components/DataTable.vue

@@ -425,10 +425,10 @@ const handleRowKeydown = (row, event) => {
   <div class="relative">
     <!-- Table view -->
     <div v-if="!isGridView" class="overflow-x-auto relative">
-      <table class="relative min-w-full divide-y divide-gray-200 dark:divide-slate-700">
-        <thead class="relative z-20 bg-white dark:bg-slate-800">
+      <table class="relative min-w-full divide-y divide-card-line">
+        <thead class="relative z-20 bg-card">
           <tr
-            class="divide-x divide-gray-200 dark:border-slate-700 dark:divide-slate-700"
+            class="divide-x divide-card-line"
             :class="{ 'border-t border-gray-200': loading || data.length > 0 }"
           >
             <th v-if="checkable" class="text-center w-12">
@@ -436,7 +436,7 @@ const handleRowKeydown = (row, event) => {
                 type="checkbox"
                 :checked="isAllVisibleSelected"
                 @change="toggleSelectAll"
-                class="mx-2 shrink-0 border-gray-300 rounded-sm text-blue-900 focus:ring-blue-900 dark:bg-slate-800 dark:border-slate-600"
+                class="mx-2 shrink-0 border-gray-300 rounded-sm text-blue-900 focus:ring-blue-900 dark:bg-card border-card-line"
               />
             </th>
             <th
@@ -447,7 +447,7 @@ const handleRowKeydown = (row, event) => {
               @click="toggleSort(col)"
             >
               <div class="hs-dropdown relative inline-flex w-full cursor-pointer">
-                <button class="px-6 py-3 text-start w-full flex items-center gap-x-1 text-[11px] font-bold text-gray-500 dark:text-slate-400 uppercase tracking-wider">
+                <button class="px-6 py-3 text-start w-full flex items-center gap-x-1 text-[11px] font-bold text-muted-foreground uppercase tracking-wider">
                   {{ col.label }}
                   <span v-if="col.sortable">
                     <IconArrowsSort v-if="getSortDirection(col.key) === null" class="size-4" />
@@ -459,16 +459,16 @@ const handleRowKeydown = (row, event) => {
             </th>
           </tr>
         </thead>
-        <tbody ref="tableBodyRef" class="divide-y divide-gray-200 dark:divide-slate-700">
+        <tbody ref="tableBodyRef" class="divide-y divide-card-line">
           <!-- Loading skeleton -->
           <tr
             v-if="loading"
             v-for="(_, index) in skeletonRows"
             :key="'skeleton-' + index"
-            class="animate-pulse divide-x divide-gray-200 dark:divide-slate-700 bg-white dark:bg-slate-800"
+            class="animate-pulse divide-x divide-card-line bg-card"
           >
             <td v-if="checkable" class="text-center w-12" :style="{ height: lastRowHeight + 'px' }">
-              <div class="w-4 h-4 bg-gray-300 dark:bg-slate-600 rounded mx-auto"></div>
+              <div class="w-4 h-4 bg-surface-1 rounded mx-auto"></div>
             </td>
             <td
               v-for="col in columns"
@@ -477,7 +477,7 @@ const handleRowKeydown = (row, event) => {
               :class="col.class || ''"
               :style="{ height: lastRowHeight + 'px' }"
             >
-              <div class="h-4 w-[50%] rounded bg-gray-200 dark:bg-slate-600"></div>
+              <div class="h-4 w-[50%] rounded bg-surface-1"></div>
             </td>
           </tr>
 
@@ -486,10 +486,10 @@ const handleRowKeydown = (row, event) => {
             v-if="!loading && data.length === 0"
             v-for="(_, index) in skeletonRows"
             :key="'empty-skeleton-' + index"
-            class="divide-x divide-gray-200 dark:divide-slate-700 bg-white dark:bg-slate-800"
+            class="divide-x divide-card-line bg-card"
           >
             <td v-if="checkable" class="text-center w-12" :style="{ height: lastRowHeight + 'px' }">
-              <div class="w-4 h-4 bg-gray-200 dark:bg-slate-600 rounded mx-auto"></div>
+              <div class="w-4 h-4 bg-surface-1 rounded mx-auto"></div>
             </td>
             <td
               v-for="col in columns"
@@ -498,7 +498,7 @@ const handleRowKeydown = (row, event) => {
               :class="col.class || ''"
               :style="{ height: lastRowHeight + 'px' }"
             >
-              <div class="h-4 w-[50%] rounded bg-gray-100 dark:bg-slate-700"></div>
+              <div class="h-4 w-[50%] rounded bg-surface"></div>
             </td>
           </tr>
 
@@ -510,7 +510,7 @@ const handleRowKeydown = (row, event) => {
             @click="(event) => handleRowClick(row, event)"
             @keydown="(event) => handleRowKeydown(row, event)"
             :tabindex="isRowClickEnabled ? 0 : undefined"
-            class="divide-x divide-gray-200 dark:divide-slate-700 bg-white hover:bg-gray-50 dark:bg-slate-800 dark:hover:bg-slate-900"
+            class="divide-x divide-card-line bg-card hover:bg-muted"
             :class="{ 'cursor-pointer': isRowClickEnabled }"
           >
             <td v-if="checkable" class="text-center w-12" @click.stop>
@@ -518,13 +518,13 @@ const handleRowKeydown = (row, event) => {
                 type="checkbox"
                 :checked="isRowSelected(row)"
                 @change="() => toggleRow(row)"
-                class="rounded border-gray-300 dark:bg-slate-800 dark:border-slate-600"
+                class="rounded border-card-line dark:bg-card"
               />
             </td>
             <td
               v-for="col in columns"
               :key="col.key"
-              class="px-6 py-3 relative group text-sm text-slate-600 dark:text-slate-300"
+              class="px-6 py-3 relative group text-sm text-muted-foreground-1"
               :class="col.class || ''"
             >
               <slot :name="col.key" :row="row" :value="row[col.key]">
@@ -538,19 +538,19 @@ const handleRowKeydown = (row, event) => {
       <!-- Empty overlays -->
       <div
         v-if="!loading && data.length === 0 && !search"
-        class="absolute inset-0 z-10 pointer-events-none flex items-center justify-center backdrop-blur-sm bg-white/60 dark:bg-slate-800/60 transition-all rounded-xl"
+        class="absolute inset-0 z-10 pointer-events-none flex items-center justify-center backdrop-blur-sm bg-card/60 transition-all 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>
 
       <div
         v-if="!loading && data.length === 0 && search"
-        class="absolute inset-0 z-10 pointer-events-none flex items-center justify-center backdrop-blur-sm bg-white/60 dark:bg-slate-800/60 transition-all rounded-xl"
+        class="absolute inset-0 z-10 pointer-events-none flex items-center justify-center backdrop-blur-sm bg-card/60 transition-all 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>
@@ -561,11 +561,11 @@ const handleRowKeydown = (row, event) => {
       <div v-if="loading" :class="gridClass">
         <div v-for="(_, index) in skeletonRows" :key="'grid-skeleton-' + index" class="animate-pulse">
           <slot name="grid-skeleton">
-            <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-4">
+            <div class="bg-card rounded-lg border border-card-line p-4">
               <div class="space-y-3">
-                <div class="h-4 bg-gray-200 dark:bg-slate-600 rounded w-3/4"></div>
-                <div class="h-4 bg-gray-200 dark:bg-slate-600 rounded w-1/2"></div>
-                <div class="h-6 bg-gray-200 dark:bg-slate-600 rounded w-1/4"></div>
+                <div class="h-4 bg-surface-1 rounded w-3/4"></div>
+                <div class="h-4 bg-surface-1 rounded w-1/2"></div>
+                <div class="h-6 bg-surface-1 rounded w-1/4"></div>
               </div>
             </div>
           </slot>
@@ -583,19 +583,19 @@ const handleRowKeydown = (row, event) => {
           :checkable="checkable"
           :toggleRow="() => toggleRow(row)"
         >
-          <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 p-4 hover:shadow-md transition-shadow relative">
+          <div class="bg-card rounded-lg border border-card-line p-4 hover:shadow-md transition-shadow relative">
             <div v-if="checkable" class="absolute top-2 left-2 z-10">
               <input
                 type="checkbox"
                 :checked="isRowSelected(row)"
                 @change="() => toggleRow(row)"
-                class="rounded border-gray-300 dark:bg-slate-800 dark:border-slate-600"
+                class="rounded border-card-line dark:bg-card"
               />
             </div>
             <div class="space-y-2" :class="{ 'pt-6': checkable }">
               <div v-for="col in columns" :key="col.key" class="flex justify-between">
-                <span class="text-sm text-gray-500 dark:text-slate-400">{{ col.label }}:</span>
-                <span class="text-sm text-gray-900 dark:text-slate-100">
+                <span class="text-sm text-muted-foreground">{{ col.label }}:</span>
+                <span class="text-sm text-foreground">
                   <slot :name="col.key" :row="row" :value="row[col.key]">{{ row[col.key] }}</slot>
                 </span>
               </div>
@@ -607,10 +607,10 @@ const handleRowKeydown = (row, event) => {
       <!-- Grid empty state -->
       <div v-else class="flex items-center justify-center py-12">
         <slot v-if="!search" name="empty">
-          <p class="text-gray-500 dark:text-slate-400 text-lg">No hay registros</p>
+          <p class="text-muted-foreground text-lg">No hay registros</p>
         </slot>
         <slot v-else name="empty-search">
-          <p class="text-gray-500 dark:text-slate-400 text-lg">No hay registros en la búsqueda</p>
+          <p class="text-muted-foreground text-lg">No hay registros en la búsqueda</p>
         </slot>
       </div>
     </div>
@@ -622,18 +622,18 @@ const handleRowKeydown = (row, event) => {
         <div v-if="showReloadButton" class="flex items-center justify-start gap-x-2">
           <IconReload
             v-if="!loading"
-            class="size-4 cursor-pointer text-gray-500 dark:text-slate-400 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="() => { clearCache(); isDataFromCache.value = false; fetchData(); }"
           />
           <div v-if="loading">
-            <svg class="animate-spin size-4 text-slate-400 dark:text-slate-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <svg class="animate-spin size-4 text-muted-foreground-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <circle cx="12" cy="12" r="10" opacity=".25" />
               <path d="M22 12a10 10 0 0 1-10 10" />
             </svg>
           </div>
         </div>
 
-        <p class="text-sm text-gray-800 dark:text-slate-200 font-medium">{{ meta.total }} registros</p>
+        <p class="text-sm text-foreground font-medium">{{ meta.total }} registros</p>
 
         <div v-if="isDataFromCache && cached" class="group relative flex items-center">
           <div class="flex items-center gap-x-1.5 py-1 px-2.5 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 rounded-lg cursor-help transition-colors hover:bg-emerald-500/20">
@@ -654,12 +654,12 @@ const handleRowKeydown = (row, event) => {
       <!-- Right: per-page & pagination -->
       <div class="flex items-center gap-x-8">
         <div class="flex items-center gap-x-2">
-          <label class="text-[10px] font-bold text-gray-400 dark:text-slate-500 uppercase tracking-widest">Filas:</label>
+          <label class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">Filas:</label>
           <select
             v-if="!isCustomPerPage"
             :value="perPage"
             @change="(e) => handlePerPageChange(e.target.value)"
-            class="bg-slate-100 dark:bg-slate-800 border-none text-[11px] font-bold text-slate-600 dark:text-slate-300 rounded-lg focus:ring-0 cursor-pointer py-1 pl-2 pr-8"
+            class="bg-surface border-none text-[11px] font-bold text-muted-foreground-1 rounded-lg focus:ring-0 cursor-pointer py-1 pl-2 pr-8"
           >
             <option :value="10">10</option>
             <option :value="25">25</option>
@@ -673,7 +673,7 @@ const handleRowKeydown = (row, event) => {
               v-model.number="perPage"
               min="1"
               max="500"
-              class="w-14 bg-slate-100 dark:bg-slate-800 border-none text-[11px] font-bold text-slate-600 dark:text-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500/20 py-1 px-2"
+              class="w-14 bg-surface border-none text-[11px] font-bold text-muted-foreground-1 rounded-lg focus:ring-2 focus:ring-indigo-500/20 py-1 px-2"
               @blur="perPage = perPage || 10"
             />
             <button @click="resetPerPage" class="text-[10px] text-indigo-500 font-bold hover:underline">Volver</button>
@@ -683,7 +683,7 @@ const handleRowKeydown = (row, event) => {
         <nav class="flex justify-end items-center gap-x-1" aria-label="Pagination">
           <button
             type="button"
-            class="size-8 flex items-center justify-center rounded-lg text-gray-800 hover:bg-gray-100 dark:text-white dark:hover:bg-white/10 disabled:opacity-30"
+            class="size-8 flex items-center justify-center rounded-lg text-foreground hover:bg-muted-hover disabled:opacity-30"
             :disabled="page <= 1"
             @click="goToPreviousPage"
           >
@@ -692,13 +692,13 @@ const handleRowKeydown = (row, event) => {
             </svg>
           </button>
           <div class="flex items-center gap-x-1 mx-2">
-            <span class="size-8 flex items-center justify-center text-xs font-bold rounded-lg bg-gray-100 dark:bg-slate-700 text-gray-800 dark:text-white">{{ meta.current_page }}</span>
-            <span class="text-[10px] font-bold text-gray-400 dark:text-slate-500 uppercase mx-1">de</span>
-            <span class="text-[10px] font-bold text-gray-400 dark:text-slate-500">{{ meta.last_page }}</span>
+            <span class="size-8 flex items-center justify-center text-xs font-bold rounded-lg bg-surface text-foreground">{{ meta.current_page }}</span>
+            <span class="text-[10px] font-bold text-muted-foreground uppercase mx-1">de</span>
+            <span class="text-[10px] font-bold text-muted-foreground">{{ meta.last_page }}</span>
           </div>
           <button
             type="button"
-            class="size-8 flex items-center justify-center rounded-lg text-gray-800 hover:bg-gray-100 dark:text-white dark:hover:bg-white/10 disabled:opacity-30"
+            class="size-8 flex items-center justify-center rounded-lg text-foreground hover:bg-muted-hover disabled:opacity-30"
             :disabled="page >= meta.last_page"
             @click="goToNextPage"
           >

package/components/Forms/DatePicker.vue

@@ -190,7 +190,7 @@ const clear = () => {
         :value="internalValue"
         :disabled="disabled"
         :placeholder="placeholder"
-        class="w-full py-2 ps-10 pe-10 border border-gray-300 rounded-lg text-sm dark:bg-slate-800 dark:border-slate-600 dark:text-white disabled:opacity-50 disabled:pointer-events-none cursor-pointer focus:border-blue-500 focus:ring-blue-500/20 outline-none transition-all block"
+        class="w-full py-2 ps-10 pe-10 border border-gray-300 rounded-lg text-sm dark:bg-card dark:border-card-line dark:text-white disabled:opacity-50 disabled:pointer-events-none cursor-pointer focus:border-blue-500 focus:ring-blue-500/20 outline-none transition-all block"
         readonly
       />
 

package/components/Forms/Input.vue

@@ -22,18 +22,18 @@ const inputType = computed(() => {
   return props.type ?? 'text'
 })
 
-const baseClasses = 'py-2 px-3 block w-full rounded-lg text-sm text-slate-800 border border-gray-200 dark:border-slate-700 focus:ring-0 focus:border-gray-400 focus:outline-none disabled:opacity-50 dark:bg-transparent dark:text-slate-300 transition-colors placeholder:text-slate-400 dark:placeholder:text-slate-500'
+const baseClasses = 'py-2 px-3 block w-full rounded-lg text-sm text-slate-800 border border-card-line focus:ring-0 focus:border-gray-400 focus:outline-none disabled:opacity-50 dark:bg-transparent dark:text-muted-foreground-1 transition-colors placeholder:text-muted-foreground dark:placeholder:text-muted-foreground'
 </script>
 
 <template>
   <div class="w-full">
-    <label v-if="label" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">
+    <label v-if="label" class="block text-sm font-medium text-foreground mb-1.5">
       {{ label }}
     </label>
 
     <div class="relative">
       <!-- Ícono izquierdo -->
-      <div v-if="iconLeft" class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none text-slate-400">
+      <div v-if="iconLeft" class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none text-muted-foreground">
         <component :is="iconLeft" class="size-4" />
       </div>
 
@@ -56,7 +56,7 @@ const baseClasses = 'py-2 px-3 block w-full rounded-lg text-sm text-slate-800 bo
         v-if="type === 'password'"
         type="button"
         tabindex="-1"
-        class="absolute inset-y-0 end-0 flex items-center px-3 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors"
+        class="absolute inset-y-0 end-0 flex items-center px-3 text-muted-foreground hover:text-muted-foreground-1 transition-colors"
         @click="showPassword = !showPassword"
       >
         <component :is="showPassword ? IconEyeOff : IconEye" class="size-4" />
@@ -67,6 +67,6 @@ const baseClasses = 'py-2 px-3 block w-full rounded-lg text-sm text-slate-800 bo
     <p v-if="error" class="text-xs text-red-500 dark:text-red-400 mt-1">{{ error }}</p>
 
     <!-- Hint -->
-    <p v-else-if="hint" class="text-xs text-slate-400 mt-1">{{ hint }}</p>
+    <p v-else-if="hint" class="text-xs text-muted-foreground mt-1">{{ hint }}</p>
   </div>
 </template>

package/components/Forms/Select.vue

@@ -46,14 +46,14 @@ const handleChange = (e: Event) => {
 <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>
 
     <!-- Select (HSSelect) -->
     <ClientOnly>
       <template #fallback>
-        <div class="h-[38px] bg-slate-100 dark:bg-slate-800 animate-pulse rounded-lg" />
+        <div class="h-[38px] bg-surface animate-pulse rounded-lg" />
       </template>
 
       <div :class="['relative', error ? 'select-error' : '']">
@@ -66,9 +66,9 @@ const handleChange = (e: Event) => {
           data-hs-select='{
             "placeholder": "Seleccionar...",
             "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
-            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 ps-4 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-white border border-slate-200 rounded-lg text-start text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-300 dark:focus:outline-hidden dark:focus:ring-1 dark:focus:ring-blue-600",
-            "dropdownClasses": "mt-1 z-50 w-full max-h-72 p-1 space-y-0.5 bg-white border border-slate-200 rounded-lg overflow-hidden overflow-y-auto shadow-lg dark:bg-slate-800 dark:border-slate-700",
-            "optionClasses": "py-2 px-4 w-full text-sm text-slate-800 cursor-pointer hover:bg-slate-100 rounded-lg focus:outline-hidden focus:bg-slate-100 dark:bg-slate-800 dark:hover:bg-slate-700 dark:text-slate-200 dark:focus:bg-slate-700",
+            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 ps-4 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-card border border-card-line rounded-lg text-start text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:text-muted-foreground-1 dark:focus:outline-hidden dark:focus:ring-1 dark:focus:ring-blue-600",
+            "dropdownClasses": "mt-1 z-50 w-full max-h-72 p-1 space-y-0.5 bg-dropdown border border-dropdown-line rounded-lg overflow-hidden overflow-y-auto shadow-lg",
+            "optionClasses": "py-2 px-4 w-full text-sm text-foreground cursor-pointer hover:bg-muted-hover rounded-lg focus:outline-hidden focus:bg-muted-hover dark:bg-card",
             "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-blue-600 dark:text-blue-500\" 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\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>"
           }'
         >
@@ -88,7 +88,7 @@ const handleChange = (e: Event) => {
     <p v-if="error" class="text-xs text-red-500 dark:text-red-400">{{ error }}</p>
 
     <!-- Hint -->
-    <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>