@twilio-paste/design-tokens/dist/tokens.default.scss

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