@utrecht/design-tokens 2.5.0 → 3.0.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 +16 -0
  2. package/dist/_mixin-theme.scss +24 -19
  3. package/dist/_mixin.scss +24 -19
  4. package/dist/_variables.scss +24 -19
  5. package/dist/dark/_mixin-theme.scss +23 -18
  6. package/dist/dark/_mixin.scss +23 -18
  7. package/dist/dark/_variables.scss +23 -18
  8. package/dist/dark/index.cjs +23 -18
  9. package/dist/dark/index.css +23 -18
  10. package/dist/dark/index.d.ts +7 -2
  11. package/dist/dark/index.flat.json +23 -18
  12. package/dist/dark/index.json +242 -86
  13. package/dist/dark/index.mjs +23 -18
  14. package/dist/dark/index.tokens.json +48 -38
  15. package/dist/dark/list.json +242 -86
  16. package/dist/dark/list.mjs +242 -86
  17. package/dist/dark/property.css +7 -3
  18. package/dist/dark/root.css +23 -18
  19. package/dist/dark/theme-prince-xml.css +23 -18
  20. package/dist/dark/theme.css +23 -18
  21. package/dist/dark/tokens.cjs +275 -114
  22. package/dist/dark/tokens.d.ts +22 -12
  23. package/dist/dark/tokens.json +275 -114
  24. package/dist/dark/variables.cjs +23 -18
  25. package/dist/dark/variables.css +23 -18
  26. package/dist/dark/variables.d.ts +7 -2
  27. package/dist/dark/variables.json +23 -18
  28. package/dist/dark/variables.less +23 -18
  29. package/dist/dark/variables.mjs +23 -18
  30. package/dist/index.cjs +24 -19
  31. package/dist/index.css +47 -37
  32. package/dist/index.d.ts +7 -2
  33. package/dist/index.flat.json +24 -19
  34. package/dist/index.json +244 -88
  35. package/dist/index.mjs +24 -19
  36. package/dist/index.tokens.json +49 -39
  37. package/dist/list.json +244 -88
  38. package/dist/list.mjs +244 -88
  39. package/dist/property.css +7 -3
  40. package/dist/root.css +24 -19
  41. package/dist/theme-prince-xml.css +24 -19
  42. package/dist/theme.css +24 -19
  43. package/dist/tokens.cjs +277 -116
  44. package/dist/tokens.d.ts +22 -12
  45. package/dist/tokens.json +277 -116
  46. package/dist/variables.cjs +24 -19
  47. package/dist/variables.css +24 -19
  48. package/dist/variables.d.ts +7 -2
  49. package/dist/variables.json +24 -19
  50. package/dist/variables.less +24 -19
  51. package/dist/variables.mjs +24 -19
  52. package/package.json +1 -1
  53. package/src/component/utrecht/accordion.tokens.json +30 -19
  54. package/src/component/utrecht/backdrop.tokens.json +1 -1
package/dist/dark/variables.cjs CHANGED
@@ -3,33 +3,38 @@
3
3
  */
4
4
 
