UNPKG

32.7 kBJSONView Raw
1{
2 "properties": [
3 {
4 "type": "color",
5 "category": "background-color",
6 "value": "rgb(0, 31, 117)",
7 "comment": "Darker background for primary actions or highlights",
8 "name": "colorBackgroundPrimaryDarker"
9 },
10 {
11 "type": "color",
12 "category": "background-color",
13 "value": "rgb(219, 230, 255)",
14 "comment": "Lighter background for primary actions or highlights",
15 "name": "colorBackgroundPrimaryLighter"
16 },
17 {
18 "type": "color",
19 "category": "background-color",
20 "value": "rgb(71, 5, 0)",
21 "comment": "Darker background for destructive actions or highlights",
22 "name": "colorBackgroundDestructiveDarker"
23 },
24 {
25 "type": "color",
26 "category": "background-color",
27 "value": "rgb(255, 185, 179)",
28 "comment": "Lighter background for destructive actions or highlights",
29 "name": "colorBackgroundDestructiveLighter"
30 },
31 {
32 "type": "color",
33 "category": "background-color",
34 "value": "rgb(228, 98, 22)",
35 "comment": "Warning background color",
36 "name": "colorBackgroundWarning"
37 },
38 {
39 "type": "color",
40 "category": "background-color",
41 "value": "rgb(255, 233, 231)",
42 "comment": "Lightest error background color",
43 "name": "colorBackgroundErrorLightest"
44 },
45 {
46 "type": "color",
47 "category": "background-color",
48 "value": "rgb(245, 248, 255)",
49 "comment": "Lightest neutral background color",
50 "name": "colorBackgroundNeutralLightest"
51 },
52 {
53 "type": "color",
54 "category": "background-color",
55 "value": "rgb(206, 36, 26)",
56 "comment": "Background for destructive actions or highlights",
57 "name": "colorBackgroundDestructive"
58 },
59 {
60 "type": "color",
61 "category": "background-color",
62 "value": "rgb(51, 104, 250)",
63 "comment": "Background for primary actions or highlights",
64 "name": "colorBackgroundPrimary"
65 },
66 {
67 "type": "color",
68 "category": "background-color",
69 "value": "rgb(0, 153, 74)",
70 "comment": "Success background color",
71 "name": "colorBackgroundSuccess"
72 },
73 {
74 "type": "color",
75 "category": "background-color",
76 "value": "rgb(249, 250, 251)",
77 "comment": "Background color for alternative striped rows",
78 "name": "colorBackgroundRowStriped"
79 },
80 {
81 "type": "color",
82 "category": "background-color",
83 "value": "rgb(224, 255, 239)",
84 "comment": "Lightest success background color",
85 "name": "colorBackgroundSuccessLightest"
86 },
87 {
88 "type": "color",
89 "category": "background-color",
90 "value": "rgb(255, 233, 231)",
91 "comment": "Lightest background for destructive actions or highlights",
92 "name": "colorBackgroundDestructiveLightest"
93 },
94 {
95 "type": "color",
96 "category": "background-color",
97 "value": "rgb(245, 248, 255)",
98 "comment": "Lightest background for primary actions or highlights",
99 "name": "colorBackgroundPrimaryLightest"
100 },
101 {
102 "type": "color",
103 "category": "background-color",
104 "value": "rgb(35, 54, 89)",
105 "comment": "Primary brand background, accessible with inverse text",
106 "name": "colorBackgroundBrand"
107 },
108 {
109 "type": "color",
110 "category": "background-color",
111 "value": "rgb(172, 30, 22)",
112 "comment": "Error background color",
113 "name": "colorBackgroundError"
114 },
115 {
116 "type": "color",
117 "category": "background-color",
118 "value": "rgb(232, 83, 74)",
119 "comment": "Required background color",
120 "name": "colorBackgroundRequired"
121 },
122 {
123 "type": "color",
124 "category": "background-color",
125 "value": "rgb(112, 6, 0)",
126 "comment": "Dark background for destructive actions or highlights",
127 "name": "colorBackgroundDestructiveDark"
128 },
129 {
130 "type": "color",
131 "category": "background-color",
132 "value": "rgb(255, 140, 133)",
133 "comment": "Light background for destructive actions or highlights",
134 "name": "colorBackgroundDestructiveLight"
135 },
136 {
137 "type": "color",
138 "category": "background-color",
139 "value": "rgb(0, 44, 166)",
140 "comment": "Dark background for primary actions or highlights",
141 "name": "colorBackgroundPrimaryDark"
142 },
143 {
144 "type": "color",
145 "category": "background-color",
146 "value": "rgb(186, 204, 255)",
147 "comment": "Light background for primary actions or highlights",
148 "name": "colorBackgroundPrimaryLight"
149 },
150 {
151 "type": "color",
152 "category": "background-color",
153 "value": "rgb(255, 236, 216)",
154 "comment": "Lightest warning background color",
155 "name": "colorBackgroundWarningLightest"
156 },
157 {
158 "type": "color",
159 "category": "background-color",
160 "value": "rgb(255, 255, 255)",
161 "comment": "Background color of the main page body",
162 "name": "colorBackgroundBody"
163 },
164 {
165 "type": "color",
166 "category": "background-color",
167 "value": "rgb(243, 244, 246)",
168 "comment": "Default background color for any container",
169 "name": "colorBackground"
170 },
171 {
172 "type": "color",
173 "category": "background-color",
174 "value": "rgb(242, 47, 70)",
175 "comment": "Highlight brand background, accessible with black text",
176 "name": "colorBackgroundBrandHighlight"
177 },
178 {
179 "type": "color",
180 "category": "background-color",
181 "value": "rgb(8, 21, 44)",
182 "comment": "Inverse background color for any container",
183 "name": "colorBackgroundInverse"
184 },
185 {
186 "type": "color",
187 "category": "border-color",
188 "value": "rgb(255, 185, 179)",
189 "comment": "Destructive focus border color",
190 "name": "colorBorderDestructiveLighter"
191 },
192 {
193 "type": "color",
194 "category": "border-color",
195 "value": "rgb(219, 230, 255)",
196 "comment": "Lighter primary border color",
197 "name": "colorBorderPrimaryLighter"
198 },
199 {
200 "type": "color",
201 "category": "border-color",
202 "value": "rgb(0, 58, 219)",
203 "comment": "Input hover border color",
204 "name": "colorBorderInputHover"
205 },
206 {
207 "type": "color",
208 "category": "border-color",
209 "value": "rgb(0, 31, 117)",
210 "comment": "Darker primary border color",
211 "name": "colorBorderPrimaryDarker"
212 },
213 {
214 "type": "color",
215 "category": "border-color",
216 "value": "rgb(228, 98, 22)",
217 "comment": "Warning border color",
218 "name": "colorBorderWarning"
219 },
220 {
221 "type": "color",
222 "category": "border-color",
223 "value": "rgb(71, 5, 0)",
224 "comment": "Darker destructive hover border color",
225 "name": "colorBorderDestructiveDarker"
226 },
227 {
228 "type": "color",
229 "category": "border-color",
230 "value": "rgb(206, 36, 26)",
231 "comment": "Destructive border color",
232 "name": "colorBorderDestructive"
233 },
234 {
235 "type": "color",
236 "category": "border-color",
237 "value": "rgb(51, 104, 250)",
238 "comment": "Primary border color",
239 "name": "colorBorderPrimary"
240 },
241 {
242 "type": "color",
243 "category": "border-color",
244 "value": "rgb(0, 153, 74)",
245 "comment": "Success border color",
246 "name": "colorBorderSuccess"
247 },
248 {
249 "type": "color",
250 "category": "border-color",
251 "value": "rgb(255, 233, 231)",
252 "comment": "Lightest error border color",
253 "name": "colorBorderErrorLightest"
254 },
255 {
256 "type": "color",
257 "category": "border-color",
258 "value": "rgb(156, 167, 186)",
259 "comment": "Dark border color",
260 "name": "colorBorderDark"
261 },
262 {
263 "type": "color",
264 "category": "border-color",
265 "value": "rgb(250, 156, 102)",
266 "comment": "Light warning border color",
267 "name": "colorBorderWarningLight"
268 },
269 {
270 "type": "color",
271 "category": "border-color",
272 "value": "rgb(224, 255, 239)",
273 "comment": "Lightest success border color",
274 "name": "colorBorderSuccessLightest"
275 },
276 {
277 "type": "color",
278 "category": "border-color",
279 "value": "rgb(172, 30, 22)",
280 "comment": "Error border color",
281 "name": "colorBorderError"
282 },
283 {
284 "type": "color",
285 "category": "border-color",
286 "value": "rgb(136, 148, 170)",
287 "comment": "Input border color",
288 "name": "colorBorderInput"
289 },
290 {
291 "type": "color",
292 "category": "border-color",
293 "value": "rgb(255, 140, 133)",
294 "comment": "Destructive focus border color",
295 "name": "colorBorderDestructiveLight"
296 },
297 {
298 "type": "color",
299 "category": "border-color",
300 "value": "rgb(186, 204, 255)",
301 "comment": "Light primary border color",
302 "name": "colorBorderPrimaryLight"
303 },
304 {
305 "type": "color",
306 "category": "border-color",
307 "value": "rgb(182, 191, 206)",
308 "comment": "Default border color",
309 "name": "colorBorder"
310 },
311 {
312 "type": "color",
313 "category": "border-color",
314 "value": "rgb(255, 236, 216)",
315 "comment": "Lightest warning border color",
316 "name": "colorBorderWarningLightest"
317 },
318 {
319 "type": "color",
320 "category": "border-color",
321 "value": "rgb(0, 44, 166)",
322 "comment": "Dark primary border color",
323 "name": "colorBorderPrimaryDark"
324 },
325 {
326 "type": "color",
327 "category": "border-color",
328 "value": "rgb(112, 6, 0)",
329 "comment": "Destructive focus border color",
330 "name": "colorBorderDestructiveDark"
331 },
332 {
333 "type": "color",
334 "category": "border-color",
335 "value": "rgb(182, 191, 206)",
336 "comment": "Light neutral border color",
337 "name": "colorBorderNeutralLight"
338 },
339 {
340 "type": "color",
341 "category": "border-color",
342 "value": "rgb(232, 83, 74)",
343 "comment": "Light error border color",
344 "name": "colorBorderErrorLight"
345 },
346 {
347 "type": "color",
348 "category": "border-color",
349 "value": "rgb(0, 58, 219)",
350 "comment": "Input focus border color",
351 "name": "colorBorderInputFocus"
352 },
353 {
354 "type": "color",
355 "category": "border-color",
356 "value": "rgb(204, 210, 220)",
357 "comment": "Light border color",
358 "name": "colorBorderLight"
359 },
360 {
361 "type": "size",
362 "category": "radius",
363 "value": "0",
364 "comment": "Border radius reset",
365 "name": "borderRadius0"
366 },
367 {
368 "type": "size",
369 "category": "radius",
370 "value": "3px",
371 "comment": "Small border radius",
372 "name": "borderRadius10"
373 },
374 {
375 "type": "size",
376 "category": "radius",
377 "value": "4px",
378 "comment": "Large border radius",
379 "name": "borderRadius20"
380 },
381 {
382 "type": "size",
383 "category": "radius",
384 "value": "8px",
385 "comment": "Larger border radius",
386 "name": "borderRadius30"
387 },
388 {
389 "type": "size",
390 "category": "radius",
391 "value": "0.5",
392 "comment": "Circular border radius",
393 "name": "borderRadiusCircle"
394 },
395 {
396 "type": "size",
397 "category": "border-width",
398 "value": "0",
399 "comment": "Border width reset",
400 "name": "borderWidth0"
401 },
402 {
403 "type": "size",
404 "category": "border-width",
405 "value": "1px",
406 "comment": "Small border width",
407 "name": "borderWidth10"
408 },
409 {
410 "type": "size",
411 "category": "border-width",
412 "value": "2px",
413 "comment": "Large border width",
414 "name": "borderWidth20"
415 },
416 {
417 "type": "shadow",
418 "category": "box-shadow",
419 "value": "0 2px 4px 0 rgba(18, 28, 45, 0.3)",
420 "comment": "Shadow for cards.",
421 "name": "shadowCard"
422 },
423 {
424 "type": "shadow",
425 "category": "box-shadow",
426 "value": "0 0 0 4px rgba(51, 104, 250, 0.8)",
427 "comment": "Shadow for focus ring on interactive elements",
428 "name": "shadowFocus"
429 },
430 {
431 "type": "shadow",
432 "category": "box-shadow",
433 "value": "0 0 0 1px #8894aa",
434 "comment": "Shadow border for inputs.",
435 "name": "shadowBorderInput"
436 },
437 {
438 "type": "shadow",
439 "category": "box-shadow",
440 "value": "0 0 0 1px #001f75",
441 "comment": "Shadow border for inputs hover.",
442 "name": "shadowBorderInputHover"
443 },
444 {
445 "type": "shadow",
446 "category": "box-shadow",
447 "value": "0 0 0 1px #d61f1f",
448 "comment": "Shadow border for error inputs.",
449 "name": "shadowBorderInputError"
450 },
451 {
452 "type": "shadow",
453 "category": "box-shadow",
454 "value": "0 0 0 1px #940800",
455 "comment": "Shadow border for error inputs hover.",
456 "name": "shadowBorderInputErrorHover"
457 },
458 {
459 "type": "shadow",
460 "category": "box-shadow",
461 "value": "0 0 0 1px #ccd2dc",
462 "comment": "Shadow border for disabled inputs.",
463 "name": "shadowBorderInputDisabled"
464 },
465 {
466 "category": "font",
467 "type": "font",
468 "value": "'Colfax', Helvetica, Arial, sans-serif",
469 "name": "fontFamilyText"
470 },
471 {
472 "category": "font",
473 "type": "font",
474 "value": "'Fira Mono', 'Courier New', Courier, monospace",
475 "name": "fontFamilyCode"
476 },
477 {
478 "category": "font-size",
479 "type": "font-size",
480 "value": "48",
481 "comment": "Constant typography token for font size 110",
482 "name": "fontSize110"
483 },
484 {
485 "category": "font-size",
486 "type": "font-size",
487 "value": "40",
488 "comment": "Constant typography token for font size 100",
489 "name": "fontSize100"
490 },
491 {
492 "category": "font-size",
493 "type": "font-size",
494 "value": "32",
495 "comment": "Constant typography token for font size 90",
496 "name": "fontSize90"
497 },
498 {
499 "category": "font-size",
500 "type": "font-size",
501 "value": "28",
502 "comment": "Constant typography token for font size 80",
503 "name": "fontSize80"
504 },
505 {
506 "category": "font-size",
507 "type": "font-size",
508 "value": "24",
509 "comment": "Constant typography token for font size 70",
510 "name": "fontSize70"
511 },
512 {
513 "category": "font-size",
514 "type": "font-size",
515 "value": "20",
516 "comment": "Constant typography token for font size 60",
517 "name": "fontSize60"
518 },
519 {
520 "category": "font-size",
521 "type": "font-size",
522 "value": "18",
523 "comment": "Constant typography token for font size 50",
524 "name": "fontSize50"
525 },
526 {
527 "category": "font-size",
528 "type": "font-size",
529 "value": "16",
530 "comment": "Constant typography token for font size 40",
531 "name": "fontSize40"
532 },
533 {
534 "category": "font-size",
535 "type": "font-size",
536 "value": "14",
537 "comment": "Constant typography token for font size 30",
538 "name": "fontSize30"
539 },
540 {
541 "category": "font-size",
542 "type": "font-size",
543 "value": "12",
544 "comment": "Constant typography token for font size 20",
545 "name": "fontSize20"
546 },
547 {
548 "category": "font-size",
549 "type": "font-size",
550 "value": "10",
551 "comment": "Constant typography token for font size 10",
552 "name": "fontSize10"
553 },
554 {
555 "category": "font-weight",
556 "type": "font-weight",
557 "value": "300",
558 "comment": "Font weight for light weight",
559 "name": "fontWeightLight"
560 },
561 {
562 "category": "font-weight",
563 "type": "font-weight",
564 "value": "400",
565 "comment": "Font weight for normal weight",
566 "name": "fontWeightNormal"
567 },
568 {
569 "category": "font-weight",
570 "type": "font-weight",
571 "value": "500",
572 "comment": "Font weight for medium weight",
573 "name": "fontWeightMedium"
574 },
575 {
576 "category": "font-weight",
577 "type": "font-weight",
578 "value": "600",
579 "comment": "Font weight for semibold weight",
580 "name": "fontWeightSemibold"
581 },
582 {
583 "category": "font-weight",
584 "type": "font-weight",
585 "value": "700",
586 "comment": "Font weight for bold weight",
587 "name": "fontWeightBold"
588 },
589 {
590 "category": "line-height",
591 "type": "number",
592 "value": "60",
593 "comment": "fontSize110's lineHeight mapping. fontSize110 * 1.25 = 60px / 16 = 3.75rem",
594 "name": "lineHeight110"
595 },
596 {
597 "category": "line-height",
598 "type": "number",
599 "value": "40",
600 "comment": "fontSize90's lineHeight mapping. fontSize90 * 1.25 = 40px / 16 = 2.5rem",
601 "name": "lineHeight90"
602 },
603 {
604 "category": "line-height",
605 "type": "number",
606 "value": "52",
607 "comment": "fontSize100's lineHeight mapping. fontSize100 * 1.25 = 52px / 16 = 3.25rem",
608 "name": "lineHeight100"
609 },
610 {
611 "category": "line-height",
612 "type": "number",
613 "value": "36",
614 "comment": "fontSize80's lineHeight mapping. fontSize80 * 1.25 = 36px / 16 = 2.25rem",
615 "name": "lineHeight80"
616 },
617 {
618 "category": "line-height",
619 "type": "number",
620 "value": "32",
621 "comment": "fontSize70's lineHeight mapping. fontSize70 * 1.25 = 32px / 16 = 2rem",
622 "name": "lineHeight70"
623 },
624 {
625 "category": "line-height",
626 "type": "number",
627 "value": "28",
628 "comment": "fontSize60's lineHeight mapping. fontSize60 * 1.25 = 28px / 16 = 1.75rem",
629 "name": "lineHeight60"
630 },
631 {
632 "category": "line-height",
633 "type": "number",
634 "value": "28",
635 "comment": "fontSize50's lineHeight mapping. fontSize50 * 1.55 = 28px / 16 = 1.75rem",
636 "name": "lineHeight50"
637 },
638 {
639 "category": "line-height",
640 "type": "number",
641 "value": "28",
642 "comment": "fontSize40's lineHeight mapping. fontSize40 * 1.55 = 28px / 16 = 1.75rem",
643 "name": "lineHeight40"
644 },
645 {
646 "category": "line-height",
647 "type": "number",
648 "value": "24",
649 "comment": "fontSize30's lineHeight mapping. fontSize30 * 1.55 = 24px / 16 = 1.5rem",
650 "name": "lineHeight30"
651 },
652 {
653 "category": "line-height",
654 "type": "number",
655 "value": "20",
656 "comment": "fontSize20's lineHeight mapping. fontSize20 * 1.55 = 20px / 16 = 1.25rem",
657 "name": "lineHeight20"
658 },
659 {
660 "category": "line-height",
661 "type": "number",
662 "value": "16",
663 "comment": "fontSize10's lineHeight mapping. fontSize10 * 1.55 = 16px / 16 = 1rem",
664 "name": "lineHeight10"
665 },
666 {
667 "type": "color",
668 "category": "color",
669 "value": "rgb(51, 104, 250)",
670 "comment": "SendGrid product blue",
671 "name": "colorBrandHighlight"
672 },
673 {
674 "type": "color",
675 "category": "color",
676 "value": "rgb(255, 255, 255)",
677 "comment": "Gray Color 0",
678 "name": "colorGray0"
679 },
680 {
681 "type": "color",
682 "category": "color",
683 "value": "rgb(8, 21, 44)",
684 "comment": "Gray Color 10",
685 "name": "colorGray100"
686 },
687 {
688 "type": "color",
689 "category": "color",
690 "value": "rgb(29, 41, 68)",
691 "comment": "Gray Color 9",
692 "name": "colorGray90"
693 },
694 {
695 "type": "color",
696 "category": "color",
697 "value": "rgb(71, 86, 114)",
698 "comment": "Gray Color 8",
699 "name": "colorGray80"
700 },
701 {
702 "type": "color",
703 "category": "color",
704 "value": "rgb(136, 148, 170)",
705 "comment": "Gray Color 7",
706 "name": "colorGray70"
707 },
708 {
709 "type": "color",
710 "category": "color",
711 "value": "rgb(156, 167, 186)",
712 "comment": "Gray Color 6",
713 "name": "colorGray60"
714 },
715 {
716 "type": "color",
717 "category": "color",
718 "value": "rgb(182, 191, 206)",
719 "comment": "Gray Color 5",
720 "name": "colorGray50"
721 },
722 {
723 "type": "color",
724 "category": "color",
725 "value": "rgb(204, 210, 220)",
726 "comment": "Gray Color 4",
727 "name": "colorGray40"
728 },
729 {
730 "type": "color",
731 "category": "color",
732 "value": "rgb(8, 21, 44)",
733 "comment": "SendGrid product dark gray",
734 "name": "colorBrand"
735 },
736 {
737 "type": "color",
738 "category": "color",
739 "value": "rgb(229, 231, 236)",
740 "comment": "Gray Color 3",
741 "name": "colorGray30"
742 },
743 {
744 "type": "color",
745 "category": "color",
746 "value": "rgb(243, 244, 246)",
747 "comment": "Gray Color 2",
748 "name": "colorGray20"
749 },
750 {
751 "type": "color",
752 "category": "color",
753 "value": "rgb(249, 250, 251)",
754 "comment": "Gray Color 1",
755 "name": "colorGray10"
756 },
757 {
758 "type": "size",
759 "category": "sizing",
760 "value": "36",
761 "comment": "Maps to line-height tokens 1:1",
762 "name": "sizeIcon80"
763 },
764 {
765 "type": "size",
766 "category": "sizing",
767 "value": "32",
768 "comment": "Maps to line-height tokens 1:1",
769 "name": "sizeIcon70"
770 },
771 {
772 "type": "size",
773 "category": "sizing",
774 "value": "28",
775 "comment": "Maps to line-height tokens 1:1",
776 "name": "sizeIcon60"
777 },
778 {
779 "type": "size",
780 "category": "sizing",
781 "value": "920",
782 "comment": "Generic sizing token scale for UI components.",
783 "name": "size90"
784 },
785 {
786 "type": "size",
787 "category": "sizing",
788 "value": "1232",
789 "comment": "Generic sizing token scale for UI components.",
790 "name": "size120"
791 },
792 {
793 "type": "size",
794 "category": "sizing",
795 "value": "28",
796 "comment": "Maps to line-height tokens 1:1",
797 "name": "sizeIcon50"
798 },
799 {
800 "type": "size",
801 "category": "sizing",
802 "value": "816",
803 "comment": "Generic sizing token scale for UI components.",
804 "name": "size80"
805 },
806 {
807 "type": "size",
808 "category": "sizing",
809 "value": "0",
810 "comment": "Generic sizing token scale for UI components.",
811 "name": "size0"
812 },
813 {
814 "type": "size",
815 "category": "sizing",
816 "value": "1128",
817 "comment": "Generic sizing token scale for UI components.",
818 "name": "size110"
819 },
820 {
821 "type": "size",
822 "category": "sizing",
823 "value": "28",
824 "comment": "Maps to line-height tokens 1:1",
825 "name": "sizeIcon40"
826 },
827 {
828 "type": "size",
829 "category": "sizing",
830 "value": "712",
831 "comment": "Generic sizing token scale for UI components.",
832 "name": "size70"
833 },
834 {
835 "type": "size",
836 "category": "sizing",
837 "value": "1024",
838 "comment": "Generic sizing token scale for UI components.",
839 "name": "size100"
840 },
841 {
842 "type": "size",
843 "category": "sizing",
844 "value": "24",
845 "comment": "Maps to line-height tokens 1:1",
846 "name": "sizeIcon30"
847 },
848 {
849 "type": "size",
850 "category": "sizing",
851 "value": "608",
852 "comment": "Generic sizing token scale for UI components.",
853 "name": "size60"
854 },
855 {
856 "type": "size",
857 "category": "sizing",
858 "value": "20",
859 "comment": "Maps to line-height tokens 1:1",
860 "name": "sizeIcon20"
861 },
862 {
863 "type": "size",
864 "category": "sizing",
865 "value": "16",
866 "comment": "Maps to line-height tokens 1:1",
867 "name": "sizeIcon10"
868 },
869 {
870 "type": "size",
871 "category": "sizing",
872 "value": "504",
873 "comment": "Generic sizing token scale for UI components.",
874 "name": "size50"
875 },
876 {
877 "type": "size",
878 "category": "sizing",
879 "value": "60",
880 "comment": "Maps to line-height tokens 1:1",
881 "name": "sizeIcon110"
882 },
883 {
884 "type": "size",
885 "category": "sizing",
886 "value": "400",
887 "comment": "Generic sizing token scale for UI components.",
888 "name": "size40"
889 },
890 {
891 "type": "size",
892 "category": "sizing",
893 "value": "52",
894 "comment": "Maps to line-height tokens 1:1",
895 "name": "sizeIcon100"
896 },
897 {
898 "type": "size",
899 "category": "sizing",
900 "value": "296",
901 "comment": "Generic sizing token scale for UI components.",
902 "name": "size30"
903 },
904 {
905 "type": "size",
906 "category": "sizing",
907 "value": "192",
908 "comment": "Generic sizing token scale for UI components.",
909 "name": "size20"
910 },
911 {
912 "type": "size",
913 "category": "sizing",
914 "value": "88",
915 "comment": "Generic sizing token scale for UI components.",
916 "name": "size10"
917 },
918 {
919 "type": "size",
920 "category": "sizing",
921 "value": "40",
922 "comment": "Maps to line-height tokens 1:1",
923 "name": "sizeIcon90"
924 },
925 {
926 "category": "spacing",
927 "type": "size",
928 "value": "24",
929 "name": "space70"
930 },
931 {
932 "category": "spacing",
933 "type": "size",
934 "value": "20",
935 "name": "space60"
936 },
937 {
938 "category": "spacing",
939 "type": "size",
940 "value": "72",
941 "name": "space190"
942 },
943 {
944 "category": "spacing",
945 "type": "size",
946 "value": "16",
947 "name": "space50"
948 },
949 {
950 "category": "spacing",
951 "type": "size",
952 "value": "68",
953 "name": "space180"
954 },
955 {
956 "category": "spacing",
957 "type": "size",
958 "value": "12",
959 "name": "space40"
960 },
961 {
962 "category": "spacing",
963 "type": "size",
964 "value": "64",
965 "name": "space170"
966 },
967 {
968 "category": "spacing",
969 "type": "size",
970 "value": "8",
971 "name": "space30"
972 },
973 {
974 "category": "spacing",
975 "type": "size",
976 "value": "60",
977 "name": "space160"
978 },
979 {
980 "category": "spacing",
981 "type": "size",
982 "value": "4",
983 "name": "space20"
984 },
985 {
986 "category": "spacing",
987 "type": "size",
988 "value": "56",
989 "name": "space150"
990 },
991 {
992 "category": "spacing",
993 "type": "size",
994 "value": "2",
995 "name": "space10"
996 },
997 {
998 "category": "spacing",
999 "type": "size",
1000 "value": "52",
1001 "name": "space140"
1002 },
1003 {
1004 "category": "spacing",
1005 "type": "size",
1006 "value": "48",
1007 "name": "space130"
1008 },
1009 {
1010 "category": "spacing",
1011 "type": "size",
1012 "value": "44",
1013 "name": "space120"
1014 },
1015 {
1016 "category": "spacing",
1017 "type": "size",
1018 "value": "40",
1019 "name": "space110"
1020 },
1021 {
1022 "category": "spacing",
1023 "type": "size",
1024 "value": "0",
1025 "name": "space0"
1026 },
1027 {
1028 "category": "spacing",
1029 "type": "size",
1030 "value": "36",
1031 "name": "space100"
1032 },
1033 {
1034 "category": "spacing",
1035 "type": "size",
1036 "value": "76",
1037 "name": "space200"
1038 },
1039 {
1040 "category": "spacing",
1041 "type": "size",
1042 "value": "32",
1043 "name": "space90"
1044 },
1045 {
1046 "category": "spacing",
1047 "type": "size",
1048 "value": "28",
1049 "name": "space80"
1050 },
1051 {
1052 "type": "color",
1053 "category": "text-color",
1054 "value": "rgb(0, 31, 117)",
1055 "comment": "Darker shade of link text to be used in interactions",
1056 "name": "colorTextLinkDarker"
1057 },
1058 {
1059 "type": "color",
1060 "category": "text-color",
1061 "value": "rgb(206, 36, 26)",
1062 "comment": "Destructive link text",
1063 "name": "colorTextLinkDestructive"
1064 },
1065 {
1066 "type": "color",
1067 "category": "text-color",
1068 "value": "rgb(228, 98, 22)",
1069 "comment": "Color for warning text.",
1070 "name": "colorTextWarning"
1071 },
1072 {
1073 "type": "color",
1074 "category": "text-color",
1075 "value": "rgb(156, 167, 186)",
1076 "comment": "Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.",
1077 "name": "colorTextInverseWeak"
1078 },
1079 {
1080 "type": "color",
1081 "category": "text-color",
1082 "value": "rgb(71, 5, 0)",
1083 "comment": "Darker shade of destructive link text to be used in interactions",
1084 "name": "colorTextLinkDestructiveDarker"
1085 },
1086 {
1087 "type": "color",
1088 "category": "text-color",
1089 "value": "rgb(0, 153, 74)",
1090 "comment": "Text color for success text.",
1091 "name": "colorTextSuccess"
1092 },
1093 {
1094 "type": "color",
1095 "category": "text-color",
1096 "value": "rgb(71, 86, 114)",
1097 "comment": "Weak body text for visual hierarchy. Must pass AA color contrast with color-background.",
1098 "name": "colorTextWeak"
1099 },
1100 {
1101 "type": "color",
1102 "category": "text-color",
1103 "value": "rgb(232, 83, 74)",
1104 "comment": "Light shade of destructive link text to be used in interactions",
1105 "name": "colorTextLinkDestructiveLight"
1106 },
1107 {
1108 "type": "color",
1109 "category": "text-color",
1110 "value": "rgb(136, 148, 170)",
1111 "comment": "Default icon color.",
1112 "name": "colorTextIcon"
1113 },
1114 {
1115 "type": "color",
1116 "category": "text-color",
1117 "value": "rgb(0, 58, 219)",
1118 "comment": "Link text",
1119 "name": "colorTextLink"
1120 },
1121 {
1122 "type": "color",
1123 "category": "text-color",
1124 "value": "rgb(148, 8, 0)",
1125 "comment": "Dark error text for inputs and error misc",
1126 "name": "colorTextErrorDark"
1127 },
1128 {
1129 "type": "color",
1130 "category": "text-color",
1131 "value": "rgb(172, 30, 22)",
1132 "comment": "Error text for inputs and error misc",
1133 "name": "colorTextError"
1134 },
1135 {
1136 "type": "color",
1137 "category": "text-color",
1138 "value": "rgb(0, 44, 166)",
1139 "comment": "Dark shade of link text to be used in interactions",
1140 "name": "colorTextLinkDark"
1141 },
1142 {
1143 "type": "color",
1144 "category": "text-color",
1145 "value": "rgb(255, 255, 255)",
1146 "comment": "Text color used on any brand color",
1147 "name": "colorTextBrandInverse"
1148 },
1149 {
1150 "type": "color",
1151 "category": "text-color",
1152 "value": "rgb(8, 21, 44)",
1153 "comment": "Body text color",
1154 "name": "colorText"
1155 },
1156 {
1157 "type": "color",
1158 "category": "text-color",
1159 "value": "rgb(242, 47, 70)",
1160 "comment": "Twilio brand red, accessible on large text only.",
1161 "name": "colorTextBrandHighlight"
1162 },
1163 {
1164 "type": "color",
1165 "category": "text-color",
1166 "value": "rgb(133, 165, 255)",
1167 "comment": "Light shade of link text to be used in interactions",
1168 "name": "colorTextLinkLight"
1169 },
1170 {
1171 "type": "color",
1172 "category": "text-color",
1173 "value": "rgb(255, 255, 255)",
1174 "comment": "Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.",
1175 "name": "colorTextInverse"
1176 },
1177 {
1178 "type": "color",
1179 "category": "text-color",
1180 "value": "rgb(136, 148, 170)",
1181 "comment": "Input placeholder text.",
1182 "name": "colorTextPlaceholder"
1183 },
1184 {
1185 "type": "color",
1186 "category": "text-color",
1187 "value": "rgb(168, 62, 0)",
1188 "comment": "Color for dark warning text.",
1189 "name": "colorTextWarningDark"
1190 },
1191 {
1192 "type": "color",
1193 "category": "text-color",
1194 "value": "rgb(112, 6, 0)",
1195 "comment": "Dark shade of destructive link text to be used in interactions",
1196 "name": "colorTextLinkDestructiveDark"
1197 },
1198 {
1199 "type": "color",
1200 "category": "text-color",
1201 "value": "rgb(8, 21, 44)",
1202 "comment": "Text color for field labels.",
1203 "name": "colorTextLabel"
1204 },
1205 {
1206 "type": "z-index",
1207 "category": "z-index",
1208 "value": "0",
1209 "name": "zIndex0"
1210 },
1211 {
1212 "type": "z-index",
1213 "category": "z-index",
1214 "value": "90",
1215 "name": "zIndex90"
1216 },
1217 {
1218 "type": "z-index",
1219 "category": "z-index",
1220 "value": "80",
1221 "name": "zIndex80"
1222 },
1223 {
1224 "type": "z-index",
1225 "category": "z-index",
1226 "value": "70",
1227 "name": "zIndex70"
1228 },
1229 {
1230 "type": "z-index",
1231 "category": "z-index",
1232 "value": "60",
1233 "name": "zIndex60"
1234 },
1235 {
1236 "type": "z-index",
1237 "category": "z-index",
1238 "value": "50",
1239 "name": "zIndex50"
1240 },
1241 {
1242 "type": "z-index",
1243 "category": "z-index",
1244 "value": "40",
1245 "name": "zIndex40"
1246 },
1247 {
1248 "type": "z-index",
1249 "category": "z-index",
1250 "value": "30",
1251 "name": "zIndex30"
1252 },
1253 {
1254 "type": "z-index",
1255 "category": "z-index",
1256 "value": "20",
1257 "name": "zIndex20"
1258 },
1259 {
1260 "type": "z-index",
1261 "category": "z-index",
1262 "value": "10",
1263 "name": "zIndex10"
1264 }
1265 ]
1266}
\No newline at end of file