@depersgroep/lfvp-design-tokens 0.383.0 → 0.384.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 (24) hide show
  1. package/package.json +1 -1
  2. package/tokens/$metadata.json +25 -27
  3. package/tokens/$themes.json +4 -12
  4. package/tokens/base/color.json +4 -16
  5. package/tokens/brands/rtlplay.json +17 -83
  6. package/tokens/brands/streamz.json +10 -76
  7. package/tokens/brands/vtmgo.json +13 -79
  8. package/tokens/brands/whitelabel.json +9 -75
  9. package/tokens/components/box.json +8 -3
  10. package/tokens/components/button.json +12 -76
  11. package/tokens/components/chapter-swimlane.json +8 -0
  12. package/tokens/components/detail-header.json +7 -20
  13. package/tokens/components/input.json +4 -0
  14. package/tokens/components/navigation.json +0 -26
  15. package/tokens/components/toggle.json +14 -98
  16. package/tokens/components/top-banner.json +2 -2
  17. package/tokens/core.json +12 -24
  18. package/tokens/screen/large.json +12 -0
  19. package/tokens/screen/medium.json +12 -0
  20. package/tokens/screen/small.json +1 -5
  21. package/tokens/screen/tv.json +13 -101
  22. package/tokens/components/badge.json +0 -108
  23. package/tokens/components/tv-button-list.json +0 -114
  24. package/tokens/components/tv-hero.json +0 -13
package/tokens/components/toggle.json CHANGED
@@ -3,38 +3,22 @@
3
3
  "unchecked": {
4
4
  "normal": {
5
5
  "backgroundColor": {
6
- "$type": "color",
7
- "$value": "{base.color.ui.dark4}"
8
- },
9
- "handleColor": {
10
- "$type": "color",
11
- "$value": "{base.color.text.subtle}"
12
- },
13
- "borderColor": {
14
6
  "$type": "color",
15
7
  "$value": "{base.color.ui.accent1}"
16
8
  },
17
- "iconColor": {
9
+ "handleColor": {
18
10
  "$type": "color",
19
- "$value": "{base.color.ui.accent2}"
11
+ "$value": "{base.color.ui.white}"
20
12
  }
21
13
  },
22
14
  "hover": {
23
15
  "backgroundColor": {
24
16
  "$type": "color",
25
- "$value": "{base.color.ui.dark4}"
17
+ "$value": "{core.color.neutrals.20}"
26
18
  },
27
19
  "handleColor": {
28
20
  "$type": "color",
29
- "$value": "{base.color.text.subtle}"
30
- },
31
- "borderColor": {
32
- "$type": "color",
33
- "$value": "{base.color.ui.accent2}"
34
- },
35
- "iconColor": {
36
- "$type": "color",
37
- "$value": "{base.color.ui.accent2}"
21
+ "$value": "{base.color.ui.white}"
38
22
  }
39
23
  },
40
24
  "active": {
@@ -42,35 +26,19 @@
42
26
  "$type": "color",
43
27
  "$value": "{core.color.neutrals.40}"
44
28
  },
45
- "iconColor": {
46
- "$type": "color",
47
- "$value": "{base.color.text.subtle}"
48
- },
49
- "borderColor": {
50
- "$type": "color",
51
- "$value": "{base.color.ui.accent2}"
52
- },
53
29
  "handleColor": {
54
30
  "$type": "color",
55
- "$value": "{base.color.ui.accent2}"
31
+ "$value": "{base.color.ui.white}"
56
32
  }
57
33
  },
58
34
  "focus": {
59
35
  "backgroundColor": {
60
- "$type": "color",
61
- "$value": "{base.color.ui.dark4}"
62
- },
63
- "handleColor": {
64
- "$type": "color",
65
- "$value": "{base.color.text.subtle}"
66
- },
67
- "borderColor": {
68
36
  "$type": "color",
69
37
  "$value": "{base.color.ui.accent1}"
70
38
  },
71
- "iconColor": {
39
+ "handleColor": {
72
40
  "$type": "color",
73
- "$value": "{base.color.ui.accent2}"
41
+ "$value": "{base.color.ui.white}"
74
42
  }
75
43
  },
76
44
  "disabled": {
@@ -81,14 +49,6 @@
81
49
  "handleColor": {
82
50
  "$type": "color",
83
51
  "$value": "{base.color.ui.accent2}"
84
- },
85
- "borderColor": {
86
- "$type": "color",
87
- "$value": "transparent"
88
- },
89
- "iconColor": {
90
- "$type": "color",
91
- "$value": "{base.color.ui.accent2}"
92
52
  }
93
53
  }
94
54
  },
@@ -101,14 +61,6 @@
101
61
  "handleColor": {
102
62
  "$type": "color",
103
63
  "$value": "{base.color.ui.white}"
104
- },
105
- "borderColor": {
106
- "$type": "color",
107
- "$value": "transparent"
108
- },
109
- "iconColor": {
110
- "$type": "color",
111
- "$value": "{base.color.ui.white}"
112
64
  }
113
65
  },
