@rijkshuisstijl-community/design-tokens 1.1.0 → 1.2.0

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 (54) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/_variables.scss +722 -709
  3. package/dist/index.css +722 -709
  4. package/dist/index.d.ts +515 -502
  5. package/dist/index.js +541 -528
  6. package/dist/index.json +540 -527
  7. package/dist/index.tokens.json +1644 -1621
  8. package/dist/root.css +722 -709
  9. package/dist/tokens.d.ts +1580 -1557
  10. package/dist/tokens.js +22186 -21753
  11. package/dist/uitvoerend-mintgroen-focus/_variables.scss +536 -523
  12. package/dist/uitvoerend-mintgroen-focus/index.css +536 -523
  13. package/dist/uitvoerend-mintgroen-focus/index.d.ts +713 -700
  14. package/dist/uitvoerend-mintgroen-focus/index.js +713 -700
  15. package/dist/uitvoerend-mintgroen-focus/index.json +712 -699
  16. package/dist/uitvoerend-mintgroen-focus/index.tokens.json +1624 -1601
  17. package/dist/uitvoerend-mintgroen-focus/root.css +536 -523
  18. package/dist/uitvoerend-mintgroen-focus/tokens.d.ts +1543 -1520
  19. package/dist/uitvoerend-mintgroen-focus/tokens.js +21505 -21072
  20. package/dist/uitvoerend-violet/_variables.scss +41 -28
  21. package/dist/uitvoerend-violet/index.css +41 -28
  22. package/dist/uitvoerend-violet/index.d.ts +15 -2
  23. package/dist/uitvoerend-violet/index.js +41 -28
  24. package/dist/uitvoerend-violet/index.json +40 -27
  25. package/dist/uitvoerend-violet/index.tokens.json +54 -31
  26. package/dist/uitvoerend-violet/root.css +41 -28
  27. package/dist/uitvoerend-violet/tokens.d.ts +29 -6
  28. package/dist/uitvoerend-violet/tokens.js +551 -118
  29. package/dist/uitvoerend-violet-oud/_variables.scss +41 -28
  30. package/dist/uitvoerend-violet-oud/index.css +41 -28
  31. package/dist/uitvoerend-violet-oud/index.d.ts +15 -2
  32. package/dist/uitvoerend-violet-oud/index.js +41 -28
  33. package/dist/uitvoerend-violet-oud/index.json +40 -27
  34. package/dist/uitvoerend-violet-oud/index.tokens.json +54 -31
  35. package/dist/uitvoerend-violet-oud/root.css +41 -28
  36. package/dist/uitvoerend-violet-oud/tokens.d.ts +29 -6
  37. package/dist/uitvoerend-violet-oud/tokens.js +551 -118
  38. package/dist/wetgevend/_variables.scss +41 -28
  39. package/dist/wetgevend/index.css +41 -28
  40. package/dist/wetgevend/index.d.ts +15 -2
  41. package/dist/wetgevend/index.js +41 -28
  42. package/dist/wetgevend/index.json +40 -27
  43. package/dist/wetgevend/index.tokens.json +54 -31
  44. package/dist/wetgevend/root.css +41 -28
  45. package/dist/wetgevend/tokens.d.ts +29 -6
  46. package/dist/wetgevend/tokens.js +551 -118
  47. package/figma/figma.tokens.json +1589 -263
  48. package/package.json +1 -1
  49. package/src/generated/base.tokens.json +4428 -4323
  50. package/src/generated/themes.json +4869 -4449
  51. package/src/generated/uitvoerend-mintgroen-focus/tokens.json +4439 -4334
  52. package/src/generated/uitvoerend-violet/tokens.json +138 -33
  53. package/src/generated/uitvoerend-violet-oud/tokens.json +138 -33
  54. package/src/generated/wetgevend/tokens.json +138 -33
package/dist/wetgevend/index.tokens.json CHANGED
@@ -684,9 +684,9 @@
684
684
  "row-gap": "0.5rem"
685
685
  },
