@depersgroep/lfvp-design-tokens 0.129.0 → 0.131.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 (7) hide show
  1. package/package.json +1 -1
  2. package/tokens/$themes.json +12 -84
  3. package/tokens/base/typography.json +22 -22
  4. package/tokens/base/ui.json +2 -36
  5. package/tokens/components/button.json +215 -215
  6. package/tokens/components/form.json +6 -4
  7. package/tokens/components/top10.json +7 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@depersgroep/lfvp-design-tokens",
3
- "version": "0.129.0",
3
+ "version": "0.131.0",
4
4
  "description": "Figma design tokens for LFVP",
5
5
  "repository": {
6
6
  "type": "git",
package/tokens/$themes.json CHANGED
@@ -17,9 +17,6 @@
17
17
  "$figmaCollectionId": "VariableCollectionId:936:4507",
18
18
  "$figmaModeId": "936:0",
19
19
  "$figmaVariableReferences": {
20
- "toggle.color.off": "2483da546661f0d2add39572894a5fa2d49fc640",
21
- "toggle.color.on": "c7bb99a63a7509aec699b9d68bc1bd62f842c314",
22
- "top10.color.fill": "1c06fa024578323c5465470381a6f4b9ebcb6fdf",
23
20
  "landingpage.color.overlay4": "7d1a49b102a9a82d06d73ce8341096141a392b19",
24
21
  "base.ui.borderRadius.1": "b807b7ec97d7a06b244a487e1699e4b30a0d4bf3",
25
22
  "base.ui.spacing.1": "55e973f439a18cf1dc34a3dec45782a6cf589f3f",
@@ -173,7 +170,10 @@
173
170
  "button.primary.normal.textColor": "3d445c3714176e9b6325b9d43bd1be1047ca2507",
174
171
  "button.primary.hover.textColor": "36e827a0c521f7441c786f70c2f19871182bdbb6",
175
172
  "button.primary.active.textColor": "6c466de488225cb96d1076d16f0989757a6f1795",
176
- "button.primary.disabled.textColor": "f490060b1c861b285808752b5539094921881142"
173
+ "button.primary.disabled.textColor": "f490060b1c861b285808752b5539094921881142",
174
+ "toggle.off.color": "2483da546661f0d2add39572894a5fa2d49fc640",
175
+ "toggle.on.color": "c7bb99a63a7509aec699b9d68bc1bd62f842c314",
176
+ "top10.backgroundColor": "1c06fa024578323c5465470381a6f4b9ebcb6fdf"
177
177
  },
178
178
  "group": "Brands"
179
179
  },
@@ -195,9 +195,6 @@
195
195
  "$figmaCollectionId": "VariableCollectionId:936:4507",
196
196
  "$figmaModeId": "936:1",
197
197
  "$figmaVariableReferences": {
198
- "toggle.color.off": "2483da546661f0d2add39572894a5fa2d49fc640",
199
- "toggle.color.on": "c7bb99a63a7509aec699b9d68bc1bd62f842c314",
200
- "top10.color.border": "69f4fc917bad705ede18eede862ffdd616fded0c",
201
198
  "landingpage.color.overlay4": "7d1a49b102a9a82d06d73ce8341096141a392b19",
202
199
  "base.ui.borderRadius.1": "b807b7ec97d7a06b244a487e1699e4b30a0d4bf3",
203
200
  "base.ui.spacing.1": "55e973f439a18cf1dc34a3dec45782a6cf589f3f",
@@ -351,7 +348,10 @@
351
348
  "button.primary.normal.textColor": "3d445c3714176e9b6325b9d43bd1be1047ca2507",
352
349
  "button.primary.hover.textColor": "36e827a0c521f7441c786f70c2f19871182bdbb6",
353
350
  "button.primary.active.textColor": "6c466de488225cb96d1076d16f0989757a6f1795",
354
- "button.primary.disabled.textColor": "f490060b1c861b285808752b5539094921881142"
351
+ "button.primary.disabled.textColor": "f490060b1c861b285808752b5539094921881142",
352
+ "toggle.off.color": "2483da546661f0d2add39572894a5fa2d49fc640",
353
+ "toggle.on.color": "c7bb99a63a7509aec699b9d68bc1bd62f842c314",
354
+ "top10.borderColor": "69f4fc917bad705ede18eede862ffdd616fded0c"
355
355
  },
