@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/tokens.d.ts CHANGED
@@ -261,6 +261,7 @@ declare const tokens: {
261
261
  }
262
262
  }
263
263
  },
264
+ "alternate-lang-nav": {},
264
265
  "article": {
265
266
  "max-inline-size": DesignToken
266
267
  },
@@ -316,20 +317,6 @@ declare const tokens: {
316
317
  "padding-block": DesignToken,
317
318
  "padding-inline": DesignToken
318
319
  },
319
- "badge-data": {
320
- "letter-spacing": {
321
- "$extensions": {
322
- "nl.nldesignsystem.css.property": {}
323
- }
324
- },
325
- "text-transform": {
326
- "$extensions": {
327
- "nl.nldesignsystem.css.property": {
328
- "syntax": {}
329
- }
330
- }
331
- }
332
- },
333
320
  "badge-list": {
334
321
  "row-gap": {
335
322
  "$extensions": {
@@ -516,6 +503,30 @@ declare const tokens: {
516
503
  "margin-block-start": DesignToken,
517
504
  "margin-block-end": DesignToken
518
505
  },
506
+ "body": {
507
+ "font-family": {
508
+ "$extensions": {
509
+ "nl.nldesignsystem.css.property": {}
510
+ }
511
+ },
512
+ "font-size": {
513
+ "$extensions": {
514
+ "nl.nldesignsystem.css.property": {}
515
+ }
516
+ },
517
+ "font-weight": {
518
+ "$extensions": {
519
+ "nl.nldesignsystem.css.property": {}
520
+ }
521
+ },
522
+ "line-height": {
523
+ "$extensions": {
524
+ "nl.nldesignsystem.css.property": {
525
+ "syntax": {}
526
+ }
527
+ }
528
+ }
529
+ },
519
530
  "breadcrumb-nav": {
520
531
  "min-block-size": DesignToken,
521
532
  "font-family": {
@@ -1379,11 +1390,7 @@ declare const tokens: {
1379
1390
  "code-block": {
1380
1391
  "background-color": DesignToken,
1381
1392
  "color": DesignToken,
1382
- "font-family": {
1383
- "$extensions": {
1384
- "nl.nldesignsystem.css.property": {}
1385
- }
1386
- },
1393
+ "font-family": DesignToken,
1387
1394
  "font-size": DesignToken,
1388
1395
  "line-height": DesignToken,
1389
1396
  "margin-block-start": DesignToken,
@@ -1496,6 +1503,15 @@ declare const tokens: {
1496
1503
  }
1497
1504
  }
1498
1505
  },
1506
+ "combobox": {
1507
+ "popover": {
1508
+ "z-index": {
1509
+ "$extensions": {
1510
+ "nl.nldesignsystem.css.property": {}
1511
+ }
1512
+ }
1513
+ }
1514
+ },
1499
1515
  "action": {
1500
1516
  "activate": {
1501
1517
  "cursor": DesignToken
@@ -1676,6 +1692,65 @@ declare const tokens: {
1676
1692
  }
1677
1693
  },
1678
1694
  "currency-data": {},
1695
+ "data-badge": {
1696
+ "background-color": {
1697
+ "$extensions": {
1698
+ "nl.nldesignsystem.css.property": {}
1699
+ }
1700
+ },
1701
+ "border-radius": {
1702
+ "$extensions": {
1703
+ "nl.nldesignsystem.css.property": {}
1704
+ }
1705
+ },
1706
+ "border-width": {
1707
+ "$extensions": {
1708
+ "nl.nldesignsystem.css.property": {}
1709
+ }
1710
+ },
1711
+ "color": {
1712
+ "$extensions": {
1713
+ "nl.nldesignsystem.css.property": {}
1714
+ }
1715
+ },
1716
+ "font-size": {
1717
+ "$extensions": {
1718
+ "nl.nldesignsystem.css.property": {}
1719
+ }
1720
+ },
1721
+ "font-weight": {
1722
+ "$extensions": {
1723
+ "nl.nldesignsystem.css.property": {}
1724
+ }
1725
+ },
1726
+ "line-height": {
1727
+ "$extensions": {
1728
+ "nl.nldesignsystem.css.property": {
1729
+ "syntax": {}
1730
+ }
1731
+ }
1732
+ },
1733
+ "min-block-size": {
1734
+ "$extensions": {
1735
+ "nl.nldesignsystem.css.property": {}
1736
+ }
1737
+ },
1738
+ "min-inline-size": {
1739
+ "$extensions": {
1740
+ "nl.nldesignsystem.css.property": {}
1741
+ }
1742
+ },
1743
+ "padding-block": {
1744
+ "$extensions": {
1745
+ "nl.nldesignsystem.css.property": {}
1746
+ }
1747
+ },
1748
+ "padding-inline": {
1749
+ "$extensions": {
1750
+ "nl.nldesignsystem.css.property": {}
1751
+ }
1752
+ }
1753
+ },
1679
1754
  "data-list": {
1680
1755
  "margin-block-end": DesignToken,
1681
1756
  "margin-block-start": DesignToken,
@@ -2429,6 +2504,7 @@ declare const tokens: {
2429
2504
  },
2430
2505
  "font-weight": DesignToken
2431
2506
  },
2507
+ "html-content": {},
2432
2508
  "iban-data": {},
2433
2509
  "icon": {
2434
2510
  "color": {
@@ -2871,6 +2947,16 @@ declare const tokens: {
2871
2947
  "background-color": DesignToken,
2872
2948
  "color": DesignToken,
2873
2949
  "content": {
2950
+ "background-color": {
2951
+ "$extensions": {
2952
+ "nl.nldesignsystem.css.property": {}
2953
+ }
2954
+ },
2955
+ "color": {
2956
+ "$extensions": {
2957
+ "nl.nldesignsystem.css.property": {}
2958
+ }
2959
+ },
2874
2960
  "max-inline-size": DesignToken
2875
2961
  },
2876
2962
  "link": {
@@ -3005,6 +3091,50 @@ declare const tokens: {
3005
3091
  "padding-inline-start": DesignToken
3006
3092
  }
3007
3093
  },
3094
+ "page-body": {
3095
+ "background-color": {
3096
+ "$extensions": {
3097
+ "nl.nldesignsystem.css.property": {}
3098
+ }
3099
+ },
3100
+ "color": {
3101
+ "$extensions": {
3102
+ "nl.nldesignsystem.css.property": {}
3103
+ }
3104
+ },
3105
+ "content": {
3106
+ "background-color": {
3107
+ "$extensions": {
3108
+ "nl.nldesignsystem.css.property": {}
3109
+ }
3110
+ },
3111
+ "color": {
3112
+ "$extensions": {
3113
+ "nl.nldesignsystem.css.property": {}
3114
+ }
3115
+ },
3116
+ "padding-block-start": {
3117
+ "$extensions": {
3118
+ "nl.nldesignsystem.css.property": {}
3119
+ }
3120
+ },
3121
+ "padding-block-end": {
3122
+ "$extensions": {
3123
+ "nl.nldesignsystem.css.property": {}
3124
+ }
3125
+ },
3126
+ "padding-inline-start": {
3127
+ "$extensions": {
3128
+ "nl.nldesignsystem.css.property": {}
3129
+ }
3130
+ },
3131
+ "padding-inine-end": {
3132
+ "$extensions": {
3133
+ "nl.nldesignsystem.css.property": {}
3134
+ }
3135
+ }
3136
+ }
3137
+ },
3008
3138
  "page-content": {
3009
3139
  "padding-block-start": DesignToken,
3010
3140
  "padding-block-end": DesignToken,
@@ -3026,7 +3156,39 @@ declare const tokens: {
3026
3156
  "padding-inline-end": DesignToken,
3027
3157
  "padding-inline-start": DesignToken,
3028
3158
  "padding-block-end": DesignToken,
3029
- "padding-block-start": DesignToken
3159
+ "padding-block-start": DesignToken,
3160
+ "content": {
3161
+ "color": {
3162
+ "$extensions": {
3163
+ "nl.nldesignsystem.css.property": {}
3164
+ }
3165
+ },
3166
+ "background-color": {
3167
+ "$extensions": {
3168
+ "nl.nldesignsystem.css.property": {}
3169
+ }
3170
+ },
3171
+ "padding-inline-end": {
3172
+ "$extensions": {
3173
+ "nl.nldesignsystem.css.property": {}
3174
+ }
3175
+ },
3176
+ "padding-inline-start": {
3177
+ "$extensions": {
3178
+ "nl.nldesignsystem.css.property": {}
3179
+ }
3180
+ },
3181
+ "padding-block-end": {
3182
+ "$extensions": {
3183
+ "nl.nldesignsystem.css.property": {}
3184
+ }
3185
+ },
3186
+ "padding-block-start": {
3187
+ "$extensions": {
3188
+ "nl.nldesignsystem.css.property": {}
3189
+ }
3190
+ }
3191
+ }
3030
3192
  },
3031
3193
  "page-header": {
3032
3194
  "background-color": {
@@ -3034,6 +3196,11 @@ declare const tokens: {
3034
3196
  "nl.nldesignsystem.css.property": {}
3035
3197
  }
3036
3198
  },
3199
+ "border-block-end-color": {
3200
+ "$extensions": {
3201
+ "nl.nldesignsystem.css.property": {}
3202
+ }
3203
+ },
3037
3204
  "color": {
3038
3205
  "$extensions": {
3039
3206
  "nl.nldesignsystem.css.property": {}
@@ -3042,8 +3209,41 @@ declare const tokens: {
3042
3209
  "padding-block-start": DesignToken,
3043
3210
  "padding-block-end": DesignToken,
3044
3211
  "padding-inline-start": DesignToken,
3045
- "padding-inline-end": DesignToken
3212
+ "padding-inline-end": DesignToken,
3213
+ "content": {
3214
+ "background-color": {
3215
+ "$extensions": {
3216
+ "nl.nldesignsystem.css.property": {}
3217
+ }
3218
+ },
3219
+ "color": {
3220
+ "$extensions": {
3221
+ "nl.nldesignsystem.css.property": {}
3222
+ }
3223
+ },
3224
+ "padding-block-start": {
3225
+ "$extensions": {
3226
+ "nl.nldesignsystem.css.property": {}
3227
+ }
3228
+ },
3229
+ "padding-block-end": {
3230
+ "$extensions": {
3231
+ "nl.nldesignsystem.css.property": {}
3232
+ }
3233
+ },
3234
+ "padding-inline-start": {
3235
+ "$extensions": {
3236
+ "nl.nldesignsystem.css.property": {}
3237
+ }
3238
+ },
3239
+ "padding-inline-end": {
3240
+ "$extensions": {
3241
+ "nl.nldesignsystem.css.property": {}
3242
+ }
3243
+ }
3244
+ }
3046
3245
  },
3246
+ "page-layout": {},
3047
3247
  "page": {
3048
3248
  "background-color": DesignToken,
3049
3249
  "color": DesignToken,
@@ -3151,7 +3351,12 @@ declare const tokens: {
3151
3351
  "margin-block-start": DesignToken,
3152
3352
  "margin-block-end": DesignToken,
3153
3353
  "lead": {
3154
- "color": DesignToken,
3354
+ "color": {
3355
+ "$extensions": {
3356
+ "nl.nldesignsystem.css.property": {},
3357
+ "nl.nldesignsystem.fallback": {}
3358
+ }
3359
+ },
3155
3360
  "font-size": DesignToken,
3156
3361
  "font-weight": DesignToken,
3157
3362
  "line-height": DesignToken
@@ -3400,6 +3605,23 @@ declare const tokens: {
3400
3605
  "margin-block-end": DesignToken
3401
3606
  }
3402
3607
  },
3608
+ "root": {
3609
+ "background-color": {
3610
+ "$extensions": {
3611
+ "nl.nldesignsystem.css.property": {}
3612
+ }
3613
+ },
3614
+ "color": {
3615
+ "$extensions": {
3616
+ "nl.nldesignsystem.css.property": {}
3617
+ }
3618
+ },
3619
+ "font-family": {
3620
+ "$extensions": {
3621
+ "nl.nldesignsystem.css.property": {}
3622
+ }
3623
+ }
3624
+ },
3403
3625
  "search-bar": {
3404
3626
  "button": {
3405
3627
  "background-color": DesignToken,
@@ -4827,6 +5049,117 @@ declare const tokens: {
4827
5049
  }
4828
5050
  }
4829
5051
  },
5052
+ "nl": {
5053
+ "code-block": {
5054
+ "background-color": DesignToken,
5055
+ "color": DesignToken,
5056
+ "font-family": DesignToken,
5057
+ "font-size": DesignToken,
5058
+ "line-height": DesignToken,
5059
+ "padding-block": DesignToken,
5060
+ "padding-inline": DesignToken
5061
+ },
5062
+ "code": {
5063
+ "background-color": {},
5064
+ "color": {},
5065
+ "font-family": {},
5066
+ "font-size": {},
5067
+ "line-height": {}
5068
+ },
5069
+ "data-badge": {
5070
+ "background-color": DesignToken,
5071
+ "border-radius": DesignToken,
5072
+ "color": DesignToken,
5073
+ "font-weight": {},
5074
+ "padding-block": DesignToken,
5075
+ "padding-inline": DesignToken
5076
+ },
5077
+ "heading": {
5078
+ "level-1": {
5079
+ "color": {},
5080
+ "font-family": DesignToken,
5081
+ "font-size": DesignToken,
5082
+ "font-weight": DesignToken,
5083
+ "line-height": DesignToken
5084
+ },
5085
+ "level-2": {
5086
+ "color": {},
5087
+ "font-family": DesignToken,
5088
+ "font-size": DesignToken,
5089
+ "font-weight": DesignToken,
5090
+ "line-height": DesignToken
5091
+ },
5092
+ "level-3": {
5093
+ "color": {},
5094
+ "font-family": DesignToken,
5095
+ "font-size": DesignToken,
5096
+ "font-weight": DesignToken,
5097
+ "line-height": DesignToken
5098
+ },
5099
+ "level-4": {
5100
+ "color": {},
5101
+ "font-family": DesignToken,
5102
+ "font-size": DesignToken,
5103
+ "font-weight": DesignToken,
5104
+ "line-height": DesignToken
5105
+ },
5106
+ "level-5": {
5107
+ "color": {},
5108
+ "font-family": DesignToken,
5109
+ "font-size": DesignToken,
5110
+ "font-weight": DesignToken,
5111
+ "line-height": DesignToken
5112
+ },
5113
+ "level-6": {
5114
+ "color": {},
5115
+ "font-family": DesignToken,
5116
+ "font-size": DesignToken,
5117
+ "font-weight": DesignToken,
5118
+ "line-height": DesignToken
5119
+ }
5120
+ },
5121
+ "mark": {
5122
+ "background-color": DesignToken,
5123
+ "color": DesignToken
5124
+ },
5125
+ "number-badge": {
5126
+ "background-color": DesignToken,
5127
+ "border-radius": DesignToken,
5128
+ "color": DesignToken,
5129
+ "font-size": DesignToken,
5130
+ "font-weight": {},
5131
+ "padding-block": DesignToken,
5132
+ "padding-inline": DesignToken
5133
+ },
5134
+ "paragraph": {
5135
+ "color": {},
5136
+ "font-family": DesignToken,
5137
+ "font-size": DesignToken,
5138
+ "font-weight": DesignToken,
5139
+ "line-height": DesignToken,
5140
+ "lead": {
5141
+ "color": DesignToken,
5142
+ "font-size": DesignToken,
5143
+ "font-weight": DesignToken,
5144
+ "line-height": DesignToken
5145
+ },
5146
+ "small": {
5147
+ "font-size": DesignToken
5148
+ }
5149
+ },
5150
+ "skip-link": {
5151
+ "background-color": DesignToken,
5152
+ "color": DesignToken,
5153
+ "padding-block": DesignToken,
5154
+ "padding-inline": DesignToken,
5155
+ "text-decoration": DesignToken,
5156
+ "focus-visible": {
5157
+ "color": DesignToken,
5158
+ "background-color": DesignToken,
5159
+ "text-decoration": DesignToken
5160
+ }
5161
+ }
5162
+ },
4830
5163
  "of": {
4831
5164
  "layout": {
4832
5165
  "background": DesignToken,