@innertia-solutions/innertia-nuxt 0.1.2 → 0.1.4

package/README.md

@@ -24,6 +24,13 @@ export default defineNuxtConfig({
     innertia: {
       mode: 'saas', // 'saas' (default) | 'app'
 
+      branding: { name: 'MyApp', version: '1.0.0' },
+      // Tema Preline — define el "feel" completo (paleta neutral, dark mode tone).
+      // Ver https://preline.co/docs/themes.html
+      theme: 'moon',  // 'default' | 'harvest' | 'retro' | 'ocean' | 'autumn' | 'moon' | 'bubblegum' | 'cashmere' | 'olive'
+      // Override del brand color del tema
+      colors: { primary: 'violet', secondary: 'slate' },
+
       apps: {
         backoffice: {
           path: '/backoffice',

package/app.config.ts

@@ -30,16 +30,39 @@ export default defineAppConfig({
     },
 
     /**
-     * Colores primario y secundario. Acepta:
+     * Tema Preline. Cada tema define el "feel" completo (paleta neutral, fondos,
+     * bordes, sombras) tanto en light como en dark mode. Es el equivalente a
+     * "darkTone" pero más expresivo — distintos temas tienen distintos tonos.
+     *
+     * Cada tema viene con un brand color default (puedes overridearlo con `colors.primary`):
+     *   - 'default'   → blue   (neutral, profesional)
+     *   - 'harvest'   → amber  (cálido, tierra)
+     *   - 'retro'     → fuchsia (vibrante, ochenta)
+     *   - 'ocean'     → cyan   (frío, acuático)
+     *   - 'autumn'    → yellow (otoñal)
+     *   - 'moon'      → gray   (gris, dark-friendly elegante)
+     *   - 'bubblegum' → pink   (suave, juvenil)
+     *   - 'cashmere'  → mauve  (cálido morado)
+     *   - 'olive'     → avocado (verde tierra)
+     *
+     * Ver https://preline.co/docs/themes.html para preview de cada uno.
+     */
+    theme: 'default' as PrelineTheme,
+
+    /**
+     * Colores primario y secundario. Overridean el brand color default del tema.
+     * Acepta:
      *   - Nombre de color de Tailwind (string): 'violet', 'indigo', 'emerald', etc.
      *   - Scale custom (object): { 50: '#f5f3ff', ..., 950: '#2e1065' }
      *
+     * Si no se declara, se usa el brand color default del `theme` elegido.
+     *
      * El plugin `colors` aplica estos valores a las CSS vars `--primary-{50..950}`
      * y `--secondary-{50..950}` en SSR y cliente.
      */
     colors: {
-      primary: 'blue' as ColorOption,
-      secondary: 'slate' as ColorOption,
+      primary: undefined as ColorOption | undefined,
+      secondary: undefined as ColorOption | undefined,
     },
 
     /**
@@ -108,6 +131,18 @@ export type AppMobileMode = 'allow' | 'block' | 'redirect'
 export type ColorScale = Partial<Record<50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950, string>>
 export type ColorOption = string | ColorScale
 
+/** Temas Preline disponibles — cada uno define un "feel" completo (light + dark). */
+export type PrelineTheme =
+  | 'default'    // blue
+  | 'harvest'    // amber
+  | 'retro'      // fuchsia
+  | 'ocean'      // cyan
+  | 'autumn'     // yellow
+  | 'moon'       // gray
+  | 'bubblegum'  // pink
+  | 'cashmere'   // mauve
+  | 'olive'      // avocado
+
 /** Proveedor OAuth — slug del provider (matchea con backend SocialAuthController). */
 export type OAuthProvider = 'google' | 'microsoft' | 'apple' | 'github'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innertia-solutions/innertia-nuxt",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Innertia Solutions — Nuxt layer unificada: core, auth, multitenancy, theme y app contexts",
   "keywords": [
     "nuxt",

package/plugins/colors.ts

@@ -1,30 +1,40 @@
-import type { ColorOption, ColorScale } from '../app.config'
+import type { ColorOption, ColorScale, PrelineTheme } from '../app.config'
 
 const SCALE_LEVELS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const
 
 /**
- * Aplica las CSS vars `--primary-{50..950}` y `--secondary-{50..950}` desde
- * `appConfig.innertia.colors`. Funciona en SSR (inyecta <style> en head) y cliente.
+ * Aplica el theming completo desde `appConfig.innertia`:
+ *   - `theme`             → setea `data-theme="theme-{name}"` en <html> (Preline themes)
+ *   - `colors.primary`    → override del brand color del tema → --primary-{50..950}
+ *   - `colors.secondary`  → --secondary-{50..950}
  *
- * Acepta:
+ * Funciona en SSR (inyecta <style> + htmlAttrs en head) y cliente.
+ *
+ * `colors.primary/secondary` acepta:
  *   - Nombre Tailwind: 'violet' → mapea a var(--color-violet-50..950)
  *   - Scale custom: { 50: '#f5f3ff', ..., 950: '#2e1065' }
  *
- * También deriva las vars semánticas `--primary`, `--primary-hover`, `--primary-foreground`,
- * etc., usando el nivel 600 (default) o el más cercano en una scale custom.
+ * El "tono dark" se controla via `theme` — cada tema Preline incluye su propia
+ * paleta neutral para light y dark. Ej. `theme: 'moon'` da un dark grisáceo elegante.
  */
 export default defineNuxtPlugin(() => {
   const appConfig = useAppConfig()
+  const theme = appConfig.innertia?.theme as PrelineTheme | undefined
   const colors = appConfig.innertia?.colors as { primary?: ColorOption; secondary?: ColorOption } | undefined
-  if (!colors) return
 
+  // ── Aplicar tema Preline via data-theme ─────────────────────────────────
+  if (theme && theme !== 'default') {
+    useHead({ htmlAttrs: { 'data-theme': `theme-${theme}` } })
+  }
+
+  // ── Aplicar overrides de primary/secondary via <style> ───────────────────
+  if (!colors || (!colors.primary && !colors.secondary)) return
   const css = buildColorCSS(colors)
   if (!css) return
 
   useHead({
     style: [
       {
-        // Marcamos como innertia para poder identificarla en debug
         id: 'innertia-colors',
         children: css,
       },

package/plugins/theme.client.ts

@@ -1,7 +0,0 @@
-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}`)
-  }
-})