@utrecht/design-tokens 6.0.0 → 6.1.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 +6 -0
  2. package/dist/_mixin-theme.scss +27 -2
  3. package/dist/_mixin.scss +27 -2
  4. package/dist/_variables.scss +27 -2
  5. package/dist/dark/_mixin-theme.scss +27 -2
  6. package/dist/dark/_mixin.scss +27 -2
  7. package/dist/dark/_variables.scss +27 -2
  8. package/dist/dark/index.cjs +27 -2
  9. package/dist/dark/index.css +28 -2
  10. package/dist/dark/index.d.ts +25 -0
  11. package/dist/dark/index.flat.json +28 -3
  12. package/dist/dark/index.json +733 -28
  13. package/dist/dark/index.mjs +27 -2
  14. package/dist/dark/index.tokens.json +64 -3
  15. package/dist/dark/list.json +733 -28
  16. package/dist/dark/list.mjs +733 -28
  17. package/dist/dark/property.css +23 -1
  18. package/dist/dark/root.css +27 -2
  19. package/dist/dark/theme-prince-xml.css +27 -2
  20. package/dist/dark/theme.css +27 -2
  21. package/dist/dark/tokens.cjs +645 -4
  22. package/dist/dark/tokens.d.ts +61 -0
  23. package/dist/dark/tokens.json +745 -4
  24. package/dist/dark/variables.cjs +27 -2
  25. package/dist/dark/variables.css +27 -2
  26. package/dist/dark/variables.d.ts +25 -0
  27. package/dist/dark/variables.json +28 -3
  28. package/dist/dark/variables.less +27 -2
  29. package/dist/dark/variables.mjs +27 -2
  30. package/dist/index.cjs +27 -2
  31. package/dist/index.css +55 -4
  32. package/dist/index.d.ts +25 -0
  33. package/dist/index.flat.json +28 -3
  34. package/dist/index.json +733 -28
  35. package/dist/index.mjs +27 -2
  36. package/dist/index.tokens.json +64 -3
  37. package/dist/list.json +733 -28
  38. package/dist/list.mjs +733 -28
  39. package/dist/property.css +23 -1
  40. package/dist/root.css +27 -2
  41. package/dist/theme-prince-xml.css +27 -2
  42. package/dist/theme.css +27 -2
  43. package/dist/tokens.cjs +645 -4
  44. package/dist/tokens.d.ts +61 -0
  45. package/dist/tokens.json +745 -4
  46. package/dist/variables.cjs +27 -2
  47. package/dist/variables.css +27 -2
  48. package/dist/variables.d.ts +25 -0
  49. package/dist/variables.json +28 -3
  50. package/dist/variables.less +27 -2
  51. package/dist/variables.mjs +27 -2
  52. package/package.json +1 -1
  53. package/src/component/utrecht/ordered-list.tokens.json +3 -0
  54. package/src/component/utrecht/unordered-list.tokens.json +123 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @utrecht/design-tokens
2
2
 
3
+ ## 6.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - ef2fc90: Added ability to change markers of nested unordered lists. Refactored spacing on unordered lists (including nested).
8
+
3
9
  ## 6.0.0
4
10
 
5
11
  ### Major Changes
package/dist/_mixin-theme.scss CHANGED
@@ -349,8 +349,18 @@
349
349
  --utrecht-toptask-link-hover-transform-scale: 1.02;
350
350
  --utrecht-toptask-link-icon-size: 2.25rem;
351
351
  --utrecht-unordered-list-margin-block-end: 0;
352
- --utrecht-unordered-list-item-margin-block-start: 0.25rem;
353
- --utrecht-unordered-list-item-margin-block-end: 0.25rem;
352
+ --utrecht-unordered-list-padding-inline-start: 0;
353
+ --utrecht-unordered-list-level-1-list-style-type: "●";
354
+ --utrecht-unordered-list-level-2-list-style-type: "○";
355
+ --utrecht-unordered-list-level-3-list-style-type: "◆";
356
+ --utrecht-unordered-list-level-4-list-style-type: "◇";
357
+ --utrecht-unordered-list-level-5-list-style-type: "■";
358
+ --utrecht-unordered-list-level-6-list-style-type: "□";
359
+ --utrecht-unordered-list-level-7-list-style-type: "▲";
360
+ --utrecht-unordered-list-level-7-marker-font-size: 0.75rem;
361
+ --utrecht-unordered-list-level-8-list-style-type: "△";
362
+ --utrecht-unordered-list-level-8-marker-font-size: 0.75rem;
363
+ --utrecht-unordered-list-nested-padding-inline-start: 0;
354
364
  --utrecht-color-red-20: hsl(0 100% 20%); /** donker rood */
355
365
  --utrecht-color-red-30: hsl(0 100% 30%); /** hover rood */
356
366
  --utrecht-color-red-40: hsl(0 100% 40%); /** basis rood #cc0000 */
@@ -870,6 +880,7 @@
870
880
  --utrecht-navigation-marker-color: var(--utrecht-color-grey-80);
871
881
  --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /** Default block padding for badge components */
872
882
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /** Default inline padding color for badge components */
883
+ --utrecht-ordered-list-line-height: var(--utrecht-typography-line-height-md);
873
884
  --utrecht-page-body-content-background-color: var(--utrecht-color-white);
874
885
  --utrecht-page-body-content-color: var(--utrecht-color-black);
875
886
  --utrecht-page-footer-color: var(--utrecht-color-white);
@@ -993,8 +1004,22 @@
993
1004
  --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
