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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/components/Admin/Base.vue +10 -10
  2. package/components/Admin/Page.vue +8 -8
  3. package/components/Nav/Tabs.vue +3 -3
  4. package/components/Table/Standard.vue +14 -14
  5. package/nuxt.config.ts +5 -0
  6. package/package.json +1 -1
  7. package/plugins/theme.client.ts +7 -0
  8. package/spark.css +8 -0
package/components/Admin/Base.vue CHANGED
@@ -19,7 +19,7 @@ const userInitial = computed(() =>
19
19
  </script>
20
20
 
21
21
  <template>
22
- <div class="bg-slate-50 dark:bg-slate-950 min-h-screen">
22
+ <div class="bg-background-1 min-h-screen">
23
23
 
24
24
  <!-- Mobile backdrop -->
25
25
  <Transition
@@ -44,8 +44,8 @@ const userInitial = computed(() =>
44
44
  :class="[
45
45
  'flex flex-col h-full',
46
46
  floating
47
- ? 'bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden'
48
- : 'bg-white dark:bg-slate-900 border-e border-slate-200 dark:border-slate-800',
47
+ ? 'bg-sidebar rounded-2xl border border-sidebar-line shadow-sm overflow-hidden'
48
+ : 'bg-sidebar border-e border-sidebar-line',
49
49
  ]"
50
50
  >
51
51
  <!-- Logo + mobile close -->
@@ -55,7 +55,7 @@ const userInitial = computed(() =>
55
55
  </div>
56
56
  <button
57
57
  type="button"
58
- class="lg:hidden size-7 inline-flex justify-center items-center rounded-lg text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
58
+ class="lg:hidden size-7 inline-flex justify-center items-center rounded-lg text-muted-foreground hover:bg-muted-hover transition-colors"
59
59
  @click="close"
60
60
  >
61
61
  <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(() =>
73
73
  <div
74
74
  :class="[
75
75
  'flex-1 min-h-0 overflow-y-auto',
76
- '[&::-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',
76
+ '[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
77
77
  menuSize ?? 'text-sm',
78
78
  ]"
79
79
  >
@@ -81,7 +81,7 @@ const userInitial = computed(() =>
81
81
  </div>
82
82
 
83
83
  <!-- User footer -->
84
- <div class="shrink-0 border-t border-slate-100 dark:border-slate-800/60 px-3 py-3 space-y-2">
84
+ <div class="shrink-0 border-t border-sidebar-line px-3 py-3 space-y-2">
85
85
 
86
86
  <!-- Controls slot (dark mode, notifications, etc.) -->
87
87
  <div v-if="$slots['user-controls']" class="flex items-center gap-x-1.5">
@@ -90,16 +90,16 @@ const userInitial = computed(() =>
90
90
 
91
91
  <!-- User info + logout -->
92
92
  <div v-if="user" class="flex items-center gap-x-2.5 px-1">
93
- <div class="size-8 rounded-lg bg-blue-600 flex items-center justify-center text-white text-xs font-bold shrink-0 select-none">
93
+ <div class="size-8 rounded-lg bg-primary flex items-center justify-center text-primary-foreground text-xs font-bold shrink-0 select-none">
94
94
  {{ userInitial }}
95
95
  </div>
96
96
  <div class="flex-1 min-w-0">
97
- <p class="text-xs font-semibold text-slate-700 dark:text-slate-200 truncate">{{ user.name ?? user.email }}</p>
98
- <p v-if="user.name && user.email" class="text-[10px] text-slate-400 dark:text-slate-500 truncate">{{ user.email }}</p>
97
+ <p class="text-xs font-semibold text-foreground truncate">{{ user.name ?? user.email }}</p>
98
+ <p v-if="user.name && user.email" class="text-[10px] text-muted-foreground truncate">{{ user.email }}</p>
99
99
  </div>
100
100
  <button
101
101
  type="button"
102
- 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-800 transition-colors shrink-0"
102
+ 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"
103
103
  title="Cerrar sesión"
104
104
  @click="emit('logout')"
105
105
  >
package/components/Admin/Page.vue CHANGED
@@ -13,32 +13,32 @@ const slots = useSlots()
13
13
  const iconComponent = computed(() => props.icon ? TablerIcons[props.icon] ?? null : null)
14
14
 
15
15
  const iconColorClass = computed(() => ({
16
- slate: 'bg-slate-100 dark:bg-slate-900 text-slate-600 dark:text-slate-400',
16
+ slate: 'bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400',
17
17
  blue: 'bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400',
18
18
  green: 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400',
19
19
  amber: 'bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400',
20
20
  red: 'bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400',
21
21
  purple: 'bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400',
22
22
  rose: 'bg-rose-100 dark:bg-rose-900/30 text-rose-600 dark:text-rose-400',
23
- gray: 'bg-slate-100 dark:bg-slate-900 text-slate-600 dark:text-slate-400',
24
- }[props.color] ?? 'bg-slate-100 dark:bg-slate-900 text-slate-600 dark:text-slate-400'))
23
+ gray: 'bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400',
24
+ }[props.color] ?? 'bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400'))
25
25
  </script>
26
26
 
27
27
  <template>
28
28
  <div class="space-y-4">
29
29
 
30
30
  <!-- Page header card -->
31
- <div v-if="title" class="flex items-center justify-between bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl shadow-sm px-4 py-3">
31
+ <div v-if="title" class="flex items-center justify-between bg-card border border-card-line rounded-2xl shadow-sm px-4 py-3">
32
32
  <div class="flex items-center gap-x-4 min-w-0">
33
33
  <div v-if="iconComponent" class="shrink-0 size-10 rounded-xl flex items-center justify-center border border-current/15" :class="iconColorClass">
34
34
  <component :is="iconComponent" class="size-5" stroke="1.5" />
35
35
  </div>
36
36
  <div class="min-w-0">
37
37
  <div class="flex items-baseline gap-x-2 flex-wrap">
38
- <h1 class="text-lg font-semibold text-slate-800 dark:text-slate-100">{{ title }}</h1>
38
+ <h1 class="text-lg font-semibold text-foreground">{{ title }}</h1>
39
39
  <template v-if="description">
40
- <span class="size-1 rounded-full bg-slate-300 dark:bg-slate-600 shrink-0 self-center hidden sm:block" />
41
- <p class="text-sm text-slate-400 dark:text-slate-500">{{ description }}</p>
40
+ <span class="size-1 rounded-full bg-surface-1 shrink-0 self-center hidden sm:block" />
41
+ <p class="text-sm text-muted-foreground">{{ description }}</p>
42
42
  </template>
43
43
  </div>
44
44
  <div v-if="$slots.breadcrumb" class="flex items-center gap-x-1 mt-0.5">
@@ -51,7 +51,7 @@ const iconColorClass = computed(() => ({
51
51
  </div>
52
52
  </div>
53
53
 
54
- <!-- Tabs (receives color prop) -->
54
+ <!-- Tabs -->
55
55
  <div v-if="$slots.tabs">
56
56
  <slot name="tabs" :color="color" />
57
57
  </div>
package/components/Nav/Tabs.vue CHANGED
@@ -28,7 +28,7 @@ const colorTextClass = computed(() => ({
28
28
  }[props.color] ?? 'text-blue-600 dark:text-blue-400'))
29
29
 
30
30
  const resolvedActiveClass = computed(() =>
31
- props.activeClass ?? `bg-white dark:bg-slate-900 shadow-sm ${colorTextClass.value}`
31
+ props.activeClass ?? `bg-card shadow-sm ${colorTextClass.value}`
32
32
  )
33
33
 
34
34
  const route = useRoute()
@@ -38,7 +38,7 @@ const isActive = (tab: Tab) =>
38
38
  </script>
39
39
 
40
40
  <template>
41
- <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-800">
41
+ <div class="flex items-center gap-x-1 p-1 bg-surface border border-card-line rounded-xl w-fit">
42
42
  <NuxtLink
43
43
  v-for="tab in tabs"
44
44
  :key="tab.to"
@@ -46,7 +46,7 @@ const isActive = (tab: Tab) =>
46
46
  class="flex items-center gap-x-2 px-4 py-2 text-xs font-bold rounded-lg transition-all"
47
47
  :class="isActive(tab)
48
48
  ? resolvedActiveClass
49
- : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200'"
49
+ : 'text-muted-foreground hover:text-foreground'"
50
50
  >
51
51
  <component :is="tab.icon" v-if="tab.icon" class="size-4" />
52
52
  {{ tab.label }}
package/components/Table/Standard.vue CHANGED
@@ -203,10 +203,10 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
203
203
  <div class="relative" ref="containerRef">
204
204
 
205
205
  <!-- Card único -->
206
- <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl shadow-sm overflow-hidden">
206
+ <div class="bg-card border border-card-line rounded-2xl shadow-sm overflow-hidden">
207
207
 
208
208
  <!-- Toolbar -->
209
- <div class="flex flex-wrap items-center gap-3 px-4 py-3 border-b border-slate-200 dark:border-slate-800">
209
+ <div class="flex flex-wrap items-center gap-3 px-4 py-3 border-b border-card-line">
210
210
  <div v-if="showSearch" class="flex-1 min-w-48">
211
211
  <Forms.Input v-model="search" type="search" :placeholder="searchPlaceholder" :icon-left="IconSearch" />
212
212
  </div>
@@ -219,7 +219,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
219
219
  'py-1.5 px-3 inline-flex items-center gap-2 text-sm font-medium rounded-lg border transition-colors',
220
220
  showFilterPanel || activeFilterCount > 0
221
221
  ? 'border-blue-500 bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:border-blue-500 dark:text-blue-300'
222
- : 'border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800'
222
+ : 'border-card-line bg-card text-muted-foreground-1 hover:bg-muted-hover'
223
223
  ]"
224
224
  >
225
225
  <IconAdjustmentsHorizontal class="size-4" stroke="1.5" />
@@ -238,9 +238,9 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
238
238
  <div
239
239
  v-if="showFilterPanel"
240
240
  ref="filterPanelRef"
241
- class="absolute top-full left-0 z-50 mt-1.5 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl shadow-2xl p-3 min-w-56 max-h-96 overflow-y-auto"
241
+ 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"
242
242
  >
243
- <p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-3 px-1">Filtros</p>
243
+ <p class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest mb-3 px-1">Filtros</p>
244
244
  <TableFilter v-model="activeFilters" :columns="filtersConfig" />
245
245
  </div>
246
246
  </Transition>
@@ -255,7 +255,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
255
255
  'py-1.5 px-3 inline-flex items-center gap-2 text-sm font-medium rounded-lg border transition-colors',
256
256
  showColumnPanel
257
257
  ? 'border-blue-500 bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:border-blue-500 dark:text-blue-300'
258
- : 'border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800'
258
+ : 'border-card-line bg-card text-muted-foreground-1 hover:bg-muted-hover'
259
259
  ]"
260
260
  >
261
261
  <IconLayoutColumns class="size-4" />
@@ -303,12 +303,12 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
303
303
  >
304
304
  <div
305
305
  v-if="previewRow && previewEnabled"
306
- class="absolute top-0 right-0 z-30 flex bg-white dark:bg-slate-900 border-l border-slate-200 dark:border-slate-800 shadow-[-4px_0_16px_rgba(0,0,0,0.06)]"
306
+ 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)]"
307
307
  :style="{ width: (100 - currentRatio) + '%', bottom: paginationHeight + 'px' }"
