@utrecht/design-tokens 2.2.0 → 2.3.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 (18) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/dark/index.tokens.json +334 -2
  3. package/dist/dark/list.d.ts +14 -0
  4. package/dist/dark/list.mjs +30694 -0
  5. package/dist/dark/tokens.cjs +332 -0
  6. package/dist/dark/tokens.d.ts +178 -2
  7. package/dist/dark/tokens.json +332 -0
  8. package/dist/index.tokens.json +334 -2
  9. package/dist/list.d.ts +14 -0
  10. package/dist/list.mjs +31811 -0
  11. package/dist/tokens.cjs +332 -0
  12. package/dist/tokens.d.ts +178 -2
  13. package/dist/tokens.json +332 -0
  14. package/package.json +1 -1
  15. package/src/css-property-formatter.mjs +2 -1
  16. package/src/json-list-formatter.js +2 -1
  17. package/style-dictionary-build.mjs +3 -1
  18. package/style-dictionary-config.mjs +27 -0
package/dist/index.tokens.json CHANGED
@@ -405,6 +405,7 @@
405
405
  }
406
406
  }
407
407
  },
408
+ "alternate-lang-nav": {},
408
409
  "article": {
409
410
  "max-inline-size": "780px"
410
411
  },
@@ -864,6 +865,51 @@
864
865
  "margin-block-start": "1.6em",
865
866
  "margin-block-end": "1.6em"
866
867
  },
868
+ "body": {
869
+ "font-family": {
870
+ "$extensions": {
871
+ "nl.nldesignsystem.css.property": {
872
+ "syntax": "*",
873
+ "inherits": true
874
+ },
875
+ "nl.nldesignsystem.figma.supports-token": true
876
+ },
877
+ "type": "fontFamilies"
878
+ },
879
+ "font-size": {
880
+ "$extensions": {
881
+ "nl.nldesignsystem.css.property": {
882
+ "syntax": "<length>",
883
+ "inherits": true
884
+ },
885
+ "nl.nldesignsystem.figma.supports-token": true
886
+ },
887
+ "type": "fontSizes"
888
+ },
889
+ "font-weight": {
890
+ "$extensions": {
891
+ "nl.nldesignsystem.css.property": {
892
+ "syntax": "<number>",
893
+ "inherits": true
894
+ },
895
+ "nl.nldesignsystem.figma.supports-token": true
896
+ },
897
+ "type": "fontWeights"
898
+ },
899
+ "line-height": {
900
+ "$extensions": {
901
+ "nl.nldesignsystem.css.property": {
902
+ "syntax": [
903
+ "<length>",
904
+ "<number>"
905
+ ],
906
+ "inherits": true
907
+ },
908
+ "nl.nldesignsystem.figma.supports-token": true
909
+ },
910
+ "type": "lineHeights"
911
+ }
912
+ },
867
913
  "breadcrumb-nav": {
868
914
  "min-block-size": "34px",
869
915
  "font-family": {
@@ -2454,6 +2500,20 @@
2454
2500
  }
2455
2501
  }
2456
2502
  },
2503
+ "combobox": {
2504
+ "popover": {
2505
+ "z-index": {
2506
+ "$extensions": {
2507
+ "nl.nldesignsystem.css.property": {
2508
+ "syntax": "<number>",
2509
+ "inherits": true
2510
+ },
2511
+ "nl.nldesignsystem.figma.supports-token": false
2512
+ },
2513
+ "type": "other"
2514
+ }
2515
+ }
2516
+ },
2457
2517
  "action": {
2458
2518
  "activate": {
2459
2519
  "cursor": "pointer"
@@ -3888,6 +3948,7 @@
3888
3948
  },
3889
3949
  "font-weight": "700"
3890
3950
  },
3951
+ "html-content": {},
3891
3952
  "iban-data": {},
