UNPKG

@twilio-paste/design-tokens

Version:

Paste Design System Tokens package with a number of different formats for Web, Mobile, and Sketch.

33 lines (13 loc) 87.4 kB
export default { "tokens":{ "background-colors": [{"type":"color","value":"rgb(244, 244, 246)","comment":"Default background color for any container.","name":"color-background","altValue":"#F4F4F6"},{"type":"color","value":"rgb(20, 176, 83)","comment":"Background color used to represent an entity or person as \"available\".","name":"color-background-available","altValue":"#14B053"},{"type":"color","value":"rgb(255, 255, 255)","comment":"Background color used for the main page body.","name":"color-background-body","altValue":"#FFFFFF"},{"type":"color","value":"rgb(249, 249, 250)","comment":"Elevation token for color-background-body elements.","name":"color-background-body-elevation","altValue":"#F9F9FA"},{"type":"color","value":"rgb(18, 28, 45)","comment":"Inverse background color used for the main page body.","name":"color-background-body-inverse","altValue":"#121C2D"},{"type":"color","value":"rgb(0, 20, 137)","comment":"Primary brand background, accessible with inverse text.","name":"color-background-brand","altValue":"#001489"},{"type":"color","value":"rgb(242, 190, 90)","comment":"Brand accent background color representing Twilio.","name":"color-background-brand-10","altValue":"#F2BE5A"},{"type":"color","value":"rgb(81, 169, 227)","comment":"Brand accent background color representing Sendgrid.","name":"color-background-brand-20","altValue":"#51A9E3"},{"type":"color","value":"rgb(106, 221, 178)","comment":"Brand accent background color representing Segment.","name":"color-background-brand-30","altValue":"#6ADDB2"},{"type":"color","value":"rgb(242, 47, 70)","comment":"Highlight brand background, accessible with black text.","name":"color-background-brand-highlight","altValue":"#F22F46"},{"type":"color","value":"rgba(242, 47, 70, 0.1)","comment":"Weakest background color used for brand highlights.","name":"color-background-brand-highlight-weakest","altValue":"#F22F461A"},{"type":"color","value":"rgb(3, 11, 93)","comment":"Strong primary brand background, accessible with inverse text.","name":"color-background-brand-strong","altValue":"#030B5D"},{"type":"color","value":"rgb(6, 3, 58)","comment":"Stronger primary brand background, accessible with inverse text.","name":"color-background-brand-stronger","altValue":"#06033A"},{"type":"color","value":"rgb(244, 124, 34)","comment":"Background color used to represent an entity or person as \"busy\".","name":"color-background-busy","altValue":"#F47C22"},{"type":"color","value":"rgb(244, 244, 246)","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.","name":"color-background-decorative-10-weakest","altValue":"#F4F4F6"},{"type":"color","value":"rgb(235, 244, 255)","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.","name":"color-background-decorative-20-weakest","altValue":"#EBF4FF"},{"type":"color","value":"rgb(237, 253, 243)","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.","name":"color-background-decorative-30-weakest","altValue":"#EDFDF3"},{"type":"color","value":"rgb(245, 240, 252)","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.","name":"color-background-decorative-40-weakest","altValue":"#F5F0FC"},{"type":"color","value":"rgb(214, 31, 31)","comment":"Background color used for destructive actions or highlights.","name":"color-background-destructive","altValue":"#D61F1F"},{"type":"color","value":"rgb(117, 12, 12)","comment":"Strong background color used for destructive actions or highlights.","name":"color-background-destructive-strong","altValue":"#750C0C"},{"type":"color","value":"rgb(74, 11, 11)","comment":"Stronger background color used for destructive actions or highlights.","name":"color-background-destructive-stronger","altValue":"#4A0B0B"},{"type":"color","value":"rgb(49, 12, 12)","comment":"Strongest background color used for destructive actions or highlights.","name":"color-background-destructive-strongest","altValue":"#310C0C"},{"type":"color","value":"rgb(246, 177, 177)","comment":"Weak background color used for destructive actions or highlights.","name":"color-background-destructive-weak","altValue":"#F6B1B1"},{"type":"color","value":"rgb(252, 207, 207)","comment":"Weaker background color used for destructive actions or highlights.","name":"color-background-destructive-weaker","altValue":"#FCCFCF"},{"type":"color","value":"rgb(254, 236, 236)","comment":"Weakest background color used for destructive actions or highlights.","name":"color-background-destructive-weakest","altValue":"#FEECEC"},{"type":"color","value":"rgb(237, 238, 242)","comment":"Elevation token for color-background elements.","name":"color-background-elevation","altValue":"#EDEEF2"},{"type":"color","value":"rgb(214, 31, 31)","comment":"Background color used for error alerts and toasts.","name":"color-background-error","altValue":"#D61F1F"},{"type":"color","value":"rgb(117, 12, 12)","comment":"Strongest background color used for error alerts and toasts.","name":"color-background-error-strong","altValue":"#750C0C"},{"type":"color","value":"rgb(74, 11, 11)","comment":"Stronger error background color","name":"color-background-error-stronger","altValue":"#4A0B0B"},{"type":"color","value":"rgb(49, 12, 12)","comment":"Strongest error background color","name":"color-background-error-strongest","altValue":"#310C0C"},{"type":"color","value":"rgb(254, 236, 236)","comment":"Weakest background color used for error alerts and toasts.","name":"color-background-error-weakest","altValue":"#FEECEC"},{"type":"color","value":"rgb(31, 48, 76)","comment":"Inverse background color used for containers.","name":"color-background-inverse","altValue":"#1F304C"},{"type":"color","value":"rgb(37, 57, 91)","comment":"Elevation token for color-background-inverse elements.","name":"color-background-inverse-elevation","altValue":"#25395B"},{"type":"color","value":"rgb(57, 71, 98)","comment":"Strong inverse background color used for containers.","name":"color-background-inverse-strong","altValue":"#394762"},{"type":"color","value":"rgb(37, 57, 91)","comment":"Elevation token for color-background-inverse-strong elements.","name":"color-background-inverse-strong-elevation","altValue":"#25395B"},{"type":"color","value":"rgb(57, 71, 98)","comment":"Stronger inverse background color for any container. Must be used on color-background-body-inverse.","name":"color-background-inverse-stronger","altValue":"#394762"},{"type":"color","value":"rgb(64, 79, 110)","comment":"Elevation token for color-background-inverse-stronger elements.","name":"color-background-inverse-stronger-elevation","altValue":"#404F6E"},{"type":"color","value":"rgb(255, 255, 255)","comment":"Strongest inverse background color used for containers.","name":"color-background-inverse-strongest","altValue":"#FFFFFF"},{"type":"color","value":"rgb(37, 57, 91)","comment":"Elevation token for color-background-inverse-weak elements.","name":"color-background-inverse-weak-elevation","altValue":"#25395B"},{"type":"color","value":"rgb(235, 244, 255)","comment":"Weakest background color used for neutral or default variants.","name":"color-background-neutral-weakest","altValue":"#EBF4FF"},{"type":"color","value":"rgb(245, 240, 252)","comment":"Background color used to represent a new status.","name":"color-background-new","altValue":"#F5F0FC"},{"type":"color","value":"rgb(250, 247, 253)","comment":"Weakest background color for indicating a new status.","name":"color-background-new-weakest","altValue":"#FAF7FD"},{"type":"color","value":"rgb(214, 31, 31)","comment":"Background color used for notifications.","name":"color-background-notification","altValue":"#D61F1F"},{"type":"color","value":"rgb(142, 150, 174)","comment":"Background color used to represent an entity or person as \"offline\".","name":"color-background-offline","altValue":"#8E96AE"},{"type":"color","value":"rgba(6, 3, 58, 0.4)","comment":"Background color used for overlays.","name":"color-background-overlay","altValue":"#06033A66"},{"type":"color","value":"rgb(2, 99, 224)","comment":"Background color used for primary actions or highlights.","name":"color-background-primary","altValue":"#0263E0"},{"type":"color","value":"rgb(0, 20, 137)","comment":"Strong background color used for primary actions or highlights.","name":"color-background-primary-strong","altValue":"#001489"},{"type":"color","value":"rgb(3, 11, 93)","comment":"Stronger background color used for primary actions or highlights.","name":"color-background-primary-stronger","altValue":"#030B5D"},{"type":"color","value":"rgb(6, 3, 58)","comment":"Strongest background color used for primary actions or highlights.","name":"color-background-primary-strongest","altValue":"#06033A"},{"type":"color","value":"rgb(153, 205, 255)","comment":"Weak background color used for primary actions or highlights.","name":"color-background-primary-weak","altValue":"#99CDFF"},{"type":"color","value":"rgb(204, 228, 255)","comment":"Weaker background color used for primary actions or highlights.","name":"color-background-primary-weaker","altValue":"#CCE4FF"},{"type":"color","value":"rgb(235, 244, 255)","comment":"Weakest background color used for primary actions or highlights.","name":"color-background-primary-weakest","altValue":"#EBF4FF"},{"type":"color","value":"rgb(235, 86, 86)","comment":"Background color used to represent required form fields.","name":"color-background-required","altValue":"#EB5656"},{"type":"color","value":"rgb(244, 244, 246)","comment":"Background color used for alternative striped rows.","name":"color-background-row-striped","altValue":"#F4F4F6"},{"type":"color","value":"rgb(225, 227, 234)","comment":"Strong background color used for containers.","name":"color-background-strong","altValue":"#E1E3EA"},{"type":"color","value":"rgb(225, 227, 234)","comment":"Elevation token for color-background-strong elements.","name":"color-background-strong-elevation","altValue":"#E1E3EA"},{"type":"color","value":"rgb(136, 145, 170)","comment":"Stronger background color used for containers.","name":"color-background-stronger","altValue":"#8891AA"},{"type":"color","value":"rgb(75, 86, 113)","comment":"Strongest background color used for containers.","name":"color-background-strongest","altValue":"#4B5671"},{"type":"color","value":"rgb(255, 251, 234)","comment":"Background color used for subaccounts.","name":"color-background-subaccount","altValue":"#FFFBEA"},{"type":"color","value":"rgb(20, 176, 83)","comment":"Background color used for success alerts and toasts.","name":"color-background-success","altValue":"#14B053"},{"type":"color","value":"rgb(237, 253, 243)","comment":"Weakest background color used for success alerts and toasts.","name":"color-background-success-weakest","altValue":"#EDFDF3"},{"type":"color","value":"rgb(209, 250, 224)","comment":"Background color used for trial accounts.","name":"color-background-trial","altValue":"#D1FAE0"},{"type":"color","value":"rgb(214, 31, 31)","comment":"Background color used to represent an entity or person as \"unavailable\".","name":"color-background-unavailable","altValue":"#D61F1F"},{"type":"color","value":"rgb(200, 175, 240)","comment":"Background color used for user avatars.","name":"color-background-user","altValue":"#C8AFF0"},{"type":"color","value":"rgb(244, 124, 34)","comment":"Background color used for warning alerts and toasts.","name":"color-background-warning","altValue":"#F47C22"},{"type":"color","value":"rgb(254, 245, 238)","comment":"Weakest background color used for warning alerts and toasts.","name":"color-background-warning-weakest","altValue":"#FEF5EE"},{"type":"color","value":"rgb(249, 249, 250)","comment":"Weak background color used for containers.","name":"color-background-weak","altValue":"#F9F9FA"},{"type":"color","value":"rgb(249, 249, 250)","comment":"Elevation token for color-background-weak elements.","name":"color-background-weak-elevation","altValue":"#F9F9FA"},{"type":"color","value":"rgb(255, 255, 255)","comment":"Background color for elevated elements. Matches color-background-body in light mode but appears slightly lighter in dark mode to maintain focus.","name":"color-background-weaker","altValue":"#FFFFFF"},{"type":"color","value":"rgb(255, 255, 255)","comment":"The weakest background color used for containers.","name":"color-background-weakest","altValue":"#FFFFFF"}], "border-colors": [{"type":"color","value":"rgb(136, 145, 170)","comment":"Default border color","uicontrol_contrast_pairing":["color-background-body"],"name":"color-border","altValue":"#8891AA"},{"type":"color","value":"rgb(225, 227, 234)","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.","name":"color-border-decorative-10-weaker","altValue":"#E1E3EA"},{"type":"color","value":"rgb(204, 228, 255)","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.","name":"color-border-decorative-20-weaker","altValue":"#CCE4FF"},{"type":"color","value":"rgb(209, 250, 224)","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.","name":"color-border-decorative-30-weaker","altValue":"#D1FAE0"},{"type":"color","value":"rgb(231, 220, 250)","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.","name":"color-border-decorative-40-weaker","altValue":"#E7DCFA"},{"type":"color","value":"rgb(214, 31, 31)","comment":"Destructive border color","uicontrol_contrast_pairing":["color-background","color-background-body","color-background-neutral-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"],"name":"color-border-destructive","altValue":"#D61F1F"},{"type":"color","value":"rgb(117, 12, 12)","comment":"Destructive focus border color","uicontrol_contrast_pairing":["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-new","color-background-row-striped","color-background-primary-weak","color-background-primary-weaker","color-background-primary-weakest","color-background-destructive-weak","color-background-destructive-weaker","color-background-destructive-weakest"],"name":"color-border-destructive-strong","altValue":"#750C0C"},{"type":"color","value":"rgb(74, 11, 11)","comment":"Stronger destructive hover border color","uicontrol_contrast_pairing":["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-new","color-background-row-striped","color-background-primary-weak","color-background-primary-weaker","color-background-primary-weakest","color-background-destructive-weak","color-background-destructive-weaker","color-background-destructive-weakest"],"name":"color-border-destructive-stronger","altValue":"#4A0B0B"},{"type":"color","value":"rgb(49, 12, 12)","comment":"Strongest destructive hover border color","name":"color-border-destructive-strongest","altValue":"#310C0C"},{"type":"color","value":"rgb(246, 177, 177)","comment":"Destructive focus border color","name":"color-border-destructive-weak","altValue":"#F6B1B1"},{"type":"color","value":"rgb(252, 207, 207)","comment":"Destructive focus border color","name":"color-border-destructive-weaker","altValue":"#FCCFCF"},{"type":"color","value":"rgb(254, 236, 236)","comment":"Destructive focus border color","name":"color-border-destructive-weakest","altValue":"#FEECEC"},{"type":"color","value":"rgb(214, 31, 31)","comment":"Error border color","uicontrol_contrast_pairing":["color-background","color-background-body","color-background-neutral-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"],"name":"color-border-error","altValue":"#D61F1F"},{"type":"color","value":"rgb(117, 12, 12)","comment":"Strong error border color","name":"color-border-error-strong","altValue":"#750C0C"},{"type":"color","value":"rgb(74, 11, 11)","comment":"Stronger error border color","name":"color-border-error-stronger","altValue":"#4A0B0B"},{"type":"color","value":"rgb(49, 12, 12)","comment":"Strongest error border color","name":"color-border-error-strongest","altValue":"#310C0C"},{"type":"color","value":"rgb(245, 138, 138)","comment":"Weak error border color","name":"color-border-error-weak","altValue":"#F58A8A"},{"type":"color","value":"rgb(252, 207, 207)","comment":"Weaker error border color","name":"color-border-error-weaker","altValue":"#FCCFCF"},{"type":"color","value":"rgb(254, 236, 236)","comment":"Weakest error border color","name":"color-border-error-weakest","altValue":"#FEECEC"},{"type":"color","value":"rgb(136, 145, 170)","comment":"Border on inverse backgrounds. Must be used on color-background-body-inverse.","uicontrol_contrast_pairing":["color-background-body-inverse"],"name":"color-border-inverse","altValue":"#8891AA"},{"type":"color","value":"rgb(225, 227, 234)","comment":"Strong border on inverse backgrounds. Must be used on color-background-body-inverse.","uicontrol_contrast_pairing":["color-background-body-inverse"],"name":"color-border-inverse-strong","altValue":"#E1E3EA"},{"type":"color","value":"rgb(244, 244, 246)","comment":"Stronger border on inverse backgrounds. Must be used on color-background-body-inverse.","uicontrol_contrast_pairing":["color-background-body-inverse"],"name":"color-border-inverse-stronger","altValue":"#F4F4F6"},{"type":"color","value":"rgb(255, 255, 255)","comment":"Strongest border on inverse backgrounds. Must be used on color-background-body-inverse.","uicontrol_contrast_pairing":["color-background-body-inverse"],"name":"color-border-inverse-strongest","altValue":"#FFFFFF"},{"type":"color","value":"rgb(57, 71, 98)","comment":"Weaker border on inverse backgrounds. Must be used on color-background-body-inverse.","name":"color-border-inverse-weaker","altValue":"#394762"},{"type":"color","value":"rgb(31, 48, 76)","comment":"Weakest border on inverse backgrounds. Must be used on color-background-body-inverse.","name":"color-border-inverse-weakest","altValue":"#1F304C"},{"type":"color","value":"rgb(2, 99, 224)","comment":"Neutral border color","name":"color-border-neutral","altValue":"#0263E0"},{"type":"color","value":"rgb(102, 179, 255)","comment":"Weak neutral border color","name":"color-border-neutral-weak","altValue":"#66B3FF"},{"type":"color","value":"rgb(204, 228, 255)","comment":"Weaker neutral border color","name":"color-border-neutral-weaker","altValue":"#CCE4FF"},{"type":"color","value":"rgb(166, 127, 227)","comment":"Weak border color for something designated as new","name":"color-border-new-weak","altValue":"#A67FE3"},{"type":"color","value":"rgb(231, 220, 250)","comment":"Weaker border color for something designated as new","name":"color-border-new-weaker","altValue":"#E7DCFA"},{"type":"color","value":"rgb(2, 99, 224)","comment":"Primary border color","uicontrol_contrast_pairing":["color-background","color-background-body","color-background-neutral-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"],"name":"color-border-primary","altValue":"#0263E0"},{"type":"color","value":"rgb(0, 20, 137)","comment":"Strong primary border color","uicontrol_contrast_pairing":["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-new","color-background-row-striped","color-background-primary-weak","color-background-primary-weaker","color-background-primary-weakest","color-background-destructive-weak","color-background-destructive-weaker","color-background-destructive-weakest"],"name":"color-border-primary-strong","altValue":"#001489"},{"type":"color","value":"rgb(3, 11, 93)","comment":"Stronger primary border color","uicontrol_contrast_pairing":["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-new","color-background-row-striped","color-background-primary-weak","color-background-primary-weaker","color-background-primary-weakest","color-background-destructive-weak","color-background-destructive-weaker","color-background-destructive-weakest"],"name":"color-border-primary-stronger","altValue":"#030B5D"},{"type":"color","value":"rgb(6, 3, 58)","comment":"Strongest primary border color","name":"color-border-primary-strongest","altValue":"#06033A"},{"type":"color","value":"rgb(153, 205, 255)","comment":"Weak primary border color","name":"color-border-primary-weak","altValue":"#99CDFF"},{"type":"color","value":"rgb(204, 228, 255)","comment":"Weaker primary border color","name":"color-border-primary-weaker","altValue":"#CCE4FF"},{"type":"color","value":"rgb(235, 244, 255)","comment":"Weakest primary border color","name":"color-border-primary-weakest","altValue":"#EBF4FF"},{"type":"color","value":"rgb(96, 107, 133)","comment":"Strong border color","uicontrol_contrast_pairing":["color-background","color-background-strong","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-new","color-background-row-striped","color-background-primary-weaker","color-background-primary-weakest","color-background-destructive-weaker","color-background-destructive-weakest"],"name":"color-border-strong","altValue":"#606B85"},{"type":"color","value":"rgb(20, 176, 83)","comment":"Success border color","name":"color-border-success","altValue":"#14B053"},{"type":"color","value":"rgb(54, 213, 118)","comment":"Weak success border color","name":"color-border-success-weak","altValue":"#36D576"},{"type":"color","value":"rgb(209, 250, 224)","comment":"Weaker success border color","name":"color-border-success-weaker","altValue":"#D1FAE0"},{"type":"color","value":"rgb(237, 253, 243)","comment":"Weakest success border color","name":"color-border-success-weakest","altValue":"#EDFDF3"},{"type":"color","value":"rgb(231, 220, 250)","comment":"User avatar border color.","name":"color-border-user","altValue":"#E7DCFA"},{"type":"color","value":"rgb(244, 124, 34)","comment":"Warning border color","name":"color-border-warning","altValue":"#F47C22"},{"type":"color","value":"rgb(255, 179, 122)","comment":"Weak warning border color","name":"color-border-warning-weak","altValue":"#FFB37A"},{"type":"color","value":"rgb(253, 220, 196)","comment":"Weaker warning border color","name":"color-border-warning-weaker","altValue":"#FDDCC4"},{"type":"color","value":"rgb(254, 245, 238)","comment":"Weakest warning border color","name":"color-border-warning-weakest","altValue":"#FEF5EE"},{"type":"color","value":"rgb(202, 205, 216)","comment":"Weak border color","name":"color-border-weak","altValue":"#CACDD8"},{"type":"color","value":"rgb(225, 227, 234)","comment":"Weaker border color","name":"color-border-weaker","altValue":"#E1E3EA"},{"type":"color","value":"rgb(255, 255, 255)","comment":"Weakest border color","name":"color-border-weakest","altValue":"#FFFFFF"}], "border-widths": [{"type":"size","value":"0","comment":"Border width reset","name":"border-width-0","altValue":null},{"type":"size","value":"1px","comment":"Constant border width token for border width 10","name":"border-width-10","altValue":null},{"type":"size","value":"2px","comment":"Constant border width token for border width 20","name":"border-width-20","altValue":null},{"type":"size","value":"4px","comment":"Constant border width token for border width 30","name":"border-width-30","altValue":null},{"type":"size","value":"8px","comment":"Constant border width token for border width 40","name":"border-width-40","altValue":null}], "box-shadows": [{"type":"shadow","value":"0 4px 16px 0 rgba(18, 28, 45, 0.2)","comment":"Default shadow.","name":"shadow","altValue":null},{"type":"shadow","value":"0 0 0 1px #8891aa","comment":"Shadow border for inputs.","name":"shadow-border","altValue":null},{"type":"shadow","value":"0 1px 0 #855c15","comment":"Strong bottom shadow border for brand 10","name":"shadow-border-bottom-brand-10-strong","altValue":null},{"type":"shadow","value":"0 1px 0 #043cb5","comment":"Strong bottom shadow border for brand 20","name":"shadow-border-bottom-brand-20-strong","altValue":null},{"type":"shadow","value":"0 1px 0 #0e7c3a","comment":"Strong bottom shadow border for brand 30","name":"shadow-border-bottom-brand-30-strong","altValue":null},{"type":"shadow","value":"0 1px 0 #e1e3ea","comment":"Weaker bottom shadow border for decorative 10","name":"shadow-border-bottom-decorative-10-weaker","altValue":null},{"type":"shadow","value":"0 1px 0 #cce4ff","comment":"Weaker bottom shadow border for decorative 20","name":"shadow-border-bottom-decorative-20-weaker","altValue":null},{"type":"shadow","value":"0 1px 0 #d1fae0","comment":"Weaker bottom shadow border for decorative 30","name":"shadow-border-bottom-decorative-30-weaker","altValue":null},{"type":"shadow","value":"0 1px 0 #e7dcfa","comment":"Weaker bottom shadow border for decorative 40","name":"shadow-border-bottom-decorative-40-weaker","altValue":null},{"type":"shadow","value":"0 1px 0 #fccfcf","comment":"Weaker bottom shadow border for error status","name":"shadow-border-bottom-error-weaker","altValue":null},{"type":"shadow","value":"0 1px 0 #5817bd","comment":"Bottom shadow border for the sidebar beta badge","name":"shadow-border-bottom-inverse-new-weaker","altValue":null},{"type":"shadow","value":"0 1px 0 #394762","comment":"Bottom shadow border for inverse border weaker color","name":"shadow-border-bottom-inverse-weaker","altValue":null},{"type":"shadow","value":"inset 0 -1px 0 0 #394762","comment":"Weaker bottom shadow border for tab container on inverse backgrounds","name":"shadow-border-bottom-inverse-weaker-inset","altValue":null},{"type":"shadow","value":"0 1px 0 #cce4ff","comment":"Weaker bottom shadow border for neutral status","name":"shadow-border-bottom-neutral-weaker","altValue":null},{"type":"shadow","value":"0 1px 0 #e7dcfa","comment":"Weaker bottom shadow border for new status","name":"shadow-border-bottom-new-weaker","altValue":null},{"type":"shadow","value":"0 1px 0 #4a0b0b","comment":"Stronger bottom shadow border for notification.","name":"shadow-border-bottom-notification-stronger","altValue":null},{"type":"shadow","value":"0 1px 0 #006dfa","comment":"Bottom shadow border for primary status","name":"shadow-border-bottom-primary","altValue":null},{"type":"shadow","value":"0 1px 0 #ffdd35","comment":"Bottom shadow border for subaccount badge","name":"shadow-border-bottom-subaccount","altValue":null},{"type":"shadow","value":"0 1px 0 #d1fae0","comment":"Weaker bottom shadow border for success status","name":"shadow-border-bottom-success-weaker","altValue":null},{"type":"shadow","value":"0 1px 0 #fddcc4","comment":"Weaker bottom shadow border for warning status","name":"shadow-border-bottom-warning-weaker","altValue":null},{"type":"shadow","value":"0 1px 0 #cacdd8","comment":"Bottom shadow border for border weak color","name":"shadow-border-bottom-weak","altValue":null},{"type":"shadow","value":"inset 0 -1px 0 0 #cacdd8","comment":"Weak bottom shadow border for tab container","name":"shadow-border-bottom-weak-inset","altValue":null},{"type":"shadow","value":"saffron","comment":"Shadow border for brand 10","name":"shadow-border-brand-10","altValue":null},{"type":"shadow","value":"sky","comment":"Shadow border for brand 20","name":"shadow-border-brand-20","altValue":null},{"type":"shadow","value":"mint","comment":"Shadow border for brand 30","name":"shadow-border-brand-30","altValue":null},{"type":"shadow","value":"0 0 0 1px #e1e3ea","comment":"Weaker shadow border for decorative 10","name":"shadow-border-decorative-10-weaker","altValue":null},{"type":"shadow","value":"0 0 0 1px #cce4ff","comment":"Weaker shadow border for decorative 20","name":"shadow-border-decorative-20-weaker","altValue":null},{"type":"shadow","value":"0 0 0 1px #d1fae0","comment":"Weaker shadow border for decorative 30","name":"shadow-border-decorative-30-weaker","altValue":null},{"type":"shadow","value":"0 0 0 1px #e7dcfa","comment":"Weaker shadow border for decorative 40","name":"shadow-border-decorative-40-weaker","altValue":null},{"type":"shadow","value":"0 0 0 1px #d61f1f","comment":"Shadow border for destructive interactions.","name":"shadow-border-destructive","altValue":null},{"type":"shadow","value":"0 0 0 1px #750c0c","comment":"Strong shadow border for destructive interactions","name":"shadow-border-destructive-strong","altValue":null},{"type":"shadow","value":"0 0 0 1px #4a0b0b","comment":"Strong shadow border for destructive interactions","name":"shadow-border-destructive-stronger","altValue":null},{"type":"shadow","value":"0 0 0 1px #310c0c","comment":"Strongest shadow border for destructive interactions","name":"shadow-border-destructive-strongest","altValue":null},{"type":"shadow","value":"0 0 0 1px #f6b1b1","comment":"Weak shadow border for destructive interactions.","name":"shadow-border-destructive-weak","altValue":null},{"type":"shadow","value":"0 0 0 1px #fccfcf","comment":"Weaker shadow border for destructive interactions.","name":"shadow-border-destructive-weaker","altValue":null},{"type":"shadow","value":"0 0 0 1px #d61f1f","comment":"Shadow border for error inputs.","name":"shadow-border-error","altValue":null},{"type":"shadow","value":"0 0 0 1px #750c0c","comment":"Shadow border for error inputs hover.","name":"shadow-border-error-strong","altValue":null},{"type":"shadow","value":"0 0 0 1px #4a0b0b","comment":"Shadow border for error inputs hover.","name":"shadow-border-error-stronger","altValue":null},{"type":"shadow","value":"0 0 0 1px #310c0c","comment":"Strongest shadow border for error inputs hover.","name":"shadow-border-error-strongest","altValue":null},{"type":"shadow","value":"0 0 0 1px #eb5656","comment":"Shadow border for inverse error inputs.","name":"shadow-border-error-weak","altValue":null},{"type":"shadow","value":"0 0 0 1px #fccfcf","comment":"Weaker shadow border for error inputs.","name":"shadow-border-error-weaker","altValue":null},{"type":"shadow","value":"0 0 0 1px #8891aa","comment":"Shadow border on interactive elements on inverse backgrounds.","name":"shadow-border-inverse","altValue":null},{"type":"shadow","value":"0 0 0 1px #5817bd","comment":"Shadow border for the sidebar beta badge.","name":"shadow-border-inverse-new-weaker","altValue":null},{"type":"shadow","value":"0 0 0 1px #e1e3ea","comment":"Strong shadow border on interactive elements on inverse backgrounds.","name":"shadow-border-inverse-strong","altValue":null},{"type":"shadow","value":"0 0 0 1px #f4f4f6","comment":"Stronger shadow border on interactive elements on inverse backgrounds.","name":"shadow-border-inverse-stronger","altValue":null},{"type":"shadow","value":"0 0 0 1px #ffffff","comment":"Strongest shadow border on interactive elements on inverse backgrounds.","name":"shadow-border-inverse-strongest","altValue":null},{"type":"shadow","value":"0 0 0 1px #394762","comment":"Weaker shadow border on interactive elements on inverse backgrounds.","name":"shadow-border-inverse-weaker","altValue":null},{"type":"shadow","value":"0 0 0 1px #1f304c","comment":"Weakest shadow border on interactive elements on inverse backgrounds.","name":"shadow-border-inverse-weakest","altValue":null},{"type":"shadow","value":"0 0 0 1px #cce4ff","comment":"Weaker shadow border for neutral inputs.","name":"shadow-border-neutral-weaker","altValue":null},{"type":"shadow","value":"0 0 0 1px #e7dcfa","comment":"Weaker shadow border for new status inputs.","name":"shadow-border-new-weaker","altValue":null},{"type":"shadow","value":"0 1px 0 #d61f1f","comment":"Shadow border for notification.","name":"shadow-border-notification","altValue":null},{"type":"shadow","value":"0 0 0 1px #0263e0","comment":"Default shadow border for primary interactions.","name":"shadow-border-primary","altValue":null},{"type":"shadow","value":"0 0 0 1px #001489","comment":"Strong shadow border for inputs hover.","name":"shadow-border-primary-strong","altValue":null},{"type":"shadow","value":"0 0 0 1px #030b5d","comment":"Stronger shadow border for inputs active.","name":"shadow-border-primary-stronger","altValue":null},{"type":"shadow","value":"0 0 0 1px #06033a","comment":"Strongest shadow border for inputs active.","name":"shadow-border-primary-strongest","altValue":null},{"type":"shadow","value":"0 0 0 1px #99cdff","comment":"Weaker shadow border for primary interactions.","name":"shadow-border-primary-weak","altValue":null},{"type":"shadow","value":"0 0 0 1px #cce4ff","comment":"Weaker shadow border for primary interactions.","name":"shadow-border-primary-weaker","altValue":null},{"type":"shadow","value":"1px 0 #e1e3ea","comment":"Right shadow border for hover status of vertical tabs on inverse backgrounds","name":"shadow-border-right-inverse-strong","altValue":null},{"type":"shadow","value":"0 0 0 1px #606b85","comment":"Strong shadow border for inputs.","name":"shadow-border-strong","altValue":null},{"type":"shadow","value":"0 0 0 1px #fff1b3","comment":"Shadow border for subaccount badge.","name":"shadow-border-subaccount","altValue":null},{"type":"shadow","value":"0 0 0 1px #d1fae0","comment":"Weaker shadow border for success inputs.","name":"shadow-border-success-weaker","altValue":null},{"type":"shadow","value":"0 -1px 0 #cce4ff","comment":"Top shadow border for for selected status of horizontal tabs on inverse backgrounds","name":"shadow-border-top-inverse-strongest","altValue":null},{"type":"shadow","value":"0 -1px 0 #006dfa","comment":"Top shadow border for selected status of horizontal tabs","name":"shadow-border-top-primary","altValue":null},{"type":"shadow","value":"0 -1px 0 #030b5d","comment":"Top shadow border for selected hover status of horizontal tabs","name":"shadow-border-top-primary-strongest","altValue":null},{"type":"shadow","value":"0 0 0 1px #8c5bd8","comment":"Shadow border for user.","name":"shadow-border-user","altValue":null},{"type":"shadow","value":"0 0 0 1px #fddcc4","comment":"Weaker shadow border for warning inputs.","name":"shadow-border-warning-weaker","altValue":null},{"type":"shadow","value":"0 0 0 1px #cacdd8","comment":"Weak shadow border for disabled inputs.","name":"shadow-border-weak","altValue":null},{"type":"shadow","value":"0 0 0 1px #e1e3ea","comment":"Weaker shadow border for disabled inputs.","name":"shadow-border-weaker","altValue":null},{"type":"shadow","value":"0 2px 8px 0 rgba(18, 28, 45, 0.1)","comment":"Shadow for cards.","name":"shadow-card","altValue":null},{"type":"shadow","value":"0 0 0 1px #edeef2","comment":"Accent shadows that subtly define the edges of a container. They serve as a lightweight alternative to risen shadows at lower elevations.","name":"shadow-elevation-05","altValue":null},{"type":"shadow","value":"0 -1px 0 0 #f4f4f6, 0 3px 4px 0 rgba(15, 22, 33, 0.1)","comment":"Use on elements that overlay other UI components but remain visually connected to the elements behind them.","name":"shadow-elevation-10","altValue":null},{"type":"shadow","value":"0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)","comment":"Use on elements with decorative or semantic use of color that sit above the UI to indicate a greater distance distance from the surface behind them.","name":"shadow-elevation-20","altValue":null},{"type":"shadow","value":"0 1px 0 0 #edeef2","comment":"Accent shadows that subtly define the bottom edge of an element. They serve as a lightweight alternative to risen shadows at lower elevations.","name":"shadow-elevation-bottom-05","altValue":null},{"type":"shadow","value":"0 1px 0 0 #1f304c","comment":"Accent shadows that subtly define the bottom edge of an inverse element. They serve as a lightweight alternative to risen shadows at lower elevations.","name":"shadow-elevation-bottom-inverse-05","altValue":null},{"type":"shadow","value":"0 0 0 1px #1f304c","comment":"Accent shadows that subtly define the the edges of a container on inverse backgrounds. They serve as a lightweight alternative to risen shadows at lower elevations.","name":"shadow-elevation-inverse-05","altValue":null},{"type":"shadow","value":"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.1)","comment":"Use on inverse elements that overlay other UI components but remain visually connected to the elements behind them.","name":"shadow-elevation-inverse-10","altValue":null},{"type":"shadow","value":"0 0 0 1px #f9f9fa, -4px 0 8px 0 rgba(15, 22, 33, 0.1), -16px 0 32px 0 rgba(15, 22, 33, 0.05)","comment":"Use for elements that dynamically open from the right side of the screen, appearing above the UI to indicate a greater separation from the underlying surface.","name":"shadow-elevation-left-20","altValue":null},{"type":"shadow","value":"1px 0 0 0 #1f304c","comment":"Accent shadows that subtly define the right edge of an inverse element. They serve as a lightweight alternative to risen shadows at lower elevations.","name":"shadow-elevation-right-inverse-05","altValue":null},{"type":"shadow","value":"0 -1px 0 0 #edeef2","comment":"Accent shadows that subtly define the top edges of an element. They serve as a lightweight alternative to risen shadows at lower elevations.","name":"shadow-elevation-top-05","altValue":null},{"type":"shadow","value":"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)","comment":"Use on elements that sit above the UI to indicate a greater distance distance from the surface behind them.","name":"shadow-elevation-top-20","altValue":null},{"type":"shadow","value":"0 0 0 4px rgba(2, 99, 224, 0.7)","comment":"Shadow for focus ring on interactive elements.","name":"shadow-focus","altValue":null},{"type":"shadow","value":"inset 0 0 0 2px rgba(2, 99, 224, 0.7)","comment":"Shadow for inset focus on elements, such as DataGrid cells.","name":"shadow-focus-inset","altValue":null},{"type":"shadow","value":"0 0 0 4px rgba(255, 255, 255, 0.4)","comment":"Shadow for focus ring on interactive elements on inverse backgrounds.","name":"shadow-focus-inverse","altValue":null},{"type":"shadow","value":"inset 0 0 0 2px rgba(255, 255, 255, 0.4)","comment":"Shadow for inset focus ring on interactive elements on inverse backgrounds.","name":"shadow-focus-inverse-inset","altValue":null},{"type":"shadow","value":"0 0 0 4px rgba(2, 99, 224, 0.7), 0 0 0 1px #8891aa","comment":"Shadow for simultaneous focus and border.","name":"shadow-focus-shadow-border","altValue":null},{"type":"shadow","value":"0 16px 24px 0 rgba(18, 28, 45, 0.2)","comment":"High elevation default shadow.","name":"shadow-high","altValue":null},{"type":"shadow","value":"4px 0 8px -4px rgba(18, 28, 45, 0.2)","comment":"Left shadow border for elements.","name":"shadow-left","altValue":null},{"type":"shadow","value":"4px 0 8px -4px rgba(0, 0, 0, 0.4)","comment":"Left shadow border for inverse elements.","name":"shadow-left-inverse","altValue":null},{"type":"shadow","value":"0 2px 8px 0 rgba(18, 28, 45, 0.1)","comment":"Low elevation default shadow.","name":"shadow-low","altValue":null},{"type":"shadow","value":"-4px 0 8px -4px rgba(18, 28, 45, 0.2)","comment":"Right shadow border for elements.","name":"shadow-right","altValue":null},{"type":"shadow","value":"-4px 0 8px -4px rgba(0, 0, 0, 0.4)","comment":"Right shadow border for inverse elements.","name":"shadow-right-inverse","altValue":null}], "colors": [{"type":"color","value":"rgb(0, 20, 137)","comment":"Default branding color","name":"color-brand","altValue":null},{"type":"color","value":"rgb(242, 47, 70)","comment":"Twilio brand red","name":"color-brand-highlight","altValue":null},{"type":"color","value":"rgb(255, 255, 255)","comment":"Gray Color 0","name":"color-gray-0","altValue":null},{"type":"color","value":"rgb(244, 244, 246)","comment":"Gray Color 1","name":"color-gray-10","altValue":null},{"type":"color","value":"rgb(225, 227, 234)","comment":"Gray Color 2","name":"color-gray-20","altValue":null},{"type":"color","value":"rgb(202, 205, 216)","comment":"Gray Color 3","name":"color-gray-30","altValue":null},{"type":"color","value":"rgb(142, 150, 174)","comment":"Gray Color 4","name":"color-gray-40","altValue":null},{"type":"color","value":"rgb(136, 145, 170)","comment":"Gray Color 5","name":"color-gray-50","altValue":null},{"type":"color","value":"rgb(96, 107, 133)","comment":"Gray Color 6","name":"color-gray-60","altValue":null},{"type":"color","value":"rgb(75, 86, 113)","comment":"Gray Color 7","name":"color-gray-70","altValue":null},{"type":"color","value":"rgb(57, 71, 98)","comment":"Gray Color 8","name":"color-gray-80","altValue":null},{"type":"color","value":"rgb(31, 48, 76)","comment":"Gray Color 9","name":"color-gray-90","altValue":null},{"type":"color","value":"rgb(18, 28, 45)","comment":"Gray Color 10","name":"color-gray-100","altValue":null}], "color-schemes": [{"type":"string","value":"light","name":"color-scheme","altValue":null}], "data-visualization": [{"type":"color","value":"rgb(0, 20, 137)","comment":"Color used for data visualizations. Must be used in a sequence.","uicontrol_contrast_pairing":["color-background-body"],"data_visualization_contrast_pairing":["color-data-visualization-10","color-data-visualization-2"],"name":"color-data-visualization-1","altValue":null},{"type":"color","value":"rgb(14, 124, 58)","comment":"Color used for data visualizations. Must be used in a sequence.","uicontrol_contrast_pairing":["color-background-body"],"data_visualization_contrast_pairing":["color-data-visualization-1","color-data-visualization-3"],"name":"color-data-visualization-2","altValue":null},{"type":"color","value":"rgb(13, 58, 31)","comment":"Color used for data visualizations. Must be used in a sequence.","uicontrol_contrast_pairing":["color-background-body"],"data_visualization_contrast_pairing":["color-data-visualization-2","color-data-visualization-4"],"name":"color-data-visualization-3","altValue":null},{"type":"color","value":"rgb(0, 140, 255)","comment":"Color used for data visualizations. Must be used in a sequence.","uicontrol_contrast_pairing":["color-background-body"],"data_visualization_contrast_pairing":["color-data-visualization-3","color-data-visualization-5"],"name":"color-data-visualization-4","altValue":null},{"type":"color","value":"rgb(57, 71, 98)","comment":"Color used for data visualizations. Must be used in a sequence.","uicontrol_contrast_pairing":["color-background-body"],"data_visualization_contrast_pairing":["color-data-visualization-4","color-data-visualization-6"],"name":"color-data-visualization-5","altValue":null},{"type":"color","value":"rgb(166, 127, 227)","comment":"Color used for data visualizations. Must be used in a sequence.","uicontrol_contrast_pairing":["color-background-body"],"data_visualization_contrast_pairing":["color-data-visualization-5","color-data-visualization-7"],"name":"color-data-visualization-6","altValue":null},{"type":"color","value":"rgb(109, 46, 209)","comment":"Color used for data visualizations. Must be used in a sequence.","uicontrol_contrast_pairing":["color-background-body"],"data_visualization_contrast_pairing":["color-data-visualization-6","color-data-visualization-8"],"name":"color-data-visualization-7","altValue":null},{"type":"color","value":"rgb(136, 145, 170)","comment":"Color used for data visualizations. Must be used in a sequence.","uicontrol_contrast_pairing":["color-background-body"],"data_visualization_contrast_pairing":["color-data-visualization-7","color-data-visualization-9"],"name":"color-data-visualization-8","altValue":null},{"type":"color","value":"rgb(117, 12, 12)","comment":"Color used for data visualizations. Must be used in a sequence.","uicontrol_contrast_pairing":["color-background-body"],"data_visualization_contrast_pairing":["color-data-visualization-8","color-data-visualization-10"],"name":"color-data-visualization-9","altValue":null},{"type":"color","value":"rgb(235, 86, 86)","comment":"Color used for data visualizations. Must be used in a sequence.","uicontrol_contrast_pairing":["color-background-body"],"data_visualization_contrast_pairing":["color-data-visualization-9","color-data-visualization-1"],"name":"color-data-visualization-10","altValue":null}], "fonts": [{"type":"font","value":"'TwilioSansMono', Courier, monospace","name":"font-family-code","altValue":null},{"type":"font","value":"'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif","name":"font-family-display","altValue":null},{"type":"font","value":"'Colfax', Helvetica, Arial, sans-serif","name":"font-family-text","altValue":null},{"type":"font","value":"'Inter var experimental', 'Inter var', 'Microsoft YaHei New', 微软雅黑, 'Microsoft Yahei', 'Microsoft JhengHei', 宋体, SimSun, sans-serif","name":"font-family-text-chinese-simplified","altValue":null},{"type":"font","value":"'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif","name":"font-family-text-chinese-traditional","altValue":null},{"type":"font","value":"'Inter var experimental', 'Inter var', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, Osaka, 'MS PGothic', sans-serif","name":"font-family-text-japanese","altValue":null},{"type":"font","value":"'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif","name":"font-family-text-korean","altValue":null}], "font-sizes": [{"type":"font-size","value":"0.625rem","comment":"Constant typography token for font size 10","name":"font-size-10","altValue":"10px"},{"type":"font-size","value":"0.75rem","comment":"Constant typography token for font size 20","name":"font-size-20","altValue":"12px"},{"type":"font-size","value":"0.875rem","comment":"Constant typography token for font size 30","name":"font-size-30","altValue":"14px"},{"type":"font-size","value":"1rem","comment":"Constant typography token for font size 40","name":"font-size-40","altValue":"16px"},{"type":"font-size","value":"1.125rem","comment":"Constant typography token for font size 50","name":"font-size-50","altValue":"18px"},{"type":"font-size","value":"1.25rem","comment":"Constant typography token for font size 60","name":"font-size-60","altValue":"20px"},{"type":"font-size","value":"1.5rem","comment":"Constant typography token for font size 70","name":"font-size-70","altValue":"24px"},{"type":"font-size","value":"1.75rem","comment":"Constant typography token for font size 80","name":"font-size-80","altValue":"28px"},{"type":"font-size","value":"2rem","comment":"Constant typography token for font size 90","name":"font-size-90","altValue":"32px"},{"type":"font-size","value":"2.5rem","comment":"Constant typography token for font size 100","name":"font-size-100","altValue":"40px"},{"type":"font-size","value":"3rem","comment":"Constant typography token for font size 110","name":"font-size-110","altValue":"48px"},{"type":"font-size","value":"100%","comment":"Base font size applied to the html element, used for rem calculations","name":"font-size-base","altValue":"16px"},{"type":"font-size","value":"2rem","comment":"Constant typography token for font size display 10","name":"font-size-display-10","altValue":"32px"},{"type":"font-size","value":"3rem","comment":"Constant typography token for font size display 20","name":"font-size-display-20","altValue":"48px"},{"type":"font-size","value":"4rem","comment":"Constant typography token for font size display 30","name":"font-size-display-30","altValue":"64px"}], "font-weights": [{"type":"font-weight","value":"400","comment":"Font weight for light weight","name":"font-weight-light","altValue":null},{"type":"font-weight","value":"400","comment":"Font weight for normal weight","name":"font-weight-normal","altValue":null},{"type":"font-weight","value":"500","comment":"Font weight for medium weight","name":"font-weight-medium","altValue":null},{"type":"font-weight","value":"600","comment":"Font weight for semibold weight","name":"font-weight-semibold","altValue":null},{"type":"font-weight","value":"700","comment":"Font weight for bold weight","name":"font-weight-bold","altValue":null},{"type":"font-weight","value":"800","comment":"Font weight for extrabold weight","name":"font-weight-extrabold","altValue":null}], "line-heights": [{"type":"number","value":"0","comment":"Constant line-height token for line-height 0","name":"line-height-0","altValue":"0px"},{"type":"number","val