holygrail5 1.0.17 → 1.0.18

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=1771406408021">
-  <link rel="stylesheet" href="guide-styles.css?v=1771406408009">
+  <link rel="stylesheet" href="output.css?v=1771933352854">
+  <link rel="stylesheet" href="guide-styles.css?v=1771933352842">
   <style>
     
     body {
@@ -76,7 +76,7 @@
         </a>
       </div>
                <p class="text-m guide-sidebar-meta">
-          last update: 18/2/2026, 10:20:08
+          last update: 24/2/2026, 12:42:32
         </p>
       
       

package/dist/themes/dutti-demo.html

@@ -134,6 +134,10 @@
             <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/dist/themes/dutti.css

@@ -83,7 +83,7 @@
 /* === _buttons.css === */
 /**
  * Botones
- * Variantes: primary, secondary, tertiary, label-m
+ * Variantes: primary, secondary, tertiary, label-m, link, badge
  * Tamaños: sm, md, lg
  */
 
@@ -396,6 +396,69 @@
   opacity: 0.5;
 }
 
+/* BADGE BUTTON (pill, compacto) */
+.btn-badge {
+  min-height: auto;
+  height: auto;
+  padding: var(--hg-spacing-4) var(--hg-spacing-12);
+
+  background-color: transparent;
+  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:transparent;
+  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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "holygrail5",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "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/themes/dutti/_buttons.css

@@ -313,14 +313,13 @@
   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);
+
+  background-color: transparent;
   color: var(--hg-color-dark-grey);
   font-size: var(--hg-typo-font-size-12);
   white-space: nowrap;
@@ -332,7 +331,7 @@
 .btn-badge.hover,
 .btn-badge:active,
 .btn-badge.active {
-  background-color: var(--hg-color-white);
+  background-color:transparent;
   color: var(--hg-color-primary);
   border-color: transparent;
   cursor: pointer;