holygrail5 1.0.14 → 1.0.16

package/config.json

@@ -42,7 +42,7 @@
     "primary": "#000000",
     "error": "#b40016",
     "info": "#1a32a4",
-    "success": "#76ae4a",
+    "success": "#12882C",
     "warning": "#ffc700",
     "feel": "#fb9962",
     "feel-dark": "#c94c07",

package/dist/themes/dutti.css

@@ -1778,4 +1778,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.14",
+  "version": "1.0.16",
   "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/docs-generator/html-generator.js

@@ -937,8 +937,8 @@ function generateHTML(configData, previousValuesPath = null) {
         </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>
@@ -958,7 +958,7 @@ function generateHTML(configData, previousValuesPath = null) {
                 <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 (≥${configData.breakpoints.desktop}). 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/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/themes/dutti/README.md

@@ -266,7 +266,7 @@ Para cambiar los colores, edita `config.json`:
   "colors": {
     "primary": "#000000",
     "error": "#b40016",
-    "success": "#76ae4a",
+    "success": "#12882C",
     "warning": "#ffc700",
     "feel": "#fb9962"
   }

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/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 */