@utrecht/design-tokens 2.1.1 → 2.2.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 (53) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/_mixin-theme.scss +3 -5
  3. package/dist/_mixin.scss +3 -5
  4. package/dist/_variables.scss +3 -5
  5. package/dist/dark/_mixin-theme.scss +3 -5
  6. package/dist/dark/_mixin.scss +3 -5
  7. package/dist/dark/_variables.scss +3 -5
  8. package/dist/dark/index.cjs +3 -5
  9. package/dist/dark/index.css +3 -5
  10. package/dist/dark/index.d.ts +2 -6
  11. package/dist/dark/index.flat.json +1 -3
  12. package/dist/dark/index.json +26 -40
  13. package/dist/dark/index.mjs +3 -5
  14. package/dist/dark/index.tokens.json +107 -12
  15. package/dist/dark/list.json +26 -40
  16. package/dist/dark/property.css +2 -0
  17. package/dist/dark/root.css +1 -3
  18. package/dist/dark/theme-prince-xml.css +3 -5
  19. package/dist/dark/theme.css +1 -3
  20. package/dist/dark/tokens.cjs +151 -68
  21. package/dist/dark/tokens.d.ts +61 -11
  22. package/dist/dark/tokens.json +153 -70
  23. package/dist/dark/variables.cjs +3 -5
  24. package/dist/dark/variables.css +1 -3
  25. package/dist/dark/variables.d.ts +2 -6
  26. package/dist/dark/variables.json +1 -3
  27. package/dist/dark/variables.less +3 -5
  28. package/dist/dark/variables.mjs +3 -5
  29. package/dist/index.cjs +3 -5
  30. package/dist/index.css +84 -10
  31. package/dist/index.d.ts +2 -6
  32. package/dist/index.flat.json +1 -3
  33. package/dist/index.json +26 -40
  34. package/dist/index.mjs +3 -5
  35. package/dist/index.tokens.json +107 -12
  36. package/dist/list.json +26 -40
  37. package/dist/property.css +2 -0
  38. package/dist/root.css +1 -3
  39. package/dist/theme-prince-xml.css +3 -5
  40. package/dist/theme.css +1 -3
  41. package/dist/tokens.cjs +151 -68
  42. package/dist/tokens.d.ts +61 -11
  43. package/dist/tokens.json +153 -70
  44. package/dist/variables.cjs +3 -5
  45. package/dist/variables.css +1 -3
  46. package/dist/variables.d.ts +2 -6
  47. package/dist/variables.json +1 -3
  48. package/dist/variables.less +3 -5
  49. package/dist/variables.mjs +3 -5
  50. package/package.json +1 -1
  51. package/src/brand/utrecht/typography.tokens.json +0 -2
  52. package/src/component/utrecht/blockquote.tokens.json +1 -1
  53. package/src/index.scss +79 -0
package/dist/tokens.cjs CHANGED
@@ -3516,7 +3516,7 @@ module.exports = {
3516
3516
  }
3517
3517
  },
3518
3518
  "type": "fontSize",
3519
- "value": "0.75rem",
3519
+ "value": "0.875rem",
3520
3520
  "filePath": "src/component/utrecht/blockquote.tokens.json",
3521
3521
  "isSource": true,
3522
3522
  "original": {
@@ -3531,7 +3531,7 @@ module.exports = {
3531
3531
  }
3532
3532
  },
3533
3533
  "type": "fontSize",
3534
- "value": "{utrecht.typography.scale.xs.font-size}"
3534
+ "value": "{utrecht.typography.scale.sm.font-size}"
3535
3535
  },
3536
3536
  "name": "font-size",
3537
3537
  "attributes": {},
@@ -22765,7 +22765,25 @@ module.exports = {
22765
22765
  ]
22766
22766
  }
22767
22767
  },
