@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/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @utrecht/design-tokens
2
2
 
3
+ ## 3.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - 5902c57: Remove deprecated `utrecht-accordion__button--utrecht` class. It has been fully removed in this release.
8
+
9
+ ### Minor Changes
10
+
11
+ - 7a3b28b: Add the new Accordion style design tokens
12
+
13
+ ## 2.5.1
14
+
15
+ ### Patch Changes
16
+
17
+ - 965bf7d: Update Backdrop background-color value
18
+
3
19
  ## 2.5.0
4
20
 
5
21
  ### Minor Changes
package/dist/_mixin-theme.scss CHANGED
@@ -388,16 +388,23 @@
388
388
  --utrecht-backdrop-reduced-transparency-opacity: 0.98;
389
389
  --utrecht-backdrop-fade-in-animation-duration: 400ms;
390
390
  --utrecht-backdrop-opacity: 0.8;
391
+ --utrecht-backdrop-background-color: rgb(0 0 0 / 30%);
391
392
  --utrecht-article-max-inline-size: 780px;
392
393
  --utrecht-alert-icon-inset-block-start: 6px;
393
394
  --utrecht-alert-icon-size: 24px;
394
395
  --utrecht-alert-dialog-min-inline-size: 320px;
395
396
  --utrecht-alert-dialog-min-block-size: 100px;
396
397
  --utrecht-alert-dialog-max-block-size: 80vh;
397
- --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;
398
401
  --utrecht-accordion-button-icon-size: 24px;
399
- --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;
400
406
  --utrecht-accordion-button-border-width: 0;
407
+ --utrecht-accordion-button-border-color: transparent;
401
408
  --nl-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
402
409
  --nl-skip-link-text-decoration: var(--utrecht-link-text-decoration);
403
410
  --nl-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
@@ -912,7 +919,6 @@
912
919
  --utrecht-badge-counter-color: var(--utrecht-color-white); /* Default text color for badge components */
913
920
  --utrecht-badge-counter-background-color: var(--utrecht-color-red-40); /* Default background color for badge components */
914
921
  --utrecht-backdrop-color: var(--utrecht-color-black);
915
- --utrecht-backdrop-background-color: var(--utrecht-color-white);
916
922
  --utrecht-alert-icon-ok-color: var(--utrecht-color-green-40);
917
923
  --utrecht-alert-icon-warning-color: var(--utrecht-color-yellow-40);
918
924
  --utrecht-alert-icon-error-color: var(--utrecht-color-red-40);
@@ -934,29 +940,28 @@
934
940
  --utrecht-alert-color: var(--utrecht-color-black);
935
941
  --utrecht-alert-background-color: var(--utrecht-color-blue-90);
936
942
  --utrecht-alert-dialog-max-inline-size: var(--utrecht-article-max-inline-size);
943
+ --utrecht-accordion-section-hover-border-color: var(--utrecht-color-grey-95);
944
+ --utrecht-accordion-section-border-color: var(--utrecht-color-grey-90);
937
945
  --utrecht-accordion-section-margin-block-start: var(--utrecht-space-block-2xs);
938
946
  --utrecht-accordion-panel-padding-inline-end: var(--utrecht-space-block-md);
939
- --utrecht-accordion-panel-padding-inline-start: var(--utrecht-space-block-md);
947
+ --utrecht-accordion-panel-padding-inline-start: var(--utrecht-space-block-2xl);
940
948
  --utrecht-accordion-panel-padding-block-end: var(--utrecht-space-block-xs);
941
949
  --utrecht-accordion-panel-padding-block-start: var(--utrecht-space-block-xs);
942
- --utrecht-accordion-panel-border-color: var(--utrecht-color-grey-95);
943
950
  --utrecht-accordion-button-icon-utrecht-background-color: var(--utrecht-color-yellow-50);
951
+ --utrecht-accordion-button-focus-visible-color: var(--utrecht-color-blue-40);
952
+ --utrecht-accordion-button-focus-visible-background-color: var(--utrecht-color-yellow-80);
953
+ --utrecht-accordion-button-focus-visible-border-color: var(--utrecht-color-grey-90);
944
954
  --utrecht-accordion-button-focus-color: var(--utrecht-color-grey-10);
