holygrail5 1.0.21 → 1.0.23

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 (42) hide show
  1. package/README.md +72 -0
  2. package/config.json +85 -18
  3. package/dist/assets/fonts/SuisseIntlMono-Bold-WebS.woff +0 -0
  4. package/dist/assets/fonts/SuisseIntlMono-Bold-WebS.woff2 +0 -0
  5. package/dist/assets/fonts/SuisseIntlMono-Regular-WebS.woff +0 -0
  6. package/dist/assets/fonts/SuisseIntlMono-Regular-WebS.woff2 +0 -0
  7. package/dist/assets/fonts/suisse-intl-thin.woff +0 -0
  8. package/dist/assets/fonts/suisse-intl-thin.woff2 +0 -0
  9. package/dist/componentes.html +1 -8
  10. package/dist/developer-guide.md +4 -0
  11. package/dist/guide-styles.css +85 -56
  12. package/dist/index.html +2727 -2690
  13. package/dist/output.css +123 -70
  14. package/dist/skills.html +17 -5
  15. package/dist/themes/dutti-demo.html +76 -39
  16. package/dist/themes/dutti.css +10 -6
  17. package/dist/themes/limited-demo.html +55 -18
  18. package/dist/themes/limited.css +8 -6
  19. package/package.json +2 -2
  20. package/src/.data/.previous-values.json +69 -20
  21. package/src/assets/fonts/SuisseIntlMono-Bold-WebS.woff +0 -0
  22. package/src/assets/fonts/SuisseIntlMono-Bold-WebS.woff2 +0 -0
  23. package/src/assets/fonts/SuisseIntlMono-Regular-WebS.woff +0 -0
  24. package/src/assets/fonts/SuisseIntlMono-Regular-WebS.woff2 +0 -0
  25. package/src/assets/fonts/suisse-intl-thin.woff +0 -0
  26. package/src/assets/fonts/suisse-intl-thin.woff2 +0 -0
  27. package/src/build/asset-manager.js +8 -0
  28. package/src/build/components-generator.js +1 -8
  29. package/src/build/skills-generator.js +12 -4
  30. package/src/build/theme-transformer.js +10 -3
  31. package/src/dev-server.js +28 -13
  32. package/src/docs-generator/guide-styles.css +85 -56
  33. package/src/docs-generator/html-generator.js +188 -183
  34. package/src/docs-generator/sections/colors-section.js +15 -5
  35. package/src/generators/typo-generator.js +1 -2
  36. package/src/generators/utils.js +15 -0
  37. package/themes/_base/_radios.css +7 -6
  38. package/themes/dutti/README.md +17 -0
  39. package/themes/dutti/_variables.css +3 -0
  40. package/themes/dutti/theme.json +2 -1
  41. package/themes/limited/_variables.css +1 -0
  42. package/themes/limited/theme.json +2 -1
package/dist/themes/dutti-demo.html CHANGED
@@ -291,7 +291,7 @@
291
291
  </div>
292
292
  </div>
293
293
  <div class="hg-vars-group">
294
- <h4>Componente: checkbox <span style="color:var(--hg-color-middle-grey, #a9a9a9);font-weight:400;">(4)</span></h4>
294
+ <h4>Componente: checkbox <span style="color:var(--hg-color-middle-grey, #a9a9a9);font-weight:400;">(5)</span></h4>
295
295
  <div class="hg-vars-list">
296
296
  <div class="hg-vars-item">
297
297
  <div class="hg-vars-name"><code>--checkbox-bg</code></div>
@@ -309,6 +309,10 @@
309
309
  <div class="hg-vars-name"><code>--checkbox-checked-border</code></div>
310
310
  <div class="hg-vars-value"><code>var(--hg-color-primary)</code><span class="hg-vars-swatch" style="background:#000000" title="#000000"></span></div>
311
311
  </div>
312
+ <div class="hg-vars-item">
313
+ <div class="hg-vars-name"><code>--checkbox-check-color</code></div>
314
+ <div class="hg-vars-value"><code>var(--hg-color-white)</code><span class="hg-vars-swatch" style="background:#ffffff" title="#ffffff"></span></div>
315
+ </div>
312
316
  </div>
313
317
  </div>
314
318
  <div class="hg-vars-group">
@@ -328,27 +332,6 @@
328
332
  </div>
329
333
  </div>
330
334
  </div>
331
- <div class="hg-vars-group">
332
- <h4>Design tokens <span style="color:var(--hg-color-middle-grey, #a9a9a9);font-weight:400;">(4)</span></h4>
333
- <div class="hg-vars-list">
334
- <div class="hg-vars-item">
335
- <div class="hg-vars-name"><code>--border-radius</code></div>
336
- <div class="hg-vars-value"><code>0</code></div>
337
- </div>
338
- <div class="hg-vars-item">
339
- <div class="hg-vars-name"><code>--border-width</code></div>
340
- <div class="hg-vars-value"><code>1px</code></div>
341
- </div>
342
- <div class="hg-vars-item">
343
- <div class="hg-vars-name"><code>--border-style</code></div>
344
- <div class="hg-vars-value"><code>solid</code></div>
345
- </div>
346
- <div class="hg-vars-item">
347
- <div class="hg-vars-name"><code>--transition</code></div>
348
- <div class="hg-vars-value"><code>all 0.2s ease</code></div>
349
- </div>
350
- </div>
351
- </div>
352
335
  </div>