994
1005
  --utrecht-toptask-link-padding-inline-end: var(--utrecht-space-inline-xl);
995
1006
  --utrecht-toptask-link-padding-inline-start: var(--utrecht-space-inline-xl);
1007
+ --utrecht-unordered-list-font-size: var(--utrecht-typography-scale-md-font-size);
1008
+ --utrecht-unordered-list-line-height: var(--utrecht-typography-line-height-md);
996
1009
  --utrecht-unordered-list-margin-block-start: var(--utrecht-space-block-md);
1010
+ --utrecht-unordered-list-item-margin-block-start: var(--utrecht-space-block-2xs);
1011
+ --utrecht-unordered-list-item-margin-block-end: var(--utrecht-space-block-2xs);
1012
+ --utrecht-unordered-list-item-padding-inline-start: var(--utrecht-space-text-md);
997
1013
  --utrecht-unordered-list-marker-color: var(--utrecht-color-red-40);
1014
+ --utrecht-unordered-list-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1015
+ --utrecht-unordered-list-level-1-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1016
+ --utrecht-unordered-list-level-2-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1017
+ --utrecht-unordered-list-level-3-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1018
+ --utrecht-unordered-list-level-4-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1019
+ --utrecht-unordered-list-level-5-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1020
+ --utrecht-unordered-list-level-6-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1021
+ --utrecht-unordered-list-margin-inline-start: var(--utrecht-space-text-md);
1022
+ --utrecht-unordered-list-center-padding-inline-start: var(--utrecht-space-text-md);
998
1023
  --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
999
1024
  --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
1000
1025
  --utrecht-toptask-nav-gap: var(--utrecht-space-column-md);
package/dist/_mixin.scss CHANGED
@@ -349,8 +349,18 @@
349
349
  --utrecht-toptask-link-hover-transform-scale: 1.02;
350
350
  --utrecht-toptask-link-icon-size: 2.25rem;
351
351
  --utrecht-unordered-list-margin-block-end: 0;
352
- --utrecht-unordered-list-item-margin-block-start: 0.25rem;
353
- --utrecht-unordered-list-item-margin-block-end: 0.25rem;
352
+ --utrecht-unordered-list-padding-inline-start: 0;
353
+ --utrecht-unordered-list-level-1-list-style-type: "●";
354
+ --utrecht-unordered-list-level-2-list-style-type: "○";
355
+ --utrecht-unordered-list-level-3-list-style-type: "◆";
356
+ --utrecht-unordered-list-level-4-list-style-type: "◇";
357
+ --utrecht-unordered-list-level-5-list-style-type: "■";
358
+ --utrecht-unordered-list-level-6-list-style-type: "□";
359
+ --utrecht-unordered-list-level-7-list-style-type: "▲";
360
+ --utrecht-unordered-list-level-7-marker-font-size: 0.75rem;
361
+ --utrecht-unordered-list-level-8-list-style-type: "△";
362
+ --utrecht-unordered-list-level-8-marker-font-size: 0.75rem;
363
+ --utrecht-unordered-list-nested-padding-inline-start: 0;
354
364
  --utrecht-color-red-20: hsl(0 100% 20%); /** donker rood */
355
365
  --utrecht-color-red-30: hsl(0 100% 30%); /** hover rood */
356
366
  --utrecht-color-red-40: hsl(0 100% 40%); /** basis rood #cc0000 */
@@ -870,6 +880,7 @@
870
880
  --utrecht-navigation-marker-color: var(--utrecht-color-grey-80);
871
881
  --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /** Default block padding for badge components */
872
882
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /** Default inline padding color for badge components */
883
+ --utrecht-ordered-list-line-height: var(--utrecht-typography-line-height-md);
873
884
  --utrecht-page-body-content-background-color: var(--utrecht-color-white);
874
885
  --utrecht-page-body-content-color: var(--utrecht-color-black);
875
886
  --utrecht-page-footer-color: var(--utrecht-color-white);
@@ -993,8 +1004,22 @@
993
1004
  --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
994
1005
  --utrecht-toptask-link-padding-inline-end: var(--utrecht-space-inline-xl);
995
1006
  --utrecht-toptask-link-padding-inline-start: var(--utrecht-space-inline-xl);
1007
+ --utrecht-unordered-list-font-size: var(--utrecht-typography-scale-md-font-size);
1008
+ --utrecht-unordered-list-line-height: var(--utrecht-typography-line-height-md);
996
1009
  --utrecht-unordered-list-margin-block-start: var(--utrecht-space-block-md);
1010
+ --utrecht-unordered-list-item-margin-block-start: var(--utrecht-space-block-2xs);
1011
+ --utrecht-unordered-list-item-margin-block-end: var(--utrecht-space-block-2xs);
1012
+ --utrecht-unordered-list-item-padding-inline-start: var(--utrecht-space-text-md);
997
1013
  --utrecht-unordered-list-marker-color: var(--utrecht-color-red-40);
1014
+ --utrecht-unordered-list-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1015
+ --utrecht-unordered-list-level-1-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1016
+ --utrecht-unordered-list-level-2-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1017
+ --utrecht-unordered-list-level-3-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1018
+ --utrecht-unordered-list-level-4-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1019
+ --utrecht-unordered-list-level-5-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1020
+ --utrecht-unordered-list-level-6-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1021
+ --utrecht-unordered-list-margin-inline-start: var(--utrecht-space-text-md);
1022
+ --utrecht-unordered-list-center-padding-inline-start: var(--utrecht-space-text-md);
998
1023
  --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