945
- --utrecht-accordion-button-focus-border-color: var(--utrecht-color-grey-95);
946
- --utrecht-accordion-button-focus-background-color: var(--utrecht-color-grey-80);
955
+ --utrecht-accordion-button-focus-background-color: var(--utrecht-color-white);
947
956
  --utrecht-accordion-button-active-color: var(--utrecht-color-grey-10);
948
- --utrecht-accordion-button-active-border-color: var(--utrecht-color-grey-95);
949
- --utrecht-accordion-button-active-background-color: var(--utrecht-color-grey-80);
950
- --utrecht-accordion-button-hover-color: var(--utrecht-color-grey-10);
951
- --utrecht-accordion-button-hover-border-color: var(--utrecht-color-grey-95);
952
- --utrecht-accordion-button-border-color: var(--utrecht-color-grey-95);
953
- --utrecht-accordion-button-color: var(--utrecht-color-grey-10);
954
- --utrecht-accordion-button-background-color: var(--utrecht-color-grey-95);
955
- --utrecht-accordion-button-padding-block-start: var(--utrecht-space-block-xs);
956
- --utrecht-accordion-button-padding-block-end: var(--utrecht-space-block-xs);
957
- --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-md);
958
- --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-md);
959
- --utrecht-accordion-row-gap: var(--utrecht-space-block-xs);
957
+ --utrecht-accordion-button-active-background-color: var(--utrecht-color-white);
958
+ --utrecht-accordion-button-hover-color: var(--utrecht-color-blue-40);
959
+ --utrecht-accordion-button-hover-background-color: var(--utrecht-color-grey-95);
960
+ --utrecht-accordion-button-color: var(--utrecht-color-blue-40);
961
+ --utrecht-accordion-button-padding-block-start: var(--utrecht-space-block-md);
962
+ --utrecht-accordion-button-padding-block-end: var(--utrecht-space-block-md);
963
+ --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-xs);
964
+ --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-xs);
960
965
  --signalen-modal-dialog-color: var(--utrecht-body-color);
961
966
  --signalen-modal-dialog-background-color: var(--utrecht-body-background-color);
962
967
  --of-progress-indicator-background-color: var(--utrecht-document-background-color);
package/dist/_mixin.scss CHANGED
@@ -388,16 +388,23 @@
388
388
  --utrecht-backdrop-reduced-transparency-opacity: 0.98;
389
389
  --utrecht-backdrop-fade-in-animation-duration: 400ms;
390
390
  --utrecht-backdrop-opacity: 0.8;
391
+ --utrecht-backdrop-background-color: rgb(0 0 0 / 30%);
391
392
  --utrecht-article-max-inline-size: 780px;
392
393
  --utrecht-alert-icon-inset-block-start: 6px;
393
394
  --utrecht-alert-icon-size: 24px;
394
395
  --utrecht-alert-dialog-min-inline-size: 320px;
395
396
  --utrecht-alert-dialog-min-block-size: 100px;
396
397
  --utrecht-alert-dialog-max-block-size: 80vh;
397
- --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;
398
401
  --utrecht-accordion-button-icon-size: 24px;
399
- --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;
400
406
  --utrecht-accordion-button-border-width: 0;
407
+ --utrecht-accordion-button-border-color: transparent;
401
408
  --nl-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
402
409
  --nl-skip-link-text-decoration: var(--utrecht-link-text-decoration);
403
410
  --nl-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
@@ -912,7 +919,6 @@
912
919
  --utrecht-badge-counter-color: var(--utrecht-color-white); /* Default text color for badge components */
913
920
  --utrecht-badge-counter-background-color: var(--utrecht-color-red-40); /* Default background color for badge components */
914
921
  --utrecht-backdrop-color: var(--utrecht-color-black);
915
- --utrecht-backdrop-background-color: var(--utrecht-color-white);
916
922
  --utrecht-alert-icon-ok-color: var(--utrecht-color-green-40);
917
923
  --utrecht-alert-icon-warning-color: var(--utrecht-color-yellow-40);
918
924
  --utrecht-alert-icon-error-color: var(--utrecht-color-red-40);
@@ -934,29 +940,28 @@
934
940
  --utrecht-alert-color: var(--utrecht-color-black);
935
941
  --utrecht-alert-background-color: var(--utrecht-color-blue-90);
936
942
  --utrecht-alert-dialog-max-inline-size: var(--utrecht-article-max-inline-size);