353
336
  <div class="hg-vars-col">
354
337
  <div class="hg-vars-group">
@@ -440,6 +423,27 @@
440
423
  </div>
441
424
  </div>
442
425
  </div>
426
+ <div class="hg-vars-group">
427
+ <h4>Design tokens <span style="color:var(--hg-color-middle-grey, #a9a9a9);font-weight:400;">(4)</span></h4>
428
+ <div class="hg-vars-list">
429
+ <div class="hg-vars-item">
430
+ <div class="hg-vars-name"><code>--border-radius</code></div>
431
+ <div class="hg-vars-value"><code>0</code></div>
432
+ </div>
433
+ <div class="hg-vars-item">
434
+ <div class="hg-vars-name"><code>--border-width</code></div>
435
+ <div class="hg-vars-value"><code>1px</code></div>
436
+ </div>
437
+ <div class="hg-vars-item">
438
+ <div class="hg-vars-name"><code>--border-style</code></div>
439
+ <div class="hg-vars-value"><code>solid</code></div>
440
+ </div>
441
+ <div class="hg-vars-item">
442
+ <div class="hg-vars-name"><code>--transition</code></div>
443
+ <div class="hg-vars-value"><code>all 0.2s ease</code></div>
444
+ </div>
445
+ </div>
446
+ </div>
443
447
  </div>
444
448
  <div class="hg-vars-col">
445
449
  <div class="hg-vars-group">
@@ -602,11 +606,22 @@
602
606
  </tr>
603
607
  </thead>
604
608
  <tbody>
609
+ <tr>
610
+ <td class="hg-typo-preview"><span class="title-thin">Aa Bb Cc 123</span></td>
611
+ <td><code>.title-thin</code></td>
612
+ <td><code>primary-thin</code> <span class="hg-typo-meta">&quot;suisse-thin&quot;, Arial, Helvetica, sans-serif</span></td>
613
+ <td>100</td>
614
+ <td><span class="hg-typo-num">24px</span></td>
615
+ <td><span class="hg-typo-num">24px</span></td>
616
+ <td><span class="hg-typo-num">1</span></td>
617
+ <td>—</td>
618
+ <td>—</td>
619
+ </tr>
605
620
  <tr>
606
621
  <td class="hg-typo-preview"><span class="title-xxl">Aa Bb Cc 123</span></td>
607
622
  <td><code>.title-xxl</code></td>
608
623
  <td><code>primary-regular</code> <span class="hg-typo-meta">&quot;suisse-regular&quot;, Arial, Helvetica, sans-serif</span></td>
609
- <td>300</td>
624
+ <td>400</td>
610
625
  <td><span class="hg-typo-num">24px</span></td>
611
626
  <td><span class="hg-typo-num">24px</span></td>
612
627
  <td><span class="hg-typo-num">1</span></td>
@@ -628,7 +643,7 @@
628
643
  <td class="hg-typo-preview"><span class="title-l-b">Aa Bb Cc 123</span></td>
629
644
  <td><code>.title-l-b</code></td>
630
645
  <td><code>primary-regular</code> <span class="hg-typo-meta">&quot;suisse-regular&quot;, Arial, Helvetica, sans-serif</span></td>
631
- <td>300</td>
646
+ <td>400</td>
632
647
  <td><span class="hg-typo-num">12px</span></td>
633
648
  <td><span class="hg-typo-num">13px</span></td>
634
649
  <td><span class="hg-typo-num">1.4</span></td>
@@ -639,7 +654,7 @@
639
654
  <td class="hg-typo-preview"><span class="title-l">Aa Bb Cc 123</span></td>
640
655
  <td><code>.title-l</code></td>
641
656
  <td><code>primary-light</code> <span class="hg-typo-meta">&quot;suisse-light&quot;, Arial, Helvetica, sans-serif</span></td>
642
- <td>100</td>
657
+ <td>300</td>
643
658
  <td><span class="hg-typo-num">12px</span></td>
644
659
  <td><span class="hg-typo-num">13px</span></td>
645
660
  <td><span class="hg-typo-num">1.4</span></td>
@@ -650,7 +665,7 @@
650
665
  <td class="hg-typo-preview"><span class="title-m">Aa Bb Cc 123</span></td>
651
666
  <td><code>.title-m</code></td>
652
667
  <td><code>primary-light</code> <span class="hg-typo-meta">&quot;suisse-light&quot;, Arial, Helvetica, sans-serif</span></td>
653
- <td>100</td>
668
+ <td>300</td>
654
669
  <td><span class="hg-typo-num">12px</span></td>
655
670
  <td><span class="hg-typo-num">13px</span></td>
656
671
  <td><span class="hg-typo-num">1.4</span></td>
@@ -661,7 +676,7 @@
661
676
  <td class="hg-typo-preview"><span class="title-s-b">Aa Bb Cc 123</span></td>
662
677
  <td><code>.title-s-b</code></td>
663
678
  <td><code>primary-regular</code> <span class="hg-typo-meta">&quot;suisse-regular&quot;, Arial, Helvetica, sans-serif</span></td>