3892
3953
  "icon": {
3893
3954
  "color": {
@@ -4533,6 +4594,26 @@
4533
4594
  "background-color": "hsl(0 0% 100%)",
4534
4595
  "color": "hsl(0 0% 0%)",
4535
4596
  "content": {
4597
+ "background-color": {
4598
+ "$extensions": {
4599
+ "nl.nldesignsystem.css.property": {
4600
+ "syntax": "<color>",
4601
+ "inherits": true
4602
+ },
4603
+ "nl.nldesignsystem.figma.supports-token": false
4604
+ },
4605
+ "type": "color"
4606
+ },
4607
+ "color": {
4608
+ "$extensions": {
4609
+ "nl.nldesignsystem.css.property": {
4610
+ "syntax": "<color>",
4611
+ "inherits": true
4612
+ },
4613
+ "nl.nldesignsystem.figma.supports-token": false
4614
+ },
4615
+ "type": "color"
4616
+ },
4536
4617
  "max-inline-size": "1184px"
4537
4618
  },
4538
4619
  "link": {
@@ -4732,6 +4813,90 @@
4732
4813
  "padding-inline-start": "0"
4733
4814
  }
4734
4815
  },
4816
+ "page-body": {
4817
+ "background-color": {
4818
+ "$extensions": {
4819
+ "nl.nldesignsystem.css.property": {
4820
+ "syntax": "<color>",
4821
+ "inherits": true
4822
+ },
4823
+ "nl.nldesignsystem.figma.supports-token": false
4824
+ },
4825
+ "type": "color"
4826
+ },
4827
+ "color": {
4828
+ "$extensions": {
4829
+ "nl.nldesignsystem.css.property": {
4830
+ "syntax": "<color>",
4831
+ "inherits": true
4832
+ },
4833
+ "nl.nldesignsystem.figma.supports-token": false
4834
+ },
4835
+ "type": "color"
4836
+ },
4837
+ "content": {
4838
+ "background-color": {
4839
+ "$extensions": {
4840
+ "nl.nldesignsystem.css.property": {
4841
+ "syntax": "<color>",
4842
+ "inherits": true
4843
+ },
4844
+ "nl.nldesignsystem.figma.supports-token": false
4845
+ },
4846
+ "type": "color"
4847
+ },
4848
+ "color": {
4849
+ "$extensions": {
4850
+ "nl.nldesignsystem.css.property": {
4851
+ "syntax": "<color>",
4852
+ "inherits": true
4853
+ },
4854
+ "nl.nldesignsystem.figma.supports-token": false
4855
+ },
4856
+ "type": "color"
4857
+ },
4858
+ "padding-block-start": {
4859
+ "$extensions": {
4860
+ "nl.nldesignsystem.css.property": {
4861
+ "syntax": "<length>",
4862
+ "inherits": true
4863
+ },
4864
+ "nl.nldesignsystem.figma.supports-token": false
4865
+ },
4866
+ "type": "spacing"
4867
+ },
4868
+ "padding-block-end": {
4869
+ "$extensions": {
4870
+ "nl.nldesignsystem.css.property": {
4871
+ "syntax": "<length>",
4872
+ "inherits": true
4873
+ },
4874
+ "nl.nldesignsystem.figma.supports-token": false
4875
+ },
4876
+ "type": "spacing"
4877
+ },
4878
+ "padding-inline-start": {
4879
+ "$extensions": {
4880
+ "nl.nldesignsystem.css.property": {
4881
+ "syntax": "<length>",
4882
+ "inherits": true
4883
+ },
4884
+ "nl.nldesignsystem.figma.supports-token": false
4885
+ },
4886
+ "type": "spacing"
4887
+ },
4888
+ "padding-inine-end": {
4889
+ "$extensions": {
4890
+ "nl.nldesignsystem.css.property": {
4891
+ "syntax": "<length>",
4892
+ "inherits": true
4893
+ },
4894
+ "nl.nldesignsystem.figma.supports-token": false
4895
+ },
4896
+ "type": "spacing"
4897
+ }
4898
+ }
4899
+ },
4735
4900
  "page-content": {
4736
4901
  "padding-block-start": "2em",
4737
4902
  "padding-block-end": "2em",
@@ -4763,7 +4928,69 @@
4763
4928
  "padding-inline-end": "28px",
4764
4929
  "padding-inline-start": "28px",
4765
4930
  "padding-block-end": "48px",
4766
- "padding-block-start": "48px"
4931
+ "padding-block-start": "48px",
4932
+ "content": {
4933
+ "color": {
4934
+ "$extensions": {
4935
+ "nl.nldesignsystem.css.property": {
4936
+ "syntax": "<color>",
4937
+ "inherits": true
4938
+ },
4939
+ "nl.nldesignsystem.figma.supports-token": false
4940
+ },
4941
+ "type": "color"
4942
+ },
4943
+ "background-color": {
4944
+ "$extensions": {
4945
+ "nl.nldesignsystem.css.property": {
4946
+ "syntax": "<color>",
4947
+ "inherits": true
4948
+ },
4949
+ "nl.nldesignsystem.figma.supports-token": false
4950
+ },
4951
+ "type": "color"
4952
+ },
4953
+ "padding-inline-end": {
4954
+ "$extensions": {
4955
+ "nl.nldesignsystem.css.property": {
4956
+ "syntax": "<length>",
4957
+ "inherits": true
4958
+ },
4959
+ "nl.nldesignsystem.figma.supports-token": false
4960
+ },
4961
+ "type": "spacing"
4962
+ },
4963
+ "padding-inline-start": {
4964
+ "$extensions": {
4965
+ "nl.nldesignsystem.css.property": {
4966
+ "syntax": "<length>",
4967
+ "inherits": true
4968
+ },
4969
+ "nl.nldesignsystem.figma.supports-token": false
4970
+ },
4971
+ "type": "spacing"
4972
+ },
4973
+ "padding-block-end": {
4974
+ "$extensions": {
4975
+ "nl.nldesignsystem.css.property": {
4976
+ "syntax": "<length>",
4977
+ "inherits": true
4978
+ },
4979
+ "nl.nldesignsystem.figma.supports-token": false
4980
+ },
4981
+ "type": "spacing"
4982
+ },
4983
+ "padding-block-start": {
4984
+ "$extensions": {
4985
+ "nl.nldesignsystem.css.property": {
4986
+ "syntax": "<length>",
4987
+ "inherits": true
4988
+ },
4989
+ "nl.nldesignsystem.figma.supports-token": false
4990
+ },
4991
+ "type": "spacing"
4992
+ }
4993
+ }
4767
4994
  },
4768
4995
  "page-header": {
4769
4996
  "background-color": {
@@ -4776,6 +5003,16 @@
4776
5003
  },
4777
5004
  "type": "color"
4778
5005
  },
5006
+ "border-block-end-color": {
5007
+ "$extensions": {
5008
+ "nl.nldesignsystem.css.property": {
5009
+ "syntax": "<color>",
5010
+ "inherits": true
5011
+ },
5012
+ "nl.nldesignsystem.figma.supports-token": false
5013
+ },
5014
+ "type": "color"
5015
+ },
4779
5016
  "color": {
4780
5017
  "$extensions": {
4781
5018
  "nl.nldesignsystem.css.property": {
@@ -4789,8 +5026,71 @@
4789
5026
  "padding-block-start": "1.8em",
4790
5027
  "padding-block-end": "1em",
4791
5028
  "padding-inline-start": "2em",
4792
- "padding-inline-end": "2.4em"
5029
+ "padding-inline-end": "2.4em",
5030
+ "content": {
5031
+ "background-color": {
5032
+ "$extensions": {
5033
+ "nl.nldesignsystem.css.property": {
5034
+ "syntax": "<color>",
5035
+ "inherits": true
5036
+ },
5037
+ "nl.nldesignsystem.figma.supports-token": false
5038
+ },
5039
+ "type": "color"
5040
+ },
5041
+ "color": {
5042
+ "$extensions": {
5043
+ "nl.nldesignsystem.css.property": {
5044
+ "syntax": "<color>",
5045
+ "inherits": true
5046
+ },
5047
+ "nl.nldesignsystem.figma.supports-token": false
5048
+ },
5049
+ "type": "color"
5050
+ },
5051
+ "padding-block-start": {
5052
+ "$extensions": {
5053
+ "nl.nldesignsystem.css.property": {
5054
+ "syntax": "<length>",
5055
+ "inherits": true
5056
+ },
5057
+ "nl.nldesignsystem.figma.supports-token": false
5058
+ },
5059
+ "type": "spacing"
5060
+ },
5061
+ "padding-block-end": {
5062
+ "$extensions": {
5063
+ "nl.nldesignsystem.css.property": {
5064
+ "syntax": "<length>",
5065
+ "inherits": true
5066
+ },
5067
+ "nl.nldesignsystem.figma.supports-token": false
5068
+ },
5069
+ "type": "spacing"
5070
+ },
5071
+ "padding-inline-start": {
5072
+ "$extensions": {
5073
+ "nl.nldesignsystem.css.property": {
5074
+ "syntax": "<length>",
5075
+ "inherits": true
5076
+ },
5077
+ "nl.nldesignsystem.figma.supports-token": false
5078
+ },
5079
+ "type": "spacing"
5080
+ },
5081
+ "padding-inline-end": {
5082
+ "$extensions": {
5083
+ "nl.nldesignsystem.css.property": {
5084
+ "syntax": "<length>",
5085
+ "inherits": true
5086
+ },
5087
+ "nl.nldesignsystem.figma.supports-token": false
5088
+ },
5089
+ "type": "spacing"
5090
+ }
5091
+ }
4793
5092
  },
5093
+ "page-layout": {},
4794
5094
  "page": {
4795
5095
  "background-color": "hsl(0 0% 100%)",
4796
5096
  "color": "hsl(0 0% 0%)",
@@ -5381,6 +5681,38 @@
5381
5681
  "margin-block-end": 0
5382
5682
  }
5383
5683
  },
5684
+ "root": {
5685
+ "background-color": {
5686
+ "$extensions": {
5687
+ "nl.nldesignsystem.css.property": {
5688
+ "syntax": "<color>",
5689
+ "inherits": true
5690
+ },
5691
+ "nl.nldesignsystem.figma.supports-token": false
5692
+ },
5693
+ "type": "color"
5694
+ },
5695
+ "color": {
5696
+ "$extensions": {
5697
+ "nl.nldesignsystem.css.property": {
5698
+ "syntax": "<color>",
5699
+ "inherits": true
5700
+ },
5701
+ "nl.nldesignsystem.figma.supports-token": false
5702
+ },
5703
+ "type": "color"
5704
+ },
5705
+ "font-family": {
5706
+ "$extensions": {
5707
+ "nl.nldesignsystem.css.property": {
5708
+ "syntax": "*",
5709
+ "inherits": true
5710
+ },
5711
+ "nl.nldesignsystem.figma.supports-token": false
5712
+ },
5713
+ "type": "fontFamilies"
5714
+ }
5715
+ },
5384
5716
  "search-bar": {
5385
5717
  "button": {
5386
5718
  "background-color": "hsl(0 100% 40%)",
package/dist/list.d.ts ADDED
@@ -0,0 +1,14 @@
1
+
2
+ declare interface DesignToken {
3
+ value?: any;
4
+ type?: string;
5
+ comment?: string;
6
+ name?: string;
7
+ themeable?: boolean;
8
+ attributes?: Record<string, unknown>;
9
+ [key: string]: any;
10
+ }
11
+
12
+ export default tokens;
13
+
14
+ declare const tokens: DesignToken[];