356
356
  "group": "Brands"
357
357
  },
@@ -373,9 +373,6 @@
373
373
  "$figmaCollectionId": "VariableCollectionId:936:4507",
374
374
  "$figmaModeId": "936:2",
375
375
  "$figmaVariableReferences": {
376
- "toggle.color.off": "2483da546661f0d2add39572894a5fa2d49fc640",
377
- "toggle.color.on": "c7bb99a63a7509aec699b9d68bc1bd62f842c314",
378
- "top10.color.border": "69f4fc917bad705ede18eede862ffdd616fded0c",
379
376
  "landingpage.color.overlay4": "7d1a49b102a9a82d06d73ce8341096141a392b19",
380
377
  "base.ui.borderRadius.1": "b807b7ec97d7a06b244a487e1699e4b30a0d4bf3",
381
378
  "base.ui.spacing.1": "55e973f439a18cf1dc34a3dec45782a6cf589f3f",
@@ -529,80 +526,11 @@
529
526
  "button.primary.normal.textColor": "3d445c3714176e9b6325b9d43bd1be1047ca2507",
530
527
  "button.primary.hover.textColor": "36e827a0c521f7441c786f70c2f19871182bdbb6",
531
528
  "button.primary.active.textColor": "6c466de488225cb96d1076d16f0989757a6f1795",
532
- "button.primary.disabled.textColor": "f490060b1c861b285808752b5539094921881142"
529
+ "button.primary.disabled.textColor": "f490060b1c861b285808752b5539094921881142",
530
+ "toggle.off.color": "2483da546661f0d2add39572894a5fa2d49fc640",
531
+ "toggle.on.color": "c7bb99a63a7509aec699b9d68bc1bd62f842c314",
532
+ "top10.borderColor": "69f4fc917bad705ede18eede862ffdd616fded0c"
533
533
  },
534
534
  "group": "Brands"
535
- },
536
- {
537
- "id": "9fc4b757d724055a14bb7116ceafdee99b3a3e90",
538
- "name": "Small-375",
539
- "$figmaStyleReferences": {},
540
- "selectedTokenSets": {
541
- "core": "source",
542
- "devices/small-375": "source"
543
- },
544
- "group": "Devices",
545
- "$figmaCollectionId": "VariableCollectionId:1246:4889",
546
- "$figmaModeId": "1246:0",
547
- "$figmaVariableReferences": {}
548
- },
549
- {
550
- "id": "9f78ffda012dd123589d4d465e3346f6c1676d3d",
551
- "name": "Medium-768",
552
- "$figmaStyleReferences": {},
553
- "selectedTokenSets": {
554
- "core": "source",
555
- "devices/medium-768": "source"
556
- },
557
- "group": "Devices",
558
- "$figmaCollectionId": "VariableCollectionId:1246:4889",
559
- "$figmaModeId": "1246:1",
560
- "$figmaVariableReferences": {}
561
- },
562
- {
563
- "id": "f2015ebd65dfcf9c05163abf742103c384d9b920",
564
- "name": "Large-1024",
565
- "$figmaStyleReferences": {},
566
- "selectedTokenSets": {
567
- "core": "source",
568
- "devices/large-1024": "source"
569
- },
570
- "group": "Devices",
571
- "$figmaCollectionId": "VariableCollectionId:1246:4889",
572
- "$figmaModeId": "1246:2",
573
- "$figmaVariableReferences": {}
574
- },
575
- {
576
- "id": "94c5d4aff157cf5e7b676a005d7ed05d68817468",
577
- "name": "xLarge-1440",
578
- "$figmaStyleReferences": {},
579
- "selectedTokenSets": {
580
- "core": "source",
581
- "devices/xLarge-1440": "source"
582
- },
583
- "group": "Devices",
584
- "$figmaCollectionId": "VariableCollectionId:1246:4889",
585
- "$figmaModeId": "1246:3",
586
- "$figmaVariableReferences": {}
587
- },
588
- {
589
- "id": "9e67e73a663c50eea5e074b79e8cf2ae498b8a55",
590
- "name": "xxLarge-1920",
591
- "$figmaStyleReferences": {},
592
- "selectedTokenSets": {
593
- "core": "source",
594
- "devices/xLarge-1440": "source"
595
- },
596
- "group": "Devices"
597
- },
598
- {
599
- "id": "e7abe0826659e36952dbfff77f0097f2128b8b06",
600
- "name": "TV",
601
- "$figmaStyleReferences": {},
602
- "selectedTokenSets": {
603
- "core": "source",
604
- "devices/tv": "source"
605
- },
606
- "group": "Devices"
607
535
  }