664
- <td>300</td>
679
+ <td>400</td>
665
680
  <td><span class="hg-typo-num">10px</span></td>
666
681
  <td><span class="hg-typo-num">10px</span></td>
667
682
  <td><span class="hg-typo-num">1.4</span></td>
@@ -672,7 +687,7 @@
672
687
  <td class="hg-typo-preview"><span class="title-s">Aa Bb Cc 123</span></td>
673
688
  <td><code>.title-s</code></td>
674
689
  <td><code>primary-light</code> <span class="hg-typo-meta">&quot;suisse-light&quot;, Arial, Helvetica, sans-serif</span></td>
675
- <td>100</td>
690
+ <td>300</td>
676
691
  <td><span class="hg-typo-num">10px</span></td>
677
692
  <td><span class="hg-typo-num">10px</span></td>
678
693
  <td><span class="hg-typo-num">1.4</span></td>
@@ -683,7 +698,7 @@
683
698
  <td class="hg-typo-preview"><span class="text-l">Aa Bb Cc 123</span></td>
684
699
  <td><code>.text-l</code></td>
685
700
  <td><code>primary-light</code> <span class="hg-typo-meta">&quot;suisse-light&quot;, Arial, Helvetica, sans-serif</span></td>
686
- <td>100</td>
701
+ <td>300</td>
687
702
  <td><span class="hg-typo-num">13px</span></td>
688
703
  <td><span class="hg-typo-num">13px</span></td>
689
704
  <td><span class="hg-typo-num">1.5</span></td>
@@ -694,7 +709,7 @@
694
709
  <td class="hg-typo-preview"><span class="text-m">Aa Bb Cc 123</span></td>
695
710
  <td><code>.text-m</code></td>
696
711
  <td><code>primary-light</code> <span class="hg-typo-meta">&quot;suisse-light&quot;, Arial, Helvetica, sans-serif</span></td>
697
- <td>100</td>
712
+ <td>300</td>
698
713
  <td><span class="hg-typo-num">12px</span></td>
699
714
  <td><span class="hg-typo-num">12px</span></td>
700
715
  <td><span class="hg-typo-num">1.5</span></td>
@@ -705,7 +720,7 @@
705
720
  <td class="hg-typo-preview"><span class="p-tag">Aa Bb Cc 123</span></td>
706
721
  <td><code>.p-tag</code></td>
707
722
  <td><code>primary-light</code> <span class="hg-typo-meta">&quot;suisse-light&quot;, Arial, Helvetica, sans-serif</span></td>
708
- <td>100</td>
723
+ <td>300</td>
709
724
  <td><span class="hg-typo-num">9px</span></td>
710
725
  <td><span class="hg-typo-num">10px</span></td>
711
726
  <td><span class="hg-typo-num">1</span></td>
@@ -716,7 +731,7 @@
716
731
  <td class="hg-typo-preview"><span class="hg-body-l">Aa Bb Cc 123</span></td>
717
732
  <td><code>.hg-body-l</code></td>
718
733
  <td><code>primary-light</code> <span class="hg-typo-meta">&quot;suisse-light&quot;, Arial, Helvetica, sans-serif</span></td>
719
- <td>100</td>
734
+ <td>300</td>
720
735
  <td><span class="hg-typo-num">12px</span></td>
721
736
  <td><span class="hg-typo-num">13px</span></td>
722
737
  <td><span class="hg-typo-num">1.5</span></td>
@@ -727,7 +742,7 @@
727
742
  <td class="hg-typo-preview"><span class="hg-body-l-b">Aa Bb Cc 123</span></td>
728
743
  <td><code>.hg-body-l-b</code></td>
729
744
  <td><code>primary-regular</code> <span class="hg-typo-meta">&quot;suisse-regular&quot;, Arial, Helvetica, sans-serif</span></td>
730
- <td>300</td>
745
+ <td>400</td>
731
746
  <td><span class="hg-typo-num">12px</span></td>
732
747
  <td><span class="hg-typo-num">13px</span></td>
733
748
  <td><span class="hg-typo-num">1.5</span></td>
@@ -738,7 +753,7 @@
738
753
  <td class="hg-typo-preview"><span class="hg-body-m">Aa Bb Cc 123</span></td>
739
754
  <td><code>.hg-body-m</code></td>
740
755
  <td><code>primary-light</code> <span class="hg-typo-meta">&quot;suisse-light&quot;, Arial, Helvetica, sans-serif</span></td>
741
- <td>100</td>
756
+ <td>300</td>
742
757
  <td><span class="hg-typo-num">12px</span></td>
743
758
  <td><span class="hg-typo-num">12px</span></td>
744
759
  <td><span class="hg-typo-num">1.5</span></td>
@@ -749,7 +764,7 @@
749
764
  <td class="hg-typo-preview"><span class="hg-body-m-b">Aa Bb Cc 123</span></td>
750
765
  <td><code>.hg-body-m-b</code></td>
751
766
  <td><code>primary-regular</code> <span class="hg-typo-meta">&quot;suisse-regular&quot;, Arial, Helvetica, sans-serif</span></td>
752
- <td>300</td>
767
+ <td>400</td>
753
768
  <td><span class="hg-typo-num">12px</span></td>
754
769
  <td><span class="hg-typo-num">12px</span></td>