943
+ --utrecht-accordion-section-hover-border-color: var(--utrecht-color-grey-95);
944
+ --utrecht-accordion-section-border-color: var(--utrecht-color-grey-90);
937
945
  --utrecht-accordion-section-margin-block-start: var(--utrecht-space-block-2xs);
938
946
  --utrecht-accordion-panel-padding-inline-end: var(--utrecht-space-block-md);
939
- --utrecht-accordion-panel-padding-inline-start: var(--utrecht-space-block-md);
947
+ --utrecht-accordion-panel-padding-inline-start: var(--utrecht-space-block-2xl);
940
948
  --utrecht-accordion-panel-padding-block-end: var(--utrecht-space-block-xs);
941
949
  --utrecht-accordion-panel-padding-block-start: var(--utrecht-space-block-xs);
942
- --utrecht-accordion-panel-border-color: var(--utrecht-color-grey-95);
943
950
  --utrecht-accordion-button-icon-utrecht-background-color: var(--utrecht-color-yellow-50);
951
+ --utrecht-accordion-button-focus-visible-color: var(--utrecht-color-blue-40);
952
+ --utrecht-accordion-button-focus-visible-background-color: var(--utrecht-color-yellow-80);
953
+ --utrecht-accordion-button-focus-visible-border-color: var(--utrecht-color-grey-90);
944
954
  --utrecht-accordion-button-focus-color: var(--utrecht-color-grey-10);
945
- --utrecht-accordion-button-focus-border-color: var(--utrecht-color-grey-95);
946
- --utrecht-accordion-button-focus-background-color: var(--utrecht-color-grey-80);
955
+ --utrecht-accordion-button-focus-background-color: var(--utrecht-color-white);
947
956
  --utrecht-accordion-button-active-color: var(--utrecht-color-grey-10);
948
- --utrecht-accordion-button-active-border-color: var(--utrecht-color-grey-95);
949
- --utrecht-accordion-button-active-background-color: var(--utrecht-color-grey-80);
950
- --utrecht-accordion-button-hover-color: var(--utrecht-color-grey-10);
951
- --utrecht-accordion-button-hover-border-color: var(--utrecht-color-grey-95);
952
- --utrecht-accordion-button-border-color: var(--utrecht-color-grey-95);
953
- --utrecht-accordion-button-color: var(--utrecht-color-grey-10);
954
- --utrecht-accordion-button-background-color: var(--utrecht-color-grey-95);
955
- --utrecht-accordion-button-padding-block-start: var(--utrecht-space-block-xs);
956
- --utrecht-accordion-button-padding-block-end: var(--utrecht-space-block-xs);
957
- --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-md);
958
- --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-md);
959
- --utrecht-accordion-row-gap: var(--utrecht-space-block-xs);
957
+ --utrecht-accordion-button-active-background-color: var(--utrecht-color-white);
958
+ --utrecht-accordion-button-hover-color: var(--utrecht-color-blue-40);
959
+ --utrecht-accordion-button-hover-background-color: var(--utrecht-color-grey-95);
960
+ --utrecht-accordion-button-color: var(--utrecht-color-blue-40);
961
+ --utrecht-accordion-button-padding-block-start: var(--utrecht-space-block-md);
962
+ --utrecht-accordion-button-padding-block-end: var(--utrecht-space-block-md);
963
+ --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-xs);
964
+ --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-xs);
960
965
  --signalen-modal-dialog-color: var(--utrecht-body-color);
961
966
  --signalen-modal-dialog-background-color: var(--utrecht-body-background-color);
962
967
  --of-progress-indicator-background-color: var(--utrecht-document-background-color);
package/dist/_variables.scss CHANGED
@@ -386,16 +386,23 @@ $utrecht-badge-counter-padding-block: 1ex; // Default block padding for badge co
386
386
  $utrecht-backdrop-reduced-transparency-opacity: 0.98;
387
387
  $utrecht-backdrop-fade-in-animation-duration: 400ms;
388
388
  $utrecht-backdrop-opacity: 0.8;
389
+ $utrecht-backdrop-background-color: rgb(0 0 0 / 30%);
389
390
  $utrecht-article-max-inline-size: 780px;
390
391
  $utrecht-alert-icon-inset-block-start: 6px;
391
392
  $utrecht-alert-icon-size: 24px;
392
393
  $utrecht-alert-dialog-min-inline-size: 320px;
393
394
  $utrecht-alert-dialog-min-block-size: 100px;
