@utrecht/design-tokens 2.2.0 → 2.4.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 (79) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/_mixin-theme.scss +124 -63
  3. package/dist/_mixin.scss +124 -63
  4. package/dist/_variables.scss +124 -63
  5. package/dist/dark/_mixin-theme.scss +124 -63
  6. package/dist/dark/_mixin.scss +124 -63
  7. package/dist/dark/_variables.scss +124 -63
  8. package/dist/dark/index.cjs +62 -1
  9. package/dist/dark/index.css +124 -63
  10. package/dist/dark/index.d.ts +62 -1
  11. package/dist/dark/index.flat.json +62 -1
  12. package/dist/dark/index.json +1046 -102
  13. package/dist/dark/index.mjs +62 -1
  14. package/dist/dark/index.tokens.json +614 -72
  15. package/dist/dark/list.d.ts +14 -0
  16. package/dist/dark/list.json +1046 -102
  17. package/dist/dark/list.mjs +31638 -0
  18. package/dist/dark/property.css +0 -1
  19. package/dist/dark/root.css +124 -63
  20. package/dist/dark/theme-prince-xml.css +124 -63
  21. package/dist/dark/theme.css +124 -63
  22. package/dist/dark/tokens.cjs +1541 -116
  23. package/dist/dark/tokens.d.ts +355 -22
  24. package/dist/dark/tokens.json +1541 -116
  25. package/dist/dark/variables.cjs +62 -1
  26. package/dist/dark/variables.css +124 -63
  27. package/dist/dark/variables.d.ts +62 -1
  28. package/dist/dark/variables.json +62 -1
  29. package/dist/dark/variables.less +124 -63
  30. package/dist/dark/variables.mjs +62 -1
  31. package/dist/index.cjs +62 -1
  32. package/dist/index.css +248 -126
  33. package/dist/index.d.ts +62 -1
  34. package/dist/index.flat.json +62 -1
  35. package/dist/index.json +1046 -102
  36. package/dist/index.mjs +62 -1
  37. package/dist/index.tokens.json +614 -72
  38. package/dist/list.d.ts +14 -0
  39. package/dist/list.json +1046 -102
  40. package/dist/list.mjs +32755 -0
  41. package/dist/property.css +0 -1
  42. package/dist/root.css +124 -63
  43. package/dist/theme-prince-xml.css +124 -63
  44. package/dist/theme.css +124 -63
  45. package/dist/tokens.cjs +1541 -116
  46. package/dist/tokens.d.ts +355 -22
  47. package/dist/tokens.json +1541 -116
  48. package/dist/variables.cjs +62 -1
  49. package/dist/variables.css +124 -63
  50. package/dist/variables.d.ts +62 -1
  51. package/dist/variables.json +62 -1
  52. package/dist/variables.less +124 -63
  53. package/dist/variables.mjs +62 -1
  54. package/package.json +1 -1
  55. package/src/component/nl/code-block.tokens.json +13 -0
  56. package/src/component/nl/code.tokens.json +11 -0
  57. package/src/component/nl/data-badge.tokens.json +22 -0
  58. package/src/component/nl/heading.tokens.json +48 -0
  59. package/src/component/nl/mark.tokens.json +8 -0
  60. package/src/component/nl/number-badge.tokens.json +23 -0
  61. package/src/component/nl/paragraph.tokens.json +20 -0
  62. package/src/component/nl/skip-link.tokens.json +16 -0
  63. package/src/component/utrecht/badge.tokens.json +5 -5
  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/mark.tokens.json +2 -2
  72. package/src/component/utrecht/number-badge.tokens.json +6 -6
  73. package/src/component/utrecht/paragraph.tokens.json +8 -8
  74. package/src/component/utrecht/skip-link.tokens.json +10 -10
  75. package/src/css-property-formatter.mjs +2 -1
  76. package/src/json-list-formatter.js +2 -1
  77. package/style-dictionary-build.mjs +3 -1
  78. package/style-dictionary-config.mjs +27 -0
  79. package/src/component/utrecht/badge-data.tokens.json +0 -8
package/dist/dark/tokens.d.ts CHANGED
@@ -265,6 +265,7 @@ declare const tokens: {
265
265
  "color": DesignToken
266
266
  }
