@putdotio/design 1.0.0 → 1.2.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/DESIGN.md +13 -11
- package/README.md +27 -6
- package/dist/css/tokens.css +168 -94
- package/dist/figma/putio.tokens.json +96 -49
- package/dist/tokens.d.ts +1 -1
- package/dist/tokens.dtcg.json +1041 -100
- package/dist/tokens.flat.json +821 -206
- package/dist/tokens.js +821 -206
- package/package.json +27 -3
- package/system/README.md +25 -21
- package/system/assets/app-icon-beta.png +0 -0
- package/system/assets/app-icon-dev-blueprint.png +0 -0
- package/system/assets/app-icon-prod-dark.png +0 -0
- package/system/assets/app-icon-source.png +0 -0
- package/system/assets/favicon.svg +6 -0
- package/system/assets/logo-retro-dark.svg +22 -0
- package/system/assets/logo-retro-light.svg +22 -0
- package/system/assets/logo.svg +3 -0
- package/tokens/components.tokens.json +853 -2
- package/tokens/context.tokens.json +102 -14
- package/tokens/foundation.css +1 -1
- package/tokens/primitives.tokens.json +3 -3
- package/tokens/semantic.tokens.json +83 -81
- package/dist/tokens.ts +0 -1626
package/dist/tokens.dtcg.json
CHANGED
|
@@ -14,9 +14,31 @@
|
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
16
|
},
|
|
17
|
+
"backgroundHover": {
|
|
18
|
+
"$type": "color",
|
|
19
|
+
"$value": "{color.yellow.light.solidHover}",
|
|
20
|
+
"$description": "Primary command hover background in light mode.",
|
|
21
|
+
"$extensions": {
|
|
22
|
+
"putio": {
|
|
23
|
+
"cssName": "button-primary-bg-hover",
|
|
24
|
+
"mode": "light"
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
"backgroundHoverDark": {
|
|
29
|
+
"$type": "color",
|
|
30
|
+
"$value": "{color.yellow.dark.solidHover}",
|
|
31
|
+
"$description": "Primary command hover background in dark mode.",
|
|
32
|
+
"$extensions": {
|
|
33
|
+
"putio": {
|
|
34
|
+
"cssName": "button-primary-bg-hover",
|
|
35
|
+
"mode": "dark"
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
},
|
|
17
39
|
"foreground": {
|
|
18
40
|
"$type": "color",
|
|
19
|
-
"$value": "
|
|
41
|
+
"$value": "{component.alias.primaryForeground}",
|
|
20
42
|
"$description": "Text or icon color on the yellow primary button.",
|
|
21
43
|
"$extensions": {
|
|
22
44
|
"putio": {
|
|
@@ -77,6 +99,144 @@
|
|
|
77
99
|
}
|
|
78
100
|
}
|
|
79
101
|
}
|
|
102
|
+
},
|
|
103
|
+
"success": {
|
|
104
|
+
"background": {
|
|
105
|
+
"$type": "color",
|
|
106
|
+
"$value": "{color.green.light.solid}",
|
|
107
|
+
"$description": "Success command background in light mode.",
|
|
108
|
+
"$extensions": {
|
|
109
|
+
"putio": {
|
|
110
|
+
"cssName": "button-success-bg",
|
|
111
|
+
"mode": "light"
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
},
|
|
115
|
+
"backgroundDark": {
|
|
116
|
+
"$type": "color",
|
|
117
|
+
"$value": "{color.green.dark.solid}",
|
|
118
|
+
"$description": "Success command background in dark mode.",
|
|
119
|
+
"$extensions": {
|
|
120
|
+
"putio": {
|
|
121
|
+
"cssName": "button-success-bg",
|
|
122
|
+
"mode": "dark"
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
},
|
|
126
|
+
"backgroundHover": {
|
|
127
|
+
"$type": "color",
|
|
128
|
+
"$value": "{color.green.light.solidHover}",
|
|
129
|
+
"$description": "Success command hover background in light mode. Step-10 hover companion to the green solid fill.",
|
|
130
|
+
"$extensions": {
|
|
131
|
+
"putio": {
|
|
132
|
+
"cssName": "button-success-bg-hover",
|
|
133
|
+
"mode": "light"
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
},
|
|
137
|
+
"backgroundHoverDark": {
|
|
138
|
+
"$type": "color",
|
|
139
|
+
"$value": "{color.green.dark.solidHover}",
|
|
140
|
+
"$description": "Success command hover background in dark mode. Step-10 hover companion to the green solid fill.",
|
|
141
|
+
"$extensions": {
|
|
142
|
+
"putio": {
|
|
143
|
+
"cssName": "button-success-bg-hover",
|
|
144
|
+
"mode": "dark"
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
},
|
|
148
|
+
"foreground": {
|
|
149
|
+
"$type": "color",
|
|
150
|
+
"$value": "{component.alias.successForeground}",
|
|
151
|
+
"$description": "Text or icon color on success command backgrounds.",
|
|
152
|
+
"$extensions": {
|
|
153
|
+
"putio": {
|
|
154
|
+
"cssName": "button-success-fg",
|
|
155
|
+
"mode": "global"
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
},
|
|
160
|
+
"danger": {
|
|
161
|
+
"background": {
|
|
162
|
+
"$type": "color",
|
|
163
|
+
"$value": "{color.red.light.solid}",
|
|
164
|
+
"$description": "Destructive command background in light mode.",
|
|
165
|
+
"$extensions": {
|
|
166
|
+
"putio": {
|
|
167
|
+
"cssName": "button-danger-bg",
|
|
168
|
+
"mode": "light"
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
},
|
|
172
|
+
"backgroundDark": {
|
|
173
|
+
"$type": "color",
|
|
174
|
+
"$value": "{color.red.dark.solid}",
|
|
175
|
+
"$description": "Destructive command background in dark mode.",
|
|
176
|
+
"$extensions": {
|
|
177
|
+
"putio": {
|
|
178
|
+
"cssName": "button-danger-bg",
|
|
179
|
+
"mode": "dark"
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
},
|
|
183
|
+
"backgroundHover": {
|
|
184
|
+
"$type": "color",
|
|
185
|
+
"$value": "{color.red.light.solidHover}",
|
|
186
|
+
"$description": "Destructive command hover background in light mode. Step-10 hover companion to the red solid fill.",
|
|
187
|
+
"$extensions": {
|
|
188
|
+
"putio": {
|
|
189
|
+
"cssName": "button-danger-bg-hover",
|
|
190
|
+
"mode": "light"
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
},
|
|
194
|
+
"backgroundHoverDark": {
|
|
195
|
+
"$type": "color",
|
|
196
|
+
"$value": "{color.red.dark.solidHover}",
|
|
197
|
+
"$description": "Destructive command hover background in dark mode. Step-10 hover companion to the red solid fill.",
|
|
198
|
+
"$extensions": {
|
|
199
|
+
"putio": {
|
|
200
|
+
"cssName": "button-danger-bg-hover",
|
|
201
|
+
"mode": "dark"
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
},
|
|
205
|
+
"foreground": {
|
|
206
|
+
"$type": "color",
|
|
207
|
+
"$value": "{component.alias.destructiveForeground}",
|
|
208
|
+
"$description": "Text or icon color on destructive command backgrounds.",
|
|
209
|
+
"$extensions": {
|
|
210
|
+
"putio": {
|
|
211
|
+
"cssName": "button-danger-fg",
|
|
212
|
+
"mode": "global"
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
},
|
|
217
|
+
"info": {
|
|
218
|
+
"backgroundHover": {
|
|
219
|
+
"$type": "color",
|
|
220
|
+
"$value": "{color.neutral.light.solidHover}",
|
|
221
|
+
"$description": "Neutral solid command hover background in light mode.",
|
|
222
|
+
"$extensions": {
|
|
223
|
+
"putio": {
|
|
224
|
+
"cssName": "button-info-bg-hover",
|
|
225
|
+
"mode": "light"
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
},
|
|
229
|
+
"backgroundHoverDark": {
|
|
230
|
+
"$type": "color",
|
|
231
|
+
"$value": "{color.neutral.dark.solidHover}",
|
|
232
|
+
"$description": "Neutral solid command hover background in dark mode.",
|
|
233
|
+
"$extensions": {
|
|
234
|
+
"putio": {
|
|
235
|
+
"cssName": "button-info-bg-hover",
|
|
236
|
+
"mode": "dark"
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
}
|
|
80
240
|
}
|
|
81
241
|
},
|
|
82
242
|
"input": {
|
|
@@ -92,7 +252,7 @@
|
|
|
92
252
|
},
|
|
93
253
|
"backgroundDark": {
|
|
94
254
|
"$type": "color",
|
|
95
|
-
"$value": "{
|
|
255
|
+
"$value": "{surface.dark.appBg}",
|
|
96
256
|
"$extensions": {
|
|
97
257
|
"putio": {
|
|
98
258
|
"cssName": "input-bg",
|
|
@@ -131,6 +291,697 @@
|
|
|
131
291
|
}
|
|
132
292
|
}
|
|
133
293
|
},
|
|
294
|
+
"field": {
|
|
295
|
+
"background": {
|
|
296
|
+
"$type": "color",
|
|
297
|
+
"$value": "{surface.light.appBg}",
|
|
298
|
+
"$description": "Form-control fill. Fields stay on the app background surface, even inside a raised panel.",
|
|
299
|
+
"$extensions": {
|
|
300
|
+
"putio": {
|
|
301
|
+
"cssName": "field-bg",
|
|
302
|
+
"mode": "light",
|
|
303
|
+
"figma": false
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
},
|
|
307
|
+
"backgroundDark": {
|
|
308
|
+
"$type": "color",
|
|
309
|
+
"$value": "{surface.dark.appBg}",
|
|
310
|
+
"$description": "Dark-mode form-control fill.",
|
|
311
|
+
"$extensions": {
|
|
312
|
+
"putio": {
|
|
313
|
+
"cssName": "field-bg",
|
|
314
|
+
"mode": "dark",
|
|
315
|
+
"figma": false
|
|
316
|
+
}
|
|
317
|
+
}
|
|
318
|
+
},
|
|
319
|
+
"backgroundDisabled": {
|
|
320
|
+
"$type": "color",
|
|
321
|
+
"$value": "{color.neutral.light.bgSecondary}",
|
|
322
|
+
"$description": "Disabled form-control fill.",
|
|
323
|
+
"$extensions": {
|
|
324
|
+
"putio": {
|
|
325
|
+
"cssName": "field-bg-disabled",
|
|
326
|
+
"mode": "light",
|
|
327
|
+
"figma": false
|
|
328
|
+
}
|
|
329
|
+
}
|
|
330
|
+
},
|
|
331
|
+
"backgroundDisabledDark": {
|
|
332
|
+
"$type": "color",
|
|
333
|
+
"$value": "{color.neutral.dark.bgSecondary}",
|
|
334
|
+
"$description": "Dark-mode disabled form-control fill.",
|
|
335
|
+
"$extensions": {
|
|
336
|
+
"putio": {
|
|
337
|
+
"cssName": "field-bg-disabled",
|
|
338
|
+
"mode": "dark",
|
|
339
|
+
"figma": false
|
|
340
|
+
}
|
|
341
|
+
}
|
|
342
|
+
},
|
|
343
|
+
"border": {
|
|
344
|
+
"$type": "color",
|
|
345
|
+
"$value": "{color.neutral.light.border}",
|
|
346
|
+
"$description": "Resting form-control border.",
|
|
347
|
+
"$extensions": {
|
|
348
|
+
"putio": {
|
|
349
|
+
"cssName": "field-border",
|
|
350
|
+
"mode": "light",
|
|
351
|
+
"figma": false
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
},
|
|
355
|
+
"borderDark": {
|
|
356
|
+
"$type": "color",
|
|
357
|
+
"$value": "{color.neutral.dark.border}",
|
|
358
|
+
"$description": "Dark-mode resting form-control border.",
|
|
359
|
+
"$extensions": {
|
|
360
|
+
"putio": {
|
|
361
|
+
"cssName": "field-border",
|
|
362
|
+
"mode": "dark",
|
|
363
|
+
"figma": false
|
|
364
|
+
}
|
|
365
|
+
}
|
|
366
|
+
},
|
|
367
|
+
"borderHover": {
|
|
368
|
+
"$type": "color",
|
|
369
|
+
"$value": "{color.neutral.light.borderHover}",
|
|
370
|
+
"$description": "Hover form-control border.",
|
|
371
|
+
"$extensions": {
|
|
372
|
+
"putio": {
|
|
373
|
+
"cssName": "field-border-hover",
|
|
374
|
+
"mode": "light",
|
|
375
|
+
"figma": false
|
|
376
|
+
}
|
|
377
|
+
}
|
|
378
|
+
},
|
|
379
|
+
"borderHoverDark": {
|
|
380
|
+
"$type": "color",
|
|
381
|
+
"$value": "{color.neutral.dark.borderHover}",
|
|
382
|
+
"$description": "Dark-mode hover form-control border.",
|
|
383
|
+
"$extensions": {
|
|
384
|
+
"putio": {
|
|
385
|
+
"cssName": "field-border-hover",
|
|
386
|
+
"mode": "dark",
|
|
387
|
+
"figma": false
|
|
388
|
+
}
|
|
389
|
+
}
|
|
390
|
+
},
|
|
391
|
+
"borderFocus": {
|
|
392
|
+
"$type": "color",
|
|
393
|
+
"$value": "{color.neutral.light.borderHover}",
|
|
394
|
+
"$description": "Focused form-control border. Focus matches hover and does not use the yellow focus shadow.",
|
|
395
|
+
"$extensions": {
|
|
396
|
+
"putio": {
|
|
397
|
+
"cssName": "field-border-focus",
|
|
398
|
+
"mode": "light",
|
|
399
|
+
"figma": false
|
|
400
|
+
}
|
|
401
|
+
}
|
|
402
|
+
},
|
|
403
|
+
"borderFocusDark": {
|
|
404
|
+
"$type": "color",
|
|
405
|
+
"$value": "{color.neutral.dark.borderHover}",
|
|
406
|
+
"$description": "Dark-mode focused form-control border. Focus matches hover and does not use the yellow focus shadow.",
|
|
407
|
+
"$extensions": {
|
|
408
|
+
"putio": {
|
|
409
|
+
"cssName": "field-border-focus",
|
|
410
|
+
"mode": "dark",
|
|
411
|
+
"figma": false
|
|
412
|
+
}
|
|
413
|
+
}
|
|
414
|
+
},
|
|
415
|
+
"text": {
|
|
416
|
+
"$type": "color",
|
|
417
|
+
"$value": "{color.neutral.light.text}",
|
|
418
|
+
"$description": "Form-control text color.",
|
|
419
|
+
"$extensions": {
|
|
420
|
+
"putio": {
|
|
421
|
+
"cssName": "field-text",
|
|
422
|
+
"mode": "light",
|
|
423
|
+
"figma": false
|
|
424
|
+
}
|
|
425
|
+
}
|
|
426
|
+
},
|
|
427
|
+
"textDark": {
|
|
428
|
+
"$type": "color",
|
|
429
|
+
"$value": "{color.neutral.dark.text}",
|
|
430
|
+
"$description": "Dark-mode form-control text color.",
|
|
431
|
+
"$extensions": {
|
|
432
|
+
"putio": {
|
|
433
|
+
"cssName": "field-text",
|
|
434
|
+
"mode": "dark",
|
|
435
|
+
"figma": false
|
|
436
|
+
}
|
|
437
|
+
}
|
|
438
|
+
},
|
|
439
|
+
"placeholder": {
|
|
440
|
+
"$type": "color",
|
|
441
|
+
"$value": "{color.neutral.light.textSecondary}",
|
|
442
|
+
"$description": "Form-control placeholder color.",
|
|
443
|
+
"$extensions": {
|
|
444
|
+
"putio": {
|
|
445
|
+
"cssName": "field-placeholder",
|
|
446
|
+
"mode": "light",
|
|
447
|
+
"figma": false
|
|
448
|
+
}
|
|
449
|
+
}
|
|
450
|
+
},
|
|
451
|
+
"placeholderDark": {
|
|
452
|
+
"$type": "color",
|
|
453
|
+
"$value": "{color.neutral.dark.textSecondary}",
|
|
454
|
+
"$description": "Dark-mode form-control placeholder color.",
|
|
455
|
+
"$extensions": {
|
|
456
|
+
"putio": {
|
|
457
|
+
"cssName": "field-placeholder",
|
|
458
|
+
"mode": "dark",
|
|
459
|
+
"figma": false
|
|
460
|
+
}
|
|
461
|
+
}
|
|
462
|
+
},
|
|
463
|
+
"ring": {
|
|
464
|
+
"$type": "string",
|
|
465
|
+
"$value": "0 0 0 1px {color.neutral.light.borderHover}",
|
|
466
|
+
"$description": "Quiet field focus ring. Brand-yellow shadow focus is reserved for buttons, links, nav, and TV focus.",
|
|
467
|
+
"$extensions": {
|
|
468
|
+
"putio": {
|
|
469
|
+
"cssName": "field-ring",
|
|
470
|
+
"mode": "light",
|
|
471
|
+
"figma": false
|
|
472
|
+
}
|
|
473
|
+
}
|
|
474
|
+
},
|
|
475
|
+
"ringDark": {
|
|
476
|
+
"$type": "string",
|
|
477
|
+
"$value": "0 0 0 1px {color.neutral.dark.borderHover}",
|
|
478
|
+
"$description": "Dark-mode quiet field focus ring. Brand-yellow shadow focus is reserved for buttons, links, nav, and TV focus.",
|
|
479
|
+
"$extensions": {
|
|
480
|
+
"putio": {
|
|
481
|
+
"cssName": "field-ring",
|
|
482
|
+
"mode": "dark",
|
|
483
|
+
"figma": false
|
|
484
|
+
}
|
|
485
|
+
}
|
|
486
|
+
}
|
|
487
|
+
},
|
|
488
|
+
"panel": {
|
|
489
|
+
"background": {
|
|
490
|
+
"$type": "color",
|
|
491
|
+
"$value": "{color.neutral.light.componentBg}",
|
|
492
|
+
"$description": "Raised panel background on the app background surface.",
|
|
493
|
+
"$extensions": {
|
|
494
|
+
"putio": {
|
|
495
|
+
"cssName": "panel-bg",
|
|
496
|
+
"mode": "light",
|
|
497
|
+
"figma": false
|
|
498
|
+
}
|
|
499
|
+
}
|
|
500
|
+
},
|
|
501
|
+
"backgroundDark": {
|
|
502
|
+
"$type": "color",
|
|
503
|
+
"$value": "{color.neutral.dark.componentBg}",
|
|
504
|
+
"$description": "Dark-mode raised panel background on the app background surface.",
|
|
505
|
+
"$extensions": {
|
|
506
|
+
"putio": {
|
|
507
|
+
"cssName": "panel-bg",
|
|
508
|
+
"mode": "dark",
|
|
509
|
+
"figma": false
|
|
510
|
+
}
|
|
511
|
+
}
|
|
512
|
+
},
|
|
513
|
+
"border": {
|
|
514
|
+
"$type": "color",
|
|
515
|
+
"$value": "{color.neutral.light.line}",
|
|
516
|
+
"$description": "Raised panel hairline border.",
|
|
517
|
+
"$extensions": {
|
|
518
|
+
"putio": {
|
|
519
|
+
"cssName": "panel-border",
|
|
520
|
+
"mode": "light",
|
|
521
|
+
"figma": false
|
|
522
|
+
}
|
|
523
|
+
}
|
|
524
|
+
},
|
|
525
|
+
"borderDark": {
|
|
526
|
+
"$type": "color",
|
|
527
|
+
"$value": "{color.neutral.dark.line}",
|
|
528
|
+
"$description": "Dark-mode raised panel hairline border.",
|
|
529
|
+
"$extensions": {
|
|
530
|
+
"putio": {
|
|
531
|
+
"cssName": "panel-border",
|
|
532
|
+
"mode": "dark",
|
|
533
|
+
"figma": false
|
|
534
|
+
}
|
|
535
|
+
}
|
|
536
|
+
},
|
|
537
|
+
"radius": {
|
|
538
|
+
"$type": "dimension",
|
|
539
|
+
"$value": "{radius.lg}",
|
|
540
|
+
"$description": "Raised panel radius.",
|
|
541
|
+
"$extensions": {
|
|
542
|
+
"putio": {
|
|
543
|
+
"cssName": "panel-radius",
|
|
544
|
+
"mode": "global",
|
|
545
|
+
"figma": false
|
|
546
|
+
}
|
|
547
|
+
}
|
|
548
|
+
},
|
|
549
|
+
"shadow": {
|
|
550
|
+
"$type": "string",
|
|
551
|
+
"$value": "{elevation.md}",
|
|
552
|
+
"$description": "Raised panel shadow.",
|
|
553
|
+
"$extensions": {
|
|
554
|
+
"putio": {
|
|
555
|
+
"cssName": "panel-shadow",
|
|
556
|
+
"mode": "light",
|
|
557
|
+
"figma": false
|
|
558
|
+
}
|
|
559
|
+
}
|
|
560
|
+
},
|
|
561
|
+
"shadowDark": {
|
|
562
|
+
"$type": "string",
|
|
563
|
+
"$value": "{surface.dark.shadowMd}",
|
|
564
|
+
"$description": "Dark-mode raised panel shadow.",
|
|
565
|
+
"$extensions": {
|
|
566
|
+
"putio": {
|
|
567
|
+
"cssName": "panel-shadow",
|
|
568
|
+
"mode": "dark",
|
|
569
|
+
"figma": false
|
|
570
|
+
}
|
|
571
|
+
}
|
|
572
|
+
}
|
|
573
|
+
},
|
|
574
|
+
"alias": {
|
|
575
|
+
"background": {
|
|
576
|
+
"$type": "color",
|
|
577
|
+
"$value": "{color.neutral.light.bg}",
|
|
578
|
+
"$extensions": {
|
|
579
|
+
"putio": {
|
|
580
|
+
"cssName": "background",
|
|
581
|
+
"mode": "light",
|
|
582
|
+
"figma": false
|
|
583
|
+
}
|
|
584
|
+
}
|
|
585
|
+
},
|
|
586
|
+
"backgroundDark": {
|
|
587
|
+
"$type": "color",
|
|
588
|
+
"$value": "{color.neutral.dark.bg}",
|
|
589
|
+
"$extensions": {
|
|
590
|
+
"putio": {
|
|
591
|
+
"cssName": "background",
|
|
592
|
+
"mode": "dark",
|
|
593
|
+
"figma": false
|
|
594
|
+
}
|
|
595
|
+
}
|
|
596
|
+
},
|
|
597
|
+
"foreground": {
|
|
598
|
+
"$type": "color",
|
|
599
|
+
"$value": "{color.neutral.light.text}",
|
|
600
|
+
"$extensions": {
|
|
601
|
+
"putio": {
|
|
602
|
+
"cssName": "foreground",
|
|
603
|
+
"mode": "light",
|
|
604
|
+
"figma": false
|
|
605
|
+
}
|
|
606
|
+
}
|
|
607
|
+
},
|
|
608
|
+
"foregroundDark": {
|
|
609
|
+
"$type": "color",
|
|
610
|
+
"$value": "{color.neutral.dark.text}",
|
|
611
|
+
"$extensions": {
|
|
612
|
+
"putio": {
|
|
613
|
+
"cssName": "foreground",
|
|
614
|
+
"mode": "dark",
|
|
615
|
+
"figma": false
|
|
616
|
+
}
|
|
617
|
+
}
|
|
618
|
+
},
|
|
619
|
+
"foregroundMuted": {
|
|
620
|
+
"$type": "color",
|
|
621
|
+
"$value": "{color.neutral.light.textSecondary}",
|
|
622
|
+
"$extensions": {
|
|
623
|
+
"putio": {
|
|
624
|
+
"cssName": "foreground-muted",
|
|
625
|
+
"mode": "light",
|
|
626
|
+
"figma": false
|
|
627
|
+
}
|
|
628
|
+
}
|
|
629
|
+
},
|
|
630
|
+
"foregroundMutedDark": {
|
|
631
|
+
"$type": "color",
|
|
632
|
+
"$value": "{color.neutral.dark.textSecondary}",
|
|
633
|
+
"$extensions": {
|
|
634
|
+
"putio": {
|
|
635
|
+
"cssName": "foreground-muted",
|
|
636
|
+
"mode": "dark",
|
|
637
|
+
"figma": false
|
|
638
|
+
}
|
|
639
|
+
}
|
|
640
|
+
},
|
|
641
|
+
"primary": {
|
|
642
|
+
"$type": "color",
|
|
643
|
+
"$value": "{color.brand.yellow}",
|
|
644
|
+
"$extensions": {
|
|
645
|
+
"putio": {
|
|
646
|
+
"cssName": "primary",
|
|
647
|
+
"mode": "global",
|
|
648
|
+
"figma": false
|
|
649
|
+
}
|
|
650
|
+
}
|
|
651
|
+
},
|
|
652
|
+
"primaryForeground": {
|
|
653
|
+
"$type": "color",
|
|
654
|
+
"$value": "hsl(38, 65%, 10%)",
|
|
655
|
+
"$extensions": {
|
|
656
|
+
"putio": {
|
|
657
|
+
"cssName": "primary-foreground",
|
|
658
|
+
"mode": "global",
|
|
659
|
+
"figma": false
|
|
660
|
+
}
|
|
661
|
+
}
|
|
662
|
+
},
|
|
663
|
+
"success": {
|
|
664
|
+
"$type": "color",
|
|
665
|
+
"$value": "{color.green.light.solid}",
|
|
666
|
+
"$extensions": {
|
|
667
|
+
"putio": {
|
|
668
|
+
"cssName": "success",
|
|
669
|
+
"mode": "light",
|
|
670
|
+
"figma": false
|
|
671
|
+
}
|
|
672
|
+
}
|
|
673
|
+
},
|
|
674
|
+
"successDark": {
|
|
675
|
+
"$type": "color",
|
|
676
|
+
"$value": "{color.green.dark.solid}",
|
|
677
|
+
"$extensions": {
|
|
678
|
+
"putio": {
|
|
679
|
+
"cssName": "success",
|
|
680
|
+
"mode": "dark",
|
|
681
|
+
"figma": false
|
|
682
|
+
}
|
|
683
|
+
}
|
|
684
|
+
},
|
|
685
|
+
"successForeground": {
|
|
686
|
+
"$type": "color",
|
|
687
|
+
"$value": "hsl(0, 0%, 100%)",
|
|
688
|
+
"$extensions": {
|
|
689
|
+
"putio": {
|
|
690
|
+
"cssName": "success-foreground",
|
|
691
|
+
"mode": "global",
|
|
692
|
+
"figma": false
|
|
693
|
+
}
|
|
694
|
+
}
|
|
695
|
+
},
|
|
696
|
+
"destructive": {
|
|
697
|
+
"$type": "color",
|
|
698
|
+
"$value": "{color.red.light.solid}",
|
|
699
|
+
"$extensions": {
|
|
700
|
+
"putio": {
|
|
701
|
+
"cssName": "destructive",
|
|
702
|
+
"mode": "light",
|
|
703
|
+
"figma": false
|
|
704
|
+
}
|
|
705
|
+
}
|
|
706
|
+
},
|
|
707
|
+
"destructiveDark": {
|
|
708
|
+
"$type": "color",
|
|
709
|
+
"$value": "{color.red.dark.solid}",
|
|
710
|
+
"$extensions": {
|
|
711
|
+
"putio": {
|
|
712
|
+
"cssName": "destructive",
|
|
713
|
+
"mode": "dark",
|
|
714
|
+
"figma": false
|
|
715
|
+
}
|
|
716
|
+
}
|
|
717
|
+
},
|
|
718
|
+
"destructiveForeground": {
|
|
719
|
+
"$type": "color",
|
|
720
|
+
"$value": "hsl(0, 0%, 100%)",
|
|
721
|
+
"$extensions": {
|
|
722
|
+
"putio": {
|
|
723
|
+
"cssName": "destructive-foreground",
|
|
724
|
+
"mode": "global",
|
|
725
|
+
"figma": false
|
|
726
|
+
}
|
|
727
|
+
}
|
|
728
|
+
},
|
|
729
|
+
"invertForeground": {
|
|
730
|
+
"$type": "color",
|
|
731
|
+
"$value": "{surface.light.appBg}",
|
|
732
|
+
"$description": "Text or icon color on invert command backgrounds in light mode.",
|
|
733
|
+
"$extensions": {
|
|
734
|
+
"putio": {
|
|
735
|
+
"cssName": "invert-foreground",
|
|
736
|
+
"mode": "light",
|
|
737
|
+
"figma": false
|
|
738
|
+
}
|
|
739
|
+
}
|
|
740
|
+
},
|
|
741
|
+
"invertForegroundDark": {
|
|
742
|
+
"$type": "color",
|
|
743
|
+
"$value": "{surface.dark.appBg}",
|
|
744
|
+
"$description": "Text or icon color on invert command backgrounds in dark mode.",
|
|
745
|
+
"$extensions": {
|
|
746
|
+
"putio": {
|
|
747
|
+
"cssName": "invert-foreground",
|
|
748
|
+
"mode": "dark",
|
|
749
|
+
"figma": false
|
|
750
|
+
}
|
|
751
|
+
}
|
|
752
|
+
},
|
|
753
|
+
"solidForeground": {
|
|
754
|
+
"$type": "color",
|
|
755
|
+
"$value": "hsl(0, 0%, 0%)",
|
|
756
|
+
"$extensions": {
|
|
757
|
+
"putio": {
|
|
758
|
+
"cssName": "solid-foreground",
|
|
759
|
+
"mode": "light",
|
|
760
|
+
"figma": false
|
|
761
|
+
}
|
|
762
|
+
}
|
|
763
|
+
},
|
|
764
|
+
"solidForegroundDark": {
|
|
765
|
+
"$type": "color",
|
|
766
|
+
"$value": "hsl(0, 0%, 100%)",
|
|
767
|
+
"$extensions": {
|
|
768
|
+
"putio": {
|
|
769
|
+
"cssName": "solid-foreground",
|
|
770
|
+
"mode": "dark",
|
|
771
|
+
"figma": false
|
|
772
|
+
}
|
|
773
|
+
}
|
|
774
|
+
},
|
|
775
|
+
"muted": {
|
|
776
|
+
"$type": "color",
|
|
777
|
+
"$value": "{color.neutral.light.bgSecondary}",
|
|
778
|
+
"$extensions": {
|
|
779
|
+
"putio": {
|
|
780
|
+
"cssName": "muted",
|
|
781
|
+
"mode": "light",
|
|
782
|
+
"figma": false
|
|
783
|
+
}
|
|
784
|
+
}
|
|
785
|
+
},
|
|
786
|
+
"mutedDark": {
|
|
787
|
+
"$type": "color",
|
|
788
|
+
"$value": "{color.neutral.dark.bgSecondary}",
|
|
789
|
+
"$extensions": {
|
|
790
|
+
"putio": {
|
|
791
|
+
"cssName": "muted",
|
|
792
|
+
"mode": "dark",
|
|
793
|
+
"figma": false
|
|
794
|
+
}
|
|
795
|
+
}
|
|
796
|
+
},
|
|
797
|
+
"mutedForeground": {
|
|
798
|
+
"$type": "color",
|
|
799
|
+
"$value": "{color.neutral.light.textSecondary}",
|
|
800
|
+
"$extensions": {
|
|
801
|
+
"putio": {
|
|
802
|
+
"cssName": "muted-foreground",
|
|
803
|
+
"mode": "light",
|
|
804
|
+
"figma": false
|
|
805
|
+
}
|
|
806
|
+
}
|
|
807
|
+
},
|
|
808
|
+
"mutedForegroundDark": {
|
|
809
|
+
"$type": "color",
|
|
810
|
+
"$value": "{color.neutral.dark.textSecondary}",
|
|
811
|
+
"$extensions": {
|
|
812
|
+
"putio": {
|
|
813
|
+
"cssName": "muted-foreground",
|
|
814
|
+
"mode": "dark",
|
|
815
|
+
"figma": false
|
|
816
|
+
}
|
|
817
|
+
}
|
|
818
|
+
},
|
|
819
|
+
"accent": {
|
|
820
|
+
"$type": "color",
|
|
821
|
+
"$value": "{color.neutral.light.componentBg}",
|
|
822
|
+
"$extensions": {
|
|
823
|
+
"putio": {
|
|
824
|
+
"cssName": "accent",
|
|
825
|
+
"mode": "light",
|
|
826
|
+
"figma": false
|
|
827
|
+
}
|
|
828
|
+
}
|
|
829
|
+
},
|
|
830
|
+
"accentDark": {
|
|
831
|
+
"$type": "color",
|
|
832
|
+
"$value": "{color.neutral.dark.componentBg}",
|
|
833
|
+
"$extensions": {
|
|
834
|
+
"putio": {
|
|
835
|
+
"cssName": "accent",
|
|
836
|
+
"mode": "dark",
|
|
837
|
+
"figma": false
|
|
838
|
+
}
|
|
839
|
+
}
|
|
840
|
+
},
|
|
841
|
+
"accentForeground": {
|
|
842
|
+
"$type": "color",
|
|
843
|
+
"$value": "{color.neutral.light.text}",
|
|
844
|
+
"$extensions": {
|
|
845
|
+
"putio": {
|
|
846
|
+
"cssName": "accent-foreground",
|
|
847
|
+
"mode": "light",
|
|
848
|
+
"figma": false
|
|
849
|
+
}
|
|
850
|
+
}
|
|
851
|
+
},
|
|
852
|
+
"accentForegroundDark": {
|
|
853
|
+
"$type": "color",
|
|
854
|
+
"$value": "{color.neutral.dark.text}",
|
|
855
|
+
"$extensions": {
|
|
856
|
+
"putio": {
|
|
857
|
+
"cssName": "accent-foreground",
|
|
858
|
+
"mode": "dark",
|
|
859
|
+
"figma": false
|
|
860
|
+
}
|
|
861
|
+
}
|
|
862
|
+
},
|
|
863
|
+
"card": {
|
|
864
|
+
"$type": "color",
|
|
865
|
+
"$value": "{color.neutral.light.componentBg}",
|
|
866
|
+
"$extensions": {
|
|
867
|
+
"putio": {
|
|
868
|
+
"cssName": "card",
|
|
869
|
+
"mode": "light",
|
|
870
|
+
"figma": false
|
|
871
|
+
}
|
|
872
|
+
}
|
|
873
|
+
},
|
|
874
|
+
"cardDark": {
|
|
875
|
+
"$type": "color",
|
|
876
|
+
"$value": "{color.neutral.dark.componentBg}",
|
|
877
|
+
"$extensions": {
|
|
878
|
+
"putio": {
|
|
879
|
+
"cssName": "card",
|
|
880
|
+
"mode": "dark",
|
|
881
|
+
"figma": false
|
|
882
|
+
}
|
|
883
|
+
}
|
|
884
|
+
},
|
|
885
|
+
"cardForeground": {
|
|
886
|
+
"$type": "color",
|
|
887
|
+
"$value": "{color.neutral.light.text}",
|
|
888
|
+
"$extensions": {
|
|
889
|
+
"putio": {
|
|
890
|
+
"cssName": "card-foreground",
|
|
891
|
+
"mode": "light",
|
|
892
|
+
"figma": false
|
|
893
|
+
}
|
|
894
|
+
}
|
|
895
|
+
},
|
|
896
|
+
"cardForegroundDark": {
|
|
897
|
+
"$type": "color",
|
|
898
|
+
"$value": "{color.neutral.dark.text}",
|
|
899
|
+
"$extensions": {
|
|
900
|
+
"putio": {
|
|
901
|
+
"cssName": "card-foreground",
|
|
902
|
+
"mode": "dark",
|
|
903
|
+
"figma": false
|
|
904
|
+
}
|
|
905
|
+
}
|
|
906
|
+
},
|
|
907
|
+
"popover": {
|
|
908
|
+
"$type": "color",
|
|
909
|
+
"$value": "{color.neutral.light.componentBg}",
|
|
910
|
+
"$extensions": {
|
|
911
|
+
"putio": {
|
|
912
|
+
"cssName": "popover",
|
|
913
|
+
"mode": "light",
|
|
914
|
+
"figma": false
|
|
915
|
+
}
|
|
916
|
+
}
|
|
917
|
+
},
|
|
918
|
+
"popoverDark": {
|
|
919
|
+
"$type": "color",
|
|
920
|
+
"$value": "{color.neutral.dark.componentBg}",
|
|
921
|
+
"$extensions": {
|
|
922
|
+
"putio": {
|
|
923
|
+
"cssName": "popover",
|
|
924
|
+
"mode": "dark",
|
|
925
|
+
"figma": false
|
|
926
|
+
}
|
|
927
|
+
}
|
|
928
|
+
},
|
|
929
|
+
"popoverForeground": {
|
|
930
|
+
"$type": "color",
|
|
931
|
+
"$value": "{color.neutral.light.text}",
|
|
932
|
+
"$extensions": {
|
|
933
|
+
"putio": {
|
|
934
|
+
"cssName": "popover-foreground",
|
|
935
|
+
"mode": "light",
|
|
936
|
+
"figma": false
|
|
937
|
+
}
|
|
938
|
+
}
|
|
939
|
+
},
|
|
940
|
+
"popoverForegroundDark": {
|
|
941
|
+
"$type": "color",
|
|
942
|
+
"$value": "{color.neutral.dark.text}",
|
|
943
|
+
"$extensions": {
|
|
944
|
+
"putio": {
|
|
945
|
+
"cssName": "popover-foreground",
|
|
946
|
+
"mode": "dark",
|
|
947
|
+
"figma": false
|
|
948
|
+
}
|
|
949
|
+
}
|
|
950
|
+
},
|
|
951
|
+
"input": {
|
|
952
|
+
"$type": "color",
|
|
953
|
+
"$value": "{color.neutral.light.border}",
|
|
954
|
+
"$extensions": {
|
|
955
|
+
"putio": {
|
|
956
|
+
"cssName": "input",
|
|
957
|
+
"mode": "light",
|
|
958
|
+
"figma": false
|
|
959
|
+
}
|
|
960
|
+
}
|
|
961
|
+
},
|
|
962
|
+
"inputDark": {
|
|
963
|
+
"$type": "color",
|
|
964
|
+
"$value": "{color.neutral.dark.border}",
|
|
965
|
+
"$extensions": {
|
|
966
|
+
"putio": {
|
|
967
|
+
"cssName": "input",
|
|
968
|
+
"mode": "dark",
|
|
969
|
+
"figma": false
|
|
970
|
+
}
|
|
971
|
+
}
|
|
972
|
+
},
|
|
973
|
+
"ring": {
|
|
974
|
+
"$type": "color",
|
|
975
|
+
"$value": "{elevation.focusColor}",
|
|
976
|
+
"$extensions": {
|
|
977
|
+
"putio": {
|
|
978
|
+
"cssName": "ring",
|
|
979
|
+
"mode": "global",
|
|
980
|
+
"figma": false
|
|
981
|
+
}
|
|
982
|
+
}
|
|
983
|
+
}
|
|
984
|
+
},
|
|
134
985
|
"fileRow": {
|
|
135
986
|
"background": {
|
|
136
987
|
"$type": "color",
|
|
@@ -231,7 +1082,7 @@
|
|
|
231
1082
|
"surface": {
|
|
232
1083
|
"0": {
|
|
233
1084
|
"$type": "color",
|
|
234
|
-
"$value": "
|
|
1085
|
+
"$value": "hsl(0, 0%, 0%)",
|
|
235
1086
|
"$extensions": {
|
|
236
1087
|
"putio": {
|
|
237
1088
|
"cssName": "surf-0",
|
|
@@ -241,7 +1092,7 @@
|
|
|
241
1092
|
},
|
|
242
1093
|
"1": {
|
|
243
1094
|
"$type": "color",
|
|
244
|
-
"$value": "
|
|
1095
|
+
"$value": "hsl(0, 0%, 3.9%)",
|
|
245
1096
|
"$extensions": {
|
|
246
1097
|
"putio": {
|
|
247
1098
|
"cssName": "surf-1",
|
|
@@ -251,7 +1102,7 @@
|
|
|
251
1102
|
},
|
|
252
1103
|
"2": {
|
|
253
1104
|
"$type": "color",
|
|
254
|
-
"$value": "
|
|
1105
|
+
"$value": "hsl(0, 0%, 8.6%)",
|
|
255
1106
|
"$extensions": {
|
|
256
1107
|
"putio": {
|
|
257
1108
|
"cssName": "surf-2",
|
|
@@ -261,7 +1112,7 @@
|
|
|
261
1112
|
},
|
|
262
1113
|
"3": {
|
|
263
1114
|
"$type": "color",
|
|
264
|
-
"$value": "
|
|
1115
|
+
"$value": "hsl(0, 0%, 12.2%)",
|
|
265
1116
|
"$extensions": {
|
|
266
1117
|
"putio": {
|
|
267
1118
|
"cssName": "surf-3",
|
|
@@ -273,7 +1124,7 @@
|
|
|
273
1124
|
"text": {
|
|
274
1125
|
"primary": {
|
|
275
1126
|
"$type": "color",
|
|
276
|
-
"$value": "
|
|
1127
|
+
"$value": "hsl(0, 0%, 95.7%)",
|
|
277
1128
|
"$extensions": {
|
|
278
1129
|
"putio": {
|
|
279
1130
|
"cssName": "text-1",
|
|
@@ -283,7 +1134,7 @@
|
|
|
283
1134
|
},
|
|
284
1135
|
"secondary": {
|
|
285
1136
|
"$type": "color",
|
|
286
|
-
"$value": "
|
|
1137
|
+
"$value": "hsla(0, 0%, 95.7%, 0.62)",
|
|
287
1138
|
"$extensions": {
|
|
288
1139
|
"putio": {
|
|
289
1140
|
"cssName": "text-2",
|
|
@@ -293,7 +1144,7 @@
|
|
|
293
1144
|
},
|
|
294
1145
|
"tertiary": {
|
|
295
1146
|
"$type": "color",
|
|
296
|
-
"$value": "
|
|
1147
|
+
"$value": "hsla(0, 0%, 95.7%, 0.38)",
|
|
297
1148
|
"$extensions": {
|
|
298
1149
|
"putio": {
|
|
299
1150
|
"cssName": "text-3",
|
|
@@ -305,7 +1156,7 @@
|
|
|
305
1156
|
"glass": {
|
|
306
1157
|
"1": {
|
|
307
1158
|
"$type": "color",
|
|
308
|
-
"$value": "
|
|
1159
|
+
"$value": "hsla(0, 0%, 100%, 0.06)",
|
|
309
1160
|
"$extensions": {
|
|
310
1161
|
"putio": {
|
|
311
1162
|
"cssName": "glass-1-bg",
|
|
@@ -315,7 +1166,7 @@
|
|
|
315
1166
|
},
|
|
316
1167
|
"2": {
|
|
317
1168
|
"$type": "color",
|
|
318
|
-
"$value": "
|
|
1169
|
+
"$value": "hsla(0, 0%, 100%, 0.10)",
|
|
319
1170
|
"$extensions": {
|
|
320
1171
|
"putio": {
|
|
321
1172
|
"cssName": "glass-2-bg",
|
|
@@ -325,7 +1176,7 @@
|
|
|
325
1176
|
},
|
|
326
1177
|
"3": {
|
|
327
1178
|
"$type": "color",
|
|
328
|
-
"$value": "
|
|
1179
|
+
"$value": "hsla(0, 0%, 100%, 0.14)",
|
|
329
1180
|
"$extensions": {
|
|
330
1181
|
"putio": {
|
|
331
1182
|
"cssName": "glass-3-bg",
|
|
@@ -335,7 +1186,7 @@
|
|
|
335
1186
|
},
|
|
336
1187
|
"border": {
|
|
337
1188
|
"$type": "color",
|
|
338
|
-
"$value": "
|
|
1189
|
+
"$value": "hsla(0, 0%, 100%, 0.12)",
|
|
339
1190
|
"$extensions": {
|
|
340
1191
|
"putio": {
|
|
341
1192
|
"cssName": "glass-border",
|
|
@@ -345,7 +1196,7 @@
|
|
|
345
1196
|
},
|
|
346
1197
|
"borderStrong": {
|
|
347
1198
|
"$type": "color",
|
|
348
|
-
"$value": "
|
|
1199
|
+
"$value": "hsla(0, 0%, 100%, 0.22)",
|
|
349
1200
|
"$extensions": {
|
|
350
1201
|
"putio": {
|
|
351
1202
|
"cssName": "glass-border-strong",
|
|
@@ -357,7 +1208,7 @@
|
|
|
357
1208
|
"focus": {
|
|
358
1209
|
"ring": {
|
|
359
1210
|
"$type": "color",
|
|
360
|
-
"$value": "
|
|
1211
|
+
"$value": "hsla(44.7, 97.9%, 63.1%, 0.18)",
|
|
361
1212
|
"$extensions": {
|
|
362
1213
|
"putio": {
|
|
363
1214
|
"cssName": "focus-ring",
|
|
@@ -367,7 +1218,7 @@
|
|
|
367
1218
|
},
|
|
368
1219
|
"liftShadow": {
|
|
369
1220
|
"$type": "string",
|
|
370
|
-
"$value": "0 14px 30px
|
|
1221
|
+
"$value": "0 14px 30px hsla(0, 0%, 0%, 0.45)",
|
|
371
1222
|
"$extensions": {
|
|
372
1223
|
"putio": {
|
|
373
1224
|
"cssName": "focus-shadow",
|
|
@@ -375,6 +1226,94 @@
|
|
|
375
1226
|
}
|
|
376
1227
|
}
|
|
377
1228
|
}
|
|
1229
|
+
},
|
|
1230
|
+
"channelArt": {
|
|
1231
|
+
"production": {
|
|
1232
|
+
"posterBackground": {
|
|
1233
|
+
"$type": "color",
|
|
1234
|
+
"$value": "hsl(0, 0%, 20%)",
|
|
1235
|
+
"$extensions": {
|
|
1236
|
+
"putio": {
|
|
1237
|
+
"cssName": "tv-channel-art-production-poster-bg",
|
|
1238
|
+
"mode": "tv"
|
|
1239
|
+
}
|
|
1240
|
+
}
|
|
1241
|
+
},
|
|
1242
|
+
"splashBackground": {
|
|
1243
|
+
"$type": "color",
|
|
1244
|
+
"$value": "{color.neutral.dark.bg}",
|
|
1245
|
+
"$extensions": {
|
|
1246
|
+
"putio": {
|
|
1247
|
+
"cssName": "tv-channel-art-production-splash-bg",
|
|
1248
|
+
"mode": "tv"
|
|
1249
|
+
}
|
|
1250
|
+
}
|
|
1251
|
+
}
|
|
1252
|
+
},
|
|
1253
|
+
"development": {
|
|
1254
|
+
"background": {
|
|
1255
|
+
"$type": "color",
|
|
1256
|
+
"$value": "hsl(206.7, 78.8%, 52%)",
|
|
1257
|
+
"$extensions": {
|
|
1258
|
+
"putio": {
|
|
1259
|
+
"cssName": "tv-channel-art-development-bg",
|
|
1260
|
+
"mode": "tv"
|
|
1261
|
+
}
|
|
1262
|
+
}
|
|
1263
|
+
},
|
|
1264
|
+
"accent": {
|
|
1265
|
+
"$type": "color",
|
|
1266
|
+
"$value": "hsl(206.3, 100%, 81.2%)",
|
|
1267
|
+
"$extensions": {
|
|
1268
|
+
"putio": {
|
|
1269
|
+
"cssName": "tv-channel-art-development-accent",
|
|
1270
|
+
"mode": "tv"
|
|
1271
|
+
}
|
|
1272
|
+
}
|
|
1273
|
+
},
|
|
1274
|
+
"grid": {
|
|
1275
|
+
"$type": "color",
|
|
1276
|
+
"$value": "hsla(0, 0%, 100%, 0.18)",
|
|
1277
|
+
"$extensions": {
|
|
1278
|
+
"putio": {
|
|
1279
|
+
"cssName": "tv-channel-art-development-grid",
|
|
1280
|
+
"mode": "tv"
|
|
1281
|
+
}
|
|
1282
|
+
}
|
|
1283
|
+
}
|
|
1284
|
+
},
|
|
1285
|
+
"lab": {
|
|
1286
|
+
"background": {
|
|
1287
|
+
"$type": "color",
|
|
1288
|
+
"$value": "hsl(120, 20%, 4.9%)",
|
|
1289
|
+
"$extensions": {
|
|
1290
|
+
"putio": {
|
|
1291
|
+
"cssName": "tv-channel-art-lab-bg",
|
|
1292
|
+
"mode": "tv"
|
|
1293
|
+
}
|
|
1294
|
+
}
|
|
1295
|
+
},
|
|
1296
|
+
"foreground": {
|
|
1297
|
+
"$type": "color",
|
|
1298
|
+
"$value": "hsl(111.1, 100%, 94.7%)",
|
|
1299
|
+
"$extensions": {
|
|
1300
|
+
"putio": {
|
|
1301
|
+
"cssName": "tv-channel-art-lab-fg",
|
|
1302
|
+
"mode": "tv"
|
|
1303
|
+
}
|
|
1304
|
+
}
|
|
1305
|
+
},
|
|
1306
|
+
"accent": {
|
|
1307
|
+
"$type": "color",
|
|
1308
|
+
"$value": "hsl(110.6, 100%, 53.9%)",
|
|
1309
|
+
"$extensions": {
|
|
1310
|
+
"putio": {
|
|
1311
|
+
"cssName": "tv-channel-art-lab-accent",
|
|
1312
|
+
"mode": "tv"
|
|
1313
|
+
}
|
|
1314
|
+
}
|
|
1315
|
+
}
|
|
1316
|
+
}
|
|
378
1317
|
}
|
|
379
1318
|
}
|
|
380
1319
|
},
|
|
@@ -382,8 +1321,8 @@
|
|
|
382
1321
|
"brand": {
|
|
383
1322
|
"yellow": {
|
|
384
1323
|
"$type": "color",
|
|
385
|
-
"$value": "
|
|
386
|
-
"$description": "
|
|
1324
|
+
"$value": "hsl(44.7, 97.9%, 63.1%)",
|
|
1325
|
+
"$description": "put.io brand yellow (canonical hex #FDCE45). The resting brand fill is the same in light and dark modes.",
|
|
387
1326
|
"$extensions": {
|
|
388
1327
|
"putio": {
|
|
389
1328
|
"cssName": "yellow-solid",
|
|
@@ -643,7 +1582,7 @@
|
|
|
643
1582
|
"light": {
|
|
644
1583
|
"bg": {
|
|
645
1584
|
"$type": "color",
|
|
646
|
-
"$value": "hsl(
|
|
1585
|
+
"$value": "hsl(140, 60%, 99%)",
|
|
647
1586
|
"$extensions": {
|
|
648
1587
|
"putio": {
|
|
649
1588
|
"cssName": "green-bg",
|
|
@@ -653,7 +1592,7 @@
|
|
|
653
1592
|
},
|
|
654
1593
|
"bgSecondary": {
|
|
655
1594
|
"$type": "color",
|
|
656
|
-
"$value": "hsl(
|
|
1595
|
+
"$value": "hsl(140, 41%, 97%)",
|
|
657
1596
|
"$extensions": {
|
|
658
1597
|
"putio": {
|
|
659
1598
|
"cssName": "green-bg-secondary",
|
|
@@ -663,7 +1602,7 @@
|
|
|
663
1602
|
},
|
|
664
1603
|
"componentBg": {
|
|
665
1604
|
"$type": "color",
|
|
666
|
-
"$value": "hsl(
|
|
1605
|
+
"$value": "hsl(135, 53%, 93%)",
|
|
667
1606
|
"$extensions": {
|
|
668
1607
|
"putio": {
|
|
669
1608
|
"cssName": "green-component-bg",
|
|
@@ -673,7 +1612,7 @@
|
|
|
673
1612
|
},
|
|
674
1613
|
"componentBgHover": {
|
|
675
1614
|
"$type": "color",
|
|
676
|
-
"$value": "hsl(
|
|
1615
|
+
"$value": "hsl(138, 58%, 89%)",
|
|
677
1616
|
"$extensions": {
|
|
678
1617
|
"putio": {
|
|
679
1618
|
"cssName": "green-component-bg-hover",
|
|
@@ -683,7 +1622,7 @@
|
|
|
683
1622
|
},
|
|
684
1623
|
"componentBgActive": {
|
|
685
1624
|
"$type": "color",
|
|
686
|
-
"$value": "hsl(
|
|
1625
|
+
"$value": "hsl(140, 50%, 84%)",
|
|
687
1626
|
"$extensions": {
|
|
688
1627
|
"putio": {
|
|
689
1628
|
"cssName": "green-component-bg-active",
|
|
@@ -693,7 +1632,7 @@
|
|
|
693
1632
|
},
|
|
694
1633
|
"line": {
|
|
695
1634
|
"$type": "color",
|
|
696
|
-
"$value": "hsl(
|
|
1635
|
+
"$value": "hsl(141, 47%, 77%)",
|
|
697
1636
|
"$extensions": {
|
|
698
1637
|
"putio": {
|
|
699
1638
|
"cssName": "green-line",
|
|
@@ -703,7 +1642,7 @@
|
|
|
703
1642
|
},
|
|
704
1643
|
"border": {
|
|
705
1644
|
"$type": "color",
|
|
706
|
-
"$value": "hsl(
|
|
1645
|
+
"$value": "hsl(140, 39%, 68%)",
|
|
707
1646
|
"$extensions": {
|
|
708
1647
|
"putio": {
|
|
709
1648
|
"cssName": "green-border",
|
|
@@ -713,7 +1652,7 @@
|
|
|
713
1652
|
},
|
|
714
1653
|
"borderHover": {
|
|
715
1654
|
"$type": "color",
|
|
716
|
-
"$value": "hsl(
|
|
1655
|
+
"$value": "hsl(146, 39%, 55%)",
|
|
717
1656
|
"$extensions": {
|
|
718
1657
|
"putio": {
|
|
719
1658
|
"cssName": "green-border-hover",
|
|
@@ -723,7 +1662,7 @@
|
|
|
723
1662
|
},
|
|
724
1663
|
"solid": {
|
|
725
1664
|
"$type": "color",
|
|
726
|
-
"$value": "hsl(151, 55
|
|
1665
|
+
"$value": "hsl(151, 55%, 41.5%)",
|
|
727
1666
|
"$extensions": {
|
|
728
1667
|
"putio": {
|
|
729
1668
|
"cssName": "green-solid",
|
|
@@ -733,7 +1672,7 @@
|
|
|
733
1672
|
},
|
|
734
1673
|
"solidHover": {
|
|
735
1674
|
"$type": "color",
|
|
736
|
-
"$value": "hsl(
|
|
1675
|
+
"$value": "hsl(151, 58%, 37%)",
|
|
737
1676
|
"$extensions": {
|
|
738
1677
|
"putio": {
|
|
739
1678
|
"cssName": "green-solid-hover",
|
|
@@ -743,7 +1682,7 @@
|
|
|
743
1682
|
},
|
|
744
1683
|
"textSecondary": {
|
|
745
1684
|
"$type": "color",
|
|
746
|
-
"$value": "hsl(
|
|
1685
|
+
"$value": "hsl(155, 100%, 25%)",
|
|
747
1686
|
"$extensions": {
|
|
748
1687
|
"putio": {
|
|
749
1688
|
"cssName": "green-text-secondary",
|
|
@@ -753,7 +1692,7 @@
|
|
|
753
1692
|
},
|
|
754
1693
|
"text": {
|
|
755
1694
|
"$type": "color",
|
|
756
|
-
"$value": "hsl(
|
|
1695
|
+
"$value": "hsl(146, 35%, 17%)",
|
|
757
1696
|
"$extensions": {
|
|
758
1697
|
"putio": {
|
|
759
1698
|
"cssName": "green-text",
|
|
@@ -765,7 +1704,7 @@
|
|
|
765
1704
|
"dark": {
|
|
766
1705
|
"bg": {
|
|
767
1706
|
"$type": "color",
|
|
768
|
-
"$value": "hsl(
|
|
1707
|
+
"$value": "hsl(140, 13%, 6%)",
|
|
769
1708
|
"$extensions": {
|
|
770
1709
|
"putio": {
|
|
771
1710
|
"cssName": "green-bg",
|
|
@@ -775,7 +1714,7 @@
|
|
|
775
1714
|
},
|
|
776
1715
|
"bgSecondary": {
|
|
777
1716
|
"$type": "color",
|
|
778
|
-
"$value": "hsl(
|
|
1717
|
+
"$value": "hsl(149, 21%, 9%)",
|
|
779
1718
|
"$extensions": {
|
|
780
1719
|
"putio": {
|
|
781
1720
|
"cssName": "green-bg-secondary",
|
|
@@ -785,7 +1724,7 @@
|
|
|
785
1724
|
},
|
|
786
1725
|
"componentBg": {
|
|
787
1726
|
"$type": "color",
|
|
788
|
-
"$value": "hsl(
|
|
1727
|
+
"$value": "hsl(151, 35%, 13%)",
|
|
789
1728
|
"$extensions": {
|
|
790
1729
|
"putio": {
|
|
791
1730
|
"cssName": "green-component-bg",
|
|
@@ -795,7 +1734,7 @@
|
|
|
795
1734
|
},
|
|
796
1735
|
"componentBgHover": {
|
|
797
1736
|
"$type": "color",
|
|
798
|
-
"$value": "hsl(
|
|
1737
|
+
"$value": "hsl(149, 49%, 16%)",
|
|
799
1738
|
"$extensions": {
|
|
800
1739
|
"putio": {
|
|
801
1740
|
"cssName": "green-component-bg-hover",
|
|
@@ -805,7 +1744,7 @@
|
|
|
805
1744
|
},
|
|
806
1745
|
"componentBgActive": {
|
|
807
1746
|
"$type": "color",
|
|
808
|
-
"$value": "hsl(
|
|
1747
|
+
"$value": "hsl(149, 46%, 19%)",
|
|
809
1748
|
"$extensions": {
|
|
810
1749
|
"putio": {
|
|
811
1750
|
"cssName": "green-component-bg-active",
|
|
@@ -815,7 +1754,7 @@
|
|
|
815
1754
|
},
|
|
816
1755
|
"line": {
|
|
817
1756
|
"$type": "color",
|
|
818
|
-
"$value": "hsl(
|
|
1757
|
+
"$value": "hsl(146, 42%, 24%)",
|
|
819
1758
|
"$extensions": {
|
|
820
1759
|
"putio": {
|
|
821
1760
|
"cssName": "green-line",
|
|
@@ -825,7 +1764,7 @@
|
|
|
825
1764
|
},
|
|
826
1765
|
"border": {
|
|
827
1766
|
"$type": "color",
|
|
828
|
-
"$value": "hsl(
|
|
1767
|
+
"$value": "hsl(146, 41%, 29%)",
|
|
829
1768
|
"$extensions": {
|
|
830
1769
|
"putio": {
|
|
831
1770
|
"cssName": "green-border",
|
|
@@ -835,7 +1774,7 @@
|
|
|
835
1774
|
},
|
|
836
1775
|
"borderHover": {
|
|
837
1776
|
"$type": "color",
|
|
838
|
-
"$value": "hsl(
|
|
1777
|
+
"$value": "hsl(148, 43%, 34%)",
|
|
839
1778
|
"$extensions": {
|
|
840
1779
|
"putio": {
|
|
841
1780
|
"cssName": "green-border-hover",
|
|
@@ -845,7 +1784,7 @@
|
|
|
845
1784
|
},
|
|
846
1785
|
"solid": {
|
|
847
1786
|
"$type": "color",
|
|
848
|
-
"$value": "hsl(151, 55
|
|
1787
|
+
"$value": "hsl(151, 55%, 41.5%)",
|
|
849
1788
|
"$extensions": {
|
|
850
1789
|
"putio": {
|
|
851
1790
|
"cssName": "green-solid",
|
|
@@ -855,7 +1794,7 @@
|
|
|
855
1794
|
},
|
|
856
1795
|
"solidHover": {
|
|
857
1796
|
"$type": "color",
|
|
858
|
-
"$value": "hsl(151,
|
|
1797
|
+
"$value": "hsl(151, 68%, 35%)",
|
|
859
1798
|
"$extensions": {
|
|
860
1799
|
"putio": {
|
|
861
1800
|
"cssName": "green-solid-hover",
|
|
@@ -865,7 +1804,7 @@
|
|
|
865
1804
|
},
|
|
866
1805
|
"textSecondary": {
|
|
867
1806
|
"$type": "color",
|
|
868
|
-
"$value": "hsl(
|
|
1807
|
+
"$value": "hsl(146, 56%, 60%)",
|
|
869
1808
|
"$extensions": {
|
|
870
1809
|
"putio": {
|
|
871
1810
|
"cssName": "green-text-secondary",
|
|
@@ -875,7 +1814,7 @@
|
|
|
875
1814
|
},
|
|
876
1815
|
"text": {
|
|
877
1816
|
"$type": "color",
|
|
878
|
-
"$value": "hsl(
|
|
1817
|
+
"$value": "hsl(142, 71%, 82%)",
|
|
879
1818
|
"$extensions": {
|
|
880
1819
|
"putio": {
|
|
881
1820
|
"cssName": "green-text",
|
|
@@ -889,7 +1828,7 @@
|
|
|
889
1828
|
"light": {
|
|
890
1829
|
"bg": {
|
|
891
1830
|
"$type": "color",
|
|
892
|
-
"$value": "hsl(
|
|
1831
|
+
"$value": "hsl(0, 100%, 99%)",
|
|
893
1832
|
"$extensions": {
|
|
894
1833
|
"putio": {
|
|
895
1834
|
"cssName": "red-bg",
|
|
@@ -899,7 +1838,7 @@
|
|
|
899
1838
|
},
|
|
900
1839
|
"bgSecondary": {
|
|
901
1840
|
"$type": "color",
|
|
902
|
-
"$value": "hsl(
|
|
1841
|
+
"$value": "hsl(0, 100%, 98%)",
|
|
903
1842
|
"$extensions": {
|
|
904
1843
|
"putio": {
|
|
905
1844
|
"cssName": "red-bg-secondary",
|
|
@@ -909,7 +1848,7 @@
|
|
|
909
1848
|
},
|
|
910
1849
|
"componentBg": {
|
|
911
1850
|
"$type": "color",
|
|
912
|
-
"$value": "hsl(
|
|
1851
|
+
"$value": "hsl(2, 100%, 96%)",
|
|
913
1852
|
"$extensions": {
|
|
914
1853
|
"putio": {
|
|
915
1854
|
"cssName": "red-component-bg",
|
|
@@ -919,7 +1858,7 @@
|
|
|
919
1858
|
},
|
|
920
1859
|
"componentBgHover": {
|
|
921
1860
|
"$type": "color",
|
|
922
|
-
"$value": "hsl(
|
|
1861
|
+
"$value": "hsl(4, 100%, 93%)",
|
|
923
1862
|
"$extensions": {
|
|
924
1863
|
"putio": {
|
|
925
1864
|
"cssName": "red-component-bg-hover",
|
|
@@ -929,7 +1868,7 @@
|
|
|
929
1868
|
},
|
|
930
1869
|
"componentBgActive": {
|
|
931
1870
|
"$type": "color",
|
|
932
|
-
"$value": "hsl(
|
|
1871
|
+
"$value": "hsl(3, 100%, 89%)",
|
|
933
1872
|
"$extensions": {
|
|
934
1873
|
"putio": {
|
|
935
1874
|
"cssName": "red-component-bg-active",
|
|
@@ -939,7 +1878,7 @@
|
|
|
939
1878
|
},
|
|
940
1879
|
"line": {
|
|
941
1880
|
"$type": "color",
|
|
942
|
-
"$value": "hsl(
|
|
1881
|
+
"$value": "hsl(3, 97%, 86%)",
|
|
943
1882
|
"$extensions": {
|
|
944
1883
|
"putio": {
|
|
945
1884
|
"cssName": "red-line",
|
|
@@ -949,7 +1888,7 @@
|
|
|
949
1888
|
},
|
|
950
1889
|
"border": {
|
|
951
1890
|
"$type": "color",
|
|
952
|
-
"$value": "hsl(
|
|
1891
|
+
"$value": "hsl(2, 81%, 80%)",
|
|
953
1892
|
"$extensions": {
|
|
954
1893
|
"putio": {
|
|
955
1894
|
"cssName": "red-border",
|
|
@@ -959,7 +1898,7 @@
|
|
|
959
1898
|
},
|
|
960
1899
|
"borderHover": {
|
|
961
1900
|
"$type": "color",
|
|
962
|
-
"$value": "hsl(
|
|
1901
|
+
"$value": "hsl(2, 71%, 73%)",
|
|
963
1902
|
"$extensions": {
|
|
964
1903
|
"putio": {
|
|
965
1904
|
"cssName": "red-border-hover",
|
|
@@ -969,7 +1908,7 @@
|
|
|
969
1908
|
},
|
|
970
1909
|
"solid": {
|
|
971
1910
|
"$type": "color",
|
|
972
|
-
"$value": "hsl(358, 75
|
|
1911
|
+
"$value": "hsl(358, 75%, 59%)",
|
|
973
1912
|
"$extensions": {
|
|
974
1913
|
"putio": {
|
|
975
1914
|
"cssName": "red-solid",
|
|
@@ -979,7 +1918,7 @@
|
|
|
979
1918
|
},
|
|
980
1919
|
"solidHover": {
|
|
981
1920
|
"$type": "color",
|
|
982
|
-
"$value": "hsl(
|
|
1921
|
+
"$value": "hsl(357, 66%, 53%)",
|
|
983
1922
|
"$extensions": {
|
|
984
1923
|
"putio": {
|
|
985
1924
|
"cssName": "red-solid-hover",
|
|
@@ -989,7 +1928,7 @@
|
|
|
989
1928
|
},
|
|
990
1929
|
"textSecondary": {
|
|
991
1930
|
"$type": "color",
|
|
992
|
-
"$value": "hsl(
|
|
1931
|
+
"$value": "hsl(355, 64%, 49%)",
|
|
993
1932
|
"$extensions": {
|
|
994
1933
|
"putio": {
|
|
995
1934
|
"cssName": "red-text-secondary",
|
|
@@ -999,7 +1938,7 @@
|
|
|
999
1938
|
},
|
|
1000
1939
|
"text": {
|
|
1001
1940
|
"$type": "color",
|
|
1002
|
-
"$value": "hsl(
|
|
1941
|
+
"$value": "hsl(358, 62%, 24%)",
|
|
1003
1942
|
"$extensions": {
|
|
1004
1943
|
"putio": {
|
|
1005
1944
|
"cssName": "red-text",
|
|
@@ -1011,7 +1950,7 @@
|
|
|
1011
1950
|
"dark": {
|
|
1012
1951
|
"bg": {
|
|
1013
1952
|
"$type": "color",
|
|
1014
|
-
"$value": "hsl(
|
|
1953
|
+
"$value": "hsl(8, 13%, 7%)",
|
|
1015
1954
|
"$extensions": {
|
|
1016
1955
|
"putio": {
|
|
1017
1956
|
"cssName": "red-bg",
|
|
@@ -1021,7 +1960,7 @@
|
|
|
1021
1960
|
},
|
|
1022
1961
|
"bgSecondary": {
|
|
1023
1962
|
"$type": "color",
|
|
1024
|
-
"$value": "hsl(
|
|
1963
|
+
"$value": "hsl(4, 28%, 10%)",
|
|
1025
1964
|
"$extensions": {
|
|
1026
1965
|
"putio": {
|
|
1027
1966
|
"cssName": "red-bg-secondary",
|
|
@@ -1031,7 +1970,7 @@
|
|
|
1031
1970
|
},
|
|
1032
1971
|
"componentBg": {
|
|
1033
1972
|
"$type": "color",
|
|
1034
|
-
"$value": "hsl(
|
|
1973
|
+
"$value": "hsl(0, 55%, 15%)",
|
|
1035
1974
|
"$extensions": {
|
|
1036
1975
|
"putio": {
|
|
1037
1976
|
"cssName": "red-component-bg",
|
|
@@ -1041,7 +1980,7 @@
|
|
|
1041
1980
|
},
|
|
1042
1981
|
"componentBgHover": {
|
|
1043
1982
|
"$type": "color",
|
|
1044
|
-
"$value": "hsl(
|
|
1983
|
+
"$value": "hsl(357, 70%, 19%)",
|
|
1045
1984
|
"$extensions": {
|
|
1046
1985
|
"putio": {
|
|
1047
1986
|
"cssName": "red-component-bg-hover",
|
|
@@ -1051,7 +1990,7 @@
|
|
|
1051
1990
|
},
|
|
1052
1991
|
"componentBgActive": {
|
|
1053
1992
|
"$type": "color",
|
|
1054
|
-
"$value": "hsl(
|
|
1993
|
+
"$value": "hsl(358, 62%, 24%)",
|
|
1055
1994
|
"$extensions": {
|
|
1056
1995
|
"putio": {
|
|
1057
1996
|
"cssName": "red-component-bg-active",
|
|
@@ -1061,7 +2000,7 @@
|
|
|
1061
2000
|
},
|
|
1062
2001
|
"line": {
|
|
1063
2002
|
"$type": "color",
|
|
1064
|
-
"$value": "hsl(
|
|
2003
|
+
"$value": "hsl(359, 52%, 30%)",
|
|
1065
2004
|
"$extensions": {
|
|
1066
2005
|
"putio": {
|
|
1067
2006
|
"cssName": "red-line",
|
|
@@ -1071,7 +2010,7 @@
|
|
|
1071
2010
|
},
|
|
1072
2011
|
"border": {
|
|
1073
2012
|
"$type": "color",
|
|
1074
|
-
"$value": "hsl(
|
|
2013
|
+
"$value": "hsl(0, 46%, 38%)",
|
|
1075
2014
|
"$extensions": {
|
|
1076
2015
|
"putio": {
|
|
1077
2016
|
"cssName": "red-border",
|
|
@@ -1081,7 +2020,7 @@
|
|
|
1081
2020
|
},
|
|
1082
2021
|
"borderHover": {
|
|
1083
2022
|
"$type": "color",
|
|
1084
|
-
"$value": "hsl(
|
|
2023
|
+
"$value": "hsl(359, 45%, 49%)",
|
|
1085
2024
|
"$extensions": {
|
|
1086
2025
|
"putio": {
|
|
1087
2026
|
"cssName": "red-border-hover",
|
|
@@ -1091,7 +2030,7 @@
|
|
|
1091
2030
|
},
|
|
1092
2031
|
"solid": {
|
|
1093
2032
|
"$type": "color",
|
|
1094
|
-
"$value": "hsl(358, 75
|
|
2033
|
+
"$value": "hsl(358, 75%, 59%)",
|
|
1095
2034
|
"$extensions": {
|
|
1096
2035
|
"putio": {
|
|
1097
2036
|
"cssName": "red-solid",
|
|
@@ -1101,7 +2040,7 @@
|
|
|
1101
2040
|
},
|
|
1102
2041
|
"solidHover": {
|
|
1103
2042
|
"$type": "color",
|
|
1104
|
-
"$value": "hsl(
|
|
2043
|
+
"$value": "hsl(357, 67%, 53%)",
|
|
1105
2044
|
"$extensions": {
|
|
1106
2045
|
"putio": {
|
|
1107
2046
|
"cssName": "red-solid-hover",
|
|
@@ -1111,7 +2050,7 @@
|
|
|
1111
2050
|
},
|
|
1112
2051
|
"textSecondary": {
|
|
1113
2052
|
"$type": "color",
|
|
1114
|
-
"$value": "hsl(
|
|
2053
|
+
"$value": "hsl(2, 100%, 77%)",
|
|
1115
2054
|
"$extensions": {
|
|
1116
2055
|
"putio": {
|
|
1117
2056
|
"cssName": "red-text-secondary",
|
|
@@ -1121,7 +2060,7 @@
|
|
|
1121
2060
|
},
|
|
1122
2061
|
"text": {
|
|
1123
2062
|
"$type": "color",
|
|
1124
|
-
"$value": "hsl(
|
|
2063
|
+
"$value": "hsl(5, 100%, 91%)",
|
|
1125
2064
|
"$extensions": {
|
|
1126
2065
|
"putio": {
|
|
1127
2066
|
"cssName": "red-text",
|
|
@@ -1135,7 +2074,7 @@
|
|
|
1135
2074
|
"light": {
|
|
1136
2075
|
"bg": {
|
|
1137
2076
|
"$type": "color",
|
|
1138
|
-
"$value": "hsl(
|
|
2077
|
+
"$value": "hsl(45, 60%, 99%)",
|
|
1139
2078
|
"$extensions": {
|
|
1140
2079
|
"putio": {
|
|
1141
2080
|
"cssName": "yellow-bg",
|
|
@@ -1145,7 +2084,7 @@
|
|
|
1145
2084
|
},
|
|
1146
2085
|
"bgSecondary": {
|
|
1147
2086
|
"$type": "color",
|
|
1148
|
-
"$value": "hsl(
|
|
2087
|
+
"$value": "hsl(53, 100%, 96%)",
|
|
1149
2088
|
"$extensions": {
|
|
1150
2089
|
"putio": {
|
|
1151
2090
|
"cssName": "yellow-bg-secondary",
|
|
@@ -1155,7 +2094,7 @@
|
|
|
1155
2094
|
},
|
|
1156
2095
|
"componentBg": {
|
|
1157
2096
|
"$type": "color",
|
|
1158
|
-
"$value": "hsl(
|
|
2097
|
+
"$value": "hsl(52, 100%, 88%)",
|
|
1159
2098
|
"$extensions": {
|
|
1160
2099
|
"putio": {
|
|
1161
2100
|
"cssName": "yellow-component-bg",
|
|
@@ -1165,7 +2104,7 @@
|
|
|
1165
2104
|
},
|
|
1166
2105
|
"componentBgHover": {
|
|
1167
2106
|
"$type": "color",
|
|
1168
|
-
"$value": "hsl(
|
|
2107
|
+
"$value": "hsl(50, 100%, 82%)",
|
|
1169
2108
|
"$extensions": {
|
|
1170
2109
|
"putio": {
|
|
1171
2110
|
"cssName": "yellow-component-bg-hover",
|
|
@@ -1175,7 +2114,7 @@
|
|
|
1175
2114
|
},
|
|
1176
2115
|
"componentBgActive": {
|
|
1177
2116
|
"$type": "color",
|
|
1178
|
-
"$value": "hsl(
|
|
2117
|
+
"$value": "hsl(48, 100%, 76%)",
|
|
1179
2118
|
"$extensions": {
|
|
1180
2119
|
"putio": {
|
|
1181
2120
|
"cssName": "yellow-component-bg-active",
|
|
@@ -1185,7 +2124,7 @@
|
|
|
1185
2124
|
},
|
|
1186
2125
|
"line": {
|
|
1187
2126
|
"$type": "color",
|
|
1188
|
-
"$value": "hsl(
|
|
2127
|
+
"$value": "hsl(46, 87%, 73%)",
|
|
1189
2128
|
"$extensions": {
|
|
1190
2129
|
"putio": {
|
|
1191
2130
|
"cssName": "yellow-line",
|
|
@@ -1195,7 +2134,7 @@
|
|
|
1195
2134
|
},
|
|
1196
2135
|
"border": {
|
|
1197
2136
|
"$type": "color",
|
|
1198
|
-
"$value": "hsl(
|
|
2137
|
+
"$value": "hsl(45, 67%, 67%)",
|
|
1199
2138
|
"$extensions": {
|
|
1200
2139
|
"putio": {
|
|
1201
2140
|
"cssName": "yellow-border",
|
|
@@ -1205,7 +2144,7 @@
|
|
|
1205
2144
|
},
|
|
1206
2145
|
"borderHover": {
|
|
1207
2146
|
"$type": "color",
|
|
1208
|
-
"$value": "hsl(
|
|
2147
|
+
"$value": "hsl(44, 58%, 56%)",
|
|
1209
2148
|
"$extensions": {
|
|
1210
2149
|
"putio": {
|
|
1211
2150
|
"cssName": "yellow-border-hover",
|
|
@@ -1215,7 +2154,8 @@
|
|
|
1215
2154
|
},
|
|
1216
2155
|
"solidHover": {
|
|
1217
2156
|
"$type": "color",
|
|
1218
|
-
"$value": "
|
|
2157
|
+
"$value": "hsl(45, 89%, 58%)",
|
|
2158
|
+
"$description": "Primary-button hover yellow for light mode.",
|
|
1219
2159
|
"$extensions": {
|
|
1220
2160
|
"putio": {
|
|
1221
2161
|
"cssName": "yellow-solid-hover",
|
|
@@ -1225,7 +2165,7 @@
|
|
|
1225
2165
|
},
|
|
1226
2166
|
"textSecondary": {
|
|
1227
2167
|
"$type": "color",
|
|
1228
|
-
"$value": "hsl(
|
|
2168
|
+
"$value": "hsl(46, 100%, 29%)",
|
|
1229
2169
|
"$extensions": {
|
|
1230
2170
|
"putio": {
|
|
1231
2171
|
"cssName": "yellow-text-secondary",
|
|
@@ -1235,7 +2175,7 @@
|
|
|
1235
2175
|
},
|
|
1236
2176
|
"text": {
|
|
1237
2177
|
"$type": "color",
|
|
1238
|
-
"$value": "hsl(
|
|
2178
|
+
"$value": "hsl(43, 32%, 21%)",
|
|
1239
2179
|
"$extensions": {
|
|
1240
2180
|
"putio": {
|
|
1241
2181
|
"cssName": "yellow-text",
|
|
@@ -1247,7 +2187,7 @@
|
|
|
1247
2187
|
"dark": {
|
|
1248
2188
|
"bg": {
|
|
1249
2189
|
"$type": "color",
|
|
1250
|
-
"$value": "hsl(
|
|
2190
|
+
"$value": "hsl(0, 0%, 0%)",
|
|
1251
2191
|
"$extensions": {
|
|
1252
2192
|
"putio": {
|
|
1253
2193
|
"cssName": "yellow-bg",
|
|
@@ -1257,7 +2197,7 @@
|
|
|
1257
2197
|
},
|
|
1258
2198
|
"bgSecondary": {
|
|
1259
2199
|
"$type": "color",
|
|
1260
|
-
"$value": "hsl(
|
|
2200
|
+
"$value": "hsl(38, 35%, 6%)",
|
|
1261
2201
|
"$extensions": {
|
|
1262
2202
|
"putio": {
|
|
1263
2203
|
"cssName": "yellow-bg-secondary",
|
|
@@ -1267,7 +2207,7 @@
|
|
|
1267
2207
|
},
|
|
1268
2208
|
"componentBg": {
|
|
1269
2209
|
"$type": "color",
|
|
1270
|
-
"$value": "hsl(45,
|
|
2210
|
+
"$value": "hsl(45, 70%, 9%)",
|
|
1271
2211
|
"$extensions": {
|
|
1272
2212
|
"putio": {
|
|
1273
2213
|
"cssName": "yellow-component-bg",
|
|
@@ -1277,7 +2217,7 @@
|
|
|
1277
2217
|
},
|
|
1278
2218
|
"componentBgHover": {
|
|
1279
2219
|
"$type": "color",
|
|
1280
|
-
"$value": "hsl(
|
|
2220
|
+
"$value": "hsl(44, 100%, 11%)",
|
|
1281
2221
|
"$extensions": {
|
|
1282
2222
|
"putio": {
|
|
1283
2223
|
"cssName": "yellow-component-bg-hover",
|
|
@@ -1287,7 +2227,7 @@
|
|
|
1287
2227
|
},
|
|
1288
2228
|
"componentBgActive": {
|
|
1289
2229
|
"$type": "color",
|
|
1290
|
-
"$value": "hsl(
|
|
2230
|
+
"$value": "hsl(44, 100%, 14%)",
|
|
1291
2231
|
"$extensions": {
|
|
1292
2232
|
"putio": {
|
|
1293
2233
|
"cssName": "yellow-component-bg-active",
|
|
@@ -1297,7 +2237,7 @@
|
|
|
1297
2237
|
},
|
|
1298
2238
|
"line": {
|
|
1299
2239
|
"$type": "color",
|
|
1300
|
-
"$value": "hsl(
|
|
2240
|
+
"$value": "hsl(45, 71%, 19%)",
|
|
1301
2241
|
"$extensions": {
|
|
1302
2242
|
"putio": {
|
|
1303
2243
|
"cssName": "yellow-line",
|
|
@@ -1307,7 +2247,7 @@
|
|
|
1307
2247
|
},
|
|
1308
2248
|
"border": {
|
|
1309
2249
|
"$type": "color",
|
|
1310
|
-
"$value": "hsl(
|
|
2250
|
+
"$value": "hsl(45, 53%, 26%)",
|
|
1311
2251
|
"$extensions": {
|
|
1312
2252
|
"putio": {
|
|
1313
2253
|
"cssName": "yellow-border",
|
|
@@ -1317,7 +2257,7 @@
|
|
|
1317
2257
|
},
|
|
1318
2258
|
"borderHover": {
|
|
1319
2259
|
"$type": "color",
|
|
1320
|
-
"$value": "hsl(
|
|
2260
|
+
"$value": "hsl(45, 49%, 34%)",
|
|
1321
2261
|
"$extensions": {
|
|
1322
2262
|
"putio": {
|
|
1323
2263
|
"cssName": "yellow-border-hover",
|
|
@@ -1327,7 +2267,8 @@
|
|
|
1327
2267
|
},
|
|
1328
2268
|
"solidHover": {
|
|
1329
2269
|
"$type": "color",
|
|
1330
|
-
"$value": "
|
|
2270
|
+
"$value": "hsl(45, 89%, 58%)",
|
|
2271
|
+
"$description": "Primary-button hover yellow for dark mode.",
|
|
1331
2272
|
"$extensions": {
|
|
1332
2273
|
"putio": {
|
|
1333
2274
|
"cssName": "yellow-solid-hover",
|
|
@@ -1337,7 +2278,7 @@
|
|
|
1337
2278
|
},
|
|
1338
2279
|
"textSecondary": {
|
|
1339
2280
|
"$type": "color",
|
|
1340
|
-
"$value": "hsl(
|
|
2281
|
+
"$value": "hsl(45, 100%, 64%)",
|
|
1341
2282
|
"$extensions": {
|
|
1342
2283
|
"putio": {
|
|
1343
2284
|
"cssName": "yellow-text-secondary",
|
|
@@ -1347,7 +2288,7 @@
|
|
|
1347
2288
|
},
|
|
1348
2289
|
"text": {
|
|
1349
2290
|
"$type": "color",
|
|
1350
|
-
"$value": "hsl(
|
|
2291
|
+
"$value": "hsl(46, 89%, 86%)",
|
|
1351
2292
|
"$extensions": {
|
|
1352
2293
|
"putio": {
|
|
1353
2294
|
"cssName": "yellow-text",
|
|
@@ -1453,7 +2394,7 @@
|
|
|
1453
2394
|
},
|
|
1454
2395
|
"focus": {
|
|
1455
2396
|
"$type": "string",
|
|
1456
|
-
"$value": "0 0 0 3px
|
|
2397
|
+
"$value": "0 0 0 3px {elevation.focusColor}",
|
|
1457
2398
|
"$extensions": {
|
|
1458
2399
|
"putio": {
|
|
1459
2400
|
"cssName": "shadow-focus",
|
|
@@ -2007,7 +2948,7 @@
|
|
|
2007
2948
|
},
|
|
2008
2949
|
"appBg": {
|
|
2009
2950
|
"$type": "color",
|
|
2010
|
-
"$value": "
|
|
2951
|
+
"$value": "hsl(0, 0%, 100%)",
|
|
2011
2952
|
"$extensions": {
|
|
2012
2953
|
"putio": {
|
|
2013
2954
|
"cssName": "app-bg",
|
|
@@ -2017,7 +2958,7 @@
|
|
|
2017
2958
|
},
|
|
2018
2959
|
"navBg": {
|
|
2019
2960
|
"$type": "color",
|
|
2020
|
-
"$value": "
|
|
2961
|
+
"$value": "hsl(0, 0%, 100%)",
|
|
2021
2962
|
"$extensions": {
|
|
2022
2963
|
"putio": {
|
|
2023
2964
|
"cssName": "nav-bg",
|
|
@@ -2027,7 +2968,7 @@
|
|
|
2027
2968
|
},
|
|
2028
2969
|
"navItemBg": {
|
|
2029
2970
|
"$type": "color",
|
|
2030
|
-
"$value": "
|
|
2971
|
+
"$value": "hsla(0, 0%, 0%, 0)",
|
|
2031
2972
|
"$extensions": {
|
|
2032
2973
|
"putio": {
|
|
2033
2974
|
"cssName": "nav-item-bg",
|
|
@@ -2057,7 +2998,7 @@
|
|
|
2057
2998
|
},
|
|
2058
2999
|
"listItemBg": {
|
|
2059
3000
|
"$type": "color",
|
|
2060
|
-
"$value": "
|
|
3001
|
+
"$value": "hsla(0, 0%, 0%, 0)",
|
|
2061
3002
|
"$extensions": {
|
|
2062
3003
|
"putio": {
|
|
2063
3004
|
"cssName": "list-item-bg",
|
|
@@ -2107,7 +3048,7 @@
|
|
|
2107
3048
|
},
|
|
2108
3049
|
"segmentedControlBgActive": {
|
|
2109
3050
|
"$type": "color",
|
|
2110
|
-
"$value": "
|
|
3051
|
+
"$value": "hsl(0, 0%, 100%)",
|
|
2111
3052
|
"$extensions": {
|
|
2112
3053
|
"putio": {
|
|
2113
3054
|
"cssName": "segmented-control-bg-active",
|
|
@@ -2177,7 +3118,7 @@
|
|
|
2177
3118
|
},
|
|
2178
3119
|
"transparent": {
|
|
2179
3120
|
"$type": "color",
|
|
2180
|
-
"$value": "
|
|
3121
|
+
"$value": "hsla(0, 0%, 0%, 0)",
|
|
2181
3122
|
"$extensions": {
|
|
2182
3123
|
"putio": {
|
|
2183
3124
|
"cssName": "transparent",
|
|
@@ -2209,7 +3150,7 @@
|
|
|
2209
3150
|
"dark": {
|
|
2210
3151
|
"htmlBg": {
|
|
2211
3152
|
"$type": "color",
|
|
2212
|
-
"$value": "
|
|
3153
|
+
"$value": "hsl(0, 0%, 0%)",
|
|
2213
3154
|
"$extensions": {
|
|
2214
3155
|
"putio": {
|
|
2215
3156
|
"cssName": "html-bg",
|
|
@@ -2239,7 +3180,7 @@
|
|
|
2239
3180
|
},
|
|
2240
3181
|
"navItemBg": {
|
|
2241
3182
|
"$type": "color",
|
|
2242
|
-
"$value": "
|
|
3183
|
+
"$value": "hsla(0, 0%, 0%, 0)",
|
|
2243
3184
|
"$extensions": {
|
|
2244
3185
|
"putio": {
|
|
2245
3186
|
"cssName": "nav-item-bg",
|
|
@@ -2269,7 +3210,7 @@
|
|
|
2269
3210
|
},
|
|
2270
3211
|
"listItemBg": {
|
|
2271
3212
|
"$type": "color",
|
|
2272
|
-
"$value": "
|
|
3213
|
+
"$value": "hsla(0, 0%, 0%, 0)",
|
|
2273
3214
|
"$extensions": {
|
|
2274
3215
|
"putio": {
|
|
2275
3216
|
"cssName": "list-item-bg",
|
|
@@ -2409,7 +3350,7 @@
|
|
|
2409
3350
|
},
|
|
2410
3351
|
"shadowColor": {
|
|
2411
3352
|
"$type": "color",
|
|
2412
|
-
"$value": "
|
|
3353
|
+
"$value": "hsl(0, 0%, 0%)",
|
|
2413
3354
|
"$extensions": {
|
|
2414
3355
|
"putio": {
|
|
2415
3356
|
"cssName": "shadow-color",
|
|
@@ -2419,7 +3360,7 @@
|
|
|
2419
3360
|
},
|
|
2420
3361
|
"shadow": {
|
|
2421
3362
|
"$type": "color",
|
|
2422
|
-
"$value": "
|
|
3363
|
+
"$value": "hsl(0, 0%, 0%)",
|
|
2423
3364
|
"$extensions": {
|
|
2424
3365
|
"putio": {
|
|
2425
3366
|
"cssName": "shadow",
|