394
395
  $utrecht-alert-dialog-max-block-size: 80vh;
395
- $utrecht-accordion-panel-border-width: 2px;
396
+ $utrecht-accordion-section-border-width: 2px;
397
+ $utrecht-accordion-panel-border-width: 0;
398
+ $utrecht-accordion-panel-border-color: transparent;
396
399
  $utrecht-accordion-button-icon-size: 24px;
397
- $utrecht-accordion-button-hover-background-color: inherit;
400
+ $utrecht-accordion-button-focus-visible-border-width: 2px;
401
+ $utrecht-accordion-button-focus-border-color: transparent;
402
+ $utrecht-accordion-button-active-border-color: transparent;
403
+ $utrecht-accordion-button-hover-border-color: transparent;
398
404
  $utrecht-accordion-button-border-width: 0;
405
+ $utrecht-accordion-button-border-color: transparent;
399
406
  $nl-skip-link-focus-visible-text-decoration: $utrecht-link-focus-visible-text-decoration;
400
407
  $nl-skip-link-text-decoration: $utrecht-link-text-decoration;
401
408
  $nl-paragraph-small-font-size: $utrecht-typography-scale-sm-font-size;
@@ -910,7 +917,6 @@ $utrecht-badge-counter-font-size: $utrecht-typography-scale-md-font-size;
910
917
  $utrecht-badge-counter-color: $utrecht-color-white; // Default text color for badge components
911
918
  $utrecht-badge-counter-background-color: $utrecht-color-red-40; // Default background color for badge components
912
919
  $utrecht-backdrop-color: $utrecht-color-black;
913
- $utrecht-backdrop-background-color: $utrecht-color-white;
914
920
  $utrecht-alert-icon-ok-color: $utrecht-color-green-40;
915
921
  $utrecht-alert-icon-warning-color: $utrecht-color-yellow-40;
916
922
  $utrecht-alert-icon-error-color: $utrecht-color-red-40;
@@ -932,29 +938,28 @@ $utrecht-alert-column-gap: $utrecht-space-column-md;
932
938
  $utrecht-alert-color: $utrecht-color-black;
933
939
  $utrecht-alert-background-color: $utrecht-color-blue-90;
934
940
  $utrecht-alert-dialog-max-inline-size: $utrecht-article-max-inline-size;
941
+ $utrecht-accordion-section-hover-border-color: $utrecht-color-grey-95;
942
+ $utrecht-accordion-section-border-color: $utrecht-color-grey-90;
935
943
  $utrecht-accordion-section-margin-block-start: $utrecht-space-block-2xs;
936
944
  $utrecht-accordion-panel-padding-inline-end: $utrecht-space-block-md;
937
- $utrecht-accordion-panel-padding-inline-start: $utrecht-space-block-md;
945
+ $utrecht-accordion-panel-padding-inline-start: $utrecht-space-block-2xl;
938
946
  $utrecht-accordion-panel-padding-block-end: $utrecht-space-block-xs;
939
947
  $utrecht-accordion-panel-padding-block-start: $utrecht-space-block-xs;
940
- $utrecht-accordion-panel-border-color: $utrecht-color-grey-95;
941
948
  $utrecht-accordion-button-icon-utrecht-background-color: $utrecht-color-yellow-50;
949
+ $utrecht-accordion-button-focus-visible-color: $utrecht-color-blue-40;
950
+ $utrecht-accordion-button-focus-visible-background-color: $utrecht-color-yellow-80;
951
+ $utrecht-accordion-button-focus-visible-border-color: $utrecht-color-grey-90;
942
952
  $utrecht-accordion-button-focus-color: $utrecht-color-grey-10;
943
- $utrecht-accordion-button-focus-border-color: $utrecht-color-grey-95;
944
- $utrecht-accordion-button-focus-background-color: $utrecht-color-grey-80;
953
+ $utrecht-accordion-button-focus-background-color: $utrecht-color-white;
945
954
  $utrecht-accordion-button-active-color: $utrecht-color-grey-10;