755
770
  <td><span class="hg-typo-num">1.5</span></td>
@@ -760,7 +775,7 @@
760
775
  <td class="hg-typo-preview"><span class="label-m">Aa Bb Cc 123</span></td>
761
776
  <td><code>.label-m</code></td>
762
777
  <td><code>primary-light</code> <span class="hg-typo-meta">&quot;suisse-light&quot;, Arial, Helvetica, sans-serif</span></td>
763
- <td>100</td>
778
+ <td>300</td>
764
779
  <td><span class="hg-typo-num">12px</span></td>
765
780
  <td><span class="hg-typo-num">12px</span></td>
766
781
  <td><span class="hg-typo-num">1</span></td>
@@ -771,7 +786,7 @@
771
786
  <td class="hg-typo-preview"><span class="label-m-b">Aa Bb Cc 123</span></td>
772
787
  <td><code>.label-m-b</code></td>
773
788
  <td><code>primary-regular</code> <span class="hg-typo-meta">&quot;suisse-regular&quot;, Arial, Helvetica, sans-serif</span></td>
774
- <td>300</td>
789
+ <td>400</td>
775
790
  <td><span class="hg-typo-num">12px</span></td>
776
791
  <td><span class="hg-typo-num">12px</span></td>
777
792
  <td><span class="hg-typo-num">1</span></td>
@@ -782,7 +797,7 @@
782
797
  <td class="hg-typo-preview"><span class="label-s">Aa Bb Cc 123</span></td>
783
798
  <td><code>.label-s</code></td>
784
799
  <td><code>primary-light</code> <span class="hg-typo-meta">&quot;suisse-light&quot;, Arial, Helvetica, sans-serif</span></td>
785
- <td>100</td>
800
+ <td>300</td>
786
801
  <td><span class="hg-typo-num">10px</span></td>
787
802
  <td><span class="hg-typo-num">10px</span></td>
788
803
  <td><span class="hg-typo-num">1</span></td>
@@ -793,12 +808,34 @@
793
808
  <td class="hg-typo-preview"><span class="label-s-b">Aa Bb Cc 123</span></td>
794
809
  <td><code>.label-s-b</code></td>
795
810
  <td><code>primary-regular</code> <span class="hg-typo-meta">&quot;suisse-regular&quot;, Arial, Helvetica, sans-serif</span></td>
796
- <td>300</td>
811
+ <td>400</td>
797
812
  <td><span class="hg-typo-num">10px</span></td>
798
813
  <td><span class="hg-typo-num">10px</span></td>
799
814
  <td><span class="hg-typo-num">1</span></td>
800
815
  <td>0.06em</td>
801
816
  <td>uppercase</td>
817
+ </tr>
818
+ <tr>
819
+ <td class="hg-typo-preview"><span class="label-mono">Aa Bb Cc 123</span></td>
820
+ <td><code>.label-mono</code></td>
821
+ <td><code>mono-regular</code> <span class="hg-typo-meta">&quot;suisse-mono-regular&quot;, ui-monospace, monospace</span></td>
822
+ <td>400</td>
823
+ <td><span class="hg-typo-num">10px</span></td>
824
+ <td><span class="hg-typo-num">10px</span></td>
825
+ <td><span class="hg-typo-num">1.2</span></td>
826
+ <td>0.06em</td>
827
+ <td>uppercase</td>
828
+ </tr>
829
+ <tr>
830
+ <td class="hg-typo-preview"><span class="label-mono-b">Aa Bb Cc 123</span></td>
831
+ <td><code>.label-mono-b</code></td>
832
+ <td><code>mono-bold</code> <span class="hg-typo-meta">&quot;suisse-mono-bold&quot;, ui-monospace, monospace</span></td>
833
+ <td>700</td>
834
+ <td><span class="hg-typo-num">10px</span></td>
835
+ <td><span class="hg-typo-num">10px</span></td>
836
+ <td><span class="hg-typo-num">1.2</span></td>
837
+ <td>0.06em</td>
838
+ <td>uppercase</td>
802
839
  </tr>
803
840
  </tbody>
804
841
  </table>
package/dist/themes/dutti.css CHANGED
@@ -43,6 +43,7 @@
43
43
  --checkbox-border: var(--hg-color-middle-grey);
44
44
  --checkbox-checked-bg: var(--hg-color-primary);
45
45
  --checkbox-checked-border: var(--hg-color-primary);
46
+ --checkbox-check-color: var(--hg-color-white);
46
47
 
47
48
  --radio-bg: var(--hg-color-white);
48
49
  --radio-border: var(--hg-color-middle-grey);
@@ -74,6 +75,8 @@
74
75
  --hg-typo-font-family-primary-regular: "suisse-regular", Arial, Helvetica, sans-serif;
75
76
  --hg-typo-font-family-primary-bold: "suisse-semibold", Arial, Helvetica, sans-serif;
76
77
  --hg-typo-font-family-secondary: "suisse-medium", Arial, Helvetica, sans-serif;
78
+ --hg-typo-font-family-mono-regular: "suisse-mono-regular", Arial, Helvetica, sans-serif;
79
+ --hg-typo-font-family-mono-bold: "suisse-mono-bold", Arial, Helvetica, sans-serif;
77
80
 
78
81
  /* Bordes y radios */
