holygrail5 1.0.15 → 1.0.17

package/config.json

@@ -59,6 +59,7 @@
   },
   "fontFamilyMap": {
     "primary": "arial, sans-serif",
+    "primary-bold": "\"Arial Bold\", Arial, sans-serif",
     "secondary": "\"ms-serif\", serif"
   },
   "spacingMap": {

package/dist/index.html

@@ -15,8 +15,8 @@
 
   <!-- Lenis Smooth Scroll - Solo para la guía -->
   <script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.29/bundled/lenis.min.js"></script>
-  <link rel="stylesheet" href="output.css?v=1770198674645">
-  <link rel="stylesheet" href="guide-styles.css?v=1770198674633">
+  <link rel="stylesheet" href="output.css?v=1771406408021">
+  <link rel="stylesheet" href="guide-styles.css?v=1771406408009">
   <style>
     
     body {
@@ -76,7 +76,7 @@
         </a>
       </div>
                <p class="text-m guide-sidebar-meta">
-          last update: 4/2/2026, 10:51:14
+          last update: 18/2/2026, 10:20:08
         </p>
       
       
@@ -309,13 +309,13 @@
             </div>
           </div>
           <div class="guide-color-card" data-copy-value="--hg-color-success" title="Click para copiar --hg-color-success">
-            <div class="guide-color-preview" style="--color-value: #76ae4a;">
+            <div class="guide-color-preview" style="--color-value: #12882c;">
               
             </div>
             <div class="guide-color-card-content">
               <div class="guide-color-name">success</div>
               <div class="guide-color-var-name" data-copy-value="--hg-color-success" title="Click para copiar --hg-color-success">--hg-color-success</div>
-              <div class="guide-color-value " data-copy-value="#76ae4a" title="Click para copiar #76ae4a">#76ae4a</div>
+              <div class="guide-color-value " data-copy-value="#12882C" title="Click para copiar #12882C">#12882C</div>
             </div>
           </div>
           <div class="guide-color-card" data-copy-value="--hg-color-warning" title="Click para copiar --hg-color-warning">
@@ -479,6 +479,12 @@
         <td class="guide-table-value ">arial, sans-serif</td>
         <td class="guide-table-value">--hg-typo-font-family-primary</td>
       </tr>
+      <tr>
+        <td class="guide-table-name">primary-bold</td>
+        <td class="guide-font-family-preview" style='font-family: "Arial Bold", Arial, sans-serif;'>Aa</td>
+        <td class="guide-table-value ">"Arial Bold", Arial, sans-serif</td>
+        <td class="guide-table-value">--hg-typo-font-family-primary-bold</td>
+      </tr>
       <tr>
         <td class="guide-table-name">secondary</td>
         <td class="guide-font-family-preview" style='font-family: "ms-serif", serif;'>Aa</td>
@@ -1041,7 +1047,7 @@
           </tr>
           <tr>
             <td class="guide-table-name guide-copyable " data-copy-value="--hg-color-success" title="Click para copiar --hg-color-success">--hg-color-success</td>
-            <td class="guide-table-value guide-copyable " data-copy-value="#76ae4a" title="Click para copiar #76ae4a">#76ae4a</td>
+            <td class="guide-table-value guide-copyable " data-copy-value="#12882C" title="Click para copiar #12882C">#12882C</td>
             <td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
             <td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
           </tr>
@@ -1129,8 +1135,8 @@
         </div>
         <div class="guide-info-box guide-info-box-warning mb-32">
           <strong class="mb-16" style="display: block;">¿Cómo se generan los helpers de espaciado?</strong>
-          <div class="guide-spacing-explanation-cols">
-            <div class="guide-spacing-explanation-col">
+          <div class="row">
+            <div class="col-xs-12 col-md-6 guide-spacing-explanation-col">
               <p class="text-m guide-info-box-text">
                 <strong>Primera letra:</strong> Tipo de spacing → <code class="guide-info-box-code-info">p</code> (padding) o <code class="guide-info-box-code-info">m</code> (margin).
               </p>
@@ -1150,7 +1156,7 @@
                 <strong>Nota:</strong> Los helpers con prefijo <code class="guide-info-box-code-info">md:</code> funcionan como en Tailwind CSS y solo se aplican en el breakpoint desktop (≥992px). Puedes combinar clases base y con prefijo <code class="guide-info-box-code-info">md:</code> para crear diseños responsive. Las clases con <code class="guide-info-box-code-info">!</code> aplican !important y tienen prioridad sobre otras reglas CSS.
               </p>
             </div>
-            <div class="guide-spacing-explanation-col">
+            <div class="col-xs-12 col-md-6 guide-spacing-explanation-col">
               <p class="text-m guide-info-box-text"><strong>Ejemplos de uso:</strong></p>
               <ul class="guide-info-box-list">
                 <li class="text-m guide-info-box-list-item"><code class="guide-info-box-code-info">.p-4</code> — Aplica padding de 4px en todos los tamaños de pantalla</li>

package/dist/output.css

@@ -57,9 +57,8 @@ p, h1, h2, h3, h4, h5, h6 {
 /* Variables CSS Compartidas */
 :root {
   --hg-typo-font-family-primary: arial, sans-serif;
+  --hg-typo-font-family-primary-bold: "Arial Bold", Arial, sans-serif;
   --hg-typo-font-family-secondary: "ms-serif", serif;
-  --hg-typo-font-family-luxury-serif: 'Playfair Display', 'Georgia', serif;
-  --hg-typo-font-family-elegant-sans: 'IBM Plex Sans', 'Helvetica Neue', sans-serif;
   --hg-typo-line-height-1: 1;
   --hg-typo-line-height-1-976: 1.976;
   --hg-typo-line-height-1-2: 1.2;
@@ -140,7 +139,7 @@ p, h1, h2, h3, h4, h5, h6 {
   --hg-color-primary: #000000;
   --hg-color-error: #b40016;
   --hg-color-info: #1a32a4;
-  --hg-color-success: #76ae4a;
+  --hg-color-success: #12882C;
   --hg-color-warning: #ffc700;
   --hg-color-feel: #fb9962;
   --hg-color-feel-dark: #c94c07;
@@ -1959,7 +1958,7 @@ p, h1, h2, h3, h4, h5, h6 {
   }
 }
 
-[class*=col-] {
+[class*=" col-"], [class^="col-"] {
   box-sizing: border-box;
   min-height: 1px;
   padding-left: 8px;
@@ -2001,7 +2000,8 @@ p, h1, h2, h3, h4, h5, h6 {
   flex-wrap: wrap;
 }
 
-.bleed-0 > [class*=col-],
+.bleed-0 > [class*=" col-"],
+.bleed-0 > [class^="col-"],
 .bleed-0 > .col {
   padding: 0px;
   box-sizing: border-box;

package/dist/themes/dutti-demo.html

@@ -126,6 +126,10 @@
             <button class="btn btn-tertiary">Tertiary</button>
             <div class="demo-code">.btn .btn-tertiary</div>
           </div>
+          <div class="demo-item">
+            <button class="btn btn-label-m">Label M</button>
+            <div class="demo-code">.btn .btn-label-m</div>
+          </div>
           <div class="demo-item">
             <button class="btn btn-link">Link</button>
             <div class="demo-code">.btn .btn-link</div>

package/dist/themes/dutti.css

@@ -83,7 +83,7 @@
 /* === _buttons.css === */
 /**
  * Botones
- * Variantes: primary, secondary, tertiary
+ * Variantes: primary, secondary, tertiary, label-m
  * Tamaños: sm, md, lg
  */
 
@@ -304,6 +304,72 @@
   border: 0 solid transparent !important;
 }
 
+/* LABEL M BUTTON (similar a tertiary) */
+.btn-label-m {
+  background-color: transparent;
+  border: 0 solid transparent;
+  height: auto;
+  min-height: auto;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  line-height: 1;
+  min-width: 24px;
+  padding-inline: 0;
+  color: var(--hg-color-black);
+  letter-spacing: 0.16em;
+}
+
+.btn-label-m svg g {
+  fill: var(--hg-color-black);
+  stroke: var(--hg-color-black);
+}
+
+.btn-label-m svg circle {
+  stroke: var(--hg-color-black);
+}
+
+.btn-label-m:focus,
+.btn-label-m.focus,
+.btn-label-m:hover,
+.btn-label-m.hover,
+.btn-label-m:active,
+.btn-label-m.active {
+  border: 0 solid transparent;
+  background-color: transparent;
+  cursor: pointer;
+  font-family: var(--hg-typo-font-family-primary-bold);
+  font-weight: var(--hg-typo-font-weight-500);
+}
+
+.btn-label-m.active {
+  border-bottom: 0.5px solid var(--hg-color-black);
+}
+
+.btn-label-m:disabled,
+.btn-label-m[disabled],
+.btn-label-m.disabled {
+  pointer-events: none;
+  cursor: default;
+  background-color: var(--hg-color-bg-light);
+  border: var(--border-width) var(--border-style) var(--hg-color-bg-light);
+  color: var(--hg-color-dark-grey);
+  filter: none;
+  opacity: 1;
+}
+
+.btn-label-m:disabled svg-icon,
+.btn-label-m:disabled svg-icon2,
+.btn-label-m:disabled md-icon,
+.btn-label-m[disabled] svg-icon,
+.btn-label-m[disabled] svg-icon2,
+.btn-label-m[disabled] md-icon,
+.btn-label-m.disabled svg-icon,
+.btn-label-m.disabled svg-icon2,
+.btn-label-m.disabled md-icon {
+  background-color: transparent !important;
+  border: 0 solid transparent !important;
+}
+
 /* LINK BUTTON */
 .btn-link {
   background-color: transparent;
@@ -318,7 +384,6 @@
 .btn-link:focus {
   color: var(--hg-color-dark-grey);
   background-color: transparent;
-
 }
 
 .btn-link:disabled,
@@ -337,7 +402,6 @@
 }
 
 
-
 /* === _inputs.css === */
 /**
  * Inputs
@@ -1778,4 +1842,323 @@
 .form-row > * {
   flex: 1;
   min-width: 200px;
-}
+}
+
+
+
+/* === _grid.css === */
+.hg-grid-cols-1 {
+  grid-template-columns: repeat(1, 1fr);
+}
+
+.hg-grid-cols-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.hg-grid-cols-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.hg-grid-cols-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.hg-grid-cols-5 {
+  grid-template-columns: repeat(5, 1fr);
+}
+
+.hg-grid-cols-6 {
+  grid-template-columns: repeat(6, 1fr);
+}
+
+.hg-grid-cols-7 {
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.hg-grid-cols-8 {
+  grid-template-columns: repeat(8, 1fr);
+}
+
+.hg-grid-cols-9 {
+  grid-template-columns: repeat(9, 1fr);
+}
+
+.hg-grid-cols-10 {
+  grid-template-columns: repeat(10, 1fr);
+}
+
+.hg-grid-cols-11 {
+  grid-template-columns: repeat(11, 1fr);
+}
+
+.hg-grid-cols-12 {
+  grid-template-columns: repeat(12, 1fr);
+}
+
+[class*="hg-col-span-"] {
+  padding: 0;
+}
+
+.hg-col-span-1 {
+  grid-column: span 1;
+}
+
+.hg-col-span-2 {
+  grid-column: span 2;
+}
+
+.hg-col-span-3 {
+  grid-column: span 3;
+}
+
+.hg-col-span-4 {
+  grid-column: span 4;
+}
+
+.hg-col-span-5 {
+  grid-column: span 5;
+}
+
+.hg-col-span-6 {
+  grid-column: span 6;
+}
+
+.hg-col-span-7 {
+  grid-column: span 7;
+}
+
+.hg-col-span-8 {
+  grid-column: span 8;
+}
+
+.hg-col-span-9 {
+  grid-column: span 9;
+}
+
+.hg-col-span-10 {
+  grid-column: span 10;
+}
+
+.hg-col-span-11 {
+  grid-column: span 11;
+}
+
+.hg-col-span-12 {
+  grid-column: span 12;
+}
+
+.hg-col-start-1 {
+  grid-column-start: 1;
+}
+
+.hg-col-start-2 {
+  grid-column-start: 2;
+}
+
+.hg-col-start-3 {
+  grid-column-start: 3;
+}
+
+.hg-col-start-4 {
+  grid-column-start: 4;
+}
+
+.hg-col-start-5 {
+  grid-column-start: 5;
+}
+
+.hg-col-start-6 {
+  grid-column-start: 6;
+}
+
+.hg-col-start-7 {
+  grid-column-start: 7;
+}
+
+.hg-col-start-8 {
+  grid-column-start: 8;
+}
+
+.hg-col-start-9 {
+  grid-column-start: 9;
+}
+
+.hg-col-start-10 {
+  grid-column-start: 10;
+}
+
+.hg-col-start-11 {
+  grid-column-start: 11;
+}
+
+.hg-col-start-12 {
+  grid-column-start: 12;
+}
+
+@media (min-width: 48rem) {
+  .md\:hg-grid-cols-1 {
+    grid-template-columns: repeat(1, 1fr);
+  }
+
+  .md\:hg-grid-cols-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .md\:hg-grid-cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .md\:hg-grid-cols-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .md\:hg-grid-cols-5 {
+    grid-template-columns: repeat(5, 1fr);
+  }
+
+  .md\:hg-grid-cols-6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+
+  .md\:hg-grid-cols-7 {
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  .md\:hg-grid-cols-8 {
+    grid-template-columns: repeat(8, 1fr);
+  }
+
+  .md\:hg-grid-cols-9 {
+    grid-template-columns: repeat(9, 1fr);
+  }
+
+  .md\:hg-grid-cols-10 {
+    grid-template-columns: repeat(10, 1fr);
+  }
+
+  .md\:hg-grid-cols-11 {
+    grid-template-columns: repeat(11, 1fr);
+  }
+
+  .md\:hg-grid-cols-12 {
+    grid-template-columns: repeat(12, 1fr);
+  }
+
+  [class*="md\:hg-col-span-"] {
+    padding: 0;
+  }
+
+  .md\:hg-col-span-1 {
+    grid-column: span 1;
+  }
+
+  .md\:hg-col-span-2 {
+    grid-column: span 2;
+  }
+
+  .md\:hg-col-span-3 {
+    grid-column: span 3;
+  }
+
+  .md\:hg-col-span-4 {
+    grid-column: span 4;
+  }
+
+  .md\:hg-col-span-5 {
+    grid-column: span 5;
+  }
+
+  .md\:hg-col-span-6 {
+    grid-column: span 6;
+  }
+
+  .md\:hg-col-span-7 {
+    grid-column: span 7;
+  }
+
+  .md\:hg-col-span-8 {
+    grid-column: span 8;
+  }
+
+  .md\:hg-col-span-9 {
+    grid-column: span 9;
+  }
+
+  .md\:hg-col-span-10 {
+    grid-column: span 10;
+  }
+
+  .md\:hg-col-span-11 {
+    grid-column: span 11;
+  }
+
+  .md\:hg-col-span-12 {
+    grid-column: span 12;
+  }
+
+  .md\:hg-col-start-1 {
+    grid-column-start: 1;
+  }
+
+  .md\:hg-col-start-2 {
+    grid-column-start: 2;
+  }
+
+  .md\:hg-col-start-3 {
+    grid-column-start: 3;
+  }
+
+  .md\:hg-col-start-4 {
+    grid-column-start: 4;
+  }
+
+  .md\:hg-col-start-5 {
+    grid-column-start: 5;
+  }
+
+  .md\:hg-col-start-6 {
+    grid-column-start: 6;
+  }
+
+  .md\:hg-col-start-7 {
+    grid-column-start: 7;
+  }
+
+  .md\:hg-col-start-8 {
+    grid-column-start: 8;
+  }
+
+  .md\:hg-col-start-9 {
+    grid-column-start: 9;
+  }
+
+  .md\:hg-col-start-10 {
+    grid-column-start: 10;
+  }
+
+  .md\:hg-col-start-11 {
+    grid-column-start: 11;
+  }
+
+  .md\:hg-col-start-12 {
+    grid-column-start: 12;
+  }
+}
+
+/* === _icons.css === */
+  :root {
+    --hg-icon-size: var(--hg-spacing-16);
+  }
+
+  .hg-icon {
+    align-items: center;
+    display: inline-flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+  }
+  
+  .hg-icon svg {
+    display: block;
+    height: auto;
+    width: var(--hg-icon-size);
+  }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "holygrail5",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "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",

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

@@ -5,6 +5,7 @@
   },
   "fontFamilyMap": {
     "primary": "arial, sans-serif",
+    "primary-bold": "\"Arial Bold\", Arial, sans-serif",
     "secondary": "\"ms-serif\", serif"
   },
   "spacingMap": {
@@ -55,7 +56,7 @@
     "primary": "#000000",
     "error": "#b40016",
     "info": "#1a32a4",
-    "success": "#76ae4a",
+    "success": "#12882C",
     "warning": "#ffc700",
     "feel": "#fb9962",
     "feel-dark": "#c94c07",
@@ -325,7 +326,7 @@
     "--hg-color-primary": "#000000",
     "--hg-color-error": "#b40016",
     "--hg-color-info": "#1a32a4",
-    "--hg-color-success": "#76ae4a",
+    "--hg-color-success": "#12882C",
     "--hg-color-warning": "#ffc700",
     "--hg-color-feel": "#fb9962",
     "--hg-color-feel-dark": "#c94c07",

package/src/css-generator.js

@@ -53,7 +53,10 @@ function generateCSS(configData) {
     textTransformVars, 
     fontSizeVars, 
     spacingVars, 
-    colorVars
+    colorVars, 
+    configData.fontFamilyMap || null, 
+    prefix, 
+    category
   );
   
   // 4. Genera helpers de spacing (padding/margin)

package/src/generators/grid-generator.js

@@ -78,7 +78,7 @@ function generateGridSystem(gridConfig, baseFontSize = 16) {
   });
 
   // Genera estilos para todas las columnas
-  css += `[class*=col-] {
+  css += `[class*=" col-"], [class^="col-"] {
   box-sizing: border-box;
   min-height: 1px;
   padding-left: ${gutterValue};
@@ -121,7 +121,8 @@ function generateGridSystem(gridConfig, baseFontSize = 16) {
   flex-wrap: wrap;
 }\n\n`;
 
-  css += `.bleed-0 > [class*=col-],
+  css += `.bleed-0 > [class*=" col-"],
+.bleed-0 > [class^="col-"],
 .bleed-0 > .col {
   padding: 0px;
   box-sizing: border-box;

package/src/generators/variables-generator.js

@@ -117,12 +117,22 @@ function generateColorVariables(colorsMap, prefix) {
 
 /**
  * Genera todas las variables CSS en el bloque :root
- * Recorre todos los mapas de variables y las convierte en declaraciones CSS
+ * Recorre todos los mapas de variables y las convierte en declaraciones CSS.
+ * Si se pasa fontFamilyMap, las variables font-family se generan desde el map (una por entrada).
  */
-function generateRootVariables(fontFamilyVars, lineHeightVars, fontWeightVars, letterSpacingVars, textTransformVars, fontSizeVars, spacingVars = [], colorVars = []) {
+function generateRootVariables(fontFamilyVars, lineHeightVars, fontWeightVars, letterSpacingVars, textTransformVars, fontSizeVars, spacingVars = [], colorVars = [], fontFamilyMap = null, prefix = 'hg', category = 'typo') {
   const variables = [];
-  const allMaps = [
-    { map: fontFamilyVars, name: 'font-family' },
+  // Font-family: usar fontFamilyMap si existe (todas las entradas en :root), si no usar fontFamilyVars
+  if (fontFamilyMap && typeof fontFamilyMap === 'object') {
+    Object.entries(fontFamilyMap).forEach(([name, value]) => {
+      variables.push(`  --${prefix}-${category}-font-family-${name}: ${value};`);
+    });
+  } else {
+    Array.from(fontFamilyVars.values()).forEach(item => {
+      variables.push(`  ${item.varName}: ${item.value};`);
+    });
+  }
+  const restMaps = [
     { map: lineHeightVars, name: 'line-height' },
     { map: fontWeightVars, name: 'font-weight' },
     { map: letterSpacingVars, name: 'letter-spacing' },
@@ -130,7 +140,7 @@ function generateRootVariables(fontFamilyVars, lineHeightVars, fontWeightVars, l
     { map: fontSizeVars, name: 'font-size' }
   ];
   
-  allMaps.forEach(({ map }) => {
+  restMaps.forEach(({ map }) => {
     Array.from(map.values()).forEach(item => {
       variables.push(`  ${item.varName}: ${item.value};`);
     });

package/themes/dutti/README.md

@@ -44,6 +44,10 @@ El sistema está dividido en módulos para facilitar el mantenimiento:
 
 - **Primary**: `.btn .btn-primary`
 - **Secondary**: `.btn .btn-secondary`
+- **Tertiary**: `.btn .btn-tertiary`
+- **Label M**: `.btn .btn-label-m` (similar a tertiary)
+- **Link**: `.btn .btn-link`
+- **Badge**: `.btn .btn-badge` (pill, compacto; en contexto `.has-light` usa texto blanco sobre fondo oscuro)
 - **Outline**: `.btn .btn-outline`
 - **Ghost**: `.btn .btn-ghost`
 - **Feel**: `.btn .btn-feel`

package/themes/dutti/_buttons.css

@@ -1,6 +1,6 @@
 /**
  * Botones
- * Variantes: primary, secondary, tertiary
+ * Variantes: primary, secondary, tertiary, label-m, link, badge
  * Tamaños: sm, md, lg
  */
 
@@ -221,6 +221,72 @@
   border: 0 solid transparent !important;
 }
 
+/* LABEL M BUTTON (similar a tertiary) */
+.btn-label-m {
+  background-color: transparent;
+  border: 0 solid transparent;
+  height: auto;
+  min-height: auto;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  line-height: 1;
+  min-width: 24px;
+  padding-inline: 0;
+  color: var(--hg-color-black);
+  letter-spacing: 0.16em;
+}
+
+.btn-label-m svg g {
+  fill: var(--hg-color-black);
+  stroke: var(--hg-color-black);
+}
+
+.btn-label-m svg circle {
+  stroke: var(--hg-color-black);
+}
+
+.btn-label-m:focus,
+.btn-label-m.focus,
+.btn-label-m:hover,
+.btn-label-m.hover,
+.btn-label-m:active,
+.btn-label-m.active {
+  border: 0 solid transparent;
+  background-color: transparent;
+  cursor: pointer;
+  font-family: var(--hg-typo-font-family-primary-bold);
+  font-weight: var(--hg-typo-font-weight-500);
+}
+
+.btn-label-m.active {
+  border-bottom: 0.5px solid var(--hg-color-black);
+}
+
+.btn-label-m:disabled,
+.btn-label-m[disabled],
+.btn-label-m.disabled {
+  pointer-events: none;
+  cursor: default;
+  background-color: var(--hg-color-bg-light);
+  border: var(--border-width) var(--border-style) var(--hg-color-bg-light);
+  color: var(--hg-color-dark-grey);
+  filter: none;
+  opacity: 1;
+}
+
+.btn-label-m:disabled svg-icon,
+.btn-label-m:disabled svg-icon2,
+.btn-label-m:disabled md-icon,
+.btn-label-m[disabled] svg-icon,
+.btn-label-m[disabled] svg-icon2,
+.btn-label-m[disabled] md-icon,
+.btn-label-m.disabled svg-icon,
+.btn-label-m.disabled svg-icon2,
+.btn-label-m.disabled md-icon {
+  background-color: transparent !important;
+  border: 0 solid transparent !important;
+}
+
 /* LINK BUTTON */
 .btn-link {
   background-color: transparent;
@@ -235,7 +301,6 @@
 .btn-link:focus {
   color: var(--hg-color-dark-grey);
   background-color: transparent;
-
 }
 
 .btn-link:disabled,
@@ -248,8 +313,71 @@
   opacity: 0.5;
 }
 
+/* BADGE BUTTON (pill, compacto) */
+.btn-badge {
+  min-height: auto;
+  height: auto;
+  padding: var(--hg-spacing-4) var(--hg-spacing-12);
+  border-radius: 9999px;
+  border: var(--border-width) var(--border-style) transparent;
+  background-color: var(--hg-color-white);
+  color: var(--hg-color-dark-grey);
+  font-size: var(--hg-typo-font-size-12);
+  white-space: nowrap;
+}
+
+.btn-badge:focus,
+.btn-badge.focus,
+.btn-badge:hover,
+.btn-badge.hover,
+.btn-badge:active,
+.btn-badge.active {
+  background-color: var(--hg-color-white);
+  color: var(--hg-color-primary);
+  border-color: transparent;
+  cursor: pointer;
+}
+
+.btn-badge:disabled,
+.btn-badge[disabled],
+.btn-badge.disabled {
+  pointer-events: none;
+  cursor: default;
+  background-color: var(--hg-color-white);
+  border-color: transparent;
+  color: var(--hg-color-middle-grey);
+  opacity: 1;
+}
+
+/* Badge en contexto claro (fondo oscuro) */
+.has-light .btn-badge {
+  background-color: transparent;
+  color: var(--hg-color-white);
+  border-color: transparent;
+}
+
+.has-light .btn-badge:focus,
+.has-light .btn-badge.focus,
+.has-light .btn-badge:hover,
+.has-light .btn-badge.hover,
+.has-light .btn-badge:active,
+.has-light .btn-badge.active {
+  background-color: transparent;
+  color: var(--hg-color-white);
+  border-color: transparent;
+  cursor: pointer;
+}
+
+.has-light .btn-badge:disabled,
+.has-light .btn-badge[disabled],
+.has-light .btn-badge.disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--hg-color-light-grey);
+  opacity: 1;
+}
+
 /* Ancho completo */
 .btn-full {
   width: 100%;
 }
-

package/themes/dutti/components/_icons.css

@@ -0,0 +1,16 @@
+  :root {
+    --hg-icon-size: var(--hg-spacing-16);
+  }
+
+  .hg-icon {
+    align-items: center;
+    display: inline-flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+  }
+  
+  .hg-icon svg {
+    display: block;
+    height: auto;
+    width: var(--hg-icon-size);
+  }

package/themes/dutti/demo.html

@@ -54,10 +54,18 @@
             <button class="btn btn-tertiary">Tertiary</button>
             <div class="demo-code">.btn .btn-tertiary</div>
           </div>
+          <div class="demo-item">
+            <button class="btn btn-label-m">Label M</button>
+            <div class="demo-code">.btn .btn-label-m</div>
+          </div>
           <div class="demo-item">
             <button class="btn btn-link">Link</button>
             <div class="demo-code">.btn .btn-link</div>
           </div>
+          <div class="demo-item">
+            <button class="btn btn-badge">Badge</button>
+            <div class="demo-code">.btn .btn-badge</div>
+          </div>
 
           <div class="demo-item">
             <button class="btn btn-primary" disabled>Disabled</button>

package/themes/dutti/objects/_grid.css

@@ -0,0 +1,297 @@
+.hg-grid-cols-1 {
+  grid-template-columns: repeat(1, 1fr);
+}
+
+.hg-grid-cols-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.hg-grid-cols-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.hg-grid-cols-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.hg-grid-cols-5 {
+  grid-template-columns: repeat(5, 1fr);
+}
+
+.hg-grid-cols-6 {
+  grid-template-columns: repeat(6, 1fr);
+}
+
+.hg-grid-cols-7 {
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.hg-grid-cols-8 {
+  grid-template-columns: repeat(8, 1fr);
+}
+
+.hg-grid-cols-9 {
+  grid-template-columns: repeat(9, 1fr);
+}
+
+.hg-grid-cols-10 {
+  grid-template-columns: repeat(10, 1fr);
+}
+
+.hg-grid-cols-11 {
+  grid-template-columns: repeat(11, 1fr);
+}
+
+.hg-grid-cols-12 {
+  grid-template-columns: repeat(12, 1fr);
+}
+
+[class*="hg-col-span-"] {
+  padding: 0;
+}
+
+.hg-col-span-1 {
+  grid-column: span 1;
+}
+
+.hg-col-span-2 {
+  grid-column: span 2;
+}
+
+.hg-col-span-3 {
+  grid-column: span 3;
+}
+
+.hg-col-span-4 {
+  grid-column: span 4;
+}
+
+.hg-col-span-5 {
+  grid-column: span 5;
+}
+
+.hg-col-span-6 {
+  grid-column: span 6;
+}
+
+.hg-col-span-7 {
+  grid-column: span 7;
+}
+
+.hg-col-span-8 {
+  grid-column: span 8;
+}
+
+.hg-col-span-9 {
+  grid-column: span 9;
+}
+
+.hg-col-span-10 {
+  grid-column: span 10;
+}
+
+.hg-col-span-11 {
+  grid-column: span 11;
+}
+
+.hg-col-span-12 {
+  grid-column: span 12;
+}
+
+.hg-col-start-1 {
+  grid-column-start: 1;
+}
+
+.hg-col-start-2 {
+  grid-column-start: 2;
+}
+
+.hg-col-start-3 {
+  grid-column-start: 3;
+}
+
+.hg-col-start-4 {
+  grid-column-start: 4;
+}
+
+.hg-col-start-5 {
+  grid-column-start: 5;
+}
+
+.hg-col-start-6 {
+  grid-column-start: 6;
+}
+
+.hg-col-start-7 {
+  grid-column-start: 7;
+}
+
+.hg-col-start-8 {
+  grid-column-start: 8;
+}
+
+.hg-col-start-9 {
+  grid-column-start: 9;
+}
+
+.hg-col-start-10 {
+  grid-column-start: 10;
+}
+
+.hg-col-start-11 {
+  grid-column-start: 11;
+}
+
+.hg-col-start-12 {
+  grid-column-start: 12;
+}
+
+@media (min-width: 48rem) {
+  .md\:hg-grid-cols-1 {
+    grid-template-columns: repeat(1, 1fr);
+  }
+
+  .md\:hg-grid-cols-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .md\:hg-grid-cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .md\:hg-grid-cols-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .md\:hg-grid-cols-5 {
+    grid-template-columns: repeat(5, 1fr);
+  }
+
+  .md\:hg-grid-cols-6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+
+  .md\:hg-grid-cols-7 {
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  .md\:hg-grid-cols-8 {
+    grid-template-columns: repeat(8, 1fr);
+  }
+
+  .md\:hg-grid-cols-9 {
+    grid-template-columns: repeat(9, 1fr);
+  }
+
+  .md\:hg-grid-cols-10 {
+    grid-template-columns: repeat(10, 1fr);
+  }
+
+  .md\:hg-grid-cols-11 {
+    grid-template-columns: repeat(11, 1fr);
+  }
+
+  .md\:hg-grid-cols-12 {
+    grid-template-columns: repeat(12, 1fr);
+  }
+
+  [class*="md\:hg-col-span-"] {
+    padding: 0;
+  }
+
+  .md\:hg-col-span-1 {
+    grid-column: span 1;
+  }
+
+  .md\:hg-col-span-2 {
+    grid-column: span 2;
+  }
+
+  .md\:hg-col-span-3 {
+    grid-column: span 3;
+  }
+
+  .md\:hg-col-span-4 {
+    grid-column: span 4;
+  }
+
+  .md\:hg-col-span-5 {
+    grid-column: span 5;
+  }
+
+  .md\:hg-col-span-6 {
+    grid-column: span 6;
+  }
+
+  .md\:hg-col-span-7 {
+    grid-column: span 7;
+  }
+
+  .md\:hg-col-span-8 {
+    grid-column: span 8;
+  }
+
+  .md\:hg-col-span-9 {
+    grid-column: span 9;
+  }
+
+  .md\:hg-col-span-10 {
+    grid-column: span 10;
+  }
+
+  .md\:hg-col-span-11 {
+    grid-column: span 11;
+  }
+
+  .md\:hg-col-span-12 {
+    grid-column: span 12;
+  }
+
+  .md\:hg-col-start-1 {
+    grid-column-start: 1;
+  }
+
+  .md\:hg-col-start-2 {
+    grid-column-start: 2;
+  }
+
+  .md\:hg-col-start-3 {
+    grid-column-start: 3;
+  }
+
+  .md\:hg-col-start-4 {
+    grid-column-start: 4;
+  }
+
+  .md\:hg-col-start-5 {
+    grid-column-start: 5;
+  }
+
+  .md\:hg-col-start-6 {
+    grid-column-start: 6;
+  }
+
+  .md\:hg-col-start-7 {
+    grid-column-start: 7;
+  }
+
+  .md\:hg-col-start-8 {
+    grid-column-start: 8;
+  }
+
+  .md\:hg-col-start-9 {
+    grid-column-start: 9;
+  }
+
+  .md\:hg-col-start-10 {
+    grid-column-start: 10;
+  }
+
+  .md\:hg-col-start-11 {
+    grid-column-start: 11;
+  }
+
+  .md\:hg-col-start-12 {
+    grid-column-start: 12;
+  }
+}

package/themes/dutti/theme.css

@@ -19,10 +19,32 @@
 @import url('_variables.css');
 
 /* Componentes */
-@import url('_buttons.css');
-@import url('_inputs.css');
-@import url('_labels.css');
-@import url('_checkboxes.css');
-@import url('_radios.css');
-@import url('_switches.css');
-@import url('_forms.css');
+/* @import url('_buttons.css'); */
+/* @import url('_inputs.css'); */
+/* @import url('_labels.css'); */
+/* @import url('_checkboxes.css');*/
+/* @import url('_radios.css'); */
+/* @import url('_switches.css'); */
+/* @import url('_forms.css'); */
+
+/** ITCSS esctructurado 
+  * basado en HolyGrail5 
+  * para las nuevas necesidades 
+  * del tema Dutti 
+  */
+
+/* Settings - Variables y configuración */
+
+/* Tools - Mixins y funciones */
+
+/* Generic - Resets, normalize */
+
+/* Elements - Estilos de elementos HTML (h1, p, a) */
+
+/* Objects - Patrones de layout */
+/* @import url('./objects/_grid.css');
+
+/* Components - Componentes de UI específicos */
+/* @import url('./components/_icons.css');
+
+/* Utilities - Helpers y utilidades */