5
5
  module.exports = {
6
- "utrechtAccordionRowGap": "8px",
7
- "utrechtAccordionButtonPaddingInlineEnd": "16px",
8
- "utrechtAccordionButtonPaddingInlineStart": "16px",
9
- "utrechtAccordionButtonPaddingBlockEnd": "8px",
10
- "utrechtAccordionButtonPaddingBlockStart": "8px",
11
- "utrechtAccordionButtonBackgroundColor": "hsl(0 0% 95%)",
12
- "utrechtAccordionButtonColor": "hsl(0 0% 10%)",
13
- "utrechtAccordionButtonBorderColor": "hsl(0 0% 95%)",
6
+ "utrechtAccordionButtonPaddingInlineEnd": "8px",
7
+ "utrechtAccordionButtonPaddingInlineStart": "8px",
8
+ "utrechtAccordionButtonPaddingBlockEnd": "16px",
9
+ "utrechtAccordionButtonPaddingBlockStart": "16px",
10
+ "utrechtAccordionButtonColor": "hsl(211 60% 40%)",
11
+ "utrechtAccordionButtonBorderColor": "transparent",
14
12
  "utrechtAccordionButtonBorderWidth": "0",
15
- "utrechtAccordionButtonHoverBackgroundColor": "inherit",
16
- "utrechtAccordionButtonHoverBorderColor": "hsl(0 0% 95%)",
17
- "utrechtAccordionButtonHoverColor": "hsl(0 0% 10%)",
18
- "utrechtAccordionButtonActiveBackgroundColor": "hsl(0 0% 80%)",
19
- "utrechtAccordionButtonActiveBorderColor": "hsl(0 0% 95%)",
13
+ "utrechtAccordionButtonHoverBackgroundColor": "hsl(0 0% 95%)",
14
+ "utrechtAccordionButtonHoverBorderColor": "transparent",
15
+ "utrechtAccordionButtonHoverColor": "hsl(211 60% 40%)",
16
+ "utrechtAccordionButtonActiveBackgroundColor": "hsl(0 0% 100%)",
17
+ "utrechtAccordionButtonActiveBorderColor": "transparent",
20
18
  "utrechtAccordionButtonActiveColor": "hsl(0 0% 10%)",
21
- "utrechtAccordionButtonFocusBackgroundColor": "hsl(0 0% 80%)",
22
- "utrechtAccordionButtonFocusBorderColor": "hsl(0 0% 95%)",
19
+ "utrechtAccordionButtonFocusBackgroundColor": "hsl(0 0% 100%)",
20
+ "utrechtAccordionButtonFocusBorderColor": "transparent",
23
21
  "utrechtAccordionButtonFocusColor": "hsl(0 0% 10%)",
22
+ "utrechtAccordionButtonFocusVisibleBorderColor": "hsl(0 0% 90%)",
23
+ "utrechtAccordionButtonFocusVisibleBorderWidth": "2px",
24
+ "utrechtAccordionButtonFocusVisibleBackgroundColor": "hsl(48 100% 80%)",
25
+ "utrechtAccordionButtonFocusVisibleColor": "hsl(211 60% 40%)",
24
26
  "utrechtAccordionButtonIconSize": "24px",
25
27
  "utrechtAccordionButtonIconUtrechtBackgroundColor": "hsl(48 100% 50%)",
26
- "utrechtAccordionPanelBorderColor": "hsl(0 0% 95%)",
27
- "utrechtAccordionPanelBorderWidth": "2px",
28
+ "utrechtAccordionPanelBorderColor": "transparent",
29
+ "utrechtAccordionPanelBorderWidth": "0",
28
30
  "utrechtAccordionPanelPaddingBlockStart": "8px",
29
31
  "utrechtAccordionPanelPaddingBlockEnd": "8px",
30
- "utrechtAccordionPanelPaddingInlineStart": "16px",
32
+ "utrechtAccordionPanelPaddingInlineStart": "32px",
31
33
  "utrechtAccordionPanelPaddingInlineEnd": "16px",
32
34
  "utrechtAccordionSectionMarginBlockStart": "4px",
35
+ "utrechtAccordionSectionBorderColor": "hsl(0 0% 90%)",
36
+ "utrechtAccordionSectionBorderWidth": "2px",
37
+ "utrechtAccordionSectionHoverBorderColor": "hsl(0 0% 95%)",
33
38
  "utrechtAlertDialogMaxBlockSize": "80vh",
34
39
  "utrechtAlertDialogMaxInlineSize": "780px",
35
40
  "utrechtAlertDialogMinBlockSize": "100px",
package/dist/dark/variables.css CHANGED
@@ -387,10 +387,16 @@
387
387
  --utrecht-action-disabled-cursor: not-allowed;
388
388
  --utrecht-action-busy-cursor: wait;
389
389
  --utrecht-action-activate-cursor: pointer;
390
- --utrecht-accordion-panel-border-width: 2px;
390
+ --utrecht-accordion-section-border-width: 2px;
391
+ --utrecht-accordion-panel-border-width: 0;
392
+ --utrecht-accordion-panel-border-color: transparent;
391
393
  --utrecht-accordion-button-icon-size: 24px;
392
- --utrecht-accordion-button-hover-background-color: inherit;
394
+ --utrecht-accordion-button-hover-border-color: transparent;
395
+ --utrecht-accordion-button-focus-visible-border-width: 2px;
396
+ --utrecht-accordion-button-focus-border-color: transparent;
393
397
  --utrecht-accordion-button-border-width: 0;
398
+ --utrecht-accordion-button-border-color: transparent;
399
+ --utrecht-accordion-button-active-border-color: transparent;
394
400
  --signalen-progress-bar-border-radius: 4px;
395
401
  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
396
402
  --nl-number-badge-padding-inline: 1ex;
@@ -849,28 +855,27 @@
849
855
  --utrecht-alert-color: var(--utrecht-color-white);
850
856
  --utrecht-alert-background-color: var(--utrecht-color-blue-35);
851
857
  --utrecht-accordion-section-margin-block-start: var(--utrecht-space-block-2xs);
852
- --utrecht-accordion-row-gap: var(--utrecht-space-block-xs);
853
- --utrecht-accordion-panel-padding-inline-start: var(--utrecht-space-block-md);
858
+ --utrecht-accordion-section-hover-border-color: var(--utrecht-color-grey-95);
859
+ --utrecht-accordion-section-border-color: var(--utrecht-color-grey-90);
860
+ --utrecht-accordion-panel-padding-inline-start: var(--utrecht-space-block-2xl);
854
861
  --utrecht-accordion-panel-padding-inline-end: var(--utrecht-space-block-md);
855
862
  --utrecht-accordion-panel-padding-block-start: var(--utrecht-space-block-xs);
856
863
  --utrecht-accordion-panel-padding-block-end: var(--utrecht-space-block-xs);
857
- --utrecht-accordion-panel-border-color: var(--utrecht-color-grey-95);
858
- --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-md);
859
- --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-md);
860
- --utrecht-accordion-button-padding-block-start: var(--utrecht-space-block-xs);
861
- --utrecht-accordion-button-padding-block-end: var(--utrecht-space-block-xs);
864
+ --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-xs);
865
+ --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-xs);
866
+ --utrecht-accordion-button-padding-block-start: var(--utrecht-space-block-md);
867
+ --utrecht-accordion-button-padding-block-end: var(--utrecht-space-block-md);
862
868
  --utrecht-accordion-button-icon-utrecht-background-color: var(--utrecht-color-yellow-50);
863
- --utrecht-accordion-button-hover-color: var(--utrecht-color-grey-10);
864
- --utrecht-accordion-button-hover-border-color: var(--utrecht-color-grey-95);
869
+ --utrecht-accordion-button-hover-color: var(--utrecht-color-blue-40);
870
+ --utrecht-accordion-button-hover-background-color: var(--utrecht-color-grey-95);
871
+ --utrecht-accordion-button-focus-visible-color: var(--utrecht-color-blue-40);
872
+ --utrecht-accordion-button-focus-visible-border-color: var(--utrecht-color-grey-90);
873
+ --utrecht-accordion-button-focus-visible-background-color: var(--utrecht-color-yellow-80);
865
874
  --utrecht-accordion-button-focus-color: var(--utrecht-color-grey-10);
866
- --utrecht-accordion-button-focus-border-color: var(--utrecht-color-grey-95);
867
- --utrecht-accordion-button-focus-background-color: var(--utrecht-color-grey-80);
868
- --utrecht-accordion-button-color: var(--utrecht-color-grey-10);
869
- --utrecht-accordion-button-border-color: var(--utrecht-color-grey-95);
870
- --utrecht-accordion-button-background-color: var(--utrecht-color-grey-95);
875
+ --utrecht-accordion-button-focus-background-color: var(--utrecht-color-white);
876
+ --utrecht-accordion-button-color: var(--utrecht-color-blue-40);
871
877
  --utrecht-accordion-button-active-color: var(--utrecht-color-grey-10);
872
- --utrecht-accordion-button-active-border-color: var(--utrecht-color-grey-95);
873
- --utrecht-accordion-button-active-background-color: var(--utrecht-color-grey-80);
878
+ --utrecht-accordion-button-active-background-color: var(--utrecht-color-white);
874
879
  --nl-skip-link-text-decoration: var(--utrecht-link-text-decoration);