79
82
  --border-radius: 0;
@@ -1629,7 +1632,7 @@
1629
1632
  padding-bottom: 0;
1630
1633
  cursor: pointer;
1631
1634
  font-weight: normal;
1632
- font-size: var(--hg-typo-font-size-xs, 12px);
1635
+ font-size: var(--hg-typo-font-size-12);
1633
1636
  text-align: initial;
1634
1637
  display: flex;
1635
1638
  flex-direction: column;
@@ -1648,7 +1651,8 @@
1648
1651
  outline: 0;
1649
1652
  display: inline-block;
1650
1653
  vertical-align: top;
1651
- margin: 0 var(--hg-spacing-10, 10px) 0 0;
1654
+ /* Geometría del componente (círculo 14px + hueco): valor propio, no de la escala de spacing */
1655
+ margin: 0 10px 0 0;
1652
1656
  border-radius: 0;
1653
1657
  }
1654
1658
 
@@ -1657,7 +1661,7 @@
1657
1661
  display: inline-block;
1658
1662
  vertical-align: top;
1659
1663
  margin: 0;
1660
- line-height: var(--hg-typo-line-height-sm, 16px);
1664
+ line-height: 16px;
1661
1665
  padding-left: var(--hg-spacing-24);
1662
1666
  min-height: 20px;
1663
1667
  }
@@ -1723,7 +1727,7 @@
1723
1727
  }
1724
1728
 
1725
1729
  .check-center .box3-content {
1726
- padding-left: var(--hg-spacing-30, 30px);
1730
+ padding-left: 30px; /* geometría: círculo + hueco, no escala de spacing */
1727
1731
  }
1728
1732
 
1729
1733
  .check-center.checkbox-radio [type=radio]:checked + label .border-1,
@@ -1767,7 +1771,7 @@
1767
1771
  }
1768
1772
 
1769
1773
  .check-top .box3-content {
1770
- padding-left: var(--hg-spacing-30, 30px);
1774
+ padding-left: 30px; /* geometría: círculo + hueco, no escala de spacing */
1771
1775
  }
1772
1776
 
1773
1777
  .check-top.checkbox-radio [type=radio]:checked + label .border-1,
@@ -1788,7 +1792,7 @@
1788
1792
  }
1789
1793
 
1790
1794
  .check-clear .box3-content {
1791
- padding-left: var(--hg-spacing-30, 30px);
1795
+ padding-left: 30px; /* geometría: círculo + hueco, no escala de spacing */
1792
1796
  }
1793
1797
 
1794
1798
  .check-clear.checkbox-radio [type=radio]:checked + label .border-1,
package/dist/themes/limited-demo.html CHANGED
@@ -295,7 +295,7 @@
295
295
  </div>
296
296
  </div>
297
297
  <div class="hg-vars-group">
298
- <h4>Componente: checkbox <span style="color:var(--hg-color-middle-grey, #a9a9a9);font-weight:400;">(4)</span></h4>
298
+ <h4>Componente: checkbox <span style="color:var(--hg-color-middle-grey, #a9a9a9);font-weight:400;">(5)</span></h4>
299
299
  <div class="hg-vars-list">
300
300
  <div class="hg-vars-item">
301
301
  <div class="hg-vars-name"><code>--checkbox-bg</code></div>
@@ -313,6 +313,10 @@
313
313
  <div class="hg-vars-name"><code>--checkbox-checked-border</code></div>
314
314
  <div class="hg-vars-value"><code>var(--hg-color-feel-dark)</code><span class="hg-vars-swatch" style="background:#7A6346" title="#7A6346"></span></div>
315
315
  </div>
316
+ <div class="hg-vars-item">
317
+ <div class="hg-vars-name"><code>--checkbox-check-color</code></div>
318
+ <div class="hg-vars-value"><code>var(--hg-color-white)</code><span class="hg-vars-swatch" style="background:#ffffff" title="#ffffff"></span></div>
319
+ </div>
316
320
  </div>
317
321
  </div>
318
322
  <div class="hg-vars-group">
@@ -606,11 +610,22 @@
606
610
  </tr>
607
611
  </thead>
608
612
  <tbody>
613
+ <tr>
614
+ <td class="hg-typo-preview"><span class="title-thin">Aa Bb Cc 123</span></td>
615
+ <td><code>.title-thin</code></td>
616
+ <td><code>primary-thin</code> <span class="hg-typo-meta">&quot;suisse-thin&quot;, Arial, Helvetica, sans-serif</span></td>
617
+ <td>100</td>
618
+ <td><span class="hg-typo-num">24px</span></td>
619
+ <td><span class="hg-typo-num">24px</span></td>
620
+ <td><span class="hg-typo-num">1</span></td>
621
+ <td>—</td>
622
+ <td>—</td>
623
+ </tr>
609
624
  <tr>
610
625
  <td class="hg-typo-preview"><span class="title-xxl">Aa Bb Cc 123</span></td>
611
626
  <td><code>.title-xxl</code></td>
612
627
  <td><code>primary-light</code> <span class="hg-typo-meta">&quot;suisse-works-regular&quot;, Georgia, &quot;Times New Roman&quot;, serif</span></td>
613
- <td>300</td>
628
+ <td>400</td>
614
629
  <td><span class="hg-typo-num">24px</span></td>
