@twilio-paste/design-tokens/dist/themes/evergreen/tokens.less

/* User avatar background color. */
@color-background-user: rgb(231, 228, 249);
/* Trial account background color. */
@color-background-trial: rgb(220, 242, 234);
/* Subaccount background color. */
@color-background-subaccount: rgb(255, 239, 210);
/* Stronger background for primary actions or highlights. */
@color-background-primary-stronger: rgb(31, 61, 153);
/* Stronger background color used for destructive actions or highlights. */
@color-background-destructive-stronger: rgb(125, 40, 40);
/* Weaker background for primary actions or highlights. */
@color-background-primary-weaker: rgb(235, 240, 255);
/* Weaker background color used for destructive actions or highlights. */
@color-background-destructive-weaker: rgb(249, 218, 218);
/* Warning background color */
@color-background-warning: rgb(222, 117, 72);
/* Weakest warning background color. */
@color-background-warning-weakest: rgb(253, 247, 244);
/* Strong inverse background color for any container. Must be used on color-background-body-inverse. */
@color-background-inverse-strong: rgb(71, 77, 102);
/* Background color for indicating a new status. */
@color-background-new: rgb(231, 228, 249);
/* Strong default background color. */
@color-background-strong: rgb(230, 232, 240);
/* Weakest background color for indicating a new status. */
@color-background-new-weakest: rgb(250, 247, 253);
/* Background color used for destructive actions or highlights. */
@color-background-destructive: rgb(209, 67, 67);
/* Weak default background color. */
@color-background-weak: rgb(249, 250, 252);
/* Background for primary actions or highlights. */
@color-background-primary: rgb(51, 102, 255);
/* Weakest background for primary actions or highlights. */
@color-background-primary-weakest: rgb(243, 246, 255);
/* Background color used to represent an entity or person as "busy". */
@color-background-busy: rgb(222, 117, 72);
/* Success background color. */
@color-background-success: rgb(82, 189, 148);
/* Weakest background color used for destructive actions or highlights. */
@color-background-destructive-weakest: rgb(253, 244, 244);
/* Color used to represent an entity or person as "offline". */
@color-background-offline: rgb(193, 196, 214);
/* Background color for alternative striped rows. */
@color-background-row-striped: rgb(250, 251, 255);
/* Strongest background for primary actions or highlights. */
@color-background-primary-strongest: rgb(12, 30, 86);
/* Weakest success background color. */
@color-background-success-weakest: rgb(238, 248, 244);
/* Strongest background color used for destructive actions or highlights. */
@color-background-destructive-strongest: rgb(79, 21, 21);
/* Strong error background color. */
@color-background-error-strong: rgb(167, 54, 54);
/* Strong primary brand background, accessible with inverse text. */
@color-background-brand-strong: rgb(3, 11, 93);
/* Primary brand background, accessible with inverse text. */
@color-background-brand: rgb(71, 77, 102);
/* Error background color. */
@color-background-error: rgb(209, 67, 67);
/* Weakest neutral background color. */
@color-background-neutral-weakest: rgb(244, 246, 250);
/* Background color used to represent an entity or person as "available". */
@color-background-available: rgb(82, 189, 148);
/* Weakest error background color. */
@color-background-error-weakest: rgb(253, 244, 244);
/* Background color used to represent required form fields. */
@color-background-required: rgb(235, 86, 86);
/* Strongest error background color. */
@color-background-error-strongest: rgb(49, 12, 12);
/* Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens. */
@color-background-decorative-40-weakest: rgb(248, 247, 253);
/* Stronger inverse background color for any container. Must be used on color-background-body-inverse. */
@color-background-inverse-stronger: rgb(105, 111, 140);
/* Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens. */
@color-background-decorative-30-weakest: rgb(238, 248, 244);
/* Background color used for the main page body. */
@color-background-body: rgb(255, 255, 255);
/* Strong background for primary actions or highlights. */
@color-background-primary-strong: rgb(41, 82, 204);
/* Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens. */
@color-background-decorative-20-weakest: rgb(243, 246, 255);
/* Strong background color used for destructive actions or highlights. */
@color-background-destructive-strong: rgb(167, 54, 54);
/* Weak background color used for destructive actions or highlights. */
@color-background-destructive-weak: rgb(244, 182, 182);
/* Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens. */
@color-background-decorative-10-weakest: rgb(244, 246, 250);
/* Default background color for any container. */
@color-background: rgb(244, 246, 250);
/* Weak background for primary actions or highlights. */
@color-background-primary-weak: rgb(214, 224, 255);
/* Stronger default background color. */
@color-background-stronger: rgb(193, 196, 214);
/* Highlight brand background, accessible with black text. */
@color-background-brand-highlight: rgb(82, 189, 148);
/* Weakest background color used for brand highlights. */
@color-background-brand-highlight-weakest: rgb(220, 242, 234);
/* Strongest default background color. */
@color-background-strongest: rgb(105, 111, 140);
/* Inverse background color used for the main page body. */
@color-background-body-inverse: rgb(16, 24, 64);
/* Inverse background color for any container. Must be used on color-background-body-inverse. */
@color-background-inverse: rgb(16, 24, 64);
/* Default background for overlays. */
@color-background-overlay: rgba(71, 77, 102, 0.64);
/* Color used to represent an entity or person as "unavailable". */
@color-background-unavailable: rgb(209, 67, 67);
/* Stronger error background color. */
@color-background-error-stronger: rgb(125, 40, 40);
/* Stronger primary brand background, accessible with inverse text. */
@color-background-brand-stronger: rgb(6, 3, 58);
/* Stronger error border color */
@color-border-error-stronger: rgb(125, 40, 40);
/* Weak warning border color */
@color-border-warning-weak: rgb(235, 172, 145);
/* Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens. */
@color-border-decorative-40-weaker: rgb(231, 228, 249);
/* Weaker error border color */
@color-border-error-weaker: rgb(244, 182, 182);
/* User avatar border color. */
@color-border-user: rgb(231, 220, 250);
/* Weaker neutral border color */
@color-border-neutral-weaker: rgb(214, 224, 255);
/* Warning border color */
@color-border-warning: rgb(222, 117, 72);
/* Weaker success border color */
@color-border-success-weaker: rgb(220, 242, 234);
/* Stronger primary border color */
@color-border-primary-stronger: rgb(31, 61, 153);
/* Stronger destructive hover border color */
@color-border-destructive-stronger: rgb(125, 40, 40);
/* Weakest warning border color */
@color-border-warning-weakest: rgb(248, 227, 218);
/* Weaker primary border color */
@color-border-primary-weaker: rgb(214, 224, 255);
/* Destructive focus border color */
@color-border-destructive-weaker: rgb(249, 218, 218);
/* Weaker border color for something designated as new */
@color-border-new-weaker: rgb(231, 228, 249);
/* Destructive border color */
@color-border-destructive: rgb(209, 67, 67);
/* Strong border on inverse backgrounds. Must be used on color-background-body-inverse. */
@color-border-inverse-strong: rgb(225, 227, 234);
/* Primary border color */
@color-border-primary: rgb(51, 102, 255);
/* Weakest primary border color */
@color-border-primary-weakest: rgb(235, 240, 255);
/* Success border color */
@color-border-success: rgb(82, 189, 148);
/* Destructive focus border color */
@color-border-destructive-weakest: rgb(253, 244, 244);
/* Strongest destructive hover border color */
@color-border-destructive-strongest: rgb(49, 12, 12);
/* Strongest primary border color */
@color-border-primary-strongest: rgb(12, 30, 86);
/* Weakest success border color */
@color-border-success-weakest: rgb(238, 248, 244);
/* Weaker warning border color */
@color-border-warning-weaker: rgb(242, 200, 182);
/* Strong border color */
@color-border-strong: rgb(143, 149, 178);
/* Weak border color */
@color-border-weak: rgb(230, 232, 240);
/* Neutral border color */
@color-border-neutral: rgb(51, 102, 255);
/* Error border color */
@color-border-error: rgb(209, 67, 67);
/* Weakest error border color */
@color-border-error-weakest: rgb(249, 218, 218);
/* Strongest error border color */
@color-border-error-strongest: rgb(49, 12, 12);
/* Strong error border color */
@color-border-error-strong: rgb(167, 54, 54);
/* Weak error border color */
@color-border-error-weak: rgb(238, 145, 145);
/* Weak neutral border color */
@color-border-neutral-weak: rgb(157, 181, 255);
/* Default border color */
@color-border: rgb(216, 218, 229);
/* Weakest border color */
@color-border-weakest: rgb(255, 255, 255);
/* Stronger border on inverse backgrounds. Must be used on color-background-body-inverse. */
@color-border-inverse-stronger: rgb(244, 244, 246);
/* Weaker border on inverse backgrounds. Must be used on color-background-body-inverse. */
@color-border-inverse-weaker: rgb(57, 71, 98);
/* Weak success border color */
@color-border-success-weak: rgb(163, 230, 205);
/* Strong primary border color */
@color-border-primary-strong: rgb(41, 82, 204);
/* Border on inverse backgrounds. Must be used on color-background-body-inverse. */
@color-border-inverse: rgb(136, 145, 170);
/* Destructive focus border color */
@color-border-destructive-strong: rgb(167, 54, 54);
/* Weak primary border color */
@color-border-primary-weak: rgb(157, 181, 255);
/* Weakest border on inverse backgrounds. Must be used on color-background-body-inverse. */
@color-border-inverse-weakest: rgb(31, 48, 76);
/* Destructive focus border color */
@color-border-destructive-weak: rgb(244, 182, 182);
/* Strongest border on inverse backgrounds. Must be used on color-background-body-inverse. */
@color-border-inverse-strongest: rgb(255, 255, 255);
/* Weaker border color */
@color-border-weaker: rgb(237, 239, 245);
/* Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens. */
@color-border-decorative-10-weaker: rgb(216, 218, 229);
/* Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens. */
@color-border-decorative-20-weaker: rgb(214, 224, 255);
/* Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens. */
@color-border-decorative-30-weaker: rgb(238, 248, 244);
/* Border radius reset */
@border-radius-0: 0;
/* Small border radius */
@border-radius-10: 2px;
/* Large border radius */
@border-radius-20: 4px;
/* Larger border radius */
@border-radius-30: 8px;
/* Circular border radius */
@border-radius-circle: 50%;
/* Pill border radius */
@border-radius-pill: 100px;
/* Border width reset */
@border-width-0: 0;
/* Constant border width token for border width 10 */
@border-width-10: 1px;
/* Constant border width token for border width 20 */
@border-width-20: 2px;
/* Constant border width token for border width 30 */
@border-width-30: 4px;
/* Constant border width token for border width 40 */
@border-width-40: 8px;
/* Weaker bottom shadow border for new status */
@shadow-border-bottom-new-weaker: 0 1px 0 #D0CAF4;
/* Default shadow. */
@shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.5);
/* Shadow border for subaccount badge. */
@shadow-border-subaccount: 0 0 0 1px #fff1b3;
/* Stronger shadow border for destructive interactions */
@shadow-border-destructive-stronger: 0 0 0 1px #7D2828;
/* Weaker shadow border for success inputs. */
@shadow-border-success-weaker: 0 0 0 1px #d1fae0;
/* Shadow border for the sidebar beta badge. */
@shadow-border-inverse-new-weaker: 0 0 0 1px #5817bd;
/* Stronger shadow border for inputs active. */
@shadow-border-primary-stronger: 0 0 0 1px #1F3D99;
/* Weaker bottom shadow border warning warning status */
@shadow-border-bottom-warning-weaker: 0 1px 0 #F2C8B6;
/* Weaker shadow border for destructive interactions. */
@shadow-border-destructive-weaker: 0 0 0 1px #F9DADA;
/* Weaker shadow border for primary interactions. */
@shadow-border-primary-weaker: 0 0 0 1px #D6E0FF;
/* Weaker shadow border for new status inputs. */
@shadow-border-new-weaker: 0 0 0 1px #e7dcfa;
/* Low elevation default shadow. */
@shadow-low: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
/* Strong shadow border on interactive elements on inverse backgrounds. */
@shadow-border-inverse-strong: 0 0 0 1px #e1e3ea;
/* Weaker shadow border for warning inputs. */
@shadow-border-warning-weaker: 0 0 0 1px #fddcc4;
/* Strong shadow border for inputs. */
@shadow-border-strong: 0 0 0 1px #8F95B2;
/* Shadow for focus ring on interactive elements. */
@shadow-focus: 0 0 0 2px #ffffff, 0 0 0 3px #006dfa, 0 0 0 5px #cce4ff;
/* Weak shadow border for disabled inputs. */
@shadow-border-weak: 0 0 0 1px #E6E8F0;
/* Shadow for focus ring on interactive elements on inverse backgrounds. */
@shadow-focus-inverse: 0 0 0 4px rgba(255, 255, 255, 0.4);
/* Default shadow border for primary interactions. */
@shadow-border-primary: 0 0 0 1px #3366FF;
/* Shadow border for destructive interactions. */
@shadow-border-destructive: 0 0 0 1px #D14343;
/* High elevation default shadow. */
@shadow-high: 0 16px 24px 4px rgba(0, 0, 0, 0.5);
/* Shadow border for error inputs hover. */
@shadow-border-error-strong: 0 0 0 1px #A73636;
/* Strongest shadow border for inputs active. */
@shadow-border-primary-strongest: 0 0 0 1px #0C1E56;
/* Strongest shadow border for destructive interactions */
@shadow-border-destructive-strongest: 0 0 0 1px #310C0C;
/* Shadow border for inverse error inputs. */
@shadow-border-error-weak: 0 0 0 1px #F4B6B6;
/* Shadow border for error inputs. */
@shadow-border-error: 0 0 0 1px #D14343;
/* Weaker bottom shadow border for decorative 10 */
@shadow-border-bottom-decorative-10-weaker: 0 1px 0 #D8DAE5;
/* Bottom shadow border for primary status */
@shadow-border-bottom-primary: 0 1px 0 #006dfa;
/* Weaker bottom shadow border for decorative 20 */
@shadow-border-bottom-decorative-20-weaker: 0 1px 0 #D6E0FF;
/* Stronger shadow border on interactive elements on inverse backgrounds. */
@shadow-border-inverse-stronger: 0 0 0 1px #f4f4f6;
/* Strongest shadow border for error inputs hover. */
@shadow-border-error-strongest: 0 0 0 1px #310c0c;
/* Strong shadow border for destructive interactions */
@shadow-border-destructive-strong: 0 0 0 1px #A73636;
/* Weaker shadow border on interactive elements on inverse backgrounds. */
@shadow-border-inverse-weaker: 0 0 0 1px #394762;
/* Weaker bottom shadow border for decorative 30 */
@shadow-border-bottom-decorative-30-weaker: 0 1px 0 #DCF2EA;
/* Strong shadow border for inputs hover. */
@shadow-border-primary-strong: 0 0 0 1px #2952CC;
/* Weaker shadow border for primary interactions. */
@shadow-border-primary-weak: 0 0 0 1px #9DB5FF;
/* Shadow for simultaneous focus and border */
@shadow-focus-shadow-border: 0 0 0 1px #cacdd8, 0 0 0 3px #ffffff, 0 0 0 4px #006dfa, 0 0 0 6px #cce4ff;
/* Weaker bottom shadow border for decorative 40 */
@shadow-border-bottom-decorative-40-weaker: 0 1px 0 #D0CAF4;
/* Weak shadow border for destructive interactions. */
@shadow-border-destructive-weak: 0 0 0 1px #F4B6B6;
/* Weaker bottom shadow border for error status */
@shadow-border-bottom-error-weaker: 0 1px 0 #F4B6B6;
/* Weaker shadow border for disabled inputs. */
@shadow-border-weaker: 0 0 0 1px #EDEFF5;
/* Shadow border for inputs. */
@shadow-border: 0 0 0 1px #D8DAE5;
/* Weaker bottom shadow border for neutral status */
@shadow-border-bottom-neutral-weaker: 0 1px 0 #9DB5FF;
/* Weaker shadow border for decorative 10 */
@shadow-border-decorative-10-weaker: 0 0 0 1px #e1e3ea;
/* Weaker shadow border for decorative 20 */
@shadow-border-decorative-20-weaker: 0 0 0 1px #cce4ff;
/* Bottom shadow border for subaccount badge */
@shadow-border-bottom-subaccount: 0 1px 0 #ffdd35;
/* Shadow for inset focus on elements, such as DataGrid cells. */
@shadow-focus-inset: inset 0 0 0 2px #9DB5FF;
/* Shadow border on interactive elements on inverse backgrounds. */
@shadow-border-inverse: 0 0 0 1px #8891aa;
/* Weaker shadow border for decorative 30 */
@shadow-border-decorative-30-weaker: 0 0 0 1px #d1fae0;
/* Weakest shadow border on interactive elements on inverse backgrounds. */
@shadow-border-inverse-weakest: 0 0 0 1px #1f304c;
/* Bottom shadow border for the sidebar beta badge */
@shadow-border-bottom-inverse-new-weaker: 0 1px 0 #5817bd;
/* Weaker bottom shadow border for success status */
@shadow-border-bottom-success-weaker: 0 1px 0 #DCF2EA;
/* Weaker shadow border for decorative 40 */
@shadow-border-decorative-40-weaker: 0 0 0 1px #e7dcfa;
/* Shadow border for error inputs hover. */
@shadow-border-error-stronger: 0 0 0 1px #7D2828;
/* Shadow for cards. */
@shadow-card: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
/* Weaker shadow border for error inputs. */
@shadow-border-error-weaker: 0 0 0 1px #fccfcf;
/* Strongest shadow border on interactive elements on inverse backgrounds. */
@shadow-border-inverse-strongest: 0 0 0 1px #ffffff;
/* Shadow for inset focus ring on interactive elements on inverse backgrounds. */
@shadow-focus-inverse-inset: inset 0 0 0 2px rgba(255, 255, 255, 0.4);
/* Shadow border for user. */
@shadow-border-user: 0 0 0 1px #8c5bd8;
/* Weaker shadow border for neutral inputs. */
@shadow-border-neutral-weaker: 0 0 0 1px #cce4ff;
@font-family-text: 'SF UI Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
@font-family-code: 'SF Mono', Monaco, Inconsolata, 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', monospace;
@font-family-text-japanese: 'Inter var experimental', 'Inter var', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, Osaka, 'MS PGothic', sans-serif;
@font-family-text-korean: 'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif;
@font-family-text-chinese-traditional: 'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif;
@font-family-text-chinese-simplified: 'Inter var experimental', 'Inter var', 'Microsoft YaHei New', 微软雅黑, 'Microsoft Yahei', 'Microsoft JhengHei', 宋体, SimSun, sans-serif;
@font-family-display: 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
@font-size-110: 4rem;
@font-size-100: 3rem;
@font-size-90: 2rem;
@font-size-80: 2rem;
@font-size-70: 1.5rem;
@font-size-60: 1.25rem;
@font-size-50: 1rem;
@font-size-40: 0.875rem;
@font-size-30: 0.875rem;
@font-size-20: 0.75rem;
@font-size-10: 0.75rem;
/* Constant typography token for font size display 30 */
@font-size-display-30: 4rem;
/* Constant typography token for font size display 20 */
@font-size-display-20: 3rem;
/* Constant typography token for font size display 10 */
@font-size-display-10: 2rem;
/* Base font size applied to the html element, used for rem calculations */
@font-size-base: 100%;
/* Font weight for light weight */
@font-weight-light: 300;
/* Font weight for normal weight */
@font-weight-normal: 400;
/* Font weight for medium weight */
@font-weight-medium: 500;
/* Font weight for semibold weight */
@font-weight-semibold: 600;
/* Font weight for bold weight */
@font-weight-bold: 700;
/* Font weight for extrabold weight */
@font-weight-extrabold: 800;
/* Constant line-height token for line-height 0 */
@line-height-0: 0;
/* Constant line-height token for line-height 110 */
@line-height-110: 4rem;
/* Constant line-height token for line-height 90 */
@line-height-90: 2.75rem;
/* Constant line-height token for line-height 100 */
@line-height-100: 3.25rem;
/* Constant line-height token for line-height 80 */
@line-height-80: 2.5rem;
/* Constant line-height token for line-height 70 */
@line-height-70: 2rem;
/* Constant line-height token for line-height 60 */
@line-height-60: 1.75rem;
/* Constant line-height token for line-height 50 */
@line-height-50: 1.75rem;
/* Constant line-height token for line-height 40 */
@line-height-40: 1.5rem;
/* Constant line-height token for line-height 30 */
@line-height-30: 1.25rem;
/* Constant line-height token for line-height 20 */
@line-height-20: 1.25rem;
/* Constant line-height token for line-height 10 */
@line-height-10: 1rem;
/* Constant line-height token for line-height 05 */
@line-height-05: 0.75rem;
/* Constant line-height token for line-height-display 30 */
@line-height-display-30: 5rem;
/* Constant line-height token for line-height-display 20 */
@line-height-display-20: 3.75rem;
/* Constant line-height token for line-height-display 10 */
@line-height-display-10: 2.5rem;
/* Twilio brand red */
@color-brand-highlight: rgb(242, 47, 70);
/* Gray Color 0 */
@color-gray-0: rgb(255, 255, 255);
/* Gray Color 10 */
@color-gray-100: rgb(18, 28, 45);
/* Gray Color 9 */
@color-gray-90: rgb(31, 48, 76);
/* Gray Color 8 */
@color-gray-80: rgb(57, 71, 98);
/* Gray Color 7 */
@color-gray-70: rgb(75, 86, 113);
/* Gray Color 6 */
@color-gray-60: rgb(96, 107, 133);
/* Gray Color 5 */
@color-gray-50: rgb(136, 145, 170);
/* Gray Color 4 */
@color-gray-40: rgb(174, 178, 193);
/* Default branding color */
@color-brand: rgb(0, 20, 137);
/* Gray Color 3 */
@color-gray-30: rgb(202, 205, 216);
/* Gray Color 2 */
@color-gray-20: rgb(225, 227, 234);
/* Gray Color 1 */
@color-gray-10: rgb(244, 244, 246);
/* Color used for data visualizations. Must be used in a sequence. */
@color-data-visualization-10: rgb(243, 103, 43);
/* Color used for data visualizations. Must be used in a sequence. */
@color-data-visualization-1: rgb(4, 162, 174);
/* Color used for data visualizations. Must be used in a sequence. */
@color-data-visualization-2: rgb(209, 129, 0);
/* Color used for data visualizations. Must be used in a sequence. */
@color-data-visualization-3: rgb(24, 65, 191);
/* Color used for data visualizations. Must be used in a sequence. */
@color-data-visualization-4: rgb(122, 103, 233);
/* Color used for data visualizations. Must be used in a sequence. */
@color-data-visualization-5: rgb(17, 167, 110);
/* Color used for data visualizations. Must be used in a sequence. */
@color-data-visualization-6: rgb(10, 29, 123);
/* Color used for data visualizations. Must be used in a sequence. */
@color-data-visualization-7: rgb(221, 54, 173);
/* Color used for data visualizations. Must be used in a sequence. */
@color-data-visualization-8: rgb(206, 32, 28);
/* Color used for data visualizations. Must be used in a sequence. */
@color-data-visualization-9: rgb(105, 140, 247);
/* Generic square sizing token scale for UI components. */
@size-square-40: 0.75rem;
/* Maps to line-height tokens 1:1 */
@size-icon-80: 2.5rem;
/* Generic square sizing token scale for UI components. */
@size-square-30: 0.5rem;
/* Maps to line-height tokens 1:1 */
@size-icon-70: 2rem;
/* Generic square sizing token scale for UI components. */
@size-square-20: 0.25rem;
/* Maps to line-height tokens 1:1 */
@size-icon-60: 1.75rem;
/* Generic sizing token scale for UI components. */
@size-90: 57.5rem;
/* Generic square sizing token scale for UI components. */
@size-square-10: 0.125rem;
/* Generic sizing token scale for UI components. */
@size-120: 77rem;
/* Maps to line-height tokens 1:1 */
@size-icon-50: 1.75rem;
/* Generic sizing token scale for UI components. */
@size-80: 51rem;
/* Generic sizing token scale for UI components. */
@size-0: 0;
/* Generic sizing token scale for UI components. */
@size-110: 70.5rem;
/* Maps to line-height tokens 1:1 */
@size-icon-40: 1.5rem;
/* Generic square sizing token scale for UI components. */
@size-square-190: 4.5rem;
/* Generic sizing token scale for UI components. */
@size-70: 44.5rem;
/* Generic sizing token scale for UI components. */
@size-100: 64rem;
/* Maps to line-height tokens 1:1 */
@size-icon-30: 1.25rem;
/* Generic square sizing token scale for UI components. */
@size-square-180: 4.25rem;
/* Generic sizing token scale for UI components. */
@size-60: 38rem;
/* Maps to line-height tokens 1:1 */
@size-icon-20: 1.25rem;
/* Generic square sizing token scale for UI components. */
@size-square-170: 4rem;
/* Sizing token for the compact sidebar width. */
@size-sidebar-compact: 4.75rem;
/* Maps to line-height tokens 1:1 */
@size-icon-10: 1rem;
/* Generic square sizing token scale for UI components. */
@size-square-25: 0.375rem;
/* Generic square sizing token scale for UI components. */
@size-square-160: 3.75rem;
/* Generic sizing token scale for UI components. */
@size-50: 31.5rem;
/* Maps to line-height tokens 1:1 */
@size-icon-110: 4rem;
/* Generic square sizing token scale for UI components. */
@size-square-150: 3.5rem;
/* Generic sizing token scale for UI components. */
@size-40: 25rem;
/* Maps to line-height tokens 1:1 */
@size-icon-100: 3.25rem;
/* Generic square sizing token scale for UI components. */
@size-square-140: 3.25rem;
/* Generic sizing token scale for UI components. */
@size-30: 18.5rem;
/* Sizing token for the minimum topbar height. */
@size-topbar: 4.75rem;
/* Generic square sizing token scale for UI components. */
@size-square-130: 3rem;
/* Generic sizing token scale for UI components. */
@size-20: 12rem;
/* Generic square sizing token scale for UI components. */
@size-square-120: 2.75rem;
/* Generic sizing token scale for UI components. */
@size-10: 5.5rem;
/* Generic square sizing token scale for UI components. */
@size-square-110: 2.5rem;
/* Generic square sizing token scale for UI components. */
@size-square-0: 0;
/* Maps to line-height tokens 1:1 */
@size-icon-05: 0.75rem;
/* Generic square sizing token scale for UI components. */
@size-square-100: 2.25rem;
/* Generic square sizing token scale for UI components. */
@size-square-200: 4.75rem;
/* Sizing token for sidebar width. */
@size-sidebar: 15rem;
/* Generic square sizing token scale for UI components. */
@size-square-90: 2rem;
/* Generic square sizing token scale for UI components. */
@size-square-80: 1.75rem;
/* Generic square sizing token scale for UI components. */
@size-square-70: 1.5rem;
/* Generic square sizing token scale for UI components. */
@size-square-60: 1.25rem;
/* Generic square sizing token scale for UI components. */
@size-square-50: 1rem;
/* Maps to line-height tokens 1:1 */
@size-icon-90: 2.75rem;
@space-70: 1.5rem;
@space-negative-100: -2.25rem;
@space-60: 1.25rem;
@space-negative-200: -4.75rem;
@space-190: 4.5rem;
@space-50: 1rem;
@space-180: 4.25rem;
@space-40: 0.75rem;
@space-170: 4rem;
@space-30: 0.5rem;
@space-160: 3.75rem;
@space-20: 0.25rem;
@space-150: 3.5rem;
@space-10: 0.125rem;
@space-140: 3.25rem;
@space-130: 3rem;
@space-120: 2.75rem;
@space-negative-90: -2rem;
@space-110: 2.5rem;
@space-0: 0;
@space-negative-80: -1.75rem;
@space-100: 2.25rem;
@space-negative-70: -1.5rem;
@space-200: 4.75rem;
@space-negative-60: -1.25rem;
@space-negative-50: -1rem;
@space-negative-40: -0.75rem;
@space-negative-30: -0.5rem;
@space-negative-20: -0.25rem;
@space-negative-10: -0.125rem;
@space-negative-190: -4.5rem;
@space-negative-180: -4.25rem;
@space-negative-170: -4rem;
@space-negative-160: -3.75rem;
@space-negative-150: -3.5rem;
@space-negative-140: -3.25rem;
@space-negative-130: -3rem;
@space-90: 2rem;
@space-negative-120: -2.75rem;
@space-80: 1.75rem;
@space-negative-110: -2.5rem;
/* Weak shade of destructive link text to be used in interactions */
@color-text-link-destructive-weak: rgb(209, 67, 67);
/* Stronger shade of link text to be used in interactions */
@color-text-link-stronger: rgb(12, 30, 86);
/* Text color for user avatar. */
@color-text-user: rgb(109, 46, 209);
/* Icon color for indicating a new status. */
@color-text-icon-new: rgb(109, 46, 209);
/* Text color for the subaccount badge */
@color-text-subaccount: rgb(84, 51, 8);
/* Stronger shade of destructive text. */
@color-text-destructive-stronger: rgb(74, 11, 11);
/* Icon color for indicating a offline status */
@color-text-icon-offline: rgb(143, 149, 178);
/* Destructive link text */
@color-text-link-destructive: rgb(209, 67, 67);
/* Stronger primary text. */
@color-text-primary-stronger: rgb(3, 11, 93);
/* Icon color for indicating success. */
@color-text-icon-success: rgb(82, 189, 148);
/* Color for warning text. */
@color-text-warning: rgb(178, 94, 58);
/* Strongest shade of destructive link text to be used in interactions */
@color-text-link-destructive-strongest: rgb(49, 12, 12);
/* Icon color for being neutral. */
@color-text-icon-neutral: rgb(41, 82, 204);
/* Color for text indicating a new status. */
@color-text-new: rgb(82, 73, 136);
/* Icon color for indicating an error. */
@color-text-icon-error: rgb(209, 67, 67);
/* Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse. */
@color-text-inverse-weak: rgb(136, 145, 170);
/* Icon color for indicating a available status */
@color-text-icon-available: rgb(82, 189, 148);
/* Stronger shade of destructive link text to be used in interactions */
@color-text-link-destructive-stronger: rgb(49, 12, 12);
/* Twilio brand icon color used for the Twilio logo on inverse backgrounds. */
@color-text-icon-brand-inverse: rgb(255, 255, 255);
/* Destructive text. */
@color-text-destructive: rgb(199, 35, 35);
/* Primary text. */
@color-text-primary: rgb(2, 99, 224);
/* Text color for success text. */
@color-text-success: rgb(36, 99, 75);
/* Inverse color for indicating a new status. */
@color-text-inverse-new: rgb(200, 175, 240);
/* Strongest shade of destructive text. */
@color-text-destructive-strongest: rgb(49, 12, 12);
/* Weak body text for visual hierarchy. */
@color-text-weak: rgb(105, 111, 140);
/* Strongest primary text. */
@color-text-primary-strongest: rgb(6, 3, 58);
/* Default icon color. */
@color-text-icon: rgb(143, 149, 178);
/* Link text */
@color-text-link: rgb(51, 102, 255);
/* Segment brand color used for the Segment logo. */
@color-text-icon-brand-highlight: rgb(82, 189, 148);
/* Color for text indicating a neutral status. */
@color-text-neutral: rgb(31, 61, 153);
/* Strongest shade of link text to be used in interactions */
@color-text-link-strongest: rgb(7, 19, 55);
/* Error text for inputs and error misc */
@color-text-error: rgb(167, 54, 54);
/* Default icon color for inverse backgrounds. */
@color-text-icon-inverse: rgb(143, 149, 178);
/* Strong error text for inputs and error misc */
@color-text-error-strong: rgb(125, 40, 40);
/* Icon color for indicating a unavailable status */
@color-text-icon-unavailable: rgb(209, 67, 67);
/* Weak error text for inputs and error misc */
@color-text-error-weak: rgb(209, 67, 67);
/* Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens. */
@color-text-decorative-40: rgb(110, 98, 182);
/* Strong shade of link text to be used in interactions */
@color-text-link-strong: rgb(31, 61, 153);
/* Text color used on any brand color */
@color-text-brand-inverse: rgb(255, 255, 255);
/* Strongest error text for inputs and error misc. */
@color-text-error-strongest: rgb(49, 12, 12);
/* Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens. */
@color-text-decorative-30: rgb(49, 113, 89);
/* Weak shade of link text to be used in interactions */
@color-text-link-weak: rgb(157, 181, 255);
/* Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens. */
@color-text-decorative-20: rgb(41, 82, 204);
/* Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens. */
@color-text-decorative-10: rgb(105, 111, 140);
/* Body text color */
@color-text: rgb(71, 77, 102);
/* Icon color for indicating a busy status */
@color-text-icon-busy: rgb(222, 117, 72);
/* Weakest body text for visual hierarchy. Inaccessible unless used on disabled controls. */
@color-text-weakest: rgb(255, 255, 255);
/* Segment brand color. */
@color-text-brand-highlight: rgb(82, 189, 148);
/* Strong shade of destructive text. */
@color-text-destructive-strong: rgb(173, 17, 17);
/* Weaker inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse. */
@color-text-inverse-weaker: rgb(96, 107, 133);
/* Strong primary text. */
@color-text-primary-strong: rgb(0, 20, 137);
/* Weak primary text. */
@color-text-primary-weak: rgb(153, 205, 255);
/* Weak shade of destructive text. */
@color-text-destructive-weak: rgb(246, 177, 177);
/* Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse. */
@color-text-inverse: rgb(255, 255, 255);
/* Weakest inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse. */
@color-text-inverse-weakest: rgb(75, 86, 113);
/* Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls. */
@color-text-weaker: rgb(143, 149, 178);
/* Color for dark warning text. */
@color-text-warning-strong: rgb(133, 70, 43);
/* Icon color for indicating a warning. */
@color-text-icon-warning: rgb(222, 117, 72);
/* Stronger error text for inputs and error misc */
@color-text-error-stronger: rgb(49, 12, 12);
/* Strong shade of destructive link text to be used in interactions */
@color-text-link-destructive-strong: rgb(125, 40, 40);
@z-index-0: 0;
@z-index-90: 90;
@z-index-80: 80;
@z-index-70: 70;
@z-index-60: 60;
@z-index-50: 50;
@z-index-40: 40;
@z-index-30: 30;
@z-index-20: 20;
@z-index-10: 10;
@color-scheme: "light";