UNPKG

72.3 kBJavaScriptView Raw
1module.exports = {
2"tokens":{
3 "background-colors": [{"type":"color","value":"rgb(244, 244, 246)","comment":"Background color used for containers.","originalValue":"{!palette-gray-10}","name":"color-background"},{"type":"color","value":"rgb(20, 176, 83)","comment":"Background color used to represent an entity or person as \"available\".","originalValue":"{!palette-green-60}","name":"color-background-available"},{"type":"color","value":"rgb(255, 255, 255)","comment":"Background color used for the main page body.","originalValue":"{!palette-gray-0}","name":"color-background-body"},{"type":"color","value":"rgb(18, 28, 45)","comment":"Inverse background color used for the main page body.","originalValue":"{!palette-gray-100}","name":"color-background-body-inverse"},{"type":"color","value":"rgb(0, 20, 137)","comment":"Background color used for brand.","originalValue":"{!palette-blue-80}","name":"color-background-brand"},{"type":"color","value":"rgb(242, 47, 70)","comment":"Background color used for brand highlights.","originalValue":"{!amaranth}","name":"color-background-brand-highlight"},{"type":"color","value":"rgba(242, 47, 70, 0.1)","comment":"Weakest background color used for brand highlights.","originalValue":"{!amaranth-transparent-10}","name":"color-background-brand-highlight-weakest"},{"type":"color","value":"rgb(3, 11, 93)","comment":"Strong background color used for brand.","originalValue":"{!palette-blue-90}","name":"color-background-brand-strong"},{"type":"color","value":"rgb(6, 3, 58)","comment":"Stronger background color used for brand.","originalValue":"{!palette-blue-100}","name":"color-background-brand-stronger"},{"type":"color","value":"rgb(244, 124, 34)","comment":"Background color used to represent an entity or person as \"busy\".","originalValue":"{!palette-orange-60}","name":"color-background-busy"},{"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.","originalValue":"{!palette-gray-10}","name":"color-background-decorative-10-weakest"},{"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.","originalValue":"{!palette-blue-10}","name":"color-background-decorative-20-weakest"},{"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.","originalValue":"{!palette-green-10}","name":"color-background-decorative-30-weakest"},{"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.","originalValue":"{!palette-purple-10}","name":"color-background-decorative-40-weakest"},{"type":"color","value":"rgb(214, 31, 31)","comment":"Background color used for destructive actions or highlights.","originalValue":"{!palette-red-60}","name":"color-background-destructive"},{"type":"color","value":"rgb(117, 12, 12)","comment":"Strong background color used for destructive actions or highlights.","originalValue":"{!palette-red-80}","name":"color-background-destructive-strong"},{"type":"color","value":"rgb(74, 11, 11)","comment":"Stronger background color used for destructive actions or highlights.","originalValue":"{!palette-red-90}","name":"color-background-destructive-stronger"},{"type":"color","value":"rgb(49, 12, 12)","comment":"Strongest background color used for destructive actions or highlights.","originalValue":"{!palette-red-100}","name":"color-background-destructive-strongest"},{"type":"color","value":"rgb(246, 177, 177)","comment":"Weak background color used for destructive actions or highlights.","originalValue":"{!palette-red-30}","name":"color-background-destructive-weak"},{"type":"color","value":"rgb(252, 207, 207)","comment":"Weaker background color used for destructive actions or highlights.","originalValue":"{!palette-red-20}","name":"color-background-destructive-weaker"},{"type":"color","value":"rgb(254, 236, 236)","comment":"Weakest background color used for destructive actions or highlights.","originalValue":"{!palette-red-10}","name":"color-background-destructive-weakest"},{"type":"color","value":"rgb(214, 31, 31)","comment":"Background color used for error alerts and toasts.","originalValue":"{!palette-red-60}","name":"color-background-error"},{"type":"color","value":"rgb(117, 12, 12)","comment":"Strongest background color used for error alerts and toasts.","originalValue":"{!palette-red-80}","name":"color-background-error-strong"},{"type":"color","value":"rgb(74, 11, 11)","comment":"Stronger error background color","originalValue":"{!palette-red-90}","name":"color-background-error-stronger"},{"type":"color","value":"rgb(254, 236, 236)","comment":"Weakest background color used for error alerts and toasts.","originalValue":"{!palette-red-10}","name":"color-background-error-weakest"},{"type":"color","value":"rgb(31, 48, 76)","comment":"Inverse background color used for containers.","originalValue":"{!palette-gray-90}","name":"color-background-inverse"},{"type":"color","value":"rgb(57, 71, 98)","comment":"Strong inverse background color used for containers.","originalValue":"{!palette-gray-80}","name":"color-background-inverse-strong"},{"type":"color","value":"rgb(235, 244, 255)","comment":"Weakest background color used for neutral or default variants.","originalValue":"{!palette-blue-10}","name":"color-background-neutral-weakest"},{"type":"color","value":"rgb(245, 240, 252)","comment":"Background color used to represent a new status.","originalValue":"{!palette-purple-10}","name":"color-background-new"},{"type":"color","value":"rgb(174, 178, 193)","comment":"Background color used to represent an entity or person as \"offline\".","originalValue":"{!palette-gray-40}","name":"color-background-offline"},{"type":"color","value":"rgba(6, 3, 58, 0.4)","comment":"Background color used for overlays.","originalValue":"{!palette-blue-100-transparent-40}","name":"color-background-overlay"},{"type":"color","value":"rgb(2, 99, 224)","comment":"Background color used for primary actions or highlights.","originalValue":"{!palette-blue-60}","name":"color-background-primary"},{"type":"color","value":"rgb(0, 20, 137)","comment":"Strong background color used for primary actions or highlights.","originalValue":"{!palette-blue-80}","name":"color-background-primary-strong"},{"type":"color","value":"rgb(3, 11, 93)","comment":"Stronger background color used for primary actions or highlights.","originalValue":"{!palette-blue-90}","name":"color-background-primary-stronger"},{"type":"color","value":"rgb(6, 3, 58)","comment":"Strongest background color used for primary actions or highlights.","originalValue":"{!palette-blue-100}","name":"color-background-primary-strongest"},{"type":"color","value":"rgb(153, 205, 255)","comment":"Weak background color used for primary actions or highlights.","originalValue":"{!palette-blue-30}","name":"color-background-primary-weak"},{"type":"color","value":"rgb(204, 228, 255)","comment":"Weaker background color used for primary actions or highlights.","originalValue":"{!palette-blue-20}","name":"color-background-primary-weaker"},{"type":"color","value":"rgb(235, 244, 255)","comment":"Weakest background color used for primary actions or highlights.","originalValue":"{!palette-blue-10}","name":"color-background-primary-weakest"},{"type":"color","value":"rgb(235, 86, 86)","comment":"Background color used to represent required form fields.","originalValue":"{!palette-red-50}","name":"color-background-required"},{"type":"color","value":"rgb(244, 244, 246)","comment":"Background color used for alternative striped rows.","originalValue":"{!palette-gray-10}","name":"color-background-row-striped"},{"type":"color","value":"rgb(225, 227, 234)","comment":"Strong background color used for containers.","originalValue":"{!palette-gray-20}","name":"color-background-strong"},{"type":"color","value":"rgb(136, 145, 170)","comment":"Stronger background color used for containers.","originalValue":"{!palette-gray-50}","name":"color-background-stronger"},{"type":"color","value":"rgb(75, 86, 113)","comment":"Strongest background color used for containers.","originalValue":"{!palette-gray-70}","name":"color-background-strongest"},{"type":"color","value":"rgb(255, 241, 179)","comment":"Background color used for subaccounts.","originalValue":"{!palette-yellow-20}","name":"color-background-subaccount"},{"type":"color","value":"rgb(20, 176, 83)","comment":"Background color used for success alerts and toasts.","originalValue":"{!palette-green-60}","name":"color-background-success"},{"type":"color","value":"rgb(237, 253, 243)","comment":"Weakest background color used for success alerts and toasts.","originalValue":"{!palette-green-10}","name":"color-background-success-weakest"},{"type":"color","value":"rgb(209, 250, 224)","comment":"Background color used for trial accounts.","originalValue":"{!palette-green-20}","name":"color-background-trial"},{"type":"color","value":"rgb(214, 31, 31)","comment":"Background color used to represent an entity or person as \"unavailable\".","originalValue":"{!palette-red-60}","name":"color-background-unavailable"},{"type":"color","value":"rgb(200, 175, 240)","comment":"Background color used for user avatars.","originalValue":"{!palette-purple-30}","name":"color-background-user"},{"type":"color","value":"rgb(244, 124, 34)","comment":"Background color used for warning alerts and toasts.","originalValue":"{!palette-orange-60}","name":"color-background-warning"},{"type":"color","value":"rgb(254, 245, 238)","comment":"Weakest background color used for warning alerts and toasts.","originalValue":"{!palette-orange-10}","name":"color-background-warning-weakest"}],
4
5
6 "border-colors": [{"type":"color","value":"rgb(136, 145, 170)","comment":"Default border color","uicontrol_contrast_pairing":["color-background-body"],"originalValue":"{!palette-gray-50}","name":"color-border"},{"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.","originalValue":"{!palette-gray-20}","name":"color-border-decorative-10-weaker"},{"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.","originalValue":"{!palette-blue-20}","name":"color-border-decorative-20-weaker"},{"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.","originalValue":"{!palette-green-20}","name":"color-border-decorative-30-weaker"},{"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.","originalValue":"{!palette-purple-20}","name":"color-border-decorative-40-weaker"},{"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"],"originalValue":"{!palette-red-60}","name":"color-border-destructive"},{"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"],"originalValue":"{!palette-red-80}","name":"color-border-destructive-strong"},{"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"],"originalValue":"{!palette-red-90}","name":"color-border-destructive-stronger"},{"type":"color","value":"rgb(49, 12, 12)","comment":"Strongest destructive hover border color","originalValue":"{!palette-red-100}","name":"color-border-destructive-strongest"},{"type":"color","value":"rgb(246, 177, 177)","comment":"Destructive focus border color","originalValue":"{!palette-red-30}","name":"color-border-destructive-weak"},{"type":"color","value":"rgb(252, 207, 207)","comment":"Destructive focus border color","originalValue":"{!palette-red-20}","name":"color-border-destructive-weaker"},{"type":"color","value":"rgb(254, 236, 236)","comment":"Destructive focus border color","originalValue":"{!palette-red-10}","name":"color-border-destructive-weakest"},{"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"],"originalValue":"{!palette-red-60}","name":"color-border-error"},{"type":"color","value":"rgb(117, 12, 12)","comment":"Strong error border color","originalValue":"{!palette-red-80}","name":"color-border-error-strong"},{"type":"color","value":"rgb(74, 11, 11)","comment":"Stronger error border color","originalValue":"{!palette-red-90}","name":"color-border-error-stronger"},{"type":"color","value":"rgb(245, 138, 138)","comment":"Weak error border color","originalValue":"{!palette-red-40}","name":"color-border-error-weak"},{"type":"color","value":"rgb(252, 207, 207)","comment":"Weaker error border color","originalValue":"{!palette-red-20}","name":"color-border-error-weaker"},{"type":"color","value":"rgb(254, 236, 236)","comment":"Weakest error border color","originalValue":"{!palette-red-10}","name":"color-border-error-weakest"},{"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"],"originalValue":"{!palette-gray-50}","name":"color-border-inverse"},{"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"],"originalValue":"{!palette-gray-20}","name":"color-border-inverse-strong"},{"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"],"originalValue":"{!palette-gray-10}","name":"color-border-inverse-stronger"},{"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"],"originalValue":"{!palette-gray-0}","name":"color-border-inverse-strongest"},{"type":"color","value":"rgb(57, 71, 98)","comment":"Weaker border on inverse backgrounds. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-80}","name":"color-border-inverse-weaker"},{"type":"color","value":"rgb(31, 48, 76)","comment":"Weakest border on inverse backgrounds. Must be used on color-background-body-inverse.","originalValue":"{!palette-gray-90}","name":"color-border-inverse-weakest"},{"type":"color","value":"rgb(2, 99, 224)","comment":"Neutral border color","originalValue":"{!palette-blue-60}","name":"color-border-neutral"},{"type":"color","value":"rgb(102, 179, 255)","comment":"Weak neutral border color","originalValue":"{!palette-blue-40}","name":"color-border-neutral-weak"},{"type":"color","value":"rgb(204, 228, 255)","comment":"Weaker neutral border color","originalValue":"{!palette-blue-20}","name":"color-border-neutral-weaker"},{"type":"color","value":"rgb(231, 220, 250)","comment":"Weaker border color for something designated as new","originalValue":"{!palette-purple-20}","name":"color-border-new-weaker"},{"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"],"originalValue":"{!palette-blue-60}","name":"color-border-primary"},{"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"],"originalValue":"{!palette-blue-80}","name":"color-border-primary-strong"},{"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"],"originalValue":"{!palette-blue-90}","name":"color-border-primary-stronger"},{"type":"color","value":"rgb(6, 3, 58)","comment":"Strongest primary border color","originalValue":"{!palette-blue-100}","name":"color-border-primary-strongest"},{"type":"color","value":"rgb(153, 205, 255)","comment":"Weak primary border color","originalValue":"{!palette-blue-30}","name":"color-border-primary-weak"},{"type":"color","value":"rgb(204, 228, 255)","comment":"Weaker primary border color","originalValue":"{!palette-blue-20}","name":"color-border-primary-weaker"},{"type":"color","value":"rgb(235, 244, 255)","comment":"Weakest primary border color","originalValue":"{!palette-blue-10}","name":"color-border-primary-weakest"},{"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"],"originalValue":"{!palette-gray-60}","name":"color-border-strong"},{"type":"color","value":"rgb(20, 176, 83)","comment":"Success border color","originalValue":"{!palette-green-60}","name":"color-border-success"},{"type":"color","value":"rgb(54, 213, 118)","comment":"Weak success border color","originalValue":"{!palette-green-50}","name":"color-border-success-weak"},{"type":"color","value":"rgb(209, 250, 224)","comment":"Weaker success border color","originalValue":"{!palette-green-20}","name":"color-border-success-weaker"},{"type":"color","value":"rgb(237, 253, 243)","comment":"Weakest success border color","originalValue":"{!palette-green-10}","name":"color-border-success-weakest"},{"type":"color","value":"rgb(244, 124, 34)","comment":"Warning border color","originalValue":"{!palette-orange-60}","name":"color-border-warning"},{"type":"color","value":"rgb(255, 179, 122)","comment":"Weak warning border color","originalValue":"{!palette-orange-40}","name":"color-border-warning-weak"},{"type":"color","value":"rgb(253, 220, 196)","comment":"Weaker warning border color","originalValue":"{!palette-orange-20}","name":"color-border-warning-weaker"},{"type":"color","value":"rgb(254, 245, 238)","comment":"Weakest warning border color","originalValue":"{!palette-orange-10}","name":"color-border-warning-weakest"},{"type":"color","value":"rgb(202, 205, 216)","comment":"Weak border color","originalValue":"{!palette-gray-30}","name":"color-border-weak"},{"type":"color","value":"rgb(225, 227, 234)","comment":"Weaker border color","originalValue":"{!palette-gray-20}","name":"color-border-weaker"}],
7
8
9 "border-widths": [{"type":"size","value":"0","comment":"Border width reset","originalValue":"{!border-width-0}","name":"border-width-0"},{"type":"size","value":"1px","comment":"Constant border width token for border width 10","originalValue":"{!border-width-10}","name":"border-width-10"},{"type":"size","value":"2px","comment":"Constant border width token for border width 20","originalValue":"{!border-width-20}","name":"border-width-20"},{"type":"size","value":"4px","comment":"Constant border width token for border width 30","originalValue":"{!border-width-30}","name":"border-width-30"},{"type":"size","value":"8px","comment":"Constant border width token for border width 40","originalValue":"{!border-width-40}","name":"border-width-40"}],
10
11
12 "box-shadows": [{"type":"shadow","value":"0 4px 16px 0 rgba(18, 28, 45, 0.2)","comment":"Default shadow.","originalValue":"{!shadow-elevation-20}","name":"shadow"},{"type":"shadow","value":"0 0 0 1px #8891aa","comment":"Shadow border for inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-50}","name":"shadow-border"},{"type":"shadow","value":"0 1px 0 #e1e3ea","comment":"Weaker bottom shadow border for decorative 10","originalValue":"{!offset-0} 1px {!offset-0} {!palette-gray-20}","name":"shadow-border-bottom-decorative-10-weaker"},{"type":"shadow","value":"0 1px 0 #cce4ff","comment":"Weaker bottom shadow border for decorative 20","originalValue":"{!offset-0} 1px {!offset-0} {!palette-blue-20}","name":"shadow-border-bottom-decorative-20-weaker"},{"type":"shadow","value":"0 1px 0 #d1fae0","comment":"Weaker bottom shadow border for decorative 30","originalValue":"{!offset-0} 1px {!offset-0} {!palette-green-20}","name":"shadow-border-bottom-decorative-30-weaker"},{"type":"shadow","value":"0 1px 0 #e7dcfa","comment":"Weaker bottom shadow border for decorative 40","originalValue":"{!offset-0} 1px {!offset-0} {!palette-purple-20}","name":"shadow-border-bottom-decorative-40-weaker"},{"type":"shadow","value":"0 1px 0 #fccfcf","comment":"Weaker bottom shadow border for error status","originalValue":"{!offset-0} 1px {!offset-0} {!palette-red-20}","name":"shadow-border-bottom-error-weaker"},{"type":"shadow","value":"0 1px 0 #cce4ff","comment":"Weaker bottom shadow border for neutral status","originalValue":"{!offset-0} 1px {!offset-0} {!palette-blue-20}","name":"shadow-border-bottom-neutral-weaker"},{"type":"shadow","value":"0 1px 0 #e7dcfa","comment":"Weaker bottom shadow border for new status","originalValue":"{!offset-0} 1px {!offset-0} {!palette-purple-20}","name":"shadow-border-bottom-new-weaker"},{"type":"shadow","value":"0 1px 0 #d1fae0","comment":"Weaker bottom shadow border for success status","originalValue":"{!offset-0} 1px {!offset-0} {!palette-green-20}","name":"shadow-border-bottom-success-weaker"},{"type":"shadow","value":"0 1px 0 #fddcc4","comment":"Weaker bottom shadow border for warning status","originalValue":"{!offset-0} 1px {!offset-0} {!palette-orange-20}","name":"shadow-border-bottom-warning-weaker"},{"type":"shadow","value":"0 0 0 1px #d61f1f","comment":"Shadow border for destructive interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-60}","name":"shadow-border-destructive"},{"type":"shadow","value":"0 0 0 1px #750c0c","comment":"Strong shadow border for destructive interactions","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-80}","name":"shadow-border-destructive-strong"},{"type":"shadow","value":"0 0 0 1px #4a0b0b","comment":"Strong shadow border for destructive interactions","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-90}","name":"shadow-border-destructive-stronger"},{"type":"shadow","value":"0 0 0 1px #310c0c","comment":"Strongest shadow border for destructive interactions","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-100}","name":"shadow-border-destructive-strongest"},{"type":"shadow","value":"0 0 0 1px #f6b1b1","comment":"Weak shadow border for destructive interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-30}","name":"shadow-border-destructive-weak"},{"type":"shadow","value":"0 0 0 1px #fccfcf","comment":"Weaker shadow border for destructive interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-20}","name":"shadow-border-destructive-weaker"},{"type":"shadow","value":"0 0 0 1px #d61f1f","comment":"Shadow border for error inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-60}","name":"shadow-border-error"},{"type":"shadow","value":"0 0 0 1px #750c0c","comment":"Shadow border for error inputs hover.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-80}","name":"shadow-border-error-strong"},{"type":"shadow","value":"0 0 0 1px #4a0b0b","comment":"Shadow border for error inputs hover.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-90}","name":"shadow-border-error-stronger"},{"type":"shadow","value":"0 0 0 1px #eb5656","comment":"Shadow border for inverse error inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-50}","name":"shadow-border-error-weak"},{"type":"shadow","value":"0 0 0 1px #8891aa","comment":"Shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-50}","name":"shadow-border-inverse"},{"type":"shadow","value":"0 0 0 1px #e1e3ea","comment":"Strong shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-20}","name":"shadow-border-inverse-strong"},{"type":"shadow","value":"0 0 0 1px #f4f4f6","comment":"Stronger shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-10}","name":"shadow-border-inverse-stronger"},{"type":"shadow","value":"0 0 0 1px #ffffff","comment":"Strongest shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0}","name":"shadow-border-inverse-strongest"},{"type":"shadow","value":"0 0 0 1px #394762","comment":"Weaker shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-80}","name":"shadow-border-inverse-weaker"},{"type":"shadow","value":"0 0 0 1px #1f304c","comment":"Weakest shadow border on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-90}","name":"shadow-border-inverse-weakest"},{"type":"shadow","value":"0 0 0 1px #0263e0","comment":"Default shadow border for primary interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-60}","name":"shadow-border-primary"},{"type":"shadow","value":"0 0 0 1px #001489","comment":"Strong shadow border for inputs hover.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-80}","name":"shadow-border-primary-strong"},{"type":"shadow","value":"0 0 0 1px #030b5d","comment":"Stronger shadow border for inputs active.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-90}","name":"shadow-border-primary-stronger"},{"type":"shadow","value":"0 0 0 1px #06033a","comment":"Strongest shadow border for inputs active.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-100}","name":"shadow-border-primary-strongest"},{"type":"shadow","value":"0 0 0 1px #99cdff","comment":"Weaker shadow border for primary interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-30}","name":"shadow-border-primary-weak"},{"type":"shadow","value":"0 0 0 1px #cce4ff","comment":"Weaker shadow border for primary interactions.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-20}","name":"shadow-border-primary-weaker"},{"type":"shadow","value":"0 0 0 1px #606b85","comment":"Strong shadow border for inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-60}","name":"shadow-border-strong"},{"type":"shadow","value":"0 0 0 1px #cacdd8","comment":"Weak shadow border for disabled inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-30}","name":"shadow-border-weak"},{"type":"shadow","value":"0 0 0 1px #e1e3ea","comment":"Weaker shadow border for disabled inputs.","originalValue":"{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-20}","name":"shadow-border-weaker"},{"type":"shadow","value":"0 2px 8px 0 rgba(18, 28, 45, 0.1)","comment":"Shadow for cards.","originalValue":"{!shadow-elevation-10}","name":"shadow-card"},{"type":"shadow","value":"0 0 0 4px rgba(2, 99, 224, 0.7)","comment":"Shadow for focus ring on interactive elements.","originalValue":"{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-blue-60-transparent-70}","name":"shadow-focus"},{"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.","originalValue":"inset {!offset-0} {!offset-0} {!offset-0} {!offset-10} {!palette-blue-60-transparent-70}","name":"shadow-focus-inset"},{"type":"shadow","value":"0 0 0 4px rgba(255, 255, 255, 0.4)","comment":"Shadow for focus ring on interactive elements on inverse backgrounds.","originalValue":"{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-0-transparent-40}","name":"shadow-focus-inverse"},{"type":"shadow","value":"0 16px 24px 0 rgba(18, 28, 45, 0.2)","comment":"High elevation default shadow.","originalValue":"{!shadow-elevation-30}","name":"shadow-high"},{"type":"shadow","value":"0 2px 8px 0 rgba(18, 28, 45, 0.1)","comment":"Low elevation default shadow.","originalValue":"{!shadow-elevation-10}","name":"shadow-low"}],
13
14
15 "colors": [{"type":"color","value":"rgb(0, 20, 137)","comment":"Default branding color","originalValue":"{!palette-blue-80}","name":"color-brand"},{"type":"color","value":"rgb(242, 47, 70)","comment":"Twilio brand red","originalValue":"{!amaranth}","name":"color-brand-highlight"},{"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"],"originalValue":"{!palette-blue-80}","name":"color-data-visualization-1"},{"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"],"originalValue":"{!palette-red-50}","name":"color-data-visualization-10"},{"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"],"originalValue":"{!palette-green-70}","name":"color-data-visualization-2"},{"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"],"originalValue":"{!palette-green-90}","name":"color-data-visualization-3"},{"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"],"originalValue":"{!palette-blue-50}","name":"color-data-visualization-4"},{"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"],"originalValue":"{!palette-gray-80}","name":"color-data-visualization-5"},{"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"],"originalValue":"{!palette-purple-40}","name":"color-data-visualization-6"},{"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"],"originalValue":"{!palette-purple-60}","name":"color-data-visualization-7"},{"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"],"originalValue":"{!palette-gray-50}","name":"color-data-visualization-8"},{"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"],"originalValue":"{!palette-red-80}","name":"color-data-visualization-9"},{"type":"color","value":"rgb(255, 255, 255)","comment":"Gray Color 0","originalValue":"{!palette-gray-0}","name":"color-gray-0"},{"type":"color","value":"rgb(244, 244, 246)","comment":"Gray Color 1","originalValue":"{!palette-gray-10}","name":"color-gray-10"},{"type":"color","value":"rgb(18, 28, 45)","comment":"Gray Color 10","originalValue":"{!palette-gray-100}","name":"color-gray-100"},{"type":"color","value":"rgb(225, 227, 234)","comment":"Gray Color 2","originalValue":"{!palette-gray-20}","name":"color-gray-20"},{"type":"color","value":"rgb(202, 205, 216)","comment":"Gray Color 3","originalValue":"{!palette-gray-30}","name":"color-gray-30"},{"type":"color","value":"rgb(174, 178, 193)","comment":"Gray Color 4","originalValue":"{!palette-gray-40}","name":"color-gray-40"},{"type":"color","value":"rgb(136, 145, 170)","comment":"Gray Color 5","originalValue":"{!palette-gray-50}","name":"color-gray-50"},{"type":"color","value":"rgb(96, 107, 133)","comment":"Gray Color 6","originalValue":"{!palette-gray-60}","name":"color-gray-60"},{"type":"color","value":"rgb(75, 86, 113)","comment":"Gray Color 7","originalValue":"{!palette-gray-70}","name":"color-gray-70"},{"type":"color","value":"rgb(57, 71, 98)","comment":"Gray Color 8","originalValue":"{!palette-gray-80}","name":"color-gray-80"},{"type":"color","value":"rgb(31, 48, 76)","comment":"Gray Color 9","originalValue":"{!palette-gray-90}","name":"color-gray-90"}],
16
17
18 "fonts": [{"type":"font","value":"'Fira Mono', Courier, monospace","originalValue":"{!font-family-20}","name":"font-family-code"},{"type":"font","value":"'Colfax', Helvetica, Arial, sans-serif","originalValue":"{!font-family-10}","name":"font-family-text"},{"type":"font","value":"'Inter var experimental', 'Inter var', 'Microsoft YaHei New', 微软雅黑, 'Microsoft Yahei', 'Microsoft JhengHei', 宋体, SimSun, sans-serif","originalValue":"{!font-family-60}","name":"font-family-text-chinese-simplified"},{"type":"font","value":"'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif","originalValue":"{!font-family-50}","name":"font-family-text-chinese-traditional"},{"type":"font","value":"'Inter var experimental', 'Inter var', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, Osaka, 'MS PGothic', sans-serif","originalValue":"{!font-family-30}","name":"font-family-text-japanese"},{"type":"font","value":"'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif","originalValue":"{!font-family-40}","name":"font-family-text-korean"}],
19
20
21 "font-sizes": [{"type":"font-size","value":"0.625rem","comment":"Constant typography token for font size 10","originalValue":"{!font-size-10}","name":"font-size-10"},{"type":"font-size","value":"2.5rem","comment":"Constant typography token for font size 100","originalValue":"{!font-size-100}","name":"font-size-100"},{"type":"font-size","value":"3rem","comment":"Constant typography token for font size 110","originalValue":"{!font-size-110}","name":"font-size-110"},{"type":"font-size","value":"0.75rem","comment":"Constant typography token for font size 20","originalValue":"{!font-size-20}","name":"font-size-20"},{"type":"font-size","value":"0.875rem","comment":"Constant typography token for font size 30","originalValue":"{!font-size-30}","name":"font-size-30"},{"type":"font-size","value":"1rem","comment":"Constant typography token for font size 40","originalValue":"{!font-size-40}","name":"font-size-40"},{"type":"font-size","value":"1.125rem","comment":"Constant typography token for font size 50","originalValue":"{!font-size-50}","name":"font-size-50"},{"type":"font-size","value":"1.25rem","comment":"Constant typography token for font size 60","originalValue":"{!font-size-60}","name":"font-size-60"},{"type":"font-size","value":"1.5rem","comment":"Constant typography token for font size 70","originalValue":"{!font-size-70}","name":"font-size-70"},{"type":"font-size","value":"1.75rem","comment":"Constant typography token for font size 80","originalValue":"{!font-size-80}","name":"font-size-80"},{"type":"font-size","value":"2rem","comment":"Constant typography token for font size 90","originalValue":"{!font-size-90}","name":"font-size-90"}],
22
23
24 "font-weights": [{"type":"font-weight","value":"700","comment":"Font weight for bold weight","originalValue":"{!font-weight-bold}","name":"font-weight-bold"},{"type":"font-weight","value":"400","comment":"Font weight for light weight","originalValue":"{!font-weight-normal}","name":"font-weight-light"},{"type":"font-weight","value":"500","comment":"Font weight for medium weight","originalValue":"{!font-weight-medium}","name":"font-weight-medium"},{"type":"font-weight","value":"400","comment":"Font weight for normal weight","originalValue":"{!font-weight-normal}","name":"font-weight-normal"},{"type":"font-weight","value":"600","comment":"Font weight for semibold weight","originalValue":"{!font-weight-semibold}","name":"font-weight-semibold"}],
25
26
27 "line-heights": [{"type":"number","value":"0","comment":"Constant line-height token for line-height 0","originalValue":"{!line-height-0}","name":"line-height-0"},{"type":"number","value":"1rem","comment":"Constant line-height token for line-height 10","originalValue":"{!line-height-10}","name":"line-height-10"},{"type":"number","value":"3.25rem","comment":"Constant line-height token for line-height 100","originalValue":"{!line-height-100}","name":"line-height-100"},{"type":"number","value":"4rem","comment":"Constant line-height token for line-height 110","originalValue":"{!line-height-110}","name":"line-height-110"},{"type":"number","value":"1.25rem","comment":"Constant line-height token for line-height 20","originalValue":"{!line-height-20}","name":"line-height-20"},{"type":"number","value":"1.25rem","comment":"Constant line-height token for line-height 30","originalValue":"{!line-height-30}","name":"line-height-30"},{"type":"number","value":"1.5rem","comment":"Constant line-height token for line-height 40","originalValue":"{!line-height-40}","name":"line-height-40"},{"type":"number","value":"1.75rem","comment":"Constant line-height token for line-height 50","originalValue":"{!line-height-50}","name":"line-height-50"},{"type":"number","value":"1.75rem","comment":"Constant line-height token for line-height 60","originalValue":"{!line-height-60}","name":"line-height-60"},{"type":"number","value":"2rem","comment":"Constant line-height token for line-height 70","originalValue":"{!line-height-70}","name":"line-height-70"},{"type":"number","value":"2.5rem","comment":"Constant line-height token for line-height 80","originalValue":"{!line-height-80}","name":"line-height-80"},{"type":"number","value":"2.75rem","comment":"Constant line-height token for line-height 90","originalValue":"{!line-height-90}","name":"line-height-90"}],
28
29
30 "radii": [{"type":"size","value":"0","comment":"Border radius reset","originalValue":"{!border-radius-0}","name":"border-radius-0"},{"type":"size","value":"2px","comment":"Small border radius","originalValue":"{!border-radius-10}","name":"border-radius-10"},{"type":"size","value":"4px","comment":"Large border radius","originalValue":"{!border-radius-20}","name":"border-radius-20"},{"type":"size","value":"8px","comment":"Larger border radius","originalValue":"{!border-radius-30}","name":"border-radius-30"},{"type":"size","value":"50%","comment":"Circular border radius","originalValue":"{!border-radius-circle}","name":"border-radius-circle"},{"type":"size","value":"100px","comment":"Pill border radius","originalValue":"{!border-radius-pill}","name":"border-radius-pill"}],
31
32
33 "sizings": [{"type":"size","value":"0","comment":"Generic sizing token scale for UI components.","originalValue":"{!size-0}","name":"size-0"},{"type":"size","value":"5.5rem","comment":"Generic sizing token scale for UI components.","originalValue":"{!size-10}","name":"size-10"},{"type":"size","value":"64rem","comment":"Generic sizing token scale for UI components.","originalValue":"{!size-100}","name":"size-100"},{"type":"size","value":"70.5rem","comment":"Generic sizing token scale for UI components.","originalValue":"{!size-110}","name":"size-110"},{"type":"size","value":"77rem","comment":"Generic sizing token scale for UI components.","originalValue":"{!size-120}","name":"size-120"},{"type":"size","value":"12rem","comment":"Generic sizing token scale for UI components.","originalValue":"{!size-20}","name":"size-20"},{"type":"size","value":"18.5rem","comment":"Generic sizing token scale for UI components.","originalValue":"{!size-30}","name":"size-30"},{"type":"size","value":"25rem","comment":"Generic sizing token scale for UI components.","originalValue":"{!size-40}","name":"size-40"},{"type":"size","value":"31.5rem","comment":"Generic sizing token scale for UI components.","originalValue":"{!size-50}","name":"size-50"},{"type":"size","value":"38rem","comment":"Generic sizing token scale for UI components.","originalValue":"{!size-60}","name":"size-60"},{"type":"size","value":"44.5rem","comment":"Generic sizing token scale for UI components.","originalValue":"{!size-70}","name":"size-70"},{"type":"size","value":"51rem","comment":"Generic sizing token scale for UI components.","originalValue":"{!size-80}","name":"size-80"},{"type":"size","value":"57.5rem","comment":"Generic sizing token scale for UI components.","originalValue":"{!size-90}","name":"size-90"},{"type":"size","value":"1rem","comment":"Maps to line-height tokens 1:1","originalValue":"{!line-height-10}","name":"size-icon-10"},{"type":"size","value":"3.25rem","comment":"Maps to line-height tokens 1:1","originalValue":"{!line-height-100}","name":"size-icon-100"},{"type":"size","value":"4rem","comment":"Maps to line-height tokens 1:1","originalValue":"{!line-height-110}","name":"size-icon-110"},{"type":"size","value":"1.25rem","comment":"Maps to line-height tokens 1:1","originalValue":"{!line-height-20}","name":"size-icon-20"},{"type":"size","value":"1.25rem","comment":"Maps to line-height tokens 1:1","originalValue":"{!line-height-30}","name":"size-icon-30"},{"type":"size","value":"1.5rem","comment":"Maps to line-height tokens 1:1","originalValue":"{!line-height-40}","name":"size-icon-40"},{"type":"size","value":"1.75rem","comment":"Maps to line-height tokens 1:1","originalValue":"{!line-height-50}","name":"size-icon-50"},{"type":"size","value":"1.75rem","comment":"Maps to line-height tokens 1:1","originalValue":"{!line-height-60}","name":"size-icon-60"},{"type":"size","value":"2rem","comment":"Maps to line-height tokens 1:1","originalValue":"{!line-height-70}","name":"size-icon-70"},{"type":"size","value":"2.5rem","comment":"Maps to line-height tokens 1:1","originalValue":"{!line-height-80}","name":"size-icon-80"},{"type":"size","value":"2.75rem","comment":"Maps to line-height tokens 1:1","originalValue":"{!line-height-90}","name":"size-icon-90"},{"type":"size","value":"13.75rem","comment":"Sizing token for sidebar width.","originalValue":"{!size-sidebar}","name":"size-sidebar"},{"type":"size","value":"0","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-0}","name":"size-square-0"},{"type":"size","value":"0.125rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-10}","name":"size-square-10"},{"type":"size","value":"2.25rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-100}","name":"size-square-100"},{"type":"size","value":"2.5rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-110}","name":"size-square-110"},{"type":"size","value":"2.75rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-120}","name":"size-square-120"},{"type":"size","value":"3rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-130}","name":"size-square-130"},{"type":"size","value":"3.25rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-140}","name":"size-square-140"},{"type":"size","value":"3.5rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-150}","name":"size-square-150"},{"type":"size","value":"3.75rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-160}","name":"size-square-160"},{"type":"size","value":"4rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-170}","name":"size-square-170"},{"type":"size","value":"4.25rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-180}","name":"size-square-180"},{"type":"size","value":"4.5rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-190}","name":"size-square-190"},{"type":"size","value":"0.25rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-20}","name":"size-square-20"},{"type":"size","value":"4.75rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-200}","name":"size-square-200"},{"type":"size","value":"0.375rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-25}","name":"size-square-25"},{"type":"size","value":"0.5rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-30}","name":"size-square-30"},{"type":"size","value":"0.75rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-40}","name":"size-square-40"},{"type":"size","value":"1rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-50}","name":"size-square-50"},{"type":"size","value":"1.25rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-60}","name":"size-square-60"},{"type":"size","value":"1.5rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-70}","name":"size-square-70"},{"type":"size","value":"1.75rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-80}","name":"size-square-80"},{"type":"size","value":"2rem","comment":"Generic square sizing token scale for UI components.","originalValue":"{!size-square-90}","name":"size-square-90"}],
34
35
36 "spacings": [{"type":"size","value":"0","originalValue":"{!space-0}","name":"space-0"},{"type":"size","value":"0.125rem","originalValue":"{!space-10}","name":"space-10"},{"type":"size","value":"2.25rem","originalValue":"{!space-100}","name":"space-100"},{"type":"size","value":"2.5rem","originalValue":"{!space-110}","name":"space-110"},{"type":"size","value":"2.75rem","originalValue":"{!space-120}","name":"space-120"},{"type":"size","value":"3rem","originalValue":"{!space-130}","name":"space-130"},{"type":"size","value":"3.25rem","originalValue":"{!space-140}","name":"space-140"},{"type":"size","value":"3.5rem","originalValue":"{!space-150}","name":"space-150"},{"type":"size","value":"3.75rem","originalValue":"{!space-160}","name":"space-160"},{"type":"size","value":"4rem","originalValue":"{!space-170}","name":"space-170"},{"type":"size","value":"4.25rem","originalValue":"{!space-180}","name":"space-180"},{"type":"size","value":"4.5rem","originalValue":"{!space-190}","name":"space-190"},{"type":"size","value":"0.25rem","originalValue":"{!space-20}","name":"space-20"},{"type":"size","value":"4.75rem","originalValue":"{!space-200}","name":"space-200"},{"type":"size","value":"0.5rem","originalValue":"{!space-30}","name":"space-30"},{"type":"size","value":"0.75rem","originalValue":"{!space-40}","name":"space-40"},{"type":"size","value":"1rem","originalValue":"{!space-50}","name":"space-50"},{"type":"size","value":"1.25rem","originalValue":"{!space-60}","name":"space-60"},{"type":"size","value":"1.5rem","originalValue":"{!space-70}","name":"space-70"},{"type":"size","value":"1.75rem","originalValue":"{!space-80}","name":"space-80"},{"type":"size","value":"2rem","originalValue":"{!space-90}","name":"space-90"},{"type":"size","value":"-0.125rem","originalValue":"-{!space-10}","name":"space-negative-10"},{"type":"size","value":"-2.25rem","originalValue":"-{!space-100}","name":"space-negative-100"},{"type":"size","value":"-2.5rem","originalValue":"-{!space-110}","name":"space-negative-110"},{"type":"size","value":"-2.75rem","originalValue":"-{!space-120}","name":"space-negative-120"},{"type":"size","value":"-3rem","originalValue":"-{!space-130}","name":"space-negative-130"},{"type":"size","value":"-3.25rem","originalValue":"-{!space-140}","name":"space-negative-140"},{"type":"size","value":"-3.5rem","originalValue":"-{!space-150}","name":"space-negative-150"},{"type":"size","value":"-3.75rem","originalValue":"-{!space-160}","name":"space-negative-160"},{"type":"size","value":"-4rem","originalValue":"-{!space-170}","name":"space-negative-170"},{"type":"size","value":"-4.25rem","originalValue":"-{!space-180}","name":"space-negative-180"},{"type":"size","value":"-4.5rem","originalValue":"-{!space-190}","name":"space-negative-190"},{"type":"size","value":"-0.25rem","originalValue":"-{!space-20}","name":"space-negative-20"},{"type":"size","value":"-4.75rem","originalValue":"-{!space-200}","name":"space-negative-200"},{"type":"size","value":"-0.5rem","originalValue":"-{!space-30}","name":"space-negative-30"},{"type":"size","value":"-0.75rem","originalValue":"-{!space-40}","name":"space-negative-40"},{"type":"size","value":"-1rem","originalValue":"-{!space-50}","name":"space-negative-50"},{"type":"size","value":"-1.25rem","originalValue":"-{!space-60}","name":"space-negative-60"},{"type":"size","value":"-1.5rem","originalValue":"-{!space-70}","name":"space-negative-70"},{"type":"size","value":"-1.75rem","originalValue":"-{!space-80}","name":"space-negative-80"},{"type":"size","value":"-2rem","originalValue":"-{!space-90}","name":"space-negative-90"}],
37
38
39 "text-colors": [{"type":"color","value":"rgb(18, 28, 45)","comment":"Body text color","text_contrast_pairing":["color-background","color-background-strong","color-background-stronger","color-background-body","color-background-user","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-new","color-background-row-striped","color-background-primary-weak","color-background-primary-weaker","color-background-primary-weakest","color-background-destructive-weak","color-background-destructive-weaker","color-background-destructive-weakest"],"originalValue":"{!palette-gray-100}","name":"color-text"},{"type":"color","value":"rgb(242, 47, 70)","comment":"Twilio brand red, accessible on large text only.","uicontrol_contrast_pairing":["color-background-body"],"originalValue":"{!amaranth}","name":"color-text-brand-highlight"},{"type":"color","value":"rgb(255, 255, 255)","comment":"Text color used on any brand color","text_contrast_pairing":["color-background-body-inverse","color-background-brand"],"originalValue":"{!white}","name":"color-text-brand-inverse"},{"type":"color","value":"rgb(96, 107, 133)","comment":"Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.","text_contrast_pairing":["color-background","color-background-body","color-background-decorative-10"],"originalValue":"{!palette-gray-60}","name":"color-text-decorative-10"},{"type":"color","value":"rgb(0, 20, 137)","comment":"Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.","text_contrast_pairing":["color-background","color-background-body","color-background-decorative-20"],"originalValue":"{!palette-blue-80}","name":"color-text-decorative-20"},{"type":"color","value":"rgb(14, 124, 58)","comment":"Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.","text_contrast_pairing":["color-background","color-background-body","color-background-decorative-30"],"originalValue":"{!palette-green-70}","name":"color-text-decorative-30"},{"type":"color","value":"rgb(109, 46, 209)","comment":"Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.","text_contrast_pairing":["color-background","color-background-body","color-background-decorative-40"],"originalValue":"{!palette-purple-60}","name":"color-text-decorative-40"},{"type":"color","value":"rgb(214, 31, 31)","comment":"Error text for inputs and error misc","text_contrast_pairing":["color-background","color-background-body","color-background-neutral-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"],"originalValue":"{!palette-red-60}","name":"color-text-error"},{"type":"color","value":"rgb(173, 17, 17)","comment":"Strong error text for inputs and error misc","text_contrast_pairing":["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"],"originalValue":"{!palette-red-70}","name":"color-text-error-strong"},{"type":"color","value":"rgb(235, 86, 86)","comment":"Weak error text for inputs and error misc","originalValue":"{!palette-red-50}","name":"color-text-error-weak"},{"type":"color","value":"rgb(96, 107, 133)","comment":"Default icon color.","text_contrast_pairing":["color-background","color-background-body","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"],"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"],"originalValue":"{!palette-gray-60}","name":"color-text-icon"},{"type":"color","value":"rgb(14, 124, 58)","comment":"Icon color for indicating a available status","uicontrol_contrast_pairing":["color-background","color-background-body","color-background-warning-weakest","color-background-row-striped"],"originalValue":"{!palette-green-70}","name":"color-text-icon-available"},{"type":"color","value":"rgb(242, 47, 70)","comment":"Twilio brand red icon color used for the Twilio logo.","uicontrol_contrast_pairing":["color-background","color-background-body"],"originalValue":"{!amaranth}","name":"color-text-icon-brand-highlight"},{"type":"color","value":"rgb(255, 255, 255)","comment":"Twilio brand icon color used for the Twilio logo on inverse backgrounds.","text_contrast_pairing":["color-background-body-inverse"],"originalValue":"{!palette-gray-0}","name":"color-text-icon-brand-inverse"},{"type":"color","value":"rgb(227, 106, 25)","comment":"Icon color for indicating a busy status","uicontrol_contrast_pairing":["color-background","color-background-body","color-background-warning-weakest","color-background-row-striped"],"originalValue":"{!palette-orange-65}","name":"color-text-icon-busy"},{"type":"color","value":"rgb(214, 31, 31)","comment":"Icon color for indicating an error.","uicontrol_contrast_pairing":["color-background","color-background-body","color-background-error-weakest","color-background-row-striped"],"originalValue":"{!palette-red-60}","name":"color-text-icon-error"},{"type":"color","value":"rgb(136, 145, 170)","comment":"Default icon color for inverse backgrounds.","text_contrast_pairing":["color-background-body-inverse"],"originalValue":"{!palette-gray-50}","name":"color-text-icon-inverse"},{"type":"color","value":"rgb(0, 20, 137)","comment":"Icon color for being neutral.","uicontrol_contrast_pairing":["color-background","color-background-body","color-background-neutral-weakest","color-background-row-striped"],"originalValue":"{!palette-blue-80}","name":"color-text-icon-neutral"},{"type":"color","value":"rgb(96, 107, 133)","comment":"Icon color for indicating a offline status","uicontrol_contrast_pairing":["color-background","color-background-body","color-background-warning-weakest","color-background-row-striped"],"originalValue":"{!palette-gray-60}","name":"color-text-icon-offline"},{"type":"color","value":"rgb(14, 124, 58)","comment":"Icon color for indicating success.","uicontrol_contrast_pairing":["color-background","color-background-body","color-background-success-weakest","color-background-row-striped"],"originalValue":"{!palette-green-70}","name":"color-text-icon-success"},{"type":"color","value":"rgb(214, 31, 31)","comment":"Icon color for indicating a unavailable status","uicontrol_contrast_pairing":["color-background","color-background-body","color-background-warning-weakest","color-background-row-striped"],"originalValue":"{!palette-red-60}","name":"color-text-icon-unavailable"},{"type":"color","value":"rgb(227, 106, 25)","comment":"Icon color for indicating a warning.","uicontrol_contrast_pairing":["color-background","color-background-body","color-background-warning-weakest","color-background-row-striped"],"originalValue":"{!palette-orange-65}","name":"color-text-icon-warning"},{"type":"color","value":"rgb(255, 255, 255)","comment":"Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.","text_contrast_pairing":["color-background-body-inverse","color-background-brand","color-background-error","color-background-primary","color-background-destructive"],"originalValue":"{!palette-gray-0}","name":"color-text-inverse"},{"type":"color","value":"rgb(174, 178, 193)","comment":"Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.","text_contrast_pairing":["color-background-body-inverse","color-background-brand"],"originalValue":"{!palette-gray-40}","name":"color-text-inverse-weak"},{"type":"color","value":"rgb(96, 107, 133)","comment":"Weaker inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.","originalValue":"{!palette-gray-60}","name":"color-text-inverse-weaker"},{"type":"color","value":"rgb(2, 99, 224)","comment":"Link text","text_contrast_pairing":["color-background","color-background-body","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"],"uicontrol_contrast_pairing":["color-background","color-background-strong","color-background-body","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-new","color-background-row-striped","color-background-primary-weaker","color-background-primary-weakest","color-background-destructive-weaker","color-background-destructive-weakest"],"originalValue":"{!palette-blue-60}","name":"color-text-link"},{"type":"color","value":"rgb(214, 31, 31)","comment":"Destructive link text","text_contrast_pairing":["color-background","color-background-body","color-background-neutral-weakest","color-background-warning-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"],"originalValue":"{!palette-red-60}","name":"color-text-link-destructive"},{"type":"color","value":"rgb(173, 17, 17)","comment":"Strong shade of destructive link text to be used in interactions","text_contrast_pairing":["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"],"originalValue":"{!palette-red-70}","name":"color-text-link-destructive-strong"},{"type":"color","value":"rgb(74, 11, 11)","comment":"Stronger shade of destructive link text to be used in interactions","text_contrast_pairing":["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"],"originalValue":"{!palette-red-90}","name":"color-text-link-destructive-stronger"},{"type":"color","value":"rgb(49, 12, 12)","comment":"Strongest shade of destructive link text to be used in interactions","text_contrast_pairing":["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"],"originalValue":"{!palette-red-100}","name":"color-text-link-destructive-strongest"},{"type":"color","value":"rgb(246, 177, 177)","comment":"Weak shade of destructive link text to be used in interactions","originalValue":"{!palette-red-30}","name":"color-text-link-destructive-weak"},{"type":"color","value":"rgb(0, 20, 137)","comment":"Strong shade of link text to be used in interactions","text_contrast_pairing":["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"],"originalValue":"{!palette-blue-80}","name":"color-text-link-strong"},{"type":"color","value":"rgb(3, 11, 93)","comment":"Stronger shade of link text to be used in interactions","text_contrast_pairing":["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"],"originalValue":"{!palette-blue-90}","name":"color-text-link-stronger"},{"type":"color","value":"rgb(6, 3, 58)","comment":"Strongest shade of link text to be used in interactions","text_contrast_pairing":["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"],"originalValue":"{!palette-blue-100}","name":"color-text-link-strongest"},{"type":"color","value":"rgb(153, 205, 255)","comment":"Weak shade of link text to be used in interactions","originalValue":"{!palette-blue-30}","name":"color-text-link-weak"},{"type":"color","value":"rgb(0, 20, 137)","comment":"Color for text indicating a neutral status.","text_contrast_pairing":["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"],"originalValue":"{!palette-blue-80}","name":"color-text-neutral"},{"type":"color","value":"rgb(109, 46, 209)","comment":"Color for text indicating a new status.","text_contrast_pairing":["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"],"originalValue":"{!palette-purple-60}","name":"color-text-new"},{"type":"color","value":"rgb(14, 124, 58)","comment":"Text color for success text.","text_contrast_pairing":["color-background","color-background-body","color-background-success-weakest","color-background-row-striped"],"uicontrol_contrast_pairing":["color-background","color-background-body","color-background-success-weakest","color-background-row-striped"],"originalValue":"{!palette-green-70}","name":"color-text-success"},{"type":"color","value":"rgb(141, 49, 24)","comment":"Color for warning text.","text_contrast_pairing":["color-background","color-background-body","color-background-warning-weakest","color-background-row-striped"],"uicontrol_contrast_pairing":["color-background","color-background-body","color-background-warning-weakest","color-background-row-striped"],"originalValue":"{!palette-orange-80}","name":"color-text-warning"},{"type":"color","value":"rgb(141, 49, 24)","comment":"Color for dark warning text.","text_contrast_pairing":["color-background","color-background-body","color-background-row-striped","color-background-warning-weakest"],"uicontrol_contrast_pairing":["color-background","color-background-body","color-background-row-striped","color-background-warning-weakest"],"originalValue":"{!palette-orange-80}","name":"color-text-warning-strong"},{"type":"color","value":"rgb(96, 107, 133)","comment":"Weak body text for visual hierarchy.","text_contrast_pairing":["color-background","color-background-body","color-background-neutral-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"],"originalValue":"{!palette-gray-60}","name":"color-text-weak"},{"type":"color","value":"rgb(174, 178, 193)","comment":"Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.","originalValue":"{!palette-gray-40}","name":"color-text-weaker"},{"type":"color","value":"rgb(255, 255, 255)","comment":"Weakest body text for visual hierarchy. Inaccessible unless used on disabled controls.","text_contrast_pairing":["color-background-primary-strong","color-background-primary-stronger","color-background-primary-strongest","color-background-destructive-strong","color-background-destructive-stronger","color-background-destructive-strongest"],"originalValue":"{!palette-gray-0}","name":"color-text-weakest"}],
40
41
42 "z-indices": [{"type":"z-index","value":"0","originalValue":"{!z-index-0}","name":"z-index-0"},{"type":"z-index","value":"10","originalValue":"{!z-index-10}","name":"z-index-10"},{"type":"z-index","value":"20","originalValue":"{!z-index-20}","name":"z-index-20"},{"type":"z-index","value":"30","originalValue":"{!z-index-30}","name":"z-index-30"},{"type":"z-index","value":"40","originalValue":"{!z-index-40}","name":"z-index-40"},{"type":"z-index","value":"50","originalValue":"{!z-index-50}","name":"z-index-50"},{"type":"z-index","value":"60","originalValue":"{!z-index-60}","name":"z-index-60"},{"type":"z-index","value":"70","originalValue":"{!z-index-70}","name":"z-index-70"},{"type":"z-index","value":"80","originalValue":"{!z-index-80}","name":"z-index-80"},{"type":"z-index","value":"90","originalValue":"{!z-index-90}","name":"z-index-90"}],
43 }
44}
\No newline at end of file