267
267
  },
268
+ "alternate-lang-nav": {},
268
269
  "article": {
269
270
  "max-inline-size": DesignToken
270
271
  },
@@ -320,20 +321,6 @@ declare const tokens: {
320
321
  "padding-block": DesignToken,
321
322
  "padding-inline": DesignToken
322
323
  },
323
- "badge-data": {
324
- "letter-spacing": {
325
- "$extensions": {
326
- "nl.nldesignsystem.css.property": {}
327
- }
328
- },
329
- "text-transform": {
330
- "$extensions": {
331
- "nl.nldesignsystem.css.property": {
332
- "syntax": {}
333
- }
334
- }
335
- }
336
- },
337
324
  "badge-list": {
338
325
  "row-gap": {
339
326
  "$extensions": {
@@ -520,6 +507,30 @@ declare const tokens: {
520
507
  "margin-block-start": DesignToken,
521
508
  "margin-block-end": DesignToken
522
509
  },
510
+ "body": {
511
+ "font-family": {
512
+ "$extensions": {
513
+ "nl.nldesignsystem.css.property": {}
514
+ }
515
+ },
516
+ "font-size": {
517
+ "$extensions": {
518
+ "nl.nldesignsystem.css.property": {}
519
+ }
520
+ },
521
+ "font-weight": {
522
+ "$extensions": {
523
+ "nl.nldesignsystem.css.property": {}
524
+ }
525
+ },
526
+ "line-height": {
527
+ "$extensions": {
528
+ "nl.nldesignsystem.css.property": {
529
+ "syntax": {}
530
+ }
531
+ }
532
+ }
533
+ },
523
534
  "breadcrumb-nav": {
524
535
  "min-block-size": DesignToken,
525
536
  "font-family": {
@@ -1383,11 +1394,7 @@ declare const tokens: {
1383
1394
  "code-block": {
1384
1395
  "background-color": DesignToken,
1385
1396
  "color": DesignToken,
1386
- "font-family": {
1387
- "$extensions": {
1388
- "nl.nldesignsystem.css.property": {}
1389
- }
1390
- },
1397
+ "font-family": DesignToken,
1391
1398
  "font-size": DesignToken,
1392
1399
  "line-height": DesignToken,
1393
1400
  "margin-block-start": DesignToken,
@@ -1500,6 +1507,15 @@ declare const tokens: {
1500
1507
  }
1501
1508
  }
1502
1509
  },
1510
+ "combobox": {
1511
+ "popover": {
1512
+ "z-index": {
1513
+ "$extensions": {
1514
+ "nl.nldesignsystem.css.property": {}
1515
+ }
1516
+ }
1517
+ }
1518
+ },
1503
1519
  "action": {
1504
1520
  "activate": {
1505
1521
  "cursor": DesignToken
@@ -1680,6 +1696,65 @@ declare const tokens: {
1680
1696
  }
1681
1697
  },
1682
1698
  "currency-data": {},
1699
+ "data-badge": {
1700
+ "background-color": {
1701
+ "$extensions": {
1702
+ "nl.nldesignsystem.css.property": {}
1703
+ }
1704
+ },
1705
+ "border-radius": {
1706
+ "$extensions": {
1707
+ "nl.nldesignsystem.css.property": {}
1708
+ }
1709
+ },
1710
+ "border-width": {
1711
+ "$extensions": {
1712
+ "nl.nldesignsystem.css.property": {}
1713
+ }
1714
+ },
1715
+ "color": {
1716
+ "$extensions": {
1717
+ "nl.nldesignsystem.css.property": {}
1718
+ }
1719
+ },
1720
+ "font-size": {
1721
+ "$extensions": {
1722
+ "nl.nldesignsystem.css.property": {}
1723
+ }
1724
+ },
1725
+ "font-weight": {
1726
+ "$extensions": {
1727
+ "nl.nldesignsystem.css.property": {}
1728
+ }
1729
+ },
1730
+ "line-height": {
1731
+ "$extensions": {
1732
+ "nl.nldesignsystem.css.property": {
1733
+ "syntax": {}
1734
+ }
1735
+ }
1736
+ },
1737
+ "min-block-size": {
1738
+ "$extensions": {
1739
+ "nl.nldesignsystem.css.property": {}
1740
+ }
1741
+ },
1742
+ "min-inline-size": {
1743
+ "$extensions": {
1744
+ "nl.nldesignsystem.css.property": {}
1745
+ }
1746
+ },
1747
+ "padding-block": {
1748
+ "$extensions": {
1749
+ "nl.nldesignsystem.css.property": {}
1750
+ }
1751
+ },
1752
+ "padding-inline": {
1753
+ "$extensions": {
1754
+ "nl.nldesignsystem.css.property": {}
1755
+ }
1756
+ }
1757
+ },
1683
1758
  "data-list": {
1684
1759
  "margin-block-end": DesignToken,
1685
1760
  "margin-block-start": DesignToken,
@@ -2433,6 +2508,7 @@ declare const tokens: {
2433
2508
  },
2434
2509
  "font-weight": DesignToken
2435
2510
  },
2511
+ "html-content": {},
2436
2512
  "iban-data": {},
2437
2513
  "icon": {
2438
2514
  "color": {
@@ -2875,6 +2951,16 @@ declare const tokens: {
2875
2951
  "background-color": DesignToken,
2876
2952
  "color": DesignToken,
2877
2953
  "content": {
2954
+ "background-color": {
2955
+ "$extensions": {
2956
+ "nl.nldesignsystem.css.property": {}
2957
+ }
2958
+ },
2959
+ "color": {
2960
+ "$extensions": {
2961
+ "nl.nldesignsystem.css.property": {}
2962
+ }
2963
+ },
2878
2964
  "max-inline-size": DesignToken
2879
2965
  },
2880
2966
  "link": {
@@ -3009,6 +3095,50 @@ declare const tokens: {
3009
3095
  "padding-inline-start": DesignToken
3010
3096
  }
3011
3097
  },
3098
+ "page-body": {
3099
+ "background-color": {
3100
+ "$extensions": {
3101
+ "nl.nldesignsystem.css.property": {}
3102
+ }
3103
+ },
3104
+ "color": {
3105
+ "$extensions": {
3106
+ "nl.nldesignsystem.css.property": {}
3107
+ }
3108
+ },
3109
+ "content": {
3110
+ "background-color": {
3111
+ "$extensions": {
3112
+ "nl.nldesignsystem.css.property": {}
3113
+ }
3114
+ },
3115
+ "color": {
3116
+ "$extensions": {
3117
+ "nl.nldesignsystem.css.property": {}
3118
+ }
3119
+ },
3120
+ "padding-block-start": {
3121
+ "$extensions": {
3122
+ "nl.nldesignsystem.css.property": {}
3123
+ }
3124
+ },
3125
+ "padding-block-end": {
3126
+ "$extensions": {
3127
+ "nl.nldesignsystem.css.property": {}
3128
+ }
3129
+ },
3130
+ "padding-inline-start": {
3131
+ "$extensions": {
3132
+ "nl.nldesignsystem.css.property": {}
3133
+ }
3134
+ },
3135
+ "padding-inine-end": {
3136
+ "$extensions": {
3137
+ "nl.nldesignsystem.css.property": {}
3138
+ }
3139
+ }
3140
+ }
3141
+ },
3012
3142
  "page-content": {
3013
3143
  "padding-block-start": DesignToken,
3014
3144
  "padding-block-end": DesignToken,
@@ -3030,7 +3160,39 @@ declare const tokens: {
3030
3160
  "padding-inline-end": DesignToken,
3031
3161
  "padding-inline-start": DesignToken,
3032
3162
  "padding-block-end": DesignToken,
3033
- "padding-block-start": DesignToken
3163
+ "padding-block-start": DesignToken,
3164
+ "content": {
3165
+ "color": {
3166
+ "$extensions": {
3167
+ "nl.nldesignsystem.css.property": {}
3168
+ }
3169
+ },
3170
+ "background-color": {
3171
+ "$extensions": {
3172
+ "nl.nldesignsystem.css.property": {}
3173
+ }
3174
+ },
3175
+ "padding-inline-end": {
3176
+ "$extensions": {
3177
+ "nl.nldesignsystem.css.property": {}
3178
+ }
3179
+ },
3180
+ "padding-inline-start": {
3181
+ "$extensions": {
3182
+ "nl.nldesignsystem.css.property": {}
3183
+ }
3184
+ },
3185
+ "padding-block-end": {
3186
+ "$extensions": {
3187
+ "nl.nldesignsystem.css.property": {}
3188
+ }
3189
+ },
3190
+ "padding-block-start": {
3191
+ "$extensions": {
3192
+ "nl.nldesignsystem.css.property": {}
3193
+ }
3194
+ }
3195
+ }
3034
3196
  },
3035
3197
  "page-header": {
3036
3198
  "background-color": {
@@ -3038,6 +3200,11 @@ declare const tokens: {
3038
3200
  "nl.nldesignsystem.css.property": {}
3039
3201
  }
3040
3202
  },
3203
+ "border-block-end-color": {
3204
+ "$extensions": {
3205
+ "nl.nldesignsystem.css.property": {}
3206
+ }
3207
+ },
3041
3208
  "color": {
3042
3209
  "$extensions": {
3043
3210
  "nl.nldesignsystem.css.property": {}
@@ -3046,8 +3213,41 @@ declare const tokens: {
3046
3213
  "padding-block-start": DesignToken,
3047
3214
  "padding-block-end": DesignToken,
3048
3215
  "padding-inline-start": DesignToken,
3049
- "padding-inline-end": DesignToken
3216
+ "padding-inline-end": DesignToken,
3217
+ "content": {
3218
+ "background-color": {
3219
+ "$extensions": {
3220
+ "nl.nldesignsystem.css.property": {}
3221
+ }
3222
+ },
3223
+ "color": {
3224
+ "$extensions": {
3225
+ "nl.nldesignsystem.css.property": {}
3226
+ }
3227
+ },
3228
+ "padding-block-start": {
3229
+ "$extensions": {
3230
+ "nl.nldesignsystem.css.property": {}
3231
+ }
3232
+ },
3233
+ "padding-block-end": {
3234
+ "$extensions": {
3235
+ "nl.nldesignsystem.css.property": {}
3236
+ }
3237
+ },
3238
+ "padding-inline-start": {
3239
+ "$extensions": {
3240
+ "nl.nldesignsystem.css.property": {}
3241
+ }
3242
+ },
3243
+ "padding-inline-end": {
3244
+ "$extensions": {
3245
+ "nl.nldesignsystem.css.property": {}
3246
+ }
3247
+ }
3248
+ }
3050
3249
  },
3250
+ "page-layout": {},
3051
3251
  "page": {
3052
3252
  "background-color": DesignToken,
3053
3253
  "color": DesignToken,
@@ -3155,7 +3355,12 @@ declare const tokens: {
3155
3355
  "margin-block-start": DesignToken,
3156
3356
  "margin-block-end": DesignToken,
3157
3357
  "lead": {
3158
- "color": DesignToken,
3358
+ "color": {
3359
+ "$extensions": {
3360
+ "nl.nldesignsystem.css.property": {},
3361
+ "nl.nldesignsystem.fallback": {}
3362
+ }
3363
+ },
3159
3364
  "font-size": DesignToken,
3160
3365
  "font-weight": DesignToken,
3161
3366
  "line-height": DesignToken
@@ -3404,6 +3609,23 @@ declare const tokens: {
3404
3609
  "margin-block-end": DesignToken
3405
3610
  }
3406
3611
  },
3612
+ "root": {
3613
+ "background-color": {
3614
+ "$extensions": {
3615
+ "nl.nldesignsystem.css.property": {}
3616
+ }
3617
+ },
3618
+ "color": {
3619
+ "$extensions": {
3620
+ "nl.nldesignsystem.css.property": {}
3621
+ }
3622
+ },
3623
+ "font-family": {
3624
+ "$extensions": {
3625
+ "nl.nldesignsystem.css.property": {}
3626
+ }
3627
+ }
3628
+ },
3407
3629
  "search-bar": {
3408
3630
  "button": {
3409
3631
  "background-color": DesignToken,
@@ -4823,6 +5045,117 @@ declare const tokens: {
4823
5045
  }
4824
5046
  }
4825
5047
  },
5048
+ "nl": {
5049
+ "code-block": {
5050
+ "background-color": DesignToken,
5051
+ "color": DesignToken,
5052
+ "font-family": DesignToken,
5053
+ "font-size": DesignToken,
5054
+ "line-height": DesignToken,
5055
+ "padding-block": DesignToken,
5056
+ "padding-inline": DesignToken
5057
+ },
5058
+ "code": {
5059
+ "background-color": {},
5060
+ "color": {},
5061
+ "font-family": {},
5062
+ "font-size": {},
5063
+ "line-height": {}
5064
+ },
5065
+ "data-badge": {
5066
+ "background-color": DesignToken,
5067
+ "border-radius": DesignToken,
5068
+ "color": DesignToken,
5069
+ "font-weight": {},
5070
+ "padding-block": DesignToken,
5071
+ "padding-inline": DesignToken
5072
+ },
5073
+ "heading": {
5074
+ "level-1": {
5075
+ "color": {},
5076
+ "font-family": DesignToken,
5077
+ "font-size": DesignToken,
5078
+ "font-weight": DesignToken,
5079
+ "line-height": DesignToken
5080
+ },
5081
+ "level-2": {
5082
+ "color": {},
5083
+ "font-family": DesignToken,
5084
+ "font-size": DesignToken,
5085
+ "font-weight": DesignToken,
5086
+ "line-height": DesignToken
5087
+ },
5088
+ "level-3": {
5089
+ "color": {},
5090
+ "font-family": DesignToken,
5091
+ "font-size": DesignToken,
5092
+ "font-weight": DesignToken,
5093
+ "line-height": DesignToken
5094
+ },
5095
+ "level-4": {
5096
+ "color": {},
5097
+ "font-family": DesignToken,
5098
+ "font-size": DesignToken,
5099
+ "font-weight": DesignToken,
5100
+ "line-height": DesignToken
5101
+ },
5102
+ "level-5": {
5103
+ "color": {},
5104
+ "font-family": DesignToken,
5105
+ "font-size": DesignToken,
5106
+ "font-weight": DesignToken,
5107
+ "line-height": DesignToken
5108
+ },
5109
+ "level-6": {
5110
+ "color": {},
5111
+ "font-family": DesignToken,
5112
+ "font-size": DesignToken,
5113
+ "font-weight": DesignToken,
5114
+ "line-height": DesignToken
5115
+ }
5116
+ },
5117
+ "mark": {
5118
+ "background-color": DesignToken,
5119
+ "color": DesignToken
5120
+ },
5121
+ "number-badge": {
5122
+ "background-color": DesignToken,
5123
+ "border-radius": DesignToken,
5124
+ "color": DesignToken,
5125
+ "font-size": DesignToken,
5126
+ "font-weight": {},
5127
+ "padding-block": DesignToken,
5128
+ "padding-inline": DesignToken
5129
+ },
5130
+ "paragraph": {
5131
+ "color": {},
5132
+ "font-family": DesignToken,
5133
+ "font-size": DesignToken,
5134
+ "font-weight": DesignToken,
5135
+ "line-height": DesignToken,
5136
+ "lead": {
5137
+ "color": DesignToken,
5138
+ "font-size": DesignToken,
5139
+ "font-weight": DesignToken,
5140
+ "line-height": DesignToken
5141
+ },
5142
+ "small": {
5143
+ "font-size": DesignToken
5144
+ }
5145
+ },
5146
+ "skip-link": {
5147
+ "background-color": DesignToken,
5148
+ "color": DesignToken,
5149
+ "padding-block": DesignToken,
5150
+ "padding-inline": DesignToken,
5151
+ "text-decoration": DesignToken,
5152
+ "focus-visible": {
5153
+ "color": DesignToken,
5154
+ "background-color": DesignToken,
5155
+ "text-decoration": DesignToken
5156
+ }
5157
+ }
5158
+ },
4826
5159
  "of": {
4827
5160
  "layout": {
4828
5161
  "background": DesignToken,