UNPKG

@twilio-paste/design-tokens

Version:

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

892 lines (890 loc) 43.2 kB
/* Background color used for user avatars. */ @color-background-user: rgb(200, 175, 240); /* Background color used for notifications. */ @color-background-notification: rgb(214, 31, 31); /* Background color used for trial accounts. */ @color-background-trial: rgb(209, 250, 224); /* Background color used for subaccounts. */ @color-background-subaccount: rgb(255, 251, 234); /* Stronger background color used for primary actions or highlights. */ @color-background-primary-stronger: rgb(3, 11, 93); /* Stronger background color used for destructive actions or highlights. */ @color-background-destructive-stronger: rgb(74, 11, 11); /* Weaker background color used for primary actions or highlights. */ @color-background-primary-weaker: rgb(204, 228, 255); /* Weaker background color used for destructive actions or highlights. */ @color-background-destructive-weaker: rgb(252, 207, 207); /* Elevation token for color-background-inverse-stronger elements. */ @color-background-inverse-stronger-elevation: rgb(64, 79, 110); /* Elevation token for color-background-body elements. */ @color-background-body-elevation: rgb(249, 249, 250); /* Background color used for warning alerts and toasts. */ @color-background-warning: rgb(244, 124, 34); /* Elevation token for color-background elements. */ @color-background-elevation: rgb(237, 238, 242); /* Weakest background color used for warning alerts and toasts. */ @color-background-warning-weakest: rgb(254, 245, 238); /* Strong inverse background color used for containers. */ @color-background-inverse-strong: rgb(57, 71, 98); /* Background color used to represent a new status. */ @color-background-new: rgb(245, 240, 252); /* Elevation token for color-background-inverse elements. */ @color-background-inverse-elevation: rgb(37, 57, 91); /* Strong background color used for containers. */ @color-background-strong: rgb(225, 227, 234); /* 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(214, 31, 31); /* Weak background color used for containers. */ @color-background-weak: rgb(249, 249, 250); /* Background color used for primary actions or highlights. */ @color-background-primary: rgb(2, 99, 224); /* Weakest background color used for primary actions or highlights. */ @color-background-primary-weakest: rgb(235, 244, 255); /* Background color used to represent an entity or person as "busy". */ @color-background-busy: rgb(244, 124, 34); /* Background color used for success alerts and toasts. */ @color-background-success: rgb(20, 176, 83); /* Weakest background color used for destructive actions or highlights. */ @color-background-destructive-weakest: rgb(254, 236, 236); /* Background color used to represent an entity or person as "offline". */ @color-background-offline: rgb(142, 150, 174); /* Background color used for alternative striped rows. */ @color-background-row-striped: rgb(244, 244, 246); /* Strongest background color used for primary actions or highlights. */ @color-background-primary-strongest: rgb(6, 3, 58); /* Weakest background color used for success alerts and toasts. */ @color-background-success-weakest: rgb(237, 253, 243); /* Strongest background color used for destructive actions or highlights. */ @color-background-destructive-strongest: rgb(49, 12, 12); /* Strongest background color used for error alerts and toasts. */ @color-background-error-strong: rgb(117, 12, 12); /* 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(0, 20, 137); /* Background color used for error alerts and toasts. */ @color-background-error: rgb(214, 31, 31); /* Weakest background color used for neutral or default variants. */ @color-background-neutral-weakest: rgb(235, 244, 255); /* Background color used to represent an entity or person as "available". */ @color-background-available: rgb(20, 176, 83); /* Weakest background color used for error alerts and toasts. */ @color-background-error-weakest: rgb(254, 236, 236); /* 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(245, 240, 252); /* Stronger inverse background color for any container. Must be used on color-background-body-inverse. */ @color-background-inverse-stronger: rgb(57, 71, 98); /* 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); /* Background color used for the main page body. */ @color-background-body: rgb(255, 255, 255); /* Strong background color used for primary actions or highlights. */ @color-background-primary-strong: rgb(0, 20, 137); /* 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); /* Strong background color used for destructive actions or highlights. */ @color-background-destructive-strong: rgb(117, 12, 12); /* Weak background color used for destructive actions or highlights. */ @color-background-destructive-weak: rgb(246, 177, 177); /* 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 for any container. */ @color-background: rgb(244, 244, 246); /* Weak background color used for primary actions or highlights. */ @color-background-primary-weak: rgb(153, 205, 255); /* Brand accent background color representing Segment. */ @color-background-brand-30: rgb(106, 221, 178); /* The weakest background color used for containers. */ @color-background-weakest: rgb(255, 255, 255); /* Stronger background color used for containers. */ @color-background-stronger: rgb(136, 145, 170); /* Elevation token for color-background-inverse-strong elements. */ @color-background-inverse-strong-elevation: rgb(37, 57, 91); /* Brand accent background color representing Sendgrid. */ @color-background-brand-20: rgb(81, 169, 227); /* Highlight brand background, accessible with black text. */ @color-background-brand-highlight: rgb(242, 47, 70); /* Weakest background color used for brand highlights. */ @color-background-brand-highlight-weakest: rgba(242, 47, 70, 0.1); /* Strongest background color used for containers. */ @color-background-strongest: rgb(75, 86, 113); /* Elevation token for color-background-inverse-weak elements. */ @color-background-inverse-weak-elevation: rgb(37, 57, 91); /* Brand accent background color representing Twilio. */ @color-background-brand-10: rgb(242, 190, 90); /* Background color for elevated elements. Matches color-background-body in light mode but appears slightly lighter in dark mode to maintain focus. */ @color-background-weaker: rgb(255, 255, 255); /* Inverse background color used for the main page body. */ @color-background-body-inverse: rgb(18, 28, 45); /* Inverse background color used for containers. */ @color-background-inverse: rgb(31, 48, 76); /* Background color used for overlays. */ @color-background-overlay: rgba(6, 3, 58, 0.4); /* Background color used to represent an entity or person as "unavailable". */ @color-background-unavailable: rgb(214, 31, 31); /* Elevation token for color-background-strong elements. */ @color-background-strong-elevation: rgb(225, 227, 234); /* Strongest inverse background color used for containers. */ @color-background-inverse-strongest: rgb(255, 255, 255); /* Elevation token for color-background-weak elements. */ @color-background-weak-elevation: rgb(249, 249, 250); /* Stronger error background color */ @color-background-error-stronger: rgb(74, 11, 11); /* 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(74, 11, 11); /* Weak warning border color */ @color-border-warning-weak: rgb(255, 179, 122); /* 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); /* Weaker error border color */ @color-border-error-weaker: rgb(252, 207, 207); /* User avatar border color. */ @color-border-user: rgb(231, 220, 250); /* Weaker neutral border color */ @color-border-neutral-weaker: rgb(204, 228, 255); /* Warning border color */ @color-border-warning: rgb(244, 124, 34); /* Weaker success border color */ @color-border-success-weaker: rgb(209, 250, 224); /* Stronger primary border color */ @color-border-primary-stronger: rgb(3, 11, 93); /* Stronger destructive hover border color */ @color-border-destructive-stronger: rgb(74, 11, 11); /* Weakest warning border color */ @color-border-warning-weakest: rgb(254, 245, 238); /* Weaker primary border color */ @color-border-primary-weaker: rgb(204, 228, 255); /* Destructive focus border color */ @color-border-destructive-weaker: rgb(252, 207, 207); /* Weaker border color for something designated as new */ @color-border-new-weaker: rgb(231, 220, 250); /* Destructive border color */ @color-border-destructive: rgb(214, 31, 31); /* 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(2, 99, 224); /* Weakest primary border color */ @color-border-primary-weakest: rgb(235, 244, 255); /* Success border color */ @color-border-success: rgb(20, 176, 83); /* Destructive focus border color */ @color-border-destructive-weakest: rgb(254, 236, 236); /* Strongest destructive hover border color */ @color-border-destructive-strongest: rgb(49, 12, 12); /* Strongest primary border color */ @color-border-primary-strongest: rgb(6, 3, 58); /* Weakest success border color */ @color-border-success-weakest: rgb(237, 253, 243); /* Weaker warning border color */ @color-border-warning-weaker: rgb(253, 220, 196); /* Strong border color */ @color-border-strong: rgb(96, 107, 133); /* Weak border color */ @color-border-weak: rgb(202, 205, 216); /* Neutral border color */ @color-border-neutral: rgb(2, 99, 224); /* Error border color */ @color-border-error: rgb(214, 31, 31); /* Weakest error border color */ @color-border-error-weakest: rgb(254, 236, 236); /* Strongest error border color */ @color-border-error-strongest: rgb(49, 12, 12); /* Strong error border color */ @color-border-error-strong: rgb(117, 12, 12); /* Weak error border color */ @color-border-error-weak: rgb(245, 138, 138); /* Weak neutral border color */ @color-border-neutral-weak: rgb(102, 179, 255); /* Default border color */ @color-border: rgb(136, 145, 170); /* 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(54, 213, 118); /* Strong primary border color */ @color-border-primary-strong: rgb(0, 20, 137); /* 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(117, 12, 12); /* Weak primary border color */ @color-border-primary-weak: rgb(153, 205, 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(246, 177, 177); /* Strongest border on inverse backgrounds. Must be used on color-background-body-inverse. */ @color-border-inverse-strongest: rgb(255, 255, 255); /* Weak border color for something designated as new */ @color-border-new-weak: rgb(166, 127, 227); /* Weaker border color */ @color-border-weaker: rgb(225, 227, 234); /* 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); /* 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); /* 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); /* Circular border radius */ @border-radius-circle: 50%; /* Largest border radius */ @border-radius-90: 32px; /* Extra-large border radius */ @border-radius-80: 28px; /* Pill border radius */ @border-radius-pill: 100px; /* Larger border radius */ @border-radius-70: 24px; /* Large border radiusr */ @border-radius-60: 20px; /* Medium-large border radius */ @border-radius-50: 16px; /* Medium border radius */ @border-radius-40: 12px; /* Border radius reset */ @border-radius-0: 0; /* Small-medium border radius */ @border-radius-30: 8px; /* Small border radius */ @border-radius-20: 4px; /* Smallest border radius */ @border-radius-10: 2px; /* 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 #e7dcfa; /* Default shadow. */ @shadow: 0 4px 16px 0 rgba(18, 28, 45, 0.2); /* Weaker bottom shadow border for tab container on inverse backgrounds */ @shadow-border-bottom-inverse-weaker-inset: inset 0 -1px 0 0 #394762; /* Shadow border for subaccount badge. */ @shadow-border-subaccount: 0 0 0 1px #fff1b3; /* Accent shadows that subtly define the edges of a container. They serve as a lightweight alternative to risen shadows at lower elevations. */ @shadow-elevation-05: 0 0 0 1px #edeef2; /* Strong shadow border for destructive interactions */ @shadow-border-destructive-stronger: 0 0 0 1px #4a0b0b; /* 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 #030b5d; /* Weaker bottom shadow border for warning status */ @shadow-border-bottom-warning-weaker: 0 1px 0 #fddcc4; /* Weaker shadow border for destructive interactions. */ @shadow-border-destructive-weaker: 0 0 0 1px #fccfcf; /* Weaker shadow border for primary interactions. */ @shadow-border-primary-weaker: 0 0 0 1px #cce4ff; /* Top shadow border for for selected status of horizontal tabs on inverse backgrounds */ @shadow-border-top-inverse-strongest: 0 -1px 0 #cce4ff; /* Bottom shadow border for border weak color */ @shadow-border-bottom-weak: 0 1px 0 #cacdd8; /* Weaker shadow border for new status inputs. */ @shadow-border-new-weaker: 0 0 0 1px #e7dcfa; /* Accent shadows that subtly define the bottom edge of an inverse element. They serve as a lightweight alternative to risen shadows at lower elevations. */ @shadow-elevation-bottom-inverse-05: 0 1px 0 0 #1f304c; /* Low elevation default shadow. */ @shadow-low: 0 2px 8px 0 rgba(18, 28, 45, 0.1); /* Use for elements that dynamically open from the right side of the screen, appearing above the UI to indicate a greater separation from the underlying surface. */ @shadow-elevation-left-20: 0 0 0 1px #f9f9fa, -4px 0 8px 0 rgba(15, 22, 33, 0.1), -16px 0 32px 0 rgba(15, 22, 33, 0.05); /* 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; /* Accent shadows that subtly define the bottom edge of an element. They serve as a lightweight alternative to risen shadows at lower elevations. */ @shadow-elevation-bottom-05: 0 1px 0 0 #edeef2; /* Strong shadow border for inputs. */ @shadow-border-strong: 0 0 0 1px #606b85; /* Shadow for focus ring on interactive elements. */ @shadow-focus: 0 0 0 4px rgba(2, 99, 224, 0.7); /* Weak shadow border for disabled inputs. */ @shadow-border-weak: 0 0 0 1px #cacdd8; /* 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 #0263e0; /* Shadow border for destructive interactions. */ @shadow-border-destructive: 0 0 0 1px #d61f1f; /* High elevation default shadow. */ @shadow-high: 0 16px 24px 0 rgba(18, 28, 45, 0.2); /* Right shadow border for elements. */ @shadow-right: -4px 0 8px -4px rgba(18, 28, 45, 0.2); /* Accent shadows that subtly define the right edge of an inverse element. They serve as a lightweight alternative to risen shadows at lower elevations. */ @shadow-elevation-right-inverse-05: 1px 0 0 0 #1f304c; /* Shadow border for error inputs hover. */ @shadow-border-error-strong: 0 0 0 1px #750c0c; /* Bottom shadow border for inverse border weaker color */ @shadow-border-bottom-inverse-weaker: 0 1px 0 #394762; /* Strongest shadow border for inputs active. */ @shadow-border-primary-strongest: 0 0 0 1px #06033a; /* 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 #eb5656; /* Strong bottom shadow border for brand 10 */ @shadow-border-bottom-brand-10-strong: 0 1px 0 #855c15; /* Strong bottom shadow border for brand 20 */ @shadow-border-bottom-brand-20-strong: 0 1px 0 #043cb5; /* Right shadow border for inverse elements. */ @shadow-right-inverse: -4px 0 8px -4px rgba(0, 0, 0, 0.4); /* Use on elements that sit above the UI to indicate a greater distance distance from the surface behind them. */ @shadow-elevation-top-20: 0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05); /* Strong bottom shadow border for brand 30 */ @shadow-border-bottom-brand-30-strong: 0 1px 0 #0e7c3a; /* Left shadow border for elements. */ @shadow-left: 4px 0 8px -4px rgba(18, 28, 45, 0.2); /* Shadow border for error inputs. */ @shadow-border-error: 0 0 0 1px #d61f1f; /* Weaker bottom shadow border for decorative 10 */ @shadow-border-bottom-decorative-10-weaker: 0 1px 0 #e1e3ea; /* 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 #cce4ff; /* Stronger shadow border on interactive elements on inverse backgrounds. */ @shadow-border-inverse-stronger: 0 0 0 1px #f4f4f6; /* Weak bottom shadow border for tab container */ @shadow-border-bottom-weak-inset: inset 0 -1px 0 0 #cacdd8; /* 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 #750c0c; /* Weaker shadow border on interactive elements on inverse backgrounds. */ @shadow-border-inverse-weaker: 0 0 0 1px #394762; /* Top shadow border for selected status of horizontal tabs */ @shadow-border-top-primary: 0 -1px 0 #006dfa; /* Weaker bottom shadow border for decorative 30 */ @shadow-border-bottom-decorative-30-weaker: 0 1px 0 #d1fae0; /* Strong shadow border for inputs hover. */ @shadow-border-primary-strong: 0 0 0 1px #001489; /* Shadow border for brand 30 */ @shadow-border-brand-30: mint; /* Weaker shadow border for primary interactions. */ @shadow-border-primary-weak: 0 0 0 1px #99cdff; /* Shadow for simultaneous focus and border. */ @shadow-focus-shadow-border: 0 0 0 4px rgba(2, 99, 224, 0.7), 0 0 0 1px #8891aa; /* Weaker bottom shadow border for decorative 40 */ @shadow-border-bottom-decorative-40-weaker: 0 1px 0 #e7dcfa; /* Weak shadow border for destructive interactions. */ @shadow-border-destructive-weak: 0 0 0 1px #f6b1b1; /* Left shadow border for inverse elements. */ @shadow-left-inverse: 4px 0 8px -4px rgba(0, 0, 0, 0.4); /* Shadow border for brand 20 */ @shadow-border-brand-20: sky; /* Top shadow border for selected hover status of horizontal tabs */ @shadow-border-top-primary-strongest: 0 -1px 0 #030b5d; /* Stronger bottom shadow border for notification. */ @shadow-border-bottom-notification-stronger: 0 1px 0 #4a0b0b; /* Weaker bottom shadow border for error status */ @shadow-border-bottom-error-weaker: 0 1px 0 #fccfcf; /* Weaker shadow border for disabled inputs. */ @shadow-border-weaker: 0 0 0 1px #e1e3ea; /* Shadow border for inputs. */ @shadow-border: 0 0 0 1px #8891aa; /* Use on inverse elements that overlay other UI components but remain visually connected to the elements behind them. */ @shadow-elevation-inverse-10: 0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.1); /* Right shadow border for hover status of vertical tabs on inverse backgrounds */ @shadow-border-right-inverse-strong: 1px 0 #e1e3ea; /* Weaker bottom shadow border for neutral status */ @shadow-border-bottom-neutral-weaker: 0 1px 0 #cce4ff; /* Shadow border for brand 10 */ @shadow-border-brand-10: saffron; /* Weaker shadow border for decorative 10 */ @shadow-border-decorative-10-weaker: 0 0 0 1px #e1e3ea; /* Accent shadows that subtly define the top edges of an element. They serve as a lightweight alternative to risen shadows at lower elevations. */ @shadow-elevation-top-05: 0 -1px 0 0 #edeef2; /* 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 rgba(2, 99, 224, 0.7); /* Use on elements with decorative or semantic use of color that sit above the UI to indicate a greater distance distance from the surface behind them. */ @shadow-elevation-20: 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05); /* Shadow border on interactive elements on inverse backgrounds. */ @shadow-border-inverse: 0 0 0 1px #8891aa; /* Use on elements that overlay other UI components but remain visually connected to the elements behind them. */ @shadow-elevation-10: 0 -1px 0 0 #f4f4f6, 0 3px 4px 0 rgba(15, 22, 33, 0.1); /* 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 #d1fae0; /* 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 #4a0b0b; /* Shadow for cards. */ @shadow-card: 0 2px 8px 0 rgba(18, 28, 45, 0.1); /* 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 notification. */ @shadow-border-notification: 0 1px 0 #d61f1f; /* Accent shadows that subtly define the the edges of a container on inverse backgrounds. They serve as a lightweight alternative to risen shadows at lower elevations. */ @shadow-elevation-inverse-05: 0 0 0 1px #1f304c; /* 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; /* Color used for data visualizations. Must be used in a sequence. */ @color-data-visualization-10: rgb(235, 86, 86); /* Color used for data visualizations. Must be used in a sequence. */ @color-data-visualization-1: rgb(0, 20, 137); /* Color used for data visualizations. Must be used in a sequence. */ @color-data-visualization-2: rgb(14, 124, 58); /* Color used for data visualizations. Must be used in a sequence. */ @color-data-visualization-3: rgb(13, 58, 31); /* Color used for data visualizations. Must be used in a sequence. */ @color-data-visualization-4: rgb(0, 140, 255); /* Color used for data visualizations. Must be used in a sequence. */ @color-data-visualization-5: rgb(57, 71, 98); /* Color used for data visualizations. Must be used in a sequence. */ @color-data-visualization-6: rgb(166, 127, 227); /* Color used for data visualizations. Must be used in a sequence. */ @color-data-visualization-7: rgb(109, 46, 209); /* Color used for data visualizations. Must be used in a sequence. */ @color-data-visualization-8: rgb(136, 145, 170); /* Color used for data visualizations. Must be used in a sequence. */ @color-data-visualization-9: rgb(117, 12, 12); @font-family-text: 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; @font-family-code: 'TwilioSansMono', Courier, 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; /* Constant typography token for font size 110 */ @font-size-110: 3rem; /* Constant typography token for font size 100 */ @font-size-100: 2.5rem; /* Constant typography token for font size 90 */ @font-size-90: 2rem; /* Constant typography token for font size 80 */ @font-size-80: 1.75rem; /* Constant typography token for font size 70 */ @font-size-70: 1.5rem; /* Constant typography token for font size 60 */ @font-size-60: 1.25rem; /* Constant typography token for font size 50 */ @font-size-50: 1.125rem; /* Constant typography token for font size 40 */ @font-size-40: 1rem; /* Constant typography token for font size 30 */ @font-size-30: 0.875rem; /* Constant typography token for font size 20 */ @font-size-20: 0.75rem; /* Constant typography token for font size 10 */ @font-size-10: 0.625rem; /* 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: 400; /* 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.5rem; /* 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(142, 150, 174); /* 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); /* 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 sizing token for UI components */ @size-base-0: 0; /* 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 for layouts and containers. */ @size-90: 57.5rem; /* Generic square sizing token scale for UI components. */ @size-square-10: 0.125rem; /* Generic sizing token for layouts and containers. */ @size-120: 77rem; /* Maps to line-height tokens 1:1 */ @size-icon-50: 1.75rem; /* Generic sizing token for layouts and containers. */ @size-80: 51rem; /* Generic sizing token for layouts and containers. */ @size-0: 0; /* Generic sizing token for layouts and containers. */ @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 for layouts and containers. */ @size-70: 44.5rem; /* Generic sizing token for layouts and containers. */ @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 for layouts and containers. */ @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; /* Generic sizing token for UI components */ @size-base-90: 2.25rem; /* 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 for layouts and containers. */ @size-50: 31.5rem; /* Generic sizing token for UI components */ @size-base-80: 2rem; /* 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 for layouts and containers. */ @size-40: 25rem; /* Generic sizing token for UI components */ @size-base-70: 1.75rem; /* 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 for layouts and containers. */ @size-30: 18.5rem; /* Generic sizing token for UI components */ @size-base-60: 1.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 for layouts and containers. */ @size-20: 12rem; /* Generic sizing token for UI components */ @size-base-50: 1.25rem; /* Generic square sizing token scale for UI components. */ @size-square-120: 2.75rem; /* Generic sizing token for layouts and containers. */ @size-10: 5.5rem; /* Generic sizing token for UI components */ @size-base-40: 1rem; /* 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; /* Generic sizing token for UI components */ @size-base-30: 0.75rem; /* 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 sizing token for UI components */ @size-base-20: 0.5rem; /* Generic square sizing token scale for UI components. */ @size-square-200: 4.75rem; /* Generic sizing token for UI components */ @size-base-10: 0.25rem; /* 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.5rem; @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-290: 7rem; @space-180: 4.25rem; @space-40: 0.75rem; @space-280: 6.75rem; @space-170: 4rem; @space-30: 0.5rem; @space-270: 6.5rem; @space-160: 3.75rem; @space-20: 0.25rem; @space-260: 6.25rem; @space-150: 3.5rem; @space-10: 0.125rem; @space-250: 6rem; @space-140: 3.25rem; @space-240: 5.75rem; @space-130: 3rem; @space-230: 5.5rem; @space-120: 2.75rem; @space-negative-90: -2rem; @space-220: 5.25rem; @space-110: 2.5rem; @space-0: 0; @space-negative-80: -1.75rem; @space-210: 5rem; @space-100: 2.25rem; @space-negative-70: -1.5rem; @space-310: 7.5rem; @space-200: 4.75rem; @space-negative-60: -1.25rem; @space-300: 7.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(246, 177, 177); /* Stronger shade of link text to be used in interactions */ @color-text-link-stronger: rgb(3, 11, 93); /* Text color for user avatar. */ @color-text-user: rgb(18, 28, 45); /* 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(96, 107, 133); /* Destructive link text */ @color-text-link-destructive: rgb(214, 31, 31); /* Stronger primary text. */ @color-text-primary-stronger: rgb(3, 11, 93); /* Icon color for indicating success. */ @color-text-icon-success: rgb(14, 124, 58); /* Color for warning text. */ @color-text-warning: rgb(141, 49, 24); /* 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(0, 20, 137); /* Icon color for notification elements. */ @color-text-icon-notification: rgb(235, 86, 86); /* Color for text indicating a new status. */ @color-text-new: rgb(109, 46, 209); /* Icon color for indicating an error. */ @color-text-icon-error: rgb(214, 31, 31); /* Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse. */ @color-text-inverse-weak: rgb(202, 205, 216); /* Icon color for indicating a available status */ @color-text-icon-available: rgb(14, 124, 58); /* Stronger shade of destructive link text to be used in interactions */ @color-text-link-destructive-stronger: rgb(74, 11, 11); /* 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(214, 31, 31); /* Primary text. */ @color-text-primary: rgb(2, 99, 224); /* Text color for success text. */ @color-text-success: rgb(14, 124, 58); /* 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(96, 107, 133); /* Strongest primary text. */ @color-text-primary-strongest: rgb(6, 3, 58); /* Default icon color. */ @color-text-icon: rgb(96, 107, 133); /* Link text */ @color-text-link: rgb(2, 99, 224); /* Twilio brand red icon color used for the Twilio logo. */ @color-text-icon-brand-highlight: rgb(242, 47, 70); /* Color for text indicating a neutral status. */ @color-text-neutral: rgb(0, 20, 137); /* Text color to be used on top of brand accent background colors such as color-background-brand-10 only. */ @color-text-brand: rgb(18, 28, 45); /* Strongest shade of link text to be used in interactions */ @color-text-link-strongest: rgb(6, 3, 58); /* Error text for inputs and error misc */ @color-text-error: rgb(214, 31, 31); /* Default icon color for inverse backgrounds. */ @color-text-icon-inverse: rgb(136, 145, 170); /* Strong error text for inputs and error misc */ @color-text-error-strong: rgb(173, 17, 17); /* Icon color for indicating a unavailable status */ @color-text-icon-unavailable: rgb(214, 31, 31); /* Weak error text for inputs and error misc */ @color-text-error-weak: rgb(235, 86, 86); /* 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); /* Strong shade of link text to be used in interactions */ @color-text-link-strong: rgb(0, 20, 137); /* 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(14, 124, 58); /* Weak shade of link text to be used in interactions */ @color-text-link-weak: rgb(153, 205, 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(0, 20, 137); /* 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); /* Body text color */ @color-text: rgb(18, 28, 45); /* Icon color for indicating a busy status */ @color-text-icon-busy: rgb(227, 106, 25); /* Weakest body text for visual hierarchy. Inaccessible unless used on disabled controls. */ @color-text-weakest: rgb(255, 255, 255); /* Twilio brand red, accessible on large text only. */ @color-text-brand-highlight: rgb(242, 47, 70); /* 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(136, 145, 170); /* 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(142, 150, 174); /* Color for dark warning text. */ @color-text-warning-strong: rgb(141, 49, 24); /* Icon color for indicating a warning. */ @color-text-icon-warning: rgb(227, 106, 25); /* Stronger error text for inputs and error misc */ @color-text-error-stronger: rgb(74, 11, 11); /* Strong shade of destructive link text to be used in interactions */ @color-text-link-destructive-strong: rgb(173, 17, 17); @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";