holygrail5 1.0.19 → 1.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/README.md +88 -18
  2. package/config.json +205 -77
  3. package/dist/assets/fonts/suisse-intl-light.woff +0 -0
  4. package/dist/assets/fonts/suisse-intl-light.woff2 +0 -0
  5. package/dist/assets/fonts/suisse-intl-medium.woff +0 -0
  6. package/dist/assets/fonts/suisse-intl-medium.woff2 +0 -0
  7. package/dist/assets/fonts/suisse-intl-regular.woff +0 -0
  8. package/dist/assets/fonts/suisse-intl-regular.woff2 +0 -0
  9. package/dist/assets/fonts/suisse-intl-semibold.woff +0 -0
  10. package/dist/assets/fonts/suisse-intl-semibold.woff2 +0 -0
  11. package/dist/assets/fonts/suisse-works-bold.woff +0 -0
  12. package/dist/assets/fonts/suisse-works-bold.woff2 +0 -0
  13. package/dist/assets/fonts/suisse-works-medium.woff +0 -0
  14. package/dist/assets/fonts/suisse-works-medium.woff2 +0 -0
  15. package/dist/assets/fonts/suisse-works-regular.woff +0 -0
  16. package/dist/assets/fonts/suisse-works-regular.woff2 +0 -0
  17. package/dist/componentes.html +429 -0
  18. package/dist/developer-guide.md +7 -7
  19. package/dist/guide-styles.css +197 -25
  20. package/dist/index.html +807 -689
  21. package/dist/output.css +217 -114
  22. package/dist/skills.html +14 -8
  23. package/dist/themes/dutti-demo.html +713 -19
  24. package/dist/themes/dutti.css +67 -16
  25. package/dist/themes/limited-demo.html +1121 -0
  26. package/dist/themes/limited.css +2493 -0
  27. package/package.json +1 -1
  28. package/src/.data/.previous-values.json +151 -84
  29. package/src/assets/fonts/suisse-intl-light.woff +0 -0
  30. package/src/assets/fonts/suisse-intl-light.woff2 +0 -0
  31. package/src/assets/fonts/suisse-intl-medium.woff +0 -0
  32. package/src/assets/fonts/suisse-intl-medium.woff2 +0 -0
  33. package/src/assets/fonts/suisse-intl-regular.woff +0 -0
  34. package/src/assets/fonts/suisse-intl-regular.woff2 +0 -0
  35. package/src/assets/fonts/suisse-intl-semibold.woff +0 -0
  36. package/src/assets/fonts/suisse-intl-semibold.woff2 +0 -0
  37. package/src/assets/fonts/suisse-works-bold.woff +0 -0
  38. package/src/assets/fonts/suisse-works-bold.woff2 +0 -0
  39. package/src/assets/fonts/suisse-works-medium.woff +0 -0
  40. package/src/assets/fonts/suisse-works-medium.woff2 +0 -0
  41. package/src/assets/fonts/suisse-works-regular.woff +0 -0
  42. package/src/assets/fonts/suisse-works-regular.woff2 +0 -0
  43. package/src/build/asset-manager.js +94 -3
  44. package/src/build/build-orchestrator.js +74 -12
  45. package/src/build/components-generator.js +584 -0
  46. package/src/build/skills-generator.js +43 -5
  47. package/src/build/theme-config-loader.js +58 -0
  48. package/src/build/theme-transformer.js +109 -16
  49. package/src/build/theme-vars-table-generator.js +349 -0
  50. package/src/build/typo-table-generator.js +154 -0
  51. package/src/docs-generator/guide-styles.css +197 -24
  52. package/src/docs-generator/html-generator.js +92 -246
  53. package/src/docs-generator/sections/colors-section.js +109 -0
  54. package/src/docs-generator/value-tracker.js +154 -0
  55. package/src/generators/typo-generator.js +2 -1
  56. package/src/generators/utils.js +90 -1
  57. package/src/skills.html +1 -0
  58. package/src/watch-config.js +99 -32
  59. package/themes/{dutti → _base}/_buttons.css +2 -2
  60. package/themes/{dutti → _base}/_checkboxes.css +1 -1
  61. package/themes/{dutti → _base}/_forms.css +1 -1
  62. package/themes/{dutti → _base}/_inputs.css +55 -10
  63. package/themes/{dutti → _base}/_labels.css +1 -1
  64. package/themes/dutti/README.md +67 -21
  65. package/themes/dutti/_variables.css +7 -1
  66. package/themes/dutti/demo.html +18 -14
  67. package/themes/dutti/theme.css +22 -44
  68. package/themes/dutti/theme.json +86 -0
  69. package/themes/limited/_variables.css +123 -0
  70. package/themes/limited/demo.html +296 -0
  71. package/themes/limited/theme.css +32 -0
  72. package/themes/limited/theme.json +105 -0
  73. /package/themes/{dutti → _base}/_containers.css +0 -0
  74. /package/themes/{dutti → _base}/_radios.css +0 -0
  75. /package/themes/{dutti → _base}/_switches.css +0 -0
  76. /package/themes/{dutti → _base}/components/_icons.css +0 -0
  77. /package/themes/{dutti → _base}/objects/_grid.css +0 -0
