@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/dark/tokens.d.ts CHANGED
@@ -321,20 +321,6 @@ declare const tokens: {
321
321
  "padding-block": DesignToken,
322
322
  "padding-inline": DesignToken
323
323
  },
324
- "badge-data": {
325
- "letter-spacing": {
326
- "$extensions": {
327
- "nl.nldesignsystem.css.property": {}
328
- }
329
- },
330
- "text-transform": {
331
- "$extensions": {
332
- "nl.nldesignsystem.css.property": {
333
- "syntax": {}
334
- }
335
- }
336
- }
337
- },
338
324
  "badge-list": {
339
325
  "row-gap": {
340
326
  "$extensions": {
@@ -522,28 +508,16 @@ declare const tokens: {
522
508
  "margin-block-end": DesignToken
523
509
  },
524
510
  "body": {
525
- "font-family": {
526
- "$extensions": {
527
- "nl.nldesignsystem.css.property": {}
528
- }
529
- },
530
- "font-size": {
531
- "$extensions": {
532
- "nl.nldesignsystem.css.property": {}
533
- }
534
- },
511
+ "font-family": DesignToken,
512
+ "font-size": DesignToken,
535
513
  "font-weight": {
536
514
  "$extensions": {
537
515
  "nl.nldesignsystem.css.property": {}
538
516
  }
539
517
  },
540
- "line-height": {
541
- "$extensions": {
542
- "nl.nldesignsystem.css.property": {
543
- "syntax": {}
544
- }
545
- }
546
- }
518
+ "line-height": DesignToken,
519
+ "background-color": DesignToken,
520
+ "color": DesignToken
547
521
  },
548
522
  "breadcrumb-nav": {
549
523
  "min-block-size": DesignToken,
@@ -1408,11 +1382,7 @@ declare const tokens: {
1408
1382
  "code-block": {
1409
1383
  "background-color": DesignToken,
1410
1384
  "color": DesignToken,
1411
- "font-family": {
1412
- "$extensions": {
1413
- "nl.nldesignsystem.css.property": {}
1414
- }
1415
- },
1385
+ "font-family": DesignToken,
1416
1386
  "font-size": DesignToken,
1417
1387
  "line-height": DesignToken,
1418
1388
  "margin-block-start": DesignToken,
@@ -1714,6 +1684,65 @@ declare const tokens: {
1714
1684
  }
1715
1685
  },
1716
1686
  "currency-data": {},
1687
+ "data-badge": {
1688
+ "background-color": {
1689
+ "$extensions": {
1690
+ "nl.nldesignsystem.css.property": {}
1691
+ }
1692
+ },
1693
+ "border-radius": {
1694
+ "$extensions": {
1695
+ "nl.nldesignsystem.css.property": {}
1696
+ }
1697
+ },
1698
+ "border-width": {
1699
+ "$extensions": {
1700
+ "nl.nldesignsystem.css.property": {}
1701
+ }
1702
+ },
1703
+ "color": {
1704
+ "$extensions": {
1705
+ "nl.nldesignsystem.css.property": {}
1706
+ }
1707
+ },
1708
+ "font-size": {
1709
+ "$extensions": {
1710
+ "nl.nldesignsystem.css.property": {}
1711
+ }
1712
+ },
1713
+ "font-weight": {
1714
+ "$extensions": {
1715
+ "nl.nldesignsystem.css.property": {}
1716
+ }
1717
+ },
1718
+ "line-height": {
1719
+ "$extensions": {
1720
+ "nl.nldesignsystem.css.property": {
1721
+ "syntax": {}
1722
+ }
1723
+ }
1724
+ },
1725
+ "min-block-size": {
1726
+ "$extensions": {
1727
+ "nl.nldesignsystem.css.property": {}
1728
+ }
1729
+ },
1730
+ "min-inline-size": {
1731
+ "$extensions": {
1732
+ "nl.nldesignsystem.css.property": {}
1733
+ }
1734
+ },
1735
+ "padding-block": {
1736
+ "$extensions": {
1737
+ "nl.nldesignsystem.css.property": {}
1738
+ }
1739
+ },
1740
+ "padding-inline": {
1741
+ "$extensions": {
1742
+ "nl.nldesignsystem.css.property": {}
1743
+ }
1744
+ }
1745
+ },
1717
1746
  "data-list": {
1718
1747
  "margin-block-end": DesignToken,
1719
1748
  "margin-block-start": DesignToken,
@@ -2516,11 +2545,7 @@ declare const tokens: {
2516
2545
  },
2517
2546
  "icon": {
2518
2547
  "size": DesignToken,
2519
- "inset-block-start": {
2520
- "$extensions": {
2521
- "nl.nldesignsystem.css.property": {}
2522
- }
2523
- }
2548
+ "inset-block-start": DesignToken
2524
2549
  }
2525
2550
  },
2526
2551
  "link-social": {
@@ -2907,8 +2932,16 @@ declare const tokens: {
2907
2932
  },
2908
2933
  "multiline-data": {},
2909
2934
  "nav-bar": {
2910
- "background-color": DesignToken,
2911
- "color": DesignToken,
2935
+ "background-color": {
2936
+ "$extensions": {
2937
+ "nl.nldesignsystem.css.property": {}
2938
+ }
2939
+ },
2940
+ "color": {
2941
+ "$extensions": {
2942
+ "nl.nldesignsystem.css.property": {}
2943
+ }
2944
+ },
2912
2945
  "content": {
2913
2946
  "background-color": {
2914
2947
  "$extensions": {
@@ -3066,37 +3099,23 @@ declare const tokens: {
3066
3099
  }
3067
3100
  },
3068
3101
  "content": {
3069
- "background-color": {
3070
- "$extensions": {
3071
- "nl.nldesignsystem.css.property": {}
3072
- }
3073
- },
3074
- "color": {
3075
- "$extensions": {
3076
- "nl.nldesignsystem.css.property": {}
3077
- }
3078
- },
3079
- "padding-block-start": {
3080
- "$extensions": {
3081
- "nl.nldesignsystem.css.property": {}
3082
- }
3083
- },
3084
- "padding-block-end": {
3085
- "$extensions": {
3086
- "nl.nldesignsystem.css.property": {}
3087
- }
3088
- },
3089
- "padding-inline-start": {
3090
- "$extensions": {
3091
- "nl.nldesignsystem.css.property": {}
3092
- }
3093
- },
3102
+ "background-color": DesignToken,
3103
+ "color": DesignToken,
3104
+ "padding-block-start": DesignToken,
3105
+ "padding-block-end": DesignToken,
3106
+ "padding-inline-start": DesignToken,
3094
3107
  "padding-inine-end": {
3095
3108
  "$extensions": {
3096
3109
  "nl.nldesignsystem.css.property": {}
3097
3110
  }
3098
- }
3099
- }
3111
+ },
3112
+ "max-inline-size": DesignToken,
3113
+ "padding-inline-end": DesignToken
3114
+ },
3115
+ "padding-inline-end": DesignToken,
3116
+ "padding-inline-start": DesignToken,
3117
+ "padding-block-end": DesignToken,
3118
+ "padding-block-start": DesignToken
3100
3119
  },
3101
3120
  "page-content": {
3102
3121
  "padding-block-start": DesignToken,
@@ -3116,10 +3135,26 @@ declare const tokens: {
3116
3135
  "color": DesignToken,
3117
3136
  "background-color": DesignToken,
3118
3137
  "background-image": DesignToken,
3119
- "padding-inline-end": DesignToken,
3120
- "padding-inline-start": DesignToken,
3121
- "padding-block-end": DesignToken,
3122
- "padding-block-start": DesignToken,
3138
+ "padding-inline-end": {
3139
+ "$extensions": {
3140
+ "nl.nldesignsystem.css.property": {}
3141
+ }
3142
+ },
3143
+ "padding-inline-start": {
3144
+ "$extensions": {
3145
+ "nl.nldesignsystem.css.property": {}
3146
+ }
3147
+ },
3148
+ "padding-block-end": {
3149
+ "$extensions": {
3150
+ "nl.nldesignsystem.css.property": {}
3151
+ }
3152
+ },
3153
+ "padding-block-start": {
3154
+ "$extensions": {
3155
+ "nl.nldesignsystem.css.property": {}
3156
+ }
3157
+ },
3123
3158
  "content": {
3124
3159
  "color": {
3125
3160
  "$extensions": {
@@ -3141,16 +3176,10 @@ declare const tokens: {
3141
3176
  "nl.nldesignsystem.css.property": {}
3142
3177
  }
3143
3178
  },
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
- }
3179
+ "padding-block-end": DesignToken,
3180
+ "padding-block-start": DesignToken,
3181
+ "max-inline-size": DesignToken,
3182
+ "padding-inline": DesignToken
3154
3183
  }
3155
3184
  },
3156
3185
  "page-header": {
@@ -3174,36 +3203,14 @@ declare const tokens: {
3174
3203
  "padding-inline-start": DesignToken,
3175
3204
  "padding-inline-end": DesignToken,
3176
3205
  "content": {
3177
- "background-color": {
3178
- "$extensions": {
3179
- "nl.nldesignsystem.css.property": {}
3180
- }
3181
- },
3182
- "color": {
3183
- "$extensions": {
3184
- "nl.nldesignsystem.css.property": {}
3185
- }
3186
- },
3187
- "padding-block-start": {
3188
- "$extensions": {
3189
- "nl.nldesignsystem.css.property": {}
3190
- }
3191
- },
3192
- "padding-block-end": {
3193
- "$extensions": {
3194
- "nl.nldesignsystem.css.property": {}
3195
- }
3196
- },
3197
- "padding-inline-start": {
3198
- "$extensions": {
3199
- "nl.nldesignsystem.css.property": {}
3200
- }
3201
- },
3202
- "padding-inline-end": {
3203
- "$extensions": {
3204
- "nl.nldesignsystem.css.property": {}
3205
- }
3206
- }
3206
+ "background-color": DesignToken,
3207
+ "color": DesignToken,
3208
+ "padding-block-start": DesignToken,
3209
+ "padding-block-end": DesignToken,
3210
+ "padding-inline-start": DesignToken,
3211
+ "padding-inline-end": DesignToken,
3212
+ "max-inline-size": DesignToken,
3213
+ "padding-inline": DesignToken
3207
3214
  }
3208
3215
  },
3209
3216
  "page-layout": {},
@@ -3314,7 +3321,12 @@ declare const tokens: {
3314
3321
  "margin-block-start": DesignToken,
3315
3322
  "margin-block-end": DesignToken,
3316
3323
  "lead": {
3317
- "color": DesignToken,
3324
+ "color": {
3325
+ "$extensions": {
3326
+ "nl.nldesignsystem.css.property": {},
3327
+ "nl.nldesignsystem.fallback": {}
3328
+ }
3329
+ },
3318
3330
  "font-size": DesignToken,
3319
3331
  "font-weight": DesignToken,
3320
3332
  "line-height": DesignToken
@@ -3379,6 +3391,7 @@ declare const tokens: {
3379
3391
  "background-color": DesignToken,
3380
3392
  "border-color": DesignToken,
3381
3393
  "border-width": DesignToken,
3394
+ "color": DesignToken,
3382
3395
  "size": DesignToken,
3383
3396
  "margin-block-start": {
3384
3397
  "$extensions": {
@@ -3543,7 +3556,6 @@ declare const tokens: {
3543
3556
  }
3544
3557
  }
3545
3558
  },
3546
- "color": DesignToken,
3547
3559
  "border-radius": DesignToken
3548
3560
  },
3549
3561
  "rich-text": {
@@ -3564,16 +3576,8 @@ declare const tokens: {
3564
3576
  }
3565
3577
  },
3566
3578
  "root": {
3567
- "background-color": {
3568
- "$extensions": {
3569
- "nl.nldesignsystem.css.property": {}
3570
- }
3571
- },
3572
- "color": {
3573
- "$extensions": {
3574
- "nl.nldesignsystem.css.property": {}
3575
- }
3576
- },
3579
+ "background-color": DesignToken,
3580
+ "color": DesignToken,
3577
3581
  "font-family": {
3578
3582
  "$extensions": {
3579
3583
  "nl.nldesignsystem.css.property": {}
@@ -3944,6 +3948,11 @@ declare const tokens: {
3944
3948
  "nl.nldesignsystem.css.property": {}
3945
3949
  }
3946
3950
  },
3951
+ "border-radius": {
3952
+ "$extensions": {
3953
+ "nl.nldesignsystem.css.property": {}
3954
+ }
3955
+ },
3947
3956
  "border-width": {
3948
3957
  "$extensions": {
3949
3958
  "nl.nldesignsystem.css.property": {}
@@ -4999,6 +5008,117 @@ declare const tokens: {
4999
5008
  }
5000
5009
  }
5001
5010
  },
5011
+ "nl": {
5012
+ "code-block": {
5013
+ "background-color": DesignToken,
5014
+ "color": DesignToken,
5015
+ "font-family": DesignToken,
5016
+ "font-size": DesignToken,
5017
+ "line-height": DesignToken,
5018
+ "padding-block": DesignToken,
5019
+ "padding-inline": DesignToken
5020
+ },
5021
+ "code": {
5022
+ "background-color": {},
5023
+ "color": {},
5024
+ "font-family": {},
5025
+ "font-size": {},
5026
+ "line-height": {}
5027
+ },
5028
+ "data-badge": {
5029
+ "background-color": DesignToken,
5030
+ "border-radius": DesignToken,
5031
+ "color": DesignToken,
5032
+ "font-weight": {},
5033
+ "padding-block": DesignToken,
5034
+ "padding-inline": DesignToken
5035
+ },
5036
+ "heading": {
5037
+ "level-1": {
5038
+ "color": {},
5039
+ "font-family": DesignToken,
5040
+ "font-size": DesignToken,
5041
+ "font-weight": DesignToken,
5042
+ "line-height": DesignToken
5043
+ },
5044
+ "level-2": {
5045
+ "color": {},
5046
+ "font-family": DesignToken,
5047
+ "font-size": DesignToken,
5048
+ "font-weight": DesignToken,
5049
+ "line-height": DesignToken
5050
+ },
5051
+ "level-3": {
5052
+ "color": {},
5053
+ "font-family": DesignToken,
5054
+ "font-size": DesignToken,
5055
+ "font-weight": DesignToken,
5056
+ "line-height": DesignToken
5057
+ },
5058
+ "level-4": {
5059
+ "color": {},
5060
+ "font-family": DesignToken,
5061
+ "font-size": DesignToken,
5062
+ "font-weight": DesignToken,
5063
+ "line-height": DesignToken
5064
+ },
5065
+ "level-5": {
5066
+ "color": {},
5067
+ "font-family": DesignToken,
5068
+ "font-size": DesignToken,
5069
+ "font-weight": DesignToken,
5070
+ "line-height": DesignToken
5071
+ },
5072
+ "level-6": {
5073
+ "color": {},
5074
+ "font-family": DesignToken,
5075
+ "font-size": DesignToken,
5076
+ "font-weight": DesignToken,
5077
+ "line-height": DesignToken
5078
+ }
5079
+ },
5080
+ "mark": {
5081
+ "background-color": DesignToken,
5082
+ "color": DesignToken
5083
+ },
5084
+ "number-badge": {
5085
+ "background-color": DesignToken,
5086
+ "border-radius": DesignToken,
5087
+ "color": DesignToken,
5088
+ "font-size": DesignToken,
5089
+ "font-weight": {},
5090
+ "padding-block": DesignToken,
5091
+ "padding-inline": DesignToken
5092
+ },
5093
+ "paragraph": {
5094
+ "color": {},
5095
+ "font-family": DesignToken,
5096
+ "font-size": DesignToken,
5097
+ "font-weight": DesignToken,
5098
+ "line-height": DesignToken,
5099
+ "lead": {
5100
+ "color": DesignToken,
5101
+ "font-size": DesignToken,
5102
+ "font-weight": DesignToken,
5103
+ "line-height": DesignToken
5104
+ },
5105
+ "small": {
5106
+ "font-size": DesignToken
5107
+ }
5108
+ },
5109
+ "skip-link": {
5110
+ "background-color": DesignToken,
5111
+ "color": DesignToken,
5112
+ "padding-block": DesignToken,
5113
+ "padding-inline": DesignToken,
5114
+ "text-decoration": DesignToken,
5115
+ "focus-visible": {
5116
+ "color": DesignToken,
5117
+ "background-color": DesignToken,
5118
+ "text-decoration": DesignToken
5119
+ }
5120
+ }
5121
+ },
5002
5122
  "of": {
5003
5123
  "layout": {
5004
5124
  "background": DesignToken,
@@ -5014,5 +5134,14 @@ declare const tokens: {
5014
5134
  "box-shadow": DesignToken
5015
5135
  }
5016
5136
  }
5137
+ },
5138
+ "signalen": {
5139
+ "modal-dialog": {
5140
+ "background-color": DesignToken,
5141
+ "color": DesignToken
5142
+ },
5143
+ "progress-bar": {
5144
+ "border-radius": DesignToken
5145
+ }
5017
5146
  }
5018
5147
  }