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