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

// Darker background for primary actions or highlights
@color-background-primary-darker: #003e82;
// Lighter background for primary actions or highlights
@color-background-primary-lighter: #dceaf4;
// Darker background for destructive actions or highlights
@color-background-destructive-darker: #921200;
// Lighter background for destructive actions or highlights
@color-background-destructive-lighter: #f5dddd;
// Warning background color
@color-background-warning: #e46216;
// Lightest error background color
@color-background-error-lightest: #fff6f6;
// Background for destructive actions or highlights
@color-background-destructive: #cb0000;
// Background for primary actions or highlights
@color-background-primary: #0075c3;
// Success background color
@color-background-success: #00994a;
// Background color for alternative striped rows
@color-background-row-striped: #f8f8f9;
// Lightest success background color
@color-background-success-lightest: #e0ffef;
// Lightest background for destructive actions or highlights
@color-background-destructive-lightest: #fff6f6;
// Lightest background for primary actions or highlights
@color-background-primary-lightest: #f6fcff;
// Primary brand background, accessible with inverse text
@color-background-brand: #233659;
// Error background color
@color-background-error: #cb0000;
// Dark background for destructive actions or highlights
@color-background-destructive-dark: #b20600;
// Light background for destructive actions or highlights
@color-background-destructive-light: #ecb6b6;
// Dark background for primary actions or highlights
@color-background-primary-dark: #005ea6;
// Light background for primary actions or highlights
@color-background-primary-light: #b3d3e9;
// Lightest warning background color
@color-background-warning-lightest: #fff5eb;
// Background color of the main page body
@color-background-body: #ffffff;
// Default background color for any container
@color-background: #f8f8f9;
// Highlight brand background, accessible with black text
@color-background-brand-highlight: #f22f46;
// Inverse background color for any container
@color-background-inverse: #4f5355;
// Destructive focus border color
@color-border-destructive-lighter: #f5dddd;
// Lighter primary border color
@color-border-primary-lighter: #dceaf4;
// Input hover border color
@color-border-input-hover: #0075c3;
// Darker primary border color
@color-border-primary-darker: #003e82;
// Warning border color
@color-border-warning: #e46216;
// Destructive hover border color
@color-border-destructive-darker: #921200;
// Destructive border color
@color-border-destructive: #cb0000;
// Primary border color
@color-border-primary: #0075c3;
// Success border color
@color-border-success: #00994a;
// Lightest error border color
@color-border-error-lightest: #fff6f6;
// Dark border color
@color-border-dark: #888c8e;
// Lightest success border color
@color-border-success-lightest: #e0ffef;
// Error border color
@color-border-error: #cb0000;
// Input border color
@color-border-input: #888c8e;
// Destructive focus border color
@color-border-destructive-light: #ecb6b6;
// Light primary border color
@color-border-primary-light: #b3d3e9;
// Default border color
@color-border: #c8cccf;
// Lightest warning border color
@color-border-warning-lightest: #fff5eb;
// Dark primary border color
@color-border-primary-dark: #005ea6;
// Destructive focus border color
@color-border-destructive-dark: #b20600;
// Input focus border color
@color-border-input-focus: #0075c3;
// Light border color
@color-border-light: #e4e7e9;
// 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;
// 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(0,117,195,0.5);
@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: 600;
// Font weight for bold weight
@font-weight-bold: 700;
// Constant line-height token for font size 110
@line-height-110: 3.75rem;
// Constant line-height token for font size 90
@line-height-90: 2.5rem;
// Constant line-height token for font size 100
@line-height-100: 3.25rem;
// Constant line-height token for font size 80
@line-height-80: 2.25rem;
// Constant line-height token for font size 70
@line-height-70: 2rem;
// Constant line-height token for font size 60
@line-height-60: 1.75rem;
// Constant line-height token for font size 50
@line-height-50: 1.75rem;
// Constant line-height token for font size 40
@line-height-40: 1.75rem;
// Constant line-height token for font size 30
@line-height-30: 1.5rem;
// Constant line-height token for font size 20
@line-height-20: 1.25rem;
// Constant line-height token for font size 10
@line-height-10: 1rem;
// Twilio brand red
@color-brand-highlight: #f22f46;
// Gray Color 0
@color-gray-0: #ffffff;
// Gray Color 10
@color-gray-100: #282a2b;
// Gray Color 9
@color-gray-90: #424547;
// Gray Color 8
@color-gray-80: #4f5355;
// Gray Color 7
@color-gray-70: #666a6d;
// Gray Color 6
@color-gray-60: #888c8e;
// Gray Color 5
@color-gray-50: #c8cccf;
// Gray Color 4
@color-gray-40: #e4e7e9;
// Default branding color
@color-brand: #233659;
// Gray Color 3
@color-gray-30: #f2f3f4;
// Gray Color 2
@color-gray-20: #f8f8f9;
// Gray Color 1
@color-gray-10: #fafafa;
// Generic sizing token scale for UI components.
@size-90: 57.5rem;
// Generic sizing token scale for UI components.
@size-120: 77rem;
// 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;
// Generic sizing token scale for UI components.
@size-70: 44.5rem;
// Generic sizing token scale for UI components.
@size-100: 64rem;
// Icon sizing token
@size-icon-30: 2rem;
// Generic sizing token scale for UI components.
@size-60: 38rem;
// Icon sizing token
@size-icon-20: 1.5rem;
// Icon sizing token
@size-icon-10: 1rem;
// Generic sizing token scale for UI components.
@size-50: 31.5rem;
// Generic sizing token scale for UI components.
@size-40: 25rem;
// Generic sizing token scale for UI components.
@size-30: 18.5rem;
// Generic sizing token scale for UI components.
@size-20: 12rem;
// Generic sizing token scale for UI components.
@size-10: 5.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: #003e82;
// Destructive link text
@color-text-link-destructive: #cb0000;
// Color for warning text.
@color-text-warning: #e46216;
// Weak inverse text color for dark backgrounds
@color-text-inverse-weak: #888c8e;
// Darker shade of destructive link text to be used in interactions
@color-text-link-destructive-darker: #921200;
// Text color for success text.
@color-text-success: #00994a;
// Weak body text for visual hierarchy.
@color-text-weak: #666a6d;
// Light shade of destructive link text to be used in interactions
@color-text-link-destructive-light: #ecb6b6;
// Default icon color.
@color-text-icon: #282a2b;
// Link text
@color-text-link: #0075c3;
// Error text for inputs and error misc
@color-text-error: #cb0000;
// Dark shade of link text to be used in interactions
@color-text-link-dark: #005ea6;
// Text color used on any brand color
@color-text-brand-inverse: #ffffff;
// Body text color
@color-text: #282a2b;
// Twilio brand red, accessible on large text only.
@color-text-brand-highlight: #f22f46;
// Light shade of link text to be used in interactions
@color-text-link-light: #b3d3e9;
// Inverse text color for dark backgrounds
@color-text-inverse: #ffffff;
// Input placeholder text.
@color-text-placeholder: #666a6d;
// Dark shade of destructive link text to be used in interactions
@color-text-link-destructive-dark: #b20600;
// Text color for field labels.
@color-text-label: #282a2b;
@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;