@innertia-solutions/innertia-nuxt 0.1.2 → 0.1.3

package/README.md

@@ -24,6 +24,10 @@ export default defineNuxtConfig({
     innertia: {
       mode: 'saas', // 'saas' (default) | 'app'
 
+      branding: { name: 'MyApp', version: '1.0.0' },
+      colors: { primary: 'violet', secondary: 'slate' },
+      darkTone: 'slate',  // 'neutral' (default) | 'slate' | 'gray' | 'zinc' | 'stone'
+
       apps: {
         backoffice: {
           path: '/backoffice',

package/app.config.ts

@@ -42,6 +42,18 @@ export default defineAppConfig({
       secondary: 'slate' as ColorOption,
     },
 
+    /**
+     * Tono neutral usado en modo dark (backgrounds, borders, surfaces).
+     * Cambia el "feel" del modo oscuro sin tocar el color de marca.
+     *
+     *   - 'neutral' (default) → gris puro, neutral
+     *   - 'slate'             → gris con leve tinte azul (más frío)
+     *   - 'gray'              → gris levemente más cálido que slate
+     *   - 'zinc'              → gris cálido
+     *   - 'stone'             → gris muy cálido (con tinte tierra)
+     */
+    darkTone: 'neutral' as DarkTone,
+
     /**
      * Contenido del panel marketing del layout `auth`. Si no se declara, el panel queda vacío.
      */
@@ -108,6 +120,9 @@ 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
 
+/** Tono neutral usado en modo dark — debe ser una paleta gris de Tailwind. */
+export type DarkTone = 'neutral' | 'slate' | 'gray' | 'zinc' | 'stone'
+
 /** 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.3",
   "description": "Innertia Solutions — Nuxt layer unificada: core, auth, multitenancy, theme y app contexts",
   "keywords": [
     "nuxt",

package/plugins/colors.ts

@@ -1,32 +1,39 @@
-import type { ColorOption, ColorScale } from '../app.config'
+import type { ColorOption, ColorScale, DarkTone } 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 las CSS vars de theming desde `appConfig.innertia`:
+ *   - `colors.primary` y `colors.secondary` → --primary-{50..950}, --secondary-{50..950}
+ *   - `darkTone` → reemplaza el neutral default en modo dark (backgrounds, borders, surfaces)
  *
- * Acepta:
+ * Funciona en SSR (inyecta <style> en head) y cliente.
+ *
+ * colors 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.
+ * darkTone acepta:
+ *   'neutral' | 'slate' | 'gray' | 'zinc' | 'stone'
  */
 export default defineNuxtPlugin(() => {
   const appConfig = useAppConfig()
   const colors = appConfig.innertia?.colors as { primary?: ColorOption; secondary?: ColorOption } | undefined
-  if (!colors) return
+  const darkTone = appConfig.innertia?.darkTone as DarkTone | undefined
+
+  const css: string[] = []
 
-  const css = buildColorCSS(colors)
-  if (!css) return
+  if (colors) css.push(buildColorCSS(colors))
+  // Solo aplicar override si el producto eligió algo distinto del default
+  if (darkTone && darkTone !== 'neutral') css.push(buildDarkToneCSS(darkTone))
+
+  if (css.length === 0) return
 
   useHead({
     style: [
       {
-        // Marcamos como innertia para poder identificarla en debug
         id: 'innertia-colors',
-        children: css,
+        children: css.join('\n'),
       },
     ],
   })
@@ -46,6 +53,63 @@ function buildColorCSS(colors: { primary?: ColorOption; secondary?: ColorOption
   return lines.join('\n')
 }
 
+/**
+ * Genera overrides para modo dark reemplazando el `neutral` default por el tono elegido.
+ * Cubre backgrounds, foregrounds, borders, layers, surfaces y cards — todos los lugares
+ * donde el theme.css base usa `--color-neutral-*` en `.dark`.
+ *
+ * Por especificidad, `.dark` aquí gana sobre `.dark` en theme.css porque se inyecta
+ * después en el head (last-declared wins).
+ */
+function buildDarkToneCSS(tone: DarkTone): string {
+  return `.dark {
+  --background: var(--color-${tone}-800);
+  --background-1: var(--color-${tone}-900);
+  --background-2: var(--color-${tone}-900);
+  --background-plain: var(--color-${tone}-950);
+  --foreground: var(--color-${tone}-200);
+  --foreground-inverse: var(--color-white);
+  --inverse: var(--color-${tone}-950);
+  --border: var(--color-${tone}-700);
+  --border-line-1: var(--color-${tone}-800);
+  --border-line-2: var(--color-${tone}-700);
+  --border-line-3: var(--color-${tone}-600);
+  --layer: var(--color-${tone}-800);
+  --layer-line: var(--color-${tone}-700);
+  --layer-hover: var(--color-${tone}-700);
+  --layer-focus: var(--color-${tone}-700);
+  --layer-active: var(--color-${tone}-700);
+  --surface: var(--color-${tone}-700);
+  --surface-1: var(--color-${tone}-600);
+  --surface-2: var(--color-${tone}-500);
+  --surface-3: var(--color-${tone}-600);
+  --muted: var(--color-${tone}-700);
+  --muted-foreground: var(--color-${tone}-400);
+  --muted-foreground-1: var(--color-${tone}-300);
+  --muted-hover: var(--color-${tone}-600);
+  --card: var(--color-${tone}-800);
+  --card-line: var(--color-${tone}-700);
+  --card-divider: var(--color-${tone}-700);
+  --card-header: var(--color-${tone}-700);
+  --card-footer: var(--color-${tone}-700);
+  --dropdown: var(--color-${tone}-800);
+  --dropdown-line: var(--color-${tone}-700);
+  --dropdown-divider: var(--color-${tone}-700);
+  --dropdown-item-hover: var(--color-${tone}-700);
+  --dropdown-item-foreground: var(--color-${tone}-200);
+  --tooltip: var(--color-${tone}-100);
+  --tooltip-foreground: var(--color-${tone}-900);
+  --navbar: var(--color-${tone}-900);
+  --navbar-line: var(--color-${tone}-800);
+  --navbar-divider: var(--color-${tone}-800);
+  --navbar-nav-foreground: var(--color-${tone}-300);
+  --navbar-nav-hover: var(--color-${tone}-800);
+  --navbar-nav-active: var(--color-${tone}-700);
+  --sidebar: var(--color-${tone}-900);
+  --sidebar-line: var(--color-${tone}-800);
+}`
+}
+
 function buildRoleVars(role: 'primary' | 'secondary', value: ColorOption): string[] {
   const out: string[] = []