875
880
  --nl-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
876
881
  --nl-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
package/dist/dark/variables.d.ts CHANGED
@@ -2,12 +2,10 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
- export const utrechtAccordionRowGap : string;
6
5
  export const utrechtAccordionButtonPaddingInlineEnd : string;
7
6
  export const utrechtAccordionButtonPaddingInlineStart : string;
8
7
  export const utrechtAccordionButtonPaddingBlockEnd : string;
9
8
  export const utrechtAccordionButtonPaddingBlockStart : string;
10
- export const utrechtAccordionButtonBackgroundColor : string;
11
9
  export const utrechtAccordionButtonColor : string;
12
10
  export const utrechtAccordionButtonBorderColor : string;
13
11
  export const utrechtAccordionButtonBorderWidth : string;
@@ -20,6 +18,10 @@ export const utrechtAccordionButtonActiveColor : string;
20
18
  export const utrechtAccordionButtonFocusBackgroundColor : string;
21
19
  export const utrechtAccordionButtonFocusBorderColor : string;
22
20
  export const utrechtAccordionButtonFocusColor : string;
21
+ export const utrechtAccordionButtonFocusVisibleBorderColor : string;
22
+ export const utrechtAccordionButtonFocusVisibleBorderWidth : string;
23
+ export const utrechtAccordionButtonFocusVisibleBackgroundColor : string;
24
+ export const utrechtAccordionButtonFocusVisibleColor : string;
23
25
  export const utrechtAccordionButtonIconSize : string;
24
26
  export const utrechtAccordionButtonIconUtrechtBackgroundColor : string;
25
27
  export const utrechtAccordionPanelBorderColor : string;
@@ -29,6 +31,9 @@ export const utrechtAccordionPanelPaddingBlockEnd : string;
29
31
  export const utrechtAccordionPanelPaddingInlineStart : string;
30
32
  export const utrechtAccordionPanelPaddingInlineEnd : string;
31
33
  export const utrechtAccordionSectionMarginBlockStart : string;
34
+ export const utrechtAccordionSectionBorderColor : string;
35
+ export const utrechtAccordionSectionBorderWidth : string;
36
+ export const utrechtAccordionSectionHoverBorderColor : string;
32
37
  export const utrechtAlertDialogMaxBlockSize : string;
33
38
  export const utrechtAlertDialogMaxInlineSize : string;
34
39
  export const utrechtAlertDialogMinBlockSize : string;
package/dist/dark/variables.json CHANGED
@@ -112,32 +112,37 @@
112
112
  "signalenModalDialogBackgroundColor": "hsl(0 0% 100%)",
113
113
  "signalenModalDialogColor": "hsl(0 0% 0%)",
114
114
  "signalenProgressBarBorderRadius": "4px",
115
- "utrechtAccordionButtonActiveBackgroundColor": "hsl(0 0% 80%)",
116
- "utrechtAccordionButtonActiveBorderColor": "hsl(0 0% 95%)",
115
+ "utrechtAccordionButtonActiveBackgroundColor": "hsl(0 0% 100%)",
116
+ "utrechtAccordionButtonActiveBorderColor": "transparent",
117
117
  "utrechtAccordionButtonActiveColor": "hsl(0 0% 10%)",
118
- "utrechtAccordionButtonBackgroundColor": "hsl(0 0% 95%)",
119
- "utrechtAccordionButtonBorderColor": "hsl(0 0% 95%)",
118
+ "utrechtAccordionButtonBorderColor": "transparent",
120
119
  "utrechtAccordionButtonBorderWidth": "0",
121
- "utrechtAccordionButtonColor": "hsl(0 0% 10%)",
122
- "utrechtAccordionButtonFocusBackgroundColor": "hsl(0 0% 80%)",
123
- "utrechtAccordionButtonFocusBorderColor": "hsl(0 0% 95%)",
120
+ "utrechtAccordionButtonColor": "hsl(211 60% 40%)",
121
+ "utrechtAccordionButtonFocusBackgroundColor": "hsl(0 0% 100%)",
122
+ "utrechtAccordionButtonFocusBorderColor": "transparent",
124
123
  "utrechtAccordionButtonFocusColor": "hsl(0 0% 10%)",
125
- "utrechtAccordionButtonHoverBackgroundColor": "inherit",
126
- "utrechtAccordionButtonHoverBorderColor": "hsl(0 0% 95%)",
127
- "utrechtAccordionButtonHoverColor": "hsl(0 0% 10%)",
124
+ "utrechtAccordionButtonFocusVisibleBackgroundColor": "hsl(48 100% 80%)",
125
+ "utrechtAccordionButtonFocusVisibleBorderColor": "hsl(0 0% 90%)",
126
+ "utrechtAccordionButtonFocusVisibleBorderWidth": "2px",
127
+ "utrechtAccordionButtonFocusVisibleColor": "hsl(211 60% 40%)",
128
+ "utrechtAccordionButtonHoverBackgroundColor": "hsl(0 0% 95%)",
129
+ "utrechtAccordionButtonHoverBorderColor": "transparent",
130
+ "utrechtAccordionButtonHoverColor": "hsl(211 60% 40%)",
128
131
  "utrechtAccordionButtonIconSize": "24px",
129
132
  "utrechtAccordionButtonIconUtrechtBackgroundColor": "hsl(48 100% 50%)",
130
- "utrechtAccordionButtonPaddingBlockEnd": "8px",
131
- "utrechtAccordionButtonPaddingBlockStart": "8px",
132
- "utrechtAccordionButtonPaddingInlineEnd": "16px",
133
- "utrechtAccordionButtonPaddingInlineStart": "16px",
134
- "utrechtAccordionPanelBorderColor": "hsl(0 0% 95%)",
135
- "utrechtAccordionPanelBorderWidth": "2px",
133
+ "utrechtAccordionButtonPaddingBlockEnd": "16px",
134
+ "utrechtAccordionButtonPaddingBlockStart": "16px",
135
+ "utrechtAccordionButtonPaddingInlineEnd": "8px",
136
+ "utrechtAccordionButtonPaddingInlineStart": "8px",
137
+ "utrechtAccordionPanelBorderColor": "transparent",
138
+ "utrechtAccordionPanelBorderWidth": "0",
136
139
  "utrechtAccordionPanelPaddingBlockEnd": "8px",
