@putdotio/design 1.3.0 → 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 +56 -28
- package/dist/figma/putio.tokens.json +47 -10
- package/dist/tokens.d.ts +1 -1
- package/dist/tokens.dtcg.json +265 -39
- package/dist/tokens.flat.json +196 -48
- package/dist/tokens.js +196 -48
- package/package.json +3 -2
- package/system/README.md +93 -19
- package/tokens/components.tokens.json +112 -0
- package/tokens/foundation.css +29 -19
- package/tokens/primitives.tokens.json +125 -12
- 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",
|
|
@@ -2419,7 +2532,7 @@
|
|
|
2419
2532
|
},
|
|
2420
2533
|
"display": {
|
|
2421
2534
|
"$type": "fontFamily",
|
|
2422
|
-
"$value": "
|
|
2535
|
+
"$value": "{typography.fontFamily.sans}",
|
|
2423
2536
|
"$extensions": {
|
|
2424
2537
|
"putio": {
|
|
2425
2538
|
"cssName": "font-display",
|
|
@@ -2441,7 +2554,7 @@
|
|
|
2441
2554
|
},
|
|
2442
2555
|
"mono": {
|
|
2443
2556
|
"$type": "fontFamily",
|
|
2444
|
-
"$value": "\"Berkeley Mono\",
|
|
2557
|
+
"$value": "\"Berkeley Mono\", {typography.fontFamily.uiMono}",
|
|
2445
2558
|
"$extensions": {
|
|
2446
2559
|
"putio": {
|
|
2447
2560
|
"cssName": "font-mono",
|
|
@@ -2465,7 +2578,8 @@
|
|
|
2465
2578
|
},
|
|
2466
2579
|
"sm": {
|
|
2467
2580
|
"$type": "dimension",
|
|
2468
|
-
"$value": "0.
|
|
2581
|
+
"$value": "0.875rem",
|
|
2582
|
+
"$description": "Caption and button labels — production fontSize 0.",
|
|
2469
2583
|
"$extensions": {
|
|
2470
2584
|
"putio": {
|
|
2471
2585
|
"cssName": "fs-sm",
|
|
@@ -2476,7 +2590,8 @@
|
|
|
2476
2590
|
},
|
|
2477
2591
|
"base": {
|
|
2478
2592
|
"$type": "dimension",
|
|
2479
|
-
"$value": "
|
|
2593
|
+
"$value": "1rem",
|
|
2594
|
+
"$description": "Body, labels, inputs — production fontSize 1; equals the responsive root (14px, 15px at >= breakpoint.lg).",
|
|
2480
2595
|
"$extensions": {
|
|
2481
2596
|
"putio": {
|
|
2482
2597
|
"cssName": "fs-base",
|
|
@@ -2487,7 +2602,8 @@
|
|
|
2487
2602
|
},
|
|
2488
2603
|
"md": {
|
|
2489
2604
|
"$type": "dimension",
|
|
2490
|
-
"$value": "
|
|
2605
|
+
"$value": "1.125rem",
|
|
2606
|
+
"$description": "Subheading.",
|
|
2491
2607
|
"$extensions": {
|
|
2492
2608
|
"putio": {
|
|
2493
2609
|
"cssName": "fs-md",
|
|
@@ -2498,7 +2614,8 @@
|
|
|
2498
2614
|
},
|
|
2499
2615
|
"lg": {
|
|
2500
2616
|
"$type": "dimension",
|
|
2501
|
-
"$value": "1.
|
|
2617
|
+
"$value": "1.5rem",
|
|
2618
|
+
"$description": "Heading.",
|
|
2502
2619
|
"$extensions": {
|
|
2503
2620
|
"putio": {
|
|
2504
2621
|
"cssName": "fs-lg",
|
|
@@ -2509,7 +2626,8 @@
|
|
|
2509
2626
|
},
|
|
2510
2627
|
"xl": {
|
|
2511
2628
|
"$type": "dimension",
|
|
2512
|
-
"$value": "
|
|
2629
|
+
"$value": "2rem",
|
|
2630
|
+
"$description": "Page title.",
|
|
2513
2631
|
"$extensions": {
|
|
2514
2632
|
"putio": {
|
|
2515
2633
|
"cssName": "fs-xl",
|
|
@@ -2520,7 +2638,8 @@
|
|
|
2520
2638
|
},
|
|
2521
2639
|
"2xl": {
|
|
2522
2640
|
"$type": "dimension",
|
|
2523
|
-
"$value": "
|
|
2641
|
+
"$value": "48px",
|
|
2642
|
+
"$description": "Fixed display tier — does not scale with the responsive root.",
|
|
2524
2643
|
"$extensions": {
|
|
2525
2644
|
"putio": {
|
|
2526
2645
|
"cssName": "fs-2xl",
|
|
@@ -2531,7 +2650,8 @@
|
|
|
2531
2650
|
},
|
|
2532
2651
|
"3xl": {
|
|
2533
2652
|
"$type": "dimension",
|
|
2534
|
-
"$value": "
|
|
2653
|
+
"$value": "64px",
|
|
2654
|
+
"$description": "Fixed display tier — does not scale with the responsive root.",
|
|
2535
2655
|
"$extensions": {
|
|
2536
2656
|
"putio": {
|
|
2537
2657
|
"cssName": "fs-3xl",
|
|
@@ -2542,7 +2662,8 @@
|
|
|
2542
2662
|
},
|
|
2543
2663
|
"4xl": {
|
|
2544
2664
|
"$type": "dimension",
|
|
2545
|
-
"$value": "
|
|
2665
|
+
"$value": "{typography.fontSize.3xl}",
|
|
2666
|
+
"$description": "Compatibility alias for the former 4xl tier; new surfaces should use fontSize.3xl or fontSize.display.",
|
|
2546
2667
|
"$extensions": {
|
|
2547
2668
|
"putio": {
|
|
2548
2669
|
"cssName": "fs-4xl",
|
|
@@ -2553,7 +2674,8 @@
|
|
|
2553
2674
|
},
|
|
2554
2675
|
"display": {
|
|
2555
2676
|
"$type": "dimension",
|
|
2556
|
-
"$value": "
|
|
2677
|
+
"$value": "96px",
|
|
2678
|
+
"$description": "Fixed display tier for brand display moments.",
|
|
2557
2679
|
"$extensions": {
|
|
2558
2680
|
"putio": {
|
|
2559
2681
|
"cssName": "fs-display",
|
|
@@ -2934,11 +3056,114 @@
|
|
|
2934
3056
|
}
|
|
2935
3057
|
}
|
|
2936
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
|
+
},
|
|
2937
3162
|
"surface": {
|
|
2938
3163
|
"light": {
|
|
2939
3164
|
"htmlBg": {
|
|
2940
3165
|
"$type": "color",
|
|
2941
|
-
"$value": "
|
|
3166
|
+
"$value": "{color.neutral.light.bgSecondary}",
|
|
2942
3167
|
"$extensions": {
|
|
2943
3168
|
"putio": {
|
|
2944
3169
|
"cssName": "html-bg",
|
|
@@ -2958,7 +3183,7 @@
|
|
|
2958
3183
|
},
|
|
2959
3184
|
"navBg": {
|
|
2960
3185
|
"$type": "color",
|
|
2961
|
-
"$value": "
|
|
3186
|
+
"$value": "{surface.light.appBg}",
|
|
2962
3187
|
"$extensions": {
|
|
2963
3188
|
"putio": {
|
|
2964
3189
|
"cssName": "nav-bg",
|
|
@@ -2978,7 +3203,7 @@
|
|
|
2978
3203
|
},
|
|
2979
3204
|
"navItemBgHover": {
|
|
2980
3205
|
"$type": "color",
|
|
2981
|
-
"$value": "
|
|
3206
|
+
"$value": "{color.neutral.light.componentBg}",
|
|
2982
3207
|
"$extensions": {
|
|
2983
3208
|
"putio": {
|
|
2984
3209
|
"cssName": "nav-item-bg-hover",
|
|
@@ -2988,7 +3213,7 @@
|
|
|
2988
3213
|
},
|
|
2989
3214
|
"navItemBgActive": {
|
|
2990
3215
|
"$type": "color",
|
|
2991
|
-
"$value": "
|
|
3216
|
+
"$value": "{color.neutral.light.componentBg}",
|
|
2992
3217
|
"$extensions": {
|
|
2993
3218
|
"putio": {
|
|
2994
3219
|
"cssName": "nav-item-bg-active",
|
|
@@ -3008,7 +3233,7 @@
|
|
|
3008
3233
|
},
|
|
3009
3234
|
"listItemBgHover": {
|
|
3010
3235
|
"$type": "color",
|
|
3011
|
-
"$value": "
|
|
3236
|
+
"$value": "{color.neutral.light.bgSecondary}",
|
|
3012
3237
|
"$extensions": {
|
|
3013
3238
|
"putio": {
|
|
3014
3239
|
"cssName": "list-item-bg-hover",
|
|
@@ -3018,7 +3243,7 @@
|
|
|
3018
3243
|
},
|
|
3019
3244
|
"listItemBgActive": {
|
|
3020
3245
|
"$type": "color",
|
|
3021
|
-
"$value": "
|
|
3246
|
+
"$value": "{color.neutral.light.bgSecondary}",
|
|
3022
3247
|
"$extensions": {
|
|
3023
3248
|
"putio": {
|
|
3024
3249
|
"cssName": "list-item-bg-active",
|
|
@@ -3038,7 +3263,7 @@
|
|
|
3038
3263
|
},
|
|
3039
3264
|
"segmentedControlBg": {
|
|
3040
3265
|
"$type": "color",
|
|
3041
|
-
"$value": "
|
|
3266
|
+
"$value": "{color.neutral.light.componentBg}",
|
|
3042
3267
|
"$extensions": {
|
|
3043
3268
|
"putio": {
|
|
3044
3269
|
"cssName": "segmented-control-bg",
|
|
@@ -3048,7 +3273,7 @@
|
|
|
3048
3273
|
},
|
|
3049
3274
|
"segmentedControlBgActive": {
|
|
3050
3275
|
"$type": "color",
|
|
3051
|
-
"$value": "
|
|
3276
|
+
"$value": "{surface.light.appBg}",
|
|
3052
3277
|
"$extensions": {
|
|
3053
3278
|
"putio": {
|
|
3054
3279
|
"cssName": "segmented-control-bg-active",
|
|
@@ -3058,7 +3283,7 @@
|
|
|
3058
3283
|
},
|
|
3059
3284
|
"transferListItemCompletingBg": {
|
|
3060
3285
|
"$type": "color",
|
|
3061
|
-
"$value": "
|
|
3286
|
+
"$value": "{color.transfer.light.lime3}",
|
|
3062
3287
|
"$extensions": {
|
|
3063
3288
|
"putio": {
|
|
3064
3289
|
"cssName": "transfer-list-item-completing-bg",
|
|
@@ -3068,7 +3293,7 @@
|
|
|
3068
3293
|
},
|
|
3069
3294
|
"transferListItemDownloadingBg": {
|
|
3070
3295
|
"$type": "color",
|
|
3071
|
-
"$value": "
|
|
3296
|
+
"$value": "{color.transfer.light.lime3}",
|
|
3072
3297
|
"$extensions": {
|
|
3073
3298
|
"putio": {
|
|
3074
3299
|
"cssName": "transfer-list-item-downloading-bg",
|
|
@@ -3078,7 +3303,7 @@
|
|
|
3078
3303
|
},
|
|
3079
3304
|
"transferListItemFinishedBg": {
|
|
3080
3305
|
"$type": "color",
|
|
3081
|
-
"$value": "
|
|
3306
|
+
"$value": "{color.neutral.light.bgSecondary}",
|
|
3082
3307
|
"$extensions": {
|
|
3083
3308
|
"putio": {
|
|
3084
3309
|
"cssName": "transfer-list-item-finished-bg",
|
|
@@ -3098,7 +3323,7 @@
|
|
|
3098
3323
|
},
|
|
3099
3324
|
"hiContrast": {
|
|
3100
3325
|
"$type": "color",
|
|
3101
|
-
"$value": "
|
|
3326
|
+
"$value": "{color.neutral.light.text}",
|
|
3102
3327
|
"$extensions": {
|
|
3103
3328
|
"putio": {
|
|
3104
3329
|
"cssName": "hi-contrast",
|
|
@@ -3108,7 +3333,7 @@
|
|
|
3108
3333
|
},
|
|
3109
3334
|
"loContrast": {
|
|
3110
3335
|
"$type": "color",
|
|
3111
|
-
"$value": "
|
|
3336
|
+
"$value": "{color.neutral.light.bg}",
|
|
3112
3337
|
"$extensions": {
|
|
3113
3338
|
"putio": {
|
|
3114
3339
|
"cssName": "lo-contrast",
|
|
@@ -3170,7 +3395,7 @@
|
|
|
3170
3395
|
},
|
|
3171
3396
|
"navBg": {
|
|
3172
3397
|
"$type": "color",
|
|
3173
|
-
"$value": "
|
|
3398
|
+
"$value": "{surface.dark.appBg}",
|
|
3174
3399
|
"$extensions": {
|
|
3175
3400
|
"putio": {
|
|
3176
3401
|
"cssName": "nav-bg",
|
|
@@ -3190,7 +3415,7 @@
|
|
|
3190
3415
|
},
|
|
3191
3416
|
"navItemBgHover": {
|
|
3192
3417
|
"$type": "color",
|
|
3193
|
-
"$value": "
|
|
3418
|
+
"$value": "{color.neutral.dark.componentBg}",
|
|
3194
3419
|
"$extensions": {
|
|
3195
3420
|
"putio": {
|
|
3196
3421
|
"cssName": "nav-item-bg-hover",
|
|
@@ -3200,7 +3425,7 @@
|
|
|
3200
3425
|
},
|
|
3201
3426
|
"navItemBgActive": {
|
|
3202
3427
|
"$type": "color",
|
|
3203
|
-
"$value": "
|
|
3428
|
+
"$value": "{color.neutral.dark.componentBg}",
|
|
3204
3429
|
"$extensions": {
|
|
3205
3430
|
"putio": {
|
|
3206
3431
|
"cssName": "nav-item-bg-active",
|
|
@@ -3220,7 +3445,7 @@
|
|
|
3220
3445
|
},
|
|
3221
3446
|
"listItemBgHover": {
|
|
3222
3447
|
"$type": "color",
|
|
3223
|
-
"$value": "
|
|
3448
|
+
"$value": "{color.neutral.dark.bgSecondary}",
|
|
3224
3449
|
"$extensions": {
|
|
3225
3450
|
"putio": {
|
|
3226
3451
|
"cssName": "list-item-bg-hover",
|
|
@@ -3230,7 +3455,7 @@
|
|
|
3230
3455
|
},
|
|
3231
3456
|
"listItemBgActive": {
|
|
3232
3457
|
"$type": "color",
|
|
3233
|
-
"$value": "
|
|
3458
|
+
"$value": "{color.neutral.dark.bgSecondary}",
|
|
3234
3459
|
"$extensions": {
|
|
3235
3460
|
"putio": {
|
|
3236
3461
|
"cssName": "list-item-bg-active",
|
|
@@ -3250,7 +3475,7 @@
|
|
|
3250
3475
|
},
|
|
3251
3476
|
"segmentedControlBg": {
|
|
3252
3477
|
"$type": "color",
|
|
3253
|
-
"$value": "
|
|
3478
|
+
"$value": "{surface.dark.appBg}",
|
|
3254
3479
|
"$extensions": {
|
|
3255
3480
|
"putio": {
|
|
3256
3481
|
"cssName": "segmented-control-bg",
|
|
@@ -3260,7 +3485,7 @@
|
|
|
3260
3485
|
},
|
|
3261
3486
|
"segmentedControlBgActive": {
|
|
3262
3487
|
"$type": "color",
|
|
3263
|
-
"$value": "
|
|
3488
|
+
"$value": "{color.neutral.dark.componentBg}",
|
|
3264
3489
|
"$extensions": {
|
|
3265
3490
|
"putio": {
|
|
3266
3491
|
"cssName": "segmented-control-bg-active",
|
|
@@ -3290,7 +3515,7 @@
|
|
|
3290
3515
|
},
|
|
3291
3516
|
"transferListItemFinishedBg": {
|
|
3292
3517
|
"$type": "color",
|
|
3293
|
-
"$value": "
|
|
3518
|
+
"$value": "{color.neutral.dark.bgSecondary}",
|
|
3294
3519
|
"$extensions": {
|
|
3295
3520
|
"putio": {
|
|
3296
3521
|
"cssName": "transfer-list-item-finished-bg",
|
|
@@ -3310,7 +3535,7 @@
|
|
|
3310
3535
|
},
|
|
3311
3536
|
"hiContrast": {
|
|
3312
3537
|
"$type": "color",
|
|
3313
|
-
"$value": "
|
|
3538
|
+
"$value": "{color.neutral.dark.text}",
|
|
3314
3539
|
"$extensions": {
|
|
3315
3540
|
"putio": {
|
|
3316
3541
|
"cssName": "hi-contrast",
|
|
@@ -3320,7 +3545,7 @@
|
|
|
3320
3545
|
},
|
|
3321
3546
|
"loContrast": {
|
|
3322
3547
|
"$type": "color",
|
|
3323
|
-
"$value": "
|
|
3548
|
+
"$value": "{color.neutral.dark.bg}",
|
|
3324
3549
|
"$extensions": {
|
|
3325
3550
|
"putio": {
|
|
3326
3551
|
"cssName": "lo-contrast",
|
|
@@ -3360,7 +3585,8 @@
|
|
|
3360
3585
|
},
|
|
3361
3586
|
"shadow": {
|
|
3362
3587
|
"$type": "color",
|
|
3363
|
-
"$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.",
|
|
3364
3590
|
"$extensions": {
|
|
3365
3591
|
"putio": {
|
|
3366
3592
|
"cssName": "shadow",
|