holygrail5 1.0.21 → 1.0.23

package/src/docs-generator/sections/colors-section.js

@@ -11,6 +11,8 @@
 //     fondos neutros (`bg-light`, `bg-cream`, `orange`, `mustard`)
 //     → primarios. El resto → semánticos.
 
+const { escapeHtml } = require('../../generators/utils');
+
 const DEFAULT_PRIMARY_KEYS = ['bg-light', 'bg-cream', 'orange', 'mustard'];
 
 function isPrimaryColorKey(key) {
@@ -49,15 +51,23 @@ function renderColorCard(key, value, prefix, changedValues) {
       ? normalizedValue
       : (normalizedValue.length === 9 ? normalizedValue.substring(0, 7) : normalizedValue);
 
+  // Escapamos cada valor del config antes de interpolarlo. Para valores
+  // limpios (claves kebab-case, hex como #ffffff) el escape es idéntico,
+  // así que la guía no cambia; sólo blinda valores con caracteres especiales.
+  const eKey = escapeHtml(key);
+  const eValue = escapeHtml(value);
+  const eVarName = escapeHtml(varName);
+  const eOpaque = escapeHtml(opaqueValue);
+
   return `
-          <div class="guide-color-card" data-copy-value="${varName}" title="Click para copiar ${varName}">
-            <div class="guide-color-preview" style="--color-value: ${opaqueValue};">
+          <div class="guide-color-card" data-copy-value="${eVarName}" title="Click para copiar ${eVarName}">
+            <div class="guide-color-preview" style="--color-value: ${eOpaque};">
               ${isLight ? `<div class="guide-color-pattern"></div>` : ''}
             </div>
             <div class="guide-color-card-content">
-              <div class="guide-color-name">${key}</div>
-              <div class="guide-color-var-name" data-copy-value="${varName}" title="Click para copiar ${varName}">${varName}</div>
-              <div class="guide-color-value ${isChanged ? 'guide-changed' : ''}" data-copy-value="${value}" title="Click para copiar ${value}">${value}</div>
+              <div class="guide-color-name">${eKey}</div>
+              <div class="guide-color-var-name" data-copy-value="${eVarName}" title="Click para copiar ${eVarName}">${eVarName}</div>
+              <div class="guide-color-value ${isChanged ? 'guide-changed' : ''}" data-copy-value="${eValue}" title="Click para copiar ${eValue}">${eValue}</div>
             </div>
           </div>`;
 }

package/src/generators/typo-generator.js

@@ -198,8 +198,7 @@ function generateClassCSS(className, cls, breakpointName, valueMap, prefix, cate
       varName = getSharedVarName(prop, props[prop], prefix, category);
     }
     
-    const importantFlag = prop === 'lineHeight' ? ' !important' : '';
-    cssProps.push(`    ${toKebabCase(prop)}: var(${varName})${importantFlag};`);
+    cssProps.push(`    ${toKebabCase(prop)}: var(${varName});`);
   });
   
   return cssProps.length ? `  .${className} {\n${cssProps.join('\n')}\n  }` : '';

package/src/generators/utils.js

@@ -4,6 +4,20 @@
 const fs = require('fs');
 const path = require('path');
 
+// Escapa caracteres especiales de HTML para evitar inyección al volcar
+// valores del config en la guía y las demos. Escapa también comillas
+// (" y ') porque muchos valores se interpolan dentro de atributos
+// (title="...", style="...", data-copy-value="..."): sin escapar las
+// comillas, un valor podría romper el atributo y reabrir el contexto.
+function escapeHtml(str) {
+  return String(str)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
 // Convierte nombres de propiedades de JavaScript (camelCase) a formato CSS (kebab-case)
 // Por ejemplo, "fontSize" se convierte en "font-size" para usarlo en CSS
 function toKebabCase(str) {
@@ -200,6 +214,7 @@ function applyThemeTypographyOverrides(config, themeData) {
 }
 
 module.exports = {
+  escapeHtml,
   toKebabCase,
   pxToRem,
   remToPx,

package/themes/_base/_radios.css

@@ -33,7 +33,7 @@
   padding-bottom: 0;
   cursor: pointer;
   font-weight: normal;
-  font-size: var(--hg-typo-font-size-xs, 12px);
+  font-size: var(--hg-typo-font-size-12);
   text-align: initial;
   display: flex;
   flex-direction: column;
@@ -52,7 +52,8 @@
   outline: 0;
   display: inline-block;
   vertical-align: top;
-  margin: 0 var(--hg-spacing-10, 10px) 0 0;
+  /* Geometría del componente (círculo 14px + hueco): valor propio, no de la escala de spacing */
+  margin: 0 10px 0 0;
   border-radius: 0;
 }
 
@@ -61,7 +62,7 @@
   display: inline-block;
   vertical-align: top;
   margin: 0;
-  line-height: var(--hg-typo-line-height-sm, 16px);
+  line-height: 16px;
   padding-left: var(--hg-spacing-24);
   min-height: 20px;
 }
@@ -127,7 +128,7 @@
 }
 
 .check-center .box3-content {
-  padding-left: var(--hg-spacing-30, 30px);
+  padding-left: 30px; /* geometría: círculo + hueco, no escala de spacing */
 }
 
 .check-center.checkbox-radio [type=radio]:checked + label .border-1,
