UNPKG

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