npm - holygrail5 - Versions diffs - 1.0.19 → 1.0.21 - Mend

holygrail5 1.0.19 → 1.0.21

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 (77) hide show

package/README.md +88 -18
package/config.json +205 -77
package/dist/assets/fonts/suisse-intl-light.woff +0 -0
package/dist/assets/fonts/suisse-intl-light.woff2 +0 -0
package/dist/assets/fonts/suisse-intl-medium.woff +0 -0
package/dist/assets/fonts/suisse-intl-medium.woff2 +0 -0
package/dist/assets/fonts/suisse-intl-regular.woff +0 -0
package/dist/assets/fonts/suisse-intl-regular.woff2 +0 -0
package/dist/assets/fonts/suisse-intl-semibold.woff +0 -0
package/dist/assets/fonts/suisse-intl-semibold.woff2 +0 -0
package/dist/assets/fonts/suisse-works-bold.woff +0 -0
package/dist/assets/fonts/suisse-works-bold.woff2 +0 -0
package/dist/assets/fonts/suisse-works-medium.woff +0 -0
package/dist/assets/fonts/suisse-works-medium.woff2 +0 -0
package/dist/assets/fonts/suisse-works-regular.woff +0 -0
package/dist/assets/fonts/suisse-works-regular.woff2 +0 -0
package/dist/componentes.html +429 -0
package/dist/developer-guide.md +7 -7
package/dist/guide-styles.css +197 -25
package/dist/index.html +807 -689
package/dist/output.css +217 -114
package/dist/skills.html +14 -8
package/dist/themes/dutti-demo.html +713 -19
package/dist/themes/dutti.css +67 -16
package/dist/themes/limited-demo.html +1121 -0
package/dist/themes/limited.css +2493 -0
package/package.json +1 -1
package/src/.data/.previous-values.json +151 -84
package/src/assets/fonts/suisse-intl-light.woff +0 -0
package/src/assets/fonts/suisse-intl-light.woff2 +0 -0
package/src/assets/fonts/suisse-intl-medium.woff +0 -0
package/src/assets/fonts/suisse-intl-medium.woff2 +0 -0
package/src/assets/fonts/suisse-intl-regular.woff +0 -0
package/src/assets/fonts/suisse-intl-regular.woff2 +0 -0
package/src/assets/fonts/suisse-intl-semibold.woff +0 -0
package/src/assets/fonts/suisse-intl-semibold.woff2 +0 -0
package/src/assets/fonts/suisse-works-bold.woff +0 -0
package/src/assets/fonts/suisse-works-bold.woff2 +0 -0
package/src/assets/fonts/suisse-works-medium.woff +0 -0
package/src/assets/fonts/suisse-works-medium.woff2 +0 -0
package/src/assets/fonts/suisse-works-regular.woff +0 -0
package/src/assets/fonts/suisse-works-regular.woff2 +0 -0
package/src/build/asset-manager.js +94 -3
package/src/build/build-orchestrator.js +74 -12
package/src/build/components-generator.js +584 -0
package/src/build/skills-generator.js +43 -5
package/src/build/theme-config-loader.js +58 -0
package/src/build/theme-transformer.js +109 -16
package/src/build/theme-vars-table-generator.js +349 -0
package/src/build/typo-table-generator.js +154 -0
package/src/docs-generator/guide-styles.css +197 -24
package/src/docs-generator/html-generator.js +92 -246
package/src/docs-generator/sections/colors-section.js +109 -0
package/src/docs-generator/value-tracker.js +154 -0
package/src/generators/typo-generator.js +2 -1
package/src/generators/utils.js +90 -1
package/src/skills.html +1 -0
package/src/watch-config.js +99 -32
package/themes/{dutti → _base}/_buttons.css +2 -2
package/themes/{dutti → _base}/_checkboxes.css +1 -1
package/themes/{dutti → _base}/_forms.css +1 -1
package/themes/{dutti → _base}/_inputs.css +55 -10
package/themes/{dutti → _base}/_labels.css +1 -1
package/themes/dutti/README.md +67 -21
package/themes/dutti/_variables.css +7 -1
package/themes/dutti/demo.html +18 -14
package/themes/dutti/theme.css +22 -44
package/themes/dutti/theme.json +86 -0
package/themes/limited/_variables.css +123 -0
package/themes/limited/demo.html +296 -0
package/themes/limited/theme.css +32 -0
package/themes/limited/theme.json +105 -0
/package/themes/{dutti → _base}/_containers.css +0 -0
/package/themes/{dutti → _base}/_radios.css +0 -0
/package/themes/{dutti → _base}/_switches.css +0 -0
/package/themes/{dutti → _base}/components/_icons.css +0 -0
/package/themes/{dutti → _base}/objects/_grid.css +0 -0