308
308
  >
309
309
  <!-- Resize handle -->
310
310
  <div
311
- 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"
311
+ class="w-1 shrink-0 cursor-col-resize bg-surface hover:bg-indigo-300 dark:hover:bg-indigo-600 transition-colors"
312
312
  @mousedown="startResize"
313
313
  />
314
314
  <!-- Preview -->
@@ -333,9 +333,9 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
333
333
  <div
334
334
  v-if="showColumnPanel"
335
335
  ref="columnPanelRef"
336
- class="absolute top-12 right-0 z-50 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl shadow-2xl p-3 min-w-56 max-h-80 overflow-y-auto"
336
+ 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"
337
337
  >
338
- <p class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-2 px-1">
338
+ <p class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest mb-2 px-1">
339
339
  Columnas visibles
340
340
  </p>
341
341
  <div
@@ -349,17 +349,17 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef })
349
349
  class="flex items-center gap-2 py-1.5 px-2 rounded-lg select-none transition-colors"
350
350
  :class="dragOverKey === col.key
351
351
  ? 'bg-blue-50 dark:bg-blue-900/20 ring-1 ring-blue-300 dark:ring-blue-700'
352
- : 'hover:bg-slate-50 dark:hover:bg-slate-800 cursor-grab'"
352
+ : 'hover:bg-muted-hover cursor-grab'"
353
353
  >