114
66
  "hover": {
@@ -119,14 +71,6 @@
119
71
  "handleColor": {
120
72
  "$type": "color",
121
73
  "$value": "{base.color.ui.white}"
122
- },
123
- "borderColor": {
124
- "$type": "color",
125
- "$value": "transparent"
126
- },
127
- "iconColor": {
128
- "$type": "color",
129
- "$value": "{base.color.ui.white}"
130
74
  }
131
75
  },
132
76
  "active": {
@@ -134,14 +78,6 @@
134
78
  "$type": "color",
135
79
  "$value": "{base.color.primary.darkest}"
136
80
  },
137
- "iconColor": {
138
- "$type": "color",
139
- "$value": "{base.color.ui.white}"
140
- },
141
- "borderColor": {
142
- "$type": "color",
143
- "$value": "transparent"
144
- },
145
81
  "handleColor": {
146
82
  "$type": "color",
147
83
  "$value": "{base.color.ui.white}"
@@ -155,14 +91,6 @@
155
91
  "handleColor": {
156
92
  "$type": "color",
157
93
  "$value": "{base.color.ui.white}"
158
- },
159
- "borderColor": {
160
- "$type": "color",
161
- "$value": "transparent"
162
- },
163
- "iconColor": {
164
- "$type": "color",
165
- "$value": "{base.color.ui.white}"
166
94
  }
167
95
  },
168
96
  "disabled": {
@@ -173,22 +101,14 @@
173
101
  "handleColor": {
174
102
  "$type": "color",
175
103
  "$value": "{base.color.ui.accent2}"
176
- },
177
- "borderColor": {
178
- "$type": "color",
179
- "$value": "transparent"
180
- },
181
- "iconColor": {
182
- "$type": "color",
183
- "$value": "{base.color.ui.accent2}"
184
104
  }
185
105
  }
186
106
  },
187
- "boxShadow": {
188
- "$type": "boxShadow",
189
- "$value": "{core.boxShadow.1}"
190
- },
191
107
  "default": {
108
+ "boxShadow": {
109
+ "$type": "boxShadow",
110
+ "$value": "{core.boxShadow.1}"
111
+ },
192
112
  "focus": {
193
113
  "borderColor": {
194
114
  "$type": "color",
@@ -198,25 +118,21 @@
198
118
  },
199
119
  "width": {
200
120
  "$type": "sizing",
201
- "$value": "{toggleHandle.size}*2.5"
121
+ "$value": "{toggleHandle.size}*1.75"
202
122
  },
203
123
  "borderRadius": {
204
124
  "$type": "borderRadius",
205
125
  "$value": "{core.borderRadius.full}"
206
- },
207
- "borderWidth": {
208
- "$type": "borderWidth",
209
- "$value": "{core.borderWidth.3}"
210
126
  }
211
127
  },
212
128
  "toggleHandle": {
213
129
  "size": {
214
130
  "$type": "sizing",
215
- "$value": "{core.sizing.24}"
131
+ "$value": "{core.sizing.32}"
216
132
  },
217
133
  "offset": {
218
134
  "$type": "sizing",
219
- "$value": "4"
135
+ "$value": "1"
220
136
  }
221
137
  }
222
138
  }
