holygrail5 1.0.21 → 1.0.22

package/dist/output.css

@@ -60,6 +60,8 @@ p, h1, h2, h3, h4, h5, h6 {
   --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", Consolas, Menlo, Monaco, "Courier New", monospace;
+  --hg-typo-font-family-mono-bold: "suisse-mono-bold", Consolas, Menlo, Monaco, "Courier New", monospace;
   --hg-typo-line-height-1: 1;
   --hg-typo-line-height-1-976: 1.976;
   --hg-typo-line-height-1-2: 1.2;
@@ -2214,14 +2216,14 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-regular);
     font-weight: var(--hg-typo-font-weight-300);
     font-size: var(--hg-typo-font-size-24);
-    line-height: var(--hg-typo-line-height-1) !important;
+    line-height: var(--hg-typo-line-height-1);
   }
 
   .h2 {
     font-family: var(--hg-typo-font-family-primary-bold);
     font-weight: var(--hg-typo-font-weight-600);
     font-size: var(--hg-typo-font-size-18);
-    line-height: var(--hg-typo-line-height-1-2) !important;
+    line-height: var(--hg-typo-line-height-1-2);
     letter-spacing: var(--hg-typo-letter-spacing-0);
     text-transform: var(--hg-typo-text-transform-none);
   }
@@ -2230,14 +2232,14 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-regular);
     font-weight: var(--hg-typo-font-weight-300);
     font-size: var(--hg-typo-font-size-12);
-    line-height: var(--hg-typo-line-height-1-4) !important;
+    line-height: var(--hg-typo-line-height-1-4);
   }
 
   .title-l {
     font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
     font-size: var(--hg-typo-font-size-12);
-    line-height: var(--hg-typo-line-height-1-4) !important;
+    line-height: var(--hg-typo-line-height-1-4);
     letter-spacing: var(--hg-typo-letter-spacing-0-16em);
     text-transform: var(--hg-typo-text-transform-uppercase);
   }
@@ -2246,7 +2248,7 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
     font-size: var(--hg-typo-font-size-12);
-    line-height: var(--hg-typo-line-height-1-4) !important;
+    line-height: var(--hg-typo-line-height-1-4);
     letter-spacing: var(--hg-typo-letter-spacing-0-16em);
   }
 
@@ -2254,7 +2256,7 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-regular);
     font-weight: var(--hg-typo-font-weight-300);
     font-size: var(--hg-typo-font-size-10);
-    line-height: var(--hg-typo-line-height-1-4) !important;
+    line-height: var(--hg-typo-line-height-1-4);
     letter-spacing: var(--hg-typo-letter-spacing-0-16em);
   }
 
@@ -2262,7 +2264,7 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
     font-size: var(--hg-typo-font-size-10);
-    line-height: var(--hg-typo-line-height-1-4) !important;
+    line-height: var(--hg-typo-line-height-1-4);
     letter-spacing: var(--hg-typo-letter-spacing-0-16em);
     text-transform: var(--hg-typo-text-transform-uppercase);
   }
@@ -2271,7 +2273,7 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
     font-size: var(--hg-typo-font-size-13);
-    line-height: var(--hg-typo-line-height-1-5) !important;
+    line-height: var(--hg-typo-line-height-1-5);
     letter-spacing: var(--hg-typo-letter-spacing-0-04em);
   }
 
@@ -2279,7 +2281,7 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
     font-size: var(--hg-typo-font-size-12);
-    line-height: var(--hg-typo-line-height-1-5) !important;
+    line-height: var(--hg-typo-line-height-1-5);
     letter-spacing: var(--hg-typo-letter-spacing-0-04em);
   }
 
@@ -2287,7 +2289,7 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
     font-size: var(--hg-typo-font-size-9);
-    line-height: var(--hg-typo-line-height-1) !important;
+    line-height: var(--hg-typo-line-height-1);
     letter-spacing: var(--hg-typo-letter-spacing-0-16em);
   }
 
@@ -2295,7 +2297,7 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
     font-size: var(--hg-typo-font-size-12);