package/dist/themes/dutti.css CHANGED
@@ -67,7 +67,13 @@
67
67
 
68
68
  --form-group-gap: var(--hg-spacing-16);
69
69
 
70
- /* Tipografía - se usan directamente las variables de HolyGrail5 */
70
+ /* Tipografía del tema Dutti — Suisse Intl (sans) por peso.
71
+ Cada peso es una font-family propia (suisse-light/regular/
72
+ medium/semibold) declaradas en guide-styles.css. */
73
+ --hg-typo-font-family-primary-light: "suisse-light", Arial, Helvetica, sans-serif;
74
+ --hg-typo-font-family-primary-regular: "suisse-regular", Arial, Helvetica, sans-serif;
75
+ --hg-typo-font-family-primary-bold: "suisse-semibold", Arial, Helvetica, sans-serif;
76
+ --hg-typo-font-family-secondary: "suisse-medium", Arial, Helvetica, sans-serif;
71
77
 
72
78
  /* Bordes y radios */
73
79
  --border-radius: 0;
@@ -92,7 +98,7 @@
92
98
  align-items: center;
93
99
  justify-content: center;
94
100
  gap: var(--hg-spacing-8);
95
- font-family: var(--hg-typo-font-family-primary);
101
+ font-family: var(--hg-typo-font-family-primary-regular);
96
102
  font-size: var(--hg-typo-font-size-13);
97
103
  font-weight: var(--hg-typo-font-weight-400);
98
104
  line-height: var(--hg-typo-line-height-1-5);
@@ -128,7 +134,7 @@
128
134
  color: var(--hg-color-white);
129
135
  background-color: var(--hg-color-black);
130
136
  border: var(--border-width) var(--border-style) var(--hg-color-black);
131
- font-family: var(--hg-typo-font-family-primary);
137
+ font-family: var(--hg-typo-font-family-primary-regular);
132
138
  font-weight: var(--hg-typo-font-weight-400);
133
139
  }
134
140
 
