@utrecht/design-tokens 2.3.0 → 2.5.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 (83) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/_mixin-theme.scss +165 -76
  3. package/dist/_mixin.scss +165 -76
  4. package/dist/_variables.scss +165 -76
  5. package/dist/dark/_mixin-theme.scss +165 -76
  6. package/dist/dark/_mixin.scss +165 -76
  7. package/dist/dark/_variables.scss +165 -76
  8. package/dist/dark/index.cjs +104 -15
  9. package/dist/dark/index.css +165 -76
  10. package/dist/dark/index.d.ts +97 -8
  11. package/dist/dark/index.flat.json +102 -13
  12. package/dist/dark/index.json +11111 -9439
  13. package/dist/dark/index.mjs +103 -14
  14. package/dist/dark/index.tokens.json +369 -248
  15. package/dist/dark/list.json +11111 -9439
  16. package/dist/dark/list.mjs +11111 -9439
  17. package/dist/dark/property.css +19 -7
  18. package/dist/dark/root.css +164 -75
  19. package/dist/dark/theme-prince-xml.css +165 -76
  20. package/dist/dark/theme.css +164 -75
  21. package/dist/dark/tokens.cjs +2051 -347
  22. package/dist/dark/tokens.d.ts +255 -126
  23. package/dist/dark/tokens.json +2051 -347
  24. package/dist/dark/variables.cjs +104 -15
  25. package/dist/dark/variables.css +164 -75
  26. package/dist/dark/variables.d.ts +97 -8
  27. package/dist/dark/variables.json +102 -13
  28. package/dist/dark/variables.less +165 -76
  29. package/dist/dark/variables.mjs +103 -14
  30. package/dist/index.cjs +104 -15
  31. package/dist/index.css +330 -152
  32. package/dist/index.d.ts +97 -8
  33. package/dist/index.flat.json +102 -13
  34. package/dist/index.json +2175 -503
  35. package/dist/index.mjs +103 -14
  36. package/dist/index.tokens.json +369 -248
  37. package/dist/list.json +2175 -503
  38. package/dist/list.mjs +2175 -503
  39. package/dist/property.css +19 -7
  40. package/dist/root.css +164 -75
  41. package/dist/theme-prince-xml.css +165 -76
  42. package/dist/theme.css +164 -75
  43. package/dist/tokens.cjs +2051 -347
  44. package/dist/tokens.d.ts +255 -126
  45. package/dist/tokens.json +2051 -347
  46. package/dist/variables.cjs +104 -15
  47. package/dist/variables.css +164 -75
  48. package/dist/variables.d.ts +97 -8
  49. package/dist/variables.json +102 -13
  50. package/dist/variables.less +165 -76
  51. package/dist/variables.mjs +103 -14
  52. package/package.json +1 -1
  53. package/src/component/nl/code-block.tokens.json +13 -0
  54. package/src/component/nl/code.tokens.json +11 -0
  55. package/src/component/nl/data-badge.tokens.json +22 -0
  56. package/src/component/nl/heading.tokens.json +48 -0
  57. package/src/component/nl/mark.tokens.json +8 -0
  58. package/src/component/nl/number-badge.tokens.json +23 -0
  59. package/src/component/nl/paragraph.tokens.json +20 -0
  60. package/src/component/nl/skip-link.tokens.json +16 -0
  61. package/src/component/signalen/signalen.tokens.json +17 -0
  62. package/src/component/utrecht/badge.tokens.json +5 -5
  63. package/src/component/utrecht/body.tokens.json +11 -0
  64. package/src/component/utrecht/code-block.tokens.json +9 -9
  65. package/src/component/utrecht/heading-1.tokens.json +4 -4
  66. package/src/component/utrecht/heading-2.tokens.json +4 -4
  67. package/src/component/utrecht/heading-3.tokens.json +4 -4
  68. package/src/component/utrecht/heading-4.tokens.json +4 -4
  69. package/src/component/utrecht/heading-5.tokens.json +4 -4
  70. package/src/component/utrecht/heading-6.tokens.json +4 -4
  71. package/src/component/utrecht/link-list.tokens.json +3 -0
  72. package/src/component/utrecht/mark.tokens.json +2 -2
  73. package/src/component/utrecht/nav-bar.tokens.json +0 -2
  74. package/src/component/utrecht/number-badge.tokens.json +6 -6
  75. package/src/component/utrecht/page-body.tokens.json +19 -0
  76. package/src/component/utrecht/page-footer.tokens.json +6 -4
  77. package/src/component/utrecht/page-header.tokens.json +14 -4
  78. package/src/component/utrecht/page.tokens.json +2 -2
  79. package/src/component/utrecht/paragraph.tokens.json +8 -8
  80. package/src/component/utrecht/root.tokens.json +8 -0
  81. package/src/component/utrecht/skip-link.tokens.json +10 -10
  82. package/project.json +0 -25
  83. package/src/component/utrecht/badge-data.tokens.json +0 -8