999
1024
  --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
1000
1025
  --utrecht-toptask-nav-gap: var(--utrecht-space-column-md);
package/dist/_variables.scss CHANGED
@@ -347,8 +347,18 @@ $utrecht-toptask-link-min-inline-size: 15rem;
347
347
  $utrecht-toptask-link-hover-transform-scale: 1.02;
348
348
  $utrecht-toptask-link-icon-size: 2.25rem;
349
349
  $utrecht-unordered-list-margin-block-end: 0;
350
- $utrecht-unordered-list-item-margin-block-start: 0.25rem;
351
- $utrecht-unordered-list-item-margin-block-end: 0.25rem;
350
+ $utrecht-unordered-list-padding-inline-start: 0;
351
+ $utrecht-unordered-list-level-1-list-style-type: "●";
352
+ $utrecht-unordered-list-level-2-list-style-type: "○";
353
+ $utrecht-unordered-list-level-3-list-style-type: "◆";
354
+ $utrecht-unordered-list-level-4-list-style-type: "◇";
355
+ $utrecht-unordered-list-level-5-list-style-type: "■";
356
+ $utrecht-unordered-list-level-6-list-style-type: "□";
357
+ $utrecht-unordered-list-level-7-list-style-type: "▲";
358
+ $utrecht-unordered-list-level-7-marker-font-size: 0.75rem;
359
+ $utrecht-unordered-list-level-8-list-style-type: "△";
360
+ $utrecht-unordered-list-level-8-marker-font-size: 0.75rem;
361
+ $utrecht-unordered-list-nested-padding-inline-start: 0;
352
362
  $utrecht-color-red-20: hsl(0 100% 20%); // donker rood
353
363
  $utrecht-color-red-30: hsl(0 100% 30%); // hover rood
354
364
  $utrecht-color-red-40: hsl(0 100% 40%); // basis rood #cc0000
@@ -868,6 +878,7 @@ $utrecht-navigation-list-mobile-padding-inline-start: $utrecht-space-inline-md;
868
878
  $utrecht-navigation-marker-color: $utrecht-color-grey-80;
869
879
  $utrecht-number-badge-padding-block: $nl-number-badge-padding-block; // Default block padding for badge components
870
880
  $utrecht-number-badge-padding-inline: $nl-number-badge-padding-inline; // Default inline padding color for badge components
881
+ $utrecht-ordered-list-line-height: $utrecht-typography-line-height-md;
871
882
  $utrecht-page-body-content-background-color: $utrecht-color-white;
872
883
  $utrecht-page-body-content-color: $utrecht-color-black;
873
884
  $utrecht-page-footer-color: $utrecht-color-white;
@@ -991,8 +1002,22 @@ $utrecht-toptask-link-padding-block-end: $utrecht-space-block-xl;
991
1002
  $utrecht-toptask-link-padding-block-start: $utrecht-space-block-xl;
992
1003
  $utrecht-toptask-link-padding-inline-end: $utrecht-space-inline-xl;
993
1004
  $utrecht-toptask-link-padding-inline-start: $utrecht-space-inline-xl;
1005
+ $utrecht-unordered-list-font-size: $utrecht-typography-scale-md-font-size;
1006
+ $utrecht-unordered-list-line-height: $utrecht-typography-line-height-md;
994
1007
  $utrecht-unordered-list-margin-block-start: $utrecht-space-block-md;
1008
+ $utrecht-unordered-list-item-margin-block-start: $utrecht-space-block-2xs;
1009
+ $utrecht-unordered-list-item-margin-block-end: $utrecht-space-block-2xs;
1010
+ $utrecht-unordered-list-item-padding-inline-start: $utrecht-space-text-md;
995
1011
  $utrecht-unordered-list-marker-color: $utrecht-color-red-40;
1012
+ $utrecht-unordered-list-marker-font-size: $utrecht-typography-scale-md-font-size;
1013
+ $utrecht-unordered-list-level-1-marker-font-size: $utrecht-typography-scale-md-font-size;
1014
+ $utrecht-unordered-list-level-2-marker-font-size: $utrecht-typography-scale-md-font-size;
1015
+ $utrecht-unordered-list-level-3-marker-font-size: $utrecht-typography-scale-md-font-size;
1016
+ $utrecht-unordered-list-level-4-marker-font-size: $utrecht-typography-scale-md-font-size;
1017
+ $utrecht-unordered-list-level-5-marker-font-size: $utrecht-typography-scale-md-font-size;
1018
+ $utrecht-unordered-list-level-6-marker-font-size: $utrecht-typography-scale-md-font-size;
1019
+ $utrecht-unordered-list-margin-inline-start: $utrecht-space-text-md;
1020
+ $utrecht-unordered-list-center-padding-inline-start: $utrecht-space-text-md;
996
1021
  $utrecht-menulijst-item-color: $utrecht-color-blue-35;
997
1022
  $utrecht-menulijst-item-hover-color: $utrecht-color-blue-40;
998
1023
  $utrecht-toptask-nav-gap: $utrecht-space-column-md;
package/dist/dark/_mixin-theme.scss CHANGED
@@ -351,8 +351,18 @@
351
351
  --utrecht-toptask-link-hover-transform-scale: 1.02;
352
352
  --utrecht-toptask-link-icon-size: 2.25rem;
353
353
  --utrecht-unordered-list-margin-block-end: 0;