package/tokens/components/top-banner.json CHANGED
@@ -2,11 +2,11 @@
2
2
  "topBanner": {
3
3
  "leftGradient": {
4
4
  "$type": "color",
5
- "$value": "linear-gradient(90deg, {base.color.ui.dark1} 0%, {core.color.darkAlpha.40} 40%, {core.color.darkAlpha.0} 60%, {core.color.darkAlpha.0} 100%)"
5
+ "$value": "linear-gradient(90deg, {base.color.ui.dark1} 0%, {core.color.darkAlpha.0} 50%, {core.color.darkAlpha.0} 100%)"
6
6
  },
7
7
  "bottomGradient": {
8
8
  "$type": "color",
9
- "$value": "linear-gradient(0deg, {base.color.ui.dark1} 0%, {core.color.darkAlpha.15} 10%, {core.color.darkAlpha.0} 100%)"
9
+ "$value": "linear-gradient(0deg, {base.color.ui.dark1} 0%, {core.color.darkAlpha.50} 50%, {core.color.darkAlpha.0} 100%)"
10
10
  },
11
11
  "title": {
12
12
  "$type": "typography",
package/tokens/core.json CHANGED
@@ -71,41 +71,29 @@
71
71
  }
72
72
  },
73
73
  "fontWeight": {
74
- "100": {
75
- "$type": "fontWeights",
76
- "$value": "100"
77
- },
78
- "200": {
79
- "$type": "fontWeights",
80
- "$value": "200"
81
- },
82
- "300": {
83
- "$type": "fontWeights",
84
- "$value": "300"
85
- },
86
- "400": {
74
+ "regular": {
87
75
  "$type": "fontWeights",
88
- "$value": "400"
76
+ "$value": "Regular"
89
77
  },
90
- "500": {
78
+ "semiBold": {
91
79
  "$type": "fontWeights",
92
- "$value": "500"
80
+ "$value": "SemiBold"
93
81
  },
94
- "600": {
82
+ "extraBold": {
95
83
  "$type": "fontWeights",
96
- "$value": "600"
84
+ "$value": "ExtraBold"
97
85
  },
98
- "700": {
86
+ "bold": {
99
87
  "$type": "fontWeights",
100
- "$value": "700"
88
+ "$value": "Bold"
101
89
  },
102
- "800": {
90
+ "black": {
103
91
  "$type": "fontWeights",
104
- "$value": "800"
92
+ "$value": "Black"
105
93
  },
106
- "900": {
94
+ "heavy": {
107
95
  "$type": "fontWeights",
108
- "$value": "900"
96
+ "$value": "Heavy"
109
97
  }
110
98
  },
111
99
  "fontSize": {
package/tokens/screen/large.json CHANGED
@@ -29,6 +29,12 @@
29
29
  "$value": "1.3"
30
30
  }
31
31
  },
32
+ "topBanner": {
33
+ "bottomGradient": {
34
+ "$type": "color",
35
+ "$value": "linear-gradient(0deg, {base.color.ui.dark1} 0%, {core.color.darkAlpha.0} 50%, {core.color.darkAlpha.0} 100%)"
36
+ }
37
+ },
32
38
  "midBanner": {
33
39
  "bottomGradient": {
34
40
  "$type": "color",
@@ -123,5 +129,11 @@
123
129
  "fontSize": "{core.fontSize.28}*{scale.title}"
124
130
  }
125
131
  }
132
+ },
133
+ "chapterSwimlane": {
134
+ "overlayColor": {
135
+ "$type": "color",
136
+ "$value": "linear-gradient(-90deg, {base.color.ui.dark1} 0%, {core.color.darkAlpha.80} 50%, {core.color.darkAlpha.20} 100%)"
137
+ }
126
138
  }
127
139
  }
package/tokens/screen/medium.json CHANGED
@@ -29,6 +29,12 @@
29
29
  "$value": "1"
30
30
  }
31
31
  },
32
+ "topBanner": {
33
+ "leftGradient": {
34
+ "$type": "color",
35
+ "$value": "none"
36
+ }
37
+ },
32
38
  "midBanner": {
33
39
  "leftGradient": {
34
40
  "$type": "color",
@@ -88,5 +94,11 @@
88
94
  "$type": "color",
89
95
  "$value": "{core.color.darkAlpha.0}"
90
96
  }
97
+ },
98
+ "chapterSwimlane": {
99
+ "overlayColor": {
100
+ "$type": "color",
101
+ "$value": "linear-gradient(-90deg, {base.color.ui.dark1} 0%, {core.color.darkAlpha.80} 50%, {core.color.darkAlpha.20} 100%)"
102
+ }
91
103
  }
92
104
  }