615
630
  <td><span class="hg-typo-num">24px</span></td>
616
631
  <td><span class="hg-typo-num">1</span></td>
@@ -632,7 +647,7 @@
632
647
  <td class="hg-typo-preview"><span class="title-l-b">Aa Bb Cc 123</span></td>
633
648
  <td><code>.title-l-b</code></td>
634
649
  <td><code>primary-light</code> <span class="hg-typo-meta">&quot;suisse-works-regular&quot;, Georgia, &quot;Times New Roman&quot;, serif</span></td>
635
- <td>300</td>
650
+ <td>400</td>
636
651
  <td><span class="hg-typo-num">12px</span></td>
637
652
  <td><span class="hg-typo-num">13px</span></td>
638
653
  <td><span class="hg-typo-num">1.4</span></td>
@@ -643,7 +658,7 @@
643
658
  <td class="hg-typo-preview"><span class="title-l">Aa Bb Cc 123</span></td>
644
659
  <td><code>.title-l</code></td>
645
660
  <td><code>primary-light</code> <span class="hg-typo-meta">&quot;suisse-works-regular&quot;, Georgia, &quot;Times New Roman&quot;, serif</span></td>
646
- <td>100</td>
661
+ <td>300</td>
647
662
  <td><span class="hg-typo-num">12px</span></td>
648
663
  <td><span class="hg-typo-num">13px</span></td>
649
664
  <td><span class="hg-typo-num">1.4</span></td>
@@ -654,7 +669,7 @@
654
669
  <td class="hg-typo-preview"><span class="title-m">Aa Bb Cc 123</span></td>
655
670
  <td><code>.title-m</code></td>
656
671
  <td><code>primary-light</code> <span class="hg-typo-meta">&quot;suisse-works-regular&quot;, Georgia, &quot;Times New Roman&quot;, serif</span></td>
657
- <td>100</td>
672
+ <td>300</td>
658
673
  <td><span class="hg-typo-num">12px</span></td>
659
674
  <td><span class="hg-typo-num">13px</span></td>
660
675
  <td><span class="hg-typo-num">1.4</span></td>
@@ -665,7 +680,7 @@
665
680
  <td class="hg-typo-preview"><span class="title-s-b">Aa Bb Cc 123</span></td>
666
681
  <td><code>.title-s-b</code></td>
667
682
  <td><code>primary-light</code> <span class="hg-typo-meta">&quot;suisse-works-regular&quot;, Georgia, &quot;Times New Roman&quot;, serif</span></td>
668
- <td>300</td>
683
+ <td>400</td>
669
684
  <td><span class="hg-typo-num">10px</span></td>
670
685
  <td><span class="hg-typo-num">10px</span></td>
671
686
  <td><span class="hg-typo-num">1.4</span></td>
@@ -676,7 +691,7 @@
676
691
  <td class="hg-typo-preview"><span class="title-s">Aa Bb Cc 123</span></td>
677
692
  <td><code>.title-s</code></td>
678
693
  <td><code>primary-light</code> <span class="hg-typo-meta">&quot;suisse-works-regular&quot;, Georgia, &quot;Times New Roman&quot;, serif</span></td>
679
- <td>100</td>
694
+ <td>300</td>
680
695
  <td><span class="hg-typo-num">10px</span></td>
681
696
  <td><span class="hg-typo-num">10px</span></td>
682
697
  <td><span class="hg-typo-num">1.4</span></td>
@@ -687,7 +702,7 @@
687
702
  <td class="hg-typo-preview"><span class="text-l">Aa Bb Cc 123</span></td>
688
703
  <td><code>.text-l</code></td>
689
704
  <td><code>primary-light</code> <span class="hg-typo-meta">&quot;suisse-works-regular&quot;, Georgia, &quot;Times New Roman&quot;, serif</span></td>
690
- <td>100</td>
705
+ <td>300</td>
691
706
  <td><span class="hg-typo-num">13px</span></td>
692
707
  <td><span class="hg-typo-num">13px</span></td>
693
708
  <td><span class="hg-typo-num">1.5</span></td>
@@ -698,7 +713,7 @@
698
713
  <td class="hg-typo-preview"><span class="text-m">Aa Bb Cc 123</span></td>
699
714
  <td><code>.text-m</code></td>
700
715
  <td><code>primary-light</code> <span class="hg-typo-meta">&quot;suisse-works-regular&quot;, Georgia, &quot;Times New Roman&quot;, serif</span></td>
701
- <td>100</td>
716
+ <td>300</td>
702
717
  <td><span class="hg-typo-num">12px</span></td>
703
718
  <td><span class="hg-typo-num">12px</span></td>
704
719
  <td><span class="hg-typo-num">1.5</span></td>
@@ -709,7 +724,7 @@
709
724
  <td class="hg-typo-preview"><span class="p-tag">Aa Bb Cc 123</span></td>
710
725
  <td><code>.p-tag</code></td>
711
726
  <td><code>primary-light</code> <span class="hg-typo-meta">&quot;suisse-works-regular&quot;, Georgia, &quot;Times New Roman&quot;, serif</span></td>
712
- <td>100</td>
727
+ <td>300</td>
713
728
  <td><span class="hg-typo-num">9px</span></td>