608
536
  ]
package/tokens/base/typography.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "fontFamily": "{base.primaryFont}",
8
8
  "fontWeight": "{base.fontWeight.title}",
9
9
  "lineHeight": "{core.lineHeight.120}",
10
- "fontSize": "{core.fontSize.72}*{flex.typeScale.title.level1}"
10
+ "fontSize": "{core.fontSize.72}"
11
11
  },
12
12
  "type": "typography"
13
13
  },
@@ -16,7 +16,7 @@
16
16
  "fontFamily": "{base.primaryFont}",
17
17
  "fontWeight": "{base.fontWeight.title}",
18
18
  "lineHeight": "{core.lineHeight.120}",
19
- "fontSize": "{core.fontSize.64}*{flex.typeScale.title.level2}"
19
+ "fontSize": "{core.fontSize.64}"
20
20
  },
21
21
  "type": "typography"
22
22
  },
@@ -25,7 +25,7 @@
25
25
  "fontFamily": "{base.primaryFont}",
26
26
  "fontWeight": "{base.fontWeight.title}",
27
27
  "lineHeight": "{core.lineHeight.120}",
28
- "fontSize": "{core.fontSize.56}*{flex.typeScale.title.level3}"
28
+ "fontSize": "{core.fontSize.56}"
29
29
  },
30
30
  "type": "typography"
31
31
  },
@@ -34,7 +34,7 @@
34
34
  "fontFamily": "{base.primaryFont}",
35
35
  "fontWeight": "{base.fontWeight.title}",
36
36
  "lineHeight": "{core.lineHeight.120}",
37
- "fontSize": "{core.fontSize.48}*{flex.typeScale.title.level4}"
37
+ "fontSize": "{core.fontSize.48}"
38
38
  },
39
39
  "type": "typography"
40
40
  },
@@ -43,7 +43,7 @@
43
43
  "fontFamily": "{base.primaryFont}",
44
44
  "fontWeight": "{base.fontWeight.title}",
45
45
  "lineHeight": "{core.lineHeight.120}",
46
- "fontSize": "{core.fontSize.40}*{flex.typeScale.title.level5}"
46
+ "fontSize": "{core.fontSize.40}"
47
47
  },
48
48
  "type": "typography"
49
49
  },
@@ -52,7 +52,7 @@
52
52
  "fontFamily": "{base.primaryFont}",
53
53
  "fontWeight": "{base.fontWeight.title}",
54
54
  "lineHeight": "{core.lineHeight.120}",
55
- "fontSize": "{core.fontSize.32}*{flex.typeScale.title.level6}"
55
+ "fontSize": "{core.fontSize.32}"
56
56
  },
57
57
  "type": "typography"
58
58
  },
@@ -61,7 +61,7 @@
61
61
  "fontFamily": "{base.primaryFont}",
62
62
  "fontWeight": "{base.fontWeight.title}",
63
63
  "lineHeight": "{core.lineHeight.120}",
64
- "fontSize": "{core.fontSize.28}*{flex.typeScale.title.level7}"
64
+ "fontSize": "{core.fontSize.28}"
65
65
  },
66
66
  "type": "typography"
67
67
  },
@@ -70,7 +70,7 @@
70
70
  "fontFamily": "{base.primaryFont}",
71
71
  "fontWeight": "{base.fontWeight.title}",
72
72
  "lineHeight": "{core.lineHeight.120}",
73
- "fontSize": "{core.fontSize.24}*{flex.typeScale.title.level8}"
73
+ "fontSize": "{core.fontSize.24}"
74
74
  },
75
75
  "type": "typography"
76
76
  },
@@ -79,7 +79,7 @@
79
79
  "fontFamily": "{base.primaryFont}",
80
80
  "fontWeight": "{base.fontWeight.title}",
81
81
  "lineHeight": "{core.lineHeight.130}",