137
140
  "utrechtAccordionPanelPaddingBlockStart": "8px",
138
141
  "utrechtAccordionPanelPaddingInlineEnd": "16px",
139
- "utrechtAccordionPanelPaddingInlineStart": "16px",
140
- "utrechtAccordionRowGap": "8px",
142
+ "utrechtAccordionPanelPaddingInlineStart": "32px",
143
+ "utrechtAccordionSectionBorderColor": "hsl(0 0% 90%)",
144
+ "utrechtAccordionSectionBorderWidth": "2px",
145
+ "utrechtAccordionSectionHoverBorderColor": "hsl(0 0% 95%)",
141
146
  "utrechtAccordionSectionMarginBlockStart": "4px",
142
147
  "utrechtActionActivateCursor": "pointer",
143
148
  "utrechtActionBusyCursor": "wait",
package/dist/dark/variables.less CHANGED
@@ -395,10 +395,16 @@
395
395
  @utrecht-alert-dialog-min-inline-size: 320px;
396
396
  @utrecht-alert-dialog-min-block-size: 100px;
397
397
  @utrecht-alert-dialog-max-block-size: 80vh;
398
- @utrecht-accordion-panel-border-width: 2px;
398
+ @utrecht-accordion-section-border-width: 2px;
399
+ @utrecht-accordion-panel-border-width: 0;
400
+ @utrecht-accordion-panel-border-color: transparent;
399
401
  @utrecht-accordion-button-icon-size: 24px;
400
- @utrecht-accordion-button-hover-background-color: inherit;
402
+ @utrecht-accordion-button-focus-visible-border-width: 2px;
403
+ @utrecht-accordion-button-focus-border-color: transparent;
404
+ @utrecht-accordion-button-active-border-color: transparent;
405
+ @utrecht-accordion-button-hover-border-color: transparent;
401
406
  @utrecht-accordion-button-border-width: 0;
407
+ @utrecht-accordion-button-border-color: transparent;
402
408
  @nl-skip-link-focus-visible-text-decoration: @utrecht-link-focus-visible-text-decoration;
403
409
  @nl-skip-link-text-decoration: @utrecht-link-text-decoration;
404
410
  @nl-paragraph-small-font-size: @utrecht-typography-scale-sm-font-size;
@@ -933,29 +939,28 @@
933
939
  @utrecht-alert-color: @utrecht-color-white;
934
940
  @utrecht-alert-background-color: @utrecht-color-blue-35;
935
941
  @utrecht-alert-dialog-max-inline-size: @utrecht-article-max-inline-size;
942
+ @utrecht-accordion-section-hover-border-color: @utrecht-color-grey-95;
943
+ @utrecht-accordion-section-border-color: @utrecht-color-grey-90;
936
944
  @utrecht-accordion-section-margin-block-start: @utrecht-space-block-2xs;
937
945
  @utrecht-accordion-panel-padding-inline-end: @utrecht-space-block-md;
938
- @utrecht-accordion-panel-padding-inline-start: @utrecht-space-block-md;
946
+ @utrecht-accordion-panel-padding-inline-start: @utrecht-space-block-2xl;
939
947
  @utrecht-accordion-panel-padding-block-end: @utrecht-space-block-xs;
940
948
  @utrecht-accordion-panel-padding-block-start: @utrecht-space-block-xs;
941
- @utrecht-accordion-panel-border-color: @utrecht-color-grey-95;
942
949
  @utrecht-accordion-button-icon-utrecht-background-color: @utrecht-color-yellow-50;
950
+ @utrecht-accordion-button-focus-visible-color: @utrecht-color-blue-40;
951
+ @utrecht-accordion-button-focus-visible-background-color: @utrecht-color-yellow-80;
952
+ @utrecht-accordion-button-focus-visible-border-color: @utrecht-color-grey-90;
943
953
  @utrecht-accordion-button-focus-color: @utrecht-color-grey-10;
944
- @utrecht-accordion-button-focus-border-color: @utrecht-color-grey-95;
945
- @utrecht-accordion-button-focus-background-color: @utrecht-color-grey-80;
954
+ @utrecht-accordion-button-focus-background-color: @utrecht-color-white;
946
955
  @utrecht-accordion-button-active-color: @utrecht-color-grey-10;
947
- @utrecht-accordion-button-active-border-color: @utrecht-color-grey-95;
948
- @utrecht-accordion-button-active-background-color: @utrecht-color-grey-80;
949
- @utrecht-accordion-button-hover-color: @utrecht-color-grey-10;
950
- @utrecht-accordion-button-hover-border-color: @utrecht-color-grey-95;
951
- @utrecht-accordion-button-border-color: @utrecht-color-grey-95;
952
- @utrecht-accordion-button-color: @utrecht-color-grey-10;
953
- @utrecht-accordion-button-background-color: @utrecht-color-grey-95;
954
- @utrecht-accordion-button-padding-block-start: @utrecht-space-block-xs;
955
- @utrecht-accordion-button-padding-block-end: @utrecht-space-block-xs;
956
- @utrecht-accordion-button-padding-inline-start: @utrecht-space-block-md;
957
- @utrecht-accordion-button-padding-inline-end: @utrecht-space-block-md;
958
- @utrecht-accordion-row-gap: @utrecht-space-block-xs;
956
+ @utrecht-accordion-button-active-background-color: @utrecht-color-white;
957
+ @utrecht-accordion-button-hover-color: @utrecht-color-blue-40;
958
+ @utrecht-accordion-button-hover-background-color: @utrecht-color-grey-95;
959
+ @utrecht-accordion-button-color: @utrecht-color-blue-40;
960
+ @utrecht-accordion-button-padding-block-start: @utrecht-space-block-md;
961
+ @utrecht-accordion-button-padding-block-end: @utrecht-space-block-md;
962
+ @utrecht-accordion-button-padding-inline-start: @utrecht-space-block-xs;
963
+ @utrecht-accordion-button-padding-inline-end: @utrecht-space-block-xs;
959
964
  @signalen-modal-dialog-color: @utrecht-body-color;