-    line-height: var(--hg-typo-line-height-1-5) !important;
+    line-height: var(--hg-typo-line-height-1-5);
     letter-spacing: var(--hg-typo-letter-spacing-0-04em);
   }
 
@@ -2303,7 +2305,7 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-regular);
     font-weight: var(--hg-typo-font-weight-300);
     font-size: var(--hg-typo-font-size-12);
-    line-height: var(--hg-typo-line-height-1-5) !important;
+    line-height: var(--hg-typo-line-height-1-5);
     letter-spacing: var(--hg-typo-letter-spacing-0-04em);
   }
 
@@ -2311,7 +2313,7 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
     font-size: var(--hg-typo-font-size-12);
-    line-height: var(--hg-typo-line-height-1-5) !important;
+    line-height: var(--hg-typo-line-height-1-5);
     letter-spacing: var(--hg-typo-letter-spacing-0-04em);
   }
 
@@ -2319,7 +2321,7 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-regular);
     font-weight: var(--hg-typo-font-weight-300);
     font-size: var(--hg-typo-font-size-12);
-    line-height: var(--hg-typo-line-height-1-5) !important;
+    line-height: var(--hg-typo-line-height-1-5);
     letter-spacing: var(--hg-typo-letter-spacing-0-04em);
   }
 
@@ -2327,7 +2329,7 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
     font-size: var(--hg-typo-font-size-12);
-    line-height: var(--hg-typo-line-height-1) !important;
+    line-height: var(--hg-typo-line-height-1);
     letter-spacing: var(--hg-typo-letter-spacing-0-16em);
     text-transform: var(--hg-typo-text-transform-uppercase);
   }
@@ -2336,7 +2338,7 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-regular);
     font-weight: var(--hg-typo-font-weight-300);
     font-size: var(--hg-typo-font-size-12);
-    line-height: var(--hg-typo-line-height-1) !important;
+    line-height: var(--hg-typo-line-height-1);
     letter-spacing: var(--hg-typo-letter-spacing-0-16em);
     text-transform: var(--hg-typo-text-transform-uppercase);
   }
@@ -2345,7 +2347,7 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
     font-size: var(--hg-typo-font-size-10);
-    line-height: var(--hg-typo-line-height-1) !important;
+    line-height: var(--hg-typo-line-height-1);
     letter-spacing: var(--hg-typo-letter-spacing-0-06em);
     text-transform: var(--hg-typo-text-transform-uppercase);
   }
@@ -2354,7 +2356,25 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-regular);
     font-weight: var(--hg-typo-font-weight-300);
     font-size: var(--hg-typo-font-size-10);
-    line-height: var(--hg-typo-line-height-1) !important;
+    line-height: var(--hg-typo-line-height-1);
+    letter-spacing: var(--hg-typo-letter-spacing-0-06em);
+    text-transform: var(--hg-typo-text-transform-uppercase);
+  }
+
+  .label-mono {
+    font-family: var(--hg-typo-font-family-suisse-mono-regular);
+    font-weight: var(--hg-typo-font-weight-400);
+    font-size: var(--hg-typo-font-size-10);
+    line-height: var(--hg-typo-line-height-1-2);
+    letter-spacing: var(--hg-typo-letter-spacing-0-06em);
+    text-transform: var(--hg-typo-text-transform-uppercase);
+  }
+
+  .label-mono-b {
+    font-family: var(--hg-typo-font-family-suisse-mono-bold);
+    font-weight: var(--hg-typo-font-weight-700);
+    font-size: var(--hg-typo-font-size-10);
+    line-height: var(--hg-typo-line-height-1-2);
     letter-spacing: var(--hg-typo-letter-spacing-0-06em);
     text-transform: var(--hg-typo-text-transform-uppercase);
   }
@@ -2368,14 +2388,14 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-regular);
     font-weight: var(--hg-typo-font-weight-300);
     font-size: var(--hg-typo-font-size-24);