714
729
  <td><span class="hg-typo-num">10px</span></td>
715
730
  <td><span class="hg-typo-num">1</span></td>
@@ -720,7 +735,7 @@
720
735
  <td class="hg-typo-preview"><span class="hg-body-l">Aa Bb Cc 123</span></td>
721
736
  <td><code>.hg-body-l</code></td>
722
737
  <td><code>primary-light</code> <span class="hg-typo-meta">&quot;suisse-works-regular&quot;, Georgia, &quot;Times New Roman&quot;, serif</span></td>
723
- <td>100</td>
738
+ <td>300</td>
724
739
  <td><span class="hg-typo-num">12px</span></td>
725
740
  <td><span class="hg-typo-num">13px</span></td>
726
741
  <td><span class="hg-typo-num">1.5</span></td>
@@ -731,7 +746,7 @@
731
746
  <td class="hg-typo-preview"><span class="hg-body-l-b">Aa Bb Cc 123</span></td>
732
747
  <td><code>.hg-body-l-b</code></td>
733
748
  <td><code>primary-light</code> <span class="hg-typo-meta">&quot;suisse-works-regular&quot;, Georgia, &quot;Times New Roman&quot;, serif</span></td>
734
- <td>300</td>
749
+ <td>400</td>
735
750
  <td><span class="hg-typo-num">12px</span></td>
736
751
  <td><span class="hg-typo-num">13px</span></td>
737
752
  <td><span class="hg-typo-num">1.5</span></td>
@@ -742,7 +757,7 @@
742
757
  <td class="hg-typo-preview"><span class="hg-body-m">Aa Bb Cc 123</span></td>
743
758
  <td><code>.hg-body-m</code></td>
744
759
  <td><code>primary-light</code> <span class="hg-typo-meta">&quot;suisse-works-regular&quot;, Georgia, &quot;Times New Roman&quot;, serif</span></td>
745
- <td>100</td>
760
+ <td>300</td>
746
761
  <td><span class="hg-typo-num">12px</span></td>
747
762
  <td><span class="hg-typo-num">12px</span></td>
748
763
  <td><span class="hg-typo-num">1.5</span></td>
@@ -753,7 +768,7 @@
753
768
  <td class="hg-typo-preview"><span class="hg-body-m-b">Aa Bb Cc 123</span></td>
754
769
  <td><code>.hg-body-m-b</code></td>
755
770
  <td><code>primary-light</code> <span class="hg-typo-meta">&quot;suisse-works-regular&quot;, Georgia, &quot;Times New Roman&quot;, serif</span></td>
756
- <td>300</td>
771
+ <td>400</td>
757
772
  <td><span class="hg-typo-num">12px</span></td>
758
773
  <td><span class="hg-typo-num">12px</span></td>
759
774
  <td><span class="hg-typo-num">1.5</span></td>
@@ -764,7 +779,7 @@
764
779
  <td class="hg-typo-preview"><span class="label-m">Aa Bb Cc 123</span></td>
765
780
  <td><code>.label-m</code></td>
766
781
  <td><code>primary-light</code> <span class="hg-typo-meta">&quot;suisse-works-regular&quot;, Georgia, &quot;Times New Roman&quot;, serif</span></td>
767
- <td>100</td>
782
+ <td>300</td>
768
783
  <td><span class="hg-typo-num">12px</span></td>
769
784
  <td><span class="hg-typo-num">12px</span></td>
770
785
  <td><span class="hg-typo-num">1</span></td>
@@ -775,7 +790,7 @@
775
790
  <td class="hg-typo-preview"><span class="label-m-b">Aa Bb Cc 123</span></td>
776
791
  <td><code>.label-m-b</code></td>
777
792
  <td><code>primary-light</code> <span class="hg-typo-meta">&quot;suisse-works-regular&quot;, Georgia, &quot;Times New Roman&quot;, serif</span></td>
778
- <td>300</td>
793
+ <td>400</td>
779
794
  <td><span class="hg-typo-num">12px</span></td>
780
795
  <td><span class="hg-typo-num">12px</span></td>
781
796
  <td><span class="hg-typo-num">1</span></td>
@@ -786,7 +801,7 @@
786
801
  <td class="hg-typo-preview"><span class="label-s">Aa Bb Cc 123</span></td>
787
802
  <td><code>.label-s</code></td>
788
803
  <td><code>primary-light</code> <span class="hg-typo-meta">&quot;suisse-works-regular&quot;, Georgia, &quot;Times New Roman&quot;, serif</span></td>
789
- <td>100</td>
804
+ <td>300</td>
790
805
  <td><span class="hg-typo-num">10px</span></td>
791
806
  <td><span class="hg-typo-num">10px</span></td>
792
807
  <td><span class="hg-typo-num">1</span></td>
@@ -797,12 +812,34 @@
797
812
  <td class="hg-typo-preview"><span class="label-s-b">Aa Bb Cc 123</span></td>
798
813
  <td><code>.label-s-b</code></td>
799
814
  <td><code>primary-light</code> <span class="hg-typo-meta">&quot;suisse-works-regular&quot;, Georgia, &quot;Times New Roman&quot;, serif</span></td>
800
- <td>300</td>
815
+ <td>400</td>
801
816
  <td><span class="hg-typo-num">10px</span></td>
