@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/uitvoerend-violet/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": "#e5b3d0",
738
- "border-color": "#D88CB7",
738
+ "border-color": "transparent",
739
739
  "color": "#BE4088"
740
740
  },
741
741
  "focus": {
742
- "background-color": "#a90061",
742
+ "background-color": "#741344",
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": "#63143a",
756
+ "border-color": "transparent",
757
+ "color": "#fff"
758
+ }
754
759
  },
755
760
  "secondary-action": {
756
761
  "hover": {
757
- "background-color": "#e5b3d0",
758
- "border-color": "transparent",
759
- "color": "#a90061"
762
+ "background-color": "#f2d9e7",
763
+ "border-color": "#741344",
764
+ "color": "#741344"
760
765
  },
761
766
  "background-color": "transparent",
762
767
  "border-color": "#a90061",
763
768
  "color": "#a90061",
764
769
  "disabled": {
765
770
  "background-color": "transparent",
766
- "border-color": "#CB66A0",
771
+ "border-color": "#D88CB7",
767
772
  "color": "#CB66A0"
768
773
  },
769
774
  "focus": {
770
- "background-color": "#e5b3d0",
775
+ "background-color": "#f2d9e7",
771
776
  "border-color": "transparent",
772
- "color": "#a90061"
777
+ "color": "#741344"
773
778
  },
774
779
  "font-weight": 700,
775
780
  "active": {
776
781
  "background-color": "#D88CB7",
777
- "border-color": "#a90061",
778
- "color": "#a90061"
782
+ "border-color": "#63143a",
783
+ "color": "#741344"
779
784
  },
780
785
  "font-size": "1.25rem",
781
- "line-height": "1.875rem"
786
+ "line-height": "1.875rem",
787
+ "pressed": {
788
+ "background-color": "#e5b3d0",
789
+ "border-color": "#63143a",
790
+ "color": "#63143a"
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": "#f2d9e7",
788
798
  "border-color": "transparent",
789
799
  "color": "#741344"
790
800
  },
@@ -799,14 +809,24 @@
799
809
  "focus": {
800
810
  "background-color": "#f2d9e7",
801
811
  "border-color": "transparent",
802
- "color": "#a90061"
812
+ "color": "#741344"
803
813
  },
804
814
  "active": {
805
- "background-color": "transparent",
815
+ "background-color": "#D88CB7",
806
816
  "border-color": "transparent",
807
817
  "color": "#65003a"
808
818
  },
809
- "line-height": "1.875rem"
819
+ "line-height": "1.875rem",
820
+ "pressed": {
821
+ "background-color": "#e5b3d0",
822
+ "border-color": "transparent",
823
+ "color": "#63143a"
824
+ }
825
+ },
826
+ "pressed": {
827
+ "background-color": "#1E293B",
828
+ "border-color": "transparent",
829
+ "color": "#fff"
810
830
  }
811
831
  },
