UNPKG

77.4 kBTypeScriptView Raw
1declare const Tokens: {
2"tokens":{"background-colors": [
3 {
4 type: "color";
5 category: "background-color";
6 value: "rgb(244, 246, 250)";
7 comment: "Default background color for any container.";
8 name: "color-background";
9 altValue: "#F4F6FA";
10},
11{
12 type: "color";
13 category: "background-color";
14 value: "rgb(82, 189, 148)";
15 comment: "Background color used to represent an entity or person as \"available\".";
16 name: "color-background-available";
17 altValue: "#52BD94";
18},
19{
20 type: "color";
21 category: "background-color";
22 value: "rgb(255, 255, 255)";
23 comment: "Background color used for the main page body.";
24 name: "color-background-body";
25 altValue: "#FFFFFF";
26},
27{
28 type: "color";
29 category: "background-color";
30 value: "rgb(16, 24, 64)";
31 comment: "Inverse background color used for the main page body.";
32 name: "color-background-body-inverse";
33 altValue: "#101840";
34},
35{
36 type: "color";
37 category: "background-color";
38 value: "rgb(71, 77, 102)";
39 comment: "Primary brand background, accessible with inverse text.";
40 name: "color-background-brand";
41 altValue: "#474D66";
42},
43{
44 type: "color";
45 category: "background-color";
46 value: "rgb(82, 189, 148)";
47 comment: "Highlight brand background, accessible with black text.";
48 name: "color-background-brand-highlight";
49 altValue: "#52BD94";
50},
51{
52 type: "color";
53 category: "background-color";
54 value: "rgb(220, 242, 234)";
55 comment: "Weakest background color used for brand highlights.";
56 name: "color-background-brand-highlight-weakest";
57 altValue: "#DCF2EA";
58},
59{
60 type: "color";
61 category: "background-color";
62 value: "rgb(3, 11, 93)";
63 comment: "Strong primary brand background, accessible with inverse text.";
64 name: "color-background-brand-strong";
65 altValue: "#030B5D";
66},
67{
68 type: "color";
69 category: "background-color";
70 value: "rgb(6, 3, 58)";
71 comment: "Stronger primary brand background, accessible with inverse text.";
72 name: "color-background-brand-stronger";
73 altValue: "#06033A";
74},
75{
76 type: "color";
77 category: "background-color";
78 value: "rgb(222, 117, 72)";
79 comment: "Background color used to represent an entity or person as \"busy\".";
80 name: "color-background-busy";
81 altValue: "#DE7548";
82},
83{
84 type: "color";
85 category: "background-color";
86 value: "rgb(244, 246, 250)";
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: "#F4F6FA";
90},
91{
92 type: "color";
93 category: "background-color";
94 value: "rgb(243, 246, 255)";
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: "#F3F6FF";
98},
99{
100 type: "color";
101 category: "background-color";
102 value: "rgb(238, 248, 244)";
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: "#EEF8F4";
106},
107{
108 type: "color";
109 category: "background-color";
110 value: "rgb(248, 247, 253)";
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: "#F8F7FD";
114},
115{
116 type: "color";
117 category: "background-color";
118 value: "rgb(209, 67, 67)";
119 comment: "Background color used for destructive actions or highlights.";
120 name: "color-background-destructive";
121 altValue: "#D14343";
122},
123{
124 type: "color";
125 category: "background-color";
126 value: "rgb(167, 54, 54)";
127 comment: "Strong background color used for destructive actions or highlights.";
128 name: "color-background-destructive-strong";
129 altValue: "#A73636";
130},
131{
132 type: "color";
133 category: "background-color";
134 value: "rgb(125, 40, 40)";
135 comment: "Stronger background color used for destructive actions or highlights.";
136 name: "color-background-destructive-stronger";
137 altValue: "#7D2828";
138},
139{
140 type: "color";
141 category: "background-color";
142 value: "rgb(79, 21, 21)";
143 comment: "Strongest background color used for destructive actions or highlights.";
144 name: "color-background-destructive-strongest";
145 altValue: "#4F1515";
146},
147{
148 type: "color";
149 category: "background-color";
150 value: "rgb(244, 182, 182)";
151 comment: "Weak background color used for destructive actions or highlights.";
152 name: "color-background-destructive-weak";
153 altValue: "#F4B6B6";
154},
155{
156 type: "color";
157 category: "background-color";
158 value: "rgb(249, 218, 218)";
159 comment: "Weaker background color used for destructive actions or highlights.";
160 name: "color-background-destructive-weaker";
161 altValue: "#F9DADA";
162},
163{
164 type: "color";
165 category: "background-color";
166 value: "rgb(253, 244, 244)";
167 comment: "Weakest background color used for destructive actions or highlights.";
168 name: "color-background-destructive-weakest";
169 altValue: "#FDF4F4";
170},
171{
172 type: "color";
173 category: "background-color";
174 value: "rgb(209, 67, 67)";
175 comment: "Error background color.";
176 name: "color-background-error";
177 altValue: "#D14343";
178},
179{
180 type: "color";
181 category: "background-color";
182 value: "rgb(167, 54, 54)";
183 comment: "Strong error background color.";
184 name: "color-background-error-strong";
185 altValue: "#A73636";
186},
187{
188 type: "color";
189 category: "background-color";
190 value: "rgb(125, 40, 40)";
191 comment: "Stronger error background color.";
192 name: "color-background-error-stronger";
193 altValue: "#7D2828";
194},
195{
196 type: "color";
197 category: "background-color";
198 value: "rgb(49, 12, 12)";
199 comment: "Strongest error background color.";
200 name: "color-background-error-strongest";
201 altValue: "#310C0C";
202},
203{
204 type: "color";
205 category: "background-color";
206 value: "rgb(253, 244, 244)";
207 comment: "Weakest error background color.";
208 name: "color-background-error-weakest";
209 altValue: "#FDF4F4";
210},
211{
212 type: "color";
213 category: "background-color";
214 value: "rgb(16, 24, 64)";
215 comment: "Inverse background color for any container. Must be used on color-background-body-inverse.";
216 name: "color-background-inverse";
217 altValue: "#101840";
218},
219{
220 type: "color";
221 category: "background-color";
222 value: "rgb(71, 77, 102)";
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: "#474D66";
226},
227{
228 type: "color";
229 category: "background-color";
230 value: "rgb(105, 111, 140)";
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: "#696F8C";
234},
235{
236 type: "color";
237 category: "background-color";
238 value: "rgb(244, 246, 250)";
239 comment: "Weakest neutral background color.";
240 name: "color-background-neutral-weakest";
241 altValue: "#F4F6FA";
242},
243{
244 type: "color";
245 category: "background-color";
246 value: "rgb(231, 228, 249)";
247 comment: "Background color for indicating a new status.";
248 name: "color-background-new";
249 altValue: "#E7E4F9";
250},
251{
252 type: "color";
253 category: "background-color";
254 value: "rgb(250, 247, 253)";
255 comment: "Weakest background color for indicating a new status.";
256 name: "color-background-new-weakest";
257 altValue: "#FAF7FD";
258},
259{
260 type: "color";
261 category: "background-color";
262 value: "rgb(193, 196, 214)";
263 comment: "Color used to represent an entity or person as \"offline\".";
264 name: "color-background-offline";
265 altValue: "#C1C4D6";
266},
267{
268 type: "color";
269 category: "background-color";
270 value: "rgba(71, 77, 102, 0.64)";
271 comment: "Default background for overlays.";
272 name: "color-background-overlay";
273 altValue: "#474D66A3";
274},
275{
276 type: "color";
277 category: "background-color";
278 value: "rgb(51, 102, 255)";
279 comment: "Background for primary actions or highlights.";
280 name: "color-background-primary";
281 altValue: "#3366FF";
282},
283{
284 type: "color";
285 category: "background-color";
286 value: "rgb(41, 82, 204)";
287 comment: "Strong background for primary actions or highlights.";
288 name: "color-background-primary-strong";
289 altValue: "#2952CC";
290},
291{
292 type: "color";
293 category: "background-color";
294 value: "rgb(31, 61, 153)";
295 comment: "Stronger background for primary actions or highlights.";
296 name: "color-background-primary-stronger";
297 altValue: "#1F3D99";
298},
299{
300 type: "color";
301 category: "background-color";
302 value: "rgb(12, 30, 86)";
303 comment: "Strongest background for primary actions or highlights.";
304 name: "color-background-primary-strongest";
305 altValue: "#0C1E56";
306},
307{
308 type: "color";
309 category: "background-color";
310 value: "rgb(214, 224, 255)";
311 comment: "Weak background for primary actions or highlights.";
312 name: "color-background-primary-weak";
313 altValue: "#D6E0FF";
314},
315{
316 type: "color";
317 category: "background-color";
318 value: "rgb(235, 240, 255)";
319 comment: "Weaker background for primary actions or highlights.";
320 name: "color-background-primary-weaker";
321 altValue: "#EBF0FF";
322},
323{
324 type: "color";
325 category: "background-color";
326 value: "rgb(243, 246, 255)";
327 comment: "Weakest background for primary actions or highlights.";
328 name: "color-background-primary-weakest";
329 altValue: "#F3F6FF";
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(250, 251, 255)";
343 comment: "Background color for alternative striped rows.";
344 name: "color-background-row-striped";
345 altValue: "#FAFBFF";
346},
347{
348 type: "color";
349 category: "background-color";
350 value: "rgb(230, 232, 240)";
351 comment: "Strong default background color.";
352 name: "color-background-strong";
353 altValue: "#E6E8F0";
354},
355{
356 type: "color";
357 category: "background-color";
358 value: "rgb(193, 196, 214)";
359 comment: "Stronger default background color.";
360 name: "color-background-stronger";
361 altValue: "#C1C4D6";
362},
363{
364 type: "color";
365 category: "background-color";
366 value: "rgb(105, 111, 140)";
367 comment: "Strongest default background color.";
368 name: "color-background-strongest";
369 altValue: "#696F8C";
370},
371{
372 type: "color";
373 category: "background-color";
374 value: "rgb(255, 239, 210)";
375 comment: "Subaccount background color.";
376 name: "color-background-subaccount";
377 altValue: "#FFEFD2";
378},
379{
380 type: "color";
381 category: "background-color";
382 value: "rgb(82, 189, 148)";
383 comment: "Success background color.";
384 name: "color-background-success";
385 altValue: "#52BD94";
386},
387{
388 type: "color";
389 category: "background-color";
390 value: "rgb(238, 248, 244)";
391 comment: "Weakest success background color.";
392 name: "color-background-success-weakest";
393 altValue: "#EEF8F4";
394},
395{
396 type: "color";
397 category: "background-color";
398 value: "rgb(220, 242, 234)";
399 comment: "Trial account background color.";
400 name: "color-background-trial";
401 altValue: "#DCF2EA";
402},
403{
404 type: "color";
405 category: "background-color";
406 value: "rgb(209, 67, 67)";
407 comment: "Color used to represent an entity or person as \"unavailable\".";
408 name: "color-background-unavailable";
409 altValue: "#D14343";
410},
411{
412 type: "color";
413 category: "background-color";
414 value: "rgb(231, 228, 249)";
415 comment: "User avatar background color.";
416 name: "color-background-user";
417 altValue: "#E7E4F9";
418},
419{
420 type: "color";
421 category: "background-color";
422 value: "rgb(222, 117, 72)";
423 comment: "Warning background color";
424 name: "color-background-warning";
425 altValue: "#DE7548";
426},
427{
428 type: "color";
429 category: "background-color";
430 value: "rgb(253, 247, 244)";
431 comment: "Weakest warning background color.";
432 name: "color-background-warning-weakest";
433 altValue: "#FDF7F4";
434},
435{
436 type: "color";
437 category: "background-color";
438 value: "rgb(249, 250, 252)";
439 comment: "Weak default background color.";
440 name: "color-background-weak";
441 altValue: "#F9FAFC";
442}
443]
444"border-colors": [
445 {
446 type: "color";
447 category: "border-color";
448 value: "rgb(216, 218, 229)";
449 comment: "Default border color";
450 name: "color-border";
451 altValue: "#D8DAE5";
452},
453{
454 type: "color";
455 category: "border-color";
456 value: "rgb(216, 218, 229)";
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: "#D8DAE5";
460},
461{
462 type: "color";
463 category: "border-color";
464 value: "rgb(214, 224, 255)";
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: "#D6E0FF";
468},
469{
470 type: "color";
471 category: "border-color";
472 value: "rgb(238, 248, 244)";
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: "#EEF8F4";
476},
477{
478 type: "color";
479 category: "border-color";
480 value: "rgb(231, 228, 249)";
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: "#E7E4F9";
484},
485{
486 type: "color";
487 category: "border-color";
488 value: "rgb(209, 67, 67)";
489 comment: "Destructive border color";
490 name: "color-border-destructive";
491 altValue: "#D14343";
492},
493{
494 type: "color";
495 category: "border-color";
496 value: "rgb(167, 54, 54)";
497 comment: "Destructive focus border color";
498 name: "color-border-destructive-strong";
499 altValue: "#A73636";
500},
501{
502 type: "color";
503 category: "border-color";
504 value: "rgb(125, 40, 40)";
505 comment: "Stronger destructive hover border color";
506 name: "color-border-destructive-stronger";
507 altValue: "#7D2828";
508},
509{
510 type: "color";
511 category: "border-color";
512 value: "rgb(49, 12, 12)";
513 comment: "Strongest destructive hover border color";
514 name: "color-border-destructive-strongest";
515 altValue: "#310C0C";
516},
517{
518 type: "color";
519 category: "border-color";
520 value: "rgb(244, 182, 182)";
521 comment: "Destructive focus border color";
522 name: "color-border-destructive-weak";
523 altValue: "#F4B6B6";
524},
525{
526 type: "color";
527 category: "border-color";
528 value: "rgb(249, 218, 218)";
529 comment: "Destructive focus border color";
530 name: "color-border-destructive-weaker";
531 altValue: "#F9DADA";
532},
533{
534 type: "color";
535 category: "border-color";
536 value: "rgb(253, 244, 244)";
537 comment: "Destructive focus border color";
538 name: "color-border-destructive-weakest";
539 altValue: "#FDF4F4";
540},
541{
542 type: "color";
543 category: "border-color";
544 value: "rgb(209, 67, 67)";
545 comment: "Error border color";
546 name: "color-border-error";
547 altValue: "#D14343";
548},
549{
550 type: "color";
551 category: "border-color";
552 value: "rgb(167, 54, 54)";
553 comment: "Strong error border color";
554 name: "color-border-error-strong";
555 altValue: "#A73636";
556},
557{
558 type: "color";
559 category: "border-color";
560 value: "rgb(125, 40, 40)";
561 comment: "Stronger error border color";
562 name: "color-border-error-stronger";
563 altValue: "#7D2828";
564},
565{
566 type: "color";
567 category: "border-color";
568 value: "rgb(49, 12, 12)";
569 comment: "Strongest error border color";
570 name: "color-border-error-strongest";
571 altValue: "#310C0C";
572},
573{
574 type: "color";
575 category: "border-color";
576 value: "rgb(238, 145, 145)";
577 comment: "Weak error border color";
578 name: "color-border-error-weak";
579 altValue: "#EE9191";
580},
581{
582 type: "color";
583 category: "border-color";
584 value: "rgb(244, 182, 182)";
585 comment: "Weaker error border color";
586 name: "color-border-error-weaker";
587 altValue: "#F4B6B6";
588},
589{
590 type: "color";
591 category: "border-color";
592 value: "rgb(249, 218, 218)";
593 comment: "Weakest error border color";
594 name: "color-border-error-weakest";
595 altValue: "#F9DADA";
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(31, 48, 76)";
645 comment: "Weakest border on inverse backgrounds. Must be used on color-background-body-inverse.";
646 name: "color-border-inverse-weakest";
647 altValue: "#1F304C";
648},
649{
650 type: "color";
651 category: "border-color";
652 value: "rgb(51, 102, 255)";
653 comment: "Neutral border color";
654 name: "color-border-neutral";
655 altValue: "#3366FF";
656},
657{
658 type: "color";
659 category: "border-color";
660 value: "rgb(157, 181, 255)";
661 comment: "Weak neutral border color";
662 name: "color-border-neutral-weak";
663 altValue: "#9DB5FF";
664},
665{
666 type: "color";
667 category: "border-color";
668 value: "rgb(214, 224, 255)";
669 comment: "Weaker neutral border color";
670 name: "color-border-neutral-weaker";
671 altValue: "#D6E0FF";
672},
673{
674 type: "color";
675 category: "border-color";
676 value: "rgb(231, 228, 249)";
677 comment: "Weaker border color for something designated as new";
678 name: "color-border-new-weaker";
679 altValue: "#E7E4F9";
680},
681{
682 type: "color";
683 category: "border-color";
684 value: "rgb(51, 102, 255)";
685 comment: "Primary border color";
686 name: "color-border-primary";
687 altValue: "#3366FF";
688},
689{
690 type: "color";
691 category: "border-color";
692 value: "rgb(41, 82, 204)";
693 comment: "Strong primary border color";
694 name: "color-border-primary-strong";
695 altValue: "#2952CC";
696},
697{
698 type: "color";
699 category: "border-color";
700 value: "rgb(31, 61, 153)";
701 comment: "Stronger primary border color";
702 name: "color-border-primary-stronger";
703 altValue: "#1F3D99";
704},
705{
706 type: "color";
707 category: "border-color";
708 value: "rgb(12, 30, 86)";
709 comment: "Strongest primary border color";
710 name: "color-border-primary-strongest";
711 altValue: "#0C1E56";
712},
713{
714 type: "color";
715 category: "border-color";
716 value: "rgb(157, 181, 255)";
717 comment: "Weak primary border color";
718 name: "color-border-primary-weak";
719 altValue: "#9DB5FF";
720},
721{
722 type: "color";
723 category: "border-color";
724 value: "rgb(214, 224, 255)";
725 comment: "Weaker primary border color";
726 name: "color-border-primary-weaker";
727 altValue: "#D6E0FF";
728},
729{
730 type: "color";
731 category: "border-color";
732 value: "rgb(235, 240, 255)";
733 comment: "Weakest primary border color";
734 name: "color-border-primary-weakest";
735 altValue: "#EBF0FF";
736},
737{
738 type: "color";
739 category: "border-color";
740 value: "rgb(143, 149, 178)";
741 comment: "Strong border color";
742 name: "color-border-strong";
743 altValue: "#8F95B2";
744},
745{
746 type: "color";
747 category: "border-color";
748 value: "rgb(82, 189, 148)";
749 comment: "Success border color";
750 name: "color-border-success";
751 altValue: "#52BD94";
752},
753{
754 type: "color";
755 category: "border-color";
756 value: "rgb(163, 230, 205)";
757 comment: "Weak success border color";
758 name: "color-border-success-weak";
759 altValue: "#A3E6CD";
760},
761{
762 type: "color";
763 category: "border-color";
764 value: "rgb(220, 242, 234)";
765 comment: "Weaker success border color";
766 name: "color-border-success-weaker";
767 altValue: "#DCF2EA";
768},
769{
770 type: "color";
771 category: "border-color";
772 value: "rgb(238, 248, 244)";
773 comment: "Weakest success border color";
774 name: "color-border-success-weakest";
775 altValue: "#EEF8F4";
776},
777{
778 type: "color";
779 category: "border-color";
780 value: "rgb(231, 220, 250)";
781 comment: "User avatar border color.";
782 name: "color-border-user";
783 altValue: "#E7DCFA";
784},
785{
786 type: "color";
787 category: "border-color";
788 value: "rgb(222, 117, 72)";
789 comment: "Warning border color";
790 name: "color-border-warning";
791 altValue: "#DE7548";
792},
793{
794 type: "color";
795 category: "border-color";
796 value: "rgb(235, 172, 145)";
797 comment: "Weak warning border color";
798 name: "color-border-warning-weak";
799 altValue: "#EBAC91";
800},
801{
802 type: "color";
803 category: "border-color";
804 value: "rgb(242, 200, 182)";
805 comment: "Weaker warning border color";
806 name: "color-border-warning-weaker";
807 altValue: "#F2C8B6";
808},
809{
810 type: "color";
811 category: "border-color";
812 value: "rgb(248, 227, 218)";
813 comment: "Weakest warning border color";
814 name: "color-border-warning-weakest";
815 altValue: "#F8E3DA";
816},
817{
818 type: "color";
819 category: "border-color";
820 value: "rgb(230, 232, 240)";
821 comment: "Weak border color";
822 name: "color-border-weak";
823 altValue: "#E6E8F0";
824},
825{
826 type: "color";
827 category: "border-color";
828 value: "rgb(237, 239, 245)";
829 comment: "Weaker border color";
830 name: "color-border-weaker";
831 altValue: "#EDEFF5";
832},
833{
834 type: "color";
835 category: "border-color";
836 value: "rgb(255, 255, 255)";
837 comment: "Weakest border color";
838 name: "color-border-weakest";
839 altValue: "#FFFFFF";
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 #D8DAE5";
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 #D8DAE5";
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 #D6E0FF";
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 #DCF2EA";
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 #D0CAF4";
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 #F4B6B6";
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 #9DB5FF";
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 #D0CAF4";
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 #ffdd35";
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 #DCF2EA";
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 #F2C8B6";
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 #e1e3ea";
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 #cce4ff";
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 #d1fae0";
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 #e7dcfa";
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 #D14343";
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 #A73636";
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 #7D2828";
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 #310C0C";
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 #F4B6B6";
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 #F9DADA";
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 #D14343";
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 #A73636";
1089 comment: "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 #7D2828";
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 #310c0c";
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 #F4B6B6";
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 #fccfcf";
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 #1f304c";
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 #cce4ff";
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 #e7dcfa";
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 #3366FF";
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 #2952CC";
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 #1F3D99";
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 #0C1E56";
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 #9DB5FF";
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 #D6E0FF";
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 #8F95B2";
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 #fff1b3";
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 #d1fae0";
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 #8c5bd8";
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 #fddcc4";
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 #E6E8F0";
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 #EDEFF5";
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 #ffffff, 0 0 0 3px #006dfa, 0 0 0 5px #cce4ff";
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 2px #9DB5FF";
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 4px rgba(255, 255, 255, 0.4)";
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: "inset 0 0 0 2px rgba(255, 255, 255, 0.4)";
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 #cacdd8, 0 0 0 3px #ffffff, 0 0 0 4px #006dfa, 0 0 0 6px #cce4ff";
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: "light";
1477 name: "color-scheme";
1478 altValue: null;
1479}
1480]
1481"data-visualization": [
1482 {
1483 type: "color";
1484 category: "data-visualization";
1485 value: "rgb(4, 162, 174)";
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(209, 129, 0)";
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(24, 65, 191)";
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(122, 103, 233)";
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(17, 167, 110)";
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(10, 29, 123)";
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(221, 54, 173)";
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(206, 32, 28)";
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(105, 140, 247)";
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(243, 103, 43)";
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: "'SF Mono', Monaco, Inconsolata, 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', monospace";
1568 name: "font-family-code";
1569 altValue: null;
1570},
1571{
1572 category: "font";
1573 type: "font";
1574 value: "'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: "'SF UI Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
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.75rem";
1619 name: "font-size-10";
1620 altValue: "12px";
1621},
1622{
1623 category: "font-size";
1624 type: "font-size";
1625 value: "0.75rem";
1626 name: "font-size-20";
1627 altValue: "12px";
1628},
1629{
1630 category: "font-size";
1631 type: "font-size";
1632 value: "0.875rem";
1633 name: "font-size-30";
1634 altValue: "14px";
1635},
1636{
1637 category: "font-size";
1638 type: "font-size";
1639 value: "0.875rem";
1640 name: "font-size-40";
1641 altValue: "14px";
1642},
1643{
1644 category: "font-size";
1645 type: "font-size";
1646 value: "1rem";
1647 name: "font-size-50";
1648 altValue: "16px";
1649},
1650{
1651 category: "font-size";
1652 type: "font-size";
1653 value: "1.25rem";
1654 name: "font-size-60";
1655 altValue: "20px";
1656},
1657{
1658 category: "font-size";
1659 type: "font-size";
1660 value: "1.5rem";
1661 name: "font-size-70";
1662 altValue: "24px";
1663},
1664{
1665 category: "font-size";
1666 type: "font-size";
1667 value: "2rem";
1668 name: "font-size-80";
1669 altValue: "32px";
1670},
1671{
1672 category: "font-size";
1673 type: "font-size";
1674 value: "2rem";
1675 name: "font-size-90";
1676 altValue: "32px";
1677},
1678{
1679 category: "font-size";
1680 type: "font-size";
1681 value: "3rem";
1682 name: "font-size-100";
1683 altValue: "48px";
1684},
1685{
1686 category: "font-size";
1687 type: "font-size";
1688 value: "4rem";
1689 name: "font-size-110";
1690 altValue: "64px";
1691},
1692{
1693 category: "font-size";
1694 type: "font-size";
1695 value: "100%";
1696 comment: "Base font size applied to the html element, used for rem calculations";
1697 name: "font-size-base";
1698 altValue: "1600px";
1699},
1700{
1701 category: "font-size";
1702 type: "font-size";
1703 value: "2rem";
1704 comment: "Constant typography token for font size display 10";
1705 name: "font-size-display-10";
1706 altValue: "32px";
1707},
1708{
1709 category: "font-size";
1710 type: "font-size";
1711 value: "3rem";
1712 comment: "Constant typography token for font size display 20";
1713 name: "font-size-display-20";
1714 altValue: "48px";
1715},
1716{
1717 category: "font-size";
1718 type: "font-size";
1719 value: "4rem";
1720 comment: "Constant typography token for font size display 30";
1721 name: "font-size-display-30";
1722 altValue: "64px";
1723}
1724]
1725"font-weights": [
1726 {
1727 category: "font-weight";
1728 type: "font-weight";
1729 value: 300;
1730 comment: "Font weight for light weight";
1731 name: "font-weight-light";
1732 altValue: null;
1733},
1734{
1735 category: "font-weight";
1736 type: "font-weight";
1737 value: 400;
1738 comment: "Font weight for normal weight";
1739 name: "font-weight-normal";
1740 altValue: null;
1741},
1742{
1743 category: "font-weight";
1744 type: "font-weight";
1745 value: 500;
1746 comment: "Font weight for medium weight";
1747 name: "font-weight-medium";
1748 altValue: null;
1749},
1750{
1751 category: "font-weight";
1752 type: "font-weight";
1753 value: 600;
1754 comment: "Font weight for semibold weight";
1755 name: "font-weight-semibold";
1756 altValue: null;
1757},
1758{
1759 category: "font-weight";
1760 type: "font-weight";
1761 value: 700;
1762 comment: "Font weight for bold weight";
1763 name: "font-weight-bold";
1764 altValue: null;
1765},
1766{
1767 category: "font-weight";
1768 type: "font-weight";
1769 value: 800;
1770 comment: "Font weight for extrabold weight";
1771 name: "font-weight-extrabold";
1772 altValue: null;
1773}
1774]
1775"line-heights": [
1776 {
1777 category: "line-height";
1778 type: "number";
1779 value: 0;
1780 comment: "Constant line-height token for line-height 0";
1781 name: "line-height-0";
1782 altValue: "0px";
1783},
1784{
1785 category: "line-height";
1786 type: "number";
1787 value: "0.75rem";
1788 comment: "Constant line-height token for line-height 05";
1789 name: "line-height-05";
1790 altValue: "12px";
1791},
1792{
1793 category: "line-height";
1794 type: "number";
1795 value: "1rem";
1796 comment: "Constant line-height token for line-height 10";
1797 name: "line-height-10";
1798 altValue: "16px";
1799},
1800{
1801 category: "line-height";
1802 type: "number";
1803 value: "1.25rem";
1804 comment: "Constant line-height token for line-height 20";
1805 name: "line-height-20";
1806 altValue: "20px";
1807},
1808{
1809 category: "line-height";
1810 type: "number";
1811 value: "1.25rem";
1812 comment: "Constant line-height token for line-height 30";
1813 name: "line-height-30";
1814 altValue: "20px";
1815},
1816{
1817 category: "line-height";
1818 type: "number";
1819 value: "1.5rem";
1820 comment: "Constant line-height token for line-height 40";
1821 name: "line-height-40";
1822 altValue: "24px";
1823},
1824{
1825 category: "line-height";
1826 type: "number";
1827 value: "1.75rem";
1828 comment: "Constant line-height token for line-height 50";
1829 name: "line-height-50";
1830 altValue: "28px";
1831},
1832{
1833 category: "line-height";
1834 type: "number";
1835 value: "1.75rem";
1836 comment: "Constant line-height token for line-height 60";
1837 name: "line-height-60";
1838 altValue: "28px";
1839},
1840{
1841 category: "line-height";
1842 type: "number";
1843 value: "2rem";
1844 comment: "Constant line-height token for line-height 70";
1845 name: "line-height-70";
1846 altValue: "32px";
1847},
1848{
1849 category: "line-height";
1850 type: "number";
1851 value: "2.5rem";
1852 comment: "Constant line-height token for line-height 80";
1853 name: "line-height-80";
1854 altValue: "40px";
1855},
1856{
1857 category: "line-height";
1858 type: "number";
1859 value: "2.75rem";
1860 comment: "Constant line-height token for line-height 90";
1861 name: "line-height-90";
1862 altValue: "44px";
1863},
1864{
1865 category: "line-height";
1866 type: "number";
1867 value: "3.25rem";
1868 comment: "Constant line-height token for line-height 100";
1869 name: "line-height-100";
1870 altValue: "52px";
1871},
1872{
1873 category: "line-height";
1874 type: "number";
1875 value: "4rem";
1876 comment: "Constant line-height token for line-height 110";
1877 name: "line-height-110";
1878 altValue: "64px";
1879},
1880{
1881 category: "line-height";
1882 type: "number";
1883 value: "2.5rem";
1884 comment: "Constant line-height token for line-height-display 10";
1885 name: "line-height-display-10";
1886 altValue: "40px";
1887},
1888{
1889 category: "line-height";
1890 type: "number";
1891 value: "3.75rem";
1892 comment: "Constant line-height token for line-height-display 20";
1893 name: "line-height-display-20";
1894 altValue: "60px";
1895},
1896{
1897 category: "line-height";
1898 type: "number";
1899 value: "5rem";
1900 comment: "Constant line-height token for line-height-display 30";
1901 name: "line-height-display-30";
1902 altValue: "80px";
1903}
1904]
1905"radii": [
1906 {
1907 type: "size";
1908 category: "radius";
1909 value: 0;
1910 comment: "Border radius reset";
1911 name: "border-radius-0";
1912 altValue: null;
1913},
1914{
1915 type: "size";
1916 category: "radius";
1917 value: "2px";
1918 comment: "Small border radius";
1919 name: "border-radius-10";
1920 altValue: null;
1921},
1922{
1923 type: "size";
1924 category: "radius";
1925 value: "4px";
1926 comment: "Large border radius";
1927 name: "border-radius-20";
1928 altValue: null;
1929},
1930{
1931 type: "size";
1932 category: "radius";
1933 value: "8px";
1934 comment: "Larger border radius";
1935 name: "border-radius-30";
1936 altValue: null;
1937},
1938{
1939 type: "size";
1940 category: "radius";
1941 value: "50%";
1942 comment: "Circular border radius";
1943 name: "border-radius-circle";
1944 altValue: null;
1945},
1946{
1947 type: "size";
1948 category: "radius";
1949 value: "100px";
1950 comment: "Pill border radius";
1951 name: "border-radius-pill";
1952 altValue: null;
1953}
1954]
1955"sizings": [
1956 {
1957 type: "size";
1958 category: "sizing";
1959 value: 0;
1960 comment: "Generic sizing token scale for UI components.";
1961 name: "size-0";
1962 altValue: "0px";
1963},
1964{
1965 type: "size";
1966 category: "sizing";
1967 value: "5.5rem";
1968 comment: "Generic sizing token scale for UI components.";
1969 name: "size-10";
1970 altValue: "88px";
1971},
1972{
1973 type: "size";
1974 category: "sizing";
1975 value: "12rem";
1976 comment: "Generic sizing token scale for UI components.";
1977 name: "size-20";
1978 altValue: "192px";
1979},
1980{
1981 type: "size";
1982 category: "sizing";
1983 value: "18.5rem";
1984 comment: "Generic sizing token scale for UI components.";
1985 name: "size-30";
1986 altValue: "296px";
1987},
1988{
1989 type: "size";
1990 category: "sizing";
1991 value: "25rem";
1992 comment: "Generic sizing token scale for UI components.";
1993 name: "size-40";
1994 altValue: "400px";
1995},
1996{
1997 type: "size";
1998 category: "sizing";
1999 value: "31.5rem";
2000 comment: "Generic sizing token scale for UI components.";
2001 name: "size-50";
2002 altValue: "504px";
2003},
2004{
2005 type: "size";
2006 category: "sizing";
2007 value: "38rem";
2008 comment: "Generic sizing token scale for UI components.";
2009 name: "size-60";
2010 altValue: "608px";
2011},
2012{
2013 type: "size";
2014 category: "sizing";
2015 value: "44.5rem";
2016 comment: "Generic sizing token scale for UI components.";
2017 name: "size-70";
2018 altValue: "712px";
2019},
2020{
2021 type: "size";
2022 category: "sizing";
2023 value: "51rem";
2024 comment: "Generic sizing token scale for UI components.";
2025 name: "size-80";
2026 altValue: "816px";
2027},
2028{
2029 type: "size";
2030 category: "sizing";
2031 value: "57.5rem";
2032 comment: "Generic sizing token scale for UI components.";
2033 name: "size-90";
2034 altValue: "920px";
2035},
2036{
2037 type: "size";
2038 category: "sizing";
2039 value: "64rem";
2040 comment: "Generic sizing token scale for UI components.";
2041 name: "size-100";
2042 altValue: "1024px";
2043},
2044{
2045 type: "size";
2046 category: "sizing";
2047 value: "70.5rem";
2048 comment: "Generic sizing token scale for UI components.";
2049 name: "size-110";
2050 altValue: "1128px";
2051},
2052{
2053 type: "size";
2054 category: "sizing";
2055 value: "77rem";
2056 comment: "Generic sizing token scale for UI components.";
2057 name: "size-120";
2058 altValue: "1232px";
2059},
2060{
2061 type: "size";
2062 category: "sizing";
2063 value: "0.75rem";
2064 comment: "Maps to line-height tokens 1:1";
2065 name: "size-icon-05";
2066 altValue: "12px";
2067},
2068{
2069 type: "size";
2070 category: "sizing";
2071 value: "1rem";
2072 comment: "Maps to line-height tokens 1:1";
2073 name: "size-icon-10";
2074 altValue: "16px";
2075},
2076{
2077 type: "size";
2078 category: "sizing";
2079 value: "1.25rem";
2080 comment: "Maps to line-height tokens 1:1";
2081 name: "size-icon-20";
2082 altValue: "20px";
2083},
2084{
2085 type: "size";
2086 category: "sizing";
2087 value: "1.25rem";
2088 comment: "Maps to line-height tokens 1:1";
2089 name: "size-icon-30";
2090 altValue: "20px";
2091},
2092{
2093 type: "size";
2094 category: "sizing";
2095 value: "1.5rem";
2096 comment: "Maps to line-height tokens 1:1";
2097 name: "size-icon-40";
2098 altValue: "24px";
2099},
2100{
2101 type: "size";
2102 category: "sizing";
2103 value: "1.75rem";
2104 comment: "Maps to line-height tokens 1:1";
2105 name: "size-icon-50";
2106 altValue: "28px";
2107},
2108{
2109 type: "size";
2110 category: "sizing";
2111 value: "1.75rem";
2112 comment: "Maps to line-height tokens 1:1";
2113 name: "size-icon-60";
2114 altValue: "28px";
2115},
2116{
2117 type: "size";
2118 category: "sizing";
2119 value: "2rem";
2120 comment: "Maps to line-height tokens 1:1";
2121 name: "size-icon-70";
2122 altValue: "32px";
2123},
2124{
2125 type: "size";
2126 category: "sizing";
2127 value: "2.5rem";
2128 comment: "Maps to line-height tokens 1:1";
2129 name: "size-icon-80";
2130 altValue: "40px";
2131},
2132{
2133 type: "size";
2134 category: "sizing";
2135 value: "2.75rem";
2136 comment: "Maps to line-height tokens 1:1";
2137 name: "size-icon-90";
2138 altValue: "44px";
2139},
2140{
2141 type: "size";
2142 category: "sizing";
2143 value: "3.25rem";
2144 comment: "Maps to line-height tokens 1:1";
2145 name: "size-icon-100";
2146 altValue: "52px";
2147},
2148{
2149 type: "size";
2150 category: "sizing";
2151 value: "4rem";
2152 comment: "Maps to line-height tokens 1:1";
2153 name: "size-icon-110";
2154 altValue: "64px";
2155},
2156{
2157 type: "size";
2158 category: "sizing";
2159 value: "15rem";
2160 comment: "Sizing token for sidebar width.";
2161 name: "size-sidebar";
2162 altValue: "240px";
2163},
2164{
2165 type: "size";
2166 category: "sizing";
2167 value: "4.75rem";
2168 comment: "Sizing token for the compact sidebar width.";
2169 name: "size-sidebar-compact";
2170 altValue: "76px";
2171},
2172{
2173 type: "size";
2174 category: "sizing";
2175 value: 0;
2176 comment: "Generic square sizing token scale for UI components.";
2177 name: "size-square-0";
2178 altValue: "0px";
2179},
2180{
2181 type: "size";
2182 category: "sizing";
2183 value: "0.125rem";
2184 comment: "Generic square sizing token scale for UI components.";
2185 name: "size-square-10";
2186 altValue: "2px";
2187},
2188{
2189 type: "size";
2190 category: "sizing";
2191 value: "0.25rem";
2192 comment: "Generic square sizing token scale for UI components.";
2193 name: "size-square-20";
2194 altValue: "4px";
2195},
2196{
2197 type: "size";
2198 category: "sizing";
2199 value: "0.375rem";
2200 comment: "Generic square sizing token scale for UI components.";
2201 name: "size-square-25";
2202 altValue: "6px";
2203},
2204{
2205 type: "size";
2206 category: "sizing";
2207 value: "0.5rem";
2208 comment: "Generic square sizing token scale for UI components.";
2209 name: "size-square-30";
2210 altValue: "8px";
2211},
2212{
2213 type: "size";
2214 category: "sizing";
2215 value: "0.75rem";
2216 comment: "Generic square sizing token scale for UI components.";
2217 name: "size-square-40";
2218 altValue: "12px";
2219},
2220{
2221 type: "size";
2222 category: "sizing";
2223 value: "1rem";
2224 comment: "Generic square sizing token scale for UI components.";
2225 name: "size-square-50";
2226 altValue: "16px";
2227},
2228{
2229 type: "size";
2230 category: "sizing";
2231 value: "1.25rem";
2232 comment: "Generic square sizing token scale for UI components.";
2233 name: "size-square-60";
2234 altValue: "20px";
2235},
2236{
2237 type: "size";
2238 category: "sizing";
2239 value: "1.5rem";
2240 comment: "Generic square sizing token scale for UI components.";
2241 name: "size-square-70";
2242 altValue: "24px";
2243},
2244{
2245 type: "size";
2246 category: "sizing";
2247 value: "1.75rem";
2248 comment: "Generic square sizing token scale for UI components.";
2249 name: "size-square-80";
2250 altValue: "28px";
2251},
2252{
2253 type: "size";
2254 category: "sizing";
2255 value: "2rem";
2256 comment: "Generic square sizing token scale for UI components.";
2257 name: "size-square-90";
2258 altValue: "32px";
2259},
2260{
2261 type: "size";
2262 category: "sizing";
2263 value: "2.25rem";
2264 comment: "Generic square sizing token scale for UI components.";
2265 name: "size-square-100";
2266 altValue: "36px";
2267},
2268{
2269 type: "size";
2270 category: "sizing";
2271 value: "2.5rem";
2272 comment: "Generic square sizing token scale for UI components.";
2273 name: "size-square-110";
2274 altValue: "40px";
2275},
2276{
2277 type: "size";
2278 category: "sizing";
2279 value: "2.75rem";
2280 comment: "Generic square sizing token scale for UI components.";
2281 name: "size-square-120";
2282 altValue: "44px";
2283},
2284{
2285 type: "size";
2286 category: "sizing";
2287 value: "3rem";
2288 comment: "Generic square sizing token scale for UI components.";
2289 name: "size-square-130";
2290 altValue: "48px";
2291},
2292{
2293 type: "size";
2294 category: "sizing";
2295 value: "3.25rem";
2296 comment: "Generic square sizing token scale for UI components.";
2297 name: "size-square-140";
2298 altValue: "52px";
2299},
2300{
2301 type: "size";
2302 category: "sizing";
2303 value: "3.5rem";
2304 comment: "Generic square sizing token scale for UI components.";
2305 name: "size-square-150";
2306 altValue: "56px";
2307},
2308{
2309 type: "size";
2310 category: "sizing";
2311 value: "3.75rem";
2312 comment: "Generic square sizing token scale for UI components.";
2313 name: "size-square-160";
2314 altValue: "60px";
2315},
2316{
2317 type: "size";
2318 category: "sizing";
2319 value: "4rem";
2320 comment: "Generic square sizing token scale for UI components.";
2321 name: "size-square-170";
2322 altValue: "64px";
2323},
2324{
2325 type: "size";
2326 category: "sizing";
2327 value: "4.25rem";
2328 comment: "Generic square sizing token scale for UI components.";
2329 name: "size-square-180";
2330 altValue: "68px";
2331},
2332{
2333 type: "size";
2334 category: "sizing";
2335 value: "4.5rem";
2336 comment: "Generic square sizing token scale for UI components.";
2337 name: "size-square-190";
2338 altValue: "72px";
2339},
2340{
2341 type: "size";
2342 category: "sizing";
2343 value: "4.75rem";
2344 comment: "Generic square sizing token scale for UI components.";
2345 name: "size-square-200";
2346 altValue: "76px";
2347},
2348{
2349 type: "size";
2350 category: "sizing";
2351 value: "4.75rem";
2352 comment: "Sizing token for the minimum topbar height.";
2353 name: "size-topbar";
2354 altValue: "76px";
2355}
2356]
2357"spacings": [
2358 {
2359 category: "spacing";
2360 type: "size";
2361 value: 0;
2362 name: "space-0";
2363 altValue: "0px";
2364},
2365{
2366 category: "spacing";
2367 type: "size";
2368 value: "0.125rem";
2369 name: "space-10";
2370 altValue: "2px";
2371},
2372{
2373 category: "spacing";
2374 type: "size";
2375 value: "0.25rem";
2376 name: "space-20";
2377 altValue: "4px";
2378},
2379{
2380 category: "spacing";
2381 type: "size";
2382 value: "0.5rem";
2383 name: "space-30";
2384 altValue: "8px";
2385},
2386{
2387 category: "spacing";
2388 type: "size";
2389 value: "0.75rem";
2390 name: "space-40";
2391 altValue: "12px";
2392},
2393{
2394 category: "spacing";
2395 type: "size";
2396 value: "1rem";
2397 name: "space-50";
2398 altValue: "16px";
2399},
2400{
2401 category: "spacing";
2402 type: "size";
2403 value: "1.25rem";
2404 name: "space-60";
2405 altValue: "20px";
2406},
2407{
2408 category: "spacing";
2409 type: "size";
2410 value: "1.5rem";
2411 name: "space-70";
2412 altValue: "24px";
2413},
2414{
2415 category: "spacing";
2416 type: "size";
2417 value: "1.75rem";
2418 name: "space-80";
2419 altValue: "28px";
2420},
2421{
2422 category: "spacing";
2423 type: "size";
2424 value: "2rem";
2425 name: "space-90";
2426 altValue: "32px";
2427},
2428{
2429 category: "spacing";
2430 type: "size";
2431 value: "2.25rem";
2432 name: "space-100";
2433 altValue: "36px";
2434},
2435{
2436 category: "spacing";
2437 type: "size";
2438 value: "2.5rem";
2439 name: "space-110";
2440 altValue: "40px";
2441},
2442{
2443 category: "spacing";
2444 type: "size";
2445 value: "2.75rem";
2446 name: "space-120";
2447 altValue: "44px";
2448},
2449{
2450 category: "spacing";
2451 type: "size";
2452 value: "3rem";
2453 name: "space-130";
2454 altValue: "48px";
2455},
2456{
2457 category: "spacing";
2458 type: "size";
2459 value: "3.25rem";
2460 name: "space-140";
2461 altValue: "52px";
2462},
2463{
2464 category: "spacing";
2465 type: "size";
2466 value: "3.5rem";
2467 name: "space-150";
2468 altValue: "56px";
2469},
2470{
2471 category: "spacing";
2472 type: "size";
2473 value: "3.75rem";
2474 name: "space-160";
2475 altValue: "60px";
2476},
2477{
2478 category: "spacing";
2479 type: "size";
2480 value: "4rem";
2481 name: "space-170";
2482 altValue: "64px";
2483},
2484{
2485 category: "spacing";
2486 type: "size";
2487 value: "4.25rem";
2488 name: "space-180";
2489 altValue: "68px";
2490},
2491{
2492 category: "spacing";
2493 type: "size";
2494 value: "4.5rem";
2495 name: "space-190";
2496 altValue: "72px";
2497},
2498{
2499 category: "spacing";
2500 type: "size";
2501 value: "4.75rem";
2502 name: "space-200";
2503 altValue: "76px";
2504},
2505{
2506 category: "spacing";
2507 type: "size";
2508 value: "-0.125rem";
2509 name: "space-negative-10";
2510 altValue: "-2px";
2511},
2512{
2513 category: "spacing";
2514 type: "size";
2515 value: "-0.25rem";
2516 name: "space-negative-20";
2517 altValue: "-4px";
2518},
2519{
2520 category: "spacing";
2521 type: "size";
2522 value: "-0.5rem";
2523 name: "space-negative-30";
2524 altValue: "-8px";
2525},
2526{
2527 category: "spacing";
2528 type: "size";
2529 value: "-0.75rem";
2530 name: "space-negative-40";
2531 altValue: "-12px";
2532},
2533{
2534 category: "spacing";
2535 type: "size";
2536 value: "-1rem";
2537 name: "space-negative-50";
2538 altValue: "-16px";
2539},
2540{
2541 category: "spacing";
2542 type: "size";
2543 value: "-1.25rem";
2544 name: "space-negative-60";
2545 altValue: "-20px";
2546},
2547{
2548 category: "spacing";
2549 type: "size";
2550 value: "-1.5rem";
2551 name: "space-negative-70";
2552 altValue: "-24px";
2553},
2554{
2555 category: "spacing";
2556 type: "size";
2557 value: "-1.75rem";
2558 name: "space-negative-80";
2559 altValue: "-28px";
2560},
2561{
2562 category: "spacing";
2563 type: "size";
2564 value: "-2rem";
2565 name: "space-negative-90";
2566 altValue: "-32px";
2567},
2568{
2569 category: "spacing";
2570 type: "size";
2571 value: "-2.25rem";
2572 name: "space-negative-100";
2573 altValue: "-36px";
2574},
2575{
2576 category: "spacing";
2577 type: "size";
2578 value: "-2.5rem";
2579 name: "space-negative-110";
2580 altValue: "-40px";
2581},
2582{
2583 category: "spacing";
2584 type: "size";
2585 value: "-2.75rem";
2586 name: "space-negative-120";
2587 altValue: "-44px";
2588},
2589{
2590 category: "spacing";
2591 type: "size";
2592 value: "-3rem";
2593 name: "space-negative-130";
2594 altValue: "-48px";
2595},
2596{
2597 category: "spacing";
2598 type: "size";
2599 value: "-3.25rem";
2600 name: "space-negative-140";
2601 altValue: "-52px";
2602},
2603{
2604 category: "spacing";
2605 type: "size";
2606 value: "-3.5rem";
2607 name: "space-negative-150";
2608 altValue: "-56px";
2609},
2610{
2611 category: "spacing";
2612 type: "size";
2613 value: "-3.75rem";
2614 name: "space-negative-160";
2615 altValue: "-60px";
2616},
2617{
2618 category: "spacing";
2619 type: "size";
2620 value: "-4rem";
2621 name: "space-negative-170";
2622 altValue: "-64px";
2623},
2624{
2625 category: "spacing";
2626 type: "size";
2627 value: "-4.25rem";
2628 name: "space-negative-180";
2629 altValue: "-68px";
2630},
2631{
2632 category: "spacing";
2633 type: "size";
2634 value: "-4.5rem";
2635 name: "space-negative-190";
2636 altValue: "-72px";
2637},
2638{
2639 category: "spacing";
2640 type: "size";
2641 value: "-4.75rem";
2642 name: "space-negative-200";
2643 altValue: "-76px";
2644}
2645]
2646"text-colors": [
2647 {
2648 type: "color";
2649 category: "text-color";
2650 value: "rgb(71, 77, 102)";
2651 comment: "Body text color";
2652 name: "color-text";
2653 altValue: "#474D66";
2654},
2655{
2656 type: "color";
2657 category: "text-color";
2658 value: "rgb(82, 189, 148)";
2659 comment: "Segment brand color.";
2660 name: "color-text-brand-highlight";
2661 altValue: "#52BD94";
2662},
2663{
2664 type: "color";
2665 category: "text-color";
2666 value: "rgb(255, 255, 255)";
2667 comment: "Text color used on any brand color";
2668 name: "color-text-brand-inverse";
2669 altValue: "#FFFFFF";
2670},
2671{
2672 type: "color";
2673 category: "text-color";
2674 value: "rgb(105, 111, 140)";
2675 comment: "Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.";
2676 name: "color-text-decorative-10";
2677 altValue: "#696F8C";
2678},
2679{
2680 type: "color";
2681 category: "text-color";
2682 value: "rgb(41, 82, 204)";
2683 comment: "Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.";
2684 name: "color-text-decorative-20";
2685 altValue: "#2952CC";
2686},
2687{
2688 type: "color";
2689 category: "text-color";
2690 value: "rgb(49, 113, 89)";
2691 comment: "Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.";
2692 name: "color-text-decorative-30";
2693 altValue: "#317159";
2694},
2695{
2696 type: "color";
2697 category: "text-color";
2698 value: "rgb(110, 98, 182)";
2699 comment: "Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.";
2700 name: "color-text-decorative-40";
2701 altValue: "#6E62B6";
2702},
2703{
2704 type: "color";
2705 category: "text-color";
2706 value: "rgb(199, 35, 35)";
2707 comment: "Destructive text.";
2708 name: "color-text-destructive";
2709 altValue: "#C72323";
2710},
2711{
2712 type: "color";
2713 category: "text-color";
2714 value: "rgb(173, 17, 17)";
2715 comment: "Strong shade of destructive text.";
2716 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"];
2717 name: "color-text-destructive-strong";
2718 altValue: "#AD1111";
2719},
2720{
2721 type: "color";
2722 category: "text-color";
2723 value: "rgb(74, 11, 11)";
2724 comment: "Stronger shade of destructive text.";
2725 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"];
2726 name: "color-text-destructive-stronger";
2727 altValue: "#4A0B0B";
2728},
2729{
2730 type: "color";
2731 category: "text-color";
2732 value: "rgb(49, 12, 12)";
2733 comment: "Strongest shade of destructive text.";
2734 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"];
2735 name: "color-text-destructive-strongest";
2736 altValue: "#310C0C";
2737},
2738{
2739 type: "color";
2740 category: "text-color";
2741 value: "rgb(246, 177, 177)";
2742 comment: "Weak shade of destructive text.";
2743 name: "color-text-destructive-weak";
2744 altValue: "#F6B1B1";
2745},
2746{
2747 type: "color";
2748 category: "text-color";
2749 value: "rgb(167, 54, 54)";
2750 comment: "Error text for inputs and error misc";
2751 name: "color-text-error";
2752 altValue: "#A73636";
2753},
2754{
2755 type: "color";
2756 category: "text-color";
2757 value: "rgb(125, 40, 40)";
2758 comment: "Strong error text for inputs and error misc";
2759 name: "color-text-error-strong";
2760 altValue: "#7D2828";
2761},
2762{
2763 type: "color";
2764 category: "text-color";
2765 value: "rgb(49, 12, 12)";
2766 comment: "Stronger error text for inputs and error misc";
2767 name: "color-text-error-stronger";
2768 altValue: "#310C0C";
2769},
2770{
2771 type: "color";
2772 category: "text-color";
2773 value: "rgb(49, 12, 12)";
2774 comment: "Strongest error text for inputs and error misc.";
2775 name: "color-text-error-strongest";
2776 altValue: "#310C0C";
2777},
2778{
2779 type: "color";
2780 category: "text-color";
2781 value: "rgb(209, 67, 67)";
2782 comment: "Weak error text for inputs and error misc";
2783 name: "color-text-error-weak";
2784 altValue: "#D14343";
2785},
2786{
2787 type: "color";
2788 category: "text-color";
2789 value: "rgb(143, 149, 178)";
2790 comment: "Default icon color.";
2791 name: "color-text-icon";
2792 altValue: "#8F95B2";
2793},
2794{
2795 type: "color";
2796 category: "text-color";
2797 value: "rgb(82, 189, 148)";
2798 comment: "Icon color for indicating a available status";
2799 name: "color-text-icon-available";
2800 altValue: "#52BD94";
2801},
2802{
2803 type: "color";
2804 category: "text-color";
2805 value: "rgb(82, 189, 148)";
2806 comment: "Segment brand color used for the Segment logo.";
2807 name: "color-text-icon-brand-highlight";
2808 altValue: "#52BD94";
2809},
2810{
2811 type: "color";
2812 category: "text-color";
2813 value: "rgb(255, 255, 255)";
2814 comment: "Twilio brand icon color used for the Twilio logo on inverse backgrounds.";
2815 text_contrast_pairing: ["color-background-body-inverse"];
2816 name: "color-text-icon-brand-inverse";
2817 altValue: "#FFFFFF";
2818},
2819{
2820 type: "color";
2821 category: "text-color";
2822 value: "rgb(222, 117, 72)";
2823 comment: "Icon color for indicating a busy status";
2824 name: "color-text-icon-busy";
2825 altValue: "#DE7548";
2826},
2827{
2828 type: "color";
2829 category: "text-color";
2830 value: "rgb(209, 67, 67)";
2831 comment: "Icon color for indicating an error.";
2832 name: "color-text-icon-error";
2833 altValue: "#D14343";
2834},
2835{
2836 type: "color";
2837 category: "text-color";
2838 value: "rgb(143, 149, 178)";
2839 comment: "Default icon color for inverse backgrounds.";
2840 name: "color-text-icon-inverse";
2841 altValue: "#8F95B2";
2842},
2843{
2844 type: "color";
2845 category: "text-color";
2846 value: "rgb(41, 82, 204)";
2847 comment: "Icon color for being neutral.";
2848 name: "color-text-icon-neutral";
2849 altValue: "#2952CC";
2850},
2851{
2852 type: "color";
2853 category: "text-color";
2854 value: "rgb(109, 46, 209)";
2855 comment: "Icon color for indicating a new status.";
2856 name: "color-text-icon-new";
2857 altValue: "#6D2ED1";
2858},
2859{
2860 type: "color";
2861 category: "text-color";
2862 value: "rgb(143, 149, 178)";
2863 comment: "Icon color for indicating a offline status";
2864 name: "color-text-icon-offline";
2865 altValue: "#8F95B2";
2866},
2867{
2868 type: "color";
2869 category: "text-color";
2870 value: "rgb(82, 189, 148)";
2871 comment: "Icon color for indicating success.";
2872 name: "color-text-icon-success";
2873 altValue: "#52BD94";
2874},
2875{
2876 type: "color";
2877 category: "text-color";
2878 value: "rgb(209, 67, 67)";
2879 comment: "Icon color for indicating a unavailable status";
2880 name: "color-text-icon-unavailable";
2881 altValue: "#D14343";
2882},
2883{
2884 type: "color";
2885 category: "text-color";
2886 value: "rgb(222, 117, 72)";
2887 comment: "Icon color for indicating a warning.";
2888 name: "color-text-icon-warning";
2889 altValue: "#DE7548";
2890},
2891{
2892 type: "color";
2893 category: "text-color";
2894 value: "rgb(255, 255, 255)";
2895 comment: "Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.";
2896 name: "color-text-inverse";
2897 altValue: "#FFFFFF";
2898},
2899{
2900 type: "color";
2901 category: "text-color";
2902 value: "rgb(200, 175, 240)";
2903 comment: "Inverse color for indicating a new status.";
2904 text_contrast_pairing: ["color-background-inverse-strong"];
2905 name: "color-text-inverse-new";
2906 altValue: "#C8AFF0";
2907},
2908{
2909 type: "color";
2910 category: "text-color";
2911 value: "rgb(136, 145, 170)";
2912 comment: "Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.";
2913 name: "color-text-inverse-weak";
2914 altValue: "#8891AA";
2915},
2916{
2917 type: "color";
2918 category: "text-color";
2919 value: "rgb(96, 107, 133)";
2920 comment: "Weaker inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.";
2921 name: "color-text-inverse-weaker";
2922 altValue: "#606B85";
2923},
2924{
2925 type: "color";
2926 category: "text-color";
2927 value: "rgb(75, 86, 113)";
2928 comment: "Weakest inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.";
2929 name: "color-text-inverse-weakest";
2930 altValue: "#4B5671";
2931},
2932{
2933 type: "color";
2934 category: "text-color";
2935 value: "rgb(51, 102, 255)";
2936 comment: "Link text";
2937 name: "color-text-link";
2938 altValue: "#3366FF";
2939},
2940{
2941 type: "color";
2942 category: "text-color";
2943 value: "rgb(209, 67, 67)";
2944 comment: "Destructive link text";
2945 name: "color-text-link-destructive";
2946 altValue: "#D14343";
2947},
2948{
2949 type: "color";
2950 category: "text-color";
2951 value: "rgb(125, 40, 40)";
2952 comment: "Strong shade of destructive link text to be used in interactions";
2953 name: "color-text-link-destructive-strong";
2954 altValue: "#7D2828";
2955},
2956{
2957 type: "color";
2958 category: "text-color";
2959 value: "rgb(49, 12, 12)";
2960 comment: "Stronger shade of destructive link text to be used in interactions";
2961 name: "color-text-link-destructive-stronger";
2962 altValue: "#310C0C";
2963},
2964{
2965 type: "color";
2966 category: "text-color";
2967 value: "rgb(49, 12, 12)";
2968 comment: "Strongest shade of destructive link text to be used in interactions";
2969 name: "color-text-link-destructive-strongest";
2970 altValue: "#310C0C";
2971},
2972{
2973 type: "color";
2974 category: "text-color";
2975 value: "rgb(209, 67, 67)";
2976 comment: "Weak shade of destructive link text to be used in interactions";
2977 name: "color-text-link-destructive-weak";
2978 altValue: "#D14343";
2979},
2980{
2981 type: "color";
2982 category: "text-color";
2983 value: "rgb(31, 61, 153)";
2984 comment: "Strong shade of link text to be used in interactions";
2985 name: "color-text-link-strong";
2986 altValue: "#1F3D99";
2987},
2988{
2989 type: "color";
2990 category: "text-color";
2991 value: "rgb(12, 30, 86)";
2992 comment: "Stronger shade of link text to be used in interactions";
2993 name: "color-text-link-stronger";
2994 altValue: "#0C1E56";
2995},
2996{
2997 type: "color";
2998 category: "text-color";
2999 value: "rgb(7, 19, 55)";
3000 comment: "Strongest shade of link text to be used in interactions";
3001 name: "color-text-link-strongest";
3002 altValue: "#071337";
3003},
3004{
3005 type: "color";
3006 category: "text-color";
3007 value: "rgb(157, 181, 255)";
3008 comment: "Weak shade of link text to be used in interactions";
3009 name: "color-text-link-weak";
3010 altValue: "#9DB5FF";
3011},
3012{
3013 type: "color";
3014 category: "text-color";
3015 value: "rgb(31, 61, 153)";
3016 comment: "Color for text indicating a neutral status.";
3017 name: "color-text-neutral";
3018 altValue: "#1F3D99";
3019},
3020{
3021 type: "color";
3022 category: "text-color";
3023 value: "rgb(82, 73, 136)";
3024 comment: "Color for text indicating a new status.";
3025 name: "color-text-new";
3026 altValue: "#524988";
3027},
3028{
3029 type: "color";
3030 category: "text-color";
3031 value: "rgb(2, 99, 224)";
3032 comment: "Primary text.";
3033 name: "color-text-primary";
3034 altValue: "#0263E0";
3035},
3036{
3037 type: "color";
3038 category: "text-color";
3039 value: "rgb(0, 20, 137)";
3040 comment: "Strong primary text.";
3041 name: "color-text-primary-strong";
3042 altValue: "#001489";
3043},
3044{
3045 type: "color";
3046 category: "text-color";
3047 value: "rgb(3, 11, 93)";
3048 comment: "Stronger primary text.";
3049 name: "color-text-primary-stronger";
3050 altValue: "#030B5D";
3051},
3052{
3053 type: "color";
3054 category: "text-color";
3055 value: "rgb(6, 3, 58)";
3056 comment: "Strongest primary text.";
3057 name: "color-text-primary-strongest";
3058 altValue: "#06033A";
3059},
3060{
3061 type: "color";
3062 category: "text-color";
3063 value: "rgb(153, 205, 255)";
3064 comment: "Weak primary text.";
3065 name: "color-text-primary-weak";
3066 altValue: "#99CDFF";
3067},
3068{
3069 type: "color";
3070 category: "text-color";
3071 value: "rgb(84, 51, 8)";
3072 comment: "Text color for the subaccount badge";
3073 name: "color-text-subaccount";
3074 altValue: "#543308";
3075},
3076{
3077 type: "color";
3078 category: "text-color";
3079 value: "rgb(36, 99, 75)";
3080 comment: "Text color for success text.";
3081 name: "color-text-success";
3082 altValue: "#24634B";
3083},
3084{
3085 type: "color";
3086 category: "text-color";
3087 value: "rgb(109, 46, 209)";
3088 comment: "Text color for user avatar.";
3089 name: "color-text-user";
3090 altValue: "#6D2ED1";
3091},
3092{
3093 type: "color";
3094 category: "text-color";
3095 value: "rgb(178, 94, 58)";
3096 comment: "Color for warning text.";
3097 name: "color-text-warning";
3098 altValue: "#B25E3A";
3099},
3100{
3101 type: "color";
3102 category: "text-color";
3103 value: "rgb(133, 70, 43)";
3104 comment: "Color for dark warning text.";
3105 name: "color-text-warning-strong";
3106 altValue: "#85462B";
3107},
3108{
3109 type: "color";
3110 category: "text-color";
3111 value: "rgb(105, 111, 140)";
3112 comment: "Weak body text for visual hierarchy.";
3113 name: "color-text-weak";
3114 altValue: "#696F8C";
3115},
3116{
3117 type: "color";
3118 category: "text-color";
3119 value: "rgb(143, 149, 178)";
3120 comment: "Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.";
3121 name: "color-text-weaker";
3122 altValue: "#8F95B2";
3123},
3124{
3125 type: "color";
3126 category: "text-color";
3127 value: "rgb(255, 255, 255)";
3128 comment: "Weakest body text for visual hierarchy. Inaccessible unless used on disabled controls.";
3129 name: "color-text-weakest";
3130 altValue: "#FFFFFF";
3131}
3132]
3133"z-indices": [
3134 {
3135 type: "z-index";
3136 category: "z-index";
3137 value: 0;
3138 name: "z-index-0";
3139 altValue: null;
3140},
3141{
3142 type: "z-index";
3143 category: "z-index";
3144 value: 10;
3145 name: "z-index-10";
3146 altValue: null;
3147},
3148{
3149 type: "z-index";
3150 category: "z-index";
3151 value: 20;
3152 name: "z-index-20";
3153 altValue: null;
3154},
3155{
3156 type: "z-index";
3157 category: "z-index";
3158 value: 30;
3159 name: "z-index-30";
3160 altValue: null;
3161},
3162{
3163 type: "z-index";
3164 category: "z-index";
3165 value: 40;
3166 name: "z-index-40";
3167 altValue: null;
3168},
3169{
3170 type: "z-index";
3171 category: "z-index";
3172 value: 50;
3173 name: "z-index-50";
3174 altValue: null;
3175},
3176{
3177 type: "z-index";
3178 category: "z-index";
3179 value: 60;
3180 name: "z-index-60";
3181 altValue: null;
3182},
3183{
3184 type: "z-index";
3185 category: "z-index";
3186 value: 70;
3187 name: "z-index-70";
3188 altValue: null;
3189},
3190{
3191 type: "z-index";
3192 category: "z-index";
3193 value: 80;
3194 name: "z-index-80";
3195 altValue: null;
3196},
3197{
3198 type: "z-index";
3199 category: "z-index";
3200 value: 90;
3201 name: "z-index-90";
3202 altValue: null;
3203}
3204]}
3205}
3206export default Tokens;
\No newline at end of file