package/dist/tokens.d.ts CHANGED
@@ -317,20 +317,6 @@ declare const tokens: {
317
317
  "padding-block": DesignToken,
318
318
  "padding-inline": DesignToken
319
319
  },
320
- "badge-data": {
321
- "letter-spacing": {
322
- "$extensions": {
323
- "nl.nldesignsystem.css.property": {}
324
- }
325
- },
326
- "text-transform": {
327
- "$extensions": {
328
- "nl.nldesignsystem.css.property": {
329
- "syntax": {}
330
- }
331
- }
332
- }
333
- },
334
320
  "badge-list": {
335
321
  "row-gap": {
336
322
  "$extensions": {
@@ -518,28 +504,16 @@ declare const tokens: {
518
504
  "margin-block-end": DesignToken
519
505
  },
520
506
  "body": {
521
- "font-family": {
522
- "$extensions": {
523
- "nl.nldesignsystem.css.property": {}
524
- }
525
- },
526
- "font-size": {
527
- "$extensions": {
528
- "nl.nldesignsystem.css.property": {}
529
- }
530
- },
507
+ "font-family": DesignToken,
508
+ "font-size": DesignToken,
531
509
  "font-weight": {
532
510
  "$extensions": {
533
511
  "nl.nldesignsystem.css.property": {}
534
512
  }
535
513
  },
536
- "line-height": {
537
- "$extensions": {
538
- "nl.nldesignsystem.css.property": {
539
- "syntax": {}
540
- }
541
- }
542
- }
514
+ "line-height": DesignToken,
515
+ "background-color": DesignToken,
516
+ "color": DesignToken
543
517
  },
544
518
  "breadcrumb-nav": {
545
519
  "min-block-size": DesignToken,
@@ -1404,11 +1378,7 @@ declare const tokens: {
1404
1378
  "code-block": {
1405
1379
  "background-color": DesignToken,
1406
1380
  "color": DesignToken,
1407
- "font-family": {
1408
- "$extensions": {
1409
- "nl.nldesignsystem.css.property": {}
1410
- }
1411
- },
1381
+ "font-family": DesignToken,
1412
1382
  "font-size": DesignToken,
1413
1383
  "line-height": DesignToken,
1414
1384
  "margin-block-start": DesignToken,
@@ -1710,6 +1680,65 @@ declare const tokens: {
1710
1680
  }
1711
1681
  },
1712
1682
  "currency-data": {},
1683
+ "data-badge": {
1684
+ "background-color": {
1685
+ "$extensions": {
1686
+ "nl.nldesignsystem.css.property": {}
1687
+ }
1688
+ },
1689
+ "border-radius": {
1690
+ "$extensions": {
1691
+ "nl.nldesignsystem.css.property": {}
1692
+ }
1693
+ },
1694
+ "border-width": {
1695
+ "$extensions": {
1696
+ "nl.nldesignsystem.css.property": {}
1697
+ }
1698
+ },
1699
+ "color": {
1700
+ "$extensions": {
1701
+ "nl.nldesignsystem.css.property": {}
1702
+ }
1703
+ },
1704
+ "font-size": {
1705
+ "$extensions": {
1706
+ "nl.nldesignsystem.css.property": {}
1707
+ }
1708
+ },
1709
+ "font-weight": {
1710
+ "$extensions": {
1711
+ "nl.nldesignsystem.css.property": {}
1712
+ }
1713
+ },
1714
+ "line-height": {
1715
+ "$extensions": {
1716
+ "nl.nldesignsystem.css.property": {
1717
+ "syntax": {}
1718
+ }
1719
+ }
1720
+ },
1721
+ "min-block-size": {
1722
+ "$extensions": {
1723
+ "nl.nldesignsystem.css.property": {}
1724
+ }
1725
+ },
1726
+ "min-inline-size": {
1727
+ "$extensions": {
1728
+ "nl.nldesignsystem.css.property": {}
1729
+ }
1730
+ },
1731
+ "padding-block": {
1732
+ "$extensions": {
1733
+ "nl.nldesignsystem.css.property": {}
1734
+ }
1735
+ },
1736
+ "padding-inline": {
1737
+ "$extensions": {
1738
+ "nl.nldesignsystem.css.property": {}
1739
+ }
1740
+ }
1741
+ },
1713
1742
  "data-list": {
1714
1743
  "margin-block-end": DesignToken,
1715
1744
  "margin-block-start": DesignToken,
@@ -2512,11 +2541,7 @@ declare const tokens: {
2512
2541
  },
2513
2542
  "icon": {
2514
2543
  "size": DesignToken,
2515
- "inset-block-start": {
2516
- "$extensions": {
2517
- "nl.nldesignsystem.css.property": {}
2518
- }
2519
- }
2544
+ "inset-block-start": DesignToken
2520
2545
  }
2521
2546
  },
2522
2547
  "link-social": {
@@ -2903,8 +2928,16 @@ declare const tokens: {
2903
2928
  },
2904
2929
  "multiline-data": {},
2905
2930
  "nav-bar": {
2906
- "background-color": DesignToken,
2907
- "color": DesignToken,
2931
+ "background-color": {
2932
+ "$extensions": {
2933
+ "nl.nldesignsystem.css.property": {}
2934
+ }
2935
+ },
2936
+ "color": {
2937
+ "$extensions": {
2938
+ "nl.nldesignsystem.css.property": {}
2939
+ }
2940
+ },
2908
2941
  "content": {
2909
2942
  "background-color": {
2910
2943
  "$extensions": {
@@ -3062,37 +3095,23 @@ declare const tokens: {
3062
3095
  }
3063
3096
  },
3064
3097
  "content": {
3065
- "background-color": {
3066
- "$extensions": {
3067
- "nl.nldesignsystem.css.property": {}
3068
- }
3069
- },
3070
- "color": {
3071
- "$extensions": {
3072
- "nl.nldesignsystem.css.property": {}
3073
- }
3074
- },
3075
- "padding-block-start": {
3076
- "$extensions": {
3077
- "nl.nldesignsystem.css.property": {}
3078
- }
3079
- },
3080
- "padding-block-end": {
3081
- "$extensions": {
3082
- "nl.nldesignsystem.css.property": {}
3083
- }
3084
- },
3085
- "padding-inline-start": {
3086
- "$extensions": {
3087
- "nl.nldesignsystem.css.property": {}
3088
- }
3089
- },
3098
+ "background-color": DesignToken,
3099
+ "color": DesignToken,
3100
+ "padding-block-start": DesignToken,
3101
+ "padding-block-end": DesignToken,
3102
+ "padding-inline-start": DesignToken,
3090
3103
  "padding-inine-end": {
3091
3104
  "$extensions": {
3092
3105
  "nl.nldesignsystem.css.property": {}
3093
3106
  }
3094
- }
3095
- }
3107
+ },
3108
+ "max-inline-size": DesignToken,
3109
+ "padding-inline-end": DesignToken
3110
+ },
3111
+ "padding-inline-end": DesignToken,
3112
+ "padding-inline-start": DesignToken,
3113
+ "padding-block-end": DesignToken,
3114
+ "padding-block-start": DesignToken
3096
3115
  },
3097
3116
  "page-content": {
3098
3117
  "padding-block-start": DesignToken,
@@ -3112,10 +3131,26 @@ declare const tokens: {
3112
3131
  "color": DesignToken,
3113
3132
  "background-color": DesignToken,
3114
3133
  "background-image": DesignToken,
3115
- "padding-inline-end": DesignToken,
3116
- "padding-inline-start": DesignToken,
3117
- "padding-block-end": DesignToken,
3118
- "padding-block-start": DesignToken,
3134
+ "padding-inline-end": {
3135
+ "$extensions": {
3136
+ "nl.nldesignsystem.css.property": {}
3137
+ }
3138
+ },
3139
+ "padding-inline-start": {
3140
+ "$extensions": {
3141
+ "nl.nldesignsystem.css.property": {}
3142
+ }
3143
+ },
3144
+ "padding-block-end": {
3145
+ "$extensions": {
3146
+ "nl.nldesignsystem.css.property": {}
3147
+ }
3148
+ },
3149
+ "padding-block-start": {
3150
+ "$extensions": {
3151
+ "nl.nldesignsystem.css.property": {}
3152
+ }
3153
+ },
3119
3154
  "content": {
3120
3155
  "color": {
3121
3156
  "$extensions": {
@@ -3137,16 +3172,10 @@ declare const tokens: {
3137
3172
  "nl.nldesignsystem.css.property": {}
3138
3173
  }
3139
3174
  },
3140
- "padding-block-end": {
3141
- "$extensions": {
3142
- "nl.nldesignsystem.css.property": {}
3143
- }
3144
- },
3145
- "padding-block-start": {
3146
- "$extensions": {
3147
- "nl.nldesignsystem.css.property": {}
3148
- }
3149
- }
3175
+ "padding-block-end": DesignToken,
3176
+ "padding-block-start": DesignToken,
3177
+ "max-inline-size": DesignToken,
3178
+ "padding-inline": DesignToken
3150
3179
  }
3151
3180
  },
3152
3181
  "page-header": {
@@ -3170,36 +3199,14 @@ declare const tokens: {
3170
3199
  "padding-inline-start": DesignToken,
3171
3200
  "padding-inline-end": DesignToken,
3172
3201
  "content": {
3173
- "background-color": {
3174
- "$extensions": {
3175
- "nl.nldesignsystem.css.property": {}
3176
- }
3177
- },
3178
- "color": {
3179
- "$extensions": {
3180
- "nl.nldesignsystem.css.property": {}
3181
- }
3182
- },
3183
- "padding-block-start": {
3184
- "$extensions": {
3185
- "nl.nldesignsystem.css.property": {}
3186
- }
3187
- },
3188
- "padding-block-end": {
3189
- "$extensions": {
3190
- "nl.nldesignsystem.css.property": {}
3191
- }
3192
- },
3193
- "padding-inline-start": {
3194
- "$extensions": {
3195
- "nl.nldesignsystem.css.property": {}
3196
- }
3197
- },
3198
- "padding-inline-end": {
3199
- "$extensions": {
3200
- "nl.nldesignsystem.css.property": {}
3201
- }
3202
- }
3202
+ "background-color": DesignToken,
3203
+ "color": DesignToken,
3204
+ "padding-block-start": DesignToken,
3205
+ "padding-block-end": DesignToken,
3206
+ "padding-inline-start": DesignToken,
3207
+ "padding-inline-end": DesignToken,
3208
+ "max-inline-size": DesignToken,
3209
+ "padding-inline": DesignToken
3203
3210
  }
3204
3211
  },
3205
3212
  "page-layout": {},
@@ -3310,7 +3317,12 @@ declare const tokens: {
3310
3317
  "margin-block-start": DesignToken,
3311
3318
  "margin-block-end": DesignToken,
3312
3319
  "lead": {
3313
- "color": DesignToken,
3320
+ "color": {
3321
+ "$extensions": {
3322
+ "nl.nldesignsystem.css.property": {},
3323
+ "nl.nldesignsystem.fallback": {}
3324
+ }
3325
+ },
3314
3326
  "font-size": DesignToken,
3315
3327
  "font-weight": DesignToken,
3316
3328
  "line-height": DesignToken
@@ -3375,6 +3387,7 @@ declare const tokens: {
3375
3387
  "background-color": DesignToken,
3376
3388
  "border-color": DesignToken,
3377
3389
  "border-width": DesignToken,
3390
+ "color": DesignToken,
3378
3391
  "size": DesignToken,
3379
3392
  "margin-block-start": {
3380
3393
  "$extensions": {
@@ -3539,7 +3552,6 @@ declare const tokens: {
3539
3552
  }
3540
3553
  }
3541
3554
  },
3542
- "color": DesignToken,
3543
3555
  "border-radius": DesignToken
3544
3556
  },
3545
3557
  "rich-text": {
@@ -3560,16 +3572,8 @@ declare const tokens: {
3560
3572
  }
3561
3573
  },
3562
3574
  "root": {
3563
- "background-color": {
3564
- "$extensions": {
3565
- "nl.nldesignsystem.css.property": {}
3566
- }
3567
- },
3568
- "color": {
3569
- "$extensions": {
3570
- "nl.nldesignsystem.css.property": {}
3571
- }
3572
- },
3575
+ "background-color": DesignToken,
3576
+ "color": DesignToken,
3573
3577
  "font-family": {
3574
3578
  "$extensions": {
3575
3579
  "nl.nldesignsystem.css.property": {}
@@ -3940,6 +3944,11 @@ declare const tokens: {
3940
3944
  "nl.nldesignsystem.css.property": {}
3941
3945
  }
3942
3946
  },
3947
+ "border-radius": {
3948
+ "$extensions": {
3949
+ "nl.nldesignsystem.css.property": {}
3950
+ }
3951
+ },
3943
3952
  "border-width": {
3944
3953
  "$extensions": {
3945
3954
  "nl.nldesignsystem.css.property": {}
@@ -5003,6 +5012,117 @@ declare const tokens: {
5003
5012
  }
5004
5013
  }
5005
5014
  },
5015
+ "nl": {
5016
+ "code-block": {
5017
+ "background-color": DesignToken,
5018
+ "color": DesignToken,
5019
+ "font-family": DesignToken,
5020
+ "font-size": DesignToken,
5021
+ "line-height": DesignToken,
5022
+ "padding-block": DesignToken,
5023
+ "padding-inline": DesignToken
5024
+ },
5025
+ "code": {
5026
+ "background-color": {},
5027
+ "color": {},
5028
+ "font-family": {},
5029
+ "font-size": {},
5030
+ "line-height": {}
5031
+ },
5032
+ "data-badge": {
5033
+ "background-color": DesignToken,
5034
+ "border-radius": DesignToken,
5035
+ "color": DesignToken,
5036
+ "font-weight": {},
5037
+ "padding-block": DesignToken,
5038
+ "padding-inline": DesignToken
5039
+ },
5040
+ "heading": {
5041
+ "level-1": {
5042
+ "color": {},
5043
+ "font-family": DesignToken,
5044
+ "font-size": DesignToken,
5045
+ "font-weight": DesignToken,
5046
+ "line-height": DesignToken
5047
+ },
5048
+ "level-2": {
5049
+ "color": {},
5050
+ "font-family": DesignToken,
5051
+ "font-size": DesignToken,
5052
+ "font-weight": DesignToken,
5053
+ "line-height": DesignToken
5054
+ },
5055
+ "level-3": {
5056
+ "color": {},
5057
+ "font-family": DesignToken,
5058
+ "font-size": DesignToken,
5059
+ "font-weight": DesignToken,
5060
+ "line-height": DesignToken
5061
+ },
5062
+ "level-4": {
5063
+ "color": {},
5064
+ "font-family": DesignToken,
5065
+ "font-size": DesignToken,
5066
+ "font-weight": DesignToken,
5067
+ "line-height": DesignToken
5068
+ },
5069
+ "level-5": {
5070
+ "color": {},
5071
+ "font-family": DesignToken,
5072
+ "font-size": DesignToken,
5073
+ "font-weight": DesignToken,
5074
+ "line-height": DesignToken
5075
+ },
5076
+ "level-6": {
5077
+ "color": {},
5078
+ "font-family": DesignToken,
5079
+ "font-size": DesignToken,
5080
+ "font-weight": DesignToken,
5081
+ "line-height": DesignToken
5082
+ }
5083
+ },
5084
+ "mark": {
5085
+ "background-color": DesignToken,
5086
+ "color": DesignToken
5087
+ },
5088
+ "number-badge": {
5089
+ "background-color": DesignToken,
5090
+ "border-radius": DesignToken,
5091
+ "color": DesignToken,
5092
+ "font-size": DesignToken,
5093
+ "font-weight": {},
5094
+ "padding-block": DesignToken,
5095
+ "padding-inline": DesignToken
5096
+ },
5097
+ "paragraph": {
5098
+ "color": {},
5099
+ "font-family": DesignToken,
5100
+ "font-size": DesignToken,
5101
+ "font-weight": DesignToken,
5102
+ "line-height": DesignToken,
5103
+ "lead": {
5104
+ "color": DesignToken,
5105
+ "font-size": DesignToken,
5106
+ "font-weight": DesignToken,
5107
+ "line-height": DesignToken
5108
+ },
5109
+ "small": {
5110
+ "font-size": DesignToken
5111
+ }
5112
+ },
5113
+ "skip-link": {
5114
+ "background-color": DesignToken,
5115
+ "color": DesignToken,
5116
+ "padding-block": DesignToken,
5117
+ "padding-inline": DesignToken,
5118
+ "text-decoration": DesignToken,
5119
+ "focus-visible": {
5120
+ "color": DesignToken,
5121
+ "background-color": DesignToken,
5122
+ "text-decoration": DesignToken
5123
+ }
5124
+ }
5125
+ },
5006
5126
  "of": {
5007
5127
  "layout": {
5008
5128
  "background": DesignToken,
@@ -5018,5 +5138,14 @@ declare const tokens: {
5018
5138
  "box-shadow": DesignToken
5019
5139
  }
5020
5140
  }
5141
+ },
5142
+ "signalen": {
5143
+ "modal-dialog": {
5144
+ "background-color": DesignToken,
5145
+ "color": DesignToken
5146
+ },
5147
+ "progress-bar": {
5148
+ "border-radius": DesignToken
5149
+ }
5021
5150
  }
5022
5151
  }