960
965
  @signalen-modal-dialog-background-color: @utrecht-body-background-color;
961
966
  @of-progress-indicator-background-color: @utrecht-document-background-color;
package/dist/dark/variables.mjs CHANGED
@@ -2,33 +2,38 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
- export const utrechtAccordionRowGap = "8px";
6
- export const utrechtAccordionButtonPaddingInlineEnd = "16px";
7
- export const utrechtAccordionButtonPaddingInlineStart = "16px";
8
- export const utrechtAccordionButtonPaddingBlockEnd = "8px";
9
- export const utrechtAccordionButtonPaddingBlockStart = "8px";
10
- export const utrechtAccordionButtonBackgroundColor = "hsl(0 0% 95%)";
11
- export const utrechtAccordionButtonColor = "hsl(0 0% 10%)";
12
- export const utrechtAccordionButtonBorderColor = "hsl(0 0% 95%)";
5
+ export const utrechtAccordionButtonPaddingInlineEnd = "8px";
6
+ export const utrechtAccordionButtonPaddingInlineStart = "8px";
7
+ export const utrechtAccordionButtonPaddingBlockEnd = "16px";
8
+ export const utrechtAccordionButtonPaddingBlockStart = "16px";
9
+ export const utrechtAccordionButtonColor = "hsl(211 60% 40%)";
10
+ export const utrechtAccordionButtonBorderColor = "transparent";
13
11
  export const utrechtAccordionButtonBorderWidth = "0";
14
- export const utrechtAccordionButtonHoverBackgroundColor = "inherit";
15
- export const utrechtAccordionButtonHoverBorderColor = "hsl(0 0% 95%)";
16
- export const utrechtAccordionButtonHoverColor = "hsl(0 0% 10%)";
17
- export const utrechtAccordionButtonActiveBackgroundColor = "hsl(0 0% 80%)";
18
- export const utrechtAccordionButtonActiveBorderColor = "hsl(0 0% 95%)";
12
+ export const utrechtAccordionButtonHoverBackgroundColor = "hsl(0 0% 95%)";
13
+ export const utrechtAccordionButtonHoverBorderColor = "transparent";
14
+ export const utrechtAccordionButtonHoverColor = "hsl(211 60% 40%)";
15
+ export const utrechtAccordionButtonActiveBackgroundColor = "hsl(0 0% 100%)";
16
+ export const utrechtAccordionButtonActiveBorderColor = "transparent";
19
17
  export const utrechtAccordionButtonActiveColor = "hsl(0 0% 10%)";
20
- export const utrechtAccordionButtonFocusBackgroundColor = "hsl(0 0% 80%)";
21
- export const utrechtAccordionButtonFocusBorderColor = "hsl(0 0% 95%)";
18
+ export const utrechtAccordionButtonFocusBackgroundColor = "hsl(0 0% 100%)";
19
+ export const utrechtAccordionButtonFocusBorderColor = "transparent";
22
20
  export const utrechtAccordionButtonFocusColor = "hsl(0 0% 10%)";
21
+ export const utrechtAccordionButtonFocusVisibleBorderColor = "hsl(0 0% 90%)";
22
+ export const utrechtAccordionButtonFocusVisibleBorderWidth = "2px";
23
+ export const utrechtAccordionButtonFocusVisibleBackgroundColor = "hsl(48 100% 80%)";
24
+ export const utrechtAccordionButtonFocusVisibleColor = "hsl(211 60% 40%)";
23
25
  export const utrechtAccordionButtonIconSize = "24px";
24
26
  export const utrechtAccordionButtonIconUtrechtBackgroundColor = "hsl(48 100% 50%)";
25
- export const utrechtAccordionPanelBorderColor = "hsl(0 0% 95%)";
26
- export const utrechtAccordionPanelBorderWidth = "2px";
27
+ export const utrechtAccordionPanelBorderColor = "transparent";
28
+ export const utrechtAccordionPanelBorderWidth = "0";
27
29
  export const utrechtAccordionPanelPaddingBlockStart = "8px";
28
30
  export const utrechtAccordionPanelPaddingBlockEnd = "8px";
29
- export const utrechtAccordionPanelPaddingInlineStart = "16px";
31
+ export const utrechtAccordionPanelPaddingInlineStart = "32px";
30
32
  export const utrechtAccordionPanelPaddingInlineEnd = "16px";
31
33
  export const utrechtAccordionSectionMarginBlockStart = "4px";
34
+ export const utrechtAccordionSectionBorderColor = "hsl(0 0% 90%)";
35
+ export const utrechtAccordionSectionBorderWidth = "2px";
36
+ export const utrechtAccordionSectionHoverBorderColor = "hsl(0 0% 95%)";
32
37
  export const utrechtAlertDialogMaxBlockSize = "80vh";
33
38
  export const utrechtAlertDialogMaxInlineSize = "780px";
34
39
  export const utrechtAlertDialogMinBlockSize = "100px";
package/dist/index.cjs CHANGED
@@ -3,33 +3,38 @@
3
3
  */
4
4
 