354
- --utrecht-unordered-list-item-margin-block-start: 0.25rem;
355
- --utrecht-unordered-list-item-margin-block-end: 0.25rem;
354
+ --utrecht-unordered-list-padding-inline-start: 0;
355
+ --utrecht-unordered-list-level-1-list-style-type: "●";
356
+ --utrecht-unordered-list-level-2-list-style-type: "○";
357
+ --utrecht-unordered-list-level-3-list-style-type: "◆";
358
+ --utrecht-unordered-list-level-4-list-style-type: "◇";
359
+ --utrecht-unordered-list-level-5-list-style-type: "■";
360
+ --utrecht-unordered-list-level-6-list-style-type: "□";
361
+ --utrecht-unordered-list-level-7-list-style-type: "▲";
362
+ --utrecht-unordered-list-level-7-marker-font-size: 0.75rem;
363
+ --utrecht-unordered-list-level-8-list-style-type: "△";
364
+ --utrecht-unordered-list-level-8-marker-font-size: 0.75rem;
365
+ --utrecht-unordered-list-nested-padding-inline-start: 0;
356
366
  --utrecht-color-red-20: hsl(0 100% 20%); /** donker rood */
357
367
  --utrecht-color-red-30: hsl(0 100% 30%); /** hover rood */
358
368
  --utrecht-color-red-40: hsl(0 100% 40%); /** basis rood #cc0000 */
@@ -869,6 +879,7 @@
869
879
  --utrecht-navigation-marker-color: var(--utrecht-color-grey-80);
870
880
  --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /** Default block padding for badge components */
871
881
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /** Default inline padding color for badge components */
882
+ --utrecht-ordered-list-line-height: var(--utrecht-typography-line-height-md);
872
883
  --utrecht-page-body-content-background-color: var(--utrecht-color-white);
873
884
  --utrecht-page-body-content-color: var(--utrecht-color-black);
874
885
  --utrecht-page-footer-color: var(--utrecht-color-white);
@@ -994,8 +1005,22 @@
994
1005
  --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
995
1006
  --utrecht-toptask-link-padding-inline-end: var(--utrecht-space-inline-xl);
996
1007
  --utrecht-toptask-link-padding-inline-start: var(--utrecht-space-inline-xl);
1008
+ --utrecht-unordered-list-font-size: var(--utrecht-typography-scale-md-font-size);
1009
+ --utrecht-unordered-list-line-height: var(--utrecht-typography-line-height-md);
997
1010
  --utrecht-unordered-list-margin-block-start: var(--utrecht-space-block-md);
1011
+ --utrecht-unordered-list-item-margin-block-start: var(--utrecht-space-block-2xs);
1012
+ --utrecht-unordered-list-item-margin-block-end: var(--utrecht-space-block-2xs);
1013
+ --utrecht-unordered-list-item-padding-inline-start: var(--utrecht-space-text-md);
998
1014
  --utrecht-unordered-list-marker-color: var(--utrecht-color-red-40);
1015
+ --utrecht-unordered-list-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1016
+ --utrecht-unordered-list-level-1-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1017
+ --utrecht-unordered-list-level-2-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1018
+ --utrecht-unordered-list-level-3-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1019
+ --utrecht-unordered-list-level-4-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1020
+ --utrecht-unordered-list-level-5-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1021
+ --utrecht-unordered-list-level-6-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1022
+ --utrecht-unordered-list-margin-inline-start: var(--utrecht-space-text-md);
1023
+ --utrecht-unordered-list-center-padding-inline-start: var(--utrecht-space-text-md);
999
1024
  --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
1000
1025
  --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
1001
1026
  --utrecht-toptask-nav-gap: var(--utrecht-space-column-md);
package/dist/dark/_mixin.scss CHANGED
@@ -351,8 +351,18 @@
351
351
  --utrecht-toptask-link-hover-transform-scale: 1.02;
352
352
  --utrecht-toptask-link-icon-size: 2.25rem;
353
353
  --utrecht-unordered-list-margin-block-end: 0;
354
- --utrecht-unordered-list-item-margin-block-start: 0.25rem;
355
- --utrecht-unordered-list-item-margin-block-end: 0.25rem;
354
+ --utrecht-unordered-list-padding-inline-start: 0;
355
+ --utrecht-unordered-list-level-1-list-style-type: "●";
356
+ --utrecht-unordered-list-level-2-list-style-type: "○";
357
+ --utrecht-unordered-list-level-3-list-style-type: "◆";
358
+ --utrecht-unordered-list-level-4-list-style-type: "◇";
359
+ --utrecht-unordered-list-level-5-list-style-type: "■";
360
+ --utrecht-unordered-list-level-6-list-style-type: "□";
361
+ --utrecht-unordered-list-level-7-list-style-type: "▲";
362
+ --utrecht-unordered-list-level-7-marker-font-size: 0.75rem;
363
+ --utrecht-unordered-list-level-8-list-style-type: "△";
364
+ --utrecht-unordered-list-level-8-marker-font-size: 0.75rem;
365
+ --utrecht-unordered-list-nested-padding-inline-start: 0;
356
366
  --utrecht-color-red-20: hsl(0 100% 20%); /** donker rood */
357
367
  --utrecht-color-red-30: hsl(0 100% 30%); /** hover rood */
358
368
  --utrecht-color-red-40: hsl(0 100% 40%); /** basis rood #cc0000 */
@@ -869,6 +879,7 @@
869
879
  --utrecht-navigation-marker-color: var(--utrecht-color-grey-80);
870
880
  --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /** Default block padding for badge components */
