1 | declare const Tokens: {
|
2 | "tokens":{"background-colors": [
|
3 | {
|
4 | type: "color";
|
5 | category: "background-color";
|
6 | value: "rgb(18, 28, 45)";
|
7 | comment: "Default background color for any container.";
|
8 | name: "color-background";
|
9 | altValue: "#121C2D";
|
10 | },
|
11 | {
|
12 | type: "color";
|
13 | category: "background-color";
|
14 | value: "rgb(20, 176, 83)";
|
15 | comment: "Background color used to represent an entity or person as \"available\".";
|
16 | name: "color-background-available";
|
17 | altValue: "#14B053";
|
18 | },
|
19 | {
|
20 | type: "color";
|
21 | category: "background-color";
|
22 | value: "rgb(13, 19, 28)";
|
23 | comment: "Background color used for the main page body.";
|
24 | name: "color-background-body";
|
25 | altValue: "#0D131C";
|
26 | },
|
27 | {
|
28 | type: "color";
|
29 | category: "background-color";
|
30 | value: "rgb(18, 28, 45)";
|
31 | comment: "Inverse background color used for the main page body.";
|
32 | name: "color-background-body-inverse";
|
33 | altValue: "#121C2D";
|
34 | },
|
35 | {
|
36 | type: "color";
|
37 | category: "background-color";
|
38 | value: "rgb(18, 28, 45)";
|
39 | comment: "Primary brand background, accessible with inverse text.";
|
40 | name: "color-background-brand";
|
41 | altValue: "#121C2D";
|
42 | },
|
43 | {
|
44 | type: "color";
|
45 | category: "background-color";
|
46 | value: "rgb(242, 190, 90)";
|
47 | comment: "Brand accent background color representing Twilio.";
|
48 | name: "color-background-brand-10";
|
49 | altValue: "#F2BE5A";
|
50 | },
|
51 | {
|
52 | type: "color";
|
53 | category: "background-color";
|
54 | value: "rgb(81, 169, 227)";
|
55 | comment: "Brand accent background color representing Sendgrid.";
|
56 | name: "color-background-brand-20";
|
57 | altValue: "#51A9E3";
|
58 | },
|
59 | {
|
60 | type: "color";
|
61 | category: "background-color";
|
62 | value: "rgb(106, 221, 178)";
|
63 | comment: "Brand accent background color representing Segment.";
|
64 | name: "color-background-brand-30";
|
65 | altValue: "#6ADDB2";
|
66 | },
|
67 | {
|
68 | type: "color";
|
69 | category: "background-color";
|
70 | value: "rgb(242, 47, 70)";
|
71 | comment: "Highlight brand background, accessible with black text.";
|
72 | name: "color-background-brand-highlight";
|
73 | altValue: "#F22F46";
|
74 | },
|
75 | {
|
76 | type: "color";
|
77 | category: "background-color";
|
78 | value: "rgba(242, 47, 70, 0.1)";
|
79 | comment: "Weakest background color used for brand highlights.";
|
80 | name: "color-background-brand-highlight-weakest";
|
81 | altValue: "#F22F461A";
|
82 | },
|
83 | {
|
84 | type: "color";
|
85 | category: "background-color";
|
86 | value: "rgb(31, 48, 76)";
|
87 | comment: "Strong primary brand background, accessible with inverse text.";
|
88 | name: "color-background-brand-strong";
|
89 | altValue: "#1F304C";
|
90 | },
|
91 | {
|
92 | type: "color";
|
93 | category: "background-color";
|
94 | value: "rgb(18, 28, 45)";
|
95 | comment: "Stronger primary brand background, accessible with inverse text.";
|
96 | name: "color-background-brand-stronger";
|
97 | altValue: "#121C2D";
|
98 | },
|
99 | {
|
100 | type: "color";
|
101 | category: "background-color";
|
102 | value: "rgb(244, 124, 34)";
|
103 | comment: "Background color used to represent an entity or person as \"busy\".";
|
104 | name: "color-background-busy";
|
105 | altValue: "#F47C22";
|
106 | },
|
107 | {
|
108 | type: "color";
|
109 | category: "background-color";
|
110 | value: "rgb(18, 28, 45)";
|
111 | comment: "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens.";
|
112 | name: "color-background-decorative-10-weakest";
|
113 | altValue: "#121C2D";
|
114 | },
|
115 | {
|
116 | type: "color";
|
117 | category: "background-color";
|
118 | value: "rgb(3, 11, 93)";
|
119 | comment: "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens.";
|
120 | name: "color-background-decorative-20-weakest";
|
121 | altValue: "#030B5D";
|
122 | },
|
123 | {
|
124 | type: "color";
|
125 | category: "background-color";
|
126 | value: "rgb(5, 41, 18)";
|
127 | comment: "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens.";
|
128 | name: "color-background-decorative-30-weakest";
|
129 | altValue: "#052912";
|
130 | },
|
131 | {
|
132 | type: "color";
|
133 | category: "background-color";
|
134 | value: "rgb(56, 14, 120)";
|
135 | comment: "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens.";
|
136 | name: "color-background-decorative-40-weakest";
|
137 | altValue: "#380E78";
|
138 | },
|
139 | {
|
140 | type: "color";
|
141 | category: "background-color";
|
142 | value: "rgb(214, 31, 31)";
|
143 | comment: "Background color used for destructive actions or highlights.";
|
144 | name: "color-background-destructive";
|
145 | altValue: "#D61F1F";
|
146 | },
|
147 | {
|
148 | type: "color";
|
149 | category: "background-color";
|
150 | value: "rgb(246, 177, 177)";
|
151 | comment: "Strong background color used for destructive actions or highlights.";
|
152 | name: "color-background-destructive-strong";
|
153 | altValue: "#F6B1B1";
|
154 | },
|
155 | {
|
156 | type: "color";
|
157 | category: "background-color";
|
158 | value: "rgb(252, 207, 207)";
|
159 | comment: "Stronger background color used for destructive actions or highlights.";
|
160 | name: "color-background-destructive-stronger";
|
161 | altValue: "#FCCFCF";
|
162 | },
|
163 | {
|
164 | type: "color";
|
165 | category: "background-color";
|
166 | value: "rgb(254, 236, 236)";
|
167 | comment: "Strongest background color used for destructive actions or highlights.";
|
168 | name: "color-background-destructive-strongest";
|
169 | altValue: "#FEECEC";
|
170 | },
|
171 | {
|
172 | type: "color";
|
173 | category: "background-color";
|
174 | value: "rgb(57, 71, 98)";
|
175 | comment: "Weak background color used for destructive actions or highlights.";
|
176 | name: "color-background-destructive-weak";
|
177 | altValue: "#394762";
|
178 | },
|
179 | {
|
180 | type: "color";
|
181 | category: "background-color";
|
182 | value: "rgb(31, 48, 76)";
|
183 | comment: "Weaker background color used for destructive actions or highlights.";
|
184 | name: "color-background-destructive-weaker";
|
185 | altValue: "#1F304C";
|
186 | },
|
187 | {
|
188 | type: "color";
|
189 | category: "background-color";
|
190 | value: "rgb(18, 28, 45)";
|
191 | comment: "Weakest background color used for destructive actions or highlights.";
|
192 | name: "color-background-destructive-weakest";
|
193 | altValue: "#121C2D";
|
194 | },
|
195 | {
|
196 | type: "color";
|
197 | category: "background-color";
|
198 | value: "rgb(214, 31, 31)";
|
199 | comment: "Error background color.";
|
200 | name: "color-background-error";
|
201 | altValue: "#D61F1F";
|
202 | },
|
203 | {
|
204 | type: "color";
|
205 | category: "background-color";
|
206 | value: "rgb(245, 138, 138)";
|
207 | comment: "Strong error background color.";
|
208 | name: "color-background-error-strong";
|
209 | altValue: "#F58A8A";
|
210 | },
|
211 | {
|
212 | type: "color";
|
213 | category: "background-color";
|
214 | value: "rgb(252, 207, 207)";
|
215 | comment: "Stronger error background color.";
|
216 | name: "color-background-error-stronger";
|
217 | altValue: "#FCCFCF";
|
218 | },
|
219 | {
|
220 | type: "color";
|
221 | category: "background-color";
|
222 | value: "rgb(254, 236, 236)";
|
223 | comment: "Strongest error background color.";
|
224 | name: "color-background-error-strongest";
|
225 | altValue: "#FEECEC";
|
226 | },
|
227 | {
|
228 | type: "color";
|
229 | category: "background-color";
|
230 | value: "rgb(49, 12, 12)";
|
231 | comment: "Weakest error background color.";
|
232 | name: "color-background-error-weakest";
|
233 | altValue: "#310C0C";
|
234 | },
|
235 | {
|
236 | type: "color";
|
237 | category: "background-color";
|
238 | value: "rgb(31, 48, 76)";
|
239 | comment: "Inverse background color for any container. Must be used on color-background-body-inverse.";
|
240 | name: "color-background-inverse";
|
241 | altValue: "#1F304C";
|
242 | },
|
243 | {
|
244 | type: "color";
|
245 | category: "background-color";
|
246 | value: "rgb(57, 71, 98)";
|
247 | comment: "Strong inverse background color for any container. Must be used on color-background-body-inverse.";
|
248 | name: "color-background-inverse-strong";
|
249 | altValue: "#394762";
|
250 | },
|
251 | {
|
252 | type: "color";
|
253 | category: "background-color";
|
254 | value: "rgb(57, 71, 98)";
|
255 | comment: "Stronger inverse background color for any container. Must be used on color-background-body-inverse.";
|
256 | name: "color-background-inverse-stronger";
|
257 | altValue: "#394762";
|
258 | },
|
259 | {
|
260 | type: "color";
|
261 | category: "background-color";
|
262 | value: "rgb(255, 255, 255)";
|
263 | comment: "Strongest inverse background color used for containers.";
|
264 | name: "color-background-inverse-strongest";
|
265 | altValue: "#FFFFFF";
|
266 | },
|
267 | {
|
268 | type: "color";
|
269 | category: "background-color";
|
270 | value: "rgb(3, 11, 93)";
|
271 | comment: "Weakest neutral background color.";
|
272 | name: "color-background-neutral-weakest";
|
273 | altValue: "#030B5D";
|
274 | },
|
275 | {
|
276 | type: "color";
|
277 | category: "background-color";
|
278 | value: "rgb(56, 14, 120)";
|
279 | comment: "Background color for indicating a new status.";
|
280 | name: "color-background-new";
|
281 | altValue: "#380E78";
|
282 | },
|
283 | {
|
284 | type: "color";
|
285 | category: "background-color";
|
286 | value: "rgb(18, 28, 45)";
|
287 | comment: "Weakest background color for indicating a new status.";
|
288 | name: "color-background-new-weakest";
|
289 | altValue: "#121C2D";
|
290 | },
|
291 | {
|
292 | type: "color";
|
293 | category: "background-color";
|
294 | value: "rgb(174, 178, 193)";
|
295 | comment: "Color used to represent an entity or person as \"offline\".";
|
296 | name: "color-background-offline";
|
297 | altValue: "#AEB2C1";
|
298 | },
|
299 | {
|
300 | type: "color";
|
301 | category: "background-color";
|
302 | value: "rgba(18, 28, 45, 0.9)";
|
303 | comment: "Default background for overlays.";
|
304 | name: "color-background-overlay";
|
305 | altValue: "#121C2DE6";
|
306 | },
|
307 | {
|
308 | type: "color";
|
309 | category: "background-color";
|
310 | value: "rgb(2, 99, 224)";
|
311 | comment: "Background for primary actions or highlights.";
|
312 | name: "color-background-primary";
|
313 | altValue: "#0263E0";
|
314 | },
|
315 | {
|
316 | type: "color";
|
317 | category: "background-color";
|
318 | value: "rgb(153, 205, 255)";
|
319 | comment: "Strong background for primary actions or highlights.";
|
320 | name: "color-background-primary-strong";
|
321 | altValue: "#99CDFF";
|
322 | },
|
323 | {
|
324 | type: "color";
|
325 | category: "background-color";
|
326 | value: "rgb(204, 228, 255)";
|
327 | comment: "Stronger background for primary actions or highlights.";
|
328 | name: "color-background-primary-stronger";
|
329 | altValue: "#CCE4FF";
|
330 | },
|
331 | {
|
332 | type: "color";
|
333 | category: "background-color";
|
334 | value: "rgb(235, 244, 255)";
|
335 | comment: "Strongest background for primary actions or highlights.";
|
336 | name: "color-background-primary-strongest";
|
337 | altValue: "#EBF4FF";
|
338 | },
|
339 | {
|
340 | type: "color";
|
341 | category: "background-color";
|
342 | value: "rgb(57, 71, 98)";
|
343 | comment: "Weak background for primary actions or highlights.";
|
344 | name: "color-background-primary-weak";
|
345 | altValue: "#394762";
|
346 | },
|
347 | {
|
348 | type: "color";
|
349 | category: "background-color";
|
350 | value: "rgb(31, 48, 76)";
|
351 | comment: "Weaker background for primary actions or highlights.";
|
352 | name: "color-background-primary-weaker";
|
353 | altValue: "#1F304C";
|
354 | },
|
355 | {
|
356 | type: "color";
|
357 | category: "background-color";
|
358 | value: "rgb(18, 28, 45)";
|
359 | comment: "Weakest background for primary actions or highlights.";
|
360 | name: "color-background-primary-weakest";
|
361 | altValue: "#121C2D";
|
362 | },
|
363 | {
|
364 | type: "color";
|
365 | category: "background-color";
|
366 | value: "rgb(235, 86, 86)";
|
367 | comment: "Background color used to represent required form fields.";
|
368 | name: "color-background-required";
|
369 | altValue: "#EB5656";
|
370 | },
|
371 | {
|
372 | type: "color";
|
373 | category: "background-color";
|
374 | value: "rgb(18, 28, 45)";
|
375 | comment: "Background color for alternative striped rows.";
|
376 | name: "color-background-row-striped";
|
377 | altValue: "#121C2D";
|
378 | },
|
379 | {
|
380 | type: "color";
|
381 | category: "background-color";
|
382 | value: "rgb(31, 48, 76)";
|
383 | comment: "Strong default background color.";
|
384 | name: "color-background-strong";
|
385 | altValue: "#1F304C";
|
386 | },
|
387 | {
|
388 | type: "color";
|
389 | category: "background-color";
|
390 | value: "rgb(96, 107, 133)";
|
391 | comment: "Stronger default background color.";
|
392 | name: "color-background-stronger";
|
393 | altValue: "#606B85";
|
394 | },
|
395 | {
|
396 | type: "color";
|
397 | category: "background-color";
|
398 | value: "rgb(225, 227, 234)";
|
399 | comment: "Strongest default background color.";
|
400 | name: "color-background-strongest";
|
401 | altValue: "#E1E3EA";
|
402 | },
|
403 | {
|
404 | type: "color";
|
405 | category: "background-color";
|
406 | value: "rgb(18, 28, 45)";
|
407 | comment: "Subaccount background color.";
|
408 | name: "color-background-subaccount";
|
409 | altValue: "#121C2D";
|
410 | },
|
411 | {
|
412 | type: "color";
|
413 | category: "background-color";
|
414 | value: "rgb(20, 176, 83)";
|
415 | comment: "Success background color.";
|
416 | name: "color-background-success";
|
417 | altValue: "#14B053";
|
418 | },
|
419 | {
|
420 | type: "color";
|
421 | category: "background-color";
|
422 | value: "rgb(5, 41, 18)";
|
423 | comment: "Weakest success background color.";
|
424 | name: "color-background-success-weakest";
|
425 | altValue: "#052912";
|
426 | },
|
427 | {
|
428 | type: "color";
|
429 | category: "background-color";
|
430 | value: "rgb(5, 41, 18)";
|
431 | comment: "Trial account background color.";
|
432 | name: "color-background-trial";
|
433 | altValue: "#052912";
|
434 | },
|
435 | {
|
436 | type: "color";
|
437 | category: "background-color";
|
438 | value: "rgb(214, 31, 31)";
|
439 | comment: "Color used to represent an entity or person as \"unavailable\".";
|
440 | name: "color-background-unavailable";
|
441 | altValue: "#D61F1F";
|
442 | },
|
443 | {
|
444 | type: "color";
|
445 | category: "background-color";
|
446 | value: "rgb(88, 23, 189)";
|
447 | comment: "User avatar background color.";
|
448 | name: "color-background-user";
|
449 | altValue: "#5817BD";
|
450 | },
|
451 | {
|
452 | type: "color";
|
453 | category: "background-color";
|
454 | value: "rgb(244, 124, 34)";
|
455 | comment: "Warning background color";
|
456 | name: "color-background-warning";
|
457 | altValue: "#F47C22";
|
458 | },
|
459 | {
|
460 | type: "color";
|
461 | category: "background-color";
|
462 | value: "rgb(64, 19, 15)";
|
463 | comment: "Weakest warning background color.";
|
464 | name: "color-background-warning-weakest";
|
465 | altValue: "#40130F";
|
466 | },
|
467 | {
|
468 | type: "color";
|
469 | category: "background-color";
|
470 | value: "rgb(18, 28, 45)";
|
471 | comment: "Weak default background color.";
|
472 | name: "color-background-weak";
|
473 | altValue: "#121C2D";
|
474 | }
|
475 | ]
|
476 | "border-colors": [
|
477 | {
|
478 | type: "color";
|
479 | category: "border-color";
|
480 | value: "rgb(96, 107, 133)";
|
481 | comment: "Default border color";
|
482 | name: "color-border";
|
483 | altValue: "#606B85";
|
484 | },
|
485 | {
|
486 | type: "color";
|
487 | category: "border-color";
|
488 | value: "rgb(31, 48, 76)";
|
489 | comment: "Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens.";
|
490 | name: "color-border-decorative-10-weaker";
|
491 | altValue: "#1F304C";
|
492 | },
|
493 | {
|
494 | type: "color";
|
495 | category: "border-color";
|
496 | value: "rgb(0, 20, 137)";
|
497 | comment: "Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens.";
|
498 | name: "color-border-decorative-20-weaker";
|
499 | altValue: "#001489";
|
500 | },
|
501 | {
|
502 | type: "color";
|
503 | category: "border-color";
|
504 | value: "rgb(13, 58, 31)";
|
505 | comment: "Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens.";
|
506 | name: "color-border-decorative-30-weaker";
|
507 | altValue: "#0D3A1F";
|
508 | },
|
509 | {
|
510 | type: "color";
|
511 | category: "border-color";
|
512 | value: "rgb(88, 23, 189)";
|
513 | comment: "Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens.";
|
514 | name: "color-border-decorative-40-weaker";
|
515 | altValue: "#5817BD";
|
516 | },
|
517 | {
|
518 | type: "color";
|
519 | category: "border-color";
|
520 | value: "rgb(214, 31, 31)";
|
521 | comment: "Destructive border color";
|
522 | name: "color-border-destructive";
|
523 | altValue: "#D61F1F";
|
524 | },
|
525 | {
|
526 | type: "color";
|
527 | category: "border-color";
|
528 | value: "rgb(246, 177, 177)";
|
529 | comment: "Destructive focus border color";
|
530 | name: "color-border-destructive-strong";
|
531 | altValue: "#F6B1B1";
|
532 | },
|
533 | {
|
534 | type: "color";
|
535 | category: "border-color";
|
536 | value: "rgb(252, 207, 207)";
|
537 | comment: "Stronger destructive hover border color";
|
538 | name: "color-border-destructive-stronger";
|
539 | altValue: "#FCCFCF";
|
540 | },
|
541 | {
|
542 | type: "color";
|
543 | category: "border-color";
|
544 | value: "rgb(254, 236, 236)";
|
545 | comment: "Strongest destructive hover border color";
|
546 | name: "color-border-destructive-strongest";
|
547 | altValue: "#FEECEC";
|
548 | },
|
549 | {
|
550 | type: "color";
|
551 | category: "border-color";
|
552 | value: "rgb(57, 71, 98)";
|
553 | comment: "Destructive focus border color";
|
554 | name: "color-border-destructive-weak";
|
555 | altValue: "#394762";
|
556 | },
|
557 | {
|
558 | type: "color";
|
559 | category: "border-color";
|
560 | value: "rgb(31, 48, 76)";
|
561 | comment: "Destructive focus border color";
|
562 | name: "color-border-destructive-weaker";
|
563 | altValue: "#1F304C";
|
564 | },
|
565 | {
|
566 | type: "color";
|
567 | category: "border-color";
|
568 | value: "rgb(18, 28, 45)";
|
569 | comment: "Destructive focus border color";
|
570 | name: "color-border-destructive-weakest";
|
571 | altValue: "#121C2D";
|
572 | },
|
573 | {
|
574 | type: "color";
|
575 | category: "border-color";
|
576 | value: "rgb(214, 31, 31)";
|
577 | comment: "Error border color";
|
578 | name: "color-border-error";
|
579 | altValue: "#D61F1F";
|
580 | },
|
581 | {
|
582 | type: "color";
|
583 | category: "border-color";
|
584 | value: "rgb(246, 177, 177)";
|
585 | comment: "Strong error border color";
|
586 | name: "color-border-error-strong";
|
587 | altValue: "#F6B1B1";
|
588 | },
|
589 | {
|
590 | type: "color";
|
591 | category: "border-color";
|
592 | value: "rgb(252, 207, 207)";
|
593 | comment: "Stronger error border color";
|
594 | name: "color-border-error-stronger";
|
595 | altValue: "#FCCFCF";
|
596 | },
|
597 | {
|
598 | type: "color";
|
599 | category: "border-color";
|
600 | value: "rgb(254, 236, 236)";
|
601 | comment: "Strongest error border color";
|
602 | name: "color-border-error-strongest";
|
603 | altValue: "#FEECEC";
|
604 | },
|
605 | {
|
606 | type: "color";
|
607 | category: "border-color";
|
608 | value: "rgb(173, 17, 17)";
|
609 | comment: "Weak error border color";
|
610 | name: "color-border-error-weak";
|
611 | altValue: "#AD1111";
|
612 | },
|
613 | {
|
614 | type: "color";
|
615 | category: "border-color";
|
616 | value: "rgb(117, 12, 12)";
|
617 | comment: "Weaker error border color";
|
618 | name: "color-border-error-weaker";
|
619 | altValue: "#750C0C";
|
620 | },
|
621 | {
|
622 | type: "color";
|
623 | category: "border-color";
|
624 | value: "rgb(49, 12, 12)";
|
625 | comment: "Weakest error border color";
|
626 | name: "color-border-error-weakest";
|
627 | altValue: "#310C0C";
|
628 | },
|
629 | {
|
630 | type: "color";
|
631 | category: "border-color";
|
632 | value: "rgb(136, 145, 170)";
|
633 | comment: "Border on inverse backgrounds. Must be used on color-background-body-inverse.";
|
634 | uicontrol_contrast_pairing: ["color-background-body-inverse"];
|
635 | name: "color-border-inverse";
|
636 | altValue: "#8891AA";
|
637 | },
|
638 | {
|
639 | type: "color";
|
640 | category: "border-color";
|
641 | value: "rgb(225, 227, 234)";
|
642 | comment: "Strong border on inverse backgrounds. Must be used on color-background-body-inverse.";
|
643 | uicontrol_contrast_pairing: ["color-background-body-inverse"];
|
644 | name: "color-border-inverse-strong";
|
645 | altValue: "#E1E3EA";
|
646 | },
|
647 | {
|
648 | type: "color";
|
649 | category: "border-color";
|
650 | value: "rgb(244, 244, 246)";
|
651 | comment: "Stronger border on inverse backgrounds. Must be used on color-background-body-inverse.";
|
652 | uicontrol_contrast_pairing: ["color-background-body-inverse"];
|
653 | name: "color-border-inverse-stronger";
|
654 | altValue: "#F4F4F6";
|
655 | },
|
656 | {
|
657 | type: "color";
|
658 | category: "border-color";
|
659 | value: "rgb(255, 255, 255)";
|
660 | comment: "Strongest border on inverse backgrounds. Must be used on color-background-body-inverse.";
|
661 | uicontrol_contrast_pairing: ["color-background-body-inverse"];
|
662 | name: "color-border-inverse-strongest";
|
663 | altValue: "#FFFFFF";
|
664 | },
|
665 | {
|
666 | type: "color";
|
667 | category: "border-color";
|
668 | value: "rgb(57, 71, 98)";
|
669 | comment: "Weaker border on inverse backgrounds. Must be used on color-background-body-inverse.";
|
670 | name: "color-border-inverse-weaker";
|
671 | altValue: "#394762";
|
672 | },
|
673 | {
|
674 | type: "color";
|
675 | category: "border-color";
|
676 | value: "rgb(31, 48, 76)";
|
677 | comment: "Weakest border on inverse backgrounds. Must be used on color-background-body-inverse.";
|
678 | name: "color-border-inverse-weakest";
|
679 | altValue: "#1F304C";
|
680 | },
|
681 | {
|
682 | type: "color";
|
683 | category: "border-color";
|
684 | value: "rgb(2, 99, 224)";
|
685 | comment: "Neutral border color";
|
686 | name: "color-border-neutral";
|
687 | altValue: "#0263E0";
|
688 | },
|
689 | {
|
690 | type: "color";
|
691 | category: "border-color";
|
692 | value: "rgb(4, 60, 181)";
|
693 | comment: "Weak neutral border color";
|
694 | name: "color-border-neutral-weak";
|
695 | altValue: "#043CB5";
|
696 | },
|
697 | {
|
698 | type: "color";
|
699 | category: "border-color";
|
700 | value: "rgb(0, 20, 137)";
|
701 | comment: "Weaker neutral border color";
|
702 | name: "color-border-neutral-weaker";
|
703 | altValue: "#001489";
|
704 | },
|
705 | {
|
706 | type: "color";
|
707 | category: "border-color";
|
708 | value: "rgb(88, 23, 189)";
|
709 | comment: "Weaker border color for something designated as new";
|
710 | name: "color-border-new-weaker";
|
711 | altValue: "#5817BD";
|
712 | },
|
713 | {
|
714 | type: "color";
|
715 | category: "border-color";
|
716 | value: "rgb(2, 99, 224)";
|
717 | comment: "Primary border color";
|
718 | name: "color-border-primary";
|
719 | altValue: "#0263E0";
|
720 | },
|
721 | {
|
722 | type: "color";
|
723 | category: "border-color";
|
724 | value: "rgb(153, 205, 255)";
|
725 | comment: "Strong primary border color";
|
726 | name: "color-border-primary-strong";
|
727 | altValue: "#99CDFF";
|
728 | },
|
729 | {
|
730 | type: "color";
|
731 | category: "border-color";
|
732 | value: "rgb(204, 228, 255)";
|
733 | comment: "Stronger primary border color";
|
734 | name: "color-border-primary-stronger";
|
735 | altValue: "#CCE4FF";
|
736 | },
|
737 | {
|
738 | type: "color";
|
739 | category: "border-color";
|
740 | value: "rgb(235, 244, 255)";
|
741 | comment: "Strongest primary border color";
|
742 | name: "color-border-primary-strongest";
|
743 | altValue: "#EBF4FF";
|
744 | },
|
745 | {
|
746 | type: "color";
|
747 | category: "border-color";
|
748 | value: "rgb(57, 71, 98)";
|
749 | comment: "Weak primary border color";
|
750 | name: "color-border-primary-weak";
|
751 | altValue: "#394762";
|
752 | },
|
753 | {
|
754 | type: "color";
|
755 | category: "border-color";
|
756 | value: "rgb(31, 48, 76)";
|
757 | comment: "Weaker primary border color";
|
758 | name: "color-border-primary-weaker";
|
759 | altValue: "#1F304C";
|
760 | },
|
761 | {
|
762 | type: "color";
|
763 | category: "border-color";
|
764 | value: "rgb(18, 28, 45)";
|
765 | comment: "Weakest primary border color";
|
766 | name: "color-border-primary-weakest";
|
767 | altValue: "#121C2D";
|
768 | },
|
769 | {
|
770 | type: "color";
|
771 | category: "border-color";
|
772 | value: "rgb(136, 145, 170)";
|
773 | comment: "Strong border color";
|
774 | name: "color-border-strong";
|
775 | altValue: "#8891AA";
|
776 | },
|
777 | {
|
778 | type: "color";
|
779 | category: "border-color";
|
780 | value: "rgb(20, 176, 83)";
|
781 | comment: "Success border color";
|
782 | name: "color-border-success";
|
783 | altValue: "#14B053";
|
784 | },
|
785 | {
|
786 | type: "color";
|
787 | category: "border-color";
|
788 | value: "rgb(14, 124, 58)";
|
789 | comment: "Weak success border color";
|
790 | name: "color-border-success-weak";
|
791 | altValue: "#0E7C3A";
|
792 | },
|
793 | {
|
794 | type: "color";
|
795 | category: "border-color";
|
796 | value: "rgb(13, 58, 31)";
|
797 | comment: "Weaker success border color";
|
798 | name: "color-border-success-weaker";
|
799 | altValue: "#0D3A1F";
|
800 | },
|
801 | {
|
802 | type: "color";
|
803 | category: "border-color";
|
804 | value: "rgb(5, 41, 18)";
|
805 | comment: "Weakest success border color";
|
806 | name: "color-border-success-weakest";
|
807 | altValue: "#052912";
|
808 | },
|
809 | {
|
810 | type: "color";
|
811 | category: "border-color";
|
812 | value: "rgb(88, 23, 189)";
|
813 | comment: "User avatar border color.";
|
814 | name: "color-border-user";
|
815 | altValue: "#5817BD";
|
816 | },
|
817 | {
|
818 | type: "color";
|
819 | category: "border-color";
|
820 | value: "rgb(244, 124, 34)";
|
821 | comment: "Warning border color";
|
822 | name: "color-border-warning";
|
823 | altValue: "#F47C22";
|
824 | },
|
825 | {
|
826 | type: "color";
|
827 | category: "border-color";
|
828 | value: "rgb(195, 83, 35)";
|
829 | comment: "Weak warning border color";
|
830 | name: "color-border-warning-weak";
|
831 | altValue: "#C35323";
|
832 | },
|
833 | {
|
834 | type: "color";
|
835 | category: "border-color";
|
836 | value: "rgb(84, 25, 20)";
|
837 | comment: "Weaker warning border color";
|
838 | name: "color-border-warning-weaker";
|
839 | altValue: "#541914";
|
840 | },
|
841 | {
|
842 | type: "color";
|
843 | category: "border-color";
|
844 | value: "rgb(64, 19, 15)";
|
845 | comment: "Weakest warning border color";
|
846 | name: "color-border-warning-weakest";
|
847 | altValue: "#40130F";
|
848 | },
|
849 | {
|
850 | type: "color";
|
851 | category: "border-color";
|
852 | value: "rgb(57, 71, 98)";
|
853 | comment: "Weak border color";
|
854 | name: "color-border-weak";
|
855 | altValue: "#394762";
|
856 | },
|
857 | {
|
858 | type: "color";
|
859 | category: "border-color";
|
860 | value: "rgb(31, 48, 76)";
|
861 | comment: "Weaker border color";
|
862 | name: "color-border-weaker";
|
863 | altValue: "#1F304C";
|
864 | },
|
865 | {
|
866 | type: "color";
|
867 | category: "border-color";
|
868 | value: "rgb(13, 19, 28)";
|
869 | comment: "Weakest border color";
|
870 | name: "color-border-weakest";
|
871 | altValue: "#0D131C";
|
872 | }
|
873 | ]
|
874 | "border-widths": [
|
875 | {
|
876 | type: "size";
|
877 | category: "border-width";
|
878 | value: 0;
|
879 | comment: "Border width reset";
|
880 | name: "border-width-0";
|
881 | altValue: null;
|
882 | },
|
883 | {
|
884 | type: "size";
|
885 | category: "border-width";
|
886 | value: "1px";
|
887 | comment: "Constant border width token for border width 10";
|
888 | name: "border-width-10";
|
889 | altValue: null;
|
890 | },
|
891 | {
|
892 | type: "size";
|
893 | category: "border-width";
|
894 | value: "2px";
|
895 | comment: "Constant border width token for border width 20";
|
896 | name: "border-width-20";
|
897 | altValue: null;
|
898 | },
|
899 | {
|
900 | type: "size";
|
901 | category: "border-width";
|
902 | value: "4px";
|
903 | comment: "Constant border width token for border width 30";
|
904 | name: "border-width-30";
|
905 | altValue: null;
|
906 | },
|
907 | {
|
908 | type: "size";
|
909 | category: "border-width";
|
910 | value: "8px";
|
911 | comment: "Constant border width token for border width 40";
|
912 | name: "border-width-40";
|
913 | altValue: null;
|
914 | }
|
915 | ]
|
916 | "box-shadows": [
|
917 | {
|
918 | type: "shadow";
|
919 | category: "box-shadow";
|
920 | value: "0 4px 16px 0 rgba(0, 0, 0, 0.5)";
|
921 | comment: "Default shadow.";
|
922 | name: "shadow";
|
923 | altValue: null;
|
924 | },
|
925 | {
|
926 | type: "shadow";
|
927 | category: "box-shadow";
|
928 | value: "0 0 0 1px #606b85";
|
929 | comment: "Shadow border for inputs.";
|
930 | name: "shadow-border";
|
931 | altValue: null;
|
932 | },
|
933 | {
|
934 | type: "shadow";
|
935 | category: "box-shadow";
|
936 | value: "0 1px 0 #855c15";
|
937 | comment: "Strong bottom shadow border for brand 10";
|
938 | name: "shadow-border-bottom-brand-10-strong";
|
939 | altValue: null;
|
940 | },
|
941 | {
|
942 | type: "shadow";
|
943 | category: "box-shadow";
|
944 | value: "0 1px 0 #043cb5";
|
945 | comment: "Strong bottom shadow border for brand 20";
|
946 | name: "shadow-border-bottom-brand-20-strong";
|
947 | altValue: null;
|
948 | },
|
949 | {
|
950 | type: "shadow";
|
951 | category: "box-shadow";
|
952 | value: "0 1px 0 #0e7c3a";
|
953 | comment: "Strong bottom shadow border for brand 30";
|
954 | name: "shadow-border-bottom-brand-30-strong";
|
955 | altValue: null;
|
956 | },
|
957 | {
|
958 | type: "shadow";
|
959 | category: "box-shadow";
|
960 | value: "0 1px 0 #1f304c";
|
961 | comment: "Weaker bottom shadow border for decorative 10";
|
962 | name: "shadow-border-bottom-decorative-10-weaker";
|
963 | altValue: null;
|
964 | },
|
965 | {
|
966 | type: "shadow";
|
967 | category: "box-shadow";
|
968 | value: "0 1px 0 #001489";
|
969 | comment: "Weaker bottom shadow border for decorative 20";
|
970 | name: "shadow-border-bottom-decorative-20-weaker";
|
971 | altValue: null;
|
972 | },
|
973 | {
|
974 | type: "shadow";
|
975 | category: "box-shadow";
|
976 | value: "0 1px 0 #0d3a1f";
|
977 | comment: "Weaker bottom shadow border for decorative 30";
|
978 | name: "shadow-border-bottom-decorative-30-weaker";
|
979 | altValue: null;
|
980 | },
|
981 | {
|
982 | type: "shadow";
|
983 | category: "box-shadow";
|
984 | value: "0 1px 0 #5817bd";
|
985 | comment: "Weaker bottom shadow border for decorative 40";
|
986 | name: "shadow-border-bottom-decorative-40-weaker";
|
987 | altValue: null;
|
988 | },
|
989 | {
|
990 | type: "shadow";
|
991 | category: "box-shadow";
|
992 | value: "0 1px 0 #750c0c";
|
993 | comment: "Weaker bottom shadow border for error status";
|
994 | name: "shadow-border-bottom-error-weaker";
|
995 | altValue: null;
|
996 | },
|
997 | {
|
998 | type: "shadow";
|
999 | category: "box-shadow";
|
1000 | value: "0 1px 0 #5817bd";
|
1001 | comment: "Bottom shadow border for the sidebar beta badge";
|
1002 | name: "shadow-border-bottom-inverse-new-weaker";
|
1003 | altValue: null;
|
1004 | },
|
1005 | {
|
1006 | type: "shadow";
|
1007 | category: "box-shadow";
|
1008 | value: "0 1px 0 #001489";
|
1009 | comment: "Weaker bottom shadow border for neutral status";
|
1010 | name: "shadow-border-bottom-neutral-weaker";
|
1011 | altValue: null;
|
1012 | },
|
1013 | {
|
1014 | type: "shadow";
|
1015 | category: "box-shadow";
|
1016 | value: "0 1px 0 #5817bd";
|
1017 | comment: "Weaker bottom shadow border for new status";
|
1018 | name: "shadow-border-bottom-new-weaker";
|
1019 | altValue: null;
|
1020 | },
|
1021 | {
|
1022 | type: "shadow";
|
1023 | category: "box-shadow";
|
1024 | value: "0 1px 0 #006dfa";
|
1025 | comment: "Bottom shadow border for primary status";
|
1026 | name: "shadow-border-bottom-primary";
|
1027 | altValue: null;
|
1028 | },
|
1029 | {
|
1030 | type: "shadow";
|
1031 | category: "box-shadow";
|
1032 | value: "0 1px 0 #c28e00";
|
1033 | comment: "Bottom shadow border for subaccount badge";
|
1034 | name: "shadow-border-bottom-subaccount";
|
1035 | altValue: null;
|
1036 | },
|
1037 | {
|
1038 | type: "shadow";
|
1039 | category: "box-shadow";
|
1040 | value: "0 1px 0 #0d3a1f";
|
1041 | comment: "Weaker bottom shadow border for success status";
|
1042 | name: "shadow-border-bottom-success-weaker";
|
1043 | altValue: null;
|
1044 | },
|
1045 | {
|
1046 | type: "shadow";
|
1047 | category: "box-shadow";
|
1048 | value: "0 1px 0 #541914";
|
1049 | comment: "Weaker bottom shadow border warning warning status";
|
1050 | name: "shadow-border-bottom-warning-weaker";
|
1051 | altValue: null;
|
1052 | },
|
1053 | {
|
1054 | type: "shadow";
|
1055 | category: "box-shadow";
|
1056 | value: "saffron";
|
1057 | comment: "Shadow border for brand 10";
|
1058 | name: "shadow-border-brand-10";
|
1059 | altValue: null;
|
1060 | },
|
1061 | {
|
1062 | type: "shadow";
|
1063 | category: "box-shadow";
|
1064 | value: "sky";
|
1065 | comment: "Shadow border for brand 20";
|
1066 | name: "shadow-border-brand-20";
|
1067 | altValue: null;
|
1068 | },
|
1069 | {
|
1070 | type: "shadow";
|
1071 | category: "box-shadow";
|
1072 | value: "mint";
|
1073 | comment: "Shadow border for brand 30";
|
1074 | name: "shadow-border-brand-30";
|
1075 | altValue: null;
|
1076 | },
|
1077 | {
|
1078 | type: "shadow";
|
1079 | category: "box-shadow";
|
1080 | value: "0 0 0 1px #1f304c";
|
1081 | comment: "Weaker shadow border for decorative 10";
|
1082 | name: "shadow-border-decorative-10-weaker";
|
1083 | altValue: null;
|
1084 | },
|
1085 | {
|
1086 | type: "shadow";
|
1087 | category: "box-shadow";
|
1088 | value: "0 0 0 1px #043cb5";
|
1089 | comment: "Weaker shadow border for decorative 20";
|
1090 | name: "shadow-border-decorative-20-weaker";
|
1091 | altValue: null;
|
1092 | },
|
1093 | {
|
1094 | type: "shadow";
|
1095 | category: "box-shadow";
|
1096 | value: "0 0 0 1px #0e7c3a";
|
1097 | comment: "Weaker shadow border for decorative 30";
|
1098 | name: "shadow-border-decorative-30-weaker";
|
1099 | altValue: null;
|
1100 | },
|
1101 | {
|
1102 | type: "shadow";
|
1103 | category: "box-shadow";
|
1104 | value: "0 0 0 1px #5817bd";
|
1105 | comment: "Weaker shadow border for decorative 40";
|
1106 | name: "shadow-border-decorative-40-weaker";
|
1107 | altValue: null;
|
1108 | },
|
1109 | {
|
1110 | type: "shadow";
|
1111 | category: "box-shadow";
|
1112 | value: "0 0 0 1px #d61f1f";
|
1113 | comment: "Shadow border for destructive interactions.";
|
1114 | name: "shadow-border-destructive";
|
1115 | altValue: null;
|
1116 | },
|
1117 | {
|
1118 | type: "shadow";
|
1119 | category: "box-shadow";
|
1120 | value: "0 0 0 1px #f6b1b1";
|
1121 | comment: "Strong shadow border for destructive interactions";
|
1122 | name: "shadow-border-destructive-strong";
|
1123 | altValue: null;
|
1124 | },
|
1125 | {
|
1126 | type: "shadow";
|
1127 | category: "box-shadow";
|
1128 | value: "0 0 0 1px #fccfcf";
|
1129 | comment: "Stronger shadow border for destructive interactions";
|
1130 | name: "shadow-border-destructive-stronger";
|
1131 | altValue: null;
|
1132 | },
|
1133 | {
|
1134 | type: "shadow";
|
1135 | category: "box-shadow";
|
1136 | value: "0 0 0 1px #feecec";
|
1137 | comment: "Strongest shadow border for destructive interactions";
|
1138 | name: "shadow-border-destructive-strongest";
|
1139 | altValue: null;
|
1140 | },
|
1141 | {
|
1142 | type: "shadow";
|
1143 | category: "box-shadow";
|
1144 | value: "0 0 0 1px #394762";
|
1145 | comment: "Weak shadow border for destructive interactions.";
|
1146 | name: "shadow-border-destructive-weak";
|
1147 | altValue: null;
|
1148 | },
|
1149 | {
|
1150 | type: "shadow";
|
1151 | category: "box-shadow";
|
1152 | value: "0 0 0 1px #1f304c";
|
1153 | comment: "Weaker shadow border for destructive interactions.";
|
1154 | name: "shadow-border-destructive-weaker";
|
1155 | altValue: null;
|
1156 | },
|
1157 | {
|
1158 | type: "shadow";
|
1159 | category: "box-shadow";
|
1160 | value: "0 0 0 1px #d61f1f";
|
1161 | comment: "Shadow border for error inputs.";
|
1162 | name: "shadow-border-error";
|
1163 | altValue: null;
|
1164 | },
|
1165 | {
|
1166 | type: "shadow";
|
1167 | category: "box-shadow";
|
1168 | value: "0 0 0 1px #f6b1b1";
|
1169 | comment: "Shadow border for error inputs hover.";
|
1170 | name: "shadow-border-error-strong";
|
1171 | altValue: null;
|
1172 | },
|
1173 | {
|
1174 | type: "shadow";
|
1175 | category: "box-shadow";
|
1176 | value: "0 0 0 1px #fccfcf";
|
1177 | comment: "Shadow border for error inputs hover.";
|
1178 | name: "shadow-border-error-stronger";
|
1179 | altValue: null;
|
1180 | },
|
1181 | {
|
1182 | type: "shadow";
|
1183 | category: "box-shadow";
|
1184 | value: "0 0 0 1px #feecec";
|
1185 | comment: "Strongest shadow border for error inputs hover.";
|
1186 | name: "shadow-border-error-strongest";
|
1187 | altValue: null;
|
1188 | },
|
1189 | {
|
1190 | type: "shadow";
|
1191 | category: "box-shadow";
|
1192 | value: "0 0 0 1px #ad1111";
|
1193 | comment: "Shadow border for inverse error inputs.";
|
1194 | name: "shadow-border-error-weak";
|
1195 | altValue: null;
|
1196 | },
|
1197 | {
|
1198 | type: "shadow";
|
1199 | category: "box-shadow";
|
1200 | value: "0 0 0 1px #ad1111";
|
1201 | comment: "Weaker shadow border for error inputs.";
|
1202 | name: "shadow-border-error-weaker";
|
1203 | altValue: null;
|
1204 | },
|
1205 | {
|
1206 | type: "shadow";
|
1207 | category: "box-shadow";
|
1208 | value: "0 0 0 1px #8891aa";
|
1209 | comment: "Shadow border on interactive elements on inverse backgrounds.";
|
1210 | name: "shadow-border-inverse";
|
1211 | altValue: null;
|
1212 | },
|
1213 | {
|
1214 | type: "shadow";
|
1215 | category: "box-shadow";
|
1216 | value: "0 0 0 1px #5817bd";
|
1217 | comment: "Shadow border for the sidebar beta badge.";
|
1218 | name: "shadow-border-inverse-new-weaker";
|
1219 | altValue: null;
|
1220 | },
|
1221 | {
|
1222 | type: "shadow";
|
1223 | category: "box-shadow";
|
1224 | value: "0 0 0 1px #e1e3ea";
|
1225 | comment: "Strong shadow border on interactive elements on inverse backgrounds.";
|
1226 | name: "shadow-border-inverse-strong";
|
1227 | altValue: null;
|
1228 | },
|
1229 | {
|
1230 | type: "shadow";
|
1231 | category: "box-shadow";
|
1232 | value: "0 0 0 1px #f4f4f6";
|
1233 | comment: "Stronger shadow border on interactive elements on inverse backgrounds.";
|
1234 | name: "shadow-border-inverse-stronger";
|
1235 | altValue: null;
|
1236 | },
|
1237 | {
|
1238 | type: "shadow";
|
1239 | category: "box-shadow";
|
1240 | value: "0 0 0 1px #ffffff";
|
1241 | comment: "Strongest shadow border on interactive elements on inverse backgrounds.";
|
1242 | name: "shadow-border-inverse-strongest";
|
1243 | altValue: null;
|
1244 | },
|
1245 | {
|
1246 | type: "shadow";
|
1247 | category: "box-shadow";
|
1248 | value: "0 0 0 1px #394762";
|
1249 | comment: "Weaker shadow border on interactive elements on inverse backgrounds.";
|
1250 | name: "shadow-border-inverse-weaker";
|
1251 | altValue: null;
|
1252 | },
|
1253 | {
|
1254 | type: "shadow";
|
1255 | category: "box-shadow";
|
1256 | value: "0 0 0 1px #1f304c";
|
1257 | comment: "Weakest shadow border on interactive elements on inverse backgrounds.";
|
1258 | name: "shadow-border-inverse-weakest";
|
1259 | altValue: null;
|
1260 | },
|
1261 | {
|
1262 | type: "shadow";
|
1263 | category: "box-shadow";
|
1264 | value: "0 0 0 1px #043cb5";
|
1265 | comment: "Weaker shadow border for neutral inputs.";
|
1266 | name: "shadow-border-neutral-weaker";
|
1267 | altValue: null;
|
1268 | },
|
1269 | {
|
1270 | type: "shadow";
|
1271 | category: "box-shadow";
|
1272 | value: "0 0 0 1px #5817bd";
|
1273 | comment: "Weaker shadow border for new status inputs.";
|
1274 | name: "shadow-border-new-weaker";
|
1275 | altValue: null;
|
1276 | },
|
1277 | {
|
1278 | type: "shadow";
|
1279 | category: "box-shadow";
|
1280 | value: "0 0 0 1px #0263e0";
|
1281 | comment: "Default shadow border for primary interactions.";
|
1282 | name: "shadow-border-primary";
|
1283 | altValue: null;
|
1284 | },
|
1285 | {
|
1286 | type: "shadow";
|
1287 | category: "box-shadow";
|
1288 | value: "0 0 0 1px #99cdff";
|
1289 | comment: "Strong shadow border for inputs hover.";
|
1290 | name: "shadow-border-primary-strong";
|
1291 | altValue: null;
|
1292 | },
|
1293 | {
|
1294 | type: "shadow";
|
1295 | category: "box-shadow";
|
1296 | value: "0 0 0 1px #cce4ff";
|
1297 | comment: "Stronger shadow border for inputs active.";
|
1298 | name: "shadow-border-primary-stronger";
|
1299 | altValue: null;
|
1300 | },
|
1301 | {
|
1302 | type: "shadow";
|
1303 | category: "box-shadow";
|
1304 | value: "0 0 0 1px #ebf4ff";
|
1305 | comment: "Strongest shadow border for inputs active.";
|
1306 | name: "shadow-border-primary-strongest";
|
1307 | altValue: null;
|
1308 | },
|
1309 | {
|
1310 | type: "shadow";
|
1311 | category: "box-shadow";
|
1312 | value: "0 0 0 1px #394762";
|
1313 | comment: "Weaker shadow border for primary interactions.";
|
1314 | name: "shadow-border-primary-weak";
|
1315 | altValue: null;
|
1316 | },
|
1317 | {
|
1318 | type: "shadow";
|
1319 | category: "box-shadow";
|
1320 | value: "0 0 0 1px #1f304c";
|
1321 | comment: "Weaker shadow border for primary interactions.";
|
1322 | name: "shadow-border-primary-weaker";
|
1323 | altValue: null;
|
1324 | },
|
1325 | {
|
1326 | type: "shadow";
|
1327 | category: "box-shadow";
|
1328 | value: "1px 0px #e1e3ea";
|
1329 | comment: "Right shadow border for hover status of vertical tabs on inverse backgrounds";
|
1330 | name: "shadow-border-right-inverse-strong";
|
1331 | altValue: null;
|
1332 | },
|
1333 | {
|
1334 | type: "shadow";
|
1335 | category: "box-shadow";
|
1336 | value: "0 0 0 1px #8891aa";
|
1337 | comment: "Strong shadow border for inputs.";
|
1338 | name: "shadow-border-strong";
|
1339 | altValue: null;
|
1340 | },
|
1341 | {
|
1342 | type: "shadow";
|
1343 | category: "box-shadow";
|
1344 | value: "0 0 0 1px #c28e00";
|
1345 | comment: "Shadow border for subaccount badge.";
|
1346 | name: "shadow-border-subaccount";
|
1347 | altValue: null;
|
1348 | },
|
1349 | {
|
1350 | type: "shadow";
|
1351 | category: "box-shadow";
|
1352 | value: "0 0 0 1px #0e7c3a";
|
1353 | comment: "Weaker shadow border for success inputs.";
|
1354 | name: "shadow-border-success-weaker";
|
1355 | altValue: null;
|
1356 | },
|
1357 | {
|
1358 | type: "shadow";
|
1359 | category: "box-shadow";
|
1360 | value: "0px -1px 0 #cce4ff";
|
1361 | comment: "Top shadow border for for selected status of horizontal tabs on inverse backgrounds";
|
1362 | name: "shadow-border-top-inverse-strongest";
|
1363 | altValue: null;
|
1364 | },
|
1365 | {
|
1366 | type: "shadow";
|
1367 | category: "box-shadow";
|
1368 | value: "0px -1px 0 #006dfa";
|
1369 | comment: "Top shadow border for selected status of horizontal tabs";
|
1370 | name: "shadow-border-top-primary";
|
1371 | altValue: null;
|
1372 | },
|
1373 | {
|
1374 | type: "shadow";
|
1375 | category: "box-shadow";
|
1376 | value: "0px -1px 0 #ebf4ff";
|
1377 | comment: "Top shadow border for selected hover status of horizontal tabs.";
|
1378 | name: "shadow-border-top-primary-strongest";
|
1379 | altValue: null;
|
1380 | },
|
1381 | {
|
1382 | type: "shadow";
|
1383 | category: "box-shadow";
|
1384 | value: "0 0 0 1px #f5f0fc";
|
1385 | comment: "Shadow border for user.";
|
1386 | name: "shadow-border-user";
|
1387 | altValue: null;
|
1388 | },
|
1389 | {
|
1390 | type: "shadow";
|
1391 | category: "box-shadow";
|
1392 | value: "0 0 0 1px #c35323";
|
1393 | comment: "Weaker shadow border for warning inputs.";
|
1394 | name: "shadow-border-warning-weaker";
|
1395 | altValue: null;
|
1396 | },
|
1397 | {
|
1398 | type: "shadow";
|
1399 | category: "box-shadow";
|
1400 | value: "0 0 0 1px #394762";
|
1401 | comment: "Weak shadow border for disabled inputs.";
|
1402 | name: "shadow-border-weak";
|
1403 | altValue: null;
|
1404 | },
|
1405 | {
|
1406 | type: "shadow";
|
1407 | category: "box-shadow";
|
1408 | value: "0 0 0 1px #1f304c";
|
1409 | comment: "Weaker shadow border for disabled inputs.";
|
1410 | name: "shadow-border-weaker";
|
1411 | altValue: null;
|
1412 | },
|
1413 | {
|
1414 | type: "shadow";
|
1415 | category: "box-shadow";
|
1416 | value: "0 2px 4px 0 rgba(0, 0, 0, 0.4)";
|
1417 | comment: "Shadow for cards.";
|
1418 | name: "shadow-card";
|
1419 | altValue: null;
|
1420 | },
|
1421 | {
|
1422 | type: "shadow";
|
1423 | category: "box-shadow";
|
1424 | value: "0 0 0 4px #606b85";
|
1425 | comment: "Shadow for focus ring on interactive elements.";
|
1426 | name: "shadow-focus";
|
1427 | altValue: null;
|
1428 | },
|
1429 | {
|
1430 | type: "shadow";
|
1431 | category: "box-shadow";
|
1432 | value: "inset 0 0 0 2px #606b85";
|
1433 | comment: "Shadow for inset focus on elements, such as DataGrid cells.";
|
1434 | name: "shadow-focus-inset";
|
1435 | altValue: null;
|
1436 | },
|
1437 | {
|
1438 | type: "shadow";
|
1439 | category: "box-shadow";
|
1440 | value: "0 0 0 4px #8891aa";
|
1441 | comment: "Shadow for focus ring on interactive elements on inverse backgrounds.";
|
1442 | name: "shadow-focus-inverse";
|
1443 | altValue: null;
|
1444 | },
|
1445 | {
|
1446 | type: "shadow";
|
1447 | category: "box-shadow";
|
1448 | value: "inset 0 0 0 2px rgba(255, 255, 255, 0.4)";
|
1449 | comment: "Shadow for inset focus ring on interactive elements on inverse backgrounds.";
|
1450 | name: "shadow-focus-inverse-inset";
|
1451 | altValue: null;
|
1452 | },
|
1453 | {
|
1454 | type: "shadow";
|
1455 | category: "box-shadow";
|
1456 | value: "0 0 0 4px #606b85, 0 0 0 1px #606b85";
|
1457 | comment: "Shadow for simultaneous focus and border";
|
1458 | name: "shadow-focus-shadow-border";
|
1459 | altValue: null;
|
1460 | },
|
1461 | {
|
1462 | type: "shadow";
|
1463 | category: "box-shadow";
|
1464 | value: "0 16px 24px 4px rgba(0, 0, 0, 0.5)";
|
1465 | comment: "High elevation default shadow.";
|
1466 | name: "shadow-high";
|
1467 | altValue: null;
|
1468 | },
|
1469 | {
|
1470 | type: "shadow";
|
1471 | category: "box-shadow";
|
1472 | value: "0 2px 4px 0 rgba(0, 0, 0, 0.4)";
|
1473 | comment: "Low elevation default shadow.";
|
1474 | name: "shadow-low";
|
1475 | altValue: null;
|
1476 | }
|
1477 | ]
|
1478 | "colors": [
|
1479 | {
|
1480 | type: "color";
|
1481 | category: "color";
|
1482 | value: "rgb(0, 20, 137)";
|
1483 | comment: "Default branding color";
|
1484 | name: "color-brand";
|
1485 | altValue: null;
|
1486 | },
|
1487 | {
|
1488 | type: "color";
|
1489 | category: "color";
|
1490 | value: "rgb(242, 47, 70)";
|
1491 | comment: "Twilio brand red";
|
1492 | name: "color-brand-highlight";
|
1493 | altValue: null;
|
1494 | },
|
1495 | {
|
1496 | type: "color";
|
1497 | category: "color";
|
1498 | value: "rgb(255, 255, 255)";
|
1499 | comment: "Gray Color 0";
|
1500 | name: "color-gray-0";
|
1501 | altValue: null;
|
1502 | },
|
1503 | {
|
1504 | type: "color";
|
1505 | category: "color";
|
1506 | value: "rgb(244, 244, 246)";
|
1507 | comment: "Gray Color 1";
|
1508 | name: "color-gray-10";
|
1509 | altValue: null;
|
1510 | },
|
1511 | {
|
1512 | type: "color";
|
1513 | category: "color";
|
1514 | value: "rgb(225, 227, 234)";
|
1515 | comment: "Gray Color 2";
|
1516 | name: "color-gray-20";
|
1517 | altValue: null;
|
1518 | },
|
1519 | {
|
1520 | type: "color";
|
1521 | category: "color";
|
1522 | value: "rgb(202, 205, 216)";
|
1523 | comment: "Gray Color 3";
|
1524 | name: "color-gray-30";
|
1525 | altValue: null;
|
1526 | },
|
1527 | {
|
1528 | type: "color";
|
1529 | category: "color";
|
1530 | value: "rgb(174, 178, 193)";
|
1531 | comment: "Gray Color 4";
|
1532 | name: "color-gray-40";
|
1533 | altValue: null;
|
1534 | },
|
1535 | {
|
1536 | type: "color";
|
1537 | category: "color";
|
1538 | value: "rgb(136, 145, 170)";
|
1539 | comment: "Gray Color 5";
|
1540 | name: "color-gray-50";
|
1541 | altValue: null;
|
1542 | },
|
1543 | {
|
1544 | type: "color";
|
1545 | category: "color";
|
1546 | value: "rgb(96, 107, 133)";
|
1547 | comment: "Gray Color 6";
|
1548 | name: "color-gray-60";
|
1549 | altValue: null;
|
1550 | },
|
1551 | {
|
1552 | type: "color";
|
1553 | category: "color";
|
1554 | value: "rgb(75, 86, 113)";
|
1555 | comment: "Gray Color 7";
|
1556 | name: "color-gray-70";
|
1557 | altValue: null;
|
1558 | },
|
1559 | {
|
1560 | type: "color";
|
1561 | category: "color";
|
1562 | value: "rgb(57, 71, 98)";
|
1563 | comment: "Gray Color 8";
|
1564 | name: "color-gray-80";
|
1565 | altValue: null;
|
1566 | },
|
1567 | {
|
1568 | type: "color";
|
1569 | category: "color";
|
1570 | value: "rgb(31, 48, 76)";
|
1571 | comment: "Gray Color 9";
|
1572 | name: "color-gray-90";
|
1573 | altValue: null;
|
1574 | },
|
1575 | {
|
1576 | type: "color";
|
1577 | category: "color";
|
1578 | value: "rgb(18, 28, 45)";
|
1579 | comment: "Gray Color 10";
|
1580 | name: "color-gray-100";
|
1581 | altValue: null;
|
1582 | }
|
1583 | ]
|
1584 | "color-schemes": [
|
1585 | {
|
1586 | type: "string";
|
1587 | category: "color-scheme";
|
1588 | value: "dark";
|
1589 | name: "color-scheme";
|
1590 | altValue: null;
|
1591 | }
|
1592 | ]
|
1593 | "data-visualization": [
|
1594 | {
|
1595 | type: "color";
|
1596 | category: "data-visualization";
|
1597 | value: "rgb(2, 99, 224)";
|
1598 | comment: "Color used for data visualizations. Must be used in a sequence.";
|
1599 | name: "color-data-visualization-1";
|
1600 | altValue: null;
|
1601 | },
|
1602 | {
|
1603 | type: "color";
|
1604 | category: "data-visualization";
|
1605 | value: "rgb(200, 175, 240)";
|
1606 | comment: "Color used for data visualizations. Must be used in a sequence.";
|
1607 | name: "color-data-visualization-2";
|
1608 | altValue: null;
|
1609 | },
|
1610 | {
|
1611 | type: "color";
|
1612 | category: "data-visualization";
|
1613 | value: "rgb(96, 107, 133)";
|
1614 | comment: "Color used for data visualizations. Must be used in a sequence.";
|
1615 | name: "color-data-visualization-3";
|
1616 | altValue: null;
|
1617 | },
|
1618 | {
|
1619 | type: "color";
|
1620 | category: "data-visualization";
|
1621 | value: "rgb(102, 179, 255)";
|
1622 | comment: "Color used for data visualizations. Must be used in a sequence.";
|
1623 | name: "color-data-visualization-4";
|
1624 | altValue: null;
|
1625 | },
|
1626 | {
|
1627 | type: "color";
|
1628 | category: "data-visualization";
|
1629 | value: "rgb(14, 124, 58)";
|
1630 | comment: "Color used for data visualizations. Must be used in a sequence.";
|
1631 | name: "color-data-visualization-5";
|
1632 | altValue: null;
|
1633 | },
|
1634 | {
|
1635 | type: "color";
|
1636 | category: "data-visualization";
|
1637 | value: "rgb(250, 153, 80)";
|
1638 | comment: "Color used for data visualizations. Must be used in a sequence.";
|
1639 | name: "color-data-visualization-6";
|
1640 | altValue: null;
|
1641 | },
|
1642 | {
|
1643 | type: "color";
|
1644 | category: "data-visualization";
|
1645 | value: "rgb(195, 83, 35)";
|
1646 | comment: "Color used for data visualizations. Must be used in a sequence.";
|
1647 | name: "color-data-visualization-7";
|
1648 | altValue: null;
|
1649 | },
|
1650 | {
|
1651 | type: "color";
|
1652 | category: "data-visualization";
|
1653 | value: "rgb(246, 177, 177)";
|
1654 | comment: "Color used for data visualizations. Must be used in a sequence.";
|
1655 | name: "color-data-visualization-8";
|
1656 | altValue: null;
|
1657 | },
|
1658 | {
|
1659 | type: "color";
|
1660 | category: "data-visualization";
|
1661 | value: "rgb(140, 91, 216)";
|
1662 | comment: "Color used for data visualizations. Must be used in a sequence.";
|
1663 | name: "color-data-visualization-9";
|
1664 | altValue: null;
|
1665 | },
|
1666 | {
|
1667 | type: "color";
|
1668 | category: "data-visualization";
|
1669 | value: "rgb(232, 180, 7)";
|
1670 | comment: "Color used for data visualizations. Must be used in a sequence.";
|
1671 | name: "color-data-visualization-10";
|
1672 | altValue: null;
|
1673 | }
|
1674 | ]
|
1675 | "fonts": [
|
1676 | {
|
1677 | category: "font";
|
1678 | type: "font";
|
1679 | value: "'TwilioSansMono', Courier, monospace";
|
1680 | name: "font-family-code";
|
1681 | altValue: null;
|
1682 | },
|
1683 | {
|
1684 | category: "font";
|
1685 | type: "font";
|
1686 | value: "'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif";
|
1687 | name: "font-family-display";
|
1688 | altValue: null;
|
1689 | },
|
1690 | {
|
1691 | category: "font";
|
1692 | type: "font";
|
1693 | value: "'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif";
|
1694 | name: "font-family-text";
|
1695 | altValue: null;
|
1696 | },
|
1697 | {
|
1698 | category: "font";
|
1699 | type: "font";
|
1700 | value: "'Inter var experimental', 'Inter var', 'Microsoft YaHei New', 微软雅黑, 'Microsoft Yahei', 'Microsoft JhengHei', 宋体, SimSun, sans-serif";
|
1701 | name: "font-family-text-chinese-simplified";
|
1702 | altValue: null;
|
1703 | },
|
1704 | {
|
1705 | category: "font";
|
1706 | type: "font";
|
1707 | value: "'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif";
|
1708 | name: "font-family-text-chinese-traditional";
|
1709 | altValue: null;
|
1710 | },
|
1711 | {
|
1712 | category: "font";
|
1713 | type: "font";
|
1714 | value: "'Inter var experimental', 'Inter var', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, Osaka, 'MS PGothic', sans-serif";
|
1715 | name: "font-family-text-japanese";
|
1716 | altValue: null;
|
1717 | },
|
1718 | {
|
1719 | category: "font";
|
1720 | type: "font";
|
1721 | value: "'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif";
|
1722 | name: "font-family-text-korean";
|
1723 | altValue: null;
|
1724 | }
|
1725 | ]
|
1726 | "font-sizes": [
|
1727 | {
|
1728 | category: "font-size";
|
1729 | type: "font-size";
|
1730 | value: "0.625rem";
|
1731 | comment: "Constant typography token for font size 10";
|
1732 | name: "font-size-10";
|
1733 | altValue: "10px";
|
1734 | },
|
1735 | {
|
1736 | category: "font-size";
|
1737 | type: "font-size";
|
1738 | value: "0.75rem";
|
1739 | comment: "Constant typography token for font size 20";
|
1740 | name: "font-size-20";
|
1741 | altValue: "12px";
|
1742 | },
|
1743 | {
|
1744 | category: "font-size";
|
1745 | type: "font-size";
|
1746 | value: "0.875rem";
|
1747 | comment: "Constant typography token for font size 30";
|
1748 | name: "font-size-30";
|
1749 | altValue: "14px";
|
1750 | },
|
1751 | {
|
1752 | category: "font-size";
|
1753 | type: "font-size";
|
1754 | value: "1rem";
|
1755 | comment: "Constant typography token for font size 40";
|
1756 | name: "font-size-40";
|
1757 | altValue: "16px";
|
1758 | },
|
1759 | {
|
1760 | category: "font-size";
|
1761 | type: "font-size";
|
1762 | value: "1.125rem";
|
1763 | comment: "Constant typography token for font size 50";
|
1764 | name: "font-size-50";
|
1765 | altValue: "18px";
|
1766 | },
|
1767 | {
|
1768 | category: "font-size";
|
1769 | type: "font-size";
|
1770 | value: "1.25rem";
|
1771 | comment: "Constant typography token for font size 60";
|
1772 | name: "font-size-60";
|
1773 | altValue: "20px";
|
1774 | },
|
1775 | {
|
1776 | category: "font-size";
|
1777 | type: "font-size";
|
1778 | value: "1.5rem";
|
1779 | comment: "Constant typography token for font size 70";
|
1780 | name: "font-size-70";
|
1781 | altValue: "24px";
|
1782 | },
|
1783 | {
|
1784 | category: "font-size";
|
1785 | type: "font-size";
|
1786 | value: "1.75rem";
|
1787 | comment: "Constant typography token for font size 80";
|
1788 | name: "font-size-80";
|
1789 | altValue: "28px";
|
1790 | },
|
1791 | {
|
1792 | category: "font-size";
|
1793 | type: "font-size";
|
1794 | value: "2rem";
|
1795 | comment: "Constant typography token for font size 90";
|
1796 | name: "font-size-90";
|
1797 | altValue: "32px";
|
1798 | },
|
1799 | {
|
1800 | category: "font-size";
|
1801 | type: "font-size";
|
1802 | value: "2.5rem";
|
1803 | comment: "Constant typography token for font size 100";
|
1804 | name: "font-size-100";
|
1805 | altValue: "40px";
|
1806 | },
|
1807 | {
|
1808 | category: "font-size";
|
1809 | type: "font-size";
|
1810 | value: "3rem";
|
1811 | comment: "Constant typography token for font size 110";
|
1812 | name: "font-size-110";
|
1813 | altValue: "48px";
|
1814 | },
|
1815 | {
|
1816 | category: "font-size";
|
1817 | type: "font-size";
|
1818 | value: "100%";
|
1819 | comment: "Base font size applied to the html element, used for rem calculations";
|
1820 | name: "font-size-base";
|
1821 | altValue: "1600px";
|
1822 | },
|
1823 | {
|
1824 | category: "font-size";
|
1825 | type: "font-size";
|
1826 | value: "2rem";
|
1827 | comment: "Constant typography token for font size display 10";
|
1828 | name: "font-size-display-10";
|
1829 | altValue: "32px";
|
1830 | },
|
1831 | {
|
1832 | category: "font-size";
|
1833 | type: "font-size";
|
1834 | value: "3rem";
|
1835 | comment: "Constant typography token for font size display 20";
|
1836 | name: "font-size-display-20";
|
1837 | altValue: "48px";
|
1838 | },
|
1839 | {
|
1840 | category: "font-size";
|
1841 | type: "font-size";
|
1842 | value: "4rem";
|
1843 | comment: "Constant typography token for font size display 30";
|
1844 | name: "font-size-display-30";
|
1845 | altValue: "64px";
|
1846 | }
|
1847 | ]
|
1848 | "font-weights": [
|
1849 | {
|
1850 | category: "font-weight";
|
1851 | type: "font-weight";
|
1852 | value: 400;
|
1853 | comment: "Font weight for light weight";
|
1854 | name: "font-weight-light";
|
1855 | altValue: null;
|
1856 | },
|
1857 | {
|
1858 | category: "font-weight";
|
1859 | type: "font-weight";
|
1860 | value: 400;
|
1861 | comment: "Font weight for normal weight";
|
1862 | name: "font-weight-normal";
|
1863 | altValue: null;
|
1864 | },
|
1865 | {
|
1866 | category: "font-weight";
|
1867 | type: "font-weight";
|
1868 | value: 500;
|
1869 | comment: "Font weight for medium weight";
|
1870 | name: "font-weight-medium";
|
1871 | altValue: null;
|
1872 | },
|
1873 | {
|
1874 | category: "font-weight";
|
1875 | type: "font-weight";
|
1876 | value: 600;
|
1877 | comment: "Font weight for semibold weight";
|
1878 | name: "font-weight-semibold";
|
1879 | altValue: null;
|
1880 | },
|
1881 | {
|
1882 | category: "font-weight";
|
1883 | type: "font-weight";
|
1884 | value: 700;
|
1885 | comment: "Font weight for bold weight";
|
1886 | name: "font-weight-bold";
|
1887 | altValue: null;
|
1888 | },
|
1889 | {
|
1890 | category: "font-weight";
|
1891 | type: "font-weight";
|
1892 | value: 800;
|
1893 | comment: "Font weight for extrabold weight";
|
1894 | name: "font-weight-extrabold";
|
1895 | altValue: null;
|
1896 | }
|
1897 | ]
|
1898 | "line-heights": [
|
1899 | {
|
1900 | category: "line-height";
|
1901 | type: "number";
|
1902 | value: 0;
|
1903 | comment: "Constant line-height token for line-height 0";
|
1904 | name: "line-height-0";
|
1905 | altValue: "0px";
|
1906 | },
|
1907 | {
|
1908 | category: "line-height";
|
1909 | type: "number";
|
1910 | value: "0.75rem";
|
1911 | comment: "Constant line-height token for line-height 05";
|
1912 | name: "line-height-05";
|
1913 | altValue: "12px";
|
1914 | },
|
1915 | {
|
1916 | category: "line-height";
|
1917 | type: "number";
|
1918 | value: "1rem";
|
1919 | comment: "Constant line-height token for line-height 10";
|
1920 | name: "line-height-10";
|
1921 | altValue: "16px";
|
1922 | },
|
1923 | {
|
1924 | category: "line-height";
|
1925 | type: "number";
|
1926 | value: "1.25rem";
|
1927 | comment: "Constant line-height token for line-height 20";
|
1928 | name: "line-height-20";
|
1929 | altValue: "20px";
|
1930 | },
|
1931 | {
|
1932 | category: "line-height";
|
1933 | type: "number";
|
1934 | value: "1.25rem";
|
1935 | comment: "Constant line-height token for line-height 30";
|
1936 | name: "line-height-30";
|
1937 | altValue: "20px";
|
1938 | },
|
1939 | {
|
1940 | category: "line-height";
|
1941 | type: "number";
|
1942 | value: "1.5rem";
|
1943 | comment: "Constant line-height token for line-height 40";
|
1944 | name: "line-height-40";
|
1945 | altValue: "24px";
|
1946 | },
|
1947 | {
|
1948 | category: "line-height";
|
1949 | type: "number";
|
1950 | value: "1.75rem";
|
1951 | comment: "Constant line-height token for line-height 50";
|
1952 | name: "line-height-50";
|
1953 | altValue: "28px";
|
1954 | },
|
1955 | {
|
1956 | category: "line-height";
|
1957 | type: "number";
|
1958 | value: "1.75rem";
|
1959 | comment: "Constant line-height token for line-height 60";
|
1960 | name: "line-height-60";
|
1961 | altValue: "28px";
|
1962 | },
|
1963 | {
|
1964 | category: "line-height";
|
1965 | type: "number";
|
1966 | value: "2rem";
|
1967 | comment: "Constant line-height token for line-height 70";
|
1968 | name: "line-height-70";
|
1969 | altValue: "32px";
|
1970 | },
|
1971 | {
|
1972 | category: "line-height";
|
1973 | type: "number";
|
1974 | value: "2.5rem";
|
1975 | comment: "Constant line-height token for line-height 80";
|
1976 | name: "line-height-80";
|
1977 | altValue: "40px";
|
1978 | },
|
1979 | {
|
1980 | category: "line-height";
|
1981 | type: "number";
|
1982 | value: "2.5rem";
|
1983 | comment: "Constant line-height token for line-height 90";
|
1984 | name: "line-height-90";
|
1985 | altValue: "40px";
|
1986 | },
|
1987 | {
|
1988 | category: "line-height";
|
1989 | type: "number";
|
1990 | value: "3.25rem";
|
1991 | comment: "Constant line-height token for line-height 100";
|
1992 | name: "line-height-100";
|
1993 | altValue: "52px";
|
1994 | },
|
1995 | {
|
1996 | category: "line-height";
|
1997 | type: "number";
|
1998 | value: "4rem";
|
1999 | comment: "Constant line-height token for line-height 110";
|
2000 | name: "line-height-110";
|
2001 | altValue: "64px";
|
2002 | },
|
2003 | {
|
2004 | category: "line-height";
|
2005 | type: "number";
|
2006 | value: "2.5rem";
|
2007 | comment: "Constant line-height token for line-height-display 10";
|
2008 | name: "line-height-display-10";
|
2009 | altValue: "40px";
|
2010 | },
|
2011 | {
|
2012 | category: "line-height";
|
2013 | type: "number";
|
2014 | value: "3.75rem";
|
2015 | comment: "Constant line-height token for line-height-display 20";
|
2016 | name: "line-height-display-20";
|
2017 | altValue: "60px";
|
2018 | },
|
2019 | {
|
2020 | category: "line-height";
|
2021 | type: "number";
|
2022 | value: "5rem";
|
2023 | comment: "Constant line-height token for line-height-display 30";
|
2024 | name: "line-height-display-30";
|
2025 | altValue: "80px";
|
2026 | }
|
2027 | ]
|
2028 | "radii": [
|
2029 | {
|
2030 | type: "size";
|
2031 | category: "radius";
|
2032 | value: 0;
|
2033 | comment: "Border radius reset";
|
2034 | name: "border-radius-0";
|
2035 | altValue: null;
|
2036 | },
|
2037 | {
|
2038 | type: "size";
|
2039 | category: "radius";
|
2040 | value: "2px";
|
2041 | comment: "Smallest border radius";
|
2042 | name: "border-radius-10";
|
2043 | altValue: null;
|
2044 | },
|
2045 | {
|
2046 | type: "size";
|
2047 | category: "radius";
|
2048 | value: "4px";
|
2049 | comment: "Small border radius";
|
2050 | name: "border-radius-20";
|
2051 | altValue: null;
|
2052 | },
|
2053 | {
|
2054 | type: "size";
|
2055 | category: "radius";
|
2056 | value: "8px";
|
2057 | comment: "Small-medium border radius";
|
2058 | name: "border-radius-30";
|
2059 | altValue: null;
|
2060 | },
|
2061 | {
|
2062 | type: "size";
|
2063 | category: "radius";
|
2064 | value: "12px";
|
2065 | comment: "Medium border radius";
|
2066 | name: "border-radius-40";
|
2067 | altValue: null;
|
2068 | },
|
2069 | {
|
2070 | type: "size";
|
2071 | category: "radius";
|
2072 | value: "16px";
|
2073 | comment: "Medium-large border radius";
|
2074 | name: "border-radius-50";
|
2075 | altValue: null;
|
2076 | },
|
2077 | {
|
2078 | type: "size";
|
2079 | category: "radius";
|
2080 | value: "20px";
|
2081 | comment: "Large border radiusr";
|
2082 | name: "border-radius-60";
|
2083 | altValue: null;
|
2084 | },
|
2085 | {
|
2086 | type: "size";
|
2087 | category: "radius";
|
2088 | value: "24px";
|
2089 | comment: "Larger border radius";
|
2090 | name: "border-radius-70";
|
2091 | altValue: null;
|
2092 | },
|
2093 | {
|
2094 | type: "size";
|
2095 | category: "radius";
|
2096 | value: "28px";
|
2097 | comment: "Extra-large border radius";
|
2098 | name: "border-radius-80";
|
2099 | altValue: null;
|
2100 | },
|
2101 | {
|
2102 | type: "size";
|
2103 | category: "radius";
|
2104 | value: "32px";
|
2105 | comment: "Largest border radius";
|
2106 | name: "border-radius-90";
|
2107 | altValue: null;
|
2108 | },
|
2109 | {
|
2110 | type: "size";
|
2111 | category: "radius";
|
2112 | value: "50%";
|
2113 | comment: "Circular border radius";
|
2114 | name: "border-radius-circle";
|
2115 | altValue: null;
|
2116 | },
|
2117 | {
|
2118 | type: "size";
|
2119 | category: "radius";
|
2120 | value: "100px";
|
2121 | comment: "Pill border radius";
|
2122 | name: "border-radius-pill";
|
2123 | altValue: null;
|
2124 | }
|
2125 | ]
|
2126 | "sizings": [
|
2127 | {
|
2128 | type: "size";
|
2129 | category: "sizing";
|
2130 | value: 0;
|
2131 | comment: "Generic sizing token scale for UI components.";
|
2132 | name: "size-0";
|
2133 | altValue: "0px";
|
2134 | },
|
2135 | {
|
2136 | type: "size";
|
2137 | category: "sizing";
|
2138 | value: "5.5rem";
|
2139 | comment: "Generic sizing token scale for UI components.";
|
2140 | name: "size-10";
|
2141 | altValue: "88px";
|
2142 | },
|
2143 | {
|
2144 | type: "size";
|
2145 | category: "sizing";
|
2146 | value: "12rem";
|
2147 | comment: "Generic sizing token scale for UI components.";
|
2148 | name: "size-20";
|
2149 | altValue: "192px";
|
2150 | },
|
2151 | {
|
2152 | type: "size";
|
2153 | category: "sizing";
|
2154 | value: "18.5rem";
|
2155 | comment: "Generic sizing token scale for UI components.";
|
2156 | name: "size-30";
|
2157 | altValue: "296px";
|
2158 | },
|
2159 | {
|
2160 | type: "size";
|
2161 | category: "sizing";
|
2162 | value: "25rem";
|
2163 | comment: "Generic sizing token scale for UI components.";
|
2164 | name: "size-40";
|
2165 | altValue: "400px";
|
2166 | },
|
2167 | {
|
2168 | type: "size";
|
2169 | category: "sizing";
|
2170 | value: "31.5rem";
|
2171 | comment: "Generic sizing token scale for UI components.";
|
2172 | name: "size-50";
|
2173 | altValue: "504px";
|
2174 | },
|
2175 | {
|
2176 | type: "size";
|
2177 | category: "sizing";
|
2178 | value: "38rem";
|
2179 | comment: "Generic sizing token scale for UI components.";
|
2180 | name: "size-60";
|
2181 | altValue: "608px";
|
2182 | },
|
2183 | {
|
2184 | type: "size";
|
2185 | category: "sizing";
|
2186 | value: "44.5rem";
|
2187 | comment: "Generic sizing token scale for UI components.";
|
2188 | name: "size-70";
|
2189 | altValue: "712px";
|
2190 | },
|
2191 | {
|
2192 | type: "size";
|
2193 | category: "sizing";
|
2194 | value: "51rem";
|
2195 | comment: "Generic sizing token scale for UI components.";
|
2196 | name: "size-80";
|
2197 | altValue: "816px";
|
2198 | },
|
2199 | {
|
2200 | type: "size";
|
2201 | category: "sizing";
|
2202 | value: "57.5rem";
|
2203 | comment: "Generic sizing token scale for UI components.";
|
2204 | name: "size-90";
|
2205 | altValue: "920px";
|
2206 | },
|
2207 | {
|
2208 | type: "size";
|
2209 | category: "sizing";
|
2210 | value: "64rem";
|
2211 | comment: "Generic sizing token scale for UI components.";
|
2212 | name: "size-100";
|
2213 | altValue: "1024px";
|
2214 | },
|
2215 | {
|
2216 | type: "size";
|
2217 | category: "sizing";
|
2218 | value: "70.5rem";
|
2219 | comment: "Generic sizing token scale for UI components.";
|
2220 | name: "size-110";
|
2221 | altValue: "1128px";
|
2222 | },
|
2223 | {
|
2224 | type: "size";
|
2225 | category: "sizing";
|
2226 | value: "77rem";
|
2227 | comment: "Generic sizing token scale for UI components.";
|
2228 | name: "size-120";
|
2229 | altValue: "1232px";
|
2230 | },
|
2231 | {
|
2232 | type: "size";
|
2233 | category: "sizing";
|
2234 | value: "0.75rem";
|
2235 | comment: "Maps to line-height tokens 1:1";
|
2236 | name: "size-icon-05";
|
2237 | altValue: "12px";
|
2238 | },
|
2239 | {
|
2240 | type: "size";
|
2241 | category: "sizing";
|
2242 | value: "1rem";
|
2243 | comment: "Maps to line-height tokens 1:1";
|
2244 | name: "size-icon-10";
|
2245 | altValue: "16px";
|
2246 | },
|
2247 | {
|
2248 | type: "size";
|
2249 | category: "sizing";
|
2250 | value: "1.25rem";
|
2251 | comment: "Maps to line-height tokens 1:1";
|
2252 | name: "size-icon-20";
|
2253 | altValue: "20px";
|
2254 | },
|
2255 | {
|
2256 | type: "size";
|
2257 | category: "sizing";
|
2258 | value: "1.25rem";
|
2259 | comment: "Maps to line-height tokens 1:1";
|
2260 | name: "size-icon-30";
|
2261 | altValue: "20px";
|
2262 | },
|
2263 | {
|
2264 | type: "size";
|
2265 | category: "sizing";
|
2266 | value: "1.5rem";
|
2267 | comment: "Maps to line-height tokens 1:1";
|
2268 | name: "size-icon-40";
|
2269 | altValue: "24px";
|
2270 | },
|
2271 | {
|
2272 | type: "size";
|
2273 | category: "sizing";
|
2274 | value: "1.75rem";
|
2275 | comment: "Maps to line-height tokens 1:1";
|
2276 | name: "size-icon-50";
|
2277 | altValue: "28px";
|
2278 | },
|
2279 | {
|
2280 | type: "size";
|
2281 | category: "sizing";
|
2282 | value: "1.75rem";
|
2283 | comment: "Maps to line-height tokens 1:1";
|
2284 | name: "size-icon-60";
|
2285 | altValue: "28px";
|
2286 | },
|
2287 | {
|
2288 | type: "size";
|
2289 | category: "sizing";
|
2290 | value: "2rem";
|
2291 | comment: "Maps to line-height tokens 1:1";
|
2292 | name: "size-icon-70";
|
2293 | altValue: "32px";
|
2294 | },
|
2295 | {
|
2296 | type: "size";
|
2297 | category: "sizing";
|
2298 | value: "2.5rem";
|
2299 | comment: "Maps to line-height tokens 1:1";
|
2300 | name: "size-icon-80";
|
2301 | altValue: "40px";
|
2302 | },
|
2303 | {
|
2304 | type: "size";
|
2305 | category: "sizing";
|
2306 | value: "2.5rem";
|
2307 | comment: "Maps to line-height tokens 1:1";
|
2308 | name: "size-icon-90";
|
2309 | altValue: "40px";
|
2310 | },
|
2311 | {
|
2312 | type: "size";
|
2313 | category: "sizing";
|
2314 | value: "3.25rem";
|
2315 | comment: "Maps to line-height tokens 1:1";
|
2316 | name: "size-icon-100";
|
2317 | altValue: "52px";
|
2318 | },
|
2319 | {
|
2320 | type: "size";
|
2321 | category: "sizing";
|
2322 | value: "4rem";
|
2323 | comment: "Maps to line-height tokens 1:1";
|
2324 | name: "size-icon-110";
|
2325 | altValue: "64px";
|
2326 | },
|
2327 | {
|
2328 | type: "size";
|
2329 | category: "sizing";
|
2330 | value: "15rem";
|
2331 | comment: "Sizing token for sidebar width.";
|
2332 | name: "size-sidebar";
|
2333 | altValue: "240px";
|
2334 | },
|
2335 | {
|
2336 | type: "size";
|
2337 | category: "sizing";
|
2338 | value: "4.75rem";
|
2339 | comment: "Sizing token for the compact sidebar width.";
|
2340 | name: "size-sidebar-compact";
|
2341 | altValue: "76px";
|
2342 | },
|
2343 | {
|
2344 | type: "size";
|
2345 | category: "sizing";
|
2346 | value: 0;
|
2347 | comment: "Generic square sizing token scale for UI components.";
|
2348 | name: "size-square-0";
|
2349 | altValue: "0px";
|
2350 | },
|
2351 | {
|
2352 | type: "size";
|
2353 | category: "sizing";
|
2354 | value: "0.125rem";
|
2355 | comment: "Generic square sizing token scale for UI components.";
|
2356 | name: "size-square-10";
|
2357 | altValue: "2px";
|
2358 | },
|
2359 | {
|
2360 | type: "size";
|
2361 | category: "sizing";
|
2362 | value: "0.25rem";
|
2363 | comment: "Generic square sizing token scale for UI components.";
|
2364 | name: "size-square-20";
|
2365 | altValue: "4px";
|
2366 | },
|
2367 | {
|
2368 | type: "size";
|
2369 | category: "sizing";
|
2370 | value: "0.375rem";
|
2371 | comment: "Generic square sizing token scale for UI components.";
|
2372 | name: "size-square-25";
|
2373 | altValue: "6px";
|
2374 | },
|
2375 | {
|
2376 | type: "size";
|
2377 | category: "sizing";
|
2378 | value: "0.5rem";
|
2379 | comment: "Generic square sizing token scale for UI components.";
|
2380 | name: "size-square-30";
|
2381 | altValue: "8px";
|
2382 | },
|
2383 | {
|
2384 | type: "size";
|
2385 | category: "sizing";
|
2386 | value: "0.75rem";
|
2387 | comment: "Generic square sizing token scale for UI components.";
|
2388 | name: "size-square-40";
|
2389 | altValue: "12px";
|
2390 | },
|
2391 | {
|
2392 | type: "size";
|
2393 | category: "sizing";
|
2394 | value: "1rem";
|
2395 | comment: "Generic square sizing token scale for UI components.";
|
2396 | name: "size-square-50";
|
2397 | altValue: "16px";
|
2398 | },
|
2399 | {
|
2400 | type: "size";
|
2401 | category: "sizing";
|
2402 | value: "1.25rem";
|
2403 | comment: "Generic square sizing token scale for UI components.";
|
2404 | name: "size-square-60";
|
2405 | altValue: "20px";
|
2406 | },
|
2407 | {
|
2408 | type: "size";
|
2409 | category: "sizing";
|
2410 | value: "1.5rem";
|
2411 | comment: "Generic square sizing token scale for UI components.";
|
2412 | name: "size-square-70";
|
2413 | altValue: "24px";
|
2414 | },
|
2415 | {
|
2416 | type: "size";
|
2417 | category: "sizing";
|
2418 | value: "1.75rem";
|
2419 | comment: "Generic square sizing token scale for UI components.";
|
2420 | name: "size-square-80";
|
2421 | altValue: "28px";
|
2422 | },
|
2423 | {
|
2424 | type: "size";
|
2425 | category: "sizing";
|
2426 | value: "2rem";
|
2427 | comment: "Generic square sizing token scale for UI components.";
|
2428 | name: "size-square-90";
|
2429 | altValue: "32px";
|
2430 | },
|
2431 | {
|
2432 | type: "size";
|
2433 | category: "sizing";
|
2434 | value: "2.25rem";
|
2435 | comment: "Generic square sizing token scale for UI components.";
|
2436 | name: "size-square-100";
|
2437 | altValue: "36px";
|
2438 | },
|
2439 | {
|
2440 | type: "size";
|
2441 | category: "sizing";
|
2442 | value: "2.5rem";
|
2443 | comment: "Generic square sizing token scale for UI components.";
|
2444 | name: "size-square-110";
|
2445 | altValue: "40px";
|
2446 | },
|
2447 | {
|
2448 | type: "size";
|
2449 | category: "sizing";
|
2450 | value: "2.75rem";
|
2451 | comment: "Generic square sizing token scale for UI components.";
|
2452 | name: "size-square-120";
|
2453 | altValue: "44px";
|
2454 | },
|
2455 | {
|
2456 | type: "size";
|
2457 | category: "sizing";
|
2458 | value: "3rem";
|
2459 | comment: "Generic square sizing token scale for UI components.";
|
2460 | name: "size-square-130";
|
2461 | altValue: "48px";
|
2462 | },
|
2463 | {
|
2464 | type: "size";
|
2465 | category: "sizing";
|
2466 | value: "3.25rem";
|
2467 | comment: "Generic square sizing token scale for UI components.";
|
2468 | name: "size-square-140";
|
2469 | altValue: "52px";
|
2470 | },
|
2471 | {
|
2472 | type: "size";
|
2473 | category: "sizing";
|
2474 | value: "3.5rem";
|
2475 | comment: "Generic square sizing token scale for UI components.";
|
2476 | name: "size-square-150";
|
2477 | altValue: "56px";
|
2478 | },
|
2479 | {
|
2480 | type: "size";
|
2481 | category: "sizing";
|
2482 | value: "3.75rem";
|
2483 | comment: "Generic square sizing token scale for UI components.";
|
2484 | name: "size-square-160";
|
2485 | altValue: "60px";
|
2486 | },
|
2487 | {
|
2488 | type: "size";
|
2489 | category: "sizing";
|
2490 | value: "4rem";
|
2491 | comment: "Generic square sizing token scale for UI components.";
|
2492 | name: "size-square-170";
|
2493 | altValue: "64px";
|
2494 | },
|
2495 | {
|
2496 | type: "size";
|
2497 | category: "sizing";
|
2498 | value: "4.25rem";
|
2499 | comment: "Generic square sizing token scale for UI components.";
|
2500 | name: "size-square-180";
|
2501 | altValue: "68px";
|
2502 | },
|
2503 | {
|
2504 | type: "size";
|
2505 | category: "sizing";
|
2506 | value: "4.5rem";
|
2507 | comment: "Generic square sizing token scale for UI components.";
|
2508 | name: "size-square-190";
|
2509 | altValue: "72px";
|
2510 | },
|
2511 | {
|
2512 | type: "size";
|
2513 | category: "sizing";
|
2514 | value: "4.75rem";
|
2515 | comment: "Generic square sizing token scale for UI components.";
|
2516 | name: "size-square-200";
|
2517 | altValue: "76px";
|
2518 | },
|
2519 | {
|
2520 | type: "size";
|
2521 | category: "sizing";
|
2522 | value: "4.75rem";
|
2523 | comment: "Sizing token for the minimum topbar height.";
|
2524 | name: "size-topbar";
|
2525 | altValue: "76px";
|
2526 | }
|
2527 | ]
|
2528 | "spacings": [
|
2529 | {
|
2530 | category: "spacing";
|
2531 | type: "size";
|
2532 | value: 0;
|
2533 | name: "space-0";
|
2534 | altValue: "0px";
|
2535 | },
|
2536 | {
|
2537 | category: "spacing";
|
2538 | type: "size";
|
2539 | value: "0.125rem";
|
2540 | name: "space-10";
|
2541 | altValue: "2px";
|
2542 | },
|
2543 | {
|
2544 | category: "spacing";
|
2545 | type: "size";
|
2546 | value: "0.25rem";
|
2547 | name: "space-20";
|
2548 | altValue: "4px";
|
2549 | },
|
2550 | {
|
2551 | category: "spacing";
|
2552 | type: "size";
|
2553 | value: "0.5rem";
|
2554 | name: "space-30";
|
2555 | altValue: "8px";
|
2556 | },
|
2557 | {
|
2558 | category: "spacing";
|
2559 | type: "size";
|
2560 | value: "0.75rem";
|
2561 | name: "space-40";
|
2562 | altValue: "12px";
|
2563 | },
|
2564 | {
|
2565 | category: "spacing";
|
2566 | type: "size";
|
2567 | value: "1rem";
|
2568 | name: "space-50";
|
2569 | altValue: "16px";
|
2570 | },
|
2571 | {
|
2572 | category: "spacing";
|
2573 | type: "size";
|
2574 | value: "1.25rem";
|
2575 | name: "space-60";
|
2576 | altValue: "20px";
|
2577 | },
|
2578 | {
|
2579 | category: "spacing";
|
2580 | type: "size";
|
2581 | value: "1.5rem";
|
2582 | name: "space-70";
|
2583 | altValue: "24px";
|
2584 | },
|
2585 | {
|
2586 | category: "spacing";
|
2587 | type: "size";
|
2588 | value: "1.75rem";
|
2589 | name: "space-80";
|
2590 | altValue: "28px";
|
2591 | },
|
2592 | {
|
2593 | category: "spacing";
|
2594 | type: "size";
|
2595 | value: "2rem";
|
2596 | name: "space-90";
|
2597 | altValue: "32px";
|
2598 | },
|
2599 | {
|
2600 | category: "spacing";
|
2601 | type: "size";
|
2602 | value: "2.25rem";
|
2603 | name: "space-100";
|
2604 | altValue: "36px";
|
2605 | },
|
2606 | {
|
2607 | category: "spacing";
|
2608 | type: "size";
|
2609 | value: "2.5rem";
|
2610 | name: "space-110";
|
2611 | altValue: "40px";
|
2612 | },
|
2613 | {
|
2614 | category: "spacing";
|
2615 | type: "size";
|
2616 | value: "2.75rem";
|
2617 | name: "space-120";
|
2618 | altValue: "44px";
|
2619 | },
|
2620 | {
|
2621 | category: "spacing";
|
2622 | type: "size";
|
2623 | value: "3rem";
|
2624 | name: "space-130";
|
2625 | altValue: "48px";
|
2626 | },
|
2627 | {
|
2628 | category: "spacing";
|
2629 | type: "size";
|
2630 | value: "3.25rem";
|
2631 | name: "space-140";
|
2632 | altValue: "52px";
|
2633 | },
|
2634 | {
|
2635 | category: "spacing";
|
2636 | type: "size";
|
2637 | value: "3.5rem";
|
2638 | name: "space-150";
|
2639 | altValue: "56px";
|
2640 | },
|
2641 | {
|
2642 | category: "spacing";
|
2643 | type: "size";
|
2644 | value: "3.75rem";
|
2645 | name: "space-160";
|
2646 | altValue: "60px";
|
2647 | },
|
2648 | {
|
2649 | category: "spacing";
|
2650 | type: "size";
|
2651 | value: "4rem";
|
2652 | name: "space-170";
|
2653 | altValue: "64px";
|
2654 | },
|
2655 | {
|
2656 | category: "spacing";
|
2657 | type: "size";
|
2658 | value: "4.25rem";
|
2659 | name: "space-180";
|
2660 | altValue: "68px";
|
2661 | },
|
2662 | {
|
2663 | category: "spacing";
|
2664 | type: "size";
|
2665 | value: "4.5rem";
|
2666 | name: "space-190";
|
2667 | altValue: "72px";
|
2668 | },
|
2669 | {
|
2670 | category: "spacing";
|
2671 | type: "size";
|
2672 | value: "4.75rem";
|
2673 | name: "space-200";
|
2674 | altValue: "76px";
|
2675 | },
|
2676 | {
|
2677 | category: "spacing";
|
2678 | type: "size";
|
2679 | value: "-0.125rem";
|
2680 | name: "space-negative-10";
|
2681 | altValue: "-2px";
|
2682 | },
|
2683 | {
|
2684 | category: "spacing";
|
2685 | type: "size";
|
2686 | value: "-0.25rem";
|
2687 | name: "space-negative-20";
|
2688 | altValue: "-4px";
|
2689 | },
|
2690 | {
|
2691 | category: "spacing";
|
2692 | type: "size";
|
2693 | value: "-0.5rem";
|
2694 | name: "space-negative-30";
|
2695 | altValue: "-8px";
|
2696 | },
|
2697 | {
|
2698 | category: "spacing";
|
2699 | type: "size";
|
2700 | value: "-0.75rem";
|
2701 | name: "space-negative-40";
|
2702 | altValue: "-12px";
|
2703 | },
|
2704 | {
|
2705 | category: "spacing";
|
2706 | type: "size";
|
2707 | value: "-1rem";
|
2708 | name: "space-negative-50";
|
2709 | altValue: "-16px";
|
2710 | },
|
2711 | {
|
2712 | category: "spacing";
|
2713 | type: "size";
|
2714 | value: "-1.25rem";
|
2715 | name: "space-negative-60";
|
2716 | altValue: "-20px";
|
2717 | },
|
2718 | {
|
2719 | category: "spacing";
|
2720 | type: "size";
|
2721 | value: "-1.5rem";
|
2722 | name: "space-negative-70";
|
2723 | altValue: "-24px";
|
2724 | },
|
2725 | {
|
2726 | category: "spacing";
|
2727 | type: "size";
|
2728 | value: "-1.75rem";
|
2729 | name: "space-negative-80";
|
2730 | altValue: "-28px";
|
2731 | },
|
2732 | {
|
2733 | category: "spacing";
|
2734 | type: "size";
|
2735 | value: "-2rem";
|
2736 | name: "space-negative-90";
|
2737 | altValue: "-32px";
|
2738 | },
|
2739 | {
|
2740 | category: "spacing";
|
2741 | type: "size";
|
2742 | value: "-2.25rem";
|
2743 | name: "space-negative-100";
|
2744 | altValue: "-36px";
|
2745 | },
|
2746 | {
|
2747 | category: "spacing";
|
2748 | type: "size";
|
2749 | value: "-2.5rem";
|
2750 | name: "space-negative-110";
|
2751 | altValue: "-40px";
|
2752 | },
|
2753 | {
|
2754 | category: "spacing";
|
2755 | type: "size";
|
2756 | value: "-2.75rem";
|
2757 | name: "space-negative-120";
|
2758 | altValue: "-44px";
|
2759 | },
|
2760 | {
|
2761 | category: "spacing";
|
2762 | type: "size";
|
2763 | value: "-3rem";
|
2764 | name: "space-negative-130";
|
2765 | altValue: "-48px";
|
2766 | },
|
2767 | {
|
2768 | category: "spacing";
|
2769 | type: "size";
|
2770 | value: "-3.25rem";
|
2771 | name: "space-negative-140";
|
2772 | altValue: "-52px";
|
2773 | },
|
2774 | {
|
2775 | category: "spacing";
|
2776 | type: "size";
|
2777 | value: "-3.5rem";
|
2778 | name: "space-negative-150";
|
2779 | altValue: "-56px";
|
2780 | },
|
2781 | {
|
2782 | category: "spacing";
|
2783 | type: "size";
|
2784 | value: "-3.75rem";
|
2785 | name: "space-negative-160";
|
2786 | altValue: "-60px";
|
2787 | },
|
2788 | {
|
2789 | category: "spacing";
|
2790 | type: "size";
|
2791 | value: "-4rem";
|
2792 | name: "space-negative-170";
|
2793 | altValue: "-64px";
|
2794 | },
|
2795 | {
|
2796 | category: "spacing";
|
2797 | type: "size";
|
2798 | value: "-4.25rem";
|
2799 | name: "space-negative-180";
|
2800 | altValue: "-68px";
|
2801 | },
|
2802 | {
|
2803 | category: "spacing";
|
2804 | type: "size";
|
2805 | value: "-4.5rem";
|
2806 | name: "space-negative-190";
|
2807 | altValue: "-72px";
|
2808 | },
|
2809 | {
|
2810 | category: "spacing";
|
2811 | type: "size";
|
2812 | value: "-4.75rem";
|
2813 | name: "space-negative-200";
|
2814 | altValue: "-76px";
|
2815 | }
|
2816 | ]
|
2817 | "text-colors": [
|
2818 | {
|
2819 | type: "color";
|
2820 | category: "text-color";
|
2821 | value: "rgb(244, 244, 246)";
|
2822 | comment: "Body text color";
|
2823 | name: "color-text";
|
2824 | altValue: "#F4F4F6";
|
2825 | },
|
2826 | {
|
2827 | type: "color";
|
2828 | category: "text-color";
|
2829 | value: "rgb(18, 28, 45)";
|
2830 | comment: "Text color to be used on top of brand accent background colors such as color-background-brand-10 only.";
|
2831 | text_contrast_pairing: ["color-background-brand-10","color-background-brand-20","color-background-brand-30"];
|
2832 | name: "color-text-brand";
|
2833 | altValue: "#121C2D";
|
2834 | },
|
2835 | {
|
2836 | type: "color";
|
2837 | category: "text-color";
|
2838 | value: "rgb(242, 47, 70)";
|
2839 | comment: "Twilio brand red, accessible on large text only.";
|
2840 | name: "color-text-brand-highlight";
|
2841 | altValue: "#F22F46";
|
2842 | },
|
2843 | {
|
2844 | type: "color";
|
2845 | category: "text-color";
|
2846 | value: "rgb(255, 255, 255)";
|
2847 | comment: "Text color used on any brand color";
|
2848 | name: "color-text-brand-inverse";
|
2849 | altValue: "#FFFFFF";
|
2850 | },
|
2851 | {
|
2852 | type: "color";
|
2853 | category: "text-color";
|
2854 | value: "rgb(225, 227, 234)";
|
2855 | comment: "Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.";
|
2856 | name: "color-text-decorative-10";
|
2857 | altValue: "#E1E3EA";
|
2858 | },
|
2859 | {
|
2860 | type: "color";
|
2861 | category: "text-color";
|
2862 | value: "rgb(204, 228, 255)";
|
2863 | comment: "Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.";
|
2864 | name: "color-text-decorative-20";
|
2865 | altValue: "#CCE4FF";
|
2866 | },
|
2867 | {
|
2868 | type: "color";
|
2869 | category: "text-color";
|
2870 | value: "rgb(162, 246, 195)";
|
2871 | comment: "Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.";
|
2872 | name: "color-text-decorative-30";
|
2873 | altValue: "#A2F6C3";
|
2874 | },
|
2875 | {
|
2876 | type: "color";
|
2877 | category: "text-color";
|
2878 | value: "rgb(231, 220, 250)";
|
2879 | comment: "Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.";
|
2880 | name: "color-text-decorative-40";
|
2881 | altValue: "#E7DCFA";
|
2882 | },
|
2883 | {
|
2884 | type: "color";
|
2885 | category: "text-color";
|
2886 | value: "rgb(235, 86, 86)";
|
2887 | comment: "Destructive text.";
|
2888 | text_contrast_pairing: ["color-background","color-background-body","color-background-neutral-weakest","color-background-warning-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"];
|
2889 | name: "color-text-destructive";
|
2890 | altValue: "#EB5656";
|
2891 | },
|
2892 | {
|
2893 | type: "color";
|
2894 | category: "text-color";
|
2895 | value: "rgb(246, 177, 177)";
|
2896 | comment: "Strong shade of destructive text.";
|
2897 | text_contrast_pairing: ["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"];
|
2898 | name: "color-text-destructive-strong";
|
2899 | altValue: "#F6B1B1";
|
2900 | },
|
2901 | {
|
2902 | type: "color";
|
2903 | category: "text-color";
|
2904 | value: "rgb(254, 236, 236)";
|
2905 | comment: "Stronger shade of destructive text.";
|
2906 | text_contrast_pairing: ["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"];
|
2907 | name: "color-text-destructive-stronger";
|
2908 | altValue: "#FEECEC";
|
2909 | },
|
2910 | {
|
2911 | type: "color";
|
2912 | category: "text-color";
|
2913 | value: "rgb(255, 255, 255)";
|
2914 | comment: "Strongest shade of destructive text.";
|
2915 | text_contrast_pairing: ["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"];
|
2916 | name: "color-text-destructive-strongest";
|
2917 | altValue: "#FFFFFF";
|
2918 | },
|
2919 | {
|
2920 | type: "color";
|
2921 | category: "text-color";
|
2922 | value: "rgb(57, 71, 98)";
|
2923 | comment: "Weak shade of destructive text.";
|
2924 | name: "color-text-destructive-weak";
|
2925 | altValue: "#394762";
|
2926 | },
|
2927 | {
|
2928 | type: "color";
|
2929 | category: "text-color";
|
2930 | value: "rgb(235, 86, 86)";
|
2931 | comment: "Error text for inputs and error misc";
|
2932 | name: "color-text-error";
|
2933 | altValue: "#EB5656";
|
2934 | },
|
2935 | {
|
2936 | type: "color";
|
2937 | category: "text-color";
|
2938 | value: "rgb(246, 177, 177)";
|
2939 | comment: "Strong error text for inputs and error misc";
|
2940 | name: "color-text-error-strong";
|
2941 | altValue: "#F6B1B1";
|
2942 | },
|
2943 | {
|
2944 | type: "color";
|
2945 | category: "text-color";
|
2946 | value: "rgb(254, 236, 236)";
|
2947 | comment: "Stronger error text for inputs and error misc";
|
2948 | name: "color-text-error-stronger";
|
2949 | altValue: "#FEECEC";
|
2950 | },
|
2951 | {
|
2952 | type: "color";
|
2953 | category: "text-color";
|
2954 | value: "rgb(254, 236, 236)";
|
2955 | comment: "Strongest error text for inputs and error misc.";
|
2956 | name: "color-text-error-strongest";
|
2957 | altValue: "#FEECEC";
|
2958 | },
|
2959 | {
|
2960 | type: "color";
|
2961 | category: "text-color";
|
2962 | value: "rgb(235, 86, 86)";
|
2963 | comment: "Weak error text for inputs and error misc";
|
2964 | name: "color-text-error-weak";
|
2965 | altValue: "#EB5656";
|
2966 | },
|
2967 | {
|
2968 | type: "color";
|
2969 | category: "text-color";
|
2970 | value: "rgb(136, 145, 170)";
|
2971 | comment: "Default icon color.";
|
2972 | name: "color-text-icon";
|
2973 | altValue: "#8891AA";
|
2974 | },
|
2975 | {
|
2976 | type: "color";
|
2977 | category: "text-color";
|
2978 | value: "rgb(54, 213, 118)";
|
2979 | comment: "Icon color for indicating a available status";
|
2980 | name: "color-text-icon-available";
|
2981 | altValue: "#36D576";
|
2982 | },
|
2983 | {
|
2984 | type: "color";
|
2985 | category: "text-color";
|
2986 | value: "rgb(242, 47, 70)";
|
2987 | comment: "Twilio brand red icon color used for the Twilio logo.";
|
2988 | uicontrol_contrast_pairing: ["color-background","color-background-body"];
|
2989 | name: "color-text-icon-brand-highlight";
|
2990 | altValue: "#F22F46";
|
2991 | },
|
2992 | {
|
2993 | type: "color";
|
2994 | category: "text-color";
|
2995 | value: "rgb(255, 255, 255)";
|
2996 | comment: "Twilio brand icon color used for the Twilio logo on inverse backgrounds.";
|
2997 | text_contrast_pairing: ["color-background-body-inverse"];
|
2998 | name: "color-text-icon-brand-inverse";
|
2999 | altValue: "#FFFFFF";
|
3000 | },
|
3001 | {
|
3002 | type: "color";
|
3003 | category: "text-color";
|
3004 | value: "rgb(255, 179, 122)";
|
3005 | comment: "Icon color for indicating a busy status";
|
3006 | name: "color-text-icon-busy";
|
3007 | altValue: "#FFB37A";
|
3008 | },
|
3009 | {
|
3010 | type: "color";
|
3011 | category: "text-color";
|
3012 | value: "rgb(235, 86, 86)";
|
3013 | comment: "Icon color for indicating an error.";
|
3014 | name: "color-text-icon-error";
|
3015 | altValue: "#EB5656";
|
3016 | },
|
3017 | {
|
3018 | type: "color";
|
3019 | category: "text-color";
|
3020 | value: "rgb(225, 227, 234)";
|
3021 | comment: "Default icon color for inverse backgrounds.";
|
3022 | name: "color-text-icon-inverse";
|
3023 | altValue: "#E1E3EA";
|
3024 | },
|
3025 | {
|
3026 | type: "color";
|
3027 | category: "text-color";
|
3028 | value: "rgb(102, 179, 255)";
|
3029 | comment: "Icon color for being neutral.";
|
3030 | name: "color-text-icon-neutral";
|
3031 | altValue: "#66B3FF";
|
3032 | },
|
3033 | {
|
3034 | type: "color";
|
3035 | category: "text-color";
|
3036 | value: "rgb(200, 175, 240)";
|
3037 | comment: "Icon color for indicating a new status.";
|
3038 | name: "color-text-icon-new";
|
3039 | altValue: "#C8AFF0";
|
3040 | },
|
3041 | {
|
3042 | type: "color";
|
3043 | category: "text-color";
|
3044 | value: "rgb(244, 244, 246)";
|
3045 | comment: "Icon color for indicating a offline status";
|
3046 | name: "color-text-icon-offline";
|
3047 | altValue: "#F4F4F6";
|
3048 | },
|
3049 | {
|
3050 | type: "color";
|
3051 | category: "text-color";
|
3052 | value: "rgb(54, 213, 118)";
|
3053 | comment: "Icon color for indicating success.";
|
3054 | name: "color-text-icon-success";
|
3055 | altValue: "#36D576";
|
3056 | },
|
3057 | {
|
3058 | type: "color";
|
3059 | category: "text-color";
|
3060 | value: "rgb(235, 86, 86)";
|
3061 | comment: "Icon color for indicating a unavailable status";
|
3062 | name: "color-text-icon-unavailable";
|
3063 | altValue: "#EB5656";
|
3064 | },
|
3065 | {
|
3066 | type: "color";
|
3067 | category: "text-color";
|
3068 | value: "rgb(255, 179, 122)";
|
3069 | comment: "Icon color for indicating a warning.";
|
3070 | name: "color-text-icon-warning";
|
3071 | altValue: "#FFB37A";
|
3072 | },
|
3073 | {
|
3074 | type: "color";
|
3075 | category: "text-color";
|
3076 | value: "rgb(255, 255, 255)";
|
3077 | comment: "Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.";
|
3078 | text_contrast_pairing: ["color-background-body-inverse","color-background-brand","color-background-error","color-background-primary","color-background-destructive"];
|
3079 | name: "color-text-inverse";
|
3080 | altValue: "#FFFFFF";
|
3081 | },
|
3082 | {
|
3083 | type: "color";
|
3084 | category: "text-color";
|
3085 | value: "rgb(200, 175, 240)";
|
3086 | comment: "Inverse color for indicating a new status.";
|
3087 | name: "color-text-inverse-new";
|
3088 | altValue: "#C8AFF0";
|
3089 | },
|
3090 | {
|
3091 | type: "color";
|
3092 | category: "text-color";
|
3093 | value: "rgb(202, 205, 216)";
|
3094 | comment: "Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.";
|
3095 | text_contrast_pairing: ["color-background-body-inverse","color-background-brand"];
|
3096 | name: "color-text-inverse-weak";
|
3097 | altValue: "#CACDD8";
|
3098 | },
|
3099 | {
|
3100 | type: "color";
|
3101 | category: "text-color";
|
3102 | value: "rgb(136, 145, 170)";
|
3103 | comment: "Weaker inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.";
|
3104 | name: "color-text-inverse-weaker";
|
3105 | altValue: "#8891AA";
|
3106 | },
|
3107 | {
|
3108 | type: "color";
|
3109 | category: "text-color";
|
3110 | value: "rgb(75, 86, 113)";
|
3111 | comment: "Weakest inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.";
|
3112 | name: "color-text-inverse-weakest";
|
3113 | altValue: "#4B5671";
|
3114 | },
|
3115 | {
|
3116 | type: "color";
|
3117 | category: "text-color";
|
3118 | value: "rgb(0, 140, 255)";
|
3119 | comment: "Link text";
|
3120 | name: "color-text-link";
|
3121 | altValue: "#008CFF";
|
3122 | },
|
3123 | {
|
3124 | type: "color";
|
3125 | category: "text-color";
|
3126 | value: "rgb(235, 86, 86)";
|
3127 | comment: "Destructive link text";
|
3128 | name: "color-text-link-destructive";
|
3129 | altValue: "#EB5656";
|
3130 | },
|
3131 | {
|
3132 | type: "color";
|
3133 | category: "text-color";
|
3134 | value: "rgb(246, 177, 177)";
|
3135 | comment: "Strong shade of destructive link text to be used in interactions";
|
3136 | name: "color-text-link-destructive-strong";
|
3137 | altValue: "#F6B1B1";
|
3138 | },
|
3139 | {
|
3140 | type: "color";
|
3141 | category: "text-color";
|
3142 | value: "rgb(254, 236, 236)";
|
3143 | comment: "Stronger shade of destructive link text to be used in interactions";
|
3144 | name: "color-text-link-destructive-stronger";
|
3145 | altValue: "#FEECEC";
|
3146 | },
|
3147 | {
|
3148 | type: "color";
|
3149 | category: "text-color";
|
3150 | value: "rgb(255, 255, 255)";
|
3151 | comment: "Strongest shade of destructive link text to be used in interactions";
|
3152 | name: "color-text-link-destructive-strongest";
|
3153 | altValue: "#FFFFFF";
|
3154 | },
|
3155 | {
|
3156 | type: "color";
|
3157 | category: "text-color";
|
3158 | value: "rgb(57, 71, 98)";
|
3159 | comment: "Weak shade of destructive link text to be used in interactions";
|
3160 | name: "color-text-link-destructive-weak";
|
3161 | altValue: "#394762";
|
3162 | },
|
3163 | {
|
3164 | type: "color";
|
3165 | category: "text-color";
|
3166 | value: "rgb(153, 205, 255)";
|
3167 | comment: "Strong shade of link text to be used in interactions";
|
3168 | name: "color-text-link-strong";
|
3169 | altValue: "#99CDFF";
|
3170 | },
|
3171 | {
|
3172 | type: "color";
|
3173 | category: "text-color";
|
3174 | value: "rgb(235, 244, 255)";
|
3175 | comment: "Stronger shade of link text to be used in interactions";
|
3176 | name: "color-text-link-stronger";
|
3177 | altValue: "#EBF4FF";
|
3178 | },
|
3179 | {
|
3180 | type: "color";
|
3181 | category: "text-color";
|
3182 | value: "rgb(255, 255, 255)";
|
3183 | comment: "Strongest shade of link text to be used in interactions";
|
3184 | name: "color-text-link-strongest";
|
3185 | altValue: "#FFFFFF";
|
3186 | },
|
3187 | {
|
3188 | type: "color";
|
3189 | category: "text-color";
|
3190 | value: "rgb(57, 71, 98)";
|
3191 | comment: "Weak shade of link text to be used in interactions";
|
3192 | name: "color-text-link-weak";
|
3193 | altValue: "#394762";
|
3194 | },
|
3195 | {
|
3196 | type: "color";
|
3197 | category: "text-color";
|
3198 | value: "rgb(204, 228, 255)";
|
3199 | comment: "Color for text indicating a neutral status.";
|
3200 | name: "color-text-neutral";
|
3201 | altValue: "#CCE4FF";
|
3202 | },
|
3203 | {
|
3204 | type: "color";
|
3205 | category: "text-color";
|
3206 | value: "rgb(231, 220, 250)";
|
3207 | comment: "Color for text indicating a new status.";
|
3208 | name: "color-text-new";
|
3209 | altValue: "#E7DCFA";
|
3210 | },
|
3211 | {
|
3212 | type: "color";
|
3213 | category: "text-color";
|
3214 | value: "rgb(0, 140, 255)";
|
3215 | comment: "Primary text.";
|
3216 | name: "color-text-primary";
|
3217 | altValue: "#008CFF";
|
3218 | },
|
3219 | {
|
3220 | type: "color";
|
3221 | category: "text-color";
|
3222 | value: "rgb(153, 205, 255)";
|
3223 | comment: "Strong primary text.";
|
3224 | name: "color-text-primary-strong";
|
3225 | altValue: "#99CDFF";
|
3226 | },
|
3227 | {
|
3228 | type: "color";
|
3229 | category: "text-color";
|
3230 | value: "rgb(153, 205, 255)";
|
3231 | comment: "Stronger primary text.";
|
3232 | name: "color-text-primary-stronger";
|
3233 | altValue: "#99CDFF";
|
3234 | },
|
3235 | {
|
3236 | type: "color";
|
3237 | category: "text-color";
|
3238 | value: "rgb(255, 255, 255)";
|
3239 | comment: "Strongest primary text.";
|
3240 | name: "color-text-primary-strongest";
|
3241 | altValue: "#FFFFFF";
|
3242 | },
|
3243 | {
|
3244 | type: "color";
|
3245 | category: "text-color";
|
3246 | value: "rgb(57, 71, 98)";
|
3247 | comment: "Weak primary text.";
|
3248 | name: "color-text-primary-weak";
|
3249 | altValue: "#394762";
|
3250 | },
|
3251 | {
|
3252 | type: "color";
|
3253 | category: "text-color";
|
3254 | value: "rgb(255, 233, 128)";
|
3255 | comment: "Text color for the subaccount badge";
|
3256 | name: "color-text-subaccount";
|
3257 | altValue: "#FFE980";
|
3258 | },
|
3259 | {
|
3260 | type: "color";
|
3261 | category: "text-color";
|
3262 | value: "rgb(162, 246, 195)";
|
3263 | comment: "Text color for success text.";
|
3264 | name: "color-text-success";
|
3265 | altValue: "#A2F6C3";
|
3266 | },
|
3267 | {
|
3268 | type: "color";
|
3269 | category: "text-color";
|
3270 | value: "rgb(255, 255, 255)";
|
3271 | comment: "Text color for user avatar.";
|
3272 | name: "color-text-user";
|
3273 | altValue: "#FFFFFF";
|
3274 | },
|
3275 | {
|
3276 | type: "color";
|
3277 | category: "text-color";
|
3278 | value: "rgb(255, 179, 122)";
|
3279 | comment: "Color for warning text.";
|
3280 | name: "color-text-warning";
|
3281 | altValue: "#FFB37A";
|
3282 | },
|
3283 | {
|
3284 | type: "color";
|
3285 | category: "text-color";
|
3286 | value: "rgb(250, 194, 160)";
|
3287 | comment: "Color for dark warning text.";
|
3288 | name: "color-text-warning-strong";
|
3289 | altValue: "#FAC2A0";
|
3290 | },
|
3291 | {
|
3292 | type: "color";
|
3293 | category: "text-color";
|
3294 | value: "rgb(136, 145, 170)";
|
3295 | comment: "Weak body text for visual hierarchy.";
|
3296 | name: "color-text-weak";
|
3297 | altValue: "#8891AA";
|
3298 | },
|
3299 | {
|
3300 | type: "color";
|
3301 | category: "text-color";
|
3302 | value: "rgb(57, 71, 98)";
|
3303 | comment: "Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.";
|
3304 | name: "color-text-weaker";
|
3305 | altValue: "#394762";
|
3306 | },
|
3307 | {
|
3308 | type: "color";
|
3309 | category: "text-color";
|
3310 | value: "rgb(13, 19, 28)";
|
3311 | comment: "Weakest body text for visual hierarchy. Inaccessible unless used on disabled controls.";
|
3312 | name: "color-text-weakest";
|
3313 | altValue: "#0D131C";
|
3314 | }
|
3315 | ]
|
3316 | "z-indices": [
|
3317 | {
|
3318 | type: "z-index";
|
3319 | category: "z-index";
|
3320 | value: 0;
|
3321 | name: "z-index-0";
|
3322 | altValue: null;
|
3323 | },
|
3324 | {
|
3325 | type: "z-index";
|
3326 | category: "z-index";
|
3327 | value: 10;
|
3328 | name: "z-index-10";
|
3329 | altValue: null;
|
3330 | },
|
3331 | {
|
3332 | type: "z-index";
|
3333 | category: "z-index";
|
3334 | value: 20;
|
3335 | name: "z-index-20";
|
3336 | altValue: null;
|
3337 | },
|
3338 | {
|
3339 | type: "z-index";
|
3340 | category: "z-index";
|
3341 | value: 30;
|
3342 | name: "z-index-30";
|
3343 | altValue: null;
|
3344 | },
|
3345 | {
|
3346 | type: "z-index";
|
3347 | category: "z-index";
|
3348 | value: 40;
|
3349 | name: "z-index-40";
|
3350 | altValue: null;
|
3351 | },
|
3352 | {
|
3353 | type: "z-index";
|
3354 | category: "z-index";
|
3355 | value: 50;
|
3356 | name: "z-index-50";
|
3357 | altValue: null;
|
3358 | },
|
3359 | {
|
3360 | type: "z-index";
|
3361 | category: "z-index";
|
3362 | value: 60;
|
3363 | name: "z-index-60";
|
3364 | altValue: null;
|
3365 | },
|
3366 | {
|
3367 | type: "z-index";
|
3368 | category: "z-index";
|
3369 | value: 70;
|
3370 | name: "z-index-70";
|
3371 | altValue: null;
|
3372 | },
|
3373 | {
|
3374 | type: "z-index";
|
3375 | category: "z-index";
|
3376 | value: 80;
|
3377 | name: "z-index-80";
|
3378 | altValue: null;
|
3379 | },
|
3380 | {
|
3381 | type: "z-index";
|
3382 | category: "z-index";
|
3383 | value: 90;
|
3384 | name: "z-index-90";
|
3385 | altValue: null;
|
3386 | }
|
3387 | ]}
|
3388 | }
|
3389 | export default Tokens; |
\ | No newline at end of file |