package/tokens/screen/small.json CHANGED
@@ -32,11 +32,7 @@
32
32
  "topBanner": {
33
33
  "leftGradient": {
34
34
  "$type": "color",
35
- "$value": "linear-gradient(90deg, {core.color.darkAlpha.0} 0%, {core.color.darkAlpha.0} 40%, {core.color.darkAlpha.0} 60%, {core.color.darkAlpha.0} 100%)"
36
- },
37
- "bottomGradient": {
38
- "$type": "color",
39
- "$value": "linear-gradient(0deg, {base.color.ui.dark1} 0%, {core.color.darkAlpha.50} 50%, {core.color.darkAlpha.0} 100%)"
35
+ "$value": "none"
40
36
  }
41
37
  },
42
38
  "midBanner": {
package/tokens/screen/tv.json CHANGED
@@ -35,40 +35,24 @@
35
35
  "backgroundColor": {
36
36
  "$type": "color",
37
37
  "$value": "{core.color.softAlpha.60}"
38
- },
39
- "textColor": {
40
- "$type": "color",
41
- "$value": "{core.color.neutrals.100}"
42
38
  }
43
39
  },
44
40
  "hover": {
45
41
  "backgroundColor": {
46
42
  "$type": "color",
47
43
  "$value": "{base.colorSet.interaction.normal}"
48
- },
49
- "textColor": {
50
- "$type": "color",
51
- "$value": "{base.colorSet.interaction.onNormal}"
52
44
  }
53
45
  },
54
46
  "active": {
55
47
  "backgroundColor": {
56
48
  "$type": "color",
57
49
  "$value": "{base.colorSet.interaction.normal}"
58
- },
59
- "textColor": {
60
- "$type": "color",
61
- "$value": "{base.colorSet.interaction.onNormal}"
62
50
  }
63
51
  },
64
52
  "focus": {
65
53
  "backgroundColor": {
66
54
  "$type": "color",
67
55
  "$value": "{base.colorSet.interaction.normal}"
68
- },
69
- "textColor": {
70
- "$type": "color",
71
- "$value": "{base.colorSet.interaction.onNormal}"
72
56
  }
73
57
  }
74
58
  },
@@ -113,40 +97,24 @@
113
97
  "backgroundColor": {
114
98
  "$type": "color",
115
99
  "$value": "{core.color.softAlpha.60}"
116
- },
117
- "textColor": {
118
- "$type": "color",
119
- "$value": "{core.color.neutrals.100}"
120
100
  }
121
101
  },
122
102
  "hover": {
123
103
  "backgroundColor": {
124
104
  "$type": "color",
125
105
  "$value": "{base.colorSet.interaction.normal}"
126
- },
127
- "textColor": {
128
- "$type": "color",
129
- "$value": "{base.colorSet.interaction.onNormal}"
130
106
  }
131
107
  },
132
108
  "active": {
133
109
  "backgroundColor": {
134
110
  "$type": "color",
135
111
  "$value": "{base.colorSet.interaction.normal}"
136
- },
137
- "textColor": {
138
- "$type": "color",
139
- "$value": "{base.colorSet.interaction.onNormal}"
140
112
  }
141
113
  },