-    line-height: var(--hg-typo-line-height-1) !important;
+    line-height: var(--hg-typo-line-height-1);
   }
 
   .h2 {
     font-family: var(--hg-typo-font-family-primary-bold);
     font-weight: var(--hg-typo-font-weight-600);
     font-size: var(--hg-typo-font-size-24);
-    line-height: var(--hg-typo-line-height-1-2) !important;
+    line-height: var(--hg-typo-line-height-1-2);
     letter-spacing: var(--hg-typo-letter-spacing-0);
     text-transform: var(--hg-typo-text-transform-none);
   }
@@ -2384,14 +2404,14 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-regular);
     font-weight: var(--hg-typo-font-weight-300);
     font-size: var(--hg-typo-font-size-13);
-    line-height: var(--hg-typo-line-height-1-4) !important;
+    line-height: var(--hg-typo-line-height-1-4);
   }
 
   .title-l {
     font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
     font-size: var(--hg-typo-font-size-13);
-    line-height: var(--hg-typo-line-height-1-4) !important;
+    line-height: var(--hg-typo-line-height-1-4);
     letter-spacing: var(--hg-typo-letter-spacing-0-16em);
     text-transform: var(--hg-typo-text-transform-uppercase);
   }
@@ -2400,7 +2420,7 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
     font-size: var(--hg-typo-font-size-13);
-    line-height: var(--hg-typo-line-height-1-4) !important;
+    line-height: var(--hg-typo-line-height-1-4);
     letter-spacing: var(--hg-typo-letter-spacing-0-16em);
   }
 
@@ -2408,7 +2428,7 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-regular);
     font-weight: var(--hg-typo-font-weight-300);
     font-size: var(--hg-typo-font-size-10);
-    line-height: var(--hg-typo-line-height-1-4) !important;
+    line-height: var(--hg-typo-line-height-1-4);
     letter-spacing: var(--hg-typo-letter-spacing-0-16em);
   }
 
@@ -2416,7 +2436,7 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
     font-size: var(--hg-typo-font-size-10);
-    line-height: var(--hg-typo-line-height-1-4) !important;
+    line-height: var(--hg-typo-line-height-1-4);
     letter-spacing: var(--hg-typo-letter-spacing-0-16em);
     text-transform: var(--hg-typo-text-transform-uppercase);
   }
@@ -2425,7 +2445,7 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
     font-size: var(--hg-typo-font-size-13);
-    line-height: var(--hg-typo-line-height-1-5) !important;
+    line-height: var(--hg-typo-line-height-1-5);
     letter-spacing: var(--hg-typo-letter-spacing-0-04em);
   }
 
@@ -2433,7 +2453,7 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
     font-size: var(--hg-typo-font-size-12);
-    line-height: var(--hg-typo-line-height-1-5) !important;
+    line-height: var(--hg-typo-line-height-1-5);
     letter-spacing: var(--hg-typo-letter-spacing-0-04em);
   }
 
@@ -2441,7 +2461,7 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
     font-size: var(--hg-typo-font-size-10);
-    line-height: var(--hg-typo-line-height-1) !important;
+    line-height: var(--hg-typo-line-height-1);
     letter-spacing: var(--hg-typo-letter-spacing-0-16em);
   }
 
@@ -2449,7 +2469,7 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
     font-size: var(--hg-typo-font-size-13);
-    line-height: var(--hg-typo-line-height-1-5) !important;
+    line-height: var(--hg-typo-line-height-1-5);
     letter-spacing: var(--hg-typo-letter-spacing-0-04em);
   }
 
@@ -2457,7 +2477,7 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-regular);
     font-weight: var(--hg-typo-font-weight-300);
     font-size: var(--hg-typo-font-size-13);
-    line-height: var(--hg-typo-line-height-1-5) !important;
+    line-height: var(--hg-typo-line-height-1-5);
     letter-spacing: var(--hg-typo-letter-spacing-0-04em);
   }
 
@@ -2465,7 +2485,7 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
     font-size: var(--hg-typo-font-size-12);
-    line-height: var(--hg-typo-line-height-1-5) !important;
+    line-height: var(--hg-typo-line-height-1-5);
     letter-spacing: var(--hg-typo-letter-spacing-0-04em);
   }
 
