@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.
- package/CHANGELOG.md +6 -0
- package/dist/dark/index.tokens.json +334 -2
- package/dist/dark/list.d.ts +14 -0
- package/dist/dark/list.mjs +30694 -0
- package/dist/dark/tokens.cjs +332 -0
- package/dist/dark/tokens.d.ts +178 -2
- package/dist/dark/tokens.json +332 -0
- package/dist/index.tokens.json +334 -2
- package/dist/list.d.ts +14 -0
- package/dist/list.mjs +31811 -0
- package/dist/tokens.cjs +332 -0
- package/dist/tokens.d.ts +178 -2
- package/dist/tokens.json +332 -0
- package/package.json +1 -1
- package/src/css-property-formatter.mjs +2 -1
- package/src/json-list-formatter.js +2 -1
- package/style-dictionary-build.mjs +3 -1
- package/style-dictionary-config.mjs +27 -0
package/CHANGELOG.md
CHANGED
|
@@ -409,6 +409,7 @@
|
|
|
409
409
|
"color": "hsl(0 0% 100%)"
|
|
410
410
|
}
|
|
411
411
|
},
|
|
412
|
+
"alternate-lang-nav": {},
|
|
412
413
|
"article": {
|
|
413
414
|
"max-inline-size": "780px"
|
|
414
415
|
},
|
|
@@ -868,6 +869,51 @@
|
|
|
868
869
|
"margin-block-start": "1.6em",
|
|
869
870
|
"margin-block-end": "1.6em"
|
|
870
871
|
},
|
|
872
|
+
"body": {
|
|
873
|
+
"font-family": {
|
|
874
|
+
"$extensions": {
|
|
875
|
+
"nl.nldesignsystem.css.property": {
|
|
876
|
+
"syntax": "*",
|
|
877
|
+
"inherits": true
|
|
878
|
+
},
|
|
879
|
+
"nl.nldesignsystem.figma.supports-token": true
|
|
880
|
+
},
|
|
881
|
+
"type": "fontFamilies"
|
|
882
|
+
},
|
|
883
|
+
"font-size": {
|
|
884
|
+
"$extensions": {
|
|
885
|
+
"nl.nldesignsystem.css.property": {
|
|
886
|
+
"syntax": "<length>",
|
|
887
|
+
"inherits": true
|
|
888
|
+
},
|
|
889
|
+
"nl.nldesignsystem.figma.supports-token": true
|
|
890
|
+
},
|
|
891
|
+
"type": "fontSizes"
|
|
892
|
+
},
|
|
893
|
+
"font-weight": {
|
|
894
|
+
"$extensions": {
|
|
895
|
+
"nl.nldesignsystem.css.property": {
|
|
896
|
+
"syntax": "<number>",
|
|
897
|
+
"inherits": true
|
|
898
|
+
},
|
|
899
|
+
"nl.nldesignsystem.figma.supports-token": true
|
|
900
|
+
},
|
|
901
|
+
"type": "fontWeights"
|
|
902
|
+
},
|
|
903
|
+
"line-height": {
|
|
904
|
+
"$extensions": {
|
|
905
|
+
"nl.nldesignsystem.css.property": {
|
|
906
|
+
"syntax": [
|
|
907
|
+
"<length>",
|
|
908
|
+
"<number>"
|
|
909
|
+
],
|
|
910
|
+
"inherits": true
|
|
911
|
+
},
|
|
912
|
+
"nl.nldesignsystem.figma.supports-token": true
|
|
913
|
+
},
|
|
914
|
+
"type": "lineHeights"
|
|
915
|
+
}
|
|
916
|
+
},
|
|
871
917
|
"breadcrumb-nav": {
|
|
872
918
|
"min-block-size": "34px",
|
|
873
919
|
"font-family": {
|
|
@@ -2458,6 +2504,20 @@
|
|
|
2458
2504
|
}
|
|
2459
2505
|
}
|
|
2460
2506
|
},
|
|
2507
|
+
"combobox": {
|
|
2508
|
+
"popover": {
|
|
2509
|
+
"z-index": {
|
|
2510
|
+
"$extensions": {
|
|
2511
|
+
"nl.nldesignsystem.css.property": {
|
|
2512
|
+
"syntax": "<number>",
|
|
2513
|
+
"inherits": true
|
|
2514
|
+
},
|
|
2515
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
2516
|
+
},
|
|
2517
|
+
"type": "other"
|
|
2518
|
+
}
|
|
2519
|
+
}
|
|
2520
|
+
},
|
|
2461
2521
|
"action": {
|
|
2462
2522
|
"activate": {
|
|
2463
2523
|
"cursor": "pointer"
|
|
@@ -3892,6 +3952,7 @@
|
|
|
3892
3952
|
},
|
|
3893
3953
|
"font-weight": "700"
|
|
3894
3954
|
},
|
|
3955
|
+
"html-content": {},
|
|
3895
3956
|
"iban-data": {},
|
|
3896
3957
|
"icon": {
|
|
3897
3958
|
"color": {
|
|
@@ -4537,6 +4598,26 @@
|
|
|
4537
4598
|
"background-color": "hsl(0 0% 100%)",
|
|
4538
4599
|
"color": "hsl(0 0% 0%)",
|
|
4539
4600
|
"content": {
|
|
4601
|
+
"background-color": {
|
|
4602
|
+
"$extensions": {
|
|
4603
|
+
"nl.nldesignsystem.css.property": {
|
|
4604
|
+
"syntax": "<color>",
|
|
4605
|
+
"inherits": true
|
|
4606
|
+
},
|
|
4607
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
4608
|
+
},
|
|
4609
|
+
"type": "color"
|
|
4610
|
+
},
|
|
4611
|
+
"color": {
|
|
4612
|
+
"$extensions": {
|
|
4613
|
+
"nl.nldesignsystem.css.property": {
|
|
4614
|
+
"syntax": "<color>",
|
|
4615
|
+
"inherits": true
|
|
4616
|
+
},
|
|
4617
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
4618
|
+
},
|
|
4619
|
+
"type": "color"
|
|
4620
|
+
},
|
|
4540
4621
|
"max-inline-size": "1184px"
|
|
4541
4622
|
},
|
|
4542
4623
|
"link": {
|
|
@@ -4736,6 +4817,90 @@
|
|
|
4736
4817
|
"padding-inline-start": "0"
|
|
4737
4818
|
}
|
|
4738
4819
|
},
|
|
4820
|
+
"page-body": {
|
|
4821
|
+
"background-color": {
|
|
4822
|
+
"$extensions": {
|
|
4823
|
+
"nl.nldesignsystem.css.property": {
|
|
4824
|
+
"syntax": "<color>",
|
|
4825
|
+
"inherits": true
|
|
4826
|
+
},
|
|
4827
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
4828
|
+
},
|
|
4829
|
+
"type": "color"
|
|
4830
|
+
},
|
|
4831
|
+
"color": {
|
|
4832
|
+
"$extensions": {
|
|
4833
|
+
"nl.nldesignsystem.css.property": {
|
|
4834
|
+
"syntax": "<color>",
|
|
4835
|
+
"inherits": true
|
|
4836
|
+
},
|
|
4837
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
4838
|
+
},
|
|
4839
|
+
"type": "color"
|
|
4840
|
+
},
|
|
4841
|
+
"content": {
|
|
4842
|
+
"background-color": {
|
|
4843
|
+
"$extensions": {
|
|
4844
|
+
"nl.nldesignsystem.css.property": {
|
|
4845
|
+
"syntax": "<color>",
|
|
4846
|
+
"inherits": true
|
|
4847
|
+
},
|
|
4848
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
4849
|
+
},
|
|
4850
|
+
"type": "color"
|
|
4851
|
+
},
|
|
4852
|
+
"color": {
|
|
4853
|
+
"$extensions": {
|
|
4854
|
+
"nl.nldesignsystem.css.property": {
|
|
4855
|
+
"syntax": "<color>",
|
|
4856
|
+
"inherits": true
|
|
4857
|
+
},
|
|
4858
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
4859
|
+
},
|
|
4860
|
+
"type": "color"
|
|
4861
|
+
},
|
|
4862
|
+
"padding-block-start": {
|
|
4863
|
+
"$extensions": {
|
|
4864
|
+
"nl.nldesignsystem.css.property": {
|
|
4865
|
+
"syntax": "<length>",
|
|
4866
|
+
"inherits": true
|
|
4867
|
+
},
|
|
4868
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
4869
|
+
},
|
|
4870
|
+
"type": "spacing"
|
|
4871
|
+
},
|
|
4872
|
+
"padding-block-end": {
|
|
4873
|
+
"$extensions": {
|
|
4874
|
+
"nl.nldesignsystem.css.property": {
|
|
4875
|
+
"syntax": "<length>",
|
|
4876
|
+
"inherits": true
|
|
4877
|
+
},
|
|
4878
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
4879
|
+
},
|
|
4880
|
+
"type": "spacing"
|
|
4881
|
+
},
|
|
4882
|
+
"padding-inline-start": {
|
|
4883
|
+
"$extensions": {
|
|
4884
|
+
"nl.nldesignsystem.css.property": {
|
|
4885
|
+
"syntax": "<length>",
|
|
4886
|
+
"inherits": true
|
|
4887
|
+
},
|
|
4888
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
4889
|
+
},
|
|
4890
|
+
"type": "spacing"
|
|
4891
|
+
},
|
|
4892
|
+
"padding-inine-end": {
|
|
4893
|
+
"$extensions": {
|
|
4894
|
+
"nl.nldesignsystem.css.property": {
|
|
4895
|
+
"syntax": "<length>",
|
|
4896
|
+
"inherits": true
|
|
4897
|
+
},
|
|
4898
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
4899
|
+
},
|
|
4900
|
+
"type": "spacing"
|
|
4901
|
+
}
|
|
4902
|
+
}
|
|
4903
|
+
},
|
|
4739
4904
|
"page-content": {
|
|
4740
4905
|
"padding-block-start": "2em",
|
|
4741
4906
|
"padding-block-end": "2em",
|
|
@@ -4767,7 +4932,69 @@
|
|
|
4767
4932
|
"padding-inline-end": "28px",
|
|
4768
4933
|
"padding-inline-start": "28px",
|
|
4769
4934
|
"padding-block-end": "48px",
|
|
4770
|
-
"padding-block-start": "48px"
|
|
4935
|
+
"padding-block-start": "48px",
|
|
4936
|
+
"content": {
|
|
4937
|
+
"color": {
|
|
4938
|
+
"$extensions": {
|
|
4939
|
+
"nl.nldesignsystem.css.property": {
|
|
4940
|
+
"syntax": "<color>",
|
|
4941
|
+
"inherits": true
|
|
4942
|
+
},
|
|
4943
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
4944
|
+
},
|
|
4945
|
+
"type": "color"
|
|
4946
|
+
},
|
|
4947
|
+
"background-color": {
|
|
4948
|
+
"$extensions": {
|
|
4949
|
+
"nl.nldesignsystem.css.property": {
|
|
4950
|
+
"syntax": "<color>",
|
|
4951
|
+
"inherits": true
|
|
4952
|
+
},
|
|
4953
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
4954
|
+
},
|
|
4955
|
+
"type": "color"
|
|
4956
|
+
},
|
|
4957
|
+
"padding-inline-end": {
|
|
4958
|
+
"$extensions": {
|
|
4959
|
+
"nl.nldesignsystem.css.property": {
|
|
4960
|
+
"syntax": "<length>",
|
|
4961
|
+
"inherits": true
|
|
4962
|
+
},
|
|
4963
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
4964
|
+
},
|
|
4965
|
+
"type": "spacing"
|
|
4966
|
+
},
|
|
4967
|
+
"padding-inline-start": {
|
|
4968
|
+
"$extensions": {
|
|
4969
|
+
"nl.nldesignsystem.css.property": {
|
|
4970
|
+
"syntax": "<length>",
|
|
4971
|
+
"inherits": true
|
|
4972
|
+
},
|
|
4973
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
4974
|
+
},
|
|
4975
|
+
"type": "spacing"
|
|
4976
|
+
},
|
|
4977
|
+
"padding-block-end": {
|
|
4978
|
+
"$extensions": {
|
|
4979
|
+
"nl.nldesignsystem.css.property": {
|
|
4980
|
+
"syntax": "<length>",
|
|
4981
|
+
"inherits": true
|
|
4982
|
+
},
|
|
4983
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
4984
|
+
},
|
|
4985
|
+
"type": "spacing"
|
|
4986
|
+
},
|
|
4987
|
+
"padding-block-start": {
|
|
4988
|
+
"$extensions": {
|
|
4989
|
+
"nl.nldesignsystem.css.property": {
|
|
4990
|
+
"syntax": "<length>",
|
|
4991
|
+
"inherits": true
|
|
4992
|
+
},
|
|
4993
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
4994
|
+
},
|
|
4995
|
+
"type": "spacing"
|
|
4996
|
+
}
|
|
4997
|
+
}
|
|
4771
4998
|
},
|
|
4772
4999
|
"page-header": {
|
|
4773
5000
|
"background-color": {
|
|
@@ -4780,6 +5007,16 @@
|
|
|
4780
5007
|
},
|
|
4781
5008
|
"type": "color"
|
|
4782
5009
|
},
|
|
5010
|
+
"border-block-end-color": {
|
|
5011
|
+
"$extensions": {
|
|
5012
|
+
"nl.nldesignsystem.css.property": {
|
|
5013
|
+
"syntax": "<color>",
|
|
5014
|
+
"inherits": true
|
|
5015
|
+
},
|
|
5016
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
5017
|
+
},
|
|
5018
|
+
"type": "color"
|
|
5019
|
+
},
|
|
4783
5020
|
"color": {
|
|
4784
5021
|
"$extensions": {
|
|
4785
5022
|
"nl.nldesignsystem.css.property": {
|
|
@@ -4793,8 +5030,71 @@
|
|
|
4793
5030
|
"padding-block-start": "1.8em",
|
|
4794
5031
|
"padding-block-end": "1em",
|
|
4795
5032
|
"padding-inline-start": "2em",
|
|
4796
|
-
"padding-inline-end": "2.4em"
|
|
5033
|
+
"padding-inline-end": "2.4em",
|
|
5034
|
+
"content": {
|
|
5035
|
+
"background-color": {
|
|
5036
|
+
"$extensions": {
|
|
5037
|
+
"nl.nldesignsystem.css.property": {
|
|
5038
|
+
"syntax": "<color>",
|
|
5039
|
+
"inherits": true
|
|
5040
|
+
},
|
|
5041
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
5042
|
+
},
|
|
5043
|
+
"type": "color"
|
|
5044
|
+
},
|
|
5045
|
+
"color": {
|
|
5046
|
+
"$extensions": {
|
|
5047
|
+
"nl.nldesignsystem.css.property": {
|
|
5048
|
+
"syntax": "<color>",
|
|
5049
|
+
"inherits": true
|
|
5050
|
+
},
|
|
5051
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
5052
|
+
},
|
|
5053
|
+
"type": "color"
|
|
5054
|
+
},
|
|
5055
|
+
"padding-block-start": {
|
|
5056
|
+
"$extensions": {
|
|
5057
|
+
"nl.nldesignsystem.css.property": {
|
|
5058
|
+
"syntax": "<length>",
|
|
5059
|
+
"inherits": true
|
|
5060
|
+
},
|
|
5061
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
5062
|
+
},
|
|
5063
|
+
"type": "spacing"
|
|
5064
|
+
},
|
|
5065
|
+
"padding-block-end": {
|
|
5066
|
+
"$extensions": {
|
|
5067
|
+
"nl.nldesignsystem.css.property": {
|
|
5068
|
+
"syntax": "<length>",
|
|
5069
|
+
"inherits": true
|
|
5070
|
+
},
|
|
5071
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
5072
|
+
},
|
|
5073
|
+
"type": "spacing"
|
|
5074
|
+
},
|
|
5075
|
+
"padding-inline-start": {
|
|
5076
|
+
"$extensions": {
|
|
5077
|
+
"nl.nldesignsystem.css.property": {
|
|
5078
|
+
"syntax": "<length>",
|
|
5079
|
+
"inherits": true
|
|
5080
|
+
},
|
|
5081
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
5082
|
+
},
|
|
5083
|
+
"type": "spacing"
|
|
5084
|
+
},
|
|
5085
|
+
"padding-inline-end": {
|
|
5086
|
+
"$extensions": {
|
|
5087
|
+
"nl.nldesignsystem.css.property": {
|
|
5088
|
+
"syntax": "<length>",
|
|
5089
|
+
"inherits": true
|
|
5090
|
+
},
|
|
5091
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
5092
|
+
},
|
|
5093
|
+
"type": "spacing"
|
|
5094
|
+
}
|
|
5095
|
+
}
|
|
4797
5096
|
},
|
|
5097
|
+
"page-layout": {},
|
|
4798
5098
|
"page": {
|
|
4799
5099
|
"background-color": "hsl(0 0% 15%)",
|
|
4800
5100
|
"color": "hsl(0 0% 95%)",
|
|
@@ -5385,6 +5685,38 @@
|
|
|
5385
5685
|
"margin-block-end": 0
|
|
5386
5686
|
}
|
|
5387
5687
|
},
|
|
5688
|
+
"root": {
|
|
5689
|
+
"background-color": {
|
|
5690
|
+
"$extensions": {
|
|
5691
|
+
"nl.nldesignsystem.css.property": {
|
|
5692
|
+
"syntax": "<color>",
|
|
5693
|
+
"inherits": true
|
|
5694
|
+
},
|
|
5695
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
5696
|
+
},
|
|
5697
|
+
"type": "color"
|
|
5698
|
+
},
|
|
5699
|
+
"color": {
|
|
5700
|
+
"$extensions": {
|
|
5701
|
+
"nl.nldesignsystem.css.property": {
|
|
5702
|
+
"syntax": "<color>",
|
|
5703
|
+
"inherits": true
|
|
5704
|
+
},
|
|
5705
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
5706
|
+
},
|
|
5707
|
+
"type": "color"
|
|
5708
|
+
},
|
|
5709
|
+
"font-family": {
|
|
5710
|
+
"$extensions": {
|
|
5711
|
+
"nl.nldesignsystem.css.property": {
|
|
5712
|
+
"syntax": "*",
|
|
5713
|
+
"inherits": true
|
|
5714
|
+
},
|
|
5715
|
+
"nl.nldesignsystem.figma.supports-token": false
|
|
5716
|
+
},
|
|
5717
|
+
"type": "fontFamilies"
|
|
5718
|
+
}
|
|
5719
|
+
},
|
|
5388
5720
|
"search-bar": {
|
|
5389
5721
|
"button": {
|
|
5390
5722
|
"background-color": "hsl(0 100% 40%)",
|
|
@@ -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[];
|