5
5
  module.exports = {
6
- "utrechtAccordionRowGap": "8px",
7
- "utrechtAccordionButtonPaddingInlineEnd": "16px",
8
- "utrechtAccordionButtonPaddingInlineStart": "16px",
9
- "utrechtAccordionButtonPaddingBlockEnd": "8px",
10
- "utrechtAccordionButtonPaddingBlockStart": "8px",
11
- "utrechtAccordionButtonBackgroundColor": "hsl(0 0% 95%)",
12
- "utrechtAccordionButtonColor": "hsl(0 0% 10%)",
13
- "utrechtAccordionButtonBorderColor": "hsl(0 0% 95%)",
6
+ "utrechtAccordionButtonPaddingInlineEnd": "8px",
7
+ "utrechtAccordionButtonPaddingInlineStart": "8px",
8
+ "utrechtAccordionButtonPaddingBlockEnd": "16px",
9
+ "utrechtAccordionButtonPaddingBlockStart": "16px",
10
+ "utrechtAccordionButtonColor": "hsl(211 60% 40%)",
11
+ "utrechtAccordionButtonBorderColor": "transparent",
14
12
  "utrechtAccordionButtonBorderWidth": "0",
15
- "utrechtAccordionButtonHoverBackgroundColor": "inherit",
16
- "utrechtAccordionButtonHoverBorderColor": "hsl(0 0% 95%)",
17
- "utrechtAccordionButtonHoverColor": "hsl(0 0% 10%)",
18
- "utrechtAccordionButtonActiveBackgroundColor": "hsl(0 0% 80%)",
19
- "utrechtAccordionButtonActiveBorderColor": "hsl(0 0% 95%)",
13
+ "utrechtAccordionButtonHoverBackgroundColor": "hsl(0 0% 95%)",
14
+ "utrechtAccordionButtonHoverBorderColor": "transparent",
15
+ "utrechtAccordionButtonHoverColor": "hsl(211 60% 40%)",
16
+ "utrechtAccordionButtonActiveBackgroundColor": "hsl(0 0% 100%)",
17
+ "utrechtAccordionButtonActiveBorderColor": "transparent",
20
18
  "utrechtAccordionButtonActiveColor": "hsl(0 0% 10%)",
21
- "utrechtAccordionButtonFocusBackgroundColor": "hsl(0 0% 80%)",
22
- "utrechtAccordionButtonFocusBorderColor": "hsl(0 0% 95%)",
19
+ "utrechtAccordionButtonFocusBackgroundColor": "hsl(0 0% 100%)",
20
+ "utrechtAccordionButtonFocusBorderColor": "transparent",
23
21
  "utrechtAccordionButtonFocusColor": "hsl(0 0% 10%)",
22
+ "utrechtAccordionButtonFocusVisibleBorderColor": "hsl(0 0% 90%)",
23
+ "utrechtAccordionButtonFocusVisibleBorderWidth": "2px",
24
+ "utrechtAccordionButtonFocusVisibleBackgroundColor": "hsl(48 100% 80%)",
25
+ "utrechtAccordionButtonFocusVisibleColor": "hsl(211 60% 40%)",
24
26
  "utrechtAccordionButtonIconSize": "24px",
25
27
  "utrechtAccordionButtonIconUtrechtBackgroundColor": "hsl(48 100% 50%)",
26
- "utrechtAccordionPanelBorderColor": "hsl(0 0% 95%)",
27
- "utrechtAccordionPanelBorderWidth": "2px",
28
+ "utrechtAccordionPanelBorderColor": "transparent",
29
+ "utrechtAccordionPanelBorderWidth": "0",
28
30
  "utrechtAccordionPanelPaddingBlockStart": "8px",
29
31
  "utrechtAccordionPanelPaddingBlockEnd": "8px",
30
- "utrechtAccordionPanelPaddingInlineStart": "16px",
32
+ "utrechtAccordionPanelPaddingInlineStart": "32px",
31
33
  "utrechtAccordionPanelPaddingInlineEnd": "16px",
32
34
  "utrechtAccordionSectionMarginBlockStart": "4px",
35
+ "utrechtAccordionSectionBorderColor": "hsl(0 0% 90%)",
36
+ "utrechtAccordionSectionBorderWidth": "2px",
37
+ "utrechtAccordionSectionHoverBorderColor": "hsl(0 0% 95%)",
33
38
  "utrechtAlertDialogMaxBlockSize": "80vh",
34
39
  "utrechtAlertDialogMaxInlineSize": "780px",
35
40
  "utrechtAlertDialogMinBlockSize": "100px",
@@ -57,7 +62,7 @@ module.exports = {
57
62
  "utrechtAlertIconWarningColor": "hsl(48 100% 40%)",
58
63
  "utrechtAlertIconOkColor": "hsl(90 30% 38%)",
59
64
  "utrechtArticleMaxInlineSize": "780px",
60
- "utrechtBackdropBackgroundColor": "hsl(0 0% 100%)",
65
+ "utrechtBackdropBackgroundColor": "rgb(0 0 0 / 30%)",
61
66
  "utrechtBackdropColor": "hsl(0 0% 0%)",
62
67
  "utrechtBackdropOpacity": "0.8",
63
68
  "utrechtBackdropFadeInAnimationDuration": "400ms",
package/dist/index.css CHANGED
@@ -415,16 +415,23 @@
415
415
  --utrecht-backdrop-reduced-transparency-opacity: 0.98;
416
416
  --utrecht-backdrop-fade-in-animation-duration: 400ms;
417
417
  --utrecht-backdrop-opacity: 0.8;
418
+ --utrecht-backdrop-background-color: rgb(0 0 0 / 30%);
418
419
  --utrecht-article-max-inline-size: 780px;
419
420
  --utrecht-alert-icon-inset-block-start: 6px;
420
421
  --utrecht-alert-icon-size: 24px;
421
422
  --utrecht-alert-dialog-min-inline-size: 320px;
422
423
  --utrecht-alert-dialog-min-block-size: 100px;
423
424
  --utrecht-alert-dialog-max-block-size: 80vh;
424
- --utrecht-accordion-panel-border-width: 2px;
425
+ --utrecht-accordion-section-border-width: 2px;
426
+ --utrecht-accordion-panel-border-width: 0;
427
+ --utrecht-accordion-panel-border-color: transparent;
425
428
  --utrecht-accordion-button-icon-size: 24px;
426
- --utrecht-accordion-button-hover-background-color: inherit;
429
+ --utrecht-accordion-button-focus-visible-border-width: 2px;
430
+ --utrecht-accordion-button-focus-border-color: transparent;
431
+ --utrecht-accordion-button-active-border-color: transparent;
432
+ --utrecht-accordion-button-hover-border-color: transparent;
427
433
  --utrecht-accordion-button-border-width: 0;
434
+ --utrecht-accordion-button-border-color: transparent;
428
435
  --nl-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
429
436
  --nl-skip-link-text-decoration: var(--utrecht-link-text-decoration);
430
437
  --nl-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
@@ -939,7 +946,6 @@
939
946
  --utrecht-badge-counter-color: var(--utrecht-color-white); /* Default text color for badge components */
940
947
  --utrecht-badge-counter-background-color: var(--utrecht-color-red-40); /* Default background color for badge components */
941
948
  --utrecht-backdrop-color: var(--utrecht-color-black);
942
- --utrecht-backdrop-background-color: var(--utrecht-color-white);
943
949
  --utrecht-alert-icon-ok-color: var(--utrecht-color-green-40);
944
950
  --utrecht-alert-icon-warning-color: var(--utrecht-color-yellow-40);
945
951
  --utrecht-alert-icon-error-color: var(--utrecht-color-red-40);
@@ -961,29 +967,28 @@
961
967
  --utrecht-alert-color: var(--utrecht-color-black);
962
968
  --utrecht-alert-background-color: var(--utrecht-color-blue-90);
963
969
  --utrecht-alert-dialog-max-inline-size: var(--utrecht-article-max-inline-size);
970
+ --utrecht-accordion-section-hover-border-color: var(--utrecht-color-grey-95);
971
+ --utrecht-accordion-section-border-color: var(--utrecht-color-grey-90);
964
972
  --utrecht-accordion-section-margin-block-start: var(--utrecht-space-block-2xs);
965
973
  --utrecht-accordion-panel-padding-inline-end: var(--utrecht-space-block-md);
966
- --utrecht-accordion-panel-padding-inline-start: var(--utrecht-space-block-md);
974
+ --utrecht-accordion-panel-padding-inline-start: var(--utrecht-space-block-2xl);
967
975
  --utrecht-accordion-panel-padding-block-end: var(--utrecht-space-block-xs);
968
976
  --utrecht-accordion-panel-padding-block-start: var(--utrecht-space-block-xs);
969
- --utrecht-accordion-panel-border-color: var(--utrecht-color-grey-95);
970
977
  --utrecht-accordion-button-icon-utrecht-background-color: var(--utrecht-color-yellow-50);
978
+ --utrecht-accordion-button-focus-visible-color: var(--utrecht-color-blue-40);
979
+ --utrecht-accordion-button-focus-visible-background-color: var(--utrecht-color-yellow-80);
980
+ --utrecht-accordion-button-focus-visible-border-color: var(--utrecht-color-grey-90);
971
981
  --utrecht-accordion-button-focus-color: var(--utrecht-color-grey-10);
972
- --utrecht-accordion-button-focus-border-color: var(--utrecht-color-grey-95);
973
- --utrecht-accordion-button-focus-background-color: var(--utrecht-color-grey-80);
982
+ --utrecht-accordion-button-focus-background-color: var(--utrecht-color-white);
974
983
  --utrecht-accordion-button-active-color: var(--utrecht-color-grey-10);
975
- --utrecht-accordion-button-active-border-color: var(--utrecht-color-grey-95);
976
- --utrecht-accordion-button-active-background-color: var(--utrecht-color-grey-80);
977
- --utrecht-accordion-button-hover-color: var(--utrecht-color-grey-10);
978
- --utrecht-accordion-button-hover-border-color: var(--utrecht-color-grey-95);
979
- --utrecht-accordion-button-border-color: var(--utrecht-color-grey-95);
980
- --utrecht-accordion-button-color: var(--utrecht-color-grey-10);
981
- --utrecht-accordion-button-background-color: var(--utrecht-color-grey-95);
982
- --utrecht-accordion-button-padding-block-start: var(--utrecht-space-block-xs);
983
- --utrecht-accordion-button-padding-block-end: var(--utrecht-space-block-xs);
984
- --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-md);
985
- --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-md);
986
- --utrecht-accordion-row-gap: var(--utrecht-space-block-xs);
984
+ --utrecht-accordion-button-active-background-color: var(--utrecht-color-white);
985
+ --utrecht-accordion-button-hover-color: var(--utrecht-color-blue-40);
986
+ --utrecht-accordion-button-hover-background-color: var(--utrecht-color-grey-95);
987
+ --utrecht-accordion-button-color: var(--utrecht-color-blue-40);
988
+ --utrecht-accordion-button-padding-block-start: var(--utrecht-space-block-md);
989
+ --utrecht-accordion-button-padding-block-end: var(--utrecht-space-block-md);
990
+ --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-xs);
991
+ --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-xs);
987
992
  --signalen-modal-dialog-color: var(--utrecht-body-color);
