UNPKG

59.5 kBJavaScriptView Raw
1export default {
2"tokens":{
3 "background-colors": [{"type":"color","value":"rgb(244, 246, 250)","comment":"Default background color for any container.","name":"color-background","altValue":"#F4F6FA"},{"type":"color","value":"rgb(82, 189, 148)","comment":"Background color used to represent an entity or person as \"available\".","name":"color-background-available","altValue":"#52BD94"},{"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(16, 24, 64)","comment":"Inverse background color used for the main page body.","name":"color-background-body-inverse","altValue":"#101840"},{"type":"color","value":"rgb(71, 77, 102)","comment":"Primary brand background, accessible with inverse text.","name":"color-background-brand","altValue":"#474D66"},{"type":"color","value":"rgb(82, 189, 148)","comment":"Highlight brand background, accessible with black text.","name":"color-background-brand-highlight","altValue":"#52BD94"},{"type":"color","value":"rgb(220, 242, 234)","comment":"Weakest background color used for brand highlights.","name":"color-background-brand-highlight-weakest","altValue":"#DCF2EA"},{"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(222, 117, 72)","comment":"Background color used to represent an entity or person as \"busy\".","name":"color-background-busy","altValue":"#DE7548"},{"type":"color","value":"rgb(244, 246, 250)","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":"#F4F6FA"},{"type":"color","value":"rgb(243, 246, 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":"#F3F6FF"},{"type":"color","value":"rgb(238, 248, 244)","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":"#EEF8F4"},{"type":"color","value":"rgb(248, 247, 253)","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":"#F8F7FD"},{"type":"color","value":"rgb(209, 67, 67)","comment":"Background color used for destructive actions or highlights.","name":"color-background-destructive","altValue":"#D14343"},{"type":"color","value":"rgb(167, 54, 54)","comment":"Strong background color used for destructive actions or highlights.","name":"color-background-destructive-strong","altValue":"#A73636"},{"type":"color","value":"rgb(125, 40, 40)","comment":"Stronger background color used for destructive actions or highlights.","name":"color-background-destructive-stronger","altValue":"#7D2828"},{"type":"color","value":"rgb(79, 21, 21)","comment":"Strongest background color used for destructive actions or highlights.","name":"color-background-destructive-strongest","altValue":"#4F1515"},{"type":"color","value":"rgb(244, 182, 182)","comment":"Weak background color used for destructive actions or highlights.","name":"color-background-destructive-weak","altValue":"#F4B6B6"},{"type":"color","value":"rgb(249, 218, 218)","comment":"Weaker background color used for destructive actions or highlights.","name":"color-background-destructive-weaker","altValue":"#F9DADA"},{"type":"color","value":"rgb(253, 244, 244)","comment":"Weakest background color used for destructive actions or highlights.","name":"color-background-destructive-weakest","altValue":"#FDF4F4"},{"type":"color","value":"rgb(209, 67, 67)","comment":"Error background color.","name":"color-background-error","altValue":"#D14343"},{"type":"color","value":"rgb(167, 54, 54)","comment":"Strong error background color.","name":"color-background-error-strong","altValue":"#A73636"},{"type":"color","value":"rgb(125, 40, 40)","comment":"Stronger error background color.","name":"color-background-error-stronger","altValue":"#7D2828"},{"type":"color","value":"rgb(49, 12, 12)","comment":"Strongest error background color.","name":"color-background-error-strongest","altValue":"#310C0C"},{"type":"color","value":"rgb(253, 244, 244)","comment":"Weakest error background color.","name":"color-background-error-weakest","altValue":"#FDF4F4"},{"type":"color","value":"rgb(16, 24, 64)","comment":"Inverse background color for any container. Must be used on color-background-body-inverse.","name":"color-background-inverse","altValue":"#101840"},{"type":"color","value":"rgb(71, 77, 102)","comment":"Strong inverse background color for any container. Must be used on color-background-body-inverse.","name":"color-background-inverse-strong","altValue":"#474D66"},{"type":"color","value":"rgb(105, 111, 140)","comment":"Stronger inverse background color for any container. Must be used on color-background-body-inverse.","name":"color-background-inverse-stronger","altValue":"#696F8C"},{"type":"color","value":"rgb(244, 246, 250)","comment":"Weakest neutral background color.","name":"color-background-neutral-weakest","altValue":"#F4F6FA"},{"type":"color","value":"rgb(231, 228, 249)","comment":"Background color for indicating a new status.","name":"color-background-new","altValue":"#E7E4F9"},{"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(193, 196, 214)","comment":"Color used to represent an entity or person as \"offline\".","name":"color-background-offline","altValue":"#C1C4D6"},{"type":"color","value":"rgba(71, 77, 102, 0.64)","comment":"Default background for overlays.","name":"color-background-overlay","altValue":"#474D66A3"},{"type":"color","value":"rgb(51, 102, 255)","comment":"Background for primary actions or highlights.","name":"color-background-primary","altValue":"#3366FF"},{"type":"color","value":"rgb(41, 82, 204)","comment":"Strong background for primary actions or highlights.","name":"color-background-primary-strong","altValue":"#2952CC"},{"type":"color","value":"rgb(31, 61, 153)","comment":"Stronger background for primary actions or highlights.","name":"color-background-primary-stronger","altValue":"#1F3D99"},{"type":"color","value":"rgb(12, 30, 86)","comment":"Strongest background for primary actions or highlights.","name":"color-background-primary-strongest","altValue":"#0C1E56"},{"type":"color","value":"rgb(214, 224, 255)","comment":"Weak background for primary actions or highlights.","name":"color-background-primary-weak","altValue":"#D6E0FF"},{"type":"color","value":"rgb(235, 240, 255)","comment":"Weaker background for primary actions or highlights.","name":"color-background-primary-weaker","altValue":"#EBF0FF"},{"type":"color","value":"rgb(243, 246, 255)","comment":"Weakest background for primary actions or highlights.","name":"color-background-primary-weakest","altValue":"#F3F6FF"},{"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(250, 251, 255)","comment":"Background color for alternative striped rows.","name":"color-background-row-striped","altValue":"#FAFBFF"},{"type":"color","value":"rgb(230, 232, 240)","comment":"Strong default background color.","name":"color-background-strong","altValue":"#E6E8F0"},{"type":"color","value":"rgb(193, 196, 214)","comment":"Stronger default background color.","name":"color-background-stronger","altValue":"#C1C4D6"},{"type":"color","value":"rgb(105, 111, 140)","comment":"Strongest default background color.","name":"color-background-strongest","altValue":"#696F8C"},{"type":"color","value":"rgb(255, 239, 210)","comment":"Subaccount background color.","name":"color-background-subaccount","altValue":"#FFEFD2"},{"type":"color","value":"rgb(82, 189, 148)","comment":"Success background color.","name":"color-background-success","altValue":"#52BD94"},{"type":"color","value":"rgb(238, 248, 244)","comment":"Weakest success background color.","name":"color-background-success-weakest","altValue":"#EEF8F4"},{"type":"color","value":"rgb(220, 242, 234)","comment":"Trial account background color.","name":"color-background-trial","altValue":"#DCF2EA"},{"type":"color","value":"rgb(209, 67, 67)","comment":"Color used to represent an entity or person as \"unavailable\".","name":"color-background-unavailable","altValue":"#D14343"},{"type":"color","value":"rgb(231, 228, 249)","comment":"User avatar background color.","name":"color-background-user","altValue":"#E7E4F9"},{"type":"color","value":"rgb(222, 117, 72)","comment":"Warning background color","name":"color-background-warning","altValue":"#DE7548"},{"type":"color","value":"rgb(253, 247, 244)","comment":"Weakest warning background color.","name":"color-background-warning-weakest","altValue":"#FDF7F4"},{"type":"color","value":"rgb(249, 250, 252)","comment":"Weak default background color.","name":"color-background-weak","altValue":"#F9FAFC"}],
4
5
6 "border-colors": [{"type":"color","value":"rgb(216, 218, 229)","comment":"Default border color","name":"color-border","altValue":"#D8DAE5"},{"type":"color","value":"rgb(216, 218, 229)","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":"#D8DAE5"},{"type":"color","value":"rgb(214, 224, 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":"#D6E0FF"},{"type":"color","value":"rgb(238, 248, 244)","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":"#EEF8F4"},{"type":"color","value":"rgb(231, 228, 249)","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":"#E7E4F9"},{"type":"color","value":"rgb(209, 67, 67)","comment":"Destructive border color","name":"color-border-destructive","altValue":"#D14343"},{"type":"color","value":"rgb(167, 54, 54)","comment":"Destructive focus border color","name":"color-border-destructive-strong","altValue":"#A73636"},{"type":"color","value":"rgb(125, 40, 40)","comment":"Stronger destructive hover border color","name":"color-border-destructive-stronger","altValue":"#7D2828"},{"type":"color","value":"rgb(49, 12, 12)","comment":"Strongest destructive hover border color","name":"color-border-destructive-strongest","altValue":"#310C0C"},{"type":"color","value":"rgb(244, 182, 182)","comment":"Destructive focus border color","name":"color-border-destructive-weak","altValue":"#F4B6B6"},{"type":"color","value":"rgb(249, 218, 218)","comment":"Destructive focus border color","name":"color-border-destructive-weaker","altValue":"#F9DADA"},{"type":"color","value":"rgb(253, 244, 244)","comment":"Destructive focus border color","name":"color-border-destructive-weakest","altValue":"#FDF4F4"},{"type":"color","value":"rgb(209, 67, 67)","comment":"Error border color","name":"color-border-error","altValue":"#D14343"},{"type":"color","value":"rgb(167, 54, 54)","comment":"Strong error border color","name":"color-border-error-strong","altValue":"#A73636"},{"type":"color","value":"rgb(125, 40, 40)","comment":"Stronger error border color","name":"color-border-error-stronger","altValue":"#7D2828"},{"type":"color","value":"rgb(49, 12, 12)","comment":"Strongest error border color","name":"color-border-error-strongest","altValue":"#310C0C"},{"type":"color","value":"rgb(238, 145, 145)","comment":"Weak error border color","name":"color-border-error-weak","altValue":"#EE9191"},{"type":"color","value":"rgb(244, 182, 182)","comment":"Weaker error border color","name":"color-border-error-weaker","altValue":"#F4B6B6"},{"type":"color","value":"rgb(249, 218, 218)","comment":"Weakest error border color","name":"color-border-error-weakest","altValue":"#F9DADA"},{"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(51, 102, 255)","comment":"Neutral border color","name":"color-border-neutral","altValue":"#3366FF"},{"type":"color","value":"rgb(157, 181, 255)","comment":"Weak neutral border color","name":"color-border-neutral-weak","altValue":"#9DB5FF"},{"type":"color","value":"rgb(214, 224, 255)","comment":"Weaker neutral border color","name":"color-border-neutral-weaker","altValue":"#D6E0FF"},{"type":"color","value":"rgb(231, 228, 249)","comment":"Weaker border color for something designated as new","name":"color-border-new-weaker","altValue":"#E7E4F9"},{"type":"color","value":"rgb(51, 102, 255)","comment":"Primary border color","name":"color-border-primary","altValue":"#3366FF"},{"type":"color","value":"rgb(41, 82, 204)","comment":"Strong primary border color","name":"color-border-primary-strong","altValue":"#2952CC"},{"type":"color","value":"rgb(31, 61, 153)","comment":"Stronger primary border color","name":"color-border-primary-stronger","altValue":"#1F3D99"},{"type":"color","value":"rgb(12, 30, 86)","comment":"Strongest primary border color","name":"color-border-primary-strongest","altValue":"#0C1E56"},{"type":"color","value":"rgb(157, 181, 255)","comment":"Weak primary border color","name":"color-border-primary-weak","altValue":"#9DB5FF"},{"type":"color","value":"rgb(214, 224, 255)","comment":"Weaker primary border color","name":"color-border-primary-weaker","altValue":"#D6E0FF"},{"type":"color","value":"rgb(235, 240, 255)","comment":"Weakest primary border color","name":"color-border-primary-weakest","altValue":"#EBF0FF"},{"type":"color","value":"rgb(143, 149, 178)","comment":"Strong border color","name":"color-border-strong","altValue":"#8F95B2"},{"type":"color","value":"rgb(82, 189, 148)","comment":"Success border color","name":"color-border-success","altValue":"#52BD94"},{"type":"color","value":"rgb(163, 230, 205)","comment":"Weak success border color","name":"color-border-success-weak","altValue":"#A3E6CD"},{"type":"color","value":"rgb(220, 242, 234)","comment":"Weaker success border color","name":"color-border-success-weaker","altValue":"#DCF2EA"},{"type":"color","value":"rgb(238, 248, 244)","comment":"Weakest success border color","name":"color-border-success-weakest","altValue":"#EEF8F4"},{"type":"color","value":"rgb(231, 220, 250)","comment":"User avatar border color.","name":"color-border-user","altValue":"#E7DCFA"},{"type":"color","value":"rgb(222, 117, 72)","comment":"Warning border color","name":"color-border-warning","altValue":"#DE7548"},{"type":"color","value":"rgb(235, 172, 145)","comment":"Weak warning border color","name":"color-border-warning-weak","altValue":"#EBAC91"},{"type":"color","value":"rgb(242, 200, 182)","comment":"Weaker warning border color","name":"color-border-warning-weaker","altValue":"#F2C8B6"},{"type":"color","value":"rgb(248, 227, 218)","comment":"Weakest warning border color","name":"color-border-warning-weakest","altValue":"#F8E3DA"},{"type":"color","value":"rgb(230, 232, 240)","comment":"Weak border color","name":"color-border-weak","altValue":"#E6E8F0"},{"type":"color","value":"rgb(237, 239, 245)","comment":"Weaker border color","name":"color-border-weaker","altValue":"#EDEFF5"},{"type":"color","value":"rgb(255, 255, 255)","comment":"Weakest border color","name":"color-border-weakest","altValue":"#FFFFFF"}],
7
8
9 "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}],
10
11
12 "box-shadows": [{"type":"shadow","value":"0 4px 16px 0 rgba(0, 0, 0, 0.5)","comment":"Default shadow.","name":"shadow","altValue":null},{"type":"shadow","value":"0 0 0 1px #D8DAE5","comment":"Shadow border for inputs.","name":"shadow-border","altValue":null},{"type":"shadow","value":"0 1px 0 #D8DAE5","comment":"Weaker bottom shadow border for decorative 10","name":"shadow-border-bottom-decorative-10-weaker","altValue":null},{"type":"shadow","value":"0 1px 0 #D6E0FF","comment":"Weaker bottom shadow border for decorative 20","name":"shadow-border-bottom-decorative-20-weaker","altValue":null},{"type":"shadow","value":"0 1px 0 #DCF2EA","comment":"Weaker bottom shadow border for decorative 30","name":"shadow-border-bottom-decorative-30-weaker","altValue":null},{"type":"shadow","value":"0 1px 0 #D0CAF4","comment":"Weaker bottom shadow border for decorative 40","name":"shadow-border-bottom-decorative-40-weaker","altValue":null},{"type":"shadow","value":"0 1px 0 #F4B6B6","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 #9DB5FF","comment":"Weaker bottom shadow border for neutral status","name":"shadow-border-bottom-neutral-weaker","altValue":null},{"type":"shadow","value":"0 1px 0 #D0CAF4","comment":"Weaker bottom shadow border for new status","name":"shadow-border-bottom-new-weaker","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 #DCF2EA","comment":"Weaker bottom shadow border for success status","name":"shadow-border-bottom-success-weaker","altValue":null},{"type":"shadow","value":"0 1px 0 #F2C8B6","comment":"Weaker bottom shadow border warning warning status","name":"shadow-border-bottom-warning-weaker","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 #D14343","comment":"Shadow border for destructive interactions.","name":"shadow-border-destructive","altValue":null},{"type":"shadow","value":"0 0 0 1px #A73636","comment":"Strong shadow border for destructive interactions","name":"shadow-border-destructive-strong","altValue":null},{"type":"shadow","value":"0 0 0 1px #7D2828","comment":"Stronger 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 #F4B6B6","comment":"Weak shadow border for destructive interactions.","name":"shadow-border-destructive-weak","altValue":null},{"type":"shadow","value":"0 0 0 1px #F9DADA","comment":"Weaker shadow border for destructive interactions.","name":"shadow-border-destructive-weaker","altValue":null},{"type":"shadow","value":"0 0 0 1px #D14343","comment":"Shadow border for error inputs.","name":"shadow-border-error","altValue":null},{"type":"shadow","value":"0 0 0 1px #A73636","comment":"Shadow border for error inputs hover.","name":"shadow-border-error-strong","altValue":null},{"type":"shadow","value":"0 0 0 1px #7D2828","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 #F4B6B6","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 0 0 1px #3366FF","comment":"Default shadow border for primary interactions.","name":"shadow-border-primary","altValue":null},{"type":"shadow","value":"0 0 0 1px #2952CC","comment":"Strong shadow border for inputs hover.","name":"shadow-border-primary-strong","altValue":null},{"type":"shadow","value":"0 0 0 1px #1F3D99","comment":"Stronger shadow border for inputs active.","name":"shadow-border-primary-stronger","altValue":null},{"type":"shadow","value":"0 0 0 1px #0C1E56","comment":"Strongest shadow border for inputs active.","name":"shadow-border-primary-strongest","altValue":null},{"type":"shadow","value":"0 0 0 1px #9DB5FF","comment":"Weaker shadow border for primary interactions.","name":"shadow-border-primary-weak","altValue":null},{"type":"shadow","value":"0 0 0 1px #D6E0FF","comment":"Weaker shadow border for primary interactions.","name":"shadow-border-primary-weaker","altValue":null},{"type":"shadow","value":"0 0 0 1px #8F95B2","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 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 #E6E8F0","comment":"Weak shadow border for disabled inputs.","name":"shadow-border-weak","altValue":null},{"type":"shadow","value":"0 0 0 1px #EDEFF5","comment":"Weaker shadow border for disabled inputs.","name":"shadow-border-weaker","altValue":null},{"type":"shadow","value":"0 2px 4px 0 rgba(0, 0, 0, 0.4)","comment":"Shadow for cards.","name":"shadow-card","altValue":null},{"type":"shadow","value":"0 0 0 2px #ffffff, 0 0 0 3px #006dfa, 0 0 0 5px #cce4ff","comment":"Shadow for focus ring on interactive elements.","name":"shadow-focus","altValue":null},{"type":"shadow","value":"inset 0 0 0 2px #9DB5FF","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 1px #cacdd8, 0 0 0 3px #ffffff, 0 0 0 4px #006dfa, 0 0 0 6px #cce4ff","comment":"Shadow for simultaneous focus and border","name":"shadow-focus-shadow-border","altValue":null},{"type":"shadow","value":"0 16px 24px 4px rgba(0, 0, 0, 0.5)","comment":"High elevation default shadow.","name":"shadow-high","altValue":null},{"type":"shadow","value":"0 2px 4px 0 rgba(0, 0, 0, 0.4)","comment":"Low elevation default shadow.","name":"shadow-low","altValue":null}],
13
14
15 "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(174, 178, 193)","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}],
16
17
18 "color-schemes": [{"type":"string","value":"light","name":"color-scheme","altValue":null}],
19
20
21 "data-visualization": [{"type":"color","value":"rgb(4, 162, 174)","comment":"Color used for data visualizations. Must be used in a sequence.","name":"color-data-visualization-1","altValue":null},{"type":"color","value":"rgb(209, 129, 0)","comment":"Color used for data visualizations. Must be used in a sequence.","name":"color-data-visualization-2","altValue":null},{"type":"color","value":"rgb(24, 65, 191)","comment":"Color used for data visualizations. Must be used in a sequence.","name":"color-data-visualization-3","altValue":null},{"type":"color","value":"rgb(122, 103, 233)","comment":"Color used for data visualizations. Must be used in a sequence.","name":"color-data-visualization-4","altValue":null},{"type":"color","value":"rgb(17, 167, 110)","comment":"Color used for data visualizations. Must be used in a sequence.","name":"color-data-visualization-5","altValue":null},{"type":"color","value":"rgb(10, 29, 123)","comment":"Color used for data visualizations. Must be used in a sequence.","name":"color-data-visualization-6","altValue":null},{"type":"color","value":"rgb(221, 54, 173)","comment":"Color used for data visualizations. Must be used in a sequence.","name":"color-data-visualization-7","altValue":null},{"type":"color","value":"rgb(206, 32, 28)","comment":"Color used for data visualizations. Must be used in a sequence.","name":"color-data-visualization-8","altValue":null},{"type":"color","value":"rgb(105, 140, 247)","comment":"Color used for data visualizations. Must be used in a sequence.","name":"color-data-visualization-9","altValue":null},{"type":"color","value":"rgb(243, 103, 43)","comment":"Color used for data visualizations. Must be used in a sequence.","name":"color-data-visualization-10","altValue":null}],
22
23
24 "fonts": [{"type":"font","value":"'SF Mono', Monaco, Inconsolata, 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', 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":"'SF UI Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'","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}],
25
26
27 "font-sizes": [{"type":"font-size","value":"0.75rem","name":"font-size-10","altValue":"12px"},{"type":"font-size","value":"0.75rem","name":"font-size-20","altValue":"12px"},{"type":"font-size","value":"0.875rem","name":"font-size-30","altValue":"14px"},{"type":"font-size","value":"0.875rem","name":"font-size-40","altValue":"14px"},{"type":"font-size","value":"1rem","name":"font-size-50","altValue":"16px"},{"type":"font-size","value":"1.25rem","name":"font-size-60","altValue":"20px"},{"type":"font-size","value":"1.5rem","name":"font-size-70","altValue":"24px"},{"type":"font-size","value":"2rem","name":"font-size-80","altValue":"32px"},{"type":"font-size","value":"2rem","name":"font-size-90","altValue":"32px"},{"type":"font-size","value":"3rem","name":"font-size-100","altValue":"48px"},{"type":"font-size","value":"4rem","name":"font-size-110","altValue":"64px"},{"type":"font-size","value":"100%","comment":"Base font size applied to the html element, used for rem calculations","name":"font-size-base","altValue":"1600px"},{"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"}],
28
29
30 "font-weights": [{"type":"font-weight","value":"300","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}],
31
32
33 "line-heights": [{"type":"number","value":"0","comment":"Constant line-height token for line-height 0","name":"line-height-0","altValue":"0px"},{"type":"number","value":"0.75rem","comment":"Constant line-height token for line-height 05","name":"line-height-05","altValue":"12px"},{"type":"number","value":"1rem","comment":"Constant line-height token for line-height 10","name":"line-height-10","altValue":"16px"},{"type":"number","value":"1.25rem","comment":"Constant line-height token for line-height 20","name":"line-height-20","altValue":"20px"},{"type":"number","value":"1.25rem","comment":"Constant line-height token for line-height 30","name":"line-height-30","altValue":"20px"},{"type":"number","value":"1.5rem","comment":"Constant line-height token for line-height 40","name":"line-height-40","altValue":"24px"},{"type":"number","value":"1.75rem","comment":"Constant line-height token for line-height 50","name":"line-height-50","altValue":"28px"},{"type":"number","value":"1.75rem","comment":"Constant line-height token for line-height 60","name":"line-height-60","altValue":"28px"},{"type":"number","value":"2rem","comment":"Constant line-height token for line-height 70","name":"line-height-70","altValue":"32px"},{"type":"number","value":"2.5rem","comment":"Constant line-height token for line-height 80","name":"line-height-80","altValue":"40px"},{"type":"number","value":"2.75rem","comment":"Constant line-height token for line-height 90","name":"line-height-90","altValue":"44px"},{"type":"number","value":"3.25rem","comment":"Constant line-height token for line-height 100","name":"line-height-100","altValue":"52px"},{"type":"number","value":"4rem","comment":"Constant line-height token for line-height 110","name":"line-height-110","altValue":"64px"},{"type":"number","value":"2.5rem","comment":"Constant line-height token for line-height-display 10","name":"line-height-display-10","altValue":"40px"},{"type":"number","value":"3.75rem","comment":"Constant line-height token for line-height-display 20","name":"line-height-display-20","altValue":"60px"},{"type":"number","value":"5rem","comment":"Constant line-height token for line-height-display 30","name":"line-height-display-30","altValue":"80px"}],
34
35
36 "radii": [{"type":"size","value":"0","comment":"Border radius reset","name":"border-radius-0","altValue":null},{"type":"size","value":"2px","comment":"Small border radius","name":"border-radius-10","altValue":null},{"type":"size","value":"4px","comment":"Large border radius","name":"border-radius-20","altValue":null},{"type":"size","value":"8px","comment":"Larger border radius","name":"border-radius-30","altValue":null},{"type":"size","value":"50%","comment":"Circular border radius","name":"border-radius-circle","altValue":null},{"type":"size","value":"100px","comment":"Pill border radius","name":"border-radius-pill","altValue":null}],
37
38
39 "sizings": [{"type":"size","value":"0","comment":"Generic sizing token scale for UI components.","name":"size-0","altValue":"0px"},{"type":"size","value":"5.5rem","comment":"Generic sizing token scale for UI components.","name":"size-10","altValue":"88px"},{"type":"size","value":"12rem","comment":"Generic sizing token scale for UI components.","name":"size-20","altValue":"192px"},{"type":"size","value":"18.5rem","comment":"Generic sizing token scale for UI components.","name":"size-30","altValue":"296px"},{"type":"size","value":"25rem","comment":"Generic sizing token scale for UI components.","name":"size-40","altValue":"400px"},{"type":"size","value":"31.5rem","comment":"Generic sizing token scale for UI components.","name":"size-50","altValue":"504px"},{"type":"size","value":"38rem","comment":"Generic sizing token scale for UI components.","name":"size-60","altValue":"608px"},{"type":"size","value":"44.5rem","comment":"Generic sizing token scale for UI components.","name":"size-70","altValue":"712px"},{"type":"size","value":"51rem","comment":"Generic sizing token scale for UI components.","name":"size-80","altValue":"816px"},{"type":"size","value":"57.5rem","comment":"Generic sizing token scale for UI components.","name":"size-90","altValue":"920px"},{"type":"size","value":"64rem","comment":"Generic sizing token scale for UI components.","name":"size-100","altValue":"1024px"},{"type":"size","value":"70.5rem","comment":"Generic sizing token scale for UI components.","name":"size-110","altValue":"1128px"},{"type":"size","value":"77rem","comment":"Generic sizing token scale for UI components.","name":"size-120","altValue":"1232px"},{"type":"size","value":"0.75rem","comment":"Maps to line-height tokens 1:1","name":"size-icon-05","altValue":"12px"},{"type":"size","value":"1rem","comment":"Maps to line-height tokens 1:1","name":"size-icon-10","altValue":"16px"},{"type":"size","value":"1.25rem","comment":"Maps to line-height tokens 1:1","name":"size-icon-20","altValue":"20px"},{"type":"size","value":"1.25rem","comment":"Maps to line-height tokens 1:1","name":"size-icon-30","altValue":"20px"},{"type":"size","value":"1.5rem","comment":"Maps to line-height tokens 1:1","name":"size-icon-40","altValue":"24px"},{"type":"size","value":"1.75rem","comment":"Maps to line-height tokens 1:1","name":"size-icon-50","altValue":"28px"},{"type":"size","value":"1.75rem","comment":"Maps to line-height tokens 1:1","name":"size-icon-60","altValue":"28px"},{"type":"size","value":"2rem","comment":"Maps to line-height tokens 1:1","name":"size-icon-70","altValue":"32px"},{"type":"size","value":"2.5rem","comment":"Maps to line-height tokens 1:1","name":"size-icon-80","altValue":"40px"},{"type":"size","value":"2.75rem","comment":"Maps to line-height tokens 1:1","name":"size-icon-90","altValue":"44px"},{"type":"size","value":"3.25rem","comment":"Maps to line-height tokens 1:1","name":"size-icon-100","altValue":"52px"},{"type":"size","value":"4rem","comment":"Maps to line-height tokens 1:1","name":"size-icon-110","altValue":"64px"},{"type":"size","value":"15rem","comment":"Sizing token for sidebar width.","name":"size-sidebar","altValue":"240px"},{"type":"size","value":"4.75rem","comment":"Sizing token for the compact sidebar width.","name":"size-sidebar-compact","altValue":"76px"},{"type":"size","value":"0","comment":"Generic square sizing token scale for UI components.","name":"size-square-0","altValue":"0px"},{"type":"size","value":"0.125rem","comment":"Generic square sizing token scale for UI components.","name":"size-square-10","altValue":"2px"},{"type":"size","value":"0.25rem","comment":"Generic square sizing token scale for UI components.","name":"size-square-20","altValue":"4px"},{"type":"size","value":"0.375rem","comment":"Generic square sizing token scale for UI components.","name":"size-square-25","altValue":"6px"},{"type":"size","value":"0.5rem","comment":"Generic square sizing token scale for UI components.","name":"size-square-30","altValue":"8px"},{"type":"size","value":"0.75rem","comment":"Generic square sizing token scale for UI components.","name":"size-square-40","altValue":"12px"},{"type":"size","value":"1rem","comment":"Generic square sizing token scale for UI components.","name":"size-square-50","altValue":"16px"},{"type":"size","value":"1.25rem","comment":"Generic square sizing token scale for UI components.","name":"size-square-60","altValue":"20px"},{"type":"size","value":"1.5rem","comment":"Generic square sizing token scale for UI components.","name":"size-square-70","altValue":"24px"},{"type":"size","value":"1.75rem","comment":"Generic square sizing token scale for UI components.","name":"size-square-80","altValue":"28px"},{"type":"size","value":"2rem","comment":"Generic square sizing token scale for UI components.","name":"size-square-90","altValue":"32px"},{"type":"size","value":"2.25rem","comment":"Generic square sizing token scale for UI components.","name":"size-square-100","altValue":"36px"},{"type":"size","value":"2.5rem","comment":"Generic square sizing token scale for UI components.","name":"size-square-110","altValue":"40px"},{"type":"size","value":"2.75rem","comment":"Generic square sizing token scale for UI components.","name":"size-square-120","altValue":"44px"},{"type":"size","value":"3rem","comment":"Generic square sizing token scale for UI components.","name":"size-square-130","altValue":"48px"},{"type":"size","value":"3.25rem","comment":"Generic square sizing token scale for UI components.","name":"size-square-140","altValue":"52px"},{"type":"size","value":"3.5rem","comment":"Generic square sizing token scale for UI components.","name":"size-square-150","altValue":"56px"},{"type":"size","value":"3.75rem","comment":"Generic square sizing token scale for UI components.","name":"size-square-160","altValue":"60px"},{"type":"size","value":"4rem","comment":"Generic square sizing token scale for UI components.","name":"size-square-170","altValue":"64px"},{"type":"size","value":"4.25rem","comment":"Generic square sizing token scale for UI components.","name":"size-square-180","altValue":"68px"},{"type":"size","value":"4.5rem","comment":"Generic square sizing token scale for UI components.","name":"size-square-190","altValue":"72px"},{"type":"size","value":"4.75rem","comment":"Generic square sizing token scale for UI components.","name":"size-square-200","altValue":"76px"},{"type":"size","value":"4.75rem","comment":"Sizing token for the minimum topbar height.","name":"size-topbar","altValue":"76px"}],
40
41
42 "spacings": [{"type":"size","value":"0","name":"space-0","altValue":"0px"},{"type":"size","value":"0.125rem","name":"space-10","altValue":"2px"},{"type":"size","value":"0.25rem","name":"space-20","altValue":"4px"},{"type":"size","value":"0.5rem","name":"space-30","altValue":"8px"},{"type":"size","value":"0.75rem","name":"space-40","altValue":"12px"},{"type":"size","value":"1rem","name":"space-50","altValue":"16px"},{"type":"size","value":"1.25rem","name":"space-60","altValue":"20px"},{"type":"size","value":"1.5rem","name":"space-70","altValue":"24px"},{"type":"size","value":"1.75rem","name":"space-80","altValue":"28px"},{"type":"size","value":"2rem","name":"space-90","altValue":"32px"},{"type":"size","value":"2.25rem","name":"space-100","altValue":"36px"},{"type":"size","value":"2.5rem","name":"space-110","altValue":"40px"},{"type":"size","value":"2.75rem","name":"space-120","altValue":"44px"},{"type":"size","value":"3rem","name":"space-130","altValue":"48px"},{"type":"size","value":"3.25rem","name":"space-140","altValue":"52px"},{"type":"size","value":"3.5rem","name":"space-150","altValue":"56px"},{"type":"size","value":"3.75rem","name":"space-160","altValue":"60px"},{"type":"size","value":"4rem","name":"space-170","altValue":"64px"},{"type":"size","value":"4.25rem","name":"space-180","altValue":"68px"},{"type":"size","value":"4.5rem","name":"space-190","altValue":"72px"},{"type":"size","value":"4.75rem","name":"space-200","altValue":"76px"},{"type":"size","value":"-0.125rem","name":"space-negative-10","altValue":"-2px"},{"type":"size","value":"-0.25rem","name":"space-negative-20","altValue":"-4px"},{"type":"size","value":"-0.5rem","name":"space-negative-30","altValue":"-8px"},{"type":"size","value":"-0.75rem","name":"space-negative-40","altValue":"-12px"},{"type":"size","value":"-1rem","name":"space-negative-50","altValue":"-16px"},{"type":"size","value":"-1.25rem","name":"space-negative-60","altValue":"-20px"},{"type":"size","value":"-1.5rem","name":"space-negative-70","altValue":"-24px"},{"type":"size","value":"-1.75rem","name":"space-negative-80","altValue":"-28px"},{"type":"size","value":"-2rem","name":"space-negative-90","altValue":"-32px"},{"type":"size","value":"-2.25rem","name":"space-negative-100","altValue":"-36px"},{"type":"size","value":"-2.5rem","name":"space-negative-110","altValue":"-40px"},{"type":"size","value":"-2.75rem","name":"space-negative-120","altValue":"-44px"},{"type":"size","value":"-3rem","name":"space-negative-130","altValue":"-48px"},{"type":"size","value":"-3.25rem","name":"space-negative-140","altValue":"-52px"},{"type":"size","value":"-3.5rem","name":"space-negative-150","altValue":"-56px"},{"type":"size","value":"-3.75rem","name":"space-negative-160","altValue":"-60px"},{"type":"size","value":"-4rem","name":"space-negative-170","altValue":"-64px"},{"type":"size","value":"-4.25rem","name":"space-negative-180","altValue":"-68px"},{"type":"size","value":"-4.5rem","name":"space-negative-190","altValue":"-72px"},{"type":"size","value":"-4.75rem","name":"space-negative-200","altValue":"-76px"}],
43
44
45 "text-colors": [{"type":"color","value":"rgb(71, 77, 102)","comment":"Body text color","name":"color-text","altValue":"#474D66"},{"type":"color","value":"rgb(82, 189, 148)","comment":"Segment brand color.","name":"color-text-brand-highlight","altValue":"#52BD94"},{"type":"color","value":"rgb(255, 255, 255)","comment":"Text color used on any brand color","name":"color-text-brand-inverse","altValue":"#FFFFFF"},{"type":"color","value":"rgb(105, 111, 140)","comment":"Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.","name":"color-text-decorative-10","altValue":"#696F8C"},{"type":"color","value":"rgb(41, 82, 204)","comment":"Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.","name":"color-text-decorative-20","altValue":"#2952CC"},{"type":"color","value":"rgb(49, 113, 89)","comment":"Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.","name":"color-text-decorative-30","altValue":"#317159"},{"type":"color","value":"rgb(110, 98, 182)","comment":"Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.","name":"color-text-decorative-40","altValue":"#6E62B6"},{"type":"color","value":"rgb(199, 35, 35)","comment":"Destructive text.","name":"color-text-destructive","altValue":"#C72323"},{"type":"color","value":"rgb(173, 17, 17)","comment":"Strong shade of destructive text.","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"],"name":"color-text-destructive-strong","altValue":"#AD1111"},{"type":"color","value":"rgb(74, 11, 11)","comment":"Stronger shade of destructive text.","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"],"name":"color-text-destructive-stronger","altValue":"#4A0B0B"},{"type":"color","value":"rgb(49, 12, 12)","comment":"Strongest shade of destructive text.","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"],"name":"color-text-destructive-strongest","altValue":"#310C0C"},{"type":"color","value":"rgb(246, 177, 177)","comment":"Weak shade of destructive text.","name":"color-text-destructive-weak","altValue":"#F6B1B1"},{"type":"color","value":"rgb(167, 54, 54)","comment":"Error text for inputs and error misc","name":"color-text-error","altValue":"#A73636"},{"type":"color","value":"rgb(125, 40, 40)","comment":"Strong error text for inputs and error misc","name":"color-text-error-strong","altValue":"#7D2828"},{"type":"color","value":"rgb(49, 12, 12)","comment":"Stronger error text for inputs and error misc","name":"color-text-error-stronger","altValue":"#310C0C"},{"type":"color","value":"rgb(49, 12, 12)","comment":"Strongest error text for inputs and error misc.","name":"color-text-error-strongest","altValue":"#310C0C"},{"type":"color","value":"rgb(209, 67, 67)","comment":"Weak error text for inputs and error misc","name":"color-text-error-weak","altValue":"#D14343"},{"type":"color","value":"rgb(143, 149, 178)","comment":"Default icon color.","name":"color-text-icon","altValue":"#8F95B2"},{"type":"color","value":"rgb(82, 189, 148)","comment":"Icon color for indicating a available status","name":"color-text-icon-available","altValue":"#52BD94"},{"type":"color","value":"rgb(82, 189, 148)","comment":"Segment brand color used for the Segment logo.","name":"color-text-icon-brand-highlight","altValue":"#52BD94"},{"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"],"name":"color-text-icon-brand-inverse","altValue":"#FFFFFF"},{"type":"color","value":"rgb(222, 117, 72)","comment":"Icon color for indicating a busy status","name":"color-text-icon-busy","altValue":"#DE7548"},{"type":"color","value":"rgb(209, 67, 67)","comment":"Icon color for indicating an error.","name":"color-text-icon-error","altValue":"#D14343"},{"type":"color","value":"rgb(143, 149, 178)","comment":"Default icon color for inverse backgrounds.","name":"color-text-icon-inverse","altValue":"#8F95B2"},{"type":"color","value":"rgb(41, 82, 204)","comment":"Icon color for being neutral.","name":"color-text-icon-neutral","altValue":"#2952CC"},{"type":"color","value":"rgb(109, 46, 209)","comment":"Icon color for indicating a new status.","name":"color-text-icon-new","altValue":"#6D2ED1"},{"type":"color","value":"rgb(143, 149, 178)","comment":"Icon color for indicating a offline status","name":"color-text-icon-offline","altValue":"#8F95B2"},{"type":"color","value":"rgb(82, 189, 148)","comment":"Icon color for indicating success.","name":"color-text-icon-success","altValue":"#52BD94"},{"type":"color","value":"rgb(209, 67, 67)","comment":"Icon color for indicating a unavailable status","name":"color-text-icon-unavailable","altValue":"#D14343"},{"type":"color","value":"rgb(222, 117, 72)","comment":"Icon color for indicating a warning.","name":"color-text-icon-warning","altValue":"#DE7548"},{"type":"color","value":"rgb(255, 255, 255)","comment":"Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.","name":"color-text-inverse","altValue":"#FFFFFF"},{"type":"color","value":"rgb(200, 175, 240)","comment":"Inverse color for indicating a new status.","text_contrast_pairing":["color-background-inverse-strong"],"name":"color-text-inverse-new","altValue":"#C8AFF0"},{"type":"color","value":"rgb(136, 145, 170)","comment":"Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.","name":"color-text-inverse-weak","altValue":"#8891AA"},{"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.","name":"color-text-inverse-weaker","altValue":"#606B85"},{"type":"color","value":"rgb(75, 86, 113)","comment":"Weakest inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.","name":"color-text-inverse-weakest","altValue":"#4B5671"},{"type":"color","value":"rgb(51, 102, 255)","comment":"Link text","name":"color-text-link","altValue":"#3366FF"},{"type":"color","value":"rgb(209, 67, 67)","comment":"Destructive link text","name":"color-text-link-destructive","altValue":"#D14343"},{"type":"color","value":"rgb(125, 40, 40)","comment":"Strong shade of destructive link text to be used in interactions","name":"color-text-link-destructive-strong","altValue":"#7D2828"},{"type":"color","value":"rgb(49, 12, 12)","comment":"Stronger shade of destructive link text to be used in interactions","name":"color-text-link-destructive-stronger","altValue":"#310C0C"},{"type":"color","value":"rgb(49, 12, 12)","comment":"Strongest shade of destructive link text to be used in interactions","name":"color-text-link-destructive-strongest","altValue":"#310C0C"},{"type":"color","value":"rgb(209, 67, 67)","comment":"Weak shade of destructive link text to be used in interactions","name":"color-text-link-destructive-weak","altValue":"#D14343"},{"type":"color","value":"rgb(31, 61, 153)","comment":"Strong shade of link text to be used in interactions","name":"color-text-link-strong","altValue":"#1F3D99"},{"type":"color","value":"rgb(12, 30, 86)","comment":"Stronger shade of link text to be used in interactions","name":"color-text-link-stronger","altValue":"#0C1E56"},{"type":"color","value":"rgb(7, 19, 55)","comment":"Strongest shade of link text to be used in interactions","name":"color-text-link-strongest","altValue":"#071337"},{"type":"color","value":"rgb(157, 181, 255)","comment":"Weak shade of link text to be used in interactions","name":"color-text-link-weak","altValue":"#9DB5FF"},{"type":"color","value":"rgb(31, 61, 153)","comment":"Color for text indicating a neutral status.","name":"color-text-neutral","altValue":"#1F3D99"},{"type":"color","value":"rgb(82, 73, 136)","comment":"Color for text indicating a new status.","name":"color-text-new","altValue":"#524988"},{"type":"color","value":"rgb(2, 99, 224)","comment":"Primary text.","name":"color-text-primary","altValue":"#0263E0"},{"type":"color","value":"rgb(0, 20, 137)","comment":"Strong primary text.","name":"color-text-primary-strong","altValue":"#001489"},{"type":"color","value":"rgb(3, 11, 93)","comment":"Stronger primary text.","name":"color-text-primary-stronger","altValue":"#030B5D"},{"type":"color","value":"rgb(6, 3, 58)","comment":"Strongest primary text.","name":"color-text-primary-strongest","altValue":"#06033A"},{"type":"color","value":"rgb(153, 205, 255)","comment":"Weak primary text.","name":"color-text-primary-weak","altValue":"#99CDFF"},{"type":"color","value":"rgb(84, 51, 8)","comment":"Text color for the subaccount badge","name":"color-text-subaccount","altValue":"#543308"},{"type":"color","value":"rgb(36, 99, 75)","comment":"Text color for success text.","name":"color-text-success","altValue":"#24634B"},{"type":"color","value":"rgb(109, 46, 209)","comment":"Text color for user avatar.","name":"color-text-user","altValue":"#6D2ED1"},{"type":"color","value":"rgb(178, 94, 58)","comment":"Color for warning text.","name":"color-text-warning","altValue":"#B25E3A"},{"type":"color","value":"rgb(133, 70, 43)","comment":"Color for dark warning text.","name":"color-text-warning-strong","altValue":"#85462B"},{"type":"color","value":"rgb(105, 111, 140)","comment":"Weak body text for visual hierarchy.","name":"color-text-weak","altValue":"#696F8C"},{"type":"color","value":"rgb(143, 149, 178)","comment":"Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.","name":"color-text-weaker","altValue":"#8F95B2"},{"type":"color","value":"rgb(255, 255, 255)","comment":"Weakest body text for visual hierarchy. Inaccessible unless used on disabled controls.","name":"color-text-weakest","altValue":"#FFFFFF"}],
46
47
48 "z-indices": [{"type":"z-index","value":"0","name":"z-index-0","altValue":null},{"type":"z-index","value":"10","name":"z-index-10","altValue":null},{"type":"z-index","value":"20","name":"z-index-20","altValue":null},{"type":"z-index","value":"30","name":"z-index-30","altValue":null},{"type":"z-index","value":"40","name":"z-index-40","altValue":null},{"type":"z-index","value":"50","name":"z-index-50","altValue":null},{"type":"z-index","value":"60","name":"z-index-60","altValue":null},{"type":"z-index","value":"70","name":"z-index-70","altValue":null},{"type":"z-index","value":"80","name":"z-index-80","altValue":null},{"type":"z-index","value":"90","name":"z-index-90","altValue":null}],
49 }
50}
\No newline at end of file