82
- "fontSize": "{core.fontSize.20}*{flex.typeScale.title.level9}"
82
+ "fontSize": "{core.fontSize.20}"
83
83
  },
84
84
  "type": "typography"
85
85
  },
@@ -88,7 +88,7 @@
88
88
  "fontFamily": "{base.primaryFont}",
89
89
  "fontWeight": "{base.fontWeight.title}",
90
90
  "lineHeight": "{core.lineHeight.130}",
91
- "fontSize": "{core.fontSize.18}*{flex.typeScale.title.level10}"
91
+ "fontSize": "{core.fontSize.18}"
92
92
  },
93
93
  "type": "typography"
94
94
  },
@@ -97,7 +97,7 @@
97
97
  "fontFamily": "{base.primaryFont}",
98
98
  "fontWeight": "{base.fontWeight.title}",
99
99
  "lineHeight": "{core.lineHeight.130}",
100
- "fontSize": "{core.fontSize.16}*{flex.typeScale.title.level11}"
100
+ "fontSize": "{core.fontSize.16}"
101
101
  },
102
102
  "type": "typography"
103
103
  },
@@ -106,7 +106,7 @@
106
106
  "fontFamily": "{base.primaryFont}",
107
107
  "fontWeight": "{base.fontWeight.title}",
108
108
  "lineHeight": "{core.lineHeight.130}",
109
- "fontSize": "{core.fontSize.14}*{flex.typeScale.title.level12}"
109
+ "fontSize": "{core.fontSize.14}"
110
110
  },
111
111
  "type": "typography"
112
112
  }
@@ -116,7 +116,7 @@
116
116
  "value": {
117
117
  "fontFamily": "{base.primaryFont}",
118
118
  "lineHeight": "{core.lineHeight.140}",
119
- "fontSize": "{core.fontSize.12}*{flex.typeScale.text.xSmall}",
119
+ "fontSize": "{core.fontSize.12}",
120
120
  "fontWeight": "{base.fontWeight.default}"
121
121
  },
122
122
  "type": "typography"
@@ -125,7 +125,7 @@
125
125
  "value": {
126
126
  "fontFamily": "{base.primaryFont}",
127
127
  "lineHeight": "{core.lineHeight.140}",
128
- "fontSize": "{core.fontSize.14}*{flex.typeScale.text.small}",
128
+ "fontSize": "{core.fontSize.14}",
129
129
  "fontWeight": "{base.fontWeight.default}"
130
130
  },
131
131
  "type": "typography"
@@ -134,7 +134,7 @@
134
134
  "value": {
135
135
  "fontFamily": "{base.primaryFont}",
136
136
  "lineHeight": "{core.lineHeight.140}",
137
- "fontSize": "{core.fontSize.16}*{flex.typeScale.text.medium}",
137
+ "fontSize": "{core.fontSize.16}",
138
138
  "fontWeight": "{base.fontWeight.default}"
139
139
  },
140
140
  "type": "typography"
@@ -143,7 +143,7 @@
143
143
  "value": {
144
144
  "fontFamily": "{base.primaryFont}",
145
145
  "lineHeight": "{core.lineHeight.140}",
146
- "fontSize": "{core.fontSize.18}*{flex.typeScale.text.large}",
146
+ "fontSize": "{core.fontSize.18}",
147
147
  "fontWeight": "{base.fontWeight.default}"
148
148
  },
149
149
  "type": "typography"
@@ -152,7 +152,7 @@
152
152
  "value": {
153
153
  "fontFamily": "{base.primaryFont}",
154
154
  "lineHeight": "{core.lineHeight.140}",
155
- "fontSize": "{core.fontSize.20}*{flex.typeScale.text.xLarge}",
155
+ "fontSize": "{core.fontSize.20}",
156
156
  "fontWeight": "{base.fontWeight.default}"
157
157
  },
158
158
  "type": "typography"
@@ -163,7 +163,7 @@
163
163
  "value": {
164
164
  "fontFamily": "{base.primaryFont}",
165
165
  "lineHeight": "{core.lineHeight.140}",
166
- "fontSize": "{core.fontSize.12}*{flex.typeScale.text.xSmall}",
166
+ "fontSize": "{core.fontSize.12}",
167
167
  "fontWeight": "{base.fontWeight.bold}"
168
168
  },
169
169
  "type": "typography"