22768
- "selected": {
22768
+ "disabled": {
22769
+ "background-color": {
22770
+ "$extensions": {
22771
+ "nl.nldesignsystem.css.property": {
22772
+ "syntax": "<color>",
22773
+ "inherits": true
22774
+ }
22775
+ }
22776
+ },
22777
+ "color": {
22778
+ "$extensions": {
22779
+ "nl.nldesignsystem.css.property": {
22780
+ "syntax": "<color>",
22781
+ "inherits": true
22782
+ }
22783
+ }
22784
+ }
22785
+ },
22786
+ "hover": {
22769
22787
  "background-color": {
22770
22788
  "$extensions": {
22771
22789
  "nl.nldesignsystem.css.property": {
@@ -22773,7 +22791,7 @@ module.exports = {
22773
22791
  "inherits": true
22774
22792
  }
22775
22793
  },
22776
- "value": "hsl(0 0% 95%)",
22794
+ "value": "hsl(211 60% 90%)",
22777
22795
  "filePath": "src/component/utrecht/listbox.tokens.json",
22778
22796
  "isSource": true,
22779
22797
  "original": {
@@ -22783,7 +22801,7 @@ module.exports = {
22783
22801
  "inherits": true
22784
22802
  }
22785
22803
  },
22786
- "value": "{utrecht.color.grey.95}"
22804
+ "value": "{utrecht.color.blue.90}"
22787
22805
  },
22788
22806
  "name": "background-color",
22789
22807
  "attributes": {},
@@ -22791,7 +22809,7 @@ module.exports = {
22791
22809
  "utrecht",
22792
22810
  "listbox",
22793
22811
  "option",
22794
- "selected",
22812
+ "hover",
22795
22813
  "background-color"
22796
22814
  ]
22797
22815
  },
@@ -22820,55 +22838,115 @@ module.exports = {
22820
22838
  "utrecht",
22821
22839
  "listbox",
22822
22840
  "option",
22823
- "selected",
22841
+ "hover",
22824
22842
  "color"
22825
22843
  ]
22826
22844
  }
22827
22845
  },
22828
- "icon": {
22829
- "size": {
22846
+ "selected": {
22847
+ "background-color": {
22830
22848
  "$extensions": {
22831
22849
  "nl.nldesignsystem.css.property": {
22832
- "syntax": "<length>",
22850
+ "syntax": "<color>",
22833
22851
  "inherits": true
22834
22852
  }
22835
- }
22836
- }
22837
- },
22838
- "hover": {
22839
- "color": {
22840
- "value": "hsl(0 0% 0%)",
22853
+ },
22854
+ "value": "hsl(0 0% 95%)",
22841
22855
  "filePath": "src/component/utrecht/listbox.tokens.json",
22842
22856
  "isSource": true,
22843
22857
  "original": {
22844
- "value": "{utrecht.color.black}"
22858
+ "$extensions": {
22859
+ "nl.nldesignsystem.css.property": {
22860
+ "syntax": "<color>",
22861
+ "inherits": true
22862
+ }
22863
+ },
22864
+ "value": "{utrecht.color.grey.95}"
22845
22865
  },
22846
- "name": "color",
22866
+ "name": "background-color",
22847
22867
  "attributes": {},
22848
22868
  "path": [
22849
22869
  "utrecht",
22850
22870
  "listbox",
22851
22871
  "option",
22852
- "hover",
22853
- "color"
22872
+ "selected",
22873
+ "background-color"
22854
22874
  ]
22855
22875
  },
22856
- "background-color": {
22857
- "value": "hsl(211 60% 90%)",
22876
+ "color": {
22877
+ "$extensions": {
22878
+ "nl.nldesignsystem.css.property": {
22879
+ "syntax": "<color>",
22880
+ "inherits": true
22881
+ }
22882
+ },
22883
+ "value": "hsl(0 0% 0%)",
22858
22884
  "filePath": "src/component/utrecht/listbox.tokens.json",
22859
22885
  "isSource": true,
22860
22886
  "original": {
22861
- "value": "{utrecht.color.blue.90}"
22887
+ "$extensions": {
22888
+ "nl.nldesignsystem.css.property": {
22889
+ "syntax": "<color>",
22890
+ "inherits": true
22891
+ }
22892
+ },
22893
+ "value": "{utrecht.color.black}"
22862
22894
  },
22863
- "name": "background-color",
22895
+ "name": "color",
22864
22896
  "attributes": {},
22865
22897
  "path": [
22866
22898
  "utrecht",
22867
22899
  "listbox",
22868
22900
  "option",
22869
- "hover",
22870
- "background-color"
22901
+ "selected",
22902
+ "color"
22871
22903
  ]
22904
+ },
22905
+ "disabled": {
22906
+ "background-color": {
22907
+ "$extensions": {
22908
+ "nl.nldesignsystem.css.property": {
22909
+ "syntax": "<color>",
22910
+ "inherits": true
22911
+ }
22912
+ }
22913
+ },
22914
+ "color": {
22915
+ "$extensions": {
22916
+ "nl.nldesignsystem.css.property": {
22917
+ "syntax": "<color>",
22918
+ "inherits": true
22919
+ }
22920
+ }
22921
+ }
22922
+ },
22923
+ "hover": {
22924
+ "background-color": {
22925
+ "$extensions": {
22926
+ "nl.nldesignsystem.css.property": {
22927
+ "syntax": "<color>",
22928
+ "inherits": true
22929
+ }
22930
+ }
22931
+ },
22932
+ "color": {
22933
+ "$extensions": {
22934
+ "nl.nldesignsystem.css.property": {
22935
+ "syntax": "<color>",
22936
+ "inherits": true
22937
+ }
22938
+ }
22939
+ }
22940
+ }
22941
+ },
22942
+ "icon": {
22943
+ "size": {
22944
+ "$extensions": {
22945
+ "nl.nldesignsystem.css.property": {
22946
+ "syntax": "<length>",
22947
+ "inherits": true
22948
+ }
22949
+ }
22872
22950
  }
22873
22951
  }
22874
22952
  },
@@ -30980,6 +31058,53 @@ module.exports = {
30980
31058
  "type": "color"
30981
31059
  }
30982
31060
  },
