UNPKG

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