142
114
  "focus": {
143
115
  "backgroundColor": {
144
116
  "$type": "color",
145
117
  "$value": "{base.colorSet.interaction.normal}"
146
- },
147
- "textColor": {
148
- "$type": "color",
149
- "$value": "{base.colorSet.interaction.onNormal}"
150
118
  }
151
119
  }
152
120
  },
@@ -155,92 +123,24 @@
155
123
  "backgroundColor": {
156
124
  "$type": "color",
157
125
  "$value": "{core.color.softAlpha.60}"
158
- },
159
- "textColor": {
160
- "$type": "color",
161
- "$value": "{core.color.neutrals.100}"
162
126
  }
163
127
  },
164
128
  "hover": {
165
129
  "backgroundColor": {
166
130
  "$type": "color",
167
131
  "$value": "{base.colorSet.interaction.normal}"
168
- },
169
- "textColor": {
170
- "$type": "color",
171
- "$value": "{base.colorSet.interaction.onNormal}"
172
132
  }
173
133
  },
174
134
  "active": {
175
135
  "backgroundColor": {
176
136
  "$type": "color",
177
137
  "$value": "{base.colorSet.interaction.normal}"
178
- },
179
- "textColor": {
180
- "$type": "color",
181
- "$value": "{base.colorSet.interaction.onNormal}"
182
138
  }
183
139
  },
184
140
  "focus": {
185
141
  "backgroundColor": {
186
142
  "$type": "color",
187
143
  "$value": "{base.colorSet.interaction.normal}"
188
- },
189
- "textColor": {
190
- "$type": "color",
191
- "$value": "{base.colorSet.interaction.onNormal}"
192
- }
193
- }
194
- },
195
- "branded": {
196
- "normal": {
197
- "backgroundColor": {
198
- "$type": "color",
199
- "$value": "{core.color.softAlpha.60}"
200
- },
201
- "textColor": {
202
- "$type": "color",
203
- "$value": "{base.colorSet.interaction.onNormal}"
204
- }
205
- },
206
- "hover": {
207
- "backgroundColor": {
208
- "$type": "color",
209
- "$value": "{base.colorSet.interaction.normal}"
210
- },
211
- "textColor": {
212
- "$type": "color",
213
- "$value": "{base.colorSet.interaction.onNormal}"
214
- }
215
- },
216
- "active": {
217
- "backgroundColor": {
218
- "$type": "color",
219
- "$value": "{base.colorSet.interaction.normal}"
220
- },
221
- "textColor": {
222
- "$type": "color",
223
- "$value": "{base.colorSet.interaction.onNormal}"
224
- }
225
- },
226
- "disabled": {
227
- "textColor": {
228
- "$type": "color",
229
- "$value": "{base.colorSet.interaction.onDisabled}"
230
- },
231
- "backgroundColor": {
232
- "$type": "color",
233
- "$value": "{base.colorSet.interaction.disabled}"
234
- }
235
- },
236
- "focus": {
237
- "backgroundColor": {
238
- "$type": "color",
239
- "$value": "{base.colorSet.interaction.normal}"
240
- },
241
- "textColor": {
242
- "$type": "color",
243
- "$value": "{base.colorSet.interaction.onNormal}"
244
144
  }
245
145
  }
246
146
  }
@@ -362,7 +262,7 @@
362
262
  "$type": "typography",
363
263
  "$value": {
364
264
  "fontFamily": "{base.primaryFont}",
365
- "fontWeight": "{base.fontWeight.default}",
265
+ "fontWeight": "{core.fontWeight.regular}",
366
266
  "lineHeight": "{core.lineHeight.130}",
367
267
  "fontSize": "{core.fontSize.28}"
368
268
  }
@@ -392,6 +292,12 @@
392
292
  }
393
293
  }
394
294
  },
295
+ "topBanner": {
296
+ "bottomGradient": {
297
+ "$type": "color",
298
+ "$value": "linear-gradient(0deg, {base.color.ui.dark1} 0%, {core.color.darkAlpha.0} 50%, {core.color.darkAlpha.0} 100%)"
299
+ }
300
+ },
395
301
  "midBanner": {
396
302
  "bottomGradient": {
397
303
  "$type": "color",
@@ -477,5 +383,11 @@
477
383
  }
478
384
  }