946
- $utrecht-accordion-button-active-border-color: $utrecht-color-grey-95;
947
- $utrecht-accordion-button-active-background-color: $utrecht-color-grey-80;
948
- $utrecht-accordion-button-hover-color: $utrecht-color-grey-10;
949
- $utrecht-accordion-button-hover-border-color: $utrecht-color-grey-95;
950
- $utrecht-accordion-button-border-color: $utrecht-color-grey-95;
951
- $utrecht-accordion-button-color: $utrecht-color-grey-10;
952
- $utrecht-accordion-button-background-color: $utrecht-color-grey-95;
953
- $utrecht-accordion-button-padding-block-start: $utrecht-space-block-xs;
954
- $utrecht-accordion-button-padding-block-end: $utrecht-space-block-xs;
955
- $utrecht-accordion-button-padding-inline-start: $utrecht-space-block-md;
956
- $utrecht-accordion-button-padding-inline-end: $utrecht-space-block-md;
957
- $utrecht-accordion-row-gap: $utrecht-space-block-xs;
955
+ $utrecht-accordion-button-active-background-color: $utrecht-color-white;
956
+ $utrecht-accordion-button-hover-color: $utrecht-color-blue-40;
957
+ $utrecht-accordion-button-hover-background-color: $utrecht-color-grey-95;
958
+ $utrecht-accordion-button-color: $utrecht-color-blue-40;
959
+ $utrecht-accordion-button-padding-block-start: $utrecht-space-block-md;
960
+ $utrecht-accordion-button-padding-block-end: $utrecht-space-block-md;
961
+ $utrecht-accordion-button-padding-inline-start: $utrecht-space-block-xs;
962
+ $utrecht-accordion-button-padding-inline-end: $utrecht-space-block-xs;
958
963
  $signalen-modal-dialog-color: $utrecht-body-color;
959
964
  $signalen-modal-dialog-background-color: $utrecht-body-background-color;
960
965
  $of-progress-indicator-background-color: $utrecht-document-background-color;
package/dist/dark/_mixin-theme.scss CHANGED
@@ -397,10 +397,16 @@
397
397
  --utrecht-alert-dialog-min-inline-size: 320px;
398
398
  --utrecht-alert-dialog-min-block-size: 100px;
399
399
  --utrecht-alert-dialog-max-block-size: 80vh;
400
- --utrecht-accordion-panel-border-width: 2px;
400
+ --utrecht-accordion-section-border-width: 2px;
401
+ --utrecht-accordion-panel-border-width: 0;
402
+ --utrecht-accordion-panel-border-color: transparent;
401
403
  --utrecht-accordion-button-icon-size: 24px;
402
- --utrecht-accordion-button-hover-background-color: inherit;
404
+ --utrecht-accordion-button-focus-visible-border-width: 2px;
405
+ --utrecht-accordion-button-focus-border-color: transparent;
406
+ --utrecht-accordion-button-active-border-color: transparent;
407
+ --utrecht-accordion-button-hover-border-color: transparent;
403
408
  --utrecht-accordion-button-border-width: 0;
409
+ --utrecht-accordion-button-border-color: transparent;
404
410
  --nl-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
405
411
  --nl-skip-link-text-decoration: var(--utrecht-link-text-decoration);
406
412
  --nl-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
@@ -935,29 +941,28 @@
935
941
  --utrecht-alert-color: var(--utrecht-color-white);
936
942
  --utrecht-alert-background-color: var(--utrecht-color-blue-35);
937
943
  --utrecht-alert-dialog-max-inline-size: var(--utrecht-article-max-inline-size);
944
+ --utrecht-accordion-section-hover-border-color: var(--utrecht-color-grey-95);
945
+ --utrecht-accordion-section-border-color: var(--utrecht-color-grey-90);
938
946
  --utrecht-accordion-section-margin-block-start: var(--utrecht-space-block-2xs);
939
947
  --utrecht-accordion-panel-padding-inline-end: var(--utrecht-space-block-md);
940
- --utrecht-accordion-panel-padding-inline-start: var(--utrecht-space-block-md);
948
+ --utrecht-accordion-panel-padding-inline-start: var(--utrecht-space-block-2xl);
941
949
  --utrecht-accordion-panel-padding-block-end: var(--utrecht-space-block-xs);
942
950
  --utrecht-accordion-panel-padding-block-start: var(--utrecht-space-block-xs);
943
- --utrecht-accordion-panel-border-color: var(--utrecht-color-grey-95);
944
951
  --utrecht-accordion-button-icon-utrecht-background-color: var(--utrecht-color-yellow-50);
