holygrail5 1.0.23 → 1.0.25

package/config.json

@@ -138,7 +138,17 @@
     "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",

package/dist/guide-styles.css

@@ -450,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
    ============================================ */
@@ -1336,6 +1380,19 @@ h2 {
   }
 }
 
+/* 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%;
+    width: 50%;
+  }
+}
+
 .demo-title {
   font-size: var(--hg-typo-font-size-12);
   font-weight: var(--hg-typo-font-weight-900);