fix

libs/ui/docs/theming.html

@@ -454,19 +454,32 @@
       <tr><td class="tok"><code class="token">--pi-theme-tooltip-radius</code></td><td><small class="note">sin declarar →</small> <code>var(--pi-border-radius-medium)</code></td><td><code>_mat-tooltip.scss</code></td></tr>
       <tr><td class="tok"><code class="token">--pi-theme-tooltip-shadow</code></td><td><small class="note">sin declarar →</small> <code>var(--pi-box-shadow-panel-double)</code></td><td><code>_mat-tooltip.scss</code></td></tr>
       <tr><td class="tok"><code class="token">--pi-theme-accordion-radius</code></td><td><small class="note">sin declarar →</small> <code>var(--pi-border-radius-large)</code></td><td><code>accordion.component.scss</code>, <code>_horizontal-accordion.scss</code>, <code>_vertical-accordion.scss</code> (×6, incluye un <code>calc()</code>)</td></tr>
+      <tr><td class="tok"><code class="token">--pi-theme-overlay-divider-color</code></td><td><small class="note">sin declarar →</small> <code>var(--pi-color-grey-100)</code></td><td><code>drawer.component.scss</code>, <code>hub.component.scss</code></td></tr>
+      <tr><td class="tok"><code class="token">--pi-theme-hub-grabber-color</code></td><td><small class="note">sin declarar →</small> <code>var(--pi-color-grey-100)</code></td><td><code>hub.component.scss</code></td></tr>
     </tbody>
   </table>
   <div class="callout">
-    Minimal declara los seis en su mixin (<code>_minimal.scss</code>): aplana
-    todos los radios a <code>--pi-border-radius-xx-small</code> y apaga las dos
-    sombras (<code>none</code>) — mismo criterio que ya aplicaba a botón, campo
-    y card, extendido al resto de superficies flotantes.
+    Minimal declara los seis primeros en su mixin (<code>_minimal.scss</code>):
+    aplana todos los radios a <code>--pi-border-radius-xx-small</code> y apaga
+    las dos sombras (<code>none</code>) — mismo criterio que ya aplicaba a
+    botón, campo y card, extendido al resto de superficies flotantes. Los dos
+    últimos (drawer/hub) son más recientes y todavía ningún tema los redefine.
   </div>
 
   <!-- ================= §3 CREAR UN TEMA ================= -->
   <h1 class="section-title" style="margin-top:26px"><span class="num">3</span>Crear un tema, paso a paso</h1>
   <p class="lede">Cuatro ficheros, ninguno toca un componente. Ejemplo con un tema ficticio <code>brutalist</code>.</p>
 
+  <div class="callout">
+    Los cuatro pasos de esta página los da un generador:
+    <code>nx g @pi/ui:theme brutalist</code>. Crea el fichero del paso 1 (en
+    blanco, con los grupos de tokens más habituales comentados), hace los
+    pasos 2 y 3, y además extiende <code>PiThemeService</code> (paso 4) para
+    que el tema quede seleccionable sin ningún paso manual más. Lo que sigue
+    es para quien prefiera hacerlo a mano o quiera entender qué toca cada
+    paso.
+  </div>
+
   <div class="step">
     <div class="step-num">1</div>
     <div class="step-body">
@@ -523,7 +536,13 @@
     <div class="step-num">4</div>
     <div class="step-body">
       <div class="step-title">Aplícalo en la app consumidora</div>
-      <p>En el playground esto ya está resuelto con un signal + effect (ver <code>apps/playground/src/app/app.ts</code>); en cualquier otra app basta con:</p>
+      <p>Con <code>PiThemeService</code> (ver <code>apps/playground/src/app/app.ts</code>) basta con:</p>
+      <pre class="code">import { inject } from '@angular/core';
+import { PiThemeService } from '@pi/ui';
+
+const themeService = inject(PiThemeService);
+themeService.setTheme('brutalist');</pre>
+      <p>Si el generador ya extendió <code>ThemeVariant</code>/<code>shellClassByVariant</code> (paso automático 4), no hace falta tocar nada más que este <code>setTheme</code>. Sin el servicio, el mecanismo de bajo nivel sigue funcionando igual:</p>
       <pre class="code">import { ShellClass } from '@pi/ui';
 
 document.body.className = ShellClass.Brutalist;</pre>
@@ -654,7 +673,11 @@ document.body.className = ShellClass.Brutalist;</pre>
     <code>@pi/ui</code> no trae un tema oscuro propio. El playground activa
     uno "best-effort" añadiendo la clase <code>dark-mode</code> al
     <code>&lt;html&gt;</code> (no al <code>&lt;body&gt;</code>, que es donde
-    vive <code>.pi-shell</code>), y ahí reasigna solo los
+    vive <code>.pi-shell</code>) — hoy vía
+    <code>PiThemeService.setDarkMode()</code>/<code>toggleDarkMode()</code>,
+    que hace ese toggle por ti (persistido en <code>localStorage</code>) en
+    vez de que cada app repita el mismo <code>effect()</code> — y ahí reasigna
+    solo los
     <b>neutros</b> (<code>--pi-color-white</code>, <code>--pi-color-grey-*</code>,
     <code>--pi-color-black</code>) — las paletas de marca
     (<code>primary</code>, <code>accent</code>…) se dejan igual:
@@ -684,12 +707,14 @@ document.body.className = ShellClass.Brutalist;</pre>
 
   <h2 class="sub" style="margin-top:6px">Antes de dar el tema por terminado</h2>
   <ul class="check">
+    <li>Se creó con <code>nx g @pi/ui:theme &lt;nombre&gt;</code> — hace los tres puntos siguientes por ti.</li>
     <li>El fichero nuevo vive en <code>themes/</code>, exporta un mixin y una clase <code>.pi-shell__&lt;nombre&gt;</code>.</li>
     <li>Está en <code>themes/index.scss</code>, al final de ambos bloques (<code>@forward</code> y <code>@use</code>).</li>
-    <li>Tiene entrada en <code>ShellClass</code> (<code>configs.ts</code>), con un comentario de una línea que resuma el aspecto.</li>
+    <li>Tiene entrada en <code>ShellClass</code> (<code>configs.ts</code>) y en <code>PiThemeService</code> (<code>ThemeVariant</code>/<code>shellClassByVariant</code>), con un comentario de una línea que resuma el aspecto.</li>
     <li>Solo declara los tokens que cambia — el resto hereda de <code>_default.scss</code> sin repetirlo.</li>
     <li>Si toca <code>--pi-color-primary/accent/highlighted</code>, revisado que el puente <code>--mat-sys-*</code> (declarado una vez en default) sigue coherente.</li>
     <li>Si toca overlays (modal/notificación/tooltip/accordion), revisado con las tres páginas de catálogo, no solo con un botón suelto.</li>
+    <li>Si al tokenizar una superficie nueva tocaste un <code>.component.scss</code>, <code>nx run ui:lint-styles</code> no marca ese fichero (detecta <code>--pi-color-*</code> usado fuera de un fallback <code>--pi-theme-*</code>).</li>
     <li>Probado en el playground con las tres páginas de catálogo, no solo en un botón suelto.</li>
   </ul>