988
993
  --signalen-modal-dialog-background-color: var(--utrecht-body-background-color);
989
994
  --of-progress-indicator-background-color: var(--utrecht-document-background-color);
@@ -1529,10 +1534,16 @@
1529
1534
  --utrecht-alert-dialog-min-inline-size: 320px;
1530
1535
  --utrecht-alert-dialog-min-block-size: 100px;
1531
1536
  --utrecht-alert-dialog-max-block-size: 80vh;
1532
- --utrecht-accordion-panel-border-width: 2px;
1537
+ --utrecht-accordion-section-border-width: 2px;
1538
+ --utrecht-accordion-panel-border-width: 0;
1539
+ --utrecht-accordion-panel-border-color: transparent;
1533
1540
  --utrecht-accordion-button-icon-size: 24px;
1534
- --utrecht-accordion-button-hover-background-color: inherit;
1541
+ --utrecht-accordion-button-focus-visible-border-width: 2px;
1542
+ --utrecht-accordion-button-focus-border-color: transparent;
1543
+ --utrecht-accordion-button-active-border-color: transparent;
1544
+ --utrecht-accordion-button-hover-border-color: transparent;
1535
1545
  --utrecht-accordion-button-border-width: 0;
1546
+ --utrecht-accordion-button-border-color: transparent;
1536
1547
  --nl-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
1537
1548
  --nl-skip-link-text-decoration: var(--utrecht-link-text-decoration);
1538
1549
  --nl-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
@@ -2067,29 +2078,28 @@
2067
2078
  --utrecht-alert-color: var(--utrecht-color-white);
2068
2079
  --utrecht-alert-background-color: var(--utrecht-color-blue-35);