@@ -171,7 +172,7 @@
 }
 
 .check-top .box3-content {
-  padding-left: var(--hg-spacing-30, 30px);
+  padding-left: 30px; /* geometría: círculo + hueco, no escala de spacing */
 }
 
 .check-top.checkbox-radio [type=radio]:checked + label .border-1,
@@ -192,7 +193,7 @@
 }
 
 .check-clear .box3-content {
-  padding-left: var(--hg-spacing-30, 30px);
+  padding-left: 30px; /* geometría: círculo + hueco, no escala de spacing */
 }
 
 .check-clear.checkbox-radio [type=radio]:checked + label .border-1,

package/themes/dutti/README.md

@@ -397,6 +397,23 @@ Todos los componentes son responsive por defecto. Puedes usar las clases respons
 </html>
 ```
 
+## 🔤 Tipografías HolyGrail5 (labels mono)
+
+Además de los componentes del tema, puedes usar las clases tipográficas generadas desde `config.json` (prefijo `hg-`):
+
+| Clase | Variante | Fuente | Mobile | Desktop |
+|-------|----------|--------|--------|---------|
+| `.label-mono` | Regular | `suisse-mono-regular` | 10px / 120% | 10px / 120% |
+| `.label-mono-b` | Bold | `suisse-mono-bold` | 10px / 120% | 10px / 120% |
+
+Comportamiento alineado con `.label-s` / `.label-s-b` (uppercase, `letter-spacing: 0.06em`). Variables CSS: `--hg-typo-font-family-mono-regular`, `--hg-typo-font-family-mono-bold`.
+
+```html
+<span class="label-mono">Referencia SKU</span>
+<span class="label-mono-b">Nuevo</span>
+
+La tabla completa de tipografías del tema se genera en el build (`HG_TYPO_TABLE` en `demo.html` → `dist/themes/dutti-demo.html`).
+
 ## 📄 Ver Demo
 
 Abre `demo.html` en tu navegador para ver todos los componentes en acción:

package/themes/dutti/_variables.css

@@ -42,6 +42,7 @@
   --checkbox-border: var(--hg-color-middle-grey);
   --checkbox-checked-bg: var(--hg-color-primary);
   --checkbox-checked-border: var(--hg-color-primary);
+  --checkbox-check-color: var(--hg-color-white);
   
   --radio-bg: var(--hg-color-white);
   --radio-border: var(--hg-color-middle-grey);
@@ -73,6 +74,8 @@
   --hg-typo-font-family-primary-regular: "suisse-regular", Arial, Helvetica, sans-serif;
   --hg-typo-font-family-primary-bold: "suisse-semibold", Arial, Helvetica, sans-serif;
   --hg-typo-font-family-secondary: "suisse-medium", Arial, Helvetica, sans-serif;
+  --hg-typo-font-family-mono-regular: "suisse-mono-regular", Arial, Helvetica, sans-serif;
+  --hg-typo-font-family-mono-bold: "suisse-mono-bold", Arial, Helvetica, sans-serif;
   
   /* Bordes y radios */
   --border-radius: 0;

package/themes/dutti/theme.json

@@ -60,7 +60,8 @@
       "bg": "var(--hg-color-white)",
       "border": "var(--hg-color-middle-grey)",
       "checked-bg": "var(--hg-color-primary)",
-      "checked-border": "var(--hg-color-primary)"
+      "checked-border": "var(--hg-color-primary)",
+      "check-color": "var(--hg-color-white)"
     },
     "radio": {
       "bg": "var(--hg-color-white)",

package/themes/limited/_variables.css

@@ -77,6 +77,7 @@
   --checkbox-border: var(--hg-color-middle-grey);
   --checkbox-checked-bg: var(--hg-color-feel-dark);
   --checkbox-checked-border: var(--hg-color-feel-dark);
+  --checkbox-check-color: var(--hg-color-white);
 
   --radio-bg: var(--hg-color-white);
   --radio-border: var(--hg-color-middle-grey);

package/themes/limited/theme.json

@@ -79,7 +79,8 @@
       "bg": "var(--hg-color-white)",
       "border": "var(--hg-color-middle-grey)",
       "checked-bg": "var(--hg-color-feel-dark)",
-      "checked-border": "var(--hg-color-feel-dark)"
+      "checked-border": "var(--hg-color-feel-dark)",
+      "check-color": "var(--hg-color-white)"
     },
     "radio": {
       "bg": "var(--hg-color-white)",