812
832
  "breadcrumb-nav": {
@@ -1067,8 +1087,8 @@
1067
1087
  "foreground": {
1068
1088
  "default": "#0F172A",
1069
1089
  "subdued": "#334155",
1070
- "onEmphasis": "#fff",
1071
- "link": "#01689b"
1090
+ "link": "#01689b",
1091
+ "onEmphasis": "#fff"
1072
1092
  },
1073
1093
  "border": {
1074
1094
  "default": "#64748B",
@@ -1097,6 +1117,9 @@
1097
1117
  "accent": {
1098
1118
  "500": "#8fcae7"
1099
1119
  },
1120
+ "accent-2": {
1121
+ "500": "#f092cd"
1122
+ },
1100
1123
  "cool-grey": {
1101
1124
  "50": "#F8FAFC",
1102
1125
  "100": "#F1F5F9",
package/dist/uitvoerend-violet/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 {
@@ -586,6 +586,7 @@
586
586
  --rhc-color-cool-grey-200: #E2E8F0;
587
587
  --rhc-color-cool-grey-100: #F1F5F9;
588
588
  --rhc-color-cool-grey-50: #F8FAFC;
589
+ --rhc-color-accent-2-500: #f092cd;
589
590
  --rhc-color-accent-500: #8fcae7;
590
591
  --rhc-color-feedback-warning-subdued: #fff4db;
591
592
  --rhc-color-feedback-warning-default: #ffb612;
@@ -599,8 +600,8 @@
599
600
  --rhc-color-border-strong: #0F172A;
600
601
  --rhc-color-border-subdued: #94A3B8;
601
602
  --rhc-color-border-default: #64748B;
602
- --rhc-color-foreground-link: #01689b;
603
603
  --rhc-color-foreground-on-emphasis: #fff;
604
+ --rhc-color-foreground-link: #01689b;
604
605
  --rhc-color-foreground-subdued: #334155;
605
606
  --rhc-color-foreground-default: #0F172A;
606
607
  --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: #63143a;
769
+ --utrecht-button-subtle-pressed-border-color: transparent;
770
+ --utrecht-button-subtle-pressed-background-color: #e5b3d0;
764
771
  --utrecht-button-subtle-line-height: 1.875rem;
765
772
  --utrecht-button-subtle-active-color: #65003a;
766
773
  --utrecht-button-subtle-active-border-color: transparent;
767
- --utrecht-button-subtle-active-background-color: transparent;
768
- --utrecht-button-subtle-focus-color: #a90061;
774
+ --utrecht-button-subtle-active-background-color: #D88CB7;
775
+ --utrecht-button-subtle-focus-color: #741344;
769
776
  --utrecht-button-subtle-focus-border-color: transparent;
770
777
  --utrecht-button-subtle-focus-background-color: #f2d9e7;
771
778
  --utrecht-button-subtle-disabled-color: #e5b3d0;
@@ -776,27 +783,33 @@
776
783
  --utrecht-button-subtle-background-color: transparent;
777
784
  --utrecht-button-subtle-hover-color: #741344;
778
785
  --utrecht-button-subtle-hover-border-color: transparent;
779
- --utrecht-button-subtle-hover-background-color: transparent;
786
+ --utrecht-button-subtle-hover-background-color: #f2d9e7;
780
787
  --utrecht-button-subtle-font-weight: 700;
781
788
  --utrecht-button-subtle-font-size: 1.25rem;
789
+ --utrecht-button-secondary-action-pressed-color: #63143a;
790
+ --utrecht-button-secondary-action-pressed-border-color: #63143a;
791
+ --utrecht-button-secondary-action-pressed-background-color: #e5b3d0;
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: #a90061;
785
- --utrecht-button-secondary-action-active-border-color: #a90061;
794
+ --utrecht-button-secondary-action-active-color: #741344;
795
+ --utrecht-button-secondary-action-active-border-color: #63143a;
786
796
  --utrecht-button-secondary-action-active-background-color: #D88CB7;
787
797
  --utrecht-button-secondary-action-font-weight: 700;
788
- --utrecht-button-secondary-action-focus-color: #a90061;
798
+ --utrecht-button-secondary-action-focus-color: #741344;
789
799
  --utrecht-button-secondary-action-focus-border-color: transparent;
790
- --utrecht-button-secondary-action-focus-background-color: #e5b3d0;
800
+ --utrecht-button-secondary-action-focus-background-color: #f2d9e7;
791
801
  --utrecht-button-secondary-action-disabled-color: #CB66A0;
792
- --utrecht-button-secondary-action-disabled-border-color: #CB66A0;
802
+ --utrecht-button-secondary-action-disabled-border-color: #D88CB7;
793
803
  --utrecht-button-secondary-action-disabled-background-color: transparent;
794
804
  --utrecht-button-secondary-action-color: #a90061;
795
805
  --utrecht-button-secondary-action-border-color: #a90061;
796
806
  --utrecht-button-secondary-action-background-color: transparent;
797
- --utrecht-button-secondary-action-hover-color: #a90061;
798
- --utrecht-button-secondary-action-hover-border-color: transparent;
799
- --utrecht-button-secondary-action-hover-background-color: #e5b3d0;
807
+ --utrecht-button-secondary-action-hover-color: #741344;
808
+ --utrecht-button-secondary-action-hover-border-color: #741344;
809
+ --utrecht-button-secondary-action-hover-background-color: #f2d9e7;
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: #63143a;
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: #a90061;
821
+ --utrecht-button-primary-action-focus-background-color: #741344;
809
822
  --utrecht-button-primary-action-disabled-color: #BE4088;
810
- --utrecht-button-primary-action-disabled-border-color: #D88CB7;
823
+ --utrecht-button-primary-action-disabled-border-color: transparent;
811
824
  --utrecht-button-primary-action-disabled-background-color: #e5b3d0;
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/uitvoerend-violet/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": {
@@ -1090,8 +1110,8 @@ declare const tokens: {
1090
1110
  "foreground": {
1091
1111
  "default": DesignToken,
1092
1112
  "subdued": DesignToken,
1093
- "onEmphasis": DesignToken,
1094
- "link": DesignToken
1113
+ "link": DesignToken,
1114
+ "onEmphasis": DesignToken
1095
1115
  },
1096
1116
  "border": {
1097
1117
  "default": DesignToken,
@@ -1120,6 +1140,9 @@ declare const tokens: {
1120
1140
  "accent": {
1121
1141
  "500": DesignToken
1122
1142
  },
1143
+ "accent-2": {
1144
+ "500": DesignToken
1145
+ },
1123
1146
  "cool-grey": {
1124
1147
  "50": DesignToken,
1125
1148
  "100": DesignToken,