871
881
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /** Default inline padding color for badge components */
882
+ --utrecht-ordered-list-line-height: var(--utrecht-typography-line-height-md);
872
883
  --utrecht-page-body-content-background-color: var(--utrecht-color-white);
873
884
  --utrecht-page-body-content-color: var(--utrecht-color-black);
874
885
  --utrecht-page-footer-color: var(--utrecht-color-white);
@@ -994,8 +1005,22 @@
994
1005
  --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
995
1006
  --utrecht-toptask-link-padding-inline-end: var(--utrecht-space-inline-xl);
996
1007
  --utrecht-toptask-link-padding-inline-start: var(--utrecht-space-inline-xl);
1008
+ --utrecht-unordered-list-font-size: var(--utrecht-typography-scale-md-font-size);
1009
+ --utrecht-unordered-list-line-height: var(--utrecht-typography-line-height-md);
997
1010
  --utrecht-unordered-list-margin-block-start: var(--utrecht-space-block-md);
1011
+ --utrecht-unordered-list-item-margin-block-start: var(--utrecht-space-block-2xs);
1012
+ --utrecht-unordered-list-item-margin-block-end: var(--utrecht-space-block-2xs);
1013
+ --utrecht-unordered-list-item-padding-inline-start: var(--utrecht-space-text-md);
998
1014
  --utrecht-unordered-list-marker-color: var(--utrecht-color-red-40);
1015
+ --utrecht-unordered-list-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1016
+ --utrecht-unordered-list-level-1-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1017
+ --utrecht-unordered-list-level-2-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1018
+ --utrecht-unordered-list-level-3-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1019
+ --utrecht-unordered-list-level-4-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1020
+ --utrecht-unordered-list-level-5-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1021
+ --utrecht-unordered-list-level-6-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1022
+ --utrecht-unordered-list-margin-inline-start: var(--utrecht-space-text-md);
1023
+ --utrecht-unordered-list-center-padding-inline-start: var(--utrecht-space-text-md);
999
1024
  --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
1000
1025
  --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
1001
1026
  --utrecht-toptask-nav-gap: var(--utrecht-space-column-md);
package/dist/dark/_variables.scss CHANGED
@@ -349,8 +349,18 @@ $utrecht-toptask-link-min-inline-size: 15rem;
349
349
  $utrecht-toptask-link-hover-transform-scale: 1.02;
350
350
  $utrecht-toptask-link-icon-size: 2.25rem;
351
351
  $utrecht-unordered-list-margin-block-end: 0;
352
- $utrecht-unordered-list-item-margin-block-start: 0.25rem;
353
- $utrecht-unordered-list-item-margin-block-end: 0.25rem;
352
+ $utrecht-unordered-list-padding-inline-start: 0;
353
+ $utrecht-unordered-list-level-1-list-style-type: "●";
354
+ $utrecht-unordered-list-level-2-list-style-type: "○";
355
+ $utrecht-unordered-list-level-3-list-style-type: "◆";
356
+ $utrecht-unordered-list-level-4-list-style-type: "◇";
357
+ $utrecht-unordered-list-level-5-list-style-type: "■";
358
+ $utrecht-unordered-list-level-6-list-style-type: "□";
359
+ $utrecht-unordered-list-level-7-list-style-type: "▲";
360
+ $utrecht-unordered-list-level-7-marker-font-size: 0.75rem;
361
+ $utrecht-unordered-list-level-8-list-style-type: "△";
362
+ $utrecht-unordered-list-level-8-marker-font-size: 0.75rem;
363
+ $utrecht-unordered-list-nested-padding-inline-start: 0;
354
364
  $utrecht-color-red-20: hsl(0 100% 20%); // donker rood
355
365
  $utrecht-color-red-30: hsl(0 100% 30%); // hover rood
356
366
  $utrecht-color-red-40: hsl(0 100% 40%); // basis rood #cc0000
@@ -867,6 +877,7 @@ $utrecht-navigation-list-mobile-padding-inline-start: $utrecht-space-inline-md;
867
877
  $utrecht-navigation-marker-color: $utrecht-color-grey-80;
868
878
  $utrecht-number-badge-padding-block: $nl-number-badge-padding-block; // Default block padding for badge components
869
879
  $utrecht-number-badge-padding-inline: $nl-number-badge-padding-inline; // Default inline padding color for badge components
880
+ $utrecht-ordered-list-line-height: $utrecht-typography-line-height-md;
870
881
  $utrecht-page-body-content-background-color: $utrecht-color-white;
871
882
  $utrecht-page-body-content-color: $utrecht-color-black;
872
883
  $utrecht-page-footer-color: $utrecht-color-white;
@@ -992,8 +1003,22 @@ $utrecht-toptask-link-padding-block-end: $utrecht-space-block-xl;
992
1003
  $utrecht-toptask-link-padding-block-start: $utrecht-space-block-xl;
993
1004
  $utrecht-toptask-link-padding-inline-end: $utrecht-space-inline-xl;
994
1005
  $utrecht-toptask-link-padding-inline-start: $utrecht-space-inline-xl;
1006
+ $utrecht-unordered-list-font-size: $utrecht-typography-scale-md-font-size;
1007
+ $utrecht-unordered-list-line-height: $utrecht-typography-line-height-md;
995
1008
  $utrecht-unordered-list-margin-block-start: $utrecht-space-block-md;
1009
+ $utrecht-unordered-list-item-margin-block-start: $utrecht-space-block-2xs;
1010
+ $utrecht-unordered-list-item-margin-block-end: $utrecht-space-block-2xs;
1011
+ $utrecht-unordered-list-item-padding-inline-start: $utrecht-space-text-md;
996
1012
  $utrecht-unordered-list-marker-color: $utrecht-color-red-40;