@@ -2473,7 +2493,7 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-regular);
     font-weight: var(--hg-typo-font-weight-300);
     font-size: var(--hg-typo-font-size-12);
-    line-height: var(--hg-typo-line-height-1-5) !important;
+    line-height: var(--hg-typo-line-height-1-5);
     letter-spacing: var(--hg-typo-letter-spacing-0-04em);
   }
 
@@ -2481,7 +2501,7 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
     font-size: var(--hg-typo-font-size-12);
-    line-height: var(--hg-typo-line-height-1) !important;
+    line-height: var(--hg-typo-line-height-1);
     letter-spacing: var(--hg-typo-letter-spacing-0-16em);
     text-transform: var(--hg-typo-text-transform-uppercase);
   }
@@ -2490,7 +2510,7 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-regular);
     font-weight: var(--hg-typo-font-weight-300);
     font-size: var(--hg-typo-font-size-12);
-    line-height: var(--hg-typo-line-height-1) !important;
+    line-height: var(--hg-typo-line-height-1);
     letter-spacing: var(--hg-typo-letter-spacing-0-16em);
     text-transform: var(--hg-typo-text-transform-uppercase);
   }
@@ -2499,7 +2519,7 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-light);
     font-weight: var(--hg-typo-font-weight-100);
     font-size: var(--hg-typo-font-size-10);
-    line-height: var(--hg-typo-line-height-1) !important;
+    line-height: var(--hg-typo-line-height-1);
     letter-spacing: var(--hg-typo-letter-spacing-0-06em);
     text-transform: var(--hg-typo-text-transform-uppercase);
   }
@@ -2508,7 +2528,25 @@ p, h1, h2, h3, h4, h5, h6 {
     font-family: var(--hg-typo-font-family-primary-regular);
     font-weight: var(--hg-typo-font-weight-300);
     font-size: var(--hg-typo-font-size-10);
-    line-height: var(--hg-typo-line-height-1) !important;
+    line-height: var(--hg-typo-line-height-1);
+    letter-spacing: var(--hg-typo-letter-spacing-0-06em);
+    text-transform: var(--hg-typo-text-transform-uppercase);
+  }
+
+  .label-mono {
+    font-family: var(--hg-typo-font-family-suisse-mono-regular);
+    font-weight: var(--hg-typo-font-weight-400);
+    font-size: var(--hg-typo-font-size-10);
+    line-height: var(--hg-typo-line-height-1-2);
+    letter-spacing: var(--hg-typo-letter-spacing-0-06em);
+    text-transform: var(--hg-typo-text-transform-uppercase);
+  }
+
+  .label-mono-b {
+    font-family: var(--hg-typo-font-family-suisse-mono-bold);
+    font-weight: var(--hg-typo-font-weight-700);
+    font-size: var(--hg-typo-font-size-10);
+    line-height: var(--hg-typo-line-height-1-2);
     letter-spacing: var(--hg-typo-letter-spacing-0-06em);
     text-transform: var(--hg-typo-text-transform-uppercase);
   }

package/dist/skills.html

@@ -436,7 +436,11 @@ border-color: var(--hg-color-error);
 
 <!-- Body variants -->
 <p class="hg-hg-body-m">Body medium (12→13px)</p>
-&lt;p class="hg-hg-body-m-b"&gt;Body medium bold (weight 400)&lt;/p&gt;</code></div>
+&lt;p class="hg-hg-body-m-b"&gt;Body medium bold (weight 400)&lt;/p&gt;
+
+&lt;!-- Labels mono (Suisse Intl Mono, 10px / 120%) --&gt;
+&lt;span class="label-mono"&gt;Label mono regular&lt;/span&gt;
+&lt;span class="label-mono-b"&gt;Label mono bold&lt;/span&gt;</code></div>
 <h4 class="sk-md-h3">Cómo funciona</h4>
 <p class="sk-md-p">Las clases son mobile-first. Los valores base aplican a mobile y un media query <code class="sk-inline-code">@media (min-width: 992px)</code> sobrescribe para desktop.</p>
 <div class="sk-code-block"><code>/* CSS generado (ejemplo) */