686
686
  "button": {
687
- "background-color": "transparent",
688
- "border-color": "#334155",
689
- "color": "#334155",
687
+ "background-color": "#0F172A",
688
+ "border-color": "transparent",
689
+ "color": "#fff",
690
690
  "border-radius": "5px",
691
691
  "border-width": "1px",
692
692
  "icon": {
@@ -702,24 +702,24 @@
702
702
  "padding-inline-end": "1rem",
703
703
  "padding-inline-start": "1rem",
704
704
  "disabled": {
705
- "background-color": "#F8FAFC",
705
+ "background-color": "#E2E8F0",
706
706
  "border-color": "transparent",
707
- "color": "#64748B"
707
+ "color": "#94A3B8"
708
708
  },
709
709
  "focus": {
710
- "background-color": "#FDDE94",
710
+ "background-color": "#475569",
711
711
  "border-color": "transparent",
712
- "color": "#1E293B"
712
+ "color": "#fff"
713
713
  },
714
714
  "hover": {
715
- "background-color": "#F8FAFC",
716
- "border-color": "#1E293B",
717
- "color": "#1E293B"
715
+ "background-color": "#475569",
716
+ "border-color": "transparent",
717
+ "color": "#fff"
718
718
  },
719
719
  "active": {
720
- "background-color": "#CBD5E1",
721
- "border-color": "#0F172A",
722
- "color": "#0F172A"
720
+ "background-color": "#1E293B",
721
+ "border-color": "transparent",
722
+ "color": "#fff"
723
723
  },
724
724
  "min-block-size": "48px",
725
725
  "min-inline-size": "48px",
@@ -735,11 +735,11 @@
735
735
  "color": "#fff",
736
736
  "disabled": {
737
737
  "background-color": "#b8c6d5",
738
- "border-color": "#95a9c0",
738
+ "border-color": "transparent",
739
739
  "color": "#4f7196"
740
740
  },
741
741
  "focus": {
742
- "background-color": "#154273",
742
+ "background-color": "#162f50",
743
743
  "border-color": "transparent",
744
744
  "color": "#fff"
745
745
  },
@@ -750,41 +750,51 @@
750
750
  "color": "#fff"
751
751
  },
752
752
  "font-size": "1.25rem",
753
- "line-height": "1.875rem"
753
+ "line-height": "1.875rem",
754
+ "pressed": {
755
+ "background-color": "#162945",
756
+ "border-color": "transparent",
757
+ "color": "#fff"
758
+ }
754
759
  },
755
760
  "secondary-action": {
756
761
  "hover": {
757
- "background-color": "#b8c6d5",
758
- "border-color": "transparent",
759
- "color": "#154273"
762
+ "background-color": "#dce3ea",
763
+ "border-color": "#162f50",
764
+ "color": "#162f50"
760
765
  },
761
766
  "background-color": "transparent",
762
767
  "border-color": "#154273",
763
768
  "color": "#154273",
764
769
  "disabled": {
765
770
  "background-color": "transparent",
766
- "border-color": "#738eab",
771
+ "border-color": "#95a9c0",
767
772
  "color": "#738eab"
768
773
  },
769
774
  "focus": {
770
- "background-color": "#b8c6d5",
775
+ "background-color": "#dce3ea",
771
776
  "border-color": "transparent",
772
- "color": "#154273"
777
+ "color": "#162f50"
773
778
  },
774
779
  "font-weight": 700,
775
780
  "active": {
776
781
  "background-color": "#95a9c0",
777
- "border-color": "#154273",
778
- "color": "#154273"
782
+ "border-color": "#162945",
783
+ "color": "#162f50"
779
784
  },
780
785
  "font-size": "1.25rem",
781
- "line-height": "1.875rem"
786
+ "line-height": "1.875rem",
787
+ "pressed": {
788
+ "background-color": "#b8c6d5",
789
+ "border-color": "#162945",
790
+ "color": "#162945"
791
+ }
782
792
  },
783
793
  "subtle": {
784
794
  "font-size": "1.25rem",
785
795
  "font-weight": 700,
786
796
  "hover": {
787
- "background-color": "transparent",
797
+ "background-color": "#dce3ea",
788
798
  "border-color": "transparent",
789
799
  "color": "#162f50"
790
800
  },
@@ -799,14 +809,24 @@
799
809
  "focus": {
800
810
  "background-color": "#dce3ea",
801
811
  "border-color": "transparent",
802
- "color": "#154273"
812
+ "color": "#162f50"
803
813
  },
804
814
  "active": {
805
- "background-color": "transparent",
815
+ "background-color": "#95a9c0",
806
816
  "border-color": "transparent",
807
817
  "color": "#0d2845"
808
818
  },
809
- "line-height": "1.875rem"
819
+ "line-height": "1.875rem",
820
+ "pressed": {
821
+ "background-color": "#b8c6d5",
822
+ "border-color": "transparent",
823
+ "color": "#162945"
824
+ }
825
+ },
826
+ "pressed": {
827
+ "background-color": "#1E293B",
828
+ "border-color": "transparent",
829
+ "color": "#fff"
810
830
  }
