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