package/dist/themes/dutti-demo.html

@@ -799,6 +799,28 @@
           <td><span class="hg-typo-num">1</span></td>
           <td>0.06em</td>
           <td>uppercase</td>
+        </tr>
+        <tr>
+          <td class="hg-typo-preview"><span class="label-mono">Aa Bb Cc 123</span></td>
+          <td><code>.label-mono</code></td>
+          <td><code>suisse-mono-regular</code> <span class="hg-typo-meta">&quot;suisse-mono-regular&quot;, Arial, Helvetica, sans-serif</span></td>
+          <td>400</td>
+          <td><span class="hg-typo-num">10px</span></td>
+          <td><span class="hg-typo-num">10px</span></td>
+          <td><span class="hg-typo-num">1.2</span></td>
+          <td>0.06em</td>
+          <td>uppercase</td>
+        </tr>
+        <tr>
+          <td class="hg-typo-preview"><span class="label-mono-b">Aa Bb Cc 123</span></td>
+          <td><code>.label-mono-b</code></td>
+          <td><code>suisse-mono-bold</code> <span class="hg-typo-meta">&quot;suisse-mono-bold&quot;, Arial, Helvetica, sans-serif</span></td>
+          <td>700</td>
+          <td><span class="hg-typo-num">10px</span></td>
+          <td><span class="hg-typo-num">10px</span></td>
+          <td><span class="hg-typo-num">1.2</span></td>
+          <td>0.06em</td>
+          <td>uppercase</td>
         </tr>
             </tbody>
           </table>

package/dist/themes/dutti.css

@@ -74,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/dist/themes/limited-demo.html

@@ -803,6 +803,28 @@
           <td><span class="hg-typo-num">1</span></td>
           <td>0.06em</td>
           <td>uppercase</td>
+        </tr>
+        <tr>
+          <td class="hg-typo-preview"><span class="label-mono">Aa Bb Cc 123</span></td>
+          <td><code>.label-mono</code></td>
+          <td><code>suisse-mono-regular</code> <span class="hg-typo-meta">&quot;suisse-mono-regular&quot;, Arial, Helvetica, sans-serif</span></td>
+          <td>400</td>
+          <td><span class="hg-typo-num">10px</span></td>
+          <td><span class="hg-typo-num">10px</span></td>
+          <td><span class="hg-typo-num">1.2</span></td>
+          <td>0.06em</td>
+          <td>uppercase</td>
+        </tr>
+        <tr>
+          <td class="hg-typo-preview"><span class="label-mono-b">Aa Bb Cc 123</span></td>
+          <td><code>.label-mono-b</code></td>
+          <td><code>suisse-mono-bold</code> <span class="hg-typo-meta">&quot;suisse-mono-bold&quot;, Arial, Helvetica, sans-serif</span></td>
+          <td>700</td>
+          <td><span class="hg-typo-num">10px</span></td>
+          <td><span class="hg-typo-num">10px</span></td>
+          <td><span class="hg-typo-num">1.2</span></td>
+          <td>0.06em</td>
+          <td>uppercase</td>
         </tr>
             </tbody>
           </table>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "holygrail5",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "Framework CSS generator con Node.js - Genera CSS optimizado con variables CSS desde un archivo JSON de configuración",
   "main": "generate-css.js",
   "style": "dist/output.css",
@@ -49,6 +49,6 @@
     "dist/**/*"
   ],
   "engines": {
-    "node": ">=12.0.0"
+    "node": ">=18.0.0"
   }
 }

package/src/.data/.previous-values.json

@@ -7,7 +7,9 @@
     "primary-light": "\"suisse-light\", Arial, Helvetica, sans-serif",
     "primary-regular": "\"suisse-regular\", Arial, Helvetica, sans-serif",
     "primary-bold": "\"suisse-semibold\", Arial, Helvetica, sans-serif",