31061
+ "hover": {
31062
+ "background-color": {
31063
+ "$extensions": {
31064
+ "nl.nldesignsystem.css.property": {
31065
+ "syntax": "<color>",
31066
+ "inherits": true
31067
+ },
31068
+ "nl.nldesignsystem.fallback": [
31069
+ "utrecht.form-control.hover.background-color",
31070
+ "utrecht.select.background-color",
31071
+ "utrecht.form-control.background-color"
31072
+ ],
31073
+ "nl.nldesignsystem.figma.supports-token": true
31074
+ },
31075
+ "type": "color"
31076
+ },
31077
+ "border-color": {
31078
+ "$extensions": {
31079
+ "nl.nldesignsystem.css.property": {
31080
+ "syntax": "<color>",
31081
+ "inherits": true
31082
+ },
31083
+ "nl.nldesignsystem.fallback": [
31084
+ "utrecht.form-control.hover.border-color",
31085
+ "utrecht.select.border-color",
31086
+ "utrecht.form-control.border-color"
31087
+ ],
31088
+ "nl.nldesignsystem.figma.supports-token": true
31089
+ },
31090
+ "type": "color"
31091
+ },
31092
+ "color": {
31093
+ "$extensions": {
31094
+ "nl.nldesignsystem.css.property": {
31095
+ "syntax": "<color>",
31096
+ "inherits": true
31097
+ },
31098
+ "nl.nldesignsystem.fallback": [
31099
+ "utrecht.form-control.hover.color",
31100
+ "utrecht.select.color",
31101
+ "utrecht.form-control.color"
31102
+ ],
31103
+ "nl.nldesignsystem.figma.supports-token": true
31104
+ },
31105
+ "type": "color"
31106
+ }
31107
+ },
30983
31108
  "focus": {
30984
31109
  "background-color": {
30985
31110
  "$extensions": {
@@ -36435,48 +36560,6 @@ module.exports = {
36435
36560
  }
36436
36561
  },
36437
36562
  "scale": {
36438
- "2xs": {
36439
- "font-size": {
36440
- "value": "0.5rem",
36441
- "comment": "8px",
36442
- "filePath": "src/brand/utrecht/typography.tokens.json",
36443
- "isSource": true,
36444
- "original": {
36445
- "value": "8px",
36446
- "comment": "8px"
36447
- },
36448
- "name": "font-size",
36449
- "attributes": {},
36450
- "path": [
36451
- "utrecht",
36452
- "typography",
36453
- "scale",
36454
- "2xs",
36455
- "font-size"
36456
- ]
36457
- }
36458
- },
36459
- "xs": {
36460
- "font-size": {
36461
- "value": "0.75rem",
36462
- "comment": "12px",
36463
- "filePath": "src/brand/utrecht/typography.tokens.json",
36464
- "isSource": true,
36465
- "original": {
36466
- "value": "12px",
36467
- "comment": "12px"
36468
- },
36469
- "name": "font-size",
36470
- "attributes": {},
36471
- "path": [
36472
- "utrecht",
36473
- "typography",
36474
- "scale",
36475
- "xs",
36476
- "font-size"
36477
- ]
36478
- }
36479
- },
36480
36563
  "sm": {
36481
36564
  "font-size": {
36482
36565
  "value": "0.875rem",
package/dist/tokens.d.ts CHANGED
@@ -2705,20 +2705,56 @@ declare const tokens: {
2705
2705
  "color": DesignToken,
2706
2706
  "font-weight": DesignToken
2707
2707
  },
2708
- "selected": {
2708
+ "disabled": {
2709
+ "background-color": {
2710
+ "$extensions": {
2711
+ "nl.nldesignsystem.css.property": {}
2712
+ }
2713
+ },
2714
+ "color": {
2715
+ "$extensions": {
2716
+ "nl.nldesignsystem.css.property": {}
2717
+ }
2718
+ }
2719
+ },
2720
+ "hover": {
2709
2721
  "background-color": DesignToken,
2710
2722
  "color": DesignToken
2711
2723
  },
2724
+ "selected": {
2725
+ "background-color": DesignToken,
2726
+ "color": DesignToken,
2727
+ "disabled": {
2728
+ "background-color": {
2729
+ "$extensions": {
2730
+ "nl.nldesignsystem.css.property": {}
2731
+ }
2732
+ },
2733
+ "color": {
2734
+ "$extensions": {
2735
+ "nl.nldesignsystem.css.property": {}
2736
+ }
2737
+ }
2738
+ },
2739
+ "hover": {
2740
+ "background-color": {
2741
+ "$extensions": {
2742
+ "nl.nldesignsystem.css.property": {}
2743
+ }
2744
+ },
2745
+ "color": {
2746
+ "$extensions": {
2747
+ "nl.nldesignsystem.css.property": {}
2748
+ }
2749
+ }
2750
+ }
2751
+ },
2712
2752
  "icon": {
2713
2753
  "size": {
2714
2754
  "$extensions": {
2715
2755
  "nl.nldesignsystem.css.property": {}
2716
2756
  }
2717
2757
  }
2718
- },
2719
- "hover": {
2720
- "color": DesignToken,
2721
- "background-color": DesignToken
2722
2758
  }
2723
2759
  },
2724
2760
  "z-index": {},
@@ -3595,6 +3631,26 @@ declare const tokens: {
3595
3631
  }
3596
3632
  }
3597
3633
  },
3634
+ "hover": {
3635
+ "background-color": {
3636
+ "$extensions": {
3637
+ "nl.nldesignsystem.css.property": {},
3638
+ "nl.nldesignsystem.fallback": {}
3639
+ }
3640
+ },
3641
+ "border-color": {
3642
+ "$extensions": {
3643
+ "nl.nldesignsystem.css.property": {},
3644
+ "nl.nldesignsystem.fallback": {}
3645
+ }
3646
+ },
3647
+ "color": {
3648
+ "$extensions": {
3649
+ "nl.nldesignsystem.css.property": {},
3650
+ "nl.nldesignsystem.fallback": {}
3651
+ }
3652
+ }
3653
+ },
3598
3654
  "focus": {
3599
3655
  "background-color": {
3600
3656
  "$extensions": {
@@ -4566,12 +4622,6 @@ declare const tokens: {
4566
4622
  "font-family": DesignToken
4567
4623
  },
4568
4624
  "scale": {
4569
- "2xs": {
4570
- "font-size": DesignToken
4571
- },
4572
- "xs": {
4573
- "font-size": DesignToken
4574
- },
4575
4625
  "sm": {
4576
4626
  "font-size": DesignToken
4577
4627
  },