@@ -172,7 +172,7 @@
172
172
  "value": {
173
173
  "fontFamily": "{base.primaryFont}",
174
174
  "lineHeight": "{core.lineHeight.140}",
175
- "fontSize": "{core.fontSize.14}*{flex.typeScale.text.small}",
175
+ "fontSize": "{core.fontSize.14}",
176
176
  "fontWeight": "{base.fontWeight.bold}"
177
177
  },
178
178
  "type": "typography"
@@ -181,7 +181,7 @@
181
181
  "value": {
182
182
  "fontFamily": "{base.primaryFont}",
183
183
  "lineHeight": "{core.lineHeight.140}",
184
- "fontSize": "{core.fontSize.16}*{flex.typeScale.text.medium}",
184
+ "fontSize": "{core.fontSize.16}",
185
185
  "fontWeight": "{base.fontWeight.bold}"
186
186
  },
187
187
  "type": "typography"
@@ -190,7 +190,7 @@
190
190
  "value": {
191
191
  "fontFamily": "{base.primaryFont}",
192
192
  "lineHeight": "{core.lineHeight.140}",
193
- "fontSize": "{core.fontSize.18}*{flex.typeScale.text.large}",
193
+ "fontSize": "{core.fontSize.18}",
194
194
  "fontWeight": "{base.fontWeight.bold}"
195
195
  },
196
196
  "type": "typography"
@@ -199,7 +199,7 @@
199
199
  "value": {
200
200
  "fontFamily": "{base.primaryFont}",
201
201
  "lineHeight": "{core.lineHeight.140}",
202
- "fontSize": "{core.fontSize.20}*{flex.typeScale.text.xLarge}",
202
+ "fontSize": "{core.fontSize.20}",
203
203
  "fontWeight": "{base.fontWeight.bold}"
204
204
  },
205
205
  "type": "typography"