package/dist/componentes.html ADDED Viewed

@@ -0,0 +1,429 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>HolyGrail5 — Componentes base</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Instrument+Sans:regular,100,500,600,700">
+  <!-- Framework base -->
+  <link rel="stylesheet" href="output.css">
+  <!-- Tema base genérico: dutti (variables + componentes) -->
+  <link rel="stylesheet" href="themes/dutti.css">
+  <!-- Estilos compartidos de guía (header, sidebar, demo-*) -->
+  <link rel="stylesheet" href="guide-styles.css">
+  <style>
+    body {
+      font-family: 'Instrument Sans', sans-serif !important;
+    }
+    /* Descripción de cada sección (debajo del título) */
+    .cmp-desc {
+      font-size: 14px;
+      line-height: 1.6;
+      color: #555;
+      margin: 0 0 1.5rem;
+      max-width: 720px;
+    }
+    .cmp-desc code {
+      background: #f3f3f3;
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-size: 0.88em;
+    }
+    /* Preview de cada componente dentro de .demo-item */
+    .cmp-preview {
+      min-height: 48px;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      margin-bottom: var(--hg-spacing-12);
+    }
+    /* Los inputs con floating label necesitan respirar: el label flota
+       encima, el helper-text se apila debajo. */
+    #inputs .cmp-preview,
+    #forms .cmp-preview {
+      display: block;
+    }
+    #inputs .cmp-preview > .form-input-label-2,
+    #forms .cmp-preview > .form-group {
+      width: 100%;
+    }
+    /* Containers y Grid son estructuras de layout: interesan como
+       bloques a 100% del item, no como chips alineados horizontalmente. */
+    #containers .demo-grid,
+    #grid .demo-grid {
+      grid-template-columns: 1fr;
+    }
+    #containers .cmp-preview,
+    #grid .cmp-preview {
+      display: block;
+    }
+    #containers .cmp-preview > [class^="container"],
+    #grid .cmp-preview > [class^="hg-grid-"] {
+      width: 100%;
+      max-width: 100%;
+    }
+  </style>
+</head>
+<body>
+  <div class="guide-header">
+    <a href="index.html" class="guide-logo" style="text-decoration:none;">HolyGrail5</a>
+    <div style="display: flex; align-items: center; gap: 1rem;">
+      <nav class="guide-nav">
+        <a href="index.html">Guía</a>
+        <a href="componentes.html" class="active">Componentes</a>
+        <a href="themes/dutti-demo.html">Tema Dutti</a>
+        <a href="themes/limited-demo.html">Tema Limited</a>
+        <a href="skills.html">Skills</a>
+      </nav>
+      <button class="guide-header-button" onclick="toggleSidebar()">☰</button>
+    </div>
+  </div>
+  <div class="guide-sidebar-overlay" onclick="toggleSidebar()"></div>
+  <aside class="guide-sidebar">
+    <div class="guide-sidebar-header">
+      <div>HolyGrail5</div>
+      <p class="guide-sidebar-subtitle">Componentes base</p>
+    </div>
+    <nav class="guide-sidebar-nav">
+      <p class="guide-sidebar-title">Componentes</p>
+      <a href="#buttons" class="guide-menu-item">Botones</a>
+      <a href="#inputs" class="guide-menu-item">Inputs</a>
+      <a href="#labels" class="guide-menu-item">Labels</a>
+      <a href="#checkboxes" class="guide-menu-item">Checkboxes</a>
+      <a href="#radios" class="guide-menu-item">Radios</a>
+      <a href="#switches" class="guide-menu-item">Switches</a>
+      <a href="#forms" class="guide-menu-item">Formularios</a>
+      <a href="#containers" class="guide-menu-item">Containers</a>
+      <a href="#grid" class="guide-menu-item">Grid</a>
+    </nav>
+  </aside>
+  <script>
+    function toggleSidebar() {
+      const sidebar = document.querySelector('.guide-sidebar');
+      const overlay = document.querySelector('.guide-sidebar-overlay');
+      sidebar.classList.toggle('open');
+      overlay.classList.toggle('active');
+    }
+    function closeSidebar() {
+      const sidebar = document.querySelector('.guide-sidebar');
+      const overlay = document.querySelector('.guide-sidebar-overlay');
+      sidebar.classList.remove('open');
+      overlay.classList.remove('active');
+    }
+    window.toggleSidebar = toggleSidebar;
+    window.closeSidebar = closeSidebar;
+  </script>
+  <main class="demo-container guide-main-content">
+    <h2 class="demo-title">Componentes base</h2>
+    <div class="demo-section-2">
+      <h3>¿Qué es esta página?</h3>
+      <p class="mb-16">
+        Librería de componentes compartidos que viven en
+        <code>themes/_base/</code>. Se renderizan con el tema
+        <strong>Dutti</strong>
+        como base genérica del framework; cualquier otro tema puede
+        aplicarse encima para redefinir la identidad visual sin tocar
+        el HTML.
+      </p>
+    </div>
+      <section class="demo-section" id="buttons">
+        <h2 class="demo-title">Botones</h2>
+        <p class="cmp-desc">Variantes estándar del framework: <code>primary</code>, <code>secondary</code>, <code>tertiary</code>, <code>label-m</code>, <code>link</code> y <code>badge</code>. Clases en <code>themes/_base/_buttons.css</code>. Cada tema puede sobreescribirlas con su propia identidad visual.</p>
+        <h3 class="demo-subtitle">Variantes</h3>
+        <div class="demo-grid">
+          <div class="demo-item">
+            <div class="cmp-preview"><button class="btn btn-primary">Primary</button></div>
+            <div class="demo-code">.btn .btn-primary</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><button class="btn btn-secondary">Secondary</button></div>
+            <div class="demo-code">.btn .btn-secondary</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><button class="btn btn-tertiary">Tertiary</button></div>
+            <div class="demo-code">.btn .btn-tertiary</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><button class="btn btn-tertiary hg-text-underline">Tertiary underline</button></div>
+            <div class="demo-code">.btn .btn-tertiary .hg-text-underline</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><button class="btn btn-label-m">Label M</button></div>
+            <div class="demo-code">.btn .btn-label-m</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><button class="btn btn-link">Link</button></div>
+            <div class="demo-code">.btn .btn-link</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><button class="btn btn-badge">Badge</button></div>
+            <div class="demo-code">.btn .btn-badge</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><button class="btn btn-primary" disabled>Disabled</button></div>
+            <div class="demo-code">.btn[disabled]</div>
+          </div>
+        </div>
+        <h3 class="demo-subtitle">Tamaños</h3>
+        <div class="demo-grid">
+          <div class="demo-item">
+            <div class="cmp-preview"><button class="btn btn-primary btn-sm">Small</button></div>
+            <div class="demo-code">.btn .btn-sm</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><button class="btn btn-primary btn-md">Medium</button></div>
+            <div class="demo-code">.btn .btn-md</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><button class="btn btn-primary btn-lg">Large</button></div>
+            <div class="demo-code">.btn .btn-lg</div>
+          </div>
+        </div>
+        <h3 class="demo-subtitle">Ancho completo</h3>
+        <div class="demo-grid">
+          <div class="demo-item">
+            <div class="cmp-preview"><button class="btn btn-primary btn-md btn-full">Botón ancho completo</button></div>
+            <div class="demo-code">.btn .btn-full</div>
+          </div>
+        </div>
+      </section>
+      <section class="demo-section" id="inputs">
+        <h2 class="demo-title">Inputs</h2>
+        <p class="cmp-desc">Campos de formulario base con <strong>floating label</strong>: texto, email, password, textarea y select. Cada input vive dentro de <code>.form-input-label-2</code> para que el label se anime al enfocar o al contener valor. Clases en <code>themes/_base/_inputs.css</code>.</p>
+        <h3 class="demo-subtitle">Tipos</h3>
+        <div class="demo-grid">
+          <div class="demo-item">
+            <div class="cmp-preview"><div class="form-input-label-2"><input type="text" id="cmp-input-text" class="input" placeholder=" " /><label for="cmp-input-text">Texto</label></div></div>
+            <div class="demo-code">.form-input-label-2 &gt; .input</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><div class="form-input-label-2"><input type="email" id="cmp-input-email" class="input" placeholder=" " /><label for="cmp-input-email">Email</label></div></div>
+            <div class="demo-code">.input (type=email)</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><div class="form-input-label-2"><input type="password" id="cmp-input-password" class="input" placeholder=" " /><label for="cmp-input-password">Contraseña</label></div></div>
+            <div class="demo-code">.input (type=password)</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><div class="form-input-label-2"><textarea id="cmp-input-textarea" class="input" placeholder=" " rows="3"></textarea><label for="cmp-input-textarea">Comentario</label></div></div>
+            <div class="demo-code">.input (textarea)</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><div class="form-input-label-2"><select id="cmp-input-select" class="input"><option>Opción A</option><option>Opción B</option></select><label for="cmp-input-select">Selecciona</label></div></div>
+            <div class="demo-code">.input (select)</div>
+          </div>
+        </div>
+        <h3 class="demo-subtitle">Estados</h3>
+        <div class="demo-grid">
+          <div class="demo-item">
+            <div class="cmp-preview"><div class="form-input-label-2"><input type="text" id="cmp-input-error" class="input input-error" value="Valor inválido" placeholder=" " /><label for="cmp-input-error">Error</label></div><span class="helper-text helper-text-error">Este campo tiene un error</span></div>
+            <div class="demo-code">.input-error + .helper-text-error</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><div class="form-input-label-2"><input type="text" id="cmp-input-success" class="input input-success" value="Valor válido" placeholder=" " /><label for="cmp-input-success">Success</label></div><span class="helper-text helper-text-success">Campo válido</span></div>
+            <div class="demo-code">.input-success + .helper-text-success</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><div class="form-input-label-2"><input type="text" id="cmp-input-warning" class="input input-warning" value="Atención" placeholder=" " /><label for="cmp-input-warning">Warning</label></div><span class="helper-text helper-text-warning">Revisa este campo</span></div>
+            <div class="demo-code">.input-warning + .helper-text-warning</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><div class="form-input-label-2"><input type="text" id="cmp-input-disabled" class="input" value="No editable" placeholder=" " disabled /><label for="cmp-input-disabled">Disabled</label></div></div>
+            <div class="demo-code">.input[disabled]</div>
+          </div>
+        </div>
+      </section>
+      <section class="demo-section" id="labels">
+        <h2 class="demo-title">Labels</h2>
+        <p class="cmp-desc">Etiquetas de formulario: base, obligatoria e inline. Clases en <code>themes/_base/_labels.css</code>.</p>
+        <h3 class="demo-subtitle">Variantes</h3>
+        <div class="demo-grid">
+          <div class="demo-item">
+            <div class="cmp-preview"><label class="label">Nombre</label></div>
+            <div class="demo-code">.label</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><label class="label label-required">Email</label></div>
+            <div class="demo-code">.label .label-required</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><label class="label label-inline"><input type="checkbox" /> Acepto los términos</label></div>
+            <div class="demo-code">.label .label-inline</div>
+          </div>
+        </div>
+      </section>
+      <section class="demo-section" id="checkboxes">
+        <h2 class="demo-title">Checkboxes</h2>
+        <p class="cmp-desc">Checkbox con input nativo oculto y marca SVG inline dentro de <code>.checkbox-indicator</code>. El estado visible se controla 100% con CSS (sin JS). Clases en <code>themes/_base/_checkboxes.css</code>.</p>
+        <h3 class="demo-subtitle">Estados</h3>
+        <div class="demo-grid">
+          <div class="demo-item">
+            <div class="cmp-preview"><label class="checkbox"><input type="checkbox" /><span class="checkbox-indicator"><svg class="cbox__icon" viewBox="0 0 10 8" width="10" height="8" aria-hidden="true" focusable="false"><path d="M9.05823.198273 9.69185.801721 3.5417 7.25937.308228 3.86422.941848 3.26077 3.5417 5.99062 9.05823.198273Z" fill="currentColor"/></svg></span><span class="checkbox-label">Sin marcar</span></label></div>
+            <div class="demo-code">.checkbox</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><label class="checkbox"><input type="checkbox" checked /><span class="checkbox-indicator"><svg class="cbox__icon" viewBox="0 0 10 8" width="10" height="8" aria-hidden="true" focusable="false"><path d="M9.05823.198273 9.69185.801721 3.5417 7.25937.308228 3.86422.941848 3.26077 3.5417 5.99062 9.05823.198273Z" fill="currentColor"/></svg></span><span class="checkbox-label">Marcado</span></label></div>
+            <div class="demo-code">.checkbox (checked)</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><label class="checkbox"><input type="checkbox" disabled /><span class="checkbox-indicator"><svg class="cbox__icon" viewBox="0 0 10 8" width="10" height="8" aria-hidden="true" focusable="false"><path d="M9.05823.198273 9.69185.801721 3.5417 7.25937.308228 3.86422.941848 3.26077 3.5417 5.99062 9.05823.198273Z" fill="currentColor"/></svg></span><span class="checkbox-label">Disabled</span></label></div>
+            <div class="demo-code">.checkbox[disabled]</div>
+          </div>
+        </div>
+      </section>
+      <section class="demo-section" id="radios">
+        <h2 class="demo-title">Radios</h2>
+        <p class="cmp-desc">Radio buttons con el patrón <code>.checkbox-radio</code>: el input nativo se oculta visualmente y el círculo se pinta con <code>label::before</code>. Clases en <code>themes/_base/_radios.css</code>.</p>
+        <h3 class="demo-subtitle">Grupo</h3>
+        <div class="demo-grid">
+          <div class="demo-item">
+            <div class="cmp-preview"><div class="checkbox-radio"><input id="cmp-radio-1" name="cmp-radio" type="radio" value="A" /><label for="cmp-radio-1"><i class="ico-radio"></i><span class="title-m">Opción A</span></label></div></div>
+            <div class="demo-code">.checkbox-radio</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><div class="checkbox-radio"><input id="cmp-radio-2" name="cmp-radio" type="radio" value="B" checked /><label for="cmp-radio-2"><i class="ico-radio"></i><span class="title-m">Opción B (activa)</span></label></div></div>
+            <div class="demo-code">.checkbox-radio (checked)</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><div class="checkbox-radio"><input id="cmp-radio-3" name="cmp-radio-2" type="radio" value="C" disabled /><label for="cmp-radio-3"><i class="ico-radio"></i><span class="title-m">Disabled</span></label></div></div>
+            <div class="demo-code">.checkbox-radio[disabled]</div>
+          </div>
+        </div>
+      </section>
+      <section class="demo-section" id="switches">
+        <h2 class="demo-title">Switches</h2>
+        <p class="cmp-desc">Interruptores on/off con el patrón <code>.checkbox-item-2</code>: pista rectangular y un <code>.checkbox-circle</code> que se desplaza al marcar. Clases en <code>themes/_base/_switches.css</code>.</p>
+        <h3 class="demo-subtitle">Estados</h3>
+        <div class="demo-grid">
+          <div class="demo-item">
+            <div class="cmp-preview"><div class="checkbox-item-2"><input id="cmp-switch-1" name="cmp-switch-1" type="checkbox" /><label for="cmp-switch-1"><div class="checkbox-circle"></div><span class="theta">Inactivo</span></label></div></div>
+            <div class="demo-code">.checkbox-item-2</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><div class="checkbox-item-2"><input id="cmp-switch-2" name="cmp-switch-2" type="checkbox" checked /><label for="cmp-switch-2"><div class="checkbox-circle"></div><span class="theta">Activado</span></label></div></div>
+            <div class="demo-code">.checkbox-item-2 (checked)</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><div class="checkbox-item-2"><input id="cmp-switch-3" name="cmp-switch-3" type="checkbox" disabled /><label for="cmp-switch-3"><div class="checkbox-circle"></div><span class="theta">Disabled</span></label></div></div>
+            <div class="demo-code">.checkbox-item-2[disabled]</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><div class="checkbox-item-2 is-error"><input id="cmp-switch-4" name="cmp-switch-4" type="checkbox" /><label for="cmp-switch-4"><div class="checkbox-circle"></div><span class="theta">Error</span></label></div></div>
+            <div class="demo-code">.checkbox-item-2.is-error</div>
+          </div>
+        </div>
+      </section>
+      <section class="demo-section" id="forms">
+        <h2 class="demo-title">Formularios</h2>
+        <p class="cmp-desc">Composición de campos con label flotante + estado. <code>.form-group</code> apila verticalmente los campos; cada uno usa <code>.form-input-label-2</code> para el floating label y (opcionalmente) <code>.helper-text</code> para el mensaje de estado. Clases en <code>themes/_base/_forms.css</code>.</p>
+        <h3 class="demo-subtitle">Grupo de formulario</h3>
+        <div class="demo-grid">
+          <div class="demo-item">
+            <div class="cmp-preview"><div class="form-group"><div class="form-input-label-2"><input type="email" id="cmp-form-email" class="input" placeholder=" " /><label for="cmp-form-email">Email</label></div></div></div>
+            <div class="demo-code">.form-group &gt; .form-input-label-2</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><div class="form-group"><div class="form-input-label-2"><textarea id="cmp-form-msg" class="input" rows="3" placeholder=" "></textarea><label for="cmp-form-msg">Mensaje</label></div></div></div>
+            <div class="demo-code">.form-group (con textarea)</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><div class="form-group"><div class="form-input-label-2"><input type="text" id="cmp-form-err" class="input input-error" value="" placeholder=" " /><label for="cmp-form-err">Nombre</label></div><span class="helper-text helper-text-error">Este campo es obligatorio</span></div></div>
+            <div class="demo-code">.form-group (con helper-text)</div>
+          </div>
+        </div>
+      </section>
+      <section class="demo-section" id="containers">
+        <h2 class="demo-title">Containers</h2>
+        <p class="cmp-desc">Contenedores centrados con <code>max-width</code> responsivo y/o fijo. <code>.container</code> escala con los breakpoints; <code>.container-2</code> es más estrecho; las variantes <code>.container-640</code>, <code>.container-512</code> y <code>.container-360</code> fijan un ancho concreto. Clases en <code>themes/_base/_containers.css</code>.</p>
+        <h3 class="demo-subtitle">Responsivos</h3>
+        <div class="demo-grid">
+          <div class="demo-item">
+            <div class="cmp-preview"><div class="container" style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">.container</div></div>
+            <div class="demo-code">.container</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><div class="container-2" style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">.container-2</div></div>
+            <div class="demo-code">.container-2</div>
+          </div>
+        </div>
+        <h3 class="demo-subtitle">Anchos fijos</h3>
+        <div class="demo-grid">
+          <div class="demo-item">
+            <div class="cmp-preview"><div class="container-640" style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">.container-640</div></div>
+            <div class="demo-code">.container-640</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><div class="container-512" style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">.container-512</div></div>
+            <div class="demo-code">.container-512</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><div class="container-360" style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">.container-360</div></div>
+            <div class="demo-code">.container-360</div>
+          </div>
+        </div>
+      </section>
+      <section class="demo-section" id="grid">
+        <h2 class="demo-title">Grid</h2>
+        <p class="cmp-desc">Utilidades de CSS Grid inspiradas en Tailwind. El contenedor debe tener <code>display:grid</code> y usar <code>.hg-grid-cols-N</code> para definir N columnas; los hijos usan <code>.hg-col-span-N</code> para ocupar varias. Con el prefijo <code>md:</code> se activan a partir de 768&nbsp;px. Clases en <code>themes/_base/objects/_grid.css</code>.</p>
+        <h3 class="demo-subtitle">Columnas iguales</h3>
+        <div class="demo-grid">
+          <div class="demo-item">
+            <div class="cmp-preview"><div class="hg-grid-cols-3" style="display:grid; gap:var(--hg-spacing-8);"><div style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">1</div><div style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">2</div><div style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">3</div></div></div>
+            <div class="demo-code">.hg-grid-cols-3</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><div class="hg-grid-cols-4" style="display:grid; gap:var(--hg-spacing-8);"><div style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">1</div><div style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">2</div><div style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">3</div><div style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">4</div></div></div>
+            <div class="demo-code">.hg-grid-cols-4</div>
+          </div>
+        </div>
+        <h3 class="demo-subtitle">Col-span</h3>
+        <div class="demo-grid">
+          <div class="demo-item">
+            <div class="cmp-preview"><div class="hg-grid-cols-12" style="display:grid; gap:var(--hg-spacing-8);"><div class="hg-col-span-8" style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">span 8</div><div class="hg-col-span-4" style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">span 4</div></div></div>
+            <div class="demo-code">.hg-grid-cols-12 &gt; .hg-col-span-{8,4}</div>
+          </div>
+          <div class="demo-item">
+            <div class="cmp-preview"><div class="hg-grid-cols-12" style="display:grid; gap:var(--hg-spacing-8);"><div class="hg-col-span-6" style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">span 6</div><div class="hg-col-span-6" style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">span 6</div></div></div>
+            <div class="demo-code">.hg-grid-cols-12 &gt; .hg-col-span-6</div>
+          </div>
+        </div>
+      </section>
+  </main>
+</body>
+</html>