952
+ --utrecht-accordion-button-focus-visible-color: var(--utrecht-color-blue-40);
953
+ --utrecht-accordion-button-focus-visible-background-color: var(--utrecht-color-yellow-80);
954
+ --utrecht-accordion-button-focus-visible-border-color: var(--utrecht-color-grey-90);
945
955
  --utrecht-accordion-button-focus-color: var(--utrecht-color-grey-10);
946
- --utrecht-accordion-button-focus-border-color: var(--utrecht-color-grey-95);
947
- --utrecht-accordion-button-focus-background-color: var(--utrecht-color-grey-80);
956
+ --utrecht-accordion-button-focus-background-color: var(--utrecht-color-white);
948
957
  --utrecht-accordion-button-active-color: var(--utrecht-color-grey-10);
949
- --utrecht-accordion-button-active-border-color: var(--utrecht-color-grey-95);
950
- --utrecht-accordion-button-active-background-color: var(--utrecht-color-grey-80);
951
- --utrecht-accordion-button-hover-color: var(--utrecht-color-grey-10);
952
- --utrecht-accordion-button-hover-border-color: var(--utrecht-color-grey-95);
953
- --utrecht-accordion-button-border-color: var(--utrecht-color-grey-95);
954
- --utrecht-accordion-button-color: var(--utrecht-color-grey-10);
955
- --utrecht-accordion-button-background-color: var(--utrecht-color-grey-95);
956
- --utrecht-accordion-button-padding-block-start: var(--utrecht-space-block-xs);
957
- --utrecht-accordion-button-padding-block-end: var(--utrecht-space-block-xs);
958
- --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-md);
959
- --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-md);
960
- --utrecht-accordion-row-gap: var(--utrecht-space-block-xs);
958
+ --utrecht-accordion-button-active-background-color: var(--utrecht-color-white);
959
+ --utrecht-accordion-button-hover-color: var(--utrecht-color-blue-40);
960
+ --utrecht-accordion-button-hover-background-color: var(--utrecht-color-grey-95);
961
+ --utrecht-accordion-button-color: var(--utrecht-color-blue-40);
962
+ --utrecht-accordion-button-padding-block-start: var(--utrecht-space-block-md);
963
+ --utrecht-accordion-button-padding-block-end: var(--utrecht-space-block-md);
964
+ --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-xs);
965
+ --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-xs);
961
966
  --signalen-modal-dialog-color: var(--utrecht-body-color);
962
967
  --signalen-modal-dialog-background-color: var(--utrecht-body-background-color);
963
968
  --of-progress-indicator-background-color: var(--utrecht-document-background-color);
package/dist/dark/_mixin.scss CHANGED
@@ -397,10 +397,16 @@
397
397
  --utrecht-alert-dialog-min-inline-size: 320px;
398
398
  --utrecht-alert-dialog-min-block-size: 100px;
399
399
  --utrecht-alert-dialog-max-block-size: 80vh;
400
- --utrecht-accordion-panel-border-width: 2px;
400
+ --utrecht-accordion-section-border-width: 2px;
401
+ --utrecht-accordion-panel-border-width: 0;
402
+ --utrecht-accordion-panel-border-color: transparent;
401
403
  --utrecht-accordion-button-icon-size: 24px;
402
- --utrecht-accordion-button-hover-background-color: inherit;
404
+ --utrecht-accordion-button-focus-visible-border-width: 2px;
405
+ --utrecht-accordion-button-focus-border-color: transparent;
406
+ --utrecht-accordion-button-active-border-color: transparent;
407
+ --utrecht-accordion-button-hover-border-color: transparent;
403
408
  --utrecht-accordion-button-border-width: 0;
409
+ --utrecht-accordion-button-border-color: transparent;
404
410
  --nl-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
405
411
  --nl-skip-link-text-decoration: var(--utrecht-link-text-decoration);
406
412
  --nl-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
@@ -935,29 +941,28 @@
935
941
  --utrecht-alert-color: var(--utrecht-color-white);
936
942
  --utrecht-alert-background-color: var(--utrecht-color-blue-35);
937
943
  --utrecht-alert-dialog-max-inline-size: var(--utrecht-article-max-inline-size);
944
+ --utrecht-accordion-section-hover-border-color: var(--utrecht-color-grey-95);
945
+ --utrecht-accordion-section-border-color: var(--utrecht-color-grey-90);
938
946
  --utrecht-accordion-section-margin-block-start: var(--utrecht-space-block-2xs);
