UNPKG

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