354
- <IconGripVertical class="size-4 text-slate-300 dark:text-slate-600 shrink-0" />
354
+ <IconGripVertical class="size-4 text-muted-foreground-2 shrink-0" />
355
355
  <input
356
356
  type="checkbox"
357
357
  :checked="tableRef?.table.getColumn(col.key)?.getIsVisible() ?? true"
358
358
  @change="tableRef?.table.getColumn(col.key)?.toggleVisibility()"
359
359
  @click.stop
360
- class="rounded border-gray-300 dark:bg-slate-700 dark:border-slate-600 shrink-0 cursor-pointer"
360
+ class="rounded border-card-line bg-surface shrink-0 cursor-pointer"
361
361
  />
362
- <span class="text-sm text-slate-700 dark:text-slate-200 truncate">{{ col.label }}</span>
362
+ <span class="text-sm text-foreground truncate">{{ col.label }}</span>
363
363
  </div>
364
364
  </div>
365
365
  </Transition>
package/nuxt.config.ts CHANGED
@@ -12,4 +12,9 @@ export default defineNuxtConfig({
12
12
  vite: {
13
13
  plugins: [tailwindcss()],
14
14
  },
15
+ appConfig: {
16
+ spark: {
17
+ theme: 'default',
18
+ },
19
+ },
15
20
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@innertia-solutions/nuxt-theme-spark",
3
- "version": "0.1.106",
3
+ "version": "0.1.107",
4
4
  "description": "Innertia Solutions — Spark theme: backoffice, landing and mobile components and layouts",
5
5
  "keywords": [
6
6
  "nuxt",
package/plugins/theme.client.ts ADDED
@@ -0,0 +1,7 @@
1
+ export default defineNuxtPlugin(() => {
2
+ const appConfig = useAppConfig() as { spark?: { theme?: string } }
3
+ const theme = appConfig.spark?.theme
4
+ if (theme && theme !== 'default') {
5
+ document.documentElement.setAttribute('data-theme', `theme-${theme}`)
6
+ }
7
+ })
package/spark.css CHANGED
@@ -1,5 +1,13 @@
1
1
  @import "tailwindcss";
2
2
  @import "preline/variants.css";
3
+ @import "preline/css/themes/harvest.css";
4
+ @import "preline/css/themes/retro.css";
5
+ @import "preline/css/themes/ocean.css";
6
+ @import "preline/css/themes/autumn.css";
7
+ @import "preline/css/themes/moon.css";
8
+ @import "preline/css/themes/bubblegum.css";
9
+ @import "preline/css/themes/olive.css";
10
+ @import "preline/css/themes/cashmere.css";
3
11
  @plugin "@tailwindcss/forms";
4
12
  @plugin "@tailwindcss/aspect-ratio";
5
13