package/dist/developer-guide.md CHANGED Viewed

@@ -94,14 +94,14 @@ Definidos en `config.colors`. Cada color genera una variable `--hg-color-{nombre
 ```css
 /* Uso en CSS */
 color: var(--hg-color-primary);
-background: var(--hg-color-vanilla);
+background: var(--hg-color-bg-cream);
 border-color: var(--hg-color-error);
 /* Uso inline en HTML (cuando no hay clase específica) */
 <div style="color: var(--hg-color-dark-grey)">Texto</div>
 ```
-Colores disponibles por defecto: `white`, `black`, `dark-grey`, `middle-grey`, `light-grey`, `grey-ultra`, `orange`, `mustard`, `primary`, `error`, `info`, `success`, `warning`, `feel`, `feel-dark`, `special`, `vanilla`, `silver`, `gold`, `platinum`, `charcoal`, `bg-light`, `sk-grey`, `bg-cream`.
+Colores disponibles por defecto: `white`, `black`, `dark-grey`, `middle-grey`, `light-grey`, `grey-ultra`, `orange`, `mustard`, `primary`, `error`, `info`, `success`, `warning`, `feel`, `feel-dark`, `silver`, `gold`, `platinum`, `bg-light`, `bg-cream`.
 ### Spacing
@@ -129,7 +129,7 @@ Los valores px se convierten automáticamente a rem (base 16px).
 Las variables tipográficas se generan automáticamente y se deduplicam para evitar repeticiones:
 ```css