811
831
  },
812
832
  "breadcrumb-nav": {
@@ -1557,8 +1577,8 @@
1557
1577
  "foreground": {
1558
1578
  "default": "#0F172A",
1559
1579
  "subdued": "#334155",
1560
- "onEmphasis": "#fff",
1561
- "link": "#01689b"
1580
+ "link": "#01689b",
1581
+ "onEmphasis": "#fff"
1562
1582
  },
1563
1583
  "border": {
1564
1584
  "default": "#64748B",
@@ -1587,6 +1607,9 @@
1587
1607
  "accent": {
1588
1608
  "500": "#8fcae7"
1589
1609
  },
1610
+ "accent-2": {
1611
+ "500": "#f092cd"
1612
+ },
1590
1613
  "primary": {
1591
1614
  "50": "#dce3ea",
1592
1615
  "100": "#b8c6d5",
package/dist/wetgevend/root.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 19 Mar 2025 14:52:03 GMT
3
+ * Generated on Tue, 29 Apr 2025 12:01:02 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -300,6 +300,7 @@
300
300
  --rhc-color-primary-200: #95a9c0;
301
301
  --rhc-color-primary-100: #b8c6d5;
302
302
  --rhc-color-primary-50: #dce3ea;
303
+ --rhc-color-accent-2-500: #f092cd;
303
304
  --rhc-color-accent-500: #8fcae7;
304
305
  --rhc-color-feedback-warning-subdued: #fff4db;
305
306
  --rhc-color-feedback-warning-default: #ffb612;
@@ -313,8 +314,8 @@
313
314
  --rhc-color-border-strong: #0F172A;
314
315
  --rhc-color-border-subdued: #94A3B8;
315
316
  --rhc-color-border-default: #64748B;
316
- --rhc-color-foreground-link: #01689b;
317
317
  --rhc-color-foreground-on-emphasis: #fff;
318
+ --rhc-color-foreground-link: #01689b;
318
319
  --rhc-color-foreground-subdued: #334155;
319
320
  --rhc-color-foreground-default: #0F172A;
320
321
  --rhc-color-focus-outline: #000;
@@ -761,11 +762,17 @@
761
762
  --utrecht-breadcrumb-nav-link-icon-size: 24px;
762
763
  --utrecht-breadcrumb-nav-font-size: 1.25rem;
763
764
  --utrecht-breadcrumb-nav-line-height: 1.4;
765
+ --utrecht-button-pressed-color: #fff;
766
+ --utrecht-button-pressed-border-color: transparent;
767
+ --utrecht-button-pressed-background-color: #1E293B;
768
+ --utrecht-button-subtle-pressed-color: #162945;
769
+ --utrecht-button-subtle-pressed-border-color: transparent;
770
+ --utrecht-button-subtle-pressed-background-color: #b8c6d5;
764
771
  --utrecht-button-subtle-line-height: 1.875rem;
765
772
  --utrecht-button-subtle-active-color: #0d2845;
766
773
  --utrecht-button-subtle-active-border-color: transparent;
767
- --utrecht-button-subtle-active-background-color: transparent;
768
- --utrecht-button-subtle-focus-color: #154273;
774
+ --utrecht-button-subtle-active-background-color: #95a9c0;
775
+ --utrecht-button-subtle-focus-color: #162f50;
769
776
  --utrecht-button-subtle-focus-border-color: transparent;
770
777
  --utrecht-button-subtle-focus-background-color: #dce3ea;
771
778
  --utrecht-button-subtle-disabled-color: #b8c6d5;
@@ -776,27 +783,33 @@
776
783
  --utrecht-button-subtle-background-color: transparent;
777
784
  --utrecht-button-subtle-hover-color: #162f50;
778
785
  --utrecht-button-subtle-hover-border-color: transparent;
779
- --utrecht-button-subtle-hover-background-color: transparent;
786
+ --utrecht-button-subtle-hover-background-color: #dce3ea;
780
787
  --utrecht-button-subtle-font-weight: 700;
781
788
  --utrecht-button-subtle-font-size: 1.25rem;
789
+ --utrecht-button-secondary-action-pressed-color: #162945;
790
+ --utrecht-button-secondary-action-pressed-border-color: #162945;
791
+ --utrecht-button-secondary-action-pressed-background-color: #b8c6d5;
782
792
  --utrecht-button-secondary-action-line-height: 1.875rem;
783
793
  --utrecht-button-secondary-action-font-size: 1.25rem;
784
- --utrecht-button-secondary-action-active-color: #154273;
785
- --utrecht-button-secondary-action-active-border-color: #154273;
794
+ --utrecht-button-secondary-action-active-color: #162f50;
795
+ --utrecht-button-secondary-action-active-border-color: #162945;
786
796
  --utrecht-button-secondary-action-active-background-color: #95a9c0;
787
797
  --utrecht-button-secondary-action-font-weight: 700;
788
- --utrecht-button-secondary-action-focus-color: #154273;
798
+ --utrecht-button-secondary-action-focus-color: #162f50;
789
799
  --utrecht-button-secondary-action-focus-border-color: transparent;
790
- --utrecht-button-secondary-action-focus-background-color: #b8c6d5;
800
+ --utrecht-button-secondary-action-focus-background-color: #dce3ea;
791
801
  --utrecht-button-secondary-action-disabled-color: #738eab;
792
- --utrecht-button-secondary-action-disabled-border-color: #738eab;
802
+ --utrecht-button-secondary-action-disabled-border-color: #95a9c0;
793
803
  --utrecht-button-secondary-action-disabled-background-color: transparent;
794
804
  --utrecht-button-secondary-action-color: #154273;
795
805
  --utrecht-button-secondary-action-border-color: #154273;
796
806
  --utrecht-button-secondary-action-background-color: transparent;
797
- --utrecht-button-secondary-action-hover-color: #154273;
798
- --utrecht-button-secondary-action-hover-border-color: transparent;
799
- --utrecht-button-secondary-action-hover-background-color: #b8c6d5;
807
+ --utrecht-button-secondary-action-hover-color: #162f50;
808
+ --utrecht-button-secondary-action-hover-border-color: #162f50;
809
+ --utrecht-button-secondary-action-hover-background-color: #dce3ea;
810
+ --utrecht-button-primary-action-pressed-color: #fff;
811
+ --utrecht-button-primary-action-pressed-border-color: transparent;
812
+ --utrecht-button-primary-action-pressed-background-color: #162945;
800
813
  --utrecht-button-primary-action-line-height: 1.875rem;
801
814
  --utrecht-button-primary-action-font-size: 1.25rem;
802
815
  --utrecht-button-primary-action-active-color: #fff;
@@ -805,9 +818,9 @@
805
818
  --utrecht-button-primary-action-font-weight: 700;
806
819
  --utrecht-button-primary-action-focus-color: #fff;
807
820
  --utrecht-button-primary-action-focus-border-color: transparent;
808
- --utrecht-button-primary-action-focus-background-color: #154273;
821
+ --utrecht-button-primary-action-focus-background-color: #162f50;
809
822
  --utrecht-button-primary-action-disabled-color: #4f7196;
810
- --utrecht-button-primary-action-disabled-border-color: #95a9c0;
823
+ --utrecht-button-primary-action-disabled-border-color: transparent;
811
824
  --utrecht-button-primary-action-disabled-background-color: #b8c6d5;
812
825
  --utrecht-button-primary-action-color: #fff;
813
826
  --utrecht-button-primary-action-border-color: transparent;
@@ -818,18 +831,18 @@
818
831
  --utrecht-button-column-gap: 0.5rem;
819
832
  --utrecht-button-min-inline-size: 48px;
820
833
  --utrecht-button-min-block-size: 48px;
821
- --utrecht-button-active-color: #0F172A;
822
- --utrecht-button-active-border-color: #0F172A;
823
- --utrecht-button-active-background-color: #CBD5E1;
824
- --utrecht-button-hover-color: #1E293B;
825
- --utrecht-button-hover-border-color: #1E293B;
826
- --utrecht-button-hover-background-color: #F8FAFC;
827
- --utrecht-button-focus-color: #1E293B;
834
+ --utrecht-button-active-color: #fff;
835
+ --utrecht-button-active-border-color: transparent;
836
+ --utrecht-button-active-background-color: #1E293B;
837
+ --utrecht-button-hover-color: #fff;
838
+ --utrecht-button-hover-border-color: transparent;
839
+ --utrecht-button-hover-background-color: #475569;
840
+ --utrecht-button-focus-color: #fff;
828
841
  --utrecht-button-focus-border-color: transparent;
829
- --utrecht-button-focus-background-color: #FDDE94;
830
- --utrecht-button-disabled-color: #64748B;
842
+ --utrecht-button-focus-background-color: #475569;
843
+ --utrecht-button-disabled-color: #94A3B8;
831
844
  --utrecht-button-disabled-border-color: transparent;
832
- --utrecht-button-disabled-background-color: #F8FAFC;
845
+ --utrecht-button-disabled-background-color: #E2E8F0;
833
846
  --utrecht-button-padding-inline-start: 1rem;
834
847
  --utrecht-button-padding-inline-end: 1rem;
835
848
  --utrecht-button-padding-block-start: 0.5rem;
@@ -842,9 +855,9 @@
842
855
  --utrecht-button-icon-gap: 0.5rem;
843
856
  --utrecht-button-border-width: 1px;
844
857
  --utrecht-button-border-radius: 5px;
845
- --utrecht-button-color: #334155;
846
- --utrecht-button-border-color: #334155;
847
- --utrecht-button-background-color: transparent;
858
+ --utrecht-button-color: #fff;
859
+ --utrecht-button-border-color: transparent;
860
+ --utrecht-button-background-color: #0F172A;
848
861
  --utrecht-button-group-row-gap: 0.5rem;
849
862
  --utrecht-button-group-padding-block-start: 0px;
850
863
  --utrecht-button-group-padding-block-end: 0px;
package/dist/wetgevend/tokens.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 19 Mar 2025 14:52:03 GMT
3
+ * Generated on Tue, 29 Apr 2025 12:01:02 GMT
4
4
  */
5
5
 
6
6
  export default tokens;
@@ -773,7 +773,12 @@ declare const tokens: {
773
773
  "color": DesignToken
774
774
  },
775
775
  "font-size": DesignToken,
776
- "line-height": DesignToken
776
+ "line-height": DesignToken,
777
+ "pressed": {
778
+ "background-color": DesignToken,
779
+ "border-color": DesignToken,
780
+ "color": DesignToken
781
+ }
777
782
  },
778
783
  "secondary-action": {
779
784
  "hover": {
@@ -801,7 +806,12 @@ declare const tokens: {
801
806
  "color": DesignToken
802
807
  },
803
808
  "font-size": DesignToken,
804
- "line-height": DesignToken
809
+ "line-height": DesignToken,
810
+ "pressed": {
811
+ "background-color": DesignToken,
812
+ "border-color": DesignToken,
813
+ "color": DesignToken
814
+ }
805
815
  },
806
816
  "subtle": {
807
817
  "font-size": DesignToken,
@@ -829,7 +839,17 @@ declare const tokens: {
829
839
  "border-color": DesignToken,
830
840
  "color": DesignToken
831
841
  },
832
- "line-height": DesignToken
842
+ "line-height": DesignToken,
843
+ "pressed": {
844
+ "background-color": DesignToken,
845
+ "border-color": DesignToken,
846
+ "color": DesignToken
847
+ }
848
+ },
849
+ "pressed": {
850
+ "background-color": DesignToken,
851
+ "border-color": DesignToken,
852
+ "color": DesignToken
833
853
  }
834
854
  },
835
855
  "breadcrumb-nav": {
@@ -1580,8 +1600,8 @@ declare const tokens: {
1580
1600
  "foreground": {
1581
1601
  "default": DesignToken,
1582
1602
  "subdued": DesignToken,
1583
- "onEmphasis": DesignToken,
1584
- "link": DesignToken
1603
+ "link": DesignToken,
1604
+ "onEmphasis": DesignToken
1585
1605
  },
1586
1606
  "border": {
1587
1607
  "default": DesignToken,
@@ -1610,6 +1630,9 @@ declare const tokens: {
1610
1630
  "accent": {
1611
1631
  "500": DesignToken
1612
1632
  },
1633
+ "accent-2": {
1634
+ "500": DesignToken
1635
+ },
1613
1636
  "primary": {
1614
1637
  "50": DesignToken,
1615
1638
  "100": DesignToken,