package/tokens/base/ui.json CHANGED
@@ -1,45 +1,11 @@
1
1
  {
2
2
  "base": {
3
- "ui": {
3
+ "container": {
4
4
  "borderRadius": {
5
- "1": {
5
+ "level1": {
6
6
  "value": "{base.borderRadius.1}",
7
7
  "type": "borderRadius"
8
8
  }
9
- },
10
- "spacing": {
11
- "1": {
12
- "value": "{flex.spacing.2}",
13
- "type": "spacing"
14
- },
15
- "2": {
16
- "value": "{flex.spacing.3}",
17
- "type": "spacing"
18
- },
19
- "3": {
20
- "value": "{flex.spacing.4}",
21
- "type": "spacing"
22
- },
23
- "4": {
24
- "value": "{flex.spacing.5}",
25
- "type": "spacing"
26
- },
27
- "5": {
28
- "value": "{flex.spacing.6}",
29
- "type": "spacing"
30
- },
31
- "6": {
32
- "value": "{flex.spacing.7}",
33
- "type": "spacing"
34
- },
35
- "7": {
36
- "value": "{flex.spacing.8}",
37
- "type": "spacing"
38
- },
39
- "8": {
40
- "value": "{flex.spacing.8}",
41
- "type": "spacing"
42
- }
43
9
  }
44
10
  }
45
11
  }
package/tokens/components/button.json CHANGED
@@ -1,216 +1,216 @@
1
1
  {
2
- "button": {
3
- "default": {
4
- "fontFamily": {
5
- "value": "{base.primaryFont}",
6
- "type": "fontFamilies"
7
- },
8
- "fontWeight": {
9
- "value": "{base.fontWeight.button}",
10
- "type": "fontWeights"
11
- },
12
- "lineHeight": {
13
- "value": "{core.lineHeight.100}",
14
- "type": "lineHeights"
15
- },
16
- "focusColor": {
17
- "value": "{base.color.functional.focus}",
18
- "type": "color"
19
- }
20
- },
21
- "small": {
22
- "fontSize": {
23
- "value": "{core.fontSize.14}*{flex.typeScale.component.button}",
24
- "type": "fontSizes"
25
- },
26
- "borderRadius": {
27
- "value": "{base.borderRadius.button}",
28
- "type": "borderRadius"
29
- },
30
- "horizontalPadding": {
31
- "value": "{button.small.fontSize}",
32
- "type": "spacing"
33
- },
34
- "verticalPadding": {
35
- "value": "{button.small.fontSize}*0.75",
36
- "type": "spacing"
37
- },
38
- "gap": {
39
- "value": "{button.small.fontSize}*0.5",
40
- "type": "spacing"
41
- }
42
- },
43
- "medium": {
44
- "fontSize": {
45
- "value": "{core.fontSize.16}*{flex.typeScale.component.button}",
46
- "type": "fontSizes"
47
- },
48
- "borderRadius": {
49
- "value": "{base.borderRadius.button}",
50
- "type": "borderRadius"
51
- },
52
- "horizontalPadding": {
53
- "value": "{button.medium.fontSize}",
54
- "type": "spacing"
55
- },
56
- "verticalPadding": {
57
- "value": "{button.medium.fontSize}*0.75",
58
- "type": "spacing"
59
- },
60
- "gap": {
61
- "value": "{button.medium.fontSize}*0.5",
62
- "type": "spacing"
63
- }
64
- },
65
- "transparent": {
66
- "normal": {
67
- "backgroundColor": {
68
- "value": "{core.color.softAlpha.20}",
69
- "type": "color"
70
- },
71
- "textColor": {
72
- "value": "{base.color.text.default}",
73
- "type": "color"
74
- }
75
- },
76
- "hover": {
77
- "backgroundColor": {
78
- "value": "{core.color.softAlpha.30}",
79
- "type": "color"
80
- },
81
- "textColor": {
82
- "value": "{base.color.text.default}",
83
- "type": "color"
84
- }
85
- },
86
- "active": {
87
- "backgroundColor": {
88
- "value": "{core.color.softAlpha.40}",
89
- "type": "color"
90
- },
91
- "textColor": {
92
- "value": "{base.color.text.default}",
93
- "type": "color"
94
- }
95
- },
96
- "disabled": {
97
- "backgroundColor": {
98
- "value": "{core.color.softAlpha.20}",
99
- "type": "color"
100
- },
101
- "textColor": {
102
- "value": "{base.color.ui.accent2}",
103
- "type": "color"
104
- }
105
- },
106
- "boxShadow": {
107
- "value": "{core.boxShadow.0}",
108
- "type": "boxShadow"
109
- },
110
- "textShadow": {
111
- "value": "{core.boxShadow.1}",
112
- "type": "boxShadow"
113
- }
114
- },
115
- "secondary": {
116
- "normal": {
117
- "backgroundColor": {
118
- "value": "{core.color.neutrals.15}",
119
- "type": "color"
120
- },
121
- "textColor": {
122
- "value": "{base.color.text.default}",
123
- "type": "color"
124
- }
125
- },
126
- "hover": {
127
- "backgroundColor": {
128
- "value": "{core.color.neutrals.20}",
129
- "type": "color"
130
- },
131
- "textColor": {
132
- "value": "{base.color.text.default}",
133
- "type": "color"
134
- }
135
- },
136
- "active": {
137
- "backgroundColor": {
138
- "value": "{core.color.neutrals.30}",
139
- "type": "color"
140
- },
141
- "textColor": {
142
- "value": "{base.color.text.default}",
143
- "type": "color"
144
- }
145
- },
146
- "disabled": {
147
- "backgroundColor": {
148
- "value": "{core.color.softAlpha.20}",
149
- "type": "color"
150
- },
151
- "textColor": {
152
- "value": "{base.color.ui.accent2}",
153
- "type": "color"
154
- }
155
- },
156
- "boxShadow": {
157
- "value": "{core.boxShadow.0}",
158
- "type": "boxShadow"
159
- },
160
- "textShadow": {
161
- "value": "{core.boxShadow.1}",
162
- "type": "boxShadow"
163
- }
164
- },
165
- "primary": {
166
- "normal": {
167
- "backgroundColor": {
168
- "value": "{base.color.primary.default}",
169
- "type": "color"
170
- },
171
- "textColor": {
172
- "value": "{base.color.text.default}",
173
- "type": "color"
174
- }
175
- },
176
- "hover": {
177
- "backgroundColor": {
178
- "value": "{base.color.primary.darker}",
179
- "type": "color"
180
- },
181
- "textColor": {
182
- "value": "{base.color.text.default}",
183
- "type": "color"
184
- }
185
- },
186
- "active": {
187
- "backgroundColor": {
188
- "value": "{base.color.primary.darkest}",
189
- "type": "color"
190
- },
191
- "textColor": {
192
- "value": "{base.color.text.default}",
193
- "type": "color"
194
- }
195
- },
196
- "disabled": {
197
- "backgroundColor": {
198
- "value": "{core.color.softAlpha.20}",
199
- "type": "color"
200
- },
201
- "textColor": {
202
- "value": "{base.color.ui.accent2}",
203
- "type": "color"
204
- }
205
- },
206
- "boxShadow": {
207
- "value": "{core.boxShadow.2}",
208
- "type": "boxShadow"
209
- },
210
- "textShadow": {
211
- "value": "{core.boxShadow.1}",
212
- "type": "boxShadow"
213
- }
214
- }
215
- }
216
- }
2
+ "button": {
3
+ "default": {
4
+ "fontFamily": {
5
+ "value": "{base.primaryFont}",
6
+ "type": "fontFamilies"
7
+ },
8
+ "fontWeight": {
9
+ "value": "{base.fontWeight.button}",
10
+ "type": "fontWeights"
11
+ },
12
+ "lineHeight": {
13
+ "value": "{core.lineHeight.100}",
14
+ "type": "lineHeights"
15
+ },
16
+ "focusColor": {
17
+ "value": "{base.color.functional.focus}",
18
+ "type": "color"
19
+ }
20
+ },
21
+ "small": {
22
+ "fontSize": {
23
+ "value": "{core.fontSize.14}",
24
+ "type": "fontSizes"
25
+ },
26
+ "borderRadius": {
27
+ "value": "{base.borderRadius.button}",
28
+ "type": "borderRadius"
29
+ },
30
+ "horizontalPadding": {
31
+ "value": "{button.small.fontSize}",
32
+ "type": "spacing"
33
+ },
34
+ "verticalPadding": {
35
+ "value": "{button.small.fontSize}*0.75",
36
+ "type": "spacing"
37
+ },
38
+ "gap": {
39
+ "value": "{button.small.fontSize}*0.5",
40
+ "type": "spacing"
41
+ }
42
+ },
43
+ "medium": {
44
+ "fontSize": {
45
+ "value": "{core.fontSize.16}",
46
+ "type": "fontSizes"
47
+ },
48
+ "borderRadius": {
49
+ "value": "{base.borderRadius.button}",
50
+ "type": "borderRadius"
51
+ },
52
+ "horizontalPadding": {
53
+ "value": "{button.medium.fontSize}",
54
+ "type": "spacing"
55
+ },
56
+ "verticalPadding": {
57
+ "value": "{button.medium.fontSize}*0.75",
58
+ "type": "spacing"
59
+ },
60
+ "gap": {
61
+ "value": "{button.medium.fontSize}*0.5",
62
+ "type": "spacing"
63
+ }
64
+ },
65
+ "transparent": {
66
+ "normal": {
67
+ "backgroundColor": {
68
+ "value": "{core.color.softAlpha.20}",
69
+ "type": "color"
70
+ },
71
+ "textColor": {
72
+ "value": "{base.color.text.default}",
73
+ "type": "color"
74
+ }
75
+ },
76
+ "hover": {
77
+ "backgroundColor": {
78
+ "value": "{core.color.softAlpha.30}",
79
+ "type": "color"
80
+ },
81
+ "textColor": {
82
+ "value": "{base.color.text.default}",
83
+ "type": "color"
84
+ }
85
+ },
86
+ "active": {
87
+ "backgroundColor": {
88
+ "value": "{core.color.softAlpha.40}",
89
+ "type": "color"
90
+ },
91
+ "textColor": {
92
+ "value": "{base.color.text.default}",
93
+ "type": "color"
94
+ }
95
+ },
96
+ "disabled": {
97
+ "backgroundColor": {
98
+ "value": "{core.color.softAlpha.20}",
99
+ "type": "color"
100
+ },
101
+ "textColor": {
102
+ "value": "{base.color.ui.accent2}",
103
+ "type": "color"
104
+ }
105
+ },
106
+ "boxShadow": {
107
+ "value": "{core.boxShadow.0}",
108
+ "type": "boxShadow"
109
+ },
110
+ "textShadow": {
111
+ "value": "{core.boxShadow.1}",
112
+ "type": "boxShadow"
113
+ }
114
+ },
115
+ "secondary": {
116
+ "normal": {
117
+ "backgroundColor": {
118
+ "value": "{core.color.neutrals.15}",
119
+ "type": "color"
120
+ },
121
+ "textColor": {
122
+ "value": "{base.color.text.default}",
123
+ "type": "color"
124
+ }
125
+ },
126
+ "hover": {
127
+ "backgroundColor": {
128
+ "value": "{core.color.neutrals.20}",
129
+ "type": "color"
130
+ },
131
+ "textColor": {
132
+ "value": "{base.color.text.default}",
133
+ "type": "color"
134
+ }
135
+ },
136
+ "active": {
137
+ "backgroundColor": {
138
+ "value": "{core.color.neutrals.30}",
139
+ "type": "color"
140
+ },
141
+ "textColor": {
142
+ "value": "{base.color.text.default}",
143
+ "type": "color"
144
+ }
145
+ },
146
+ "disabled": {
147
+ "backgroundColor": {
148
+ "value": "{core.color.softAlpha.20}",
149
+ "type": "color"
150
+ },
151
+ "textColor": {
152
+ "value": "{base.color.ui.accent2}",
153
+ "type": "color"
154
+ }
155
+ },
156
+ "boxShadow": {
157
+ "value": "{core.boxShadow.0}",
158
+ "type": "boxShadow"
159
+ },
160
+ "textShadow": {
161
+ "value": "{core.boxShadow.1}",
162
+ "type": "boxShadow"
163
+ }
164
+ },
165
+ "primary": {
166
+ "normal": {
167
+ "backgroundColor": {
168
+ "value": "{base.color.primary.default}",
169
+ "type": "color"
170
+ },
171
+ "textColor": {
172
+ "value": "{base.color.text.default}",
173
+ "type": "color"
174
+ }
175
+ },
176
+ "hover": {
177
+ "backgroundColor": {
178
+ "value": "{base.color.primary.darker}",
179
+ "type": "color"
180
+ },
181
+ "textColor": {
182
+ "value": "{base.color.text.default}",
183
+ "type": "color"
184
+ }
185
+ },
186
+ "active": {
187
+ "backgroundColor": {
188
+ "value": "{base.color.primary.darkest}",
189
+ "type": "color"
190
+ },
191
+ "textColor": {
192
+ "value": "{base.color.text.default}",
193
+ "type": "color"
194
+ }
195
+ },
196
+ "disabled": {
197
+ "backgroundColor": {
198
+ "value": "{core.color.softAlpha.20}",
199
+ "type": "color"
200
+ },
201
+ "textColor": {
202
+ "value": "{base.color.ui.accent2}",
203
+ "type": "color"
204
+ }
205
+ },
206
+ "boxShadow": {
207
+ "value": "{core.boxShadow.2}",
208
+ "type": "boxShadow"
209
+ },
210
+ "textShadow": {
211
+ "value": "{core.boxShadow.1}",
212
+ "type": "boxShadow"
213
+ }
214
+ }
215
+ }
216
+ }
package/tokens/components/form.json CHANGED
@@ -16,12 +16,14 @@
16
16
  }
17
17
  },
18
18
  "toggle": {
19
- "color": {
20
- "off": {
19
+ "off": {
20
+ "color": {
21
21
  "value": "{core.color.softAlpha.60}",
22
22
  "type": "color"
23
- },
24
- "on": {
23
+ }
24
+ },
25
+ "on": {
26
+ "color": {
25
27
  "value": "{base.color.primary.default}",
26
28
  "type": "color"
27
29
  }
package/tokens/components/top10.json CHANGED
@@ -1,14 +1,12 @@
1
1
  {
2
2
  "top10": {
3
- "color": {
4
- "fill": {
5
- "value": "{base.color.top10.fill}",
6
- "type": "color"
7
- },
8
- "border": {
9
- "value": "{base.color.top10.border}",
10
- "type": "color"
11
- }
3
+ "backgroundColor": {
4
+ "value": "{base.color.top10.fill}",
5
+ "type": "color"
6
+ },
7
+ "borderColor": {
8
+ "value": "{base.color.top10.border}",
9
+ "type": "color"
12
10
  }
13
11
  }
14
12
  }