@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/root.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/theme-prince-xml.css 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/theme.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);