-    "secondary": "\"suisse-medium\", Arial, Helvetica, sans-serif"
+    "secondary": "\"suisse-medium\", Arial, Helvetica, sans-serif",
+    "mono-regular": "\"suisse-mono-regular\", Consolas, Menlo, Monaco, \"Courier New\", monospace",
+    "mono-bold": "\"suisse-mono-bold\", Consolas, Menlo, Monaco, \"Courier New\", monospace"
   },
   "spacingMap": {
     "0": "0",
@@ -306,6 +308,34 @@
         "fontSize": "10px",
         "lineHeight": "1"
       }
+    },
+    "label-mono": {
+      "fontFamily": "\"suisse-mono-regular\", Arial, Helvetica, sans-serif",
+      "fontWeight": "400",
+      "letterSpacing": "0.06em",
+      "textTransform": "uppercase",
+      "mobile": {
+        "fontSize": "10px",
+        "lineHeight": "1.2"
+      },
+      "desktop": {
+        "fontSize": "10px",
+        "lineHeight": "1.2"
+      }
+    },
+    "label-mono-b": {
+      "fontFamily": "\"suisse-mono-bold\", Arial, Helvetica, sans-serif",
+      "fontWeight": "700",
+      "letterSpacing": "0.06em",
+      "textTransform": "uppercase",
+      "mobile": {
+        "fontSize": "10px",
+        "lineHeight": "1.2"
+      },
+      "desktop": {
+        "fontSize": "10px",
+        "lineHeight": "1.2"
+      }
     }
   },
   "variables": {
@@ -314,6 +344,8 @@
     "--hg-typo-font-family-serif": "'Playfair Display', 'Georgia', serif",
     "--hg-typo-font-family-primary-light": "\"suisse-light\", Arial, Helvetica, sans-serif",
     "--hg-typo-font-family-primary-bold": "\"suisse-semibold\", 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",
     "--hg-typo-line-height-1": "1",
     "--hg-typo-line-height-1-976": "1.976",
     "--hg-typo-line-height-1-2": "1.2",

package/src/build/theme-transformer.js

@@ -247,7 +247,10 @@ class ThemeTransformer {
       if (config) {
         const typoConfig = applyThemeTypographyOverrides(config, themeData);
         const typoSection = generateTypographyHTML(typoConfig);
-        content = content.replace(/<!--\s*HG_TYPO_TABLE\s*-->/g, typoSection);
+        // Usamos un replacer de función: si `typoSection` contiene `$`
+        // (frecuente en CSS), pasarlo como string de reemplazo haría que
+        // `replace` interpretara `$&`, `$1`, `$$`… y corrompiera la salida.
+        content = content.replace(/<!--\s*HG_TYPO_TABLE\s*-->/g, () => typoSection);
       } else {
         // Sin config, eliminamos el placeholder para no mostrarlo en crudo
         content = content.replace(/<!--\s*HG_TYPO_TABLE\s*-->/g, '');
@@ -257,7 +260,9 @@ class ThemeTransformer {
       // Si no lo hay, quitamos el placeholder para no dejar comentarios huérfanos.
       if (themeData) {
         const themeBlock = generateThemeBlockHTML(themeData, config);
-        content = content.replace(/<!--\s*HG_THEME_BLOCK\s*-->/g, themeBlock);
+        // Replacer de función por el mismo motivo que el bloque de tipografía:
+        // blindar la salida frente a `$` en el contenido inyectado.
+        content = content.replace(/<!--\s*HG_THEME_BLOCK\s*-->/g, () => themeBlock);
       } else {
         content = content.replace(/<!--\s*HG_THEME_BLOCK\s*-->/g, '');
       }
@@ -291,7 +296,9 @@ class ThemeTransformer {
       // la lista de temas activos, se respeta; si no, se cae al
       // fallback estático THEMES_IN_NAV (compatibilidad).
       const headerAndSidebarHTML = buildHeaderAndSidebar(themeName, themesForNav);
-      content = content.replace(/(<body[^>]*>)/i, '$1\n' + headerAndSidebarHTML);
+      // Replacer de función: preserva el `<body>` capturado y evita que un
+      // `$` en las etiquetas del tema (themesForNav) se interprete como patrón.
+      content = content.replace(/(<body[^>]*>)/i, (m) => m + '\n' + headerAndSidebarHTML);
 
       // Eliminar el título h1 del contenido si existe (ya está en el header)
       content = content.replace(/<h1 class="demo-title">Sistema de Theming [^<]+<\/h1>\s*/g, '');

package/src/dev-server.js

@@ -36,7 +36,10 @@ function listenOnAvailablePort(server, initialPort) {
       };
 
       server.once('error', onError);
-      server.listen(currentPort, () => {
+      // Bind explícito a loopback: es un servidor de desarrollo y no debe
+      // quedar expuesto en la red local (el default de Node escucha en
+      // todas las interfaces).
+      server.listen(currentPort, '127.0.0.1', () => {
         server.removeListener('error', onError);
         resolve(currentPort);
       });
@@ -73,22 +76,34 @@ function getMimeType(filePath) {
 // Servidor HTTP simple y rápido
 function createServer() {
   return http.createServer((req, res) => {
-    // Decodificar URL
-    let filePath = decodeURIComponent(req.url);
-    
+    // Decodificar URL. Una URL con secuencias %-malformadas hace que
+    // decodeURIComponent lance URIError; sin este try/catch la excepción
+    // quedaría sin capturar y tumbaría el proceso del servidor (DoS con
+    // un solo request tipo `GET /%`).
+    let filePath;
+    try {
+      filePath = decodeURIComponent(req.url);
+    } catch (e) {
+      res.writeHead(400, { 'Content-Type': 'text/plain' });
+      res.end('400 Bad Request');
+      return;
+    }
+
+    // Eliminar query string (antes de normalizar la ruta)
+    filePath = filePath.split('?')[0];
+
     // Si es la raíz, servir index.html
     if (filePath === '/' || filePath === '') {
       filePath = '/index.html';
     }
-    
-    // Eliminar query string
-    filePath = filePath.split('?')[0];
-    
-    // Construir ruta completa
-    const fullPath = path.join(DIST_DIR, filePath);
-    
-    // Verificar que el archivo esté dentro de dist/
-    if (!fullPath.startsWith(DIST_DIR)) {
+
+    // Construir ruta completa y normalizar
+    const fullPath = path.resolve(DIST_DIR, '.' + path.sep + filePath);
+
+    // Verificar que el archivo esté DENTRO de dist/. Comparamos con el
+    // separador final para que un directorio hermano con prefijo común
+    // (p. ej. `dist-backup/`) no pase el filtro de `startsWith`.
+    if (fullPath !== DIST_DIR && !fullPath.startsWith(DIST_DIR + path.sep)) {
       res.writeHead(403, { 'Content-Type': 'text/plain' });
       res.end('Forbidden');
       return;

package/src/docs-generator/guide-styles.css

@@ -41,6 +41,22 @@
        url('assets/fonts/suisse-intl-semibold.woff2') format('woff2'),
        url('assets/fonts/suisse-intl-semibold.woff') format('woff');
 }
+@font-face {
+  font-family: "suisse-mono-regular";
+  font-weight: 400;
+  font-display: swap;
+  src: local("SuisseIntlMono-Regular"),
+       url('assets/fonts/SuisseIntlMono-Regular-WebS.woff2') format('woff2'),
+       url('assets/fonts/SuisseIntlMono-Regular-WebS.woff') format('woff');
+}
+@font-face {
+  font-family: "suisse-mono-bold";
+  font-weight: 700;
+  font-display: swap;
+  src: local("SuisseIntlMono-Bold"),
+       url('assets/fonts/SuisseIntlMono-Bold-WebS.woff2') format('woff2'),
+       url('assets/fonts/SuisseIntlMono-Bold-WebS.woff') format('woff');
+}
 /* Suisse Works (serif) — reservado para el tema Limited */
 @font-face {
   font-family: "suisse-works-regular";