939
947
  --utrecht-accordion-panel-padding-inline-end: var(--utrecht-space-block-md);
940
- --utrecht-accordion-panel-padding-inline-start: var(--utrecht-space-block-md);
948
+ --utrecht-accordion-panel-padding-inline-start: var(--utrecht-space-block-2xl);
941
949
  --utrecht-accordion-panel-padding-block-end: var(--utrecht-space-block-xs);
942
950
  --utrecht-accordion-panel-padding-block-start: var(--utrecht-space-block-xs);
943
- --utrecht-accordion-panel-border-color: var(--utrecht-color-grey-95);
944
951
  --utrecht-accordion-button-icon-utrecht-background-color: var(--utrecht-color-yellow-50);
952
+ --utrecht-accordion-button-focus-visible-color: var(--utrecht-color-blue-40);
953
+ --utrecht-accordion-button-focus-visible-background-color: var(--utrecht-color-yellow-80);
954
+ --utrecht-accordion-button-focus-visible-border-color: var(--utrecht-color-grey-90);
945
955
  --utrecht-accordion-button-focus-color: var(--utrecht-color-grey-10);
946
- --utrecht-accordion-button-focus-border-color: var(--utrecht-color-grey-95);
947
- --utrecht-accordion-button-focus-background-color: var(--utrecht-color-grey-80);
956
+ --utrecht-accordion-button-focus-background-color: var(--utrecht-color-white);
948
957
  --utrecht-accordion-button-active-color: var(--utrecht-color-grey-10);
949
- --utrecht-accordion-button-active-border-color: var(--utrecht-color-grey-95);
950
- --utrecht-accordion-button-active-background-color: var(--utrecht-color-grey-80);
951
- --utrecht-accordion-button-hover-color: var(--utrecht-color-grey-10);
952
- --utrecht-accordion-button-hover-border-color: var(--utrecht-color-grey-95);
953
- --utrecht-accordion-button-border-color: var(--utrecht-color-grey-95);
954
- --utrecht-accordion-button-color: var(--utrecht-color-grey-10);
955
- --utrecht-accordion-button-background-color: var(--utrecht-color-grey-95);
956
- --utrecht-accordion-button-padding-block-start: var(--utrecht-space-block-xs);
957
- --utrecht-accordion-button-padding-block-end: var(--utrecht-space-block-xs);
958
- --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-md);
959
- --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-md);
960
- --utrecht-accordion-row-gap: var(--utrecht-space-block-xs);
958
+ --utrecht-accordion-button-active-background-color: var(--utrecht-color-white);
959
+ --utrecht-accordion-button-hover-color: var(--utrecht-color-blue-40);
960
+ --utrecht-accordion-button-hover-background-color: var(--utrecht-color-grey-95);
961
+ --utrecht-accordion-button-color: var(--utrecht-color-blue-40);
962
+ --utrecht-accordion-button-padding-block-start: var(--utrecht-space-block-md);
963
+ --utrecht-accordion-button-padding-block-end: var(--utrecht-space-block-md);
964
+ --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-xs);
965
+ --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-xs);
961
966
  --signalen-modal-dialog-color: var(--utrecht-body-color);
962
967
  --signalen-modal-dialog-background-color: var(--utrecht-body-background-color);
963
968
  --of-progress-indicator-background-color: var(--utrecht-document-background-color);
package/dist/dark/_variables.scss CHANGED
@@ -395,10 +395,16 @@ $utrecht-alert-warning-background-color: #665200;
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 @@ $utrecht-alert-column-gap: $utrecht-space-column-md;
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/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",
package/dist/dark/index.css CHANGED
@@ -402,10 +402,16 @@
402
402
  --utrecht-alert-dialog-min-inline-size: 320px;
403
403
  --utrecht-alert-dialog-min-block-size: 100px;
404
404
  --utrecht-alert-dialog-max-block-size: 80vh;
405
- --utrecht-accordion-panel-border-width: 2px;
405
+ --utrecht-accordion-section-border-width: 2px;
406
+ --utrecht-accordion-panel-border-width: 0;
407
+ --utrecht-accordion-panel-border-color: transparent;
406
408
  --utrecht-accordion-button-icon-size: 24px;
407
- --utrecht-accordion-button-hover-background-color: inherit;
409
+ --utrecht-accordion-button-focus-visible-border-width: 2px;
410
+ --utrecht-accordion-button-focus-border-color: transparent;
411
+ --utrecht-accordion-button-active-border-color: transparent;
412
+ --utrecht-accordion-button-hover-border-color: transparent;
408
413
  --utrecht-accordion-button-border-width: 0;