---hg-typo-font-family-primary: arial, sans-serif;
+--hg-typo-font-family-primary-regular: arial, sans-serif;
 --hg-typo-font-family-secondary: "ms-serif", serif;
 --hg-typo-font-size-12: 0.75rem;
 --hg-typo-font-size-14: 0.875rem;
@@ -393,7 +393,7 @@ Las clases son mobile-first. Los valores base aplican a mobile y un media query
 ```css
 /* CSS generado (ejemplo) */
 .hg-h2 {
-  font-family: var(--hg-typo-font-family-primary);
+  font-family: var(--hg-typo-font-family-primary-regular);
   font-weight: var(--hg-typo-font-weight-900);
   font-size: var(--hg-typo-font-size-18);     /* mobile */
   line-height: var(--hg-typo-line-height-1-976);
@@ -570,7 +570,7 @@ Clases para mantener proporciones en contenedores.
 ```html
 <header class="hg-position-sticky hg-z-50 hg-d-flex hg-justify-between hg-items-center p-16"
-        style="top: 0; background: var(--hg-color-white); border-bottom: 1px solid var(--hg-color-sk-grey);">
+        style="top: 0; background: var(--hg-color-white); border-bottom: 1px solid var(--hg-color-middle-grey);">
   <span class="hg-title-l-b">Logo</span>
   <nav class="hg-d-flex hg-gap-24">
     <a class="hg-text-m" href="#">Inicio</a>
@@ -585,7 +585,7 @@ Clases para mantener proporciones en contenedores.
 ```html
 <div class="row">
   <aside class="col-xs-12 col-md-3 hg-d-none md:hg-d-block p-16"
-         style="border-right: 1px solid var(--hg-color-sk-grey);">
+         style="border-right: 1px solid var(--hg-color-middle-grey);">
     <nav class="hg-d-flex hg-flex-column hg-gap-8">
       <a class="hg-text-m" href="#">Sección 1</a>
       <a class="hg-text-m" href="#">Sección 2</a>
@@ -601,7 +601,7 @@ Clases para mantener proporciones en contenedores.
 ### Footer multicolumna
 ```html
-<footer class="pt-48 pb-24" style="background: var(--hg-color-charcoal); color: var(--hg-color-white);">
+<footer class="pt-48 pb-24" style="background: var(--hg-color-grey-ultra); color: var(--hg-color-white);">
   <div class="row hg-px-16 md:hg-px-32 hg-gap-24">
     <div class="col-xs-12 col-md-4">
       <h4 class="hg-title-l-b" style="color: var(--hg-color-white);">Empresa</h4>