479
385
  }
386
+ },
387
+ "chapterSwimlane": {
388
+ "overlayColor": {
389
+ "$type": "color",
390
+ "$value": "linear-gradient(-90deg, {base.color.ui.dark1} 0%, {core.color.darkAlpha.80} 50%, {core.color.darkAlpha.20} 100%)"
391
+ }
480
392
  }
481
393
  }
package/tokens/components/badge.json DELETED
@@ -1,108 +0,0 @@
1
- {
2
- "badge": {
3
- "small": {
4
- "label": {
5
- "$type": "typography",
6
- "$value": "{base.typography.meta.bold}"
7
- },
8
- "horizontalPadding": {
9
- "$type": "spacing",
10
- "$value": "{badge.small.fontSize}/2.5"
11
- },
12
- "gap": {
13
- "$type": "spacing",
14
- "$value": "{badge.small.fontSize}/3"
15
- },
16
- "margin": {
17
- "$type": "spacing",
18
- "$value": "{badge.small.fontSize}/3"
19
- },
20
- "verticalPadding": {
21
- "$type": "spacing",
22
- "$value": "{badge.small.fontSize}/6"
23
- },
24
- "borderRadius": {
25
- "$type": "borderRadius",
26
- "$value": "{base.borderRadius.badge}"
27
- },
28
- "iconSize": {
29
- "$type": "sizing",
30
- "$value": "{badge.small.fontSize}*1.4"
31
- },
32
- "fontSize": {
33
- "$type": "fontSizes",
34
- "$value": "{core.fontSize.12}*{scale.text}"
35
- },
36
- "height": {
37
- "$type": "sizing",
38
- "$value": "{badge.small.fontSize}*1.8"
39
- }
40
- },
41
- "medium": {
42
- "label": {
43
- "$type": "typography",
44
- "$value": "{base.typography.text.bold.xSmall}"
45
- },
46
- "horizontalPadding": {
47
- "$type": "spacing",
48
- "$value": "{badge.medium.fontSize}/2.5"
49
- },
50
- "gap": {
51
- "$type": "spacing",
52
- "$value": "{badge.medium.fontSize}/2"
53
- },
54
- "margin": {
55
- "$type": "spacing",
56
- "$value": "{badge.medium.fontSize}/3"
57
- },
58
- "verticalPadding": {
59
- "$type": "spacing",
60
- "$value": "{badge.medium.fontSize}/3"
61
- },
62
- "borderRadius": {
63
- "$type": "borderRadius",
64
- "$value": "{base.borderRadius.badge}"
65
- },
66
- "iconSize": {
67
- "$type": "sizing",
68
- "$value": "{badge.medium.fontSize}*1.4"
69
- },
70
- "height": {
71
- "$type": "sizing",
72
- "$value": "{badge.medium.fontSize}*2.1"
73
- },
74
- "fontSize": {
75
- "$type": "fontSizes",
76
- "$value": "{core.fontSize.13}*{scale.text}"
77
- }
78
- },
79
- "default": {
80
- "backgroundColor": {
81
- "$type": "color",
82
- "$value": "{base.color.ui.fade4}"
83
- },
84
- "iconColor": {
85
- "$type": "color",
86
- "$value": "{base.color.badge.iconColor}"
87
- },
88
- "textColor": {
89
- "$type": "color",
90
- "$value": "{base.color.text.default}"
91
- }
92
- },
93
- "highlight": {
94
- "backgroundColor": {
95
- "$type": "color",
96
- "$value": "{base.color.badge.backgroundColor}"
97
- },
98
- "iconColor": {
99
- "$type": "color",
100
- "$value": "{base.color.ui.white}"
101
- },
102
- "textColor": {
103
- "$type": "color",
104
- "$value": "{base.color.ui.white}"
105
- }
106
- }
107
- }
108
- }