802
817
  <td><span class="hg-typo-num">10px</span></td>
803
818
  <td><span class="hg-typo-num">1</span></td>
804
819
  <td>0.06em</td>
805
820
  <td>uppercase</td>
821
+ </tr>
822
+ <tr>
823
+ <td class="hg-typo-preview"><span class="label-mono">Aa Bb Cc 123</span></td>
824
+ <td><code>.label-mono</code></td>
825
+ <td><code>mono-regular</code> <span class="hg-typo-meta">&quot;suisse-mono-regular&quot;, ui-monospace, monospace</span></td>
826
+ <td>400</td>
827
+ <td><span class="hg-typo-num">10px</span></td>
828
+ <td><span class="hg-typo-num">10px</span></td>
829
+ <td><span class="hg-typo-num">1.2</span></td>
830
+ <td>0.06em</td>
831
+ <td>uppercase</td>
832
+ </tr>
833
+ <tr>
834
+ <td class="hg-typo-preview"><span class="label-mono-b">Aa Bb Cc 123</span></td>
835
+ <td><code>.label-mono-b</code></td>
836
+ <td><code>mono-bold</code> <span class="hg-typo-meta">&quot;suisse-mono-bold&quot;, ui-monospace, monospace</span></td>
837
+ <td>700</td>
838
+ <td><span class="hg-typo-num">10px</span></td>
839
+ <td><span class="hg-typo-num">10px</span></td>
840
+ <td><span class="hg-typo-num">1.2</span></td>
841
+ <td>0.06em</td>
842
+ <td>uppercase</td>
806
843
  </tr>
807
844
  </tbody>
808
845
  </table>
package/dist/themes/limited.css CHANGED
@@ -78,6 +78,7 @@
78
78
  --checkbox-border: var(--hg-color-middle-grey);
79
79
  --checkbox-checked-bg: var(--hg-color-feel-dark);
80
80
  --checkbox-checked-border: var(--hg-color-feel-dark);
81
+ --checkbox-check-color: var(--hg-color-white);
81
82
 
82
83
  --radio-bg: var(--hg-color-white);
83
84
  --radio-border: var(--hg-color-middle-grey);
@@ -1667,7 +1668,7 @@
1667
1668
  padding-bottom: 0;
1668
1669
  cursor: pointer;
1669
1670
  font-weight: normal;
1670
- font-size: var(--hg-typo-font-size-xs, 12px);
1671
+ font-size: var(--hg-typo-font-size-12);
1671
1672
  text-align: initial;
1672
1673
  display: flex;
1673
1674
  flex-direction: column;
@@ -1686,7 +1687,8 @@
1686
1687
  outline: 0;
1687
1688
  display: inline-block;
1688
1689
  vertical-align: top;
1689
- margin: 0 var(--hg-spacing-10, 10px) 0 0;
1690
+ /* Geometría del componente (círculo 14px + hueco): valor propio, no de la escala de spacing */
1691
+ margin: 0 10px 0 0;
1690
1692
  border-radius: 0;
1691
1693
  }
1692
1694
 
@@ -1695,7 +1697,7 @@
1695
1697
  display: inline-block;
1696
1698
  vertical-align: top;
1697
1699
  margin: 0;
1698
- line-height: var(--hg-typo-line-height-sm, 16px);
1700
+ line-height: 16px;
1699
1701
  padding-left: var(--hg-spacing-24);
1700
1702
  min-height: 20px;
1701
1703
  }
@@ -1761,7 +1763,7 @@
1761
1763
  }
1762
1764
 
1763
1765
  .check-center .box3-content {
1764
- padding-left: var(--hg-spacing-30, 30px);
1766
+ padding-left: 30px; /* geometría: círculo + hueco, no escala de spacing */
1765
1767
  }
1766
1768
 
1767
1769
  .check-center.checkbox-radio [type=radio]:checked + label .border-1,
@@ -1805,7 +1807,7 @@
1805
1807
  }
1806
1808
 
1807
1809
  .check-top .box3-content {
1808
- padding-left: var(--hg-spacing-30, 30px);
1810
+ padding-left: 30px; /* geometría: círculo + hueco, no escala de spacing */
1809
1811
  }
1810
1812
 
1811
1813
  .check-top.checkbox-radio [type=radio]:checked + label .border-1,
@@ -1826,7 +1828,7 @@
1826
1828
  }
1827
1829
 
1828
1830
  .check-clear .box3-content {
1829
- padding-left: var(--hg-spacing-30, 30px);
1831
+ padding-left: 30px; /* geometría: círculo + hueco, no escala de spacing */
1830
1832
  }
1831
1833
 
1832
1834
  .check-clear.checkbox-radio [type=radio]:checked + label .border-1,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "holygrail5",
3
- "version": "1.0.21",
3
+ "version": "1.0.23",
4
4
  "description": "Framework CSS generator con Node.js - Genera CSS optimizado con variables CSS desde un archivo JSON de configuración",
5
5
  "main": "generate-css.js",
6
6
  "style": "dist/output.css",
@@ -49,6 +49,6 @@
49
49
  "dist/**/*"
50
50
  ],
51
51
  "engines": {
52
- "node": ">=12.0.0"
52
+ "node": ">=18.0.0"
53
53
  }
54
54
  }