@@ -474,7 +480,7 @@
474
480
  .input {
475
481
  display: block;
476
482
  width: 100%;
477
- font-family: var(--hg-typo-font-family-primary);
483
+ font-family: var(--hg-typo-font-family-primary-regular);
478
484
  font-size: var(--hg-typo-font-size-13);
479
485
  font-weight: var(--hg-typo-font-weight-400);
480
486
  line-height: var(--hg-typo-line-height-1-5);
@@ -524,7 +530,7 @@
524
530
 
525
531
  .form-input-label-2,
526
532
  .error-zone {
527
- font-family: var(--hg-typo-font-family-primary);
533
+ font-family: var(--hg-typo-font-family-primary-regular);
528
534
  position: relative;
529
535
 
530
536
  display: block;
@@ -542,7 +548,7 @@
542
548
 
543
549
  .form-input-label-2 .help,
544
550
  .error-zone .help {
545
- font-family: var(--hg-typo-font-family-primary);
551
+ font-family: var(--hg-typo-font-family-primary-regular);
546
552
  position: relative;
547
553
  line-height: 1.5;
548
554
  font-size: 12px;
@@ -572,15 +578,23 @@
572
578
  }
573
579
 
574
580
  .form-input-label-2 > input,
581
+ .form-input-label-2 > textarea,
582
+ .form-input-label-2 > select,
575
583
  .form-input-label-2 > label,
576
584
  .error-zone > input,
585
+ .error-zone > textarea,
586
+ .error-zone > select,
577
587
  .error-zone > label {
578
- font-family: var(--hg-typo-font-family-primary);
588
+ font-family: var(--hg-typo-font-family-primary-regular);
579
589
  font-weight: normal;
580
590
  }
581
591
 
582
592
  .form-input-label-2 > input,
583
- .error-zone > input {
593
+ .form-input-label-2 > textarea,
594
+ .form-input-label-2 > select,
595
+ .error-zone > input,
596
+ .error-zone > textarea,
597
+ .error-zone > select {
584
598
  border: none;
585
599
  border-bottom: var(--border-width) var(--border-style) var(--hg-color-primary);
586
600
  border-radius: 0;
@@ -588,13 +602,27 @@
588
602
  padding: var(--hg-spacing-16) 0 var(--hg-spacing-8) 0;
589
603
  padding-left: 0;
590
604
  padding-right: 0;
591
- height: 40px;
592
605
  box-sizing: border-box;
593
606
  transition: border-bottom-color 0.1s ease-in-out, border-bottom-width 0.1s ease-in-out;
594
607
  margin: 0;
595
608
  vertical-align: top;
596
609
  }
597
610
 
611
+ .form-input-label-2 > input,
612
+ .form-input-label-2 > select,
613
+ .error-zone > input,
614
+ .error-zone > select {
615
+ height: 40px;
616
+ }
617
+
618
+ /* El textarea mantiene su altura natural (rows) pero respeta el padding
619
+ superior para dejar aire al label flotado. */
620
+ .form-input-label-2 > textarea,
621
+ .error-zone > textarea {
622
+ min-height: 40px;
623
+ resize: vertical;
624
+ }
625
+
598
626
  .form-input-label-2 > label,
599
627
  .error-zone > label {
600
628
  box-sizing: border-box;
@@ -615,12 +643,27 @@
615
643
  }
616
644
 
617
645
  .form-input-label-2 input::placeholder,
618
- .error-zone input::placeholder {
646
+ .form-input-label-2 textarea::placeholder,
647
+ .error-zone input::placeholder,
648
+ .error-zone textarea::placeholder {
619
649
  color: transparent;
620
650
  }
621
651
 
622
652
  .form-input-label-2 input:not(:placeholder-shown) ~ label,
623
- .error-zone input:not(:placeholder-shown) ~ label {
653
+ .form-input-label-2 textarea:not(:placeholder-shown) ~ label,
654
+ .error-zone input:not(:placeholder-shown) ~ label,
655
+ .error-zone textarea:not(:placeholder-shown) ~ label {
656
+ top: 0;
657
+ font-size: 12px;
658
+ color: var(--hg-color-dark-grey);
659
+ transform: translateY(0);
660
+ }
661
+
662
+ /* El <select> no soporta :placeholder-shown (siempre tiene una option
663
+ seleccionada), así que forzamos el label a estar permanentemente
664
+ flotado arriba cuando el control es un select. */
665
+ .form-input-label-2 > select ~ label,
666
+ .error-zone > select ~ label {
624
667
  top: 0;
625
668
  font-size: 12px;
626
669
  color: var(--hg-color-dark-grey);
@@ -628,12 +671,20 @@
628
671
  }
629
672
 
630
673
  .form-input-label-2 input:focus,
631
- .error-zone input:focus {
674
+ .form-input-label-2 textarea:focus,
675
+ .form-input-label-2 select:focus,
676
+ .error-zone input:focus,
677
+ .error-zone textarea:focus,
678
+ .error-zone select:focus {
632
679
  outline: none;
633
680
  }
634
681
 
635
682
  .form-input-label-2 input:focus ~ label,
636
- .error-zone input:focus ~ label {
683
+ .form-input-label-2 textarea:focus ~ label,
684
+ .form-input-label-2 select:focus ~ label,
685
+ .error-zone input:focus ~ label,
686
+ .error-zone textarea:focus ~ label,
687
+ .error-zone select:focus ~ label {
637
688
  top: 0;
638
689
  font-size: 12px;
639
690
  color: var(--hg-color-dark-grey);
@@ -822,7 +873,7 @@
822
873
 
823
874
  .label {
824
875
  display: block;
825
- font-family: var(--hg-typo-font-family-primary);
876
+ font-family: var(--hg-typo-font-family-primary-regular);
826
877
  font-size: var(--hg-typo-font-size-12);
827
878
  font-weight: var(--hg-typo-font-weight-700);
828
879
  line-height: var(--hg-typo-line-height-1-5);
@@ -937,7 +988,7 @@
937
988
  }
938
989
 
939
990
  .checkbox-label {
940
- font-family: var(--hg-typo-font-family-primary);
991
+ font-family: var(--hg-typo-font-family-primary-regular);
941
992
  font-size: var(--hg-typo-font-size-13);
942
993
  font-weight: var(--hg-typo-font-weight-400);
943
994
  line-height: var(--hg-typo-line-height-1-5);
@@ -1875,7 +1926,7 @@
1875
1926
  /* Helper Text / Messages */
1876
1927
  .helper-text {
1877
1928
  display: block;
1878
- font-family: var(--hg-typo-font-family-primary);
1929
+ font-family: var(--hg-typo-font-family-primary-regular);
1879
1930
  font-size: var(--hg-typo-font-size-12);
1880
1931
  font-weight: var(--hg-typo-font-weight-400);
1881
1932
  line-height: var(--hg-typo-line-height-1-5);