414
+ --utrecht-accordion-button-border-color: transparent;
409
415
  --nl-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
410
416
  --nl-skip-link-text-decoration: var(--utrecht-link-text-decoration);
411
417
  --nl-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
@@ -940,29 +946,28 @@
940
946
  --utrecht-alert-color: var(--utrecht-color-white);
941
947
  --utrecht-alert-background-color: var(--utrecht-color-blue-35);
942
948
  --utrecht-alert-dialog-max-inline-size: var(--utrecht-article-max-inline-size);
949
+ --utrecht-accordion-section-hover-border-color: var(--utrecht-color-grey-95);
950
+ --utrecht-accordion-section-border-color: var(--utrecht-color-grey-90);
943
951
  --utrecht-accordion-section-margin-block-start: var(--utrecht-space-block-2xs);
944
952
  --utrecht-accordion-panel-padding-inline-end: var(--utrecht-space-block-md);
945
- --utrecht-accordion-panel-padding-inline-start: var(--utrecht-space-block-md);
953
+ --utrecht-accordion-panel-padding-inline-start: var(--utrecht-space-block-2xl);
946
954
  --utrecht-accordion-panel-padding-block-end: var(--utrecht-space-block-xs);
947
955
  --utrecht-accordion-panel-padding-block-start: var(--utrecht-space-block-xs);
948
- --utrecht-accordion-panel-border-color: var(--utrecht-color-grey-95);
949
956
  --utrecht-accordion-button-icon-utrecht-background-color: var(--utrecht-color-yellow-50);
957
+ --utrecht-accordion-button-focus-visible-color: var(--utrecht-color-blue-40);
958
+ --utrecht-accordion-button-focus-visible-background-color: var(--utrecht-color-yellow-80);
959
+ --utrecht-accordion-button-focus-visible-border-color: var(--utrecht-color-grey-90);
950
960
  --utrecht-accordion-button-focus-color: var(--utrecht-color-grey-10);
951
- --utrecht-accordion-button-focus-border-color: var(--utrecht-color-grey-95);
952
- --utrecht-accordion-button-focus-background-color: var(--utrecht-color-grey-80);
961
+ --utrecht-accordion-button-focus-background-color: var(--utrecht-color-white);
953
962
  --utrecht-accordion-button-active-color: var(--utrecht-color-grey-10);
954
- --utrecht-accordion-button-active-border-color: var(--utrecht-color-grey-95);
955
- --utrecht-accordion-button-active-background-color: var(--utrecht-color-grey-80);
956
- --utrecht-accordion-button-hover-color: var(--utrecht-color-grey-10);
957
- --utrecht-accordion-button-hover-border-color: var(--utrecht-color-grey-95);
958
- --utrecht-accordion-button-border-color: var(--utrecht-color-grey-95);
959
- --utrecht-accordion-button-color: var(--utrecht-color-grey-10);
960
- --utrecht-accordion-button-background-color: var(--utrecht-color-grey-95);
961
- --utrecht-accordion-button-padding-block-start: var(--utrecht-space-block-xs);
962
- --utrecht-accordion-button-padding-block-end: var(--utrecht-space-block-xs);
963
- --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-md);
964
- --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-md);
965
- --utrecht-accordion-row-gap: var(--utrecht-space-block-xs);
963
+ --utrecht-accordion-button-active-background-color: var(--utrecht-color-white);
964
+ --utrecht-accordion-button-hover-color: var(--utrecht-color-blue-40);
965
+ --utrecht-accordion-button-hover-background-color: var(--utrecht-color-grey-95);
966
+ --utrecht-accordion-button-color: var(--utrecht-color-blue-40);
967
+ --utrecht-accordion-button-padding-block-start: var(--utrecht-space-block-md);
968
+ --utrecht-accordion-button-padding-block-end: var(--utrecht-space-block-md);
969
+ --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-xs);
970
+ --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-xs);
966
971
  --signalen-modal-dialog-color: var(--utrecht-body-color);
967
972
  --signalen-modal-dialog-background-color: var(--utrecht-body-background-color);
968
973
  --of-progress-indicator-background-color: var(--utrecht-document-background-color);
package/dist/dark/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;