holygrail5 1.0.19 → 1.0.21

package/src/build/typo-table-generator.js

@@ -0,0 +1,154 @@
+// Generador de la sección "Tipografía" para las demos de tema
+// Lee config.typo y produce una tabla HTML con: clase, family, weight,
+// mobile (size), desktop (size), line-height compartida, preview en vivo.
+// La fuente de verdad es config.json — así el demo siempre refleja
+// exactamente lo que existe en dist/output.css.
+//
+// Nota: el line-height casi siempre coincide entre breakpoints, por
+// eso se muestra en una sola columna. Si mobile y desktop divergen,
+// formatLineHeight cae a mostrar ambos separados por una barra.
+
+const { getFontFamilyName } = require('../generators/utils');
+
+const SAMPLE_TEXT = 'Aa Bb Cc 123';
+
+function escapeHtml(str) {
+  if (str === undefined || str === null) return '';
+  return String(str)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+function formatSize(bp) {
+  if (!bp || !bp.fontSize) return '<span class="hg-typo-empty">—</span>';
+  return `<span class="hg-typo-num">${escapeHtml(bp.fontSize)}</span>`;
+}
+
+function formatLineHeight(mobile, desktop) {
+  const m = mobile && mobile.lineHeight;
+  const d = desktop && desktop.lineHeight;
+  if (!m && !d) return '<span class="hg-typo-empty">—</span>';
+  if (m && d && m === d) return `<span class="hg-typo-num">${escapeHtml(m)}</span>`;
+  // Fallback: valores distintos → mostrar mobile / desktop explícitamente
+  return `<span class="hg-typo-num">${escapeHtml(m || '—')}</span> <span class="hg-typo-meta">/ ${escapeHtml(d || '—')}</span>`;
+}
+
+function formatFamily(fontFamily, fontFamilyMap) {
+  if (!fontFamily) return '—';
+  const alias = getFontFamilyName(fontFamily, fontFamilyMap || {});
+  // alias puede coincidir con la familia real; si difiere, mostramos ambas
+  if (alias && alias !== fontFamily) {
+    return `<code>${escapeHtml(alias)}</code> <span class="hg-typo-meta">${escapeHtml(fontFamily)}</span>`;
+  }
+  return `<code>${escapeHtml(fontFamily)}</code>`;
+}
+
+function generateRow(className, cls, fontFamilyMap) {
+  const family = formatFamily(cls.fontFamily, fontFamilyMap);
+  const weight = cls.fontWeight ? escapeHtml(cls.fontWeight) : '—';
+  const ls = cls.letterSpacing ? escapeHtml(cls.letterSpacing) : '—';
+  const tt = cls.textTransform ? escapeHtml(cls.textTransform) : '—';
+
+  return `        <tr>
+          <td class="hg-typo-preview"><span class="${escapeHtml(className)}">${SAMPLE_TEXT}</span></td>
+          <td><code>.${escapeHtml(className)}</code></td>
+          <td>${family}</td>
+          <td>${weight}</td>
+          <td>${formatSize(cls.mobile)}</td>
+          <td>${formatSize(cls.desktop)}</td>
+          <td>${formatLineHeight(cls.mobile, cls.desktop)}</td>
+          <td>${ls}</td>
+          <td>${tt}</td>
+        </tr>`;
+}
+
+/**
+ * Genera la sección HTML con la tabla de tipografías.
+ * Devuelve string vacío si no hay clases en config.typo (sin romper builds).
+ */
+function generateTypographyHTML(config) {
+  const typo = config && config.typo;
+  if (!typo || Object.keys(typo).length === 0) return '';
+
+  const fontFamilyMap = (config && config.fontFamilyMap) || {};
+
+  const rows = Object.entries(typo)
+    .map(([className, cls]) => generateRow(className, cls, fontFamilyMap))
+    .join('\n');
+
+  // Estilos locales: la tabla vive dentro de la demo, no del CSS principal.
+  // Mantengo todo en línea para que el snippet sea autocontenido y
+  // ThemeTransformer pueda inyectarlo donde encuentre el placeholder.
+  return `      <section class="demo-section" id="typography">
+        <h2 class="demo-title">Tipografía</h2>
+        <p class="mb-24">
+          Cada fila usa la clase real generada en <code>dist/output.css</code> a partir de <code>config.json → typo</code>.
+          La columna <em>Preview</em> aplica la clase tal cual, así puedes comparar el valor numérico con el render en vivo.
+        </p>
+
+        <style>
+          .hg-typo-table-wrap { overflow-x: auto; }
+          .hg-typo-table {
+            width: 100%;
+            border-collapse: collapse;
+            font-family: arial, sans-serif;
+            font-size: 13px;
+          }
+          .hg-typo-table th,
+          .hg-typo-table td {
+            text-align: left;
+            padding: 10px 12px;
+            border-bottom: 1px solid var(--hg-color-middle-grey, #a9a9a9);
+            vertical-align: middle;
+          }
+          .hg-typo-table thead th {
+            font-weight: 700;
+            font-size: 11px;
+            text-transform: uppercase;
+            letter-spacing: 0.04em;
+            color: var(--hg-color-dark-grey, #737373);
+            border-bottom: 2px solid var(--hg-color-middle-grey, #a9a9a9);
+            background: var(--hg-color-bg-light, #f0f0f0);
+          }
+          .hg-typo-table tbody tr:hover { background: var(--hg-color-bg-light, #f0f0f0); }
+          .hg-typo-table code {
+            background: var(--hg-color-bg-light, #f0f0f0);
+            padding: 2px 6px;
+            border-radius: 3px;
+            font-size: 12px;
+          }
+          .hg-typo-preview {
+            min-width: 180px;
+            color: var(--hg-color-primary, #1d1d1d);
+          }
+          .hg-typo-num { font-weight: 700; }
+          .hg-typo-meta { color: var(--hg-color-dark-grey, #737373); font-size: 12px; }
+          .hg-typo-empty { color: var(--hg-color-middle-grey, #a9a9a9); }
+        </style>
+
+        <div class="hg-typo-table-wrap">
+          <table class="hg-typo-table">
+            <thead>
+              <tr>
+                <th>Preview</th>
+                <th>Clase</th>
+                <th>Font family</th>
+                <th>Weight</th>
+                <th>Mobile</th>
+                <th>Desktop</th>
+                <th>Line height</th>
+                <th>Letter spacing</th>
+                <th>Text transform</th>
+              </tr>
+            </thead>
+            <tbody>
+${rows}
+            </tbody>
+          </table>
+        </div>
+      </section>`;
+}
+
+module.exports = { generateTypographyHTML };

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

@@ -1,3 +1,72 @@
+/* ============================================
+   FUENTES — Suisse Intl (sans) + Suisse Works (serif)
+   Convención: una font-family por peso (suisse-light/regular/
+   medium/semibold) en lugar de una familia con varios pesos.
+   local() permite usar la fuente instalada en el sistema si
+   existe, evitando la descarga. font-display: swap evita el
+   FOIT — el texto se muestra con la fuente fallback y se
+   sustituye al cargar la web. Servimos woff2 (formato moderno,
+   más comprimido) con fallback a woff para navegadores muy
+   antiguos.
+   ============================================ */
+@font-face {
+  font-family: "suisse-light";
+  font-weight: 100;
+  font-display: swap;
+  src: local("SuisseIntl-Light"),
+       url('assets/fonts/suisse-intl-light.woff2') format('woff2'),
+       url('assets/fonts/suisse-intl-light.woff') format('woff');
+}
+@font-face {
+  font-family: "suisse-regular";
+  font-weight: 300;
+  font-display: swap;
+  src: local("SuisseIntl-Regular"),
+       url('assets/fonts/suisse-intl-regular.woff2') format('woff2'),
+       url('assets/fonts/suisse-intl-regular.woff') format('woff');
+}
+@font-face {
+  font-family: "suisse-medium";
+  font-weight: 400;
+  font-display: swap;
+  src: local("SuisseIntl-Medium"),
+       url('assets/fonts/suisse-intl-medium.woff2') format('woff2'),
+       url('assets/fonts/suisse-intl-medium.woff') format('woff');
+}
+@font-face {
+  font-family: "suisse-semibold";
+  font-weight: 500;
+  font-display: swap;
+  src: local("SuisseIntl-SemiBold"),
+       url('assets/fonts/suisse-intl-semibold.woff2') format('woff2'),
+       url('assets/fonts/suisse-intl-semibold.woff') format('woff');
+}
+/* Suisse Works (serif) — reservado para el tema Limited */
+@font-face {
+  font-family: "suisse-works-regular";
+  font-weight: 400;
+  font-display: swap;
+  src: local("SuisseWorks-Regular"),
+       url('assets/fonts/suisse-works-regular.woff2') format('woff2'),
+       url('assets/fonts/suisse-works-regular.woff') format('woff');
+}
+@font-face {
+  font-family: "suisse-works-medium";
+  font-weight: 500;
+  font-display: swap;
+  src: local("SuisseWorks-Medium"),
+       url('assets/fonts/suisse-works-medium.woff2') format('woff2'),
+       url('assets/fonts/suisse-works-medium.woff') format('woff');
+}
+@font-face {
+  font-family: "suisse-works-bold";
+  font-weight: 700;
+  font-display: swap;
+  src: local("SuisseWorks-Bold"),
+       url('assets/fonts/suisse-works-bold.woff2') format('woff2'),
+       url('assets/fonts/suisse-works-bold.woff') format('woff');
+}
+
 /* ============================================
    RESET Y BASE
    ============================================ */
@@ -8,7 +77,7 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: var(--hg-typo-font-family-primary);
+  font-family: var(--hg-typo-font-family-primary-regular);
 }
 
 h2 {
@@ -37,12 +106,12 @@ h2 {
   margin-bottom: 40px;
   font-weight: 500;
   color: #000;
-  font-family: "Instrument Sans", sans-serif;
+  font-family: var(--hg-typo-font-family-primary-bold);
   letter-spacing: 0;
 }
 
 .guide-main-content h3 {
-  font-family: helvetica;
+  font-family: var(--hg-typo-font-family-primary-regular);
   color: #000;
   font-size: 16px;
   line-height: 28px;
@@ -57,7 +126,7 @@ h2 {
   }
 
   .guide-main-content h3 {
-    font-family: helvetica;
+    font-family: var(--hg-typo-font-family-primary-regular);
     color: #000;
     font-size: 20px;
     line-height: 28px;
@@ -110,7 +179,7 @@ h2 {
   margin-top: 1rem;
   font-size: 28px;
   color: #000000;
-  font-family: "Instrument Sans", sans-serif;
+  font-family: var(--hg-typo-font-family-primary-light);
   margin-bottom: 20px;
 
   line-height: 1.2;
@@ -125,7 +194,7 @@ h2 {
   margin-top: 1rem;
   font-size: 28px;
   color: #000000;
-  font-family: "Instrument Sans", sans-serif;
+  font-family: var(--hg-typo-font-family-primary-light);
   margin-bottom: 20px;
 
   line-height: 1.2;
@@ -206,11 +275,14 @@ h2 {
   align-items: center;
 }
 .guide-nav a {
+  font-family: var(--hg-typo-font-family-primary-regular);
   font-size: 13px;
   color: #666;
   text-decoration: none;
   transition: color 0.2s;
   white-space: nowrap;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 .guide-nav a:hover {
   color: #000;
@@ -351,6 +423,102 @@ h2 {
   overflow: auto;
 }
 
+/* ============================================
+   VARIABLES CSS — Grid de 3 columnas compacto
+   ============================================ */
+.guide-variables-grid {
+  column-count: 2;
+  column-gap: 2rem;
+  margin-top: 0;
+  font-family: var(--hg-typo-font-family-primary-regular);
+}
+@media (max-width: 720px) {
+  .guide-variables-grid { column-count: 1; }
+}
+.guide-variables-group {
+  break-inside: avoid;
+  -webkit-column-break-inside: avoid;
+  page-break-inside: avoid;
+  margin: 0 0 1.5rem;
+  padding: 0.75rem 1rem;
+  border: 1px solid #e9e9e9;
+  border-radius: 6px;
+  background: #fff;
+  display: block;
+}
+.guide-variables-group-title {
+  margin: 0 0 0.5rem;
+  font-family: var(--hg-typo-font-family-primary-regular);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #737373;
+}
+.guide-variables-group-count {
+  color: #a9a9a9;
+  font-weight: 400;
+  margin-left: 0.25rem;
+}
+.guide-variables-group-list {
+  display: flex;
+  flex-direction: column;
+}
+.guide-variable-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.4rem 0;
+  border-bottom: 1px solid #efefef;
+  min-width: 0;
+  font-size: 0.72rem;
+}
+.guide-variables-group-list .guide-variable-item:last-child {
+  border-bottom: 0;
+}
+.guide-variable-item .guide-variable-name {
+  font-weight: 600;
+  color: #000;
+  word-break: break-all;
+  cursor: pointer;
+  line-height: 1.3;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.guide-variable-item .guide-variable-values {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+  flex-shrink: 0;
+  text-align: right;
+  font-size: 0.68rem;
+}
+.guide-variable-item .guide-variable-value {
+  color: #333;
+  cursor: pointer;
+  word-break: break-all;
+  max-width: 180px;
+}
+.guide-variable-item .guide-value-center-blue,
+.guide-variable-item .guide-value-center-orange {
+  cursor: pointer;
+  font-weight: 500;
+  white-space: nowrap;
+}
+.guide-variable-item .guide-changed {
+  background: transparent;
+}
+.guide-variable-item .guide-variable-swatch {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border-radius: 3px;
+  border: 1px solid #e3e3e3;
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+
 .guide-table {
   width: 100%;
   border-collapse: collapse;
@@ -413,7 +581,12 @@ h2 {
   padding: 0.75rem;
   min-height: 50px;
   font-size: 1.5rem;
-  font-weight: 600;
+  /* Dejamos que cada font-family muestre su peso natural. En
+     esta convención (una familia por peso) cada @font-face
+     declara un único font-weight, así que forzar un weight
+     aquí anula la diferencia visual entre light / regular /
+     medium / semibold. */
+  font-weight: normal;
 }
 
 /* Rectángulo de lados afectados (tabla spacing modernas) */
@@ -506,12 +679,12 @@ h2 {
 .guide-layout-class-name {
   font-weight: 600;
   color: #000000;
-  font-family: arial;
+  font-family: var(--hg-typo-font-family-primary-regular);
 }
 
 .guide-text-regular,
 .guide-table .guide-table-value {
-  font-family: arial;
+  font-family: var(--hg-typo-font-family-primary-regular);
   color: #333;
   font-size: 13px;
 }
@@ -521,7 +694,7 @@ h2 {
 .guide-table .guide-desktop-value,
 .guide-table .guide-value-center-blue {
   font-weight: 500;
-  font-family: arial;
+  font-family: var(--hg-typo-font-family-primary-regular);
   color: #000000;
 }
 
@@ -529,7 +702,7 @@ h2 {
 .guide-layout-property,
 .guide-color-var-name,
 .guide-color-value {
-  font-family: arial;
+  font-family: var(--hg-typo-font-family-primary-regular);
   color: #666;
   font-size: 13px;
 }
@@ -553,7 +726,7 @@ h2 {
 
 .guide-table .guide-value-center-orange {
   font-weight: 500;
-  font-family: arial;
+  font-family: var(--hg-typo-font-family-primary-regular);
   color: #cc6600;
 }
 
@@ -661,7 +834,7 @@ h2 {
 .guide-info-box-code-info {
   padding: 0.125rem 0.375rem;
   border-radius: 3px;
-  font-family: arial;
+  font-family: var(--hg-typo-font-family-primary-regular);
   font-size: 0.875rem;
 }
 
@@ -671,7 +844,7 @@ h2 {
   padding: 1rem;
   border-radius: 4px;
   overflow-x: auto;
-  font-family: arial;
+  font-family: var(--hg-typo-font-family-primary-regular);
   font-size: 12px;
   border-radius: 24px;
 	margin-bottom: 24px;
@@ -770,18 +943,18 @@ h2 {
    ============================================ */
 .guide-colors-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
-  gap: 1.5rem;
+  grid-template-columns: repeat(10, minmax(0, 1fr));
+  gap: 0.75rem;
   margin-top: 2rem;
   padding-inline: 0.5rem;
   padding-bottom: 2rem;
 }
 
-
-@media (min-width: 768px) {
-  .guide-colors-grid {
-    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  }
+@media (max-width: 1280px) {
+  .guide-colors-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+}
+@media (max-width: 720px) {
+  .guide-colors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }
 
 
@@ -956,7 +1129,7 @@ h2 {
   position: absolute;
   font-size: 0.875rem;
   font-weight: 600;
-  font-family: arial;
+  font-family: var(--hg-typo-font-family-primary-regular);
   color: #333;
   background: white;
   padding: 0.25rem 0.5rem;
@@ -1023,7 +1196,7 @@ h2 {
 }
 
 .guide-typeface-left {
-  font-family: var(--hg-typo-font-family-primary);
+  font-family: var(--hg-typo-font-family-primary-regular);
   display: flex;
   flex-direction: column;
   gap: 2rem;
@@ -1188,7 +1361,7 @@ h2 {
 }
 
 .case-study-holygrail-title {
-  font-family: 'Roboto', sans-serif;
+  font-family: var(--hg-typo-font-family-primary-light);
   font-size: clamp(2.5rem, 12vw, 8rem);
   font-weight: 100;
   letter-spacing: 0.2em;