2069
2080
  --utrecht-alert-dialog-max-inline-size: var(--utrecht-article-max-inline-size);
2081
+ --utrecht-accordion-section-hover-border-color: var(--utrecht-color-grey-95);
2082
+ --utrecht-accordion-section-border-color: var(--utrecht-color-grey-90);
2070
2083
  --utrecht-accordion-section-margin-block-start: var(--utrecht-space-block-2xs);
2071
2084
  --utrecht-accordion-panel-padding-inline-end: var(--utrecht-space-block-md);
2072
- --utrecht-accordion-panel-padding-inline-start: var(--utrecht-space-block-md);
2085
+ --utrecht-accordion-panel-padding-inline-start: var(--utrecht-space-block-2xl);
2073
2086
  --utrecht-accordion-panel-padding-block-end: var(--utrecht-space-block-xs);
2074
2087
  --utrecht-accordion-panel-padding-block-start: var(--utrecht-space-block-xs);
2075
- --utrecht-accordion-panel-border-color: var(--utrecht-color-grey-95);
2076
2088
  --utrecht-accordion-button-icon-utrecht-background-color: var(--utrecht-color-yellow-50);
2089
+ --utrecht-accordion-button-focus-visible-color: var(--utrecht-color-blue-40);
2090
+ --utrecht-accordion-button-focus-visible-background-color: var(--utrecht-color-yellow-80);
2091
+ --utrecht-accordion-button-focus-visible-border-color: var(--utrecht-color-grey-90);
2077
2092
  --utrecht-accordion-button-focus-color: var(--utrecht-color-grey-10);
2078
- --utrecht-accordion-button-focus-border-color: var(--utrecht-color-grey-95);
2079
- --utrecht-accordion-button-focus-background-color: var(--utrecht-color-grey-80);
2093
+ --utrecht-accordion-button-focus-background-color: var(--utrecht-color-white);
2080
2094
  --utrecht-accordion-button-active-color: var(--utrecht-color-grey-10);
2081
- --utrecht-accordion-button-active-border-color: var(--utrecht-color-grey-95);
2082
- --utrecht-accordion-button-active-background-color: var(--utrecht-color-grey-80);
2083
- --utrecht-accordion-button-hover-color: var(--utrecht-color-grey-10);
2084
- --utrecht-accordion-button-hover-border-color: var(--utrecht-color-grey-95);
2085
- --utrecht-accordion-button-border-color: var(--utrecht-color-grey-95);
2086
- --utrecht-accordion-button-color: var(--utrecht-color-grey-10);
2087
- --utrecht-accordion-button-background-color: var(--utrecht-color-grey-95);
2088
- --utrecht-accordion-button-padding-block-start: var(--utrecht-space-block-xs);
2089
- --utrecht-accordion-button-padding-block-end: var(--utrecht-space-block-xs);
2090
- --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-md);
2091
- --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-md);
2092
- --utrecht-accordion-row-gap: var(--utrecht-space-block-xs);
2095
+ --utrecht-accordion-button-active-background-color: var(--utrecht-color-white);
2096
+ --utrecht-accordion-button-hover-color: var(--utrecht-color-blue-40);
2097
+ --utrecht-accordion-button-hover-background-color: var(--utrecht-color-grey-95);
2098
+ --utrecht-accordion-button-color: var(--utrecht-color-blue-40);
2099
+ --utrecht-accordion-button-padding-block-start: var(--utrecht-space-block-md);
2100
+ --utrecht-accordion-button-padding-block-end: var(--utrecht-space-block-md);
2101
+ --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-xs);
2102
+ --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-xs);
2093
2103
  --signalen-modal-dialog-color: var(--utrecht-body-color);
2094
2104
  --signalen-modal-dialog-background-color: var(--utrecht-body-background-color);
2095
2105
  --of-progress-indicator-background-color: var(--utrecht-document-background-color);
package/dist/index.d.ts CHANGED
@@ -2,12 +2,10 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
- export const utrechtAccordionRowGap : string;
6
5
  export const utrechtAccordionButtonPaddingInlineEnd : string;
7
6
  export const utrechtAccordionButtonPaddingInlineStart : string;
8
7
  export const utrechtAccordionButtonPaddingBlockEnd : string;
9
8
  export const utrechtAccordionButtonPaddingBlockStart : string;
10
- export const utrechtAccordionButtonBackgroundColor : string;
11
9
  export const utrechtAccordionButtonColor : string;
12
10
  export const utrechtAccordionButtonBorderColor : string;
13
11
  export const utrechtAccordionButtonBorderWidth : string;
@@ -20,6 +18,10 @@ export const utrechtAccordionButtonActiveColor : string;
20
18
  export const utrechtAccordionButtonFocusBackgroundColor : string;
21
19
  export const utrechtAccordionButtonFocusBorderColor : string;
22
20
  export const utrechtAccordionButtonFocusColor : string;
21
+ export const utrechtAccordionButtonFocusVisibleBorderColor : string;
22
+ export const utrechtAccordionButtonFocusVisibleBorderWidth : string;
23
+ export const utrechtAccordionButtonFocusVisibleBackgroundColor : string;
24
+ export const utrechtAccordionButtonFocusVisibleColor : string;
23
25
  export const utrechtAccordionButtonIconSize : string;
24
26
  export const utrechtAccordionButtonIconUtrechtBackgroundColor : string;
25
27
  export const utrechtAccordionPanelBorderColor : string;
@@ -29,6 +31,9 @@ export const utrechtAccordionPanelPaddingBlockEnd : string;
29
31
  export const utrechtAccordionPanelPaddingInlineStart : string;
30
32
  export const utrechtAccordionPanelPaddingInlineEnd : string;
31
33
  export const utrechtAccordionSectionMarginBlockStart : string;
34
+ export const utrechtAccordionSectionBorderColor : string;
35
+ export const utrechtAccordionSectionBorderWidth : string;
36
+ export const utrechtAccordionSectionHoverBorderColor : string;
32
37
  export const utrechtAlertDialogMaxBlockSize : string;
33
38
  export const utrechtAlertDialogMaxInlineSize : string;
34
39
  export const utrechtAlertDialogMinBlockSize : string;