@putdotio/design 1.2.1 → 1.4.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 +9 -5
- package/dist/css/tokens.css +57 -20
- package/dist/figma/putio.tokens.json +47 -10
- package/dist/tokens.d.ts +1 -1
- package/dist/tokens.dtcg.json +267 -54
- package/dist/tokens.flat.json +199 -60
- package/dist/tokens.js +199 -60
- package/package.json +3 -2
- package/system/README.md +93 -19
- package/tokens/components.tokens.json +112 -0
- package/tokens/foundation.css +29 -9
- package/tokens/primitives.tokens.json +127 -27
- package/tokens/semantic.tokens.json +28 -27
package/dist/tokens.dtcg.json
CHANGED
|
@@ -215,6 +215,28 @@
|
|
|
215
215
|
}
|
|
216
216
|
},
|
|
217
217
|
"info": {
|
|
218
|
+
"background": {
|
|
219
|
+
"$type": "color",
|
|
220
|
+
"$value": "{color.neutral.light.solid}",
|
|
221
|
+
"$description": "Neutral solid command background in light mode.",
|
|
222
|
+
"$extensions": {
|
|
223
|
+
"putio": {
|
|
224
|
+
"cssName": "button-info-bg",
|
|
225
|
+
"mode": "light"
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
},
|
|
229
|
+
"backgroundDark": {
|
|
230
|
+
"$type": "color",
|
|
231
|
+
"$value": "{color.neutral.dark.solid}",
|
|
232
|
+
"$description": "Neutral solid command background in dark mode.",
|
|
233
|
+
"$extensions": {
|
|
234
|
+
"putio": {
|
|
235
|
+
"cssName": "button-info-bg",
|
|
236
|
+
"mode": "dark"
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
},
|
|
218
240
|
"backgroundHover": {
|
|
219
241
|
"$type": "color",
|
|
220
242
|
"$value": "{color.neutral.light.solidHover}",
|
|
@@ -236,6 +258,96 @@
|
|
|
236
258
|
"mode": "dark"
|
|
237
259
|
}
|
|
238
260
|
}
|
|
261
|
+
},
|
|
262
|
+
"foreground": {
|
|
263
|
+
"$type": "color",
|
|
264
|
+
"$value": "{component.alias.solidForeground}",
|
|
265
|
+
"$description": "Label on the neutral solid — mode-aware for AA contrast on the gray fill.",
|
|
266
|
+
"$extensions": {
|
|
267
|
+
"putio": {
|
|
268
|
+
"cssName": "button-info-fg",
|
|
269
|
+
"mode": "light"
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
},
|
|
273
|
+
"foregroundDark": {
|
|
274
|
+
"$type": "color",
|
|
275
|
+
"$value": "{component.alias.solidForegroundDark}",
|
|
276
|
+
"$description": "Label on the neutral solid in dark mode.",
|
|
277
|
+
"$extensions": {
|
|
278
|
+
"putio": {
|
|
279
|
+
"cssName": "button-info-fg",
|
|
280
|
+
"mode": "dark"
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
},
|
|
285
|
+
"default": {
|
|
286
|
+
"background": {
|
|
287
|
+
"$type": "color",
|
|
288
|
+
"$value": "{color.neutral.light.componentBg}",
|
|
289
|
+
"$description": "Quiet default button fill in light mode.",
|
|
290
|
+
"$extensions": {
|
|
291
|
+
"putio": {
|
|
292
|
+
"cssName": "button-default-bg",
|
|
293
|
+
"mode": "light"
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
},
|
|
297
|
+
"backgroundDark": {
|
|
298
|
+
"$type": "color",
|
|
299
|
+
"$value": "{color.neutral.dark.componentBg}",
|
|
300
|
+
"$description": "Quiet default button fill in dark mode.",
|
|
301
|
+
"$extensions": {
|
|
302
|
+
"putio": {
|
|
303
|
+
"cssName": "button-default-bg",
|
|
304
|
+
"mode": "dark"
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
},
|
|
308
|
+
"backgroundHover": {
|
|
309
|
+
"$type": "color",
|
|
310
|
+
"$value": "{color.neutral.light.componentBgHover}",
|
|
311
|
+
"$description": "Default button hover fill in light mode.",
|
|
312
|
+
"$extensions": {
|
|
313
|
+
"putio": {
|
|
314
|
+
"cssName": "button-default-bg-hover",
|
|
315
|
+
"mode": "light"
|
|
316
|
+
}
|
|
317
|
+
}
|
|
318
|
+
},
|
|
319
|
+
"backgroundHoverDark": {
|
|
320
|
+
"$type": "color",
|
|
321
|
+
"$value": "{color.neutral.dark.componentBgHover}",
|
|
322
|
+
"$description": "Default button hover fill in dark mode.",
|
|
323
|
+
"$extensions": {
|
|
324
|
+
"putio": {
|
|
325
|
+
"cssName": "button-default-bg-hover",
|
|
326
|
+
"mode": "dark"
|
|
327
|
+
}
|
|
328
|
+
}
|
|
329
|
+
},
|
|
330
|
+
"foreground": {
|
|
331
|
+
"$type": "color",
|
|
332
|
+
"$value": "{color.neutral.light.text}",
|
|
333
|
+
"$description": "Default button label in light mode.",
|
|
334
|
+
"$extensions": {
|
|
335
|
+
"putio": {
|
|
336
|
+
"cssName": "button-default-fg",
|
|
337
|
+
"mode": "light"
|
|
338
|
+
}
|
|
339
|
+
}
|
|
340
|
+
},
|
|
341
|
+
"foregroundDark": {
|
|
342
|
+
"$type": "color",
|
|
343
|
+
"$value": "{color.neutral.dark.text}",
|
|
344
|
+
"$description": "Default button label in dark mode.",
|
|
345
|
+
"$extensions": {
|
|
346
|
+
"putio": {
|
|
347
|
+
"cssName": "button-default-fg",
|
|
348
|
+
"mode": "dark"
|
|
349
|
+
}
|
|
350
|
+
}
|
|
239
351
|
}
|
|
240
352
|
}
|
|
241
353
|
},
|
|
@@ -1784,7 +1896,7 @@
|
|
|
1784
1896
|
},
|
|
1785
1897
|
"solid": {
|
|
1786
1898
|
"$type": "color",
|
|
1787
|
-
"$value": "
|
|
1899
|
+
"$value": "{color.green.light.solid}",
|
|
1788
1900
|
"$extensions": {
|
|
1789
1901
|
"putio": {
|
|
1790
1902
|
"cssName": "green-solid",
|
|
@@ -2030,7 +2142,7 @@
|
|
|
2030
2142
|
},
|
|
2031
2143
|
"solid": {
|
|
2032
2144
|
"$type": "color",
|
|
2033
|
-
"$value": "
|
|
2145
|
+
"$value": "{color.red.light.solid}",
|
|
2034
2146
|
"$extensions": {
|
|
2035
2147
|
"putio": {
|
|
2036
2148
|
"cssName": "red-solid",
|
|
@@ -2267,7 +2379,7 @@
|
|
|
2267
2379
|
},
|
|
2268
2380
|
"solidHover": {
|
|
2269
2381
|
"$type": "color",
|
|
2270
|
-
"$value": "
|
|
2382
|
+
"$value": "{color.yellow.light.solidHover}",
|
|
2271
2383
|
"$description": "Primary-button hover yellow for dark mode.",
|
|
2272
2384
|
"$extensions": {
|
|
2273
2385
|
"putio": {
|
|
@@ -2339,7 +2451,8 @@
|
|
|
2339
2451
|
},
|
|
2340
2452
|
"color": {
|
|
2341
2453
|
"$type": "color",
|
|
2342
|
-
"$value": "
|
|
2454
|
+
"$value": "{elevation.shadowColor}",
|
|
2455
|
+
"$description": "Compat name kept for existing web consumers — alias of elevation.shadowColor so the two can never drift.",
|
|
2343
2456
|
"$extensions": {
|
|
2344
2457
|
"putio": {
|
|
2345
2458
|
"cssName": "shadow",
|
|
@@ -2394,24 +2507,11 @@
|
|
|
2394
2507
|
},
|
|
2395
2508
|
"focus": {
|
|
2396
2509
|
"$type": "string",
|
|
2397
|
-
"$value": "0 0 0
|
|
2398
|
-
"$description": "Focus ring: brand-yellow inner band + high-contrast text-color outer edge so the indicator clears WCAG 1.4.11 (3:1) on any surface. Light-mode edge.",
|
|
2399
|
-
"$extensions": {
|
|
2400
|
-
"putio": {
|
|
2401
|
-
"cssName": "shadow-focus",
|
|
2402
|
-
"mode": "light",
|
|
2403
|
-
"figma": false
|
|
2404
|
-
}
|
|
2405
|
-
}
|
|
2406
|
-
},
|
|
2407
|
-
"focusDark": {
|
|
2408
|
-
"$type": "string",
|
|
2409
|
-
"$value": "0 0 0 2px {elevation.focusColor}, 0 0 0 3.5px hsl(0, 0%, 93.0%)",
|
|
2410
|
-
"$description": "Dark-mode focus ring: brand-yellow inner band + high-contrast text-color outer edge (WCAG 1.4.11).",
|
|
2510
|
+
"$value": "0 0 0 3px {elevation.focusColor}",
|
|
2411
2511
|
"$extensions": {
|
|
2412
2512
|
"putio": {
|
|
2413
2513
|
"cssName": "shadow-focus",
|
|
2414
|
-
"mode": "
|
|
2514
|
+
"mode": "global",
|
|
2415
2515
|
"figma": false
|
|
2416
2516
|
}
|
|
2417
2517
|
}
|
|
@@ -2432,7 +2532,7 @@
|
|
|
2432
2532
|
},
|
|
2433
2533
|
"display": {
|
|
2434
2534
|
"$type": "fontFamily",
|
|
2435
|
-
"$value": "
|
|
2535
|
+
"$value": "{typography.fontFamily.sans}",
|
|
2436
2536
|
"$extensions": {
|
|
2437
2537
|
"putio": {
|
|
2438
2538
|
"cssName": "font-display",
|
|
@@ -2454,7 +2554,7 @@
|
|
|
2454
2554
|
},
|
|
2455
2555
|
"mono": {
|
|
2456
2556
|
"$type": "fontFamily",
|
|
2457
|
-
"$value": "\"Berkeley Mono\",
|
|
2557
|
+
"$value": "\"Berkeley Mono\", {typography.fontFamily.uiMono}",
|
|
2458
2558
|
"$extensions": {
|
|
2459
2559
|
"putio": {
|
|
2460
2560
|
"cssName": "font-mono",
|
|
@@ -2478,7 +2578,8 @@
|
|
|
2478
2578
|
},
|
|
2479
2579
|
"sm": {
|
|
2480
2580
|
"$type": "dimension",
|
|
2481
|
-
"$value": "0.
|
|
2581
|
+
"$value": "0.875rem",
|
|
2582
|
+
"$description": "Caption and button labels — production fontSize 0.",
|
|
2482
2583
|
"$extensions": {
|
|
2483
2584
|
"putio": {
|
|
2484
2585
|
"cssName": "fs-sm",
|
|
@@ -2489,7 +2590,8 @@
|
|
|
2489
2590
|
},
|
|
2490
2591
|
"base": {
|
|
2491
2592
|
"$type": "dimension",
|
|
2492
|
-
"$value": "
|
|
2593
|
+
"$value": "1rem",
|
|
2594
|
+
"$description": "Body, labels, inputs — production fontSize 1; equals the responsive root (14px, 15px at >= breakpoint.lg).",
|
|
2493
2595
|
"$extensions": {
|
|
2494
2596
|
"putio": {
|
|
2495
2597
|
"cssName": "fs-base",
|
|
@@ -2500,7 +2602,8 @@
|
|
|
2500
2602
|
},
|
|
2501
2603
|
"md": {
|
|
2502
2604
|
"$type": "dimension",
|
|
2503
|
-
"$value": "
|
|
2605
|
+
"$value": "1.125rem",
|
|
2606
|
+
"$description": "Subheading.",
|
|
2504
2607
|
"$extensions": {
|
|
2505
2608
|
"putio": {
|
|
2506
2609
|
"cssName": "fs-md",
|
|
@@ -2511,7 +2614,8 @@
|
|
|
2511
2614
|
},
|
|
2512
2615
|
"lg": {
|
|
2513
2616
|
"$type": "dimension",
|
|
2514
|
-
"$value": "1.
|
|
2617
|
+
"$value": "1.5rem",
|
|
2618
|
+
"$description": "Heading.",
|
|
2515
2619
|
"$extensions": {
|
|
2516
2620
|
"putio": {
|
|
2517
2621
|
"cssName": "fs-lg",
|
|
@@ -2522,7 +2626,8 @@
|
|
|
2522
2626
|
},
|
|
2523
2627
|
"xl": {
|
|
2524
2628
|
"$type": "dimension",
|
|
2525
|
-
"$value": "
|
|
2629
|
+
"$value": "2rem",
|
|
2630
|
+
"$description": "Page title.",
|
|
2526
2631
|
"$extensions": {
|
|
2527
2632
|
"putio": {
|
|
2528
2633
|
"cssName": "fs-xl",
|
|
@@ -2533,7 +2638,8 @@
|
|
|
2533
2638
|
},
|
|
2534
2639
|
"2xl": {
|
|
2535
2640
|
"$type": "dimension",
|
|
2536
|
-
"$value": "
|
|
2641
|
+
"$value": "48px",
|
|
2642
|
+
"$description": "Fixed display tier — does not scale with the responsive root.",
|
|
2537
2643
|
"$extensions": {
|
|
2538
2644
|
"putio": {
|
|
2539
2645
|
"cssName": "fs-2xl",
|
|
@@ -2544,7 +2650,8 @@
|
|
|
2544
2650
|
},
|
|
2545
2651
|
"3xl": {
|
|
2546
2652
|
"$type": "dimension",
|
|
2547
|
-
"$value": "
|
|
2653
|
+
"$value": "64px",
|
|
2654
|
+
"$description": "Fixed display tier — does not scale with the responsive root.",
|
|
2548
2655
|
"$extensions": {
|
|
2549
2656
|
"putio": {
|
|
2550
2657
|
"cssName": "fs-3xl",
|
|
@@ -2555,7 +2662,8 @@
|
|
|
2555
2662
|
},
|
|
2556
2663
|
"4xl": {
|
|
2557
2664
|
"$type": "dimension",
|
|
2558
|
-
"$value": "
|
|
2665
|
+
"$value": "{typography.fontSize.3xl}",
|
|
2666
|
+
"$description": "Compatibility alias for the former 4xl tier; new surfaces should use fontSize.3xl or fontSize.display.",
|
|
2559
2667
|
"$extensions": {
|
|
2560
2668
|
"putio": {
|
|
2561
2669
|
"cssName": "fs-4xl",
|
|
@@ -2566,7 +2674,8 @@
|
|
|
2566
2674
|
},
|
|
2567
2675
|
"display": {
|
|
2568
2676
|
"$type": "dimension",
|
|
2569
|
-
"$value": "
|
|
2677
|
+
"$value": "96px",
|
|
2678
|
+
"$description": "Fixed display tier for brand display moments.",
|
|
2570
2679
|
"$extensions": {
|
|
2571
2680
|
"putio": {
|
|
2572
2681
|
"cssName": "fs-display",
|
|
@@ -2947,11 +3056,114 @@
|
|
|
2947
3056
|
}
|
|
2948
3057
|
}
|
|
2949
3058
|
},
|
|
3059
|
+
"z": {
|
|
3060
|
+
"$description": "Stacking scale. Gapped for platform chrome — never invent z-index numbers in apps.",
|
|
3061
|
+
"dropdown": {
|
|
3062
|
+
"$type": "number",
|
|
3063
|
+
"$value": 1000,
|
|
3064
|
+
"$extensions": {
|
|
3065
|
+
"putio": {
|
|
3066
|
+
"cssName": "z-dropdown",
|
|
3067
|
+
"mode": "global",
|
|
3068
|
+
"category": "other",
|
|
3069
|
+
"figma": false
|
|
3070
|
+
}
|
|
3071
|
+
}
|
|
3072
|
+
},
|
|
3073
|
+
"sticky": {
|
|
3074
|
+
"$type": "number",
|
|
3075
|
+
"$value": 1100,
|
|
3076
|
+
"$extensions": {
|
|
3077
|
+
"putio": {
|
|
3078
|
+
"cssName": "z-sticky",
|
|
3079
|
+
"mode": "global",
|
|
3080
|
+
"category": "other",
|
|
3081
|
+
"figma": false
|
|
3082
|
+
}
|
|
3083
|
+
}
|
|
3084
|
+
},
|
|
3085
|
+
"modal": {
|
|
3086
|
+
"$type": "number",
|
|
3087
|
+
"$value": 1300,
|
|
3088
|
+
"$extensions": {
|
|
3089
|
+
"putio": {
|
|
3090
|
+
"cssName": "z-modal",
|
|
3091
|
+
"mode": "global",
|
|
3092
|
+
"category": "other",
|
|
3093
|
+
"figma": false
|
|
3094
|
+
}
|
|
3095
|
+
}
|
|
3096
|
+
},
|
|
3097
|
+
"notification": {
|
|
3098
|
+
"$type": "number",
|
|
3099
|
+
"$value": 1400,
|
|
3100
|
+
"$extensions": {
|
|
3101
|
+
"putio": {
|
|
3102
|
+
"cssName": "z-notification",
|
|
3103
|
+
"mode": "global",
|
|
3104
|
+
"category": "other",
|
|
3105
|
+
"figma": false
|
|
3106
|
+
}
|
|
3107
|
+
}
|
|
3108
|
+
},
|
|
3109
|
+
"tooltip": {
|
|
3110
|
+
"$type": "number",
|
|
3111
|
+
"$value": 1500,
|
|
3112
|
+
"$extensions": {
|
|
3113
|
+
"putio": {
|
|
3114
|
+
"cssName": "z-tooltip",
|
|
3115
|
+
"mode": "global",
|
|
3116
|
+
"category": "other",
|
|
3117
|
+
"figma": false
|
|
3118
|
+
}
|
|
3119
|
+
}
|
|
3120
|
+
}
|
|
3121
|
+
},
|
|
3122
|
+
"breakpoint": {
|
|
3123
|
+
"$description": "Responsive breakpoints, lifted from app.put.io's BREAKPOINTS. Generator-facing: CSS media queries cannot read custom properties, so emitters bind these as Tailwind screens, StyleX consts, or documented literals.",
|
|
3124
|
+
"sm": {
|
|
3125
|
+
"$type": "dimension",
|
|
3126
|
+
"$value": "640px",
|
|
3127
|
+
"$extensions": {
|
|
3128
|
+
"putio": {
|
|
3129
|
+
"cssName": "bp-sm",
|
|
3130
|
+
"mode": "global",
|
|
3131
|
+
"category": "other",
|
|
3132
|
+
"figma": false
|
|
3133
|
+
}
|
|
3134
|
+
}
|
|
3135
|
+
},
|
|
3136
|
+
"md": {
|
|
3137
|
+
"$type": "dimension",
|
|
3138
|
+
"$value": "768px",
|
|
3139
|
+
"$extensions": {
|
|
3140
|
+
"putio": {
|
|
3141
|
+
"cssName": "bp-md",
|
|
3142
|
+
"mode": "global",
|
|
3143
|
+
"category": "other",
|
|
3144
|
+
"figma": false
|
|
3145
|
+
}
|
|
3146
|
+
}
|
|
3147
|
+
},
|
|
3148
|
+
"lg": {
|
|
3149
|
+
"$type": "dimension",
|
|
3150
|
+
"$value": "1280px",
|
|
3151
|
+
"$description": "The root font-size steps from 14px to 15px at this width.",
|
|
3152
|
+
"$extensions": {
|
|
3153
|
+
"putio": {
|
|
3154
|
+
"cssName": "bp-lg",
|
|
3155
|
+
"mode": "global",
|
|
3156
|
+
"category": "other",
|
|
3157
|
+
"figma": false
|
|
3158
|
+
}
|
|
3159
|
+
}
|
|
3160
|
+
}
|
|
3161
|
+
},
|
|
2950
3162
|
"surface": {
|
|
2951
3163
|
"light": {
|
|
2952
3164
|
"htmlBg": {
|
|
2953
3165
|
"$type": "color",
|
|
2954
|
-
"$value": "
|
|
3166
|
+
"$value": "{color.neutral.light.bgSecondary}",
|
|
2955
3167
|
"$extensions": {
|
|
2956
3168
|
"putio": {
|
|
2957
3169
|
"cssName": "html-bg",
|
|
@@ -2971,7 +3183,7 @@
|
|
|
2971
3183
|
},
|
|
2972
3184
|
"navBg": {
|
|
2973
3185
|
"$type": "color",
|
|
2974
|
-
"$value": "
|
|
3186
|
+
"$value": "{surface.light.appBg}",
|
|
2975
3187
|
"$extensions": {
|
|
2976
3188
|
"putio": {
|
|
2977
3189
|
"cssName": "nav-bg",
|
|
@@ -2991,7 +3203,7 @@
|
|
|
2991
3203
|
},
|
|
2992
3204
|
"navItemBgHover": {
|
|
2993
3205
|
"$type": "color",
|
|
2994
|
-
"$value": "
|
|
3206
|
+
"$value": "{color.neutral.light.componentBg}",
|
|
2995
3207
|
"$extensions": {
|
|
2996
3208
|
"putio": {
|
|
2997
3209
|
"cssName": "nav-item-bg-hover",
|
|
@@ -3001,7 +3213,7 @@
|
|
|
3001
3213
|
},
|
|
3002
3214
|
"navItemBgActive": {
|
|
3003
3215
|
"$type": "color",
|
|
3004
|
-
"$value": "
|
|
3216
|
+
"$value": "{color.neutral.light.componentBg}",
|
|
3005
3217
|
"$extensions": {
|
|
3006
3218
|
"putio": {
|
|
3007
3219
|
"cssName": "nav-item-bg-active",
|
|
@@ -3021,7 +3233,7 @@
|
|
|
3021
3233
|
},
|
|
3022
3234
|
"listItemBgHover": {
|
|
3023
3235
|
"$type": "color",
|
|
3024
|
-
"$value": "
|
|
3236
|
+
"$value": "{color.neutral.light.bgSecondary}",
|
|
3025
3237
|
"$extensions": {
|
|
3026
3238
|
"putio": {
|
|
3027
3239
|
"cssName": "list-item-bg-hover",
|
|
@@ -3031,7 +3243,7 @@
|
|
|
3031
3243
|
},
|
|
3032
3244
|
"listItemBgActive": {
|
|
3033
3245
|
"$type": "color",
|
|
3034
|
-
"$value": "
|
|
3246
|
+
"$value": "{color.neutral.light.bgSecondary}",
|
|
3035
3247
|
"$extensions": {
|
|
3036
3248
|
"putio": {
|
|
3037
3249
|
"cssName": "list-item-bg-active",
|
|
@@ -3051,7 +3263,7 @@
|
|
|
3051
3263
|
},
|
|
3052
3264
|
"segmentedControlBg": {
|
|
3053
3265
|
"$type": "color",
|
|
3054
|
-
"$value": "
|
|
3266
|
+
"$value": "{color.neutral.light.componentBg}",
|
|
3055
3267
|
"$extensions": {
|
|
3056
3268
|
"putio": {
|
|
3057
3269
|
"cssName": "segmented-control-bg",
|
|
@@ -3061,7 +3273,7 @@
|
|
|
3061
3273
|
},
|
|
3062
3274
|
"segmentedControlBgActive": {
|
|
3063
3275
|
"$type": "color",
|
|
3064
|
-
"$value": "
|
|
3276
|
+
"$value": "{surface.light.appBg}",
|
|
3065
3277
|
"$extensions": {
|
|
3066
3278
|
"putio": {
|
|
3067
3279
|
"cssName": "segmented-control-bg-active",
|
|
@@ -3071,7 +3283,7 @@
|
|
|
3071
3283
|
},
|
|
3072
3284
|
"transferListItemCompletingBg": {
|
|
3073
3285
|
"$type": "color",
|
|
3074
|
-
"$value": "
|
|
3286
|
+
"$value": "{color.transfer.light.lime3}",
|
|
3075
3287
|
"$extensions": {
|
|
3076
3288
|
"putio": {
|
|
3077
3289
|
"cssName": "transfer-list-item-completing-bg",
|
|
@@ -3081,7 +3293,7 @@
|
|
|
3081
3293
|
},
|
|
3082
3294
|
"transferListItemDownloadingBg": {
|
|
3083
3295
|
"$type": "color",
|
|
3084
|
-
"$value": "
|
|
3296
|
+
"$value": "{color.transfer.light.lime3}",
|
|
3085
3297
|
"$extensions": {
|
|
3086
3298
|
"putio": {
|
|
3087
3299
|
"cssName": "transfer-list-item-downloading-bg",
|
|
@@ -3091,7 +3303,7 @@
|
|
|
3091
3303
|
},
|
|
3092
3304
|
"transferListItemFinishedBg": {
|
|
3093
3305
|
"$type": "color",
|
|
3094
|
-
"$value": "
|
|
3306
|
+
"$value": "{color.neutral.light.bgSecondary}",
|
|
3095
3307
|
"$extensions": {
|
|
3096
3308
|
"putio": {
|
|
3097
3309
|
"cssName": "transfer-list-item-finished-bg",
|
|
@@ -3111,7 +3323,7 @@
|
|
|
3111
3323
|
},
|
|
3112
3324
|
"hiContrast": {
|
|
3113
3325
|
"$type": "color",
|
|
3114
|
-
"$value": "
|
|
3326
|
+
"$value": "{color.neutral.light.text}",
|
|
3115
3327
|
"$extensions": {
|
|
3116
3328
|
"putio": {
|
|
3117
3329
|
"cssName": "hi-contrast",
|
|
@@ -3121,7 +3333,7 @@
|
|
|
3121
3333
|
},
|
|
3122
3334
|
"loContrast": {
|
|
3123
3335
|
"$type": "color",
|
|
3124
|
-
"$value": "
|
|
3336
|
+
"$value": "{color.neutral.light.bg}",
|
|
3125
3337
|
"$extensions": {
|
|
3126
3338
|
"putio": {
|
|
3127
3339
|
"cssName": "lo-contrast",
|
|
@@ -3183,7 +3395,7 @@
|
|
|
3183
3395
|
},
|
|
3184
3396
|
"navBg": {
|
|
3185
3397
|
"$type": "color",
|
|
3186
|
-
"$value": "
|
|
3398
|
+
"$value": "{surface.dark.appBg}",
|
|
3187
3399
|
"$extensions": {
|
|
3188
3400
|
"putio": {
|
|
3189
3401
|
"cssName": "nav-bg",
|
|
@@ -3203,7 +3415,7 @@
|
|
|
3203
3415
|
},
|
|
3204
3416
|
"navItemBgHover": {
|
|
3205
3417
|
"$type": "color",
|
|
3206
|
-
"$value": "
|
|
3418
|
+
"$value": "{color.neutral.dark.componentBg}",
|
|
3207
3419
|
"$extensions": {
|
|
3208
3420
|
"putio": {
|
|
3209
3421
|
"cssName": "nav-item-bg-hover",
|
|
@@ -3213,7 +3425,7 @@
|
|
|
3213
3425
|
},
|
|
3214
3426
|
"navItemBgActive": {
|
|
3215
3427
|
"$type": "color",
|
|
3216
|
-
"$value": "
|
|
3428
|
+
"$value": "{color.neutral.dark.componentBg}",
|
|
3217
3429
|
"$extensions": {
|
|
3218
3430
|
"putio": {
|
|
3219
3431
|
"cssName": "nav-item-bg-active",
|
|
@@ -3233,7 +3445,7 @@
|
|
|
3233
3445
|
},
|
|
3234
3446
|
"listItemBgHover": {
|
|
3235
3447
|
"$type": "color",
|
|
3236
|
-
"$value": "
|
|
3448
|
+
"$value": "{color.neutral.dark.bgSecondary}",
|
|
3237
3449
|
"$extensions": {
|
|
3238
3450
|
"putio": {
|
|
3239
3451
|
"cssName": "list-item-bg-hover",
|
|
@@ -3243,7 +3455,7 @@
|
|
|
3243
3455
|
},
|
|
3244
3456
|
"listItemBgActive": {
|
|
3245
3457
|
"$type": "color",
|
|
3246
|
-
"$value": "
|
|
3458
|
+
"$value": "{color.neutral.dark.bgSecondary}",
|
|
3247
3459
|
"$extensions": {
|
|
3248
3460
|
"putio": {
|
|
3249
3461
|
"cssName": "list-item-bg-active",
|
|
@@ -3263,7 +3475,7 @@
|
|
|
3263
3475
|
},
|
|
3264
3476
|
"segmentedControlBg": {
|
|
3265
3477
|
"$type": "color",
|
|
3266
|
-
"$value": "
|
|
3478
|
+
"$value": "{surface.dark.appBg}",
|
|
3267
3479
|
"$extensions": {
|
|
3268
3480
|
"putio": {
|
|
3269
3481
|
"cssName": "segmented-control-bg",
|
|
@@ -3273,7 +3485,7 @@
|
|
|
3273
3485
|
},
|
|
3274
3486
|
"segmentedControlBgActive": {
|
|
3275
3487
|
"$type": "color",
|
|
3276
|
-
"$value": "
|
|
3488
|
+
"$value": "{color.neutral.dark.componentBg}",
|
|
3277
3489
|
"$extensions": {
|
|
3278
3490
|
"putio": {
|
|
3279
3491
|
"cssName": "segmented-control-bg-active",
|
|
@@ -3303,7 +3515,7 @@
|
|
|
3303
3515
|
},
|
|
3304
3516
|
"transferListItemFinishedBg": {
|
|
3305
3517
|
"$type": "color",
|
|
3306
|
-
"$value": "
|
|
3518
|
+
"$value": "{color.neutral.dark.bgSecondary}",
|
|
3307
3519
|
"$extensions": {
|
|
3308
3520
|
"putio": {
|
|
3309
3521
|
"cssName": "transfer-list-item-finished-bg",
|
|
@@ -3323,7 +3535,7 @@
|
|
|
3323
3535
|
},
|
|
3324
3536
|
"hiContrast": {
|
|
3325
3537
|
"$type": "color",
|
|
3326
|
-
"$value": "
|
|
3538
|
+
"$value": "{color.neutral.dark.text}",
|
|
3327
3539
|
"$extensions": {
|
|
3328
3540
|
"putio": {
|
|
3329
3541
|
"cssName": "hi-contrast",
|
|
@@ -3333,7 +3545,7 @@
|
|
|
3333
3545
|
},
|
|
3334
3546
|
"loContrast": {
|
|
3335
3547
|
"$type": "color",
|
|
3336
|
-
"$value": "
|
|
3548
|
+
"$value": "{color.neutral.dark.bg}",
|
|
3337
3549
|
"$extensions": {
|
|
3338
3550
|
"putio": {
|
|
3339
3551
|
"cssName": "lo-contrast",
|
|
@@ -3373,7 +3585,8 @@
|
|
|
3373
3585
|
},
|
|
3374
3586
|
"shadow": {
|
|
3375
3587
|
"$type": "color",
|
|
3376
|
-
"$value": "
|
|
3588
|
+
"$value": "{surface.dark.shadowColor}",
|
|
3589
|
+
"$description": "Compat name kept for existing web consumers — alias of surface.dark.shadowColor so the two can never drift.",
|
|
3377
3590
|
"$extensions": {
|
|
3378
3591
|
"putio": {
|
|
3379
3592
|
"cssName": "shadow",
|