UNPKG

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