1013
+ $utrecht-unordered-list-marker-font-size: $utrecht-typography-scale-md-font-size;
1014
+ $utrecht-unordered-list-level-1-marker-font-size: $utrecht-typography-scale-md-font-size;
1015
+ $utrecht-unordered-list-level-2-marker-font-size: $utrecht-typography-scale-md-font-size;
1016
+ $utrecht-unordered-list-level-3-marker-font-size: $utrecht-typography-scale-md-font-size;
1017
+ $utrecht-unordered-list-level-4-marker-font-size: $utrecht-typography-scale-md-font-size;
1018
+ $utrecht-unordered-list-level-5-marker-font-size: $utrecht-typography-scale-md-font-size;
1019
+ $utrecht-unordered-list-level-6-marker-font-size: $utrecht-typography-scale-md-font-size;
1020
+ $utrecht-unordered-list-margin-inline-start: $utrecht-space-text-md;
1021
+ $utrecht-unordered-list-center-padding-inline-start: $utrecht-space-text-md;
997
1022
  $utrecht-menulijst-item-color: $utrecht-color-blue-35;
998
1023
  $utrecht-menulijst-item-hover-color: $utrecht-color-blue-40;
999
1024
  $utrecht-toptask-nav-gap: $utrecht-space-column-md;
package/dist/dark/index.cjs CHANGED
@@ -780,6 +780,7 @@ module.exports = {
780
780
  utrechtNumberBadgePaddingInline: "1ex",
781
781
  utrechtNumberDataPositiveColor: "green",
782
782
  utrechtNumberDataNegativeColor: "red",
783
+ utrechtOrderedListLineHeight: "1.5",
783
784
  utrechtOrderedListMarginBlockStart: "0",
784
785
  utrechtOrderedListMarginBlockEnd: "1em",
785
786
  utrechtOrderedListPaddingInlineStart: "28.8px",
@@ -1055,11 +1056,35 @@ module.exports = {
1055
1056
  utrechtToptaskLinkHoverColor: "hsl(0 0% 15%)",
1056
1057
  utrechtToptaskLinkHoverTransformScale: "1.02",
1057
1058
  utrechtToptaskLinkIconSize: "2.25rem",
1059
+ utrechtUnorderedListFontSize: "1rem",
1060
+ utrechtUnorderedListLineHeight: "1.5",
1058
1061
  utrechtUnorderedListMarginBlockStart: "16px",
1059
1062
  utrechtUnorderedListMarginBlockEnd: "0",
1060
- utrechtUnorderedListItemMarginBlockStart: "0.25rem",
1061
- utrechtUnorderedListItemMarginBlockEnd: "0.25rem",
1063
+ utrechtUnorderedListPaddingInlineStart: "0",
1064
+ utrechtUnorderedListItemMarginBlockStart: "4px",
1065
+ utrechtUnorderedListItemMarginBlockEnd: "4px",
1066
+ utrechtUnorderedListItemPaddingInlineStart: "1ch",
1062
1067
  utrechtUnorderedListMarkerColor: "hsl(0 100% 40%)",
1068
+ utrechtUnorderedListMarkerFontSize: "1rem",
1069
+ utrechtUnorderedListLevel1ListStyleType: '"●"',
1070
+ utrechtUnorderedListLevel1MarkerFontSize: "1rem",
1071
+ utrechtUnorderedListLevel2ListStyleType: '"○"',
1072
+ utrechtUnorderedListLevel2MarkerFontSize: "1rem",
1073
+ utrechtUnorderedListLevel3ListStyleType: '"◆"',
1074
+ utrechtUnorderedListLevel3MarkerFontSize: "1rem",
1075
+ utrechtUnorderedListLevel4ListStyleType: '"◇"',
1076
+ utrechtUnorderedListLevel4MarkerFontSize: "1rem",
1077
+ utrechtUnorderedListLevel5ListStyleType: '"■"',
1078
+ utrechtUnorderedListLevel5MarkerFontSize: "1rem",
1079
+ utrechtUnorderedListLevel6ListStyleType: '"□"',
1080
+ utrechtUnorderedListLevel6MarkerFontSize: "1rem",
1081
+ utrechtUnorderedListLevel7ListStyleType: '"▲"',
1082
+ utrechtUnorderedListLevel7MarkerFontSize: "0.75rem",
1083
+ utrechtUnorderedListLevel8ListStyleType: '"△"',
1084
+ utrechtUnorderedListLevel8MarkerFontSize: "0.75rem",
1085
+ utrechtUnorderedListMarginInlineStart: "1ch",
1086
+ utrechtUnorderedListNestedPaddingInlineStart: "0",
1087
+ utrechtUnorderedListCenterPaddingInlineStart: "1ch",
1063
1088
  utrechtColorRed20: "hsl(0 100% 20%)",
1064
1089
  utrechtColorRed30: "hsl(0 100% 30%)",
1065
1090
  utrechtColorRed40: "hsl(0 100% 40%)",
package/dist/dark/index.css CHANGED
@@ -1,3 +1,4 @@
1
+ @charset "UTF-8";
1
2
  /**
2
3
  * @license SEE LICENSE.md
3
4
  * Copyright (c) 2021 Gemeente Utrecht
@@ -356,8 +357,18 @@
356
357
  --utrecht-toptask-link-hover-transform-scale: 1.02;
357
358
  --utrecht-toptask-link-icon-size: 2.25rem;
358
359
  --utrecht-unordered-list-margin-block-end: 0;
359
- --utrecht-unordered-list-item-margin-block-start: 0.25rem;
360
- --utrecht-unordered-list-item-margin-block-end: 0.25rem;
360
+ --utrecht-unordered-list-padding-inline-start: 0;
361
+ --utrecht-unordered-list-level-1-list-style-type: "●";
362
+ --utrecht-unordered-list-level-2-list-style-type: "○";
363
+ --utrecht-unordered-list-level-3-list-style-type: "◆";
364
+ --utrecht-unordered-list-level-4-list-style-type: "◇";
365
+ --utrecht-unordered-list-level-5-list-style-type: "■";
366
+ --utrecht-unordered-list-level-6-list-style-type: "□";
367
+ --utrecht-unordered-list-level-7-list-style-type: "▲";
368
+ --utrecht-unordered-list-level-7-marker-font-size: 0.75rem;
369
+ --utrecht-unordered-list-level-8-list-style-type: "△";
370
+ --utrecht-unordered-list-level-8-marker-font-size: 0.75rem;
371
+ --utrecht-unordered-list-nested-padding-inline-start: 0;
361
372
  --utrecht-color-red-20: hsl(0 100% 20%); /** donker rood */
362
373
  --utrecht-color-red-30: hsl(0 100% 30%); /** hover rood */
363
374
  --utrecht-color-red-40: hsl(0 100% 40%); /** basis rood #cc0000 */
@@ -874,6 +885,7 @@
874
885
  --utrecht-navigation-marker-color: var(--utrecht-color-grey-80);
875
886
  --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /** Default block padding for badge components */
876
887
  --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /** Default inline padding color for badge components */
888
+ --utrecht-ordered-list-line-height: var(--utrecht-typography-line-height-md);
877
889
  --utrecht-page-body-content-background-color: var(--utrecht-color-white);
878
890
  --utrecht-page-body-content-color: var(--utrecht-color-black);
879
891
  --utrecht-page-footer-color: var(--utrecht-color-white);
@@ -999,8 +1011,22 @@
999
1011
  --utrecht-toptask-link-padding-block-start: var(--utrecht-space-block-xl);
1000
1012
  --utrecht-toptask-link-padding-inline-end: var(--utrecht-space-inline-xl);
1001
1013
  --utrecht-toptask-link-padding-inline-start: var(--utrecht-space-inline-xl);
1014
+ --utrecht-unordered-list-font-size: var(--utrecht-typography-scale-md-font-size);
1015
+ --utrecht-unordered-list-line-height: var(--utrecht-typography-line-height-md);
1002
1016
  --utrecht-unordered-list-margin-block-start: var(--utrecht-space-block-md);
1017
+ --utrecht-unordered-list-item-margin-block-start: var(--utrecht-space-block-2xs);
1018
+ --utrecht-unordered-list-item-margin-block-end: var(--utrecht-space-block-2xs);
1019
+ --utrecht-unordered-list-item-padding-inline-start: var(--utrecht-space-text-md);
1003
1020
  --utrecht-unordered-list-marker-color: var(--utrecht-color-red-40);
1021
+ --utrecht-unordered-list-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1022
+ --utrecht-unordered-list-level-1-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1023
+ --utrecht-unordered-list-level-2-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1024
+ --utrecht-unordered-list-level-3-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1025
+ --utrecht-unordered-list-level-4-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1026
+ --utrecht-unordered-list-level-5-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1027
+ --utrecht-unordered-list-level-6-marker-font-size: var(--utrecht-typography-scale-md-font-size);
1028
+ --utrecht-unordered-list-margin-inline-start: var(--utrecht-space-text-md);
1029
+ --utrecht-unordered-list-center-padding-inline-start: var(--utrecht-space-text-md);
1004
1030
  --utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
1005
1031
  --utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
1006
1032
  --utrecht-toptask-nav-gap: var(--utrecht-space-column-md);
package/dist/dark/index.d.ts CHANGED
@@ -849,6 +849,7 @@ export const utrechtNumberBadgePaddingBlock: string;
849
849
  export const utrechtNumberBadgePaddingInline: string;
850
850
  export const utrechtNumberDataPositiveColor: string;
851
851
  export const utrechtNumberDataNegativeColor: string;
852
+ export const utrechtOrderedListLineHeight: string;
852
853
  export const utrechtOrderedListMarginBlockStart: number;
853
854
  export const utrechtOrderedListMarginBlockEnd: string;
854
855
  export const utrechtOrderedListPaddingInlineStart: string;
@@ -1123,11 +1124,35 @@ export const utrechtToptaskLinkHoverBackgroundColor: string;
1123
1124
  export const utrechtToptaskLinkHoverColor: string;
1124
1125
  export const utrechtToptaskLinkHoverTransformScale: string;
1125
1126
  export const utrechtToptaskLinkIconSize: string;
1127
+ export const utrechtUnorderedListFontSize: string;
1128
+ export const utrechtUnorderedListLineHeight: string;
1126
1129
  export const utrechtUnorderedListMarginBlockStart: string;
1127
1130
  export const utrechtUnorderedListMarginBlockEnd: number;
1131
+ export const utrechtUnorderedListPaddingInlineStart: number;
1128
1132
  export const utrechtUnorderedListItemMarginBlockStart: string;
1129
1133
  export const utrechtUnorderedListItemMarginBlockEnd: string;
1134
+ export const utrechtUnorderedListItemPaddingInlineStart: string;
1130
1135
  export const utrechtUnorderedListMarkerColor: string;
1136
+ export const utrechtUnorderedListMarkerFontSize: string;
1137
+ export const utrechtUnorderedListLevel1ListStyleType: string;
1138
+ export const utrechtUnorderedListLevel1MarkerFontSize: string;
1139
+ export const utrechtUnorderedListLevel2ListStyleType: string;
1140
+ export const utrechtUnorderedListLevel2MarkerFontSize: string;
1141
+ export const utrechtUnorderedListLevel3ListStyleType: string;
1142
+ export const utrechtUnorderedListLevel3MarkerFontSize: string;
1143
+ export const utrechtUnorderedListLevel4ListStyleType: string;
1144
+ export const utrechtUnorderedListLevel4MarkerFontSize: string;
1145
+ export const utrechtUnorderedListLevel5ListStyleType: string;
1146
+ export const utrechtUnorderedListLevel5MarkerFontSize: string;
1147
+ export const utrechtUnorderedListLevel6ListStyleType: string;
1148
+ export const utrechtUnorderedListLevel6MarkerFontSize: string;
1149
+ export const utrechtUnorderedListLevel7ListStyleType: string;
1150
+ export const utrechtUnorderedListLevel7MarkerFontSize: string;
1151
+ export const utrechtUnorderedListLevel8ListStyleType: string;
1152
+ export const utrechtUnorderedListLevel8MarkerFontSize: string;
1153
+ export const utrechtUnorderedListMarginInlineStart: string;
1154
+ export const utrechtUnorderedListNestedPaddingInlineStart: string;
1155
+ export const utrechtUnorderedListCenterPaddingInlineStart: string;
1131
1156
  /** donker rood */
1132
1157
  export const utrechtColorRed20: string;
1133
1158
  /** hover rood */
package/dist/dark/index.flat.json CHANGED
@@ -883,6 +883,7 @@
883
883
  "utrechtOrderedListItemMarginBlockEnd": "0.25em",
884
884
  "utrechtOrderedListItemMarginBlockStart": "0.25em",
885
885
  "utrechtOrderedListItemPaddingInlineStart": "0",
886
+ "utrechtOrderedListLineHeight": "1.5",
886
887
  "utrechtOrderedListMarginBlockEnd": "1em",
887
888
  "utrechtOrderedListMarginBlockStart": "0",
888
889
  "utrechtOrderedListPaddingInlineStart": "28.8px",
@@ -1254,9 +1255,33 @@
1254
1255
  "utrechtTypographyWeightScaleMediumFontWeight": "500",
1255
1256
  "utrechtTypographyWeightScaleNormalFontWeight": "400",
1256
1257
  "utrechtTypographyWeightScaleSemiboldFontWeight": "600",
1257
- "utrechtUnorderedListItemMarginBlockEnd": "0.25rem",
1258
- "utrechtUnorderedListItemMarginBlockStart": "0.25rem",
1258
+ "utrechtUnorderedListCenterPaddingInlineStart": "1ch",
1259
+ "utrechtUnorderedListFontSize": "1rem",
1260
+ "utrechtUnorderedListItemMarginBlockEnd": "4px",
1261
+ "utrechtUnorderedListItemMarginBlockStart": "4px",
1262
+ "utrechtUnorderedListItemPaddingInlineStart": "1ch",
1263
+ "utrechtUnorderedListLevel1ListStyleType": "\"●\"",
1264
+ "utrechtUnorderedListLevel1MarkerFontSize": "1rem",
1265
+ "utrechtUnorderedListLevel2ListStyleType": "\"○\"",
1266
+ "utrechtUnorderedListLevel2MarkerFontSize": "1rem",
1267
+ "utrechtUnorderedListLevel3ListStyleType": "\"◆\"",
1268
+ "utrechtUnorderedListLevel3MarkerFontSize": "1rem",
1269
+ "utrechtUnorderedListLevel4ListStyleType": "\"◇\"",
1270
+ "utrechtUnorderedListLevel4MarkerFontSize": "1rem",
1271
+ "utrechtUnorderedListLevel5ListStyleType": "\"■\"",
1272
+ "utrechtUnorderedListLevel5MarkerFontSize": "1rem",
1273
+ "utrechtUnorderedListLevel6ListStyleType": "\"□\"",
1274
+ "utrechtUnorderedListLevel6MarkerFontSize": "1rem",
1275
+ "utrechtUnorderedListLevel7ListStyleType": "\"▲\"",
1276
+ "utrechtUnorderedListLevel7MarkerFontSize": "0.75rem",
1277
+ "utrechtUnorderedListLevel8ListStyleType": "\"△\"",
1278
+ "utrechtUnorderedListLevel8MarkerFontSize": "0.75rem",
1279
+ "utrechtUnorderedListLineHeight": "1.5",
1259
1280
  "utrechtUnorderedListMarginBlockEnd": "0",
1260
1281
  "utrechtUnorderedListMarginBlockStart": "16px",
1261
- "utrechtUnorderedListMarkerColor": "hsl(0 100% 40%)"
1282
+ "utrechtUnorderedListMarginInlineStart": "1ch",
1283
+ "utrechtUnorderedListMarkerColor": "hsl(0 100% 40%)",
1284
+ "utrechtUnorderedListMarkerFontSize": "1rem",
1285
+ "utrechtUnorderedListNestedPaddingInlineStart": "0",
1286
+ "utrechtUnorderedListPaddingInlineStart": "0"
1262
1287
  }