holygrail5 1.0.22 → 1.0.25

package/config.json

@@ -36,6 +36,14 @@
       }
     ],
     "fonts": [
+      {
+        "source": "src/assets/fonts/suisse-intl-thin.woff2",
+        "dest": "dist/assets/fonts/suisse-intl-thin.woff2"
+      },
+      {
+        "source": "src/assets/fonts/suisse-intl-thin.woff",
+        "dest": "dist/assets/fonts/suisse-intl-thin.woff"
+      },
       {
         "source": "src/assets/fonts/suisse-intl-light.woff2",
         "dest": "dist/assets/fonts/suisse-intl-light.woff2"
@@ -130,15 +138,26 @@
     "gold": "#A38A6B",
     "platinum": "#5B7FA1",
     "bg-light": "#f9f9f9",
-    "bg-cream": "#f4f2ed"
+    "bg-cream": "#f4f2ed",
+    "black-3": "rgba(0, 0, 0, 0.03)",
+    "black-15": "rgba(0, 0, 0, 0.15)",
+    "black-30": "rgba(0, 0, 0, 0.3)",
+    "black-60": "rgba(0, 0, 0, 0.6)",
+    "black-97": "rgba(0, 0, 0, 0.97)",
+    "white-3": "rgba(255, 255, 255, 0.03)",
+    "white-15": "rgba(255, 255, 255, 0.15)",
+    "white-30": "rgba(255, 255, 255, 0.3)",
+    "white-60": "rgba(255, 255, 255, 0.6)",
+    "white-97": "rgba(255, 255, 255, 0.97)"
   },
   "fontFamilyMap": {
+    "primary-thin": "\"suisse-thin\", Arial, Helvetica, sans-serif",
     "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",
-    "mono-regular": "\"suisse-mono-regular\", Consolas, Menlo, Monaco, \"Courier New\", monospace",
-    "mono-bold": "\"suisse-mono-bold\", Consolas, Menlo, Monaco, \"Courier New\", monospace"
+    "mono-regular": "\"suisse-mono-regular\", ui-monospace, monospace",
+    "mono-bold": "\"suisse-mono-bold\", ui-monospace, monospace"
   },
   "spacingMap": {
     "0": "0",
@@ -698,9 +717,21 @@
     }
   },
   "typo": {
+    "title-thin": {
+      "fontFamily": "\"suisse-thin\", Arial, Helvetica, sans-serif",
+      "fontWeight": "100",
+      "mobile": {
+        "fontSize": "24px",
+        "lineHeight": "1"
+      },
+      "desktop": {
+        "fontSize": "24px",
+        "lineHeight": "1"
+      }
+    },
     "title-xxl": {
       "fontFamily": "\"suisse-regular\", Arial, Helvetica, sans-serif",
-      "fontWeight": "300",
+      "fontWeight": "400",
       "mobile": {
         "fontSize": "24px",
         "lineHeight": "1"
@@ -726,7 +757,7 @@
     },
     "title-l-b": {
       "fontFamily": "\"suisse-regular\", Arial, Helvetica, sans-serif",
-      "fontWeight": "300",
+      "fontWeight": "400",
       "mobile": {
         "fontSize": "12px",
         "lineHeight": "1.4"
@@ -738,7 +769,7 @@
     },
     "title-l": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.16em",
       "textTransform": "uppercase",
       "mobile": {
@@ -752,7 +783,7 @@
     },
     "title-m": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.16em",
       "mobile": {
         "fontSize": "12px",
@@ -765,7 +796,7 @@
     },
     "title-s-b": {
       "fontFamily": "\"suisse-regular\", Arial, Helvetica, sans-serif",
-      "fontWeight": "300",
+      "fontWeight": "400",
       "letterSpacing": "0.16em",
       "mobile": {
         "fontSize": "10px",
@@ -778,7 +809,7 @@
     },
     "title-s": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.16em",
       "textTransform": "uppercase",
       "mobile": {
@@ -792,7 +823,7 @@
     },
     "text-l": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.04em",
       "mobile": {
         "fontSize": "13px",
@@ -805,7 +836,7 @@
     },
     "text-m": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.04em",
       "mobile": {
         "fontSize": "12px",
@@ -818,7 +849,7 @@
     },
     "p-tag": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.16em",
       "mobile": {
         "fontSize": "9px",
@@ -831,7 +862,7 @@
     },
     "hg-body-l": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.04em",
       "mobile": {
         "fontSize": "12px",
@@ -844,7 +875,7 @@
     },
     "hg-body-l-b": {
       "fontFamily": "\"suisse-regular\", Arial, Helvetica, sans-serif",
-      "fontWeight": "300",
+      "fontWeight": "400",
       "letterSpacing": "0.04em",
       "mobile": {
         "fontSize": "12px",
@@ -857,7 +888,7 @@
     },
     "hg-body-m": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.04em",
       "mobile": {
         "fontSize": "12px",
@@ -870,7 +901,7 @@
     },
     "hg-body-m-b": {
       "fontFamily": "\"suisse-regular\", Arial, Helvetica, sans-serif",
-      "fontWeight": "300",
+      "fontWeight": "400",
       "letterSpacing": "0.04em",
       "mobile": {
         "fontSize": "12px",
@@ -883,7 +914,7 @@
     },
     "label-m": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.16em",
       "textTransform": "uppercase",
       "mobile": {
@@ -897,7 +928,7 @@
     },
     "label-m-b": {
       "fontFamily": "\"suisse-regular\", Arial, Helvetica, sans-serif",
-      "fontWeight": "300",
+      "fontWeight": "400",
       "letterSpacing": "0.16em",
       "textTransform": "uppercase",
       "mobile": {
@@ -911,7 +942,7 @@
     },
     "label-s": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.06em",
       "textTransform": "uppercase",
       "mobile": {
@@ -925,7 +956,7 @@
     },
     "label-s-b": {
       "fontFamily": "\"suisse-regular\", Arial, Helvetica, sans-serif",
-      "fontWeight": "300",
+      "fontWeight": "400",
       "letterSpacing": "0.06em",
       "textTransform": "uppercase",
       "mobile": {
@@ -938,7 +969,7 @@
       }
     },
     "label-mono": {
-      "fontFamily": "\"suisse-mono-regular\", Arial, Helvetica, sans-serif",
+      "fontFamily": "\"suisse-mono-regular\", ui-monospace, monospace",
       "fontWeight": "400",
       "letterSpacing": "0.06em",
       "textTransform": "uppercase",
@@ -952,7 +983,7 @@
       }
     },
     "label-mono-b": {
-      "fontFamily": "\"suisse-mono-bold\", Arial, Helvetica, sans-serif",
+      "fontFamily": "\"suisse-mono-bold\", ui-monospace, monospace",
       "fontWeight": "700",
       "letterSpacing": "0.06em",
       "textTransform": "uppercase",

package/dist/componentes.html

@@ -4,20 +4,13 @@
   <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-*) -->
+  <!-- Estilos compartidos de guía (header, sidebar, demo-*; incluye @font-face Suisse y la regla body en Suisse) -->
   <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;

package/dist/guide-styles.css

@@ -10,16 +10,24 @@
    antiguos.
    ============================================ */
 @font-face {
-  font-family: "suisse-light";
+  font-family: "suisse-thin";
   font-weight: 100;
   font-display: swap;
+  src: local("SuisseIntl-Thin"),
+       url('assets/fonts/suisse-intl-thin.woff2') format('woff2'),
+       url('assets/fonts/suisse-intl-thin.woff') format('woff');
+}
+@font-face {
+  font-family: "suisse-light";
+  font-weight: 300;
+  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-weight: 400;
   font-display: swap;
   src: local("SuisseIntl-Regular"),
        url('assets/fonts/suisse-intl-regular.woff2') format('woff2'),
@@ -27,7 +35,7 @@
 }
 @font-face {
   font-family: "suisse-medium";
-  font-weight: 400;
+  font-weight: 500;
   font-display: swap;
   src: local("SuisseIntl-Medium"),
        url('assets/fonts/suisse-intl-medium.woff2') format('woff2'),
@@ -35,7 +43,7 @@
 }
 @font-face {
   font-family: "suisse-semibold";
-  font-weight: 500;
+  font-weight: 600;
   font-display: swap;
   src: local("SuisseIntl-SemiBold"),
        url('assets/fonts/suisse-intl-semibold.woff2') format('woff2'),
@@ -86,9 +94,7 @@
 /* ============================================
    RESET Y BASE
    ============================================ */
-* {
-  scroll-behavior: smooth;
-}
+/* Scroll nativo (sin suavizado): los saltos de ancla son instantáneos. */
 
 body {
   margin: 0;
@@ -112,14 +118,14 @@ h2 {
   margin-left: 0;
   flex: 1;
   padding: 0;
-  padding-bottom: 10rem;
+  padding-bottom: 4rem;
   max-width: 100%;
 }
 
 .guide-main-content h2 {
-  font-size: 50px;
-  padding-bottom: 40px;
-  margin-bottom: 40px;
+  font-size: 34px;
+  padding-bottom: 12px;
+  margin-bottom: 8px;
   font-weight: 500;
   color: #000;
   font-family: var(--hg-typo-font-family-primary-bold);
@@ -130,27 +136,27 @@ h2 {
   font-family: var(--hg-typo-font-family-primary-regular);
   color: #000;
   font-size: 16px;
-  line-height: 28px;
-  margin: 80px 0 12px;
+  line-height: 1.4;
+  margin: 2rem 0 0.75rem;
 }
 
 @media (min-width: 768px) {
   .guide-main-content h2 {
-    font-size: 64px;
-    padding-bottom: 40px;
-    margin-bottom: 10px;
+    font-size: 44px;
+    padding-bottom: 12px;
+    margin-bottom: 8px;
   }
 
   .guide-main-content h3 {
     font-family: var(--hg-typo-font-family-primary-regular);
     color: #000;
-    font-size: 20px;
-    line-height: 28px;
-    margin: 80px 0 12px;
+    font-size: 18px;
+    line-height: 1.4;
+    margin: 2rem 0 0.75rem;
   }
-  
+
   .guide-section-description {
-    font-size: 28px;
+    font-size: 18px;
   }
 }
 
@@ -163,20 +169,40 @@ h2 {
   border-radius: 8px;
 }
 
+/* Compactación / unificación del ritmo vertical de la guía.
+   Las cabeceras de sección usan `.row.mb-120` (120px) como separador;
+   aquí lo reducimos a un valor coherente y mucho más pegado. También
+   homogeneizamos el espacio entre secciones y el del separador <hr>. */
+.guide-section .row.mb-120,
+.guide-section--highlighted .row.mb-120 {
+  margin-bottom: 1.5rem;
+}
+.guide-section + .guide-section,
+.guide-section--highlighted + .guide-section,
+.guide-section + .guide-section--highlighted {
+  margin-top: 2.5rem;
+}
+.guide-section .row.mb-120 hr,
+.guide-section hr {
+  margin: 0.5rem 0 0;
+  border: 0;
+  border-top: 1px solid #e9e9e9;
+}
+
 .guide-section.guide-section--highlighted {
   background: #fff;
-  padding: 5rem 0 2rem 0;
+  padding: 2rem 0 1rem 0;
 }
 @media (min-width: 768px) {
   .guide-section.guide-section--highlighted {
-    padding: 5rem 0;
+    padding: 2.5rem 0 1.5rem 0;
   }
 }
 
 .guide-section-title {
   font-size: 1.5rem;
   font-weight: 500;
-  padding-bottom: 2rem;
+  padding-bottom: 1rem;
   line-height: 1.2;
   display: flex;
   justify-content: space-between;
@@ -186,34 +212,19 @@ h2 {
 
 @media (min-width: 768px) {
   .guide-section-title {
-    margin-top: 3rem;
-    flex-direction: row;
+    margin-top: 1.25rem;
+    /* Se mantiene en columna: el contenido (cajas explicativas) queda
+       debajo del titular y alineado a la izquierda, no en la mitad derecha. */
   }
 }
 
 .guide-section-description {
-  margin-top: 1rem;
-  font-size: 28px;
-  color: #000000;
-  font-family: var(--hg-typo-font-family-primary-light);
-  margin-bottom: 20px;
-
-  line-height: 1.2;
-  width: 100%;
-  margin-left: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-}
-
-.guide-section-description {
-  margin-top: 1rem;
-  font-size: 28px;
+  margin-top: 0.5rem;
+  font-size: 18px;
   color: #000000;
   font-family: var(--hg-typo-font-family-primary-light);
-  margin-bottom: 20px;
-
-  line-height: 1.2;
+  margin-bottom: 8px;
+  line-height: 1.35;
   width: 100%;
   margin-left: 0;
   display: flex;
@@ -439,6 +450,50 @@ h2 {
   overflow: auto;
 }
 
+/* Dos tablas lado a lado en desktop para ver más filas sin tanto scroll;
+   se apilan en una sola columna en móvil. Genérico: lo usan Ratios y
+   Containers. */
+.guide-cols-2 {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0 2.5rem;
+  align-items: start;
+}
+@media (min-width: 768px) {
+  .guide-cols-2 {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+/* Tamaño compacto y unificado dentro de las vistas a 2 columnas
+   (Containers/Ratios), en línea con la densidad de la sección Layout. */
+.guide-cols-2 .guide-table {
+  font-size: 0.78rem;
+}
+.guide-cols-2 .guide-table thead th {
+  font-size: 0.68rem;
+  padding-top: 0.3rem;
+  padding-bottom: 0.3rem;
+}
+.guide-cols-2 .guide-table td {
+  padding-top: 0.28rem;
+  padding-bottom: 0.28rem;
+}
+
+/* Badge "md:" en los títulos de grupo de la sección Layout (indica que el
+   helper tiene variantes responsive). */
+.guide-layout-md {
+  font-size: 0.58rem;
+  font-weight: 600;
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--hg-color-dark-grey, #737373);
+  background: var(--hg-color-light-grey, #f4f2ed);
+  border-radius: 3px;
+  padding: 1px 5px;
+  margin-left: 0.35rem;
+  vertical-align: middle;
+}
+
 /* ============================================
    VARIABLES CSS — Grid de 3 columnas compacto
    ============================================ */
@@ -559,14 +614,14 @@ h2 {
   color: #919191;
   letter-spacing: 0.05em;
   border-bottom: 1px solid #ddd;
-  padding: 0.75rem;
+  padding: 0.5rem 0.75rem;
   padding-left: 0;
   text-align: left;
   z-index: 10;
 }
 
 .guide-table td {
-  padding: 0.75rem;
+  padding: 0.38rem 0.75rem;
   padding-left: 0;
   border-bottom: 1px solid #efefef;
   vertical-align: middle;
@@ -594,9 +649,9 @@ h2 {
 
 .guide-table .guide-font-family-preview {
   min-width: 100px;
-  padding: 0.75rem;
-  min-height: 50px;
-  font-size: 1.5rem;
+  padding: 0.4rem;
+  min-height: 34px;
+  font-size: 1.25rem;
   /* 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
@@ -693,7 +748,6 @@ h2 {
 .guide-text-bold,
 .guide-table .guide-table-name,
 .guide-layout-class-name {
-  font-weight: 600;
   color: #000000;
   font-family: var(--hg-typo-font-family-primary-regular);
 }
@@ -1311,15 +1365,31 @@ h2 {
   gap: var(--hg-spacing-24);
   max-width: 100%;
   margin-left: 0;
-  margin-bottom: 10rem;
+  margin-bottom: 2rem;
 }
 
+/* Las cajas explicativas van debajo del titular + línea, alineadas a la
+   IZQUIERDA (antes: max-width 50% + margin-left 50% las empujaba a la
+   mitad derecha de la página). */
 @media (min-width: 768px) {
   .demo-section-2 {
     grid-template-columns: repeat(2, 1fr);
+    width: 100%;
+    margin-left: 0;
+    margin-bottom: 2rem;
+  }
+}
+
+/* Variante de una sola columna al 50% del ancho (p. ej. la intro del Grid):
+   los bloques se apilan verticalmente en vez de quedar en 2 columnas con
+   alturas descompensadas. En móvil ocupa el 100%. */
+.demo-section-2.demo-section-1col {
+  grid-template-columns: 1fr;
+}
+@media (min-width: 768px) {
+  .demo-section-2.demo-section-1col {
     max-width: 50%;
-    margin-left: 50%;
-    margin-bottom: 10rem;
+    width: 50%;
   }
 }