@depersgroep/lfvp-design-tokens 0.384.0 → 0.385.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 +27 -25
  3. package/tokens/$themes.json +12 -4
  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 -12
  21. package/tokens/screen/medium.json +0 -12
  22. package/tokens/screen/small.json +5 -1
  23. package/tokens/screen/tv.json +101 -13
  24. package/tokens/components/chapter-swimlane.json +0 -8
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}"
126
162
  }
127
163
  },
128
164
  "hover": {
129
165
  "backgroundColor": {
130
166
  "$type": "color",
131
167
  "$value": "{base.colorSet.interaction.normal}"
168
+ },
169
+ "textColor": {
170
+ "$type": "color",
171
+ "$value": "{base.colorSet.interaction.onNormal}"
132
172
  }
133
173
  },
134
174
  "active": {
135
175
  "backgroundColor": {
136
176
  "$type": "color",
137
177
  "$value": "{base.colorSet.interaction.normal}"
178
+ },
179
+ "textColor": {
180
+ "$type": "color",
181
+ "$value": "{base.colorSet.interaction.onNormal}"
138
182
  }
139
183
  },
140
184
  "focus": {
141
185
  "backgroundColor": {
142
186
  "$type": "color",
143
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}"
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}"
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",
@@ -383,11 +477,5 @@
383
477
  }
384
478
  }
385
479
  }
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
- }
392
480
  }
393
481
  }
package/tokens/components/chapter-swimlane.json DELETED
@@ -1,8 +0,0 @@
1
- {
2
- "chapterSwimlane": {
3
- "overlayColor": {
4
- "$type": "color",
5
- "$value": "linear-gradient(0deg, {base.color.ui.dark1} 0%, {core.color.darkAlpha.80} 50%, {core.color.darkAlpha.20} 100%)"
6
- }
7
- }
8
- }