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

/* Darker background for primary actions or highlights */
@color-background-primary-darker: rgb(3, 44, 94);
/* Lighter background for primary actions or highlights */
@color-background-primary-lighter: rgb(220, 234, 244);
/* Darker background for destructive actions or highlights */
@color-background-destructive-darker: rgb(96, 1, 1);
/* Lighter background for destructive actions or highlights */
@color-background-destructive-lighter: rgb(245, 221, 221);
/* Warning background color */
@color-background-warning: rgb(228, 98, 22);
/* Lightest error background color */
@color-background-error-lightest: rgb(255, 233, 231);
/* Lightest neutral background color */
@color-background-neutral-lightest: rgb(245, 248, 255);
/* Dark default background color */
@color-background-dark: rgb(228, 231, 233);
/* Background for destructive actions or highlights */
@color-background-destructive: rgb(226, 37, 37);
/* Background for primary actions or highlights */
@color-background-primary: rgb(2, 122, 197);
/* Success background color */
@color-background-success: rgb(0, 153, 74);
/* Background color for alternative striped rows */
@color-background-row-striped: rgb(248, 248, 249);
/* Lightest success background color */
@color-background-success-lightest: rgb(224, 255, 239);
/* Lightest background for destructive actions or highlights */
@color-background-destructive-lightest: rgb(255, 233, 231);
/* Dark error background color */
@color-background-error-dark: rgb(146, 18, 0);
/* Lightest background for primary actions or highlights */
@color-background-primary-lightest: rgb(245, 248, 255);
/* Primary brand background, accessible with inverse text */
@color-background-brand: rgb(35, 54, 89);
/* Error background color */
@color-background-error: rgb(226, 37, 37);
/* Required background color */
@color-background-required: rgb(222, 88, 88);
/* Dark background for destructive actions or highlights */
@color-background-destructive-dark: rgb(146, 18, 0);
/* Light background for destructive actions or highlights */
@color-background-destructive-light: rgb(236, 182, 182);
/* Dark background for primary actions or highlights */
@color-background-primary-dark: rgb(0, 62, 130);
/* Light background for primary actions or highlights */
@color-background-primary-light: rgb(179, 211, 233);
/* Lightest warning background color */
@color-background-warning-lightest: rgb(255, 236, 216);
/* Background color of the main page body */
@color-background-body: rgb(255, 255, 255);
/* Darker default background color */
@color-background-darker: rgb(200, 204, 207);
/* Default background color for any container */
@color-background: rgb(248, 248, 249);
/* Highlight brand background, accessible with black text */
@color-background-brand-highlight: rgb(242, 47, 70);
/* Inverse background color for any container, the darkest gray in the system */
@color-background-inverse: rgb(40, 42, 43);
/* Default background for overlays */
@color-background-overlay: rgba(40, 42, 43, 0.5);
/* Darkest default background color */
@color-background-darkest: rgb(112, 117, 120);
/* Destructive focus border color */
@color-border-destructive-lighter: rgb(245, 221, 221);
/* Lighter primary border color */
@color-border-primary-lighter: rgb(220, 234, 244);
/* Darker primary border color */
@color-border-primary-darker: rgb(3, 44, 94);
/* Warning border color */
@color-border-warning: rgb(228, 98, 22);
/* Darker destructive hover border color */
@color-border-destructive-darker: rgb(96, 1, 1);
/* Destructive border color */
@color-border-destructive: rgb(226, 37, 37);
/* Primary border color */
@color-border-primary: rgb(2, 122, 197);
/* Success border color */
@color-border-success: rgb(0, 153, 74);
/* Lightest error border color */
@color-border-error-lightest: rgb(255, 233, 231);
/* Dark border color */
@color-border-dark: rgb(136, 140, 142);
/* Light warning border color */
@color-border-warning-light: rgb(242, 133, 16);
/* Lightest success border color */
@color-border-success-lightest: rgb(224, 255, 239);
/* Error border color */
@color-border-error: rgb(226, 37, 37);
/* Dark error border color */
@color-border-error-dark: rgb(146, 18, 0);
/* Destructive focus border color */
@color-border-destructive-light: rgb(236, 182, 182);
/* Light primary border color */
@color-border-primary-light: rgb(179, 211, 233);
/* Default border color */
@color-border: rgb(136, 140, 142);
/* Lightest warning border color */
@color-border-warning-lightest: rgb(255, 236, 216);
/* Dark primary border color */
@color-border-primary-dark: rgb(0, 62, 130);
/* Destructive focus border color */
@color-border-destructive-dark: rgb(146, 18, 0);
/* Light neutral border color */
@color-border-neutral-light: rgb(200, 204, 207);
/* Border on inverse backgrounds */
@color-border-inverse: rgb(255, 255, 255);
/* Light error border color */
@color-border-error-light: rgb(222, 88, 88);
/* Light border color */
@color-border-light: rgb(228, 231, 233);
/* Border radius reset */
@border-radius-0: 0;
/* Small border radius */
@border-radius-10: 3px;
/* Large border radius */
@border-radius-20: 4px;
/* Larger border radius */
@border-radius-30: 8px;
/* Circular border radius */
@border-radius-circle: 50%;
/* Border width reset */
@border-width-0: 0;
/* Small border width */
@border-width-10: 1px;
/* Large border width */
@border-width-20: 2px;
/* Small border width */
@border-width-30: 4px;
/* Large border width */
@border-width-40: 8px;
/* Shadow for cards. */
@shadow-card: 0 2px 4px 0 rgba(40, 42, 43, 0.3);
/* Shadow for focus ring on interactive elements */
@shadow-focus: 0 0 0 4px rgba(2, 122, 197, 0.8);
/* Shadow border for disabled inputs. */
@shadow-border-light: 0 0 0 1px #e4e7e9;
/* Shadow border for inputs. */
@shadow-border: 0 0 0 1px #888c8e;
/* Shadow border for inputs hover. */
@shadow-border-primary-dark: 0 0 0 1px #003e82;
/* Shadow border for inputs active. */
@shadow-border-primary-darker: 0 0 0 1px #032c5e;
/* Shadow border for error inputs. */
@shadow-border-error: 0 0 0 1px #e22525;
/* Shadow border for error inputs hover. */
@shadow-border-error-dark: 0 0 0 1px #921200;
@font-family-text: 'Whitney SSm A', 'Whitney SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif;
@font-family-code: 'Fira Mono', 'Courier New', Courier, monospace;
/* 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;
/* 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: 500;
/* Font weight for bold weight */
@font-weight-bold: 700;
/* Constant line-height token for line-height 110 */
@line-height-110: 3.75rem;
/* 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.25rem;
/* 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.75rem;
/* Constant line-height token for line-height 30 */
@line-height-30: 1.5rem;
/* 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;
/* 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(40, 42, 43);
/* Gray Color 9 */
@color-gray-90: rgb(66, 69, 71);
/* Gray Color 8 */
@color-gray-80: rgb(79, 83, 85);
/* Gray Color 7 */
@color-gray-70: rgb(112, 117, 120);
/* Gray Color 6 */
@color-gray-60: rgb(136, 140, 142);
/* Gray Color 5 */
@color-gray-50: rgb(200, 204, 207);
/* Gray Color 4 */
@color-gray-40: rgb(228, 231, 233);
/* Default branding color */
@color-brand: rgb(35, 54, 89);
/* Gray Color 3 */
@color-gray-30: rgb(242, 243, 244);
/* Gray Color 2 */
@color-gray-20: rgb(248, 248, 249);
/* Gray Color 1 */
@color-gray-10: rgb(249, 250, 251);
/* Generic square sizing token scale for UI components. */
@size-square-40: 0.75rem;
/* Maps to line-height tokens 1:1 */
@size-icon-80: 2.25rem;
/* 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.75rem;
/* 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.5rem;
/* 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;
/* 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: 3.75rem;
/* 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;
/* 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;
/* 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;
/* 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-60: 1.25rem;
@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-110: 2.5rem;
@space-0: 0;
@space-100: 2.25rem;
@space-200: 4.75rem;
@space-90: 2rem;
@space-80: 1.75rem;
/* Darker shade of link text to be used in interactions */
@color-text-link-darker: rgb(3, 44, 94);
/* Destructive link text */
@color-text-link-destructive: rgb(226, 37, 37);
/* Color for warning text. */
@color-text-warning: rgb(228, 98, 22);
/* Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse. */
@color-text-inverse-weak: rgb(200, 204, 207);
/* Darker shade of destructive link text to be used in interactions */
@color-text-link-destructive-darker: rgb(146, 18, 0);
/* Text color for success text. */
@color-text-success: rgb(0, 153, 74);
/* Weak body text for visual hierarchy. */
@color-text-weak: rgb(112, 117, 120);
/* Light shade of destructive link text to be used in interactions */
@color-text-link-destructive-light: rgb(236, 182, 182);
/* Default icon color. */
@color-text-icon: rgb(112, 117, 120);
/* Link text */
@color-text-link: rgb(0, 94, 166);
/* Dark error text for inputs and error misc */
@color-text-error-dark: rgb(146, 18, 0);
/* Error text for inputs and error misc */
@color-text-error: rgb(226, 37, 37);
/* Dark shade of link text to be used in interactions */
@color-text-link-dark: rgb(0, 62, 130);
/* Text color used on any brand color */
@color-text-brand-inverse: rgb(255, 255, 255);
/* Body text color */
@color-text: rgb(40, 42, 43);
/* Twilio brand red, accessible on large text only. */
@color-text-brand-highlight: rgb(242, 47, 70);
/* Light shade of link text to be used in interactions */
@color-text-link-light: rgb(179, 211, 233);
/* Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse. */
@color-text-inverse: rgb(255, 255, 255);
/* Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls. */
@color-text-weaker: rgb(200, 204, 207);
/* Input placeholder text. */
@color-text-placeholder: rgb(112, 117, 120);
/* Color for dark warning text. */
@color-text-warning-dark: rgb(168, 62, 0);
/* Dark shade of destructive link text to be used in interactions */
@color-text-link-destructive-dark: rgb(178, 6, 0);
/* Text color for field labels. */
@color-text-label: rgb(40, 42, 43);
@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;