@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.flat.json
CHANGED
|
@@ -3,16 +3,32 @@
|
|
|
3
3
|
"cssName": "--button-primary-bg",
|
|
4
4
|
"type": "color",
|
|
5
5
|
"mode": "global",
|
|
6
|
-
"value": "
|
|
6
|
+
"value": "hsl(44.7, 97.9%, 63.1%)",
|
|
7
7
|
"originalValue": "{color.brand.yellow}",
|
|
8
8
|
"description": "Primary command background."
|
|
9
9
|
},
|
|
10
|
+
"component.button.primary.backgroundHover": {
|
|
11
|
+
"cssName": "--button-primary-bg-hover",
|
|
12
|
+
"type": "color",
|
|
13
|
+
"mode": "light",
|
|
14
|
+
"value": "hsl(45, 89%, 58%)",
|
|
15
|
+
"originalValue": "{color.yellow.light.solidHover}",
|
|
16
|
+
"description": "Primary command hover background in light mode."
|
|
17
|
+
},
|
|
18
|
+
"component.button.primary.backgroundHoverDark": {
|
|
19
|
+
"cssName": "--button-primary-bg-hover",
|
|
20
|
+
"type": "color",
|
|
21
|
+
"mode": "dark",
|
|
22
|
+
"value": "hsl(45, 89%, 58%)",
|
|
23
|
+
"originalValue": "{color.yellow.dark.solidHover}",
|
|
24
|
+
"description": "Primary command hover background in dark mode."
|
|
25
|
+
},
|
|
10
26
|
"component.button.primary.foreground": {
|
|
11
27
|
"cssName": "--button-primary-fg",
|
|
12
28
|
"type": "color",
|
|
13
29
|
"mode": "global",
|
|
14
|
-
"value": "
|
|
15
|
-
"originalValue": "
|
|
30
|
+
"value": "hsl(38, 65%, 10%)",
|
|
31
|
+
"originalValue": "{component.alias.primaryForeground}",
|
|
16
32
|
"description": "Text or icon color on the yellow primary button."
|
|
17
33
|
},
|
|
18
34
|
"component.button.primary.radius": {
|
|
@@ -50,19 +66,115 @@
|
|
|
50
66
|
"value": "hsl(0, 0%, 93.0%)",
|
|
51
67
|
"originalValue": "{color.neutral.dark.text}"
|
|
52
68
|
},
|
|
69
|
+
"component.button.success.background": {
|
|
70
|
+
"cssName": "--button-success-bg",
|
|
71
|
+
"type": "color",
|
|
72
|
+
"mode": "light",
|
|
73
|
+
"value": "hsl(151, 55%, 41.5%)",
|
|
74
|
+
"originalValue": "{color.green.light.solid}",
|
|
75
|
+
"description": "Success command background in light mode."
|
|
76
|
+
},
|
|
77
|
+
"component.button.success.backgroundDark": {
|
|
78
|
+
"cssName": "--button-success-bg",
|
|
79
|
+
"type": "color",
|
|
80
|
+
"mode": "dark",
|
|
81
|
+
"value": "hsl(151, 55%, 41.5%)",
|
|
82
|
+
"originalValue": "{color.green.dark.solid}",
|
|
83
|
+
"description": "Success command background in dark mode."
|
|
84
|
+
},
|
|
85
|
+
"component.button.success.backgroundHover": {
|
|
86
|
+
"cssName": "--button-success-bg-hover",
|
|
87
|
+
"type": "color",
|
|
88
|
+
"mode": "light",
|
|
89
|
+
"value": "hsl(151, 58%, 37%)",
|
|
90
|
+
"originalValue": "{color.green.light.solidHover}",
|
|
91
|
+
"description": "Success command hover background in light mode. Step-10 hover companion to the green solid fill."
|
|
92
|
+
},
|
|
93
|
+
"component.button.success.backgroundHoverDark": {
|
|
94
|
+
"cssName": "--button-success-bg-hover",
|
|
95
|
+
"type": "color",
|
|
96
|
+
"mode": "dark",
|
|
97
|
+
"value": "hsl(151, 68%, 35%)",
|
|
98
|
+
"originalValue": "{color.green.dark.solidHover}",
|
|
99
|
+
"description": "Success command hover background in dark mode. Step-10 hover companion to the green solid fill."
|
|
100
|
+
},
|
|
101
|
+
"component.button.success.foreground": {
|
|
102
|
+
"cssName": "--button-success-fg",
|
|
103
|
+
"type": "color",
|
|
104
|
+
"mode": "global",
|
|
105
|
+
"value": "hsl(0, 0%, 100%)",
|
|
106
|
+
"originalValue": "{component.alias.successForeground}",
|
|
107
|
+
"description": "Text or icon color on success command backgrounds."
|
|
108
|
+
},
|
|
109
|
+
"component.button.danger.background": {
|
|
110
|
+
"cssName": "--button-danger-bg",
|
|
111
|
+
"type": "color",
|
|
112
|
+
"mode": "light",
|
|
113
|
+
"value": "hsl(358, 75%, 59%)",
|
|
114
|
+
"originalValue": "{color.red.light.solid}",
|
|
115
|
+
"description": "Destructive command background in light mode."
|
|
116
|
+
},
|
|
117
|
+
"component.button.danger.backgroundDark": {
|
|
118
|
+
"cssName": "--button-danger-bg",
|
|
119
|
+
"type": "color",
|
|
120
|
+
"mode": "dark",
|
|
121
|
+
"value": "hsl(358, 75%, 59%)",
|
|
122
|
+
"originalValue": "{color.red.dark.solid}",
|
|
123
|
+
"description": "Destructive command background in dark mode."
|
|
124
|
+
},
|
|
125
|
+
"component.button.danger.backgroundHover": {
|
|
126
|
+
"cssName": "--button-danger-bg-hover",
|
|
127
|
+
"type": "color",
|
|
128
|
+
"mode": "light",
|
|
129
|
+
"value": "hsl(357, 66%, 53%)",
|
|
130
|
+
"originalValue": "{color.red.light.solidHover}",
|
|
131
|
+
"description": "Destructive command hover background in light mode. Step-10 hover companion to the red solid fill."
|
|
132
|
+
},
|
|
133
|
+
"component.button.danger.backgroundHoverDark": {
|
|
134
|
+
"cssName": "--button-danger-bg-hover",
|
|
135
|
+
"type": "color",
|
|
136
|
+
"mode": "dark",
|
|
137
|
+
"value": "hsl(357, 67%, 53%)",
|
|
138
|
+
"originalValue": "{color.red.dark.solidHover}",
|
|
139
|
+
"description": "Destructive command hover background in dark mode. Step-10 hover companion to the red solid fill."
|
|
140
|
+
},
|
|
141
|
+
"component.button.danger.foreground": {
|
|
142
|
+
"cssName": "--button-danger-fg",
|
|
143
|
+
"type": "color",
|
|
144
|
+
"mode": "global",
|
|
145
|
+
"value": "hsl(0, 0%, 100%)",
|
|
146
|
+
"originalValue": "{component.alias.destructiveForeground}",
|
|
147
|
+
"description": "Text or icon color on destructive command backgrounds."
|
|
148
|
+
},
|
|
149
|
+
"component.button.info.backgroundHover": {
|
|
150
|
+
"cssName": "--button-info-bg-hover",
|
|
151
|
+
"type": "color",
|
|
152
|
+
"mode": "light",
|
|
153
|
+
"value": "hsl(0, 0%, 52.3%)",
|
|
154
|
+
"originalValue": "{color.neutral.light.solidHover}",
|
|
155
|
+
"description": "Neutral solid command hover background in light mode."
|
|
156
|
+
},
|
|
157
|
+
"component.button.info.backgroundHoverDark": {
|
|
158
|
+
"cssName": "--button-info-bg-hover",
|
|
159
|
+
"type": "color",
|
|
160
|
+
"mode": "dark",
|
|
161
|
+
"value": "hsl(0, 0%, 49.4%)",
|
|
162
|
+
"originalValue": "{color.neutral.dark.solidHover}",
|
|
163
|
+
"description": "Neutral solid command hover background in dark mode."
|
|
164
|
+
},
|
|
53
165
|
"component.input.background": {
|
|
54
166
|
"cssName": "--input-bg",
|
|
55
167
|
"type": "color",
|
|
56
168
|
"mode": "light",
|
|
57
|
-
"value": "
|
|
169
|
+
"value": "hsl(0, 0%, 100%)",
|
|
58
170
|
"originalValue": "{surface.light.appBg}"
|
|
59
171
|
},
|
|
60
172
|
"component.input.backgroundDark": {
|
|
61
173
|
"cssName": "--input-bg",
|
|
62
174
|
"type": "color",
|
|
63
175
|
"mode": "dark",
|
|
64
|
-
"value": "hsl(0, 0%,
|
|
65
|
-
"originalValue": "{
|
|
176
|
+
"value": "hsl(0, 0%, 8.5%)",
|
|
177
|
+
"originalValue": "{surface.dark.appBg}"
|
|
66
178
|
},
|
|
67
179
|
"component.input.border": {
|
|
68
180
|
"cssName": "--input-border",
|
|
@@ -85,18 +197,463 @@
|
|
|
85
197
|
"value": "6px",
|
|
86
198
|
"originalValue": "{radius.default}"
|
|
87
199
|
},
|
|
200
|
+
"component.field.background": {
|
|
201
|
+
"cssName": "--field-bg",
|
|
202
|
+
"type": "color",
|
|
203
|
+
"mode": "light",
|
|
204
|
+
"value": "hsl(0, 0%, 100%)",
|
|
205
|
+
"originalValue": "{surface.light.appBg}",
|
|
206
|
+
"description": "Form-control fill. Fields stay on the app background surface, even inside a raised panel."
|
|
207
|
+
},
|
|
208
|
+
"component.field.backgroundDark": {
|
|
209
|
+
"cssName": "--field-bg",
|
|
210
|
+
"type": "color",
|
|
211
|
+
"mode": "dark",
|
|
212
|
+
"value": "hsl(0, 0%, 8.5%)",
|
|
213
|
+
"originalValue": "{surface.dark.appBg}",
|
|
214
|
+
"description": "Dark-mode form-control fill."
|
|
215
|
+
},
|
|
216
|
+
"component.field.backgroundDisabled": {
|
|
217
|
+
"cssName": "--field-bg-disabled",
|
|
218
|
+
"type": "color",
|
|
219
|
+
"mode": "light",
|
|
220
|
+
"value": "hsl(0, 0%, 97.3%)",
|
|
221
|
+
"originalValue": "{color.neutral.light.bgSecondary}",
|
|
222
|
+
"description": "Disabled form-control fill."
|
|
223
|
+
},
|
|
224
|
+
"component.field.backgroundDisabledDark": {
|
|
225
|
+
"cssName": "--field-bg-disabled",
|
|
226
|
+
"type": "color",
|
|
227
|
+
"mode": "dark",
|
|
228
|
+
"value": "hsl(0, 0%, 11.0%)",
|
|
229
|
+
"originalValue": "{color.neutral.dark.bgSecondary}",
|
|
230
|
+
"description": "Dark-mode disabled form-control fill."
|
|
231
|
+
},
|
|
232
|
+
"component.field.border": {
|
|
233
|
+
"cssName": "--field-border",
|
|
234
|
+
"type": "color",
|
|
235
|
+
"mode": "light",
|
|
236
|
+
"value": "hsl(0, 0%, 85.8%)",
|
|
237
|
+
"originalValue": "{color.neutral.light.border}",
|
|
238
|
+
"description": "Resting form-control border."
|
|
239
|
+
},
|
|
240
|
+
"component.field.borderDark": {
|
|
241
|
+
"cssName": "--field-border",
|
|
242
|
+
"type": "color",
|
|
243
|
+
"mode": "dark",
|
|
244
|
+
"value": "hsl(0, 0%, 24.3%)",
|
|
245
|
+
"originalValue": "{color.neutral.dark.border}",
|
|
246
|
+
"description": "Dark-mode resting form-control border."
|
|
247
|
+
},
|
|
248
|
+
"component.field.borderHover": {
|
|
249
|
+
"cssName": "--field-border-hover",
|
|
250
|
+
"type": "color",
|
|
251
|
+
"mode": "light",
|
|
252
|
+
"value": "hsl(0, 0%, 78.0%)",
|
|
253
|
+
"originalValue": "{color.neutral.light.borderHover}",
|
|
254
|
+
"description": "Hover form-control border."
|
|
255
|
+
},
|
|
256
|
+
"component.field.borderHoverDark": {
|
|
257
|
+
"cssName": "--field-border-hover",
|
|
258
|
+
"type": "color",
|
|
259
|
+
"mode": "dark",
|
|
260
|
+
"value": "hsl(0, 0%, 31.2%)",
|
|
261
|
+
"originalValue": "{color.neutral.dark.borderHover}",
|
|
262
|
+
"description": "Dark-mode hover form-control border."
|
|
263
|
+
},
|
|
264
|
+
"component.field.borderFocus": {
|
|
265
|
+
"cssName": "--field-border-focus",
|
|
266
|
+
"type": "color",
|
|
267
|
+
"mode": "light",
|
|
268
|
+
"value": "hsl(0, 0%, 78.0%)",
|
|
269
|
+
"originalValue": "{color.neutral.light.borderHover}",
|
|
270
|
+
"description": "Focused form-control border. Focus matches hover and does not use the yellow focus shadow."
|
|
271
|
+
},
|
|
272
|
+
"component.field.borderFocusDark": {
|
|
273
|
+
"cssName": "--field-border-focus",
|
|
274
|
+
"type": "color",
|
|
275
|
+
"mode": "dark",
|
|
276
|
+
"value": "hsl(0, 0%, 31.2%)",
|
|
277
|
+
"originalValue": "{color.neutral.dark.borderHover}",
|
|
278
|
+
"description": "Dark-mode focused form-control border. Focus matches hover and does not use the yellow focus shadow."
|
|
279
|
+
},
|
|
280
|
+
"component.field.text": {
|
|
281
|
+
"cssName": "--field-text",
|
|
282
|
+
"type": "color",
|
|
283
|
+
"mode": "light",
|
|
284
|
+
"value": "hsl(0, 0%, 9.0%)",
|
|
285
|
+
"originalValue": "{color.neutral.light.text}",
|
|
286
|
+
"description": "Form-control text color."
|
|
287
|
+
},
|
|
288
|
+
"component.field.textDark": {
|
|
289
|
+
"cssName": "--field-text",
|
|
290
|
+
"type": "color",
|
|
291
|
+
"mode": "dark",
|
|
292
|
+
"value": "hsl(0, 0%, 93.0%)",
|
|
293
|
+
"originalValue": "{color.neutral.dark.text}",
|
|
294
|
+
"description": "Dark-mode form-control text color."
|
|
295
|
+
},
|
|
296
|
+
"component.field.placeholder": {
|
|
297
|
+
"cssName": "--field-placeholder",
|
|
298
|
+
"type": "color",
|
|
299
|
+
"mode": "light",
|
|
300
|
+
"value": "hsl(0, 0%, 43.5%)",
|
|
301
|
+
"originalValue": "{color.neutral.light.textSecondary}",
|
|
302
|
+
"description": "Form-control placeholder color."
|
|
303
|
+
},
|
|
304
|
+
"component.field.placeholderDark": {
|
|
305
|
+
"cssName": "--field-placeholder",
|
|
306
|
+
"type": "color",
|
|
307
|
+
"mode": "dark",
|
|
308
|
+
"value": "hsl(0, 0%, 62.8%)",
|
|
309
|
+
"originalValue": "{color.neutral.dark.textSecondary}",
|
|
310
|
+
"description": "Dark-mode form-control placeholder color."
|
|
311
|
+
},
|
|
312
|
+
"component.field.ring": {
|
|
313
|
+
"cssName": "--field-ring",
|
|
314
|
+
"type": "string",
|
|
315
|
+
"mode": "light",
|
|
316
|
+
"value": "0 0 0 1px hsl(0, 0%, 78.0%)",
|
|
317
|
+
"originalValue": "0 0 0 1px {color.neutral.light.borderHover}",
|
|
318
|
+
"description": "Quiet field focus ring. Brand-yellow shadow focus is reserved for buttons, links, nav, and TV focus."
|
|
319
|
+
},
|
|
320
|
+
"component.field.ringDark": {
|
|
321
|
+
"cssName": "--field-ring",
|
|
322
|
+
"type": "string",
|
|
323
|
+
"mode": "dark",
|
|
324
|
+
"value": "0 0 0 1px hsl(0, 0%, 31.2%)",
|
|
325
|
+
"originalValue": "0 0 0 1px {color.neutral.dark.borderHover}",
|
|
326
|
+
"description": "Dark-mode quiet field focus ring. Brand-yellow shadow focus is reserved for buttons, links, nav, and TV focus."
|
|
327
|
+
},
|
|
328
|
+
"component.panel.background": {
|
|
329
|
+
"cssName": "--panel-bg",
|
|
330
|
+
"type": "color",
|
|
331
|
+
"mode": "light",
|
|
332
|
+
"value": "hsl(0, 0%, 95.1%)",
|
|
333
|
+
"originalValue": "{color.neutral.light.componentBg}",
|
|
334
|
+
"description": "Raised panel background on the app background surface."
|
|
335
|
+
},
|
|
336
|
+
"component.panel.backgroundDark": {
|
|
337
|
+
"cssName": "--panel-bg",
|
|
338
|
+
"type": "color",
|
|
339
|
+
"mode": "dark",
|
|
340
|
+
"value": "hsl(0, 0%, 13.6%)",
|
|
341
|
+
"originalValue": "{color.neutral.dark.componentBg}",
|
|
342
|
+
"description": "Dark-mode raised panel background on the app background surface."
|
|
343
|
+
},
|
|
344
|
+
"component.panel.border": {
|
|
345
|
+
"cssName": "--panel-border",
|
|
346
|
+
"type": "color",
|
|
347
|
+
"mode": "light",
|
|
348
|
+
"value": "hsl(0, 0%, 88.7%)",
|
|
349
|
+
"originalValue": "{color.neutral.light.line}",
|
|
350
|
+
"description": "Raised panel hairline border."
|
|
351
|
+
},
|
|
352
|
+
"component.panel.borderDark": {
|
|
353
|
+
"cssName": "--panel-border",
|
|
354
|
+
"type": "color",
|
|
355
|
+
"mode": "dark",
|
|
356
|
+
"value": "hsl(0, 0%, 20.5%)",
|
|
357
|
+
"originalValue": "{color.neutral.dark.line}",
|
|
358
|
+
"description": "Dark-mode raised panel hairline border."
|
|
359
|
+
},
|
|
360
|
+
"component.panel.radius": {
|
|
361
|
+
"cssName": "--panel-radius",
|
|
362
|
+
"type": "dimension",
|
|
363
|
+
"mode": "global",
|
|
364
|
+
"value": "10px",
|
|
365
|
+
"originalValue": "{radius.lg}",
|
|
366
|
+
"description": "Raised panel radius."
|
|
367
|
+
},
|
|
368
|
+
"component.panel.shadow": {
|
|
369
|
+
"cssName": "--panel-shadow",
|
|
370
|
+
"type": "string",
|
|
371
|
+
"mode": "light",
|
|
372
|
+
"value": "0 4px 12px hsla(0, 0%, 0%, 0.08)",
|
|
373
|
+
"originalValue": "{elevation.md}",
|
|
374
|
+
"description": "Raised panel shadow."
|
|
375
|
+
},
|
|
376
|
+
"component.panel.shadowDark": {
|
|
377
|
+
"cssName": "--panel-shadow",
|
|
378
|
+
"type": "string",
|
|
379
|
+
"mode": "dark",
|
|
380
|
+
"value": "0 4px 12px hsla(0, 0%, 0%, 0.5)",
|
|
381
|
+
"originalValue": "{surface.dark.shadowMd}",
|
|
382
|
+
"description": "Dark-mode raised panel shadow."
|
|
383
|
+
},
|
|
384
|
+
"component.alias.background": {
|
|
385
|
+
"cssName": "--background",
|
|
386
|
+
"type": "color",
|
|
387
|
+
"mode": "light",
|
|
388
|
+
"value": "hsl(0, 0%, 99.0%)",
|
|
389
|
+
"originalValue": "{color.neutral.light.bg}"
|
|
390
|
+
},
|
|
391
|
+
"component.alias.backgroundDark": {
|
|
392
|
+
"cssName": "--background",
|
|
393
|
+
"type": "color",
|
|
394
|
+
"mode": "dark",
|
|
395
|
+
"value": "hsl(0, 0%, 8.5%)",
|
|
396
|
+
"originalValue": "{color.neutral.dark.bg}"
|
|
397
|
+
},
|
|
398
|
+
"component.alias.foreground": {
|
|
399
|
+
"cssName": "--foreground",
|
|
400
|
+
"type": "color",
|
|
401
|
+
"mode": "light",
|
|
402
|
+
"value": "hsl(0, 0%, 9.0%)",
|
|
403
|
+
"originalValue": "{color.neutral.light.text}"
|
|
404
|
+
},
|
|
405
|
+
"component.alias.foregroundDark": {
|
|
406
|
+
"cssName": "--foreground",
|
|
407
|
+
"type": "color",
|
|
408
|
+
"mode": "dark",
|
|
409
|
+
"value": "hsl(0, 0%, 93.0%)",
|
|
410
|
+
"originalValue": "{color.neutral.dark.text}"
|
|
411
|
+
},
|
|
412
|
+
"component.alias.foregroundMuted": {
|
|
413
|
+
"cssName": "--foreground-muted",
|
|
414
|
+
"type": "color",
|
|
415
|
+
"mode": "light",
|
|
416
|
+
"value": "hsl(0, 0%, 43.5%)",
|
|
417
|
+
"originalValue": "{color.neutral.light.textSecondary}"
|
|
418
|
+
},
|
|
419
|
+
"component.alias.foregroundMutedDark": {
|
|
420
|
+
"cssName": "--foreground-muted",
|
|
421
|
+
"type": "color",
|
|
422
|
+
"mode": "dark",
|
|
423
|
+
"value": "hsl(0, 0%, 62.8%)",
|
|
424
|
+
"originalValue": "{color.neutral.dark.textSecondary}"
|
|
425
|
+
},
|
|
426
|
+
"component.alias.primary": {
|
|
427
|
+
"cssName": "--primary",
|
|
428
|
+
"type": "color",
|
|
429
|
+
"mode": "global",
|
|
430
|
+
"value": "hsl(44.7, 97.9%, 63.1%)",
|
|
431
|
+
"originalValue": "{color.brand.yellow}"
|
|
432
|
+
},
|
|
433
|
+
"component.alias.primaryForeground": {
|
|
434
|
+
"cssName": "--primary-foreground",
|
|
435
|
+
"type": "color",
|
|
436
|
+
"mode": "global",
|
|
437
|
+
"value": "hsl(38, 65%, 10%)",
|
|
438
|
+
"originalValue": "hsl(38, 65%, 10%)"
|
|
439
|
+
},
|
|
440
|
+
"component.alias.success": {
|
|
441
|
+
"cssName": "--success",
|
|
442
|
+
"type": "color",
|
|
443
|
+
"mode": "light",
|
|
444
|
+
"value": "hsl(151, 55%, 41.5%)",
|
|
445
|
+
"originalValue": "{color.green.light.solid}"
|
|
446
|
+
},
|
|
447
|
+
"component.alias.successDark": {
|
|
448
|
+
"cssName": "--success",
|
|
449
|
+
"type": "color",
|
|
450
|
+
"mode": "dark",
|
|
451
|
+
"value": "hsl(151, 55%, 41.5%)",
|
|
452
|
+
"originalValue": "{color.green.dark.solid}"
|
|
453
|
+
},
|
|
454
|
+
"component.alias.successForeground": {
|
|
455
|
+
"cssName": "--success-foreground",
|
|
456
|
+
"type": "color",
|
|
457
|
+
"mode": "global",
|
|
458
|
+
"value": "hsl(0, 0%, 100%)",
|
|
459
|
+
"originalValue": "hsl(0, 0%, 100%)"
|
|
460
|
+
},
|
|
461
|
+
"component.alias.destructive": {
|
|
462
|
+
"cssName": "--destructive",
|
|
463
|
+
"type": "color",
|
|
464
|
+
"mode": "light",
|
|
465
|
+
"value": "hsl(358, 75%, 59%)",
|
|
466
|
+
"originalValue": "{color.red.light.solid}"
|
|
467
|
+
},
|
|
468
|
+
"component.alias.destructiveDark": {
|
|
469
|
+
"cssName": "--destructive",
|
|
470
|
+
"type": "color",
|
|
471
|
+
"mode": "dark",
|
|
472
|
+
"value": "hsl(358, 75%, 59%)",
|
|
473
|
+
"originalValue": "{color.red.dark.solid}"
|
|
474
|
+
},
|
|
475
|
+
"component.alias.destructiveForeground": {
|
|
476
|
+
"cssName": "--destructive-foreground",
|
|
477
|
+
"type": "color",
|
|
478
|
+
"mode": "global",
|
|
479
|
+
"value": "hsl(0, 0%, 100%)",
|
|
480
|
+
"originalValue": "hsl(0, 0%, 100%)"
|
|
481
|
+
},
|
|
482
|
+
"component.alias.invertForeground": {
|
|
483
|
+
"cssName": "--invert-foreground",
|
|
484
|
+
"type": "color",
|
|
485
|
+
"mode": "light",
|
|
486
|
+
"value": "hsl(0, 0%, 100%)",
|
|
487
|
+
"originalValue": "{surface.light.appBg}",
|
|
488
|
+
"description": "Text or icon color on invert command backgrounds in light mode."
|
|
489
|
+
},
|
|
490
|
+
"component.alias.invertForegroundDark": {
|
|
491
|
+
"cssName": "--invert-foreground",
|
|
492
|
+
"type": "color",
|
|
493
|
+
"mode": "dark",
|
|
494
|
+
"value": "hsl(0, 0%, 8.5%)",
|
|
495
|
+
"originalValue": "{surface.dark.appBg}",
|
|
496
|
+
"description": "Text or icon color on invert command backgrounds in dark mode."
|
|
497
|
+
},
|
|
498
|
+
"component.alias.solidForeground": {
|
|
499
|
+
"cssName": "--solid-foreground",
|
|
500
|
+
"type": "color",
|
|
501
|
+
"mode": "light",
|
|
502
|
+
"value": "hsl(0, 0%, 0%)",
|
|
503
|
+
"originalValue": "hsl(0, 0%, 0%)"
|
|
504
|
+
},
|
|
505
|
+
"component.alias.solidForegroundDark": {
|
|
506
|
+
"cssName": "--solid-foreground",
|
|
507
|
+
"type": "color",
|
|
508
|
+
"mode": "dark",
|
|
509
|
+
"value": "hsl(0, 0%, 100%)",
|
|
510
|
+
"originalValue": "hsl(0, 0%, 100%)"
|
|
511
|
+
},
|
|
512
|
+
"component.alias.muted": {
|
|
513
|
+
"cssName": "--muted",
|
|
514
|
+
"type": "color",
|
|
515
|
+
"mode": "light",
|
|
516
|
+
"value": "hsl(0, 0%, 97.3%)",
|
|
517
|
+
"originalValue": "{color.neutral.light.bgSecondary}"
|
|
518
|
+
},
|
|
519
|
+
"component.alias.mutedDark": {
|
|
520
|
+
"cssName": "--muted",
|
|
521
|
+
"type": "color",
|
|
522
|
+
"mode": "dark",
|
|
523
|
+
"value": "hsl(0, 0%, 11.0%)",
|
|
524
|
+
"originalValue": "{color.neutral.dark.bgSecondary}"
|
|
525
|
+
},
|
|
526
|
+
"component.alias.mutedForeground": {
|
|
527
|
+
"cssName": "--muted-foreground",
|
|
528
|
+
"type": "color",
|
|
529
|
+
"mode": "light",
|
|
530
|
+
"value": "hsl(0, 0%, 43.5%)",
|
|
531
|
+
"originalValue": "{color.neutral.light.textSecondary}"
|
|
532
|
+
},
|
|
533
|
+
"component.alias.mutedForegroundDark": {
|
|
534
|
+
"cssName": "--muted-foreground",
|
|
535
|
+
"type": "color",
|
|
536
|
+
"mode": "dark",
|
|
537
|
+
"value": "hsl(0, 0%, 62.8%)",
|
|
538
|
+
"originalValue": "{color.neutral.dark.textSecondary}"
|
|
539
|
+
},
|
|
540
|
+
"component.alias.accent": {
|
|
541
|
+
"cssName": "--accent",
|
|
542
|
+
"type": "color",
|
|
543
|
+
"mode": "light",
|
|
544
|
+
"value": "hsl(0, 0%, 95.1%)",
|
|
545
|
+
"originalValue": "{color.neutral.light.componentBg}"
|
|
546
|
+
},
|
|
547
|
+
"component.alias.accentDark": {
|
|
548
|
+
"cssName": "--accent",
|
|
549
|
+
"type": "color",
|
|
550
|
+
"mode": "dark",
|
|
551
|
+
"value": "hsl(0, 0%, 13.6%)",
|
|
552
|
+
"originalValue": "{color.neutral.dark.componentBg}"
|
|
553
|
+
},
|
|
554
|
+
"component.alias.accentForeground": {
|
|
555
|
+
"cssName": "--accent-foreground",
|
|
556
|
+
"type": "color",
|
|
557
|
+
"mode": "light",
|
|
558
|
+
"value": "hsl(0, 0%, 9.0%)",
|
|
559
|
+
"originalValue": "{color.neutral.light.text}"
|
|
560
|
+
},
|
|
561
|
+
"component.alias.accentForegroundDark": {
|
|
562
|
+
"cssName": "--accent-foreground",
|
|
563
|
+
"type": "color",
|
|
564
|
+
"mode": "dark",
|
|
565
|
+
"value": "hsl(0, 0%, 93.0%)",
|
|
566
|
+
"originalValue": "{color.neutral.dark.text}"
|
|
567
|
+
},
|
|
568
|
+
"component.alias.card": {
|
|
569
|
+
"cssName": "--card",
|
|
570
|
+
"type": "color",
|
|
571
|
+
"mode": "light",
|
|
572
|
+
"value": "hsl(0, 0%, 95.1%)",
|
|
573
|
+
"originalValue": "{color.neutral.light.componentBg}"
|
|
574
|
+
},
|
|
575
|
+
"component.alias.cardDark": {
|
|
576
|
+
"cssName": "--card",
|
|
577
|
+
"type": "color",
|
|
578
|
+
"mode": "dark",
|
|
579
|
+
"value": "hsl(0, 0%, 13.6%)",
|
|
580
|
+
"originalValue": "{color.neutral.dark.componentBg}"
|
|
581
|
+
},
|
|
582
|
+
"component.alias.cardForeground": {
|
|
583
|
+
"cssName": "--card-foreground",
|
|
584
|
+
"type": "color",
|
|
585
|
+
"mode": "light",
|
|
586
|
+
"value": "hsl(0, 0%, 9.0%)",
|
|
587
|
+
"originalValue": "{color.neutral.light.text}"
|
|
588
|
+
},
|
|
589
|
+
"component.alias.cardForegroundDark": {
|
|
590
|
+
"cssName": "--card-foreground",
|
|
591
|
+
"type": "color",
|
|
592
|
+
"mode": "dark",
|
|
593
|
+
"value": "hsl(0, 0%, 93.0%)",
|
|
594
|
+
"originalValue": "{color.neutral.dark.text}"
|
|
595
|
+
},
|
|
596
|
+
"component.alias.popover": {
|
|
597
|
+
"cssName": "--popover",
|
|
598
|
+
"type": "color",
|
|
599
|
+
"mode": "light",
|
|
600
|
+
"value": "hsl(0, 0%, 95.1%)",
|
|
601
|
+
"originalValue": "{color.neutral.light.componentBg}"
|
|
602
|
+
},
|
|
603
|
+
"component.alias.popoverDark": {
|
|
604
|
+
"cssName": "--popover",
|
|
605
|
+
"type": "color",
|
|
606
|
+
"mode": "dark",
|
|
607
|
+
"value": "hsl(0, 0%, 13.6%)",
|
|
608
|
+
"originalValue": "{color.neutral.dark.componentBg}"
|
|
609
|
+
},
|
|
610
|
+
"component.alias.popoverForeground": {
|
|
611
|
+
"cssName": "--popover-foreground",
|
|
612
|
+
"type": "color",
|
|
613
|
+
"mode": "light",
|
|
614
|
+
"value": "hsl(0, 0%, 9.0%)",
|
|
615
|
+
"originalValue": "{color.neutral.light.text}"
|
|
616
|
+
},
|
|
617
|
+
"component.alias.popoverForegroundDark": {
|
|
618
|
+
"cssName": "--popover-foreground",
|
|
619
|
+
"type": "color",
|
|
620
|
+
"mode": "dark",
|
|
621
|
+
"value": "hsl(0, 0%, 93.0%)",
|
|
622
|
+
"originalValue": "{color.neutral.dark.text}"
|
|
623
|
+
},
|
|
624
|
+
"component.alias.input": {
|
|
625
|
+
"cssName": "--input",
|
|
626
|
+
"type": "color",
|
|
627
|
+
"mode": "light",
|
|
628
|
+
"value": "hsl(0, 0%, 85.8%)",
|
|
629
|
+
"originalValue": "{color.neutral.light.border}"
|
|
630
|
+
},
|
|
631
|
+
"component.alias.inputDark": {
|
|
632
|
+
"cssName": "--input",
|
|
633
|
+
"type": "color",
|
|
634
|
+
"mode": "dark",
|
|
635
|
+
"value": "hsl(0, 0%, 24.3%)",
|
|
636
|
+
"originalValue": "{color.neutral.dark.border}"
|
|
637
|
+
},
|
|
638
|
+
"component.alias.ring": {
|
|
639
|
+
"cssName": "--ring",
|
|
640
|
+
"type": "color",
|
|
641
|
+
"mode": "global",
|
|
642
|
+
"value": "hsla(47, 100%, 65%, 0.35)",
|
|
643
|
+
"originalValue": "{elevation.focusColor}"
|
|
644
|
+
},
|
|
88
645
|
"component.fileRow.background": {
|
|
89
646
|
"cssName": "--file-row-bg",
|
|
90
647
|
"type": "color",
|
|
91
648
|
"mode": "light",
|
|
92
|
-
"value": "
|
|
649
|
+
"value": "hsla(0, 0%, 0%, 0)",
|
|
93
650
|
"originalValue": "{surface.light.listItemBg}"
|
|
94
651
|
},
|
|
95
652
|
"component.fileRow.backgroundDark": {
|
|
96
653
|
"cssName": "--file-row-bg",
|
|
97
654
|
"type": "color",
|
|
98
655
|
"mode": "dark",
|
|
99
|
-
"value": "
|
|
656
|
+
"value": "hsla(0, 0%, 0%, 0)",
|
|
100
657
|
"originalValue": "{surface.dark.listItemBg}"
|
|
101
658
|
},
|
|
102
659
|
"component.fileRow.hoverBackground": {
|
|
@@ -117,7 +674,7 @@
|
|
|
117
674
|
"cssName": "--file-row-icon",
|
|
118
675
|
"type": "color",
|
|
119
676
|
"mode": "global",
|
|
120
|
-
"value": "
|
|
677
|
+
"value": "hsl(44.7, 97.9%, 63.1%)",
|
|
121
678
|
"originalValue": "{color.brand.yellow}"
|
|
122
679
|
},
|
|
123
680
|
"component.notification.infoBackground": {
|
|
@@ -138,121 +695,177 @@
|
|
|
138
695
|
"cssName": "--notification-danger-bg",
|
|
139
696
|
"type": "color",
|
|
140
697
|
"mode": "light",
|
|
141
|
-
"value": "hsl(
|
|
698
|
+
"value": "hsl(2, 100%, 96%)",
|
|
142
699
|
"originalValue": "{color.red.light.componentBg}"
|
|
143
700
|
},
|
|
144
701
|
"component.notification.dangerBackgroundDark": {
|
|
145
702
|
"cssName": "--notification-danger-bg",
|
|
146
703
|
"type": "color",
|
|
147
704
|
"mode": "dark",
|
|
148
|
-
"value": "hsl(
|
|
705
|
+
"value": "hsl(0, 55%, 15%)",
|
|
149
706
|
"originalValue": "{color.red.dark.componentBg}"
|
|
150
707
|
},
|
|
151
708
|
"context.tv.surface.0": {
|
|
152
709
|
"cssName": "--surf-0",
|
|
153
710
|
"type": "color",
|
|
154
711
|
"mode": "tv",
|
|
155
|
-
"value": "
|
|
156
|
-
"originalValue": "
|
|
712
|
+
"value": "hsl(0, 0%, 0%)",
|
|
713
|
+
"originalValue": "hsl(0, 0%, 0%)"
|
|
157
714
|
},
|
|
158
715
|
"context.tv.surface.1": {
|
|
159
716
|
"cssName": "--surf-1",
|
|
160
717
|
"type": "color",
|
|
161
718
|
"mode": "tv",
|
|
162
|
-
"value": "
|
|
163
|
-
"originalValue": "
|
|
719
|
+
"value": "hsl(0, 0%, 3.9%)",
|
|
720
|
+
"originalValue": "hsl(0, 0%, 3.9%)"
|
|
164
721
|
},
|
|
165
722
|
"context.tv.surface.2": {
|
|
166
723
|
"cssName": "--surf-2",
|
|
167
724
|
"type": "color",
|
|
168
725
|
"mode": "tv",
|
|
169
|
-
"value": "
|
|
170
|
-
"originalValue": "
|
|
726
|
+
"value": "hsl(0, 0%, 8.6%)",
|
|
727
|
+
"originalValue": "hsl(0, 0%, 8.6%)"
|
|
171
728
|
},
|
|
172
729
|
"context.tv.surface.3": {
|
|
173
730
|
"cssName": "--surf-3",
|
|
174
731
|
"type": "color",
|
|
175
732
|
"mode": "tv",
|
|
176
|
-
"value": "
|
|
177
|
-
"originalValue": "
|
|
733
|
+
"value": "hsl(0, 0%, 12.2%)",
|
|
734
|
+
"originalValue": "hsl(0, 0%, 12.2%)"
|
|
178
735
|
},
|
|
179
736
|
"context.tv.text.primary": {
|
|
180
737
|
"cssName": "--text-1",
|
|
181
738
|
"type": "color",
|
|
182
739
|
"mode": "tv",
|
|
183
|
-
"value": "
|
|
184
|
-
"originalValue": "
|
|
740
|
+
"value": "hsl(0, 0%, 95.7%)",
|
|
741
|
+
"originalValue": "hsl(0, 0%, 95.7%)"
|
|
185
742
|
},
|
|
186
743
|
"context.tv.text.secondary": {
|
|
187
744
|
"cssName": "--text-2",
|
|
188
745
|
"type": "color",
|
|
189
746
|
"mode": "tv",
|
|
190
|
-
"value": "
|
|
191
|
-
"originalValue": "
|
|
747
|
+
"value": "hsla(0, 0%, 95.7%, 0.62)",
|
|
748
|
+
"originalValue": "hsla(0, 0%, 95.7%, 0.62)"
|
|
192
749
|
},
|
|
193
750
|
"context.tv.text.tertiary": {
|
|
194
751
|
"cssName": "--text-3",
|
|
195
752
|
"type": "color",
|
|
196
753
|
"mode": "tv",
|
|
197
|
-
"value": "
|
|
198
|
-
"originalValue": "
|
|
754
|
+
"value": "hsla(0, 0%, 95.7%, 0.38)",
|
|
755
|
+
"originalValue": "hsla(0, 0%, 95.7%, 0.38)"
|
|
199
756
|
},
|
|
200
757
|
"context.tv.glass.1": {
|
|
201
758
|
"cssName": "--glass-1-bg",
|
|
202
759
|
"type": "color",
|
|
203
760
|
"mode": "tv",
|
|
204
|
-
"value": "
|
|
205
|
-
"originalValue": "
|
|
761
|
+
"value": "hsla(0, 0%, 100%, 0.06)",
|
|
762
|
+
"originalValue": "hsla(0, 0%, 100%, 0.06)"
|
|
206
763
|
},
|
|
207
764
|
"context.tv.glass.2": {
|
|
208
765
|
"cssName": "--glass-2-bg",
|
|
209
766
|
"type": "color",
|
|
210
767
|
"mode": "tv",
|
|
211
|
-
"value": "
|
|
212
|
-
"originalValue": "
|
|
768
|
+
"value": "hsla(0, 0%, 100%, 0.10)",
|
|
769
|
+
"originalValue": "hsla(0, 0%, 100%, 0.10)"
|
|
213
770
|
},
|
|
214
771
|
"context.tv.glass.3": {
|
|
215
772
|
"cssName": "--glass-3-bg",
|
|
216
773
|
"type": "color",
|
|
217
774
|
"mode": "tv",
|
|
218
|
-
"value": "
|
|
219
|
-
"originalValue": "
|
|
775
|
+
"value": "hsla(0, 0%, 100%, 0.14)",
|
|
776
|
+
"originalValue": "hsla(0, 0%, 100%, 0.14)"
|
|
220
777
|
},
|
|
221
778
|
"context.tv.glass.border": {
|
|
222
779
|
"cssName": "--glass-border",
|
|
223
780
|
"type": "color",
|
|
224
781
|
"mode": "tv",
|
|
225
|
-
"value": "
|
|
226
|
-
"originalValue": "
|
|
782
|
+
"value": "hsla(0, 0%, 100%, 0.12)",
|
|
783
|
+
"originalValue": "hsla(0, 0%, 100%, 0.12)"
|
|
227
784
|
},
|
|
228
785
|
"context.tv.glass.borderStrong": {
|
|
229
786
|
"cssName": "--glass-border-strong",
|
|
230
787
|
"type": "color",
|
|
231
788
|
"mode": "tv",
|
|
232
|
-
"value": "
|
|
233
|
-
"originalValue": "
|
|
789
|
+
"value": "hsla(0, 0%, 100%, 0.22)",
|
|
790
|
+
"originalValue": "hsla(0, 0%, 100%, 0.22)"
|
|
234
791
|
},
|
|
235
792
|
"context.tv.focus.ring": {
|
|
236
793
|
"cssName": "--focus-ring",
|
|
237
794
|
"type": "color",
|
|
238
795
|
"mode": "tv",
|
|
239
|
-
"value": "
|
|
240
|
-
"originalValue": "
|
|
796
|
+
"value": "hsla(44.7, 97.9%, 63.1%, 0.18)",
|
|
797
|
+
"originalValue": "hsla(44.7, 97.9%, 63.1%, 0.18)"
|
|
241
798
|
},
|
|
242
799
|
"context.tv.focus.liftShadow": {
|
|
243
800
|
"cssName": "--focus-shadow",
|
|
244
801
|
"type": "string",
|
|
245
802
|
"mode": "tv",
|
|
246
|
-
"value": "0 14px 30px
|
|
247
|
-
"originalValue": "0 14px 30px
|
|
803
|
+
"value": "0 14px 30px hsla(0, 0%, 0%, 0.45)",
|
|
804
|
+
"originalValue": "0 14px 30px hsla(0, 0%, 0%, 0.45)"
|
|
805
|
+
},
|
|
806
|
+
"context.tv.channelArt.production.posterBackground": {
|
|
807
|
+
"cssName": "--tv-channel-art-production-poster-bg",
|
|
808
|
+
"type": "color",
|
|
809
|
+
"mode": "tv",
|
|
810
|
+
"value": "hsl(0, 0%, 20%)",
|
|
811
|
+
"originalValue": "hsl(0, 0%, 20%)"
|
|
812
|
+
},
|
|
813
|
+
"context.tv.channelArt.production.splashBackground": {
|
|
814
|
+
"cssName": "--tv-channel-art-production-splash-bg",
|
|
815
|
+
"type": "color",
|
|
816
|
+
"mode": "tv",
|
|
817
|
+
"value": "hsl(0, 0%, 8.5%)",
|
|
818
|
+
"originalValue": "{color.neutral.dark.bg}"
|
|
819
|
+
},
|
|
820
|
+
"context.tv.channelArt.development.background": {
|
|
821
|
+
"cssName": "--tv-channel-art-development-bg",
|
|
822
|
+
"type": "color",
|
|
823
|
+
"mode": "tv",
|
|
824
|
+
"value": "hsl(206.7, 78.8%, 52%)",
|
|
825
|
+
"originalValue": "hsl(206.7, 78.8%, 52%)"
|
|
826
|
+
},
|
|
827
|
+
"context.tv.channelArt.development.accent": {
|
|
828
|
+
"cssName": "--tv-channel-art-development-accent",
|
|
829
|
+
"type": "color",
|
|
830
|
+
"mode": "tv",
|
|
831
|
+
"value": "hsl(206.3, 100%, 81.2%)",
|
|
832
|
+
"originalValue": "hsl(206.3, 100%, 81.2%)"
|
|
833
|
+
},
|
|
834
|
+
"context.tv.channelArt.development.grid": {
|
|
835
|
+
"cssName": "--tv-channel-art-development-grid",
|
|
836
|
+
"type": "color",
|
|
837
|
+
"mode": "tv",
|
|
838
|
+
"value": "hsla(0, 0%, 100%, 0.18)",
|
|
839
|
+
"originalValue": "hsla(0, 0%, 100%, 0.18)"
|
|
840
|
+
},
|
|
841
|
+
"context.tv.channelArt.lab.background": {
|
|
842
|
+
"cssName": "--tv-channel-art-lab-bg",
|
|
843
|
+
"type": "color",
|
|
844
|
+
"mode": "tv",
|
|
845
|
+
"value": "hsl(120, 20%, 4.9%)",
|
|
846
|
+
"originalValue": "hsl(120, 20%, 4.9%)"
|
|
847
|
+
},
|
|
848
|
+
"context.tv.channelArt.lab.foreground": {
|
|
849
|
+
"cssName": "--tv-channel-art-lab-fg",
|
|
850
|
+
"type": "color",
|
|
851
|
+
"mode": "tv",
|
|
852
|
+
"value": "hsl(111.1, 100%, 94.7%)",
|
|
853
|
+
"originalValue": "hsl(111.1, 100%, 94.7%)"
|
|
854
|
+
},
|
|
855
|
+
"context.tv.channelArt.lab.accent": {
|
|
856
|
+
"cssName": "--tv-channel-art-lab-accent",
|
|
857
|
+
"type": "color",
|
|
858
|
+
"mode": "tv",
|
|
859
|
+
"value": "hsl(110.6, 100%, 53.9%)",
|
|
860
|
+
"originalValue": "hsl(110.6, 100%, 53.9%)"
|
|
248
861
|
},
|
|
249
862
|
"color.brand.yellow": {
|
|
250
863
|
"cssName": "--yellow-solid",
|
|
251
864
|
"type": "color",
|
|
252
865
|
"mode": "global",
|
|
253
|
-
"value": "
|
|
254
|
-
"originalValue": "
|
|
255
|
-
"description": "
|
|
866
|
+
"value": "hsl(44.7, 97.9%, 63.1%)",
|
|
867
|
+
"originalValue": "hsl(44.7, 97.9%, 63.1%)",
|
|
868
|
+
"description": "put.io brand yellow (canonical hex #FDCE45). The resting brand fill is the same in light and dark modes."
|
|
256
869
|
},
|
|
257
870
|
"color.neutral.light.bg": {
|
|
258
871
|
"cssName": "--bg",
|
|
@@ -426,491 +1039,493 @@
|
|
|
426
1039
|
"cssName": "--green-bg",
|
|
427
1040
|
"type": "color",
|
|
428
1041
|
"mode": "light",
|
|
429
|
-
"value": "hsl(
|
|
430
|
-
"originalValue": "hsl(
|
|
1042
|
+
"value": "hsl(140, 60%, 99%)",
|
|
1043
|
+
"originalValue": "hsl(140, 60%, 99%)"
|
|
431
1044
|
},
|
|
432
1045
|
"color.green.light.bgSecondary": {
|
|
433
1046
|
"cssName": "--green-bg-secondary",
|
|
434
1047
|
"type": "color",
|
|
435
1048
|
"mode": "light",
|
|
436
|
-
"value": "hsl(
|
|
437
|
-
"originalValue": "hsl(
|
|
1049
|
+
"value": "hsl(140, 41%, 97%)",
|
|
1050
|
+
"originalValue": "hsl(140, 41%, 97%)"
|
|
438
1051
|
},
|
|
439
1052
|
"color.green.light.componentBg": {
|
|
440
1053
|
"cssName": "--green-component-bg",
|
|
441
1054
|
"type": "color",
|
|
442
1055
|
"mode": "light",
|
|
443
|
-
"value": "hsl(
|
|
444
|
-
"originalValue": "hsl(
|
|
1056
|
+
"value": "hsl(135, 53%, 93%)",
|
|
1057
|
+
"originalValue": "hsl(135, 53%, 93%)"
|
|
445
1058
|
},
|
|
446
1059
|
"color.green.light.componentBgHover": {
|
|
447
1060
|
"cssName": "--green-component-bg-hover",
|
|
448
1061
|
"type": "color",
|
|
449
1062
|
"mode": "light",
|
|
450
|
-
"value": "hsl(
|
|
451
|
-
"originalValue": "hsl(
|
|
1063
|
+
"value": "hsl(138, 58%, 89%)",
|
|
1064
|
+
"originalValue": "hsl(138, 58%, 89%)"
|
|
452
1065
|
},
|
|
453
1066
|
"color.green.light.componentBgActive": {
|
|
454
1067
|
"cssName": "--green-component-bg-active",
|
|
455
1068
|
"type": "color",
|
|
456
1069
|
"mode": "light",
|
|
457
|
-
"value": "hsl(
|
|
458
|
-
"originalValue": "hsl(
|
|
1070
|
+
"value": "hsl(140, 50%, 84%)",
|
|
1071
|
+
"originalValue": "hsl(140, 50%, 84%)"
|
|
459
1072
|
},
|
|
460
1073
|
"color.green.light.line": {
|
|
461
1074
|
"cssName": "--green-line",
|
|
462
1075
|
"type": "color",
|
|
463
1076
|
"mode": "light",
|
|
464
|
-
"value": "hsl(
|
|
465
|
-
"originalValue": "hsl(
|
|
1077
|
+
"value": "hsl(141, 47%, 77%)",
|
|
1078
|
+
"originalValue": "hsl(141, 47%, 77%)"
|
|
466
1079
|
},
|
|
467
1080
|
"color.green.light.border": {
|
|
468
1081
|
"cssName": "--green-border",
|
|
469
1082
|
"type": "color",
|
|
470
1083
|
"mode": "light",
|
|
471
|
-
"value": "hsl(
|
|
472
|
-
"originalValue": "hsl(
|
|
1084
|
+
"value": "hsl(140, 39%, 68%)",
|
|
1085
|
+
"originalValue": "hsl(140, 39%, 68%)"
|
|
473
1086
|
},
|
|
474
1087
|
"color.green.light.borderHover": {
|
|
475
1088
|
"cssName": "--green-border-hover",
|
|
476
1089
|
"type": "color",
|
|
477
1090
|
"mode": "light",
|
|
478
|
-
"value": "hsl(
|
|
479
|
-
"originalValue": "hsl(
|
|
1091
|
+
"value": "hsl(146, 39%, 55%)",
|
|
1092
|
+
"originalValue": "hsl(146, 39%, 55%)"
|
|
480
1093
|
},
|
|
481
1094
|
"color.green.light.solid": {
|
|
482
1095
|
"cssName": "--green-solid",
|
|
483
1096
|
"type": "color",
|
|
484
1097
|
"mode": "light",
|
|
485
|
-
"value": "hsl(151, 55
|
|
486
|
-
"originalValue": "hsl(151, 55
|
|
1098
|
+
"value": "hsl(151, 55%, 41.5%)",
|
|
1099
|
+
"originalValue": "hsl(151, 55%, 41.5%)"
|
|
487
1100
|
},
|
|
488
1101
|
"color.green.light.solidHover": {
|
|
489
1102
|
"cssName": "--green-solid-hover",
|
|
490
1103
|
"type": "color",
|
|
491
1104
|
"mode": "light",
|
|
492
|
-
"value": "hsl(
|
|
493
|
-
"originalValue": "hsl(
|
|
1105
|
+
"value": "hsl(151, 58%, 37%)",
|
|
1106
|
+
"originalValue": "hsl(151, 58%, 37%)"
|
|
494
1107
|
},
|
|
495
1108
|
"color.green.light.textSecondary": {
|
|
496
1109
|
"cssName": "--green-text-secondary",
|
|
497
1110
|
"type": "color",
|
|
498
1111
|
"mode": "light",
|
|
499
|
-
"value": "hsl(
|
|
500
|
-
"originalValue": "hsl(
|
|
1112
|
+
"value": "hsl(155, 100%, 25%)",
|
|
1113
|
+
"originalValue": "hsl(155, 100%, 25%)"
|
|
501
1114
|
},
|
|
502
1115
|
"color.green.light.text": {
|
|
503
1116
|
"cssName": "--green-text",
|
|
504
1117
|
"type": "color",
|
|
505
1118
|
"mode": "light",
|
|
506
|
-
"value": "hsl(
|
|
507
|
-
"originalValue": "hsl(
|
|
1119
|
+
"value": "hsl(146, 35%, 17%)",
|
|
1120
|
+
"originalValue": "hsl(146, 35%, 17%)"
|
|
508
1121
|
},
|
|
509
1122
|
"color.green.dark.bg": {
|
|
510
1123
|
"cssName": "--green-bg",
|
|
511
1124
|
"type": "color",
|
|
512
1125
|
"mode": "dark",
|
|
513
|
-
"value": "hsl(
|
|
514
|
-
"originalValue": "hsl(
|
|
1126
|
+
"value": "hsl(140, 13%, 6%)",
|
|
1127
|
+
"originalValue": "hsl(140, 13%, 6%)"
|
|
515
1128
|
},
|
|
516
1129
|
"color.green.dark.bgSecondary": {
|
|
517
1130
|
"cssName": "--green-bg-secondary",
|
|
518
1131
|
"type": "color",
|
|
519
1132
|
"mode": "dark",
|
|
520
|
-
"value": "hsl(
|
|
521
|
-
"originalValue": "hsl(
|
|
1133
|
+
"value": "hsl(149, 21%, 9%)",
|
|
1134
|
+
"originalValue": "hsl(149, 21%, 9%)"
|
|
522
1135
|
},
|
|
523
1136
|
"color.green.dark.componentBg": {
|
|
524
1137
|
"cssName": "--green-component-bg",
|
|
525
1138
|
"type": "color",
|
|
526
1139
|
"mode": "dark",
|
|
527
|
-
"value": "hsl(
|
|
528
|
-
"originalValue": "hsl(
|
|
1140
|
+
"value": "hsl(151, 35%, 13%)",
|
|
1141
|
+
"originalValue": "hsl(151, 35%, 13%)"
|
|
529
1142
|
},
|
|
530
1143
|
"color.green.dark.componentBgHover": {
|
|
531
1144
|
"cssName": "--green-component-bg-hover",
|
|
532
1145
|
"type": "color",
|
|
533
1146
|
"mode": "dark",
|
|
534
|
-
"value": "hsl(
|
|
535
|
-
"originalValue": "hsl(
|
|
1147
|
+
"value": "hsl(149, 49%, 16%)",
|
|
1148
|
+
"originalValue": "hsl(149, 49%, 16%)"
|
|
536
1149
|
},
|
|
537
1150
|
"color.green.dark.componentBgActive": {
|
|
538
1151
|
"cssName": "--green-component-bg-active",
|
|
539
1152
|
"type": "color",
|
|
540
1153
|
"mode": "dark",
|
|
541
|
-
"value": "hsl(
|
|
542
|
-
"originalValue": "hsl(
|
|
1154
|
+
"value": "hsl(149, 46%, 19%)",
|
|
1155
|
+
"originalValue": "hsl(149, 46%, 19%)"
|
|
543
1156
|
},
|
|
544
1157
|
"color.green.dark.line": {
|
|
545
1158
|
"cssName": "--green-line",
|
|
546
1159
|
"type": "color",
|
|
547
1160
|
"mode": "dark",
|
|
548
|
-
"value": "hsl(
|
|
549
|
-
"originalValue": "hsl(
|
|
1161
|
+
"value": "hsl(146, 42%, 24%)",
|
|
1162
|
+
"originalValue": "hsl(146, 42%, 24%)"
|
|
550
1163
|
},
|
|
551
1164
|
"color.green.dark.border": {
|
|
552
1165
|
"cssName": "--green-border",
|
|
553
1166
|
"type": "color",
|
|
554
1167
|
"mode": "dark",
|
|
555
|
-
"value": "hsl(
|
|
556
|
-
"originalValue": "hsl(
|
|
1168
|
+
"value": "hsl(146, 41%, 29%)",
|
|
1169
|
+
"originalValue": "hsl(146, 41%, 29%)"
|
|
557
1170
|
},
|
|
558
1171
|
"color.green.dark.borderHover": {
|
|
559
1172
|
"cssName": "--green-border-hover",
|
|
560
1173
|
"type": "color",
|
|
561
1174
|
"mode": "dark",
|
|
562
|
-
"value": "hsl(
|
|
563
|
-
"originalValue": "hsl(
|
|
1175
|
+
"value": "hsl(148, 43%, 34%)",
|
|
1176
|
+
"originalValue": "hsl(148, 43%, 34%)"
|
|
564
1177
|
},
|
|
565
1178
|
"color.green.dark.solid": {
|
|
566
1179
|
"cssName": "--green-solid",
|
|
567
1180
|
"type": "color",
|
|
568
1181
|
"mode": "dark",
|
|
569
|
-
"value": "hsl(151, 55
|
|
570
|
-
"originalValue": "hsl(151, 55
|
|
1182
|
+
"value": "hsl(151, 55%, 41.5%)",
|
|
1183
|
+
"originalValue": "hsl(151, 55%, 41.5%)"
|
|
571
1184
|
},
|
|
572
1185
|
"color.green.dark.solidHover": {
|
|
573
1186
|
"cssName": "--green-solid-hover",
|
|
574
1187
|
"type": "color",
|
|
575
1188
|
"mode": "dark",
|
|
576
|
-
"value": "hsl(151,
|
|
577
|
-
"originalValue": "hsl(151,
|
|
1189
|
+
"value": "hsl(151, 68%, 35%)",
|
|
1190
|
+
"originalValue": "hsl(151, 68%, 35%)"
|
|
578
1191
|
},
|
|
579
1192
|
"color.green.dark.textSecondary": {
|
|
580
1193
|
"cssName": "--green-text-secondary",
|
|
581
1194
|
"type": "color",
|
|
582
1195
|
"mode": "dark",
|
|
583
|
-
"value": "hsl(
|
|
584
|
-
"originalValue": "hsl(
|
|
1196
|
+
"value": "hsl(146, 56%, 60%)",
|
|
1197
|
+
"originalValue": "hsl(146, 56%, 60%)"
|
|
585
1198
|
},
|
|
586
1199
|
"color.green.dark.text": {
|
|
587
1200
|
"cssName": "--green-text",
|
|
588
1201
|
"type": "color",
|
|
589
1202
|
"mode": "dark",
|
|
590
|
-
"value": "hsl(
|
|
591
|
-
"originalValue": "hsl(
|
|
1203
|
+
"value": "hsl(142, 71%, 82%)",
|
|
1204
|
+
"originalValue": "hsl(142, 71%, 82%)"
|
|
592
1205
|
},
|
|
593
1206
|
"color.red.light.bg": {
|
|
594
1207
|
"cssName": "--red-bg",
|
|
595
1208
|
"type": "color",
|
|
596
1209
|
"mode": "light",
|
|
597
|
-
"value": "hsl(
|
|
598
|
-
"originalValue": "hsl(
|
|
1210
|
+
"value": "hsl(0, 100%, 99%)",
|
|
1211
|
+
"originalValue": "hsl(0, 100%, 99%)"
|
|
599
1212
|
},
|
|
600
1213
|
"color.red.light.bgSecondary": {
|
|
601
1214
|
"cssName": "--red-bg-secondary",
|
|
602
1215
|
"type": "color",
|
|
603
1216
|
"mode": "light",
|
|
604
|
-
"value": "hsl(
|
|
605
|
-
"originalValue": "hsl(
|
|
1217
|
+
"value": "hsl(0, 100%, 98%)",
|
|
1218
|
+
"originalValue": "hsl(0, 100%, 98%)"
|
|
606
1219
|
},
|
|
607
1220
|
"color.red.light.componentBg": {
|
|
608
1221
|
"cssName": "--red-component-bg",
|
|
609
1222
|
"type": "color",
|
|
610
1223
|
"mode": "light",
|
|
611
|
-
"value": "hsl(
|
|
612
|
-
"originalValue": "hsl(
|
|
1224
|
+
"value": "hsl(2, 100%, 96%)",
|
|
1225
|
+
"originalValue": "hsl(2, 100%, 96%)"
|
|
613
1226
|
},
|
|
614
1227
|
"color.red.light.componentBgHover": {
|
|
615
1228
|
"cssName": "--red-component-bg-hover",
|
|
616
1229
|
"type": "color",
|
|
617
1230
|
"mode": "light",
|
|
618
|
-
"value": "hsl(
|
|
619
|
-
"originalValue": "hsl(
|
|
1231
|
+
"value": "hsl(4, 100%, 93%)",
|
|
1232
|
+
"originalValue": "hsl(4, 100%, 93%)"
|
|
620
1233
|
},
|
|
621
1234
|
"color.red.light.componentBgActive": {
|
|
622
1235
|
"cssName": "--red-component-bg-active",
|
|
623
1236
|
"type": "color",
|
|
624
1237
|
"mode": "light",
|
|
625
|
-
"value": "hsl(
|
|
626
|
-
"originalValue": "hsl(
|
|
1238
|
+
"value": "hsl(3, 100%, 89%)",
|
|
1239
|
+
"originalValue": "hsl(3, 100%, 89%)"
|
|
627
1240
|
},
|
|
628
1241
|
"color.red.light.line": {
|
|
629
1242
|
"cssName": "--red-line",
|
|
630
1243
|
"type": "color",
|
|
631
1244
|
"mode": "light",
|
|
632
|
-
"value": "hsl(
|
|
633
|
-
"originalValue": "hsl(
|
|
1245
|
+
"value": "hsl(3, 97%, 86%)",
|
|
1246
|
+
"originalValue": "hsl(3, 97%, 86%)"
|
|
634
1247
|
},
|
|
635
1248
|
"color.red.light.border": {
|
|
636
1249
|
"cssName": "--red-border",
|
|
637
1250
|
"type": "color",
|
|
638
1251
|
"mode": "light",
|
|
639
|
-
"value": "hsl(
|
|
640
|
-
"originalValue": "hsl(
|
|
1252
|
+
"value": "hsl(2, 81%, 80%)",
|
|
1253
|
+
"originalValue": "hsl(2, 81%, 80%)"
|
|
641
1254
|
},
|
|
642
1255
|
"color.red.light.borderHover": {
|
|
643
1256
|
"cssName": "--red-border-hover",
|
|
644
1257
|
"type": "color",
|
|
645
1258
|
"mode": "light",
|
|
646
|
-
"value": "hsl(
|
|
647
|
-
"originalValue": "hsl(
|
|
1259
|
+
"value": "hsl(2, 71%, 73%)",
|
|
1260
|
+
"originalValue": "hsl(2, 71%, 73%)"
|
|
648
1261
|
},
|
|
649
1262
|
"color.red.light.solid": {
|
|
650
1263
|
"cssName": "--red-solid",
|
|
651
1264
|
"type": "color",
|
|
652
1265
|
"mode": "light",
|
|
653
|
-
"value": "hsl(358, 75
|
|
654
|
-
"originalValue": "hsl(358, 75
|
|
1266
|
+
"value": "hsl(358, 75%, 59%)",
|
|
1267
|
+
"originalValue": "hsl(358, 75%, 59%)"
|
|
655
1268
|
},
|
|
656
1269
|
"color.red.light.solidHover": {
|
|
657
1270
|
"cssName": "--red-solid-hover",
|
|
658
1271
|
"type": "color",
|
|
659
1272
|
"mode": "light",
|
|
660
|
-
"value": "hsl(
|
|
661
|
-
"originalValue": "hsl(
|
|
1273
|
+
"value": "hsl(357, 66%, 53%)",
|
|
1274
|
+
"originalValue": "hsl(357, 66%, 53%)"
|
|
662
1275
|
},
|
|
663
1276
|
"color.red.light.textSecondary": {
|
|
664
1277
|
"cssName": "--red-text-secondary",
|
|
665
1278
|
"type": "color",
|
|
666
1279
|
"mode": "light",
|
|
667
|
-
"value": "hsl(
|
|
668
|
-
"originalValue": "hsl(
|
|
1280
|
+
"value": "hsl(355, 64%, 49%)",
|
|
1281
|
+
"originalValue": "hsl(355, 64%, 49%)"
|
|
669
1282
|
},
|
|
670
1283
|
"color.red.light.text": {
|
|
671
1284
|
"cssName": "--red-text",
|
|
672
1285
|
"type": "color",
|
|
673
1286
|
"mode": "light",
|
|
674
|
-
"value": "hsl(
|
|
675
|
-
"originalValue": "hsl(
|
|
1287
|
+
"value": "hsl(358, 62%, 24%)",
|
|
1288
|
+
"originalValue": "hsl(358, 62%, 24%)"
|
|
676
1289
|
},
|
|
677
1290
|
"color.red.dark.bg": {
|
|
678
1291
|
"cssName": "--red-bg",
|
|
679
1292
|
"type": "color",
|
|
680
1293
|
"mode": "dark",
|
|
681
|
-
"value": "hsl(
|
|
682
|
-
"originalValue": "hsl(
|
|
1294
|
+
"value": "hsl(8, 13%, 7%)",
|
|
1295
|
+
"originalValue": "hsl(8, 13%, 7%)"
|
|
683
1296
|
},
|
|
684
1297
|
"color.red.dark.bgSecondary": {
|
|
685
1298
|
"cssName": "--red-bg-secondary",
|
|
686
1299
|
"type": "color",
|
|
687
1300
|
"mode": "dark",
|
|
688
|
-
"value": "hsl(
|
|
689
|
-
"originalValue": "hsl(
|
|
1301
|
+
"value": "hsl(4, 28%, 10%)",
|
|
1302
|
+
"originalValue": "hsl(4, 28%, 10%)"
|
|
690
1303
|
},
|
|
691
1304
|
"color.red.dark.componentBg": {
|
|
692
1305
|
"cssName": "--red-component-bg",
|
|
693
1306
|
"type": "color",
|
|
694
1307
|
"mode": "dark",
|
|
695
|
-
"value": "hsl(
|
|
696
|
-
"originalValue": "hsl(
|
|
1308
|
+
"value": "hsl(0, 55%, 15%)",
|
|
1309
|
+
"originalValue": "hsl(0, 55%, 15%)"
|
|
697
1310
|
},
|
|
698
1311
|
"color.red.dark.componentBgHover": {
|
|
699
1312
|
"cssName": "--red-component-bg-hover",
|
|
700
1313
|
"type": "color",
|
|
701
1314
|
"mode": "dark",
|
|
702
|
-
"value": "hsl(
|
|
703
|
-
"originalValue": "hsl(
|
|
1315
|
+
"value": "hsl(357, 70%, 19%)",
|
|
1316
|
+
"originalValue": "hsl(357, 70%, 19%)"
|
|
704
1317
|
},
|
|
705
1318
|
"color.red.dark.componentBgActive": {
|
|
706
1319
|
"cssName": "--red-component-bg-active",
|
|
707
1320
|
"type": "color",
|
|
708
1321
|
"mode": "dark",
|
|
709
|
-
"value": "hsl(
|
|
710
|
-
"originalValue": "hsl(
|
|
1322
|
+
"value": "hsl(358, 62%, 24%)",
|
|
1323
|
+
"originalValue": "hsl(358, 62%, 24%)"
|
|
711
1324
|
},
|
|
712
1325
|
"color.red.dark.line": {
|
|
713
1326
|
"cssName": "--red-line",
|
|
714
1327
|
"type": "color",
|
|
715
1328
|
"mode": "dark",
|
|
716
|
-
"value": "hsl(
|
|
717
|
-
"originalValue": "hsl(
|
|
1329
|
+
"value": "hsl(359, 52%, 30%)",
|
|
1330
|
+
"originalValue": "hsl(359, 52%, 30%)"
|
|
718
1331
|
},
|
|
719
1332
|
"color.red.dark.border": {
|
|
720
1333
|
"cssName": "--red-border",
|
|
721
1334
|
"type": "color",
|
|
722
1335
|
"mode": "dark",
|
|
723
|
-
"value": "hsl(
|
|
724
|
-
"originalValue": "hsl(
|
|
1336
|
+
"value": "hsl(0, 46%, 38%)",
|
|
1337
|
+
"originalValue": "hsl(0, 46%, 38%)"
|
|
725
1338
|
},
|
|
726
1339
|
"color.red.dark.borderHover": {
|
|
727
1340
|
"cssName": "--red-border-hover",
|
|
728
1341
|
"type": "color",
|
|
729
1342
|
"mode": "dark",
|
|
730
|
-
"value": "hsl(
|
|
731
|
-
"originalValue": "hsl(
|
|
1343
|
+
"value": "hsl(359, 45%, 49%)",
|
|
1344
|
+
"originalValue": "hsl(359, 45%, 49%)"
|
|
732
1345
|
},
|
|
733
1346
|
"color.red.dark.solid": {
|
|
734
1347
|
"cssName": "--red-solid",
|
|
735
1348
|
"type": "color",
|
|
736
1349
|
"mode": "dark",
|
|
737
|
-
"value": "hsl(358, 75
|
|
738
|
-
"originalValue": "hsl(358, 75
|
|
1350
|
+
"value": "hsl(358, 75%, 59%)",
|
|
1351
|
+
"originalValue": "hsl(358, 75%, 59%)"
|
|
739
1352
|
},
|
|
740
1353
|
"color.red.dark.solidHover": {
|
|
741
1354
|
"cssName": "--red-solid-hover",
|
|
742
1355
|
"type": "color",
|
|
743
1356
|
"mode": "dark",
|
|
744
|
-
"value": "hsl(
|
|
745
|
-
"originalValue": "hsl(
|
|
1357
|
+
"value": "hsl(357, 67%, 53%)",
|
|
1358
|
+
"originalValue": "hsl(357, 67%, 53%)"
|
|
746
1359
|
},
|
|
747
1360
|
"color.red.dark.textSecondary": {
|
|
748
1361
|
"cssName": "--red-text-secondary",
|
|
749
1362
|
"type": "color",
|
|
750
1363
|
"mode": "dark",
|
|
751
|
-
"value": "hsl(
|
|
752
|
-
"originalValue": "hsl(
|
|
1364
|
+
"value": "hsl(2, 100%, 77%)",
|
|
1365
|
+
"originalValue": "hsl(2, 100%, 77%)"
|
|
753
1366
|
},
|
|
754
1367
|
"color.red.dark.text": {
|
|
755
1368
|
"cssName": "--red-text",
|
|
756
1369
|
"type": "color",
|
|
757
1370
|
"mode": "dark",
|
|
758
|
-
"value": "hsl(
|
|
759
|
-
"originalValue": "hsl(
|
|
1371
|
+
"value": "hsl(5, 100%, 91%)",
|
|
1372
|
+
"originalValue": "hsl(5, 100%, 91%)"
|
|
760
1373
|
},
|
|
761
1374
|
"color.yellow.light.bg": {
|
|
762
1375
|
"cssName": "--yellow-bg",
|
|
763
1376
|
"type": "color",
|
|
764
1377
|
"mode": "light",
|
|
765
|
-
"value": "hsl(
|
|
766
|
-
"originalValue": "hsl(
|
|
1378
|
+
"value": "hsl(45, 60%, 99%)",
|
|
1379
|
+
"originalValue": "hsl(45, 60%, 99%)"
|
|
767
1380
|
},
|
|
768
1381
|
"color.yellow.light.bgSecondary": {
|
|
769
1382
|
"cssName": "--yellow-bg-secondary",
|
|
770
1383
|
"type": "color",
|
|
771
1384
|
"mode": "light",
|
|
772
|
-
"value": "hsl(
|
|
773
|
-
"originalValue": "hsl(
|
|
1385
|
+
"value": "hsl(53, 100%, 96%)",
|
|
1386
|
+
"originalValue": "hsl(53, 100%, 96%)"
|
|
774
1387
|
},
|
|
775
1388
|
"color.yellow.light.componentBg": {
|
|
776
1389
|
"cssName": "--yellow-component-bg",
|
|
777
1390
|
"type": "color",
|
|
778
1391
|
"mode": "light",
|
|
779
|
-
"value": "hsl(
|
|
780
|
-
"originalValue": "hsl(
|
|
1392
|
+
"value": "hsl(52, 100%, 88%)",
|
|
1393
|
+
"originalValue": "hsl(52, 100%, 88%)"
|
|
781
1394
|
},
|
|
782
1395
|
"color.yellow.light.componentBgHover": {
|
|
783
1396
|
"cssName": "--yellow-component-bg-hover",
|
|
784
1397
|
"type": "color",
|
|
785
1398
|
"mode": "light",
|
|
786
|
-
"value": "hsl(
|
|
787
|
-
"originalValue": "hsl(
|
|
1399
|
+
"value": "hsl(50, 100%, 82%)",
|
|
1400
|
+
"originalValue": "hsl(50, 100%, 82%)"
|
|
788
1401
|
},
|
|
789
1402
|
"color.yellow.light.componentBgActive": {
|
|
790
1403
|
"cssName": "--yellow-component-bg-active",
|
|
791
1404
|
"type": "color",
|
|
792
1405
|
"mode": "light",
|
|
793
|
-
"value": "hsl(
|
|
794
|
-
"originalValue": "hsl(
|
|
1406
|
+
"value": "hsl(48, 100%, 76%)",
|
|
1407
|
+
"originalValue": "hsl(48, 100%, 76%)"
|
|
795
1408
|
},
|
|
796
1409
|
"color.yellow.light.line": {
|
|
797
1410
|
"cssName": "--yellow-line",
|
|
798
1411
|
"type": "color",
|
|
799
1412
|
"mode": "light",
|
|
800
|
-
"value": "hsl(
|
|
801
|
-
"originalValue": "hsl(
|
|
1413
|
+
"value": "hsl(46, 87%, 73%)",
|
|
1414
|
+
"originalValue": "hsl(46, 87%, 73%)"
|
|
802
1415
|
},
|
|
803
1416
|
"color.yellow.light.border": {
|
|
804
1417
|
"cssName": "--yellow-border",
|
|
805
1418
|
"type": "color",
|
|
806
1419
|
"mode": "light",
|
|
807
|
-
"value": "hsl(
|
|
808
|
-
"originalValue": "hsl(
|
|
1420
|
+
"value": "hsl(45, 67%, 67%)",
|
|
1421
|
+
"originalValue": "hsl(45, 67%, 67%)"
|
|
809
1422
|
},
|
|
810
1423
|
"color.yellow.light.borderHover": {
|
|
811
1424
|
"cssName": "--yellow-border-hover",
|
|
812
1425
|
"type": "color",
|
|
813
1426
|
"mode": "light",
|
|
814
|
-
"value": "hsl(
|
|
815
|
-
"originalValue": "hsl(
|
|
1427
|
+
"value": "hsl(44, 58%, 56%)",
|
|
1428
|
+
"originalValue": "hsl(44, 58%, 56%)"
|
|
816
1429
|
},
|
|
817
1430
|
"color.yellow.light.solidHover": {
|
|
818
1431
|
"cssName": "--yellow-solid-hover",
|
|
819
1432
|
"type": "color",
|
|
820
1433
|
"mode": "light",
|
|
821
|
-
"value": "
|
|
822
|
-
"originalValue": "
|
|
1434
|
+
"value": "hsl(45, 89%, 58%)",
|
|
1435
|
+
"originalValue": "hsl(45, 89%, 58%)",
|
|
1436
|
+
"description": "Primary-button hover yellow for light mode."
|
|
823
1437
|
},
|
|
824
1438
|
"color.yellow.light.textSecondary": {
|
|
825
1439
|
"cssName": "--yellow-text-secondary",
|
|
826
1440
|
"type": "color",
|
|
827
1441
|
"mode": "light",
|
|
828
|
-
"value": "hsl(
|
|
829
|
-
"originalValue": "hsl(
|
|
1442
|
+
"value": "hsl(46, 100%, 29%)",
|
|
1443
|
+
"originalValue": "hsl(46, 100%, 29%)"
|
|
830
1444
|
},
|
|
831
1445
|
"color.yellow.light.text": {
|
|
832
1446
|
"cssName": "--yellow-text",
|
|
833
1447
|
"type": "color",
|
|
834
1448
|
"mode": "light",
|
|
835
|
-
"value": "hsl(
|
|
836
|
-
"originalValue": "hsl(
|
|
1449
|
+
"value": "hsl(43, 32%, 21%)",
|
|
1450
|
+
"originalValue": "hsl(43, 32%, 21%)"
|
|
837
1451
|
},
|
|
838
1452
|
"color.yellow.dark.bg": {
|
|
839
1453
|
"cssName": "--yellow-bg",
|
|
840
1454
|
"type": "color",
|
|
841
1455
|
"mode": "dark",
|
|
842
|
-
"value": "hsl(
|
|
843
|
-
"originalValue": "hsl(
|
|
1456
|
+
"value": "hsl(0, 0%, 0%)",
|
|
1457
|
+
"originalValue": "hsl(0, 0%, 0%)"
|
|
844
1458
|
},
|
|
845
1459
|
"color.yellow.dark.bgSecondary": {
|
|
846
1460
|
"cssName": "--yellow-bg-secondary",
|
|
847
1461
|
"type": "color",
|
|
848
1462
|
"mode": "dark",
|
|
849
|
-
"value": "hsl(
|
|
850
|
-
"originalValue": "hsl(
|
|
1463
|
+
"value": "hsl(38, 35%, 6%)",
|
|
1464
|
+
"originalValue": "hsl(38, 35%, 6%)"
|
|
851
1465
|
},
|
|
852
1466
|
"color.yellow.dark.componentBg": {
|
|
853
1467
|
"cssName": "--yellow-component-bg",
|
|
854
1468
|
"type": "color",
|
|
855
1469
|
"mode": "dark",
|
|
856
|
-
"value": "hsl(45,
|
|
857
|
-
"originalValue": "hsl(45,
|
|
1470
|
+
"value": "hsl(45, 70%, 9%)",
|
|
1471
|
+
"originalValue": "hsl(45, 70%, 9%)"
|
|
858
1472
|
},
|
|
859
1473
|
"color.yellow.dark.componentBgHover": {
|
|
860
1474
|
"cssName": "--yellow-component-bg-hover",
|
|
861
1475
|
"type": "color",
|
|
862
1476
|
"mode": "dark",
|
|
863
|
-
"value": "hsl(
|
|
864
|
-
"originalValue": "hsl(
|
|
1477
|
+
"value": "hsl(44, 100%, 11%)",
|
|
1478
|
+
"originalValue": "hsl(44, 100%, 11%)"
|
|
865
1479
|
},
|
|
866
1480
|
"color.yellow.dark.componentBgActive": {
|
|
867
1481
|
"cssName": "--yellow-component-bg-active",
|
|
868
1482
|
"type": "color",
|
|
869
1483
|
"mode": "dark",
|
|
870
|
-
"value": "hsl(
|
|
871
|
-
"originalValue": "hsl(
|
|
1484
|
+
"value": "hsl(44, 100%, 14%)",
|
|
1485
|
+
"originalValue": "hsl(44, 100%, 14%)"
|
|
872
1486
|
},
|
|
873
1487
|
"color.yellow.dark.line": {
|
|
874
1488
|
"cssName": "--yellow-line",
|
|
875
1489
|
"type": "color",
|
|
876
1490
|
"mode": "dark",
|
|
877
|
-
"value": "hsl(
|
|
878
|
-
"originalValue": "hsl(
|
|
1491
|
+
"value": "hsl(45, 71%, 19%)",
|
|
1492
|
+
"originalValue": "hsl(45, 71%, 19%)"
|
|
879
1493
|
},
|
|
880
1494
|
"color.yellow.dark.border": {
|
|
881
1495
|
"cssName": "--yellow-border",
|
|
882
1496
|
"type": "color",
|
|
883
1497
|
"mode": "dark",
|
|
884
|
-
"value": "hsl(
|
|
885
|
-
"originalValue": "hsl(
|
|
1498
|
+
"value": "hsl(45, 53%, 26%)",
|
|
1499
|
+
"originalValue": "hsl(45, 53%, 26%)"
|
|
886
1500
|
},
|
|
887
1501
|
"color.yellow.dark.borderHover": {
|
|
888
1502
|
"cssName": "--yellow-border-hover",
|
|
889
1503
|
"type": "color",
|
|
890
1504
|
"mode": "dark",
|
|
891
|
-
"value": "hsl(
|
|
892
|
-
"originalValue": "hsl(
|
|
1505
|
+
"value": "hsl(45, 49%, 34%)",
|
|
1506
|
+
"originalValue": "hsl(45, 49%, 34%)"
|
|
893
1507
|
},
|
|
894
1508
|
"color.yellow.dark.solidHover": {
|
|
895
1509
|
"cssName": "--yellow-solid-hover",
|
|
896
1510
|
"type": "color",
|
|
897
1511
|
"mode": "dark",
|
|
898
|
-
"value": "
|
|
899
|
-
"originalValue": "
|
|
1512
|
+
"value": "hsl(45, 89%, 58%)",
|
|
1513
|
+
"originalValue": "hsl(45, 89%, 58%)",
|
|
1514
|
+
"description": "Primary-button hover yellow for dark mode."
|
|
900
1515
|
},
|
|
901
1516
|
"color.yellow.dark.textSecondary": {
|
|
902
1517
|
"cssName": "--yellow-text-secondary",
|
|
903
1518
|
"type": "color",
|
|
904
1519
|
"mode": "dark",
|
|
905
|
-
"value": "hsl(
|
|
906
|
-
"originalValue": "hsl(
|
|
1520
|
+
"value": "hsl(45, 100%, 64%)",
|
|
1521
|
+
"originalValue": "hsl(45, 100%, 64%)"
|
|
907
1522
|
},
|
|
908
1523
|
"color.yellow.dark.text": {
|
|
909
1524
|
"cssName": "--yellow-text",
|
|
910
1525
|
"type": "color",
|
|
911
1526
|
"mode": "dark",
|
|
912
|
-
"value": "hsl(
|
|
913
|
-
"originalValue": "hsl(
|
|
1527
|
+
"value": "hsl(46, 89%, 86%)",
|
|
1528
|
+
"originalValue": "hsl(46, 89%, 86%)"
|
|
914
1529
|
},
|
|
915
1530
|
"color.transfer.light.lime3": {
|
|
916
1531
|
"cssName": "--lime-3",
|
|
@@ -972,8 +1587,8 @@
|
|
|
972
1587
|
"cssName": "--shadow-focus",
|
|
973
1588
|
"type": "string",
|
|
974
1589
|
"mode": "global",
|
|
975
|
-
"value": "0 0 0 3px
|
|
976
|
-
"originalValue": "0 0 0 3px
|
|
1590
|
+
"value": "0 0 0 3px hsla(47, 100%, 65%, 0.35)",
|
|
1591
|
+
"originalValue": "0 0 0 3px {elevation.focusColor}"
|
|
977
1592
|
},
|
|
978
1593
|
"typography.fontFamily.sans": {
|
|
979
1594
|
"cssName": "--font-sans",
|
|
@@ -1308,22 +1923,22 @@
|
|
|
1308
1923
|
"cssName": "--app-bg",
|
|
1309
1924
|
"type": "color",
|
|
1310
1925
|
"mode": "light",
|
|
1311
|
-
"value": "
|
|
1312
|
-
"originalValue": "
|
|
1926
|
+
"value": "hsl(0, 0%, 100%)",
|
|
1927
|
+
"originalValue": "hsl(0, 0%, 100%)"
|
|
1313
1928
|
},
|
|
1314
1929
|
"surface.light.navBg": {
|
|
1315
1930
|
"cssName": "--nav-bg",
|
|
1316
1931
|
"type": "color",
|
|
1317
1932
|
"mode": "light",
|
|
1318
|
-
"value": "
|
|
1319
|
-
"originalValue": "
|
|
1933
|
+
"value": "hsl(0, 0%, 100%)",
|
|
1934
|
+
"originalValue": "hsl(0, 0%, 100%)"
|
|
1320
1935
|
},
|
|
1321
1936
|
"surface.light.navItemBg": {
|
|
1322
1937
|
"cssName": "--nav-item-bg",
|
|
1323
1938
|
"type": "color",
|
|
1324
1939
|
"mode": "light",
|
|
1325
|
-
"value": "
|
|
1326
|
-
"originalValue": "
|
|
1940
|
+
"value": "hsla(0, 0%, 0%, 0)",
|
|
1941
|
+
"originalValue": "hsla(0, 0%, 0%, 0)"
|
|
1327
1942
|
},
|
|
1328
1943
|
"surface.light.navItemBgHover": {
|
|
1329
1944
|
"cssName": "--nav-item-bg-hover",
|
|
@@ -1343,8 +1958,8 @@
|
|
|
1343
1958
|
"cssName": "--list-item-bg",
|
|
1344
1959
|
"type": "color",
|
|
1345
1960
|
"mode": "light",
|
|
1346
|
-
"value": "
|
|
1347
|
-
"originalValue": "
|
|
1961
|
+
"value": "hsla(0, 0%, 0%, 0)",
|
|
1962
|
+
"originalValue": "hsla(0, 0%, 0%, 0)"
|
|
1348
1963
|
},
|
|
1349
1964
|
"surface.light.listItemBgHover": {
|
|
1350
1965
|
"cssName": "--list-item-bg-hover",
|
|
@@ -1378,8 +1993,8 @@
|
|
|
1378
1993
|
"cssName": "--segmented-control-bg-active",
|
|
1379
1994
|
"type": "color",
|
|
1380
1995
|
"mode": "light",
|
|
1381
|
-
"value": "
|
|
1382
|
-
"originalValue": "
|
|
1996
|
+
"value": "hsl(0, 0%, 100%)",
|
|
1997
|
+
"originalValue": "hsl(0, 0%, 100%)"
|
|
1383
1998
|
},
|
|
1384
1999
|
"surface.light.transferListItemCompletingBg": {
|
|
1385
2000
|
"cssName": "--transfer-list-item-completing-bg",
|
|
@@ -1427,8 +2042,8 @@
|
|
|
1427
2042
|
"cssName": "--transparent",
|
|
1428
2043
|
"type": "color",
|
|
1429
2044
|
"mode": "light",
|
|
1430
|
-
"value": "
|
|
1431
|
-
"originalValue": "
|
|
2045
|
+
"value": "hsla(0, 0%, 0%, 0)",
|
|
2046
|
+
"originalValue": "hsla(0, 0%, 0%, 0)"
|
|
1432
2047
|
},
|
|
1433
2048
|
"surface.light.overlayInline": {
|
|
1434
2049
|
"cssName": "--overlay-inline",
|
|
@@ -1448,8 +2063,8 @@
|
|
|
1448
2063
|
"cssName": "--html-bg",
|
|
1449
2064
|
"type": "color",
|
|
1450
2065
|
"mode": "dark",
|
|
1451
|
-
"value": "
|
|
1452
|
-
"originalValue": "
|
|
2066
|
+
"value": "hsl(0, 0%, 0%)",
|
|
2067
|
+
"originalValue": "hsl(0, 0%, 0%)"
|
|
1453
2068
|
},
|
|
1454
2069
|
"surface.dark.appBg": {
|
|
1455
2070
|
"cssName": "--app-bg",
|
|
@@ -1469,8 +2084,8 @@
|
|
|
1469
2084
|
"cssName": "--nav-item-bg",
|
|
1470
2085
|
"type": "color",
|
|
1471
2086
|
"mode": "dark",
|
|
1472
|
-
"value": "
|
|
1473
|
-
"originalValue": "
|
|
2087
|
+
"value": "hsla(0, 0%, 0%, 0)",
|
|
2088
|
+
"originalValue": "hsla(0, 0%, 0%, 0)"
|
|
1474
2089
|
},
|
|
1475
2090
|
"surface.dark.navItemBgHover": {
|
|
1476
2091
|
"cssName": "--nav-item-bg-hover",
|
|
@@ -1490,8 +2105,8 @@
|
|
|
1490
2105
|
"cssName": "--list-item-bg",
|
|
1491
2106
|
"type": "color",
|
|
1492
2107
|
"mode": "dark",
|
|
1493
|
-
"value": "
|
|
1494
|
-
"originalValue": "
|
|
2108
|
+
"value": "hsla(0, 0%, 0%, 0)",
|
|
2109
|
+
"originalValue": "hsla(0, 0%, 0%, 0)"
|
|
1495
2110
|
},
|
|
1496
2111
|
"surface.dark.listItemBgHover": {
|
|
1497
2112
|
"cssName": "--list-item-bg-hover",
|
|
@@ -1588,15 +2203,15 @@
|
|
|
1588
2203
|
"cssName": "--shadow-color",
|
|
1589
2204
|
"type": "color",
|
|
1590
2205
|
"mode": "dark",
|
|
1591
|
-
"value": "
|
|
1592
|
-
"originalValue": "
|
|
2206
|
+
"value": "hsl(0, 0%, 0%)",
|
|
2207
|
+
"originalValue": "hsl(0, 0%, 0%)"
|
|
1593
2208
|
},
|
|
1594
2209
|
"surface.dark.shadow": {
|
|
1595
2210
|
"cssName": "--shadow",
|
|
1596
2211
|
"type": "color",
|
|
1597
2212
|
"mode": "dark",
|
|
1598
|
-
"value": "
|
|
1599
|
-
"originalValue": "
|
|
2213
|
+
"value": "hsl(0, 0%, 0%)",
|
|
2214
|
+
"originalValue": "hsl(0, 0%, 0%)"
|
|
1600
2215
|
},
|
|
1601
2216
|
"surface.dark.shadowSm": {
|
|
1602
2217
|
"cssName": "--shadow-sm",
|