@innertia-solutions/nuxt-theme-spark 0.1.105 → 0.1.107

package/components/Admin/Base.vue

@@ -19,7 +19,7 @@ const userInitial = computed(() =>
 </script>
 
 <template>
-  <div class="bg-slate-50 dark:bg-slate-950 min-h-screen">
+  <div class="bg-background-1 min-h-screen">
 
     <!-- Mobile backdrop -->
     <Transition
@@ -44,8 +44,8 @@ const userInitial = computed(() =>
         :class="[
           'flex flex-col h-full',
           floating
-            ? 'bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden'
-            : 'bg-white dark:bg-slate-800 border-e border-slate-200 dark:border-slate-700',
+            ? 'bg-sidebar rounded-2xl border border-sidebar-line shadow-sm overflow-hidden'
+            : 'bg-sidebar border-e border-sidebar-line',
         ]"
       >
         <!-- Logo + mobile close -->
@@ -55,7 +55,7 @@ const userInitial = computed(() =>
           </div>
           <button
             type="button"
-            class="lg:hidden size-7 inline-flex justify-center items-center rounded-lg text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors"
+            class="lg:hidden size-7 inline-flex justify-center items-center rounded-lg text-muted-foreground hover:bg-muted-hover transition-colors"
             @click="close"
           >
             <svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@@ -73,7 +73,7 @@ const userInitial = computed(() =>
         <div
           :class="[
             'flex-1 min-h-0 overflow-y-auto',
-            '[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-slate-200 dark:[&::-webkit-scrollbar-thumb]:bg-slate-600',
+            '[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
             menuSize ?? 'text-sm',
           ]"
         >
@@ -81,20 +81,25 @@ const userInitial = computed(() =>
         </div>
 
         <!-- User footer -->
-        <div class="shrink-0 border-t border-slate-100 dark:border-slate-700/60 px-3 py-3 space-y-2">
+        <div class="shrink-0 border-t border-sidebar-line px-3 py-3 space-y-2">
+
+          <!-- Controls slot (dark mode, notifications, etc.) -->
+          <div v-if="$slots['user-controls']" class="flex items-center gap-x-1.5">
+            <slot name="user-controls" />
+          </div>
 
           <!-- User info + logout -->
           <div v-if="user" class="flex items-center gap-x-2.5 px-1">
-            <div class="size-8 rounded-lg bg-blue-600 flex items-center justify-center text-white text-xs font-bold shrink-0 select-none">
+            <div class="size-8 rounded-lg bg-primary flex items-center justify-center text-primary-foreground text-xs font-bold shrink-0 select-none">
               {{ userInitial }}
             </div>
             <div class="flex-1 min-w-0">
-              <p class="text-xs font-semibold text-slate-700 dark:text-slate-200 truncate">{{ user.name ?? user.email }}</p>
-              <p v-if="user.name && user.email" class="text-[10px] text-slate-400 dark:text-slate-500 truncate">{{ user.email }}</p>
+              <p class="text-xs font-semibold text-foreground truncate">{{ user.name ?? user.email }}</p>
+              <p v-if="user.name && user.email" class="text-[10px] text-muted-foreground truncate">{{ user.email }}</p>
             </div>
             <button
               type="button"
-              class="size-7 inline-flex items-center justify-center rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors shrink-0"
+              class="size-7 inline-flex items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors shrink-0"
               title="Cerrar sesión"
               @click="emit('logout')"
             >
@@ -104,11 +109,6 @@ const userInitial = computed(() =>
             </button>
           </div>
 
-          <!-- Controls slot (dark mode, notifications, etc.) -->
-          <div v-if="$slots['user-controls']" class="flex items-center gap-x-1.5">
-            <slot name="user-controls" />
-          </div>
-
           <!-- Env / extra slot -->
           <slot name="user-footer" />
         </div>

package/components/Admin/Page.vue

@@ -28,17 +28,17 @@ const iconColorClass = computed(() => ({
   <div class="space-y-4">
 
     <!-- Page header card -->
-    <div v-if="title" 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 v-if="title" 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 min-w-0">
         <div v-if="iconComponent" class="shrink-0 size-10 rounded-xl flex items-center justify-center border border-current/15" :class="iconColorClass">
           <component :is="iconComponent" class="size-5" stroke="1.5" />
         </div>
         <div class="min-w-0">
           <div class="flex items-baseline gap-x-2 flex-wrap">
-            <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 hidden sm:block" />
-              <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 hidden sm:block" />
+              <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">
@@ -51,7 +51,7 @@ const iconColorClass = computed(() => ({
       </div>
     </div>
 
-    <!-- Tabs (receives color prop) -->
+    <!-- Tabs -->
     <div v-if="$slots.tabs">
       <slot name="tabs" :color="color" />
     </div>

package/components/Nav/Tabs.vue

@@ -28,7 +28,7 @@ const colorTextClass = computed(() => ({
 }[props.color] ?? 'text-blue-600 dark:text-blue-400'))
 
 const resolvedActiveClass = computed(() =>
-  props.activeClass ?? `bg-white dark:bg-slate-800 shadow-sm ${colorTextClass.value}`
+  props.activeClass ?? `bg-card shadow-sm ${colorTextClass.value}`
 )
 
 const route = useRoute()
@@ -38,7 +38,7 @@ const isActive = (tab: Tab) =>
 </script>
 
 <template>
-  <div class="flex items-center gap-x-1 p-1 bg-slate-100 dark:bg-slate-900/50 rounded-xl w-fit border border-slate-200 dark:border-slate-700">
+  <div class="flex items-center gap-x-1 p-1 bg-surface border border-card-line rounded-xl w-fit">
     <NuxtLink
       v-for="tab in tabs"
       :key="tab.to"
@@ -46,7 +46,7 @@ const isActive = (tab: Tab) =>
       class="flex items-center gap-x-2 px-4 py-2 text-xs font-bold rounded-lg transition-all"
       :class="isActive(tab)
         ? resolvedActiveClass
-        : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200'"
+        : 'text-muted-foreground hover:text-foreground'"
     >
       <component :is="tab.icon" v-if="tab.icon" class="size-4" />
       {{ tab.label }}

package/components/Table/Standard.vue

@@ -203,10 +203,10 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
   <div class="relative" ref="containerRef">
 
     <!-- Card único -->
-    <div class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-2xl shadow-sm overflow-hidden">
+    <div class="bg-card border border-card-line rounded-2xl shadow-sm overflow-hidden">
 
       <!-- Toolbar -->
-      <div class="flex flex-wrap items-center gap-3 px-4 py-3 border-b border-slate-200 dark:border-slate-700">
+      <div class="flex flex-wrap items-center gap-3 px-4 py-3 border-b border-card-line">
         <div v-if="showSearch" class="flex-1 min-w-48">
           <Forms.Input v-model="search" type="search" :placeholder="searchPlaceholder" :icon-left="IconSearch" />
         </div>
@@ -219,7 +219,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
               'py-1.5 px-3 inline-flex items-center gap-2 text-sm font-medium rounded-lg border transition-colors',
               showFilterPanel || activeFilterCount > 0
                 ? 'border-blue-500 bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:border-blue-500 dark:text-blue-300'
-                : 'border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700'
+                : 'border-card-line bg-card text-muted-foreground-1 hover:bg-muted-hover'
             ]"
           >
             <IconAdjustmentsHorizontal class="size-4" stroke="1.5" />
@@ -238,9 +238,9 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
             <div
               v-if="showFilterPanel"
               ref="filterPanelRef"
-              class="absolute top-full left-0 z-50 mt-1.5 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-2xl p-3 min-w-56 max-h-96 overflow-y-auto"
+              class="absolute top-full left-0 z-50 mt-1.5 bg-dropdown border border-dropdown-line rounded-xl shadow-2xl p-3 min-w-56 max-h-96 overflow-y-auto"
             >
-              <p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-3 px-1">Filtros</p>
+              <p class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest mb-3 px-1">Filtros</p>
               <TableFilter v-model="activeFilters" :columns="filtersConfig" />
             </div>
           </Transition>
@@ -255,7 +255,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
             'py-1.5 px-3 inline-flex items-center gap-2 text-sm font-medium rounded-lg border transition-colors',
             showColumnPanel
               ? 'border-blue-500 bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:border-blue-500 dark:text-blue-300'
-              : 'border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700'
+              : 'border-card-line bg-card text-muted-foreground-1 hover:bg-muted-hover'
           ]"
         >
           <IconLayoutColumns class="size-4" />
@@ -303,12 +303,12 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
         >
           <div
             v-if="previewRow && previewEnabled"
-            class="absolute top-0 right-0 z-30 flex bg-white dark:bg-slate-800 border-l border-slate-200 dark:border-slate-700 shadow-[-4px_0_16px_rgba(0,0,0,0.06)]"
+            class="absolute top-0 right-0 z-30 flex bg-card border-l border-card-line shadow-[-4px_0_16px_rgba(0,0,0,0.06)]"
             :style="{ width: (100 - currentRatio) + '%', bottom: paginationHeight + 'px' }"
           >
             <!-- Resize handle -->
             <div
-              class="w-1 shrink-0 cursor-col-resize bg-slate-100 dark:bg-slate-700/60 hover:bg-indigo-300 dark:hover:bg-indigo-600 transition-colors"
+              class="w-1 shrink-0 cursor-col-resize bg-surface hover:bg-indigo-300 dark:hover:bg-indigo-600 transition-colors"
               @mousedown="startResize"
             />
             <!-- Preview -->
@@ -333,9 +333,9 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
       <div
         v-if="showColumnPanel"
         ref="columnPanelRef"
-        class="absolute top-12 right-0 z-50 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-2xl p-3 min-w-56 max-h-80 overflow-y-auto"
+        class="absolute top-12 right-0 z-50 bg-dropdown border border-dropdown-line rounded-xl shadow-2xl p-3 min-w-56 max-h-80 overflow-y-auto"
       >
-        <p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2 px-1">
+        <p class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest mb-2 px-1">
           Columnas visibles
         </p>
         <div
@@ -349,17 +349,17 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
           class="flex items-center gap-2 py-1.5 px-2 rounded-lg select-none transition-colors"
           :class="dragOverKey === col.key
             ? 'bg-blue-50 dark:bg-blue-900/20 ring-1 ring-blue-300 dark:ring-blue-700'
-            : 'hover:bg-slate-50 dark:hover:bg-slate-700 cursor-grab'"
+            : 'hover:bg-muted-hover cursor-grab'"
         >
-          <IconGripVertical class="size-4 text-slate-300 dark:text-slate-600 shrink-0" />
+          <IconGripVertical class="size-4 text-muted-foreground-2 shrink-0" />
           <input
             type="checkbox"
             :checked="tableRef?.table.getColumn(col.key)?.getIsVisible() ?? true"
             @change="tableRef?.table.getColumn(col.key)?.toggleVisibility()"
             @click.stop
-            class="rounded border-gray-300 dark:bg-slate-700 dark:border-slate-600 shrink-0 cursor-pointer"
+            class="rounded border-card-line bg-surface shrink-0 cursor-pointer"
           />
-          <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>
         </div>
       </div>
     </Transition>

package/nuxt.config.ts

@@ -12,4 +12,9 @@ export default defineNuxtConfig({
   vite: {
     plugins: [tailwindcss()],
   },
+  appConfig: {
+    spark: {
+      theme: 'default',
+    },
+  },
 })

package/package.json

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

package/plugins/theme.client.ts

@@ -0,0 +1,7 @@
+export default defineNuxtPlugin(() => {
+  const appConfig = useAppConfig() as { spark?: { theme?: string } }
+  const theme = appConfig.spark?.theme
+  if (theme && theme !== 'default') {
+    document.documentElement.setAttribute('data-theme', `theme-${theme}`)
+  }
+})

package/spark.css

@@ -1,5 +1,13 @@
 @import "tailwindcss";
 @import "preline/variants.css";
+@import "preline/css/themes/harvest.css";
+@import "preline/css/themes/retro.css";
+@import "preline/css/themes/ocean.css";
+@import "preline/css/themes/autumn.css";
+@import "preline/css/themes/moon.css";
+@import "preline/css/themes/bubblegum.css";
+@import "preline/css/themes/olive.css";
+@import "preline/css/themes/cashmere.css";
 @plugin "@tailwindcss/forms";
 @plugin "@tailwindcss/aspect-ratio";