holygrail5 1.0.15 → 1.0.16

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.15",
+  "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/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/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 */