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

// Darker background for primary actions or highlights
$color-background-primary-darker: #002ca6 !default;
// Lighter background for primary actions or highlights
$color-background-primary-lighter: #baccff !default;
// Darker background for destructive actions or highlights
$color-background-destructive-darker: #700600 !default;
// Lighter background for destructive actions or highlights
$color-background-destructive-lighter: #ff8c85 !default;
// Warning background color
$color-background-warning: #e46216 !default;
// Lightest error background color
$color-background-error-lightest: #ffe9e7 !default;
// Background for destructive actions or highlights
$color-background-destructive: #ac1e16 !default;
// Background for primary actions or highlights
$color-background-primary: #3368fa !default;
// Success background color
$color-background-success: #00994a !default;
// Background color for alternative striped rows
$color-background-row-striped: #f9fafb !default;
// Lightest success background color
$color-background-success-lightest: #e0ffef !default;
// Lightest background for destructive actions or highlights
$color-background-destructive-lightest: #ffe9e7 !default;
// Lightest background for primary actions or highlights
$color-background-primary-lightest: #f5f8ff !default;
// Primary brand background, accessible with inverse text
$color-background-brand: #233659 !default;
// Error background color
$color-background-error: #ac1e16 !default;
// Dark background for destructive actions or highlights
$color-background-destructive-dark: #940800 !default;
// Light background for destructive actions or highlights
$color-background-destructive-light: #e8534a !default;
// Dark background for primary actions or highlights
$color-background-primary-dark: #003adb !default;
// Light background for primary actions or highlights
$color-background-primary-light: #85a5ff !default;
// Lightest warning background color
$color-background-warning-lightest: #ffecd8 !default;
// Background color of the main page body
$color-background-body: #ffffff !default;
// Default background color for any container
$color-background: #f3f4f6 !default;
// Highlight brand background, accessible with black text
$color-background-brand-highlight: #f22f46 !default;
// Inverse background color for any container
$color-background-inverse: #4f5355 !default;
// Destructive focus border color
$color-border-destructive-lighter: #ff8c85 !default;
// Lighter primary border color
$color-border-primary-lighter: #baccff !default;
// Input hover border color
$color-border-input-hover: #003adb !default;
// Darker primary border color
$color-border-primary-darker: #002ca6 !default;
// Warning border color
$color-border-warning: #e46216 !default;
// Destructive hover border color
$color-border-destructive-darker: #940800 !default;
// Destructive border color
$color-border-destructive: #ce241a !default;
// Primary border color
$color-border-primary: #3368fa !default;
// Success border color
$color-border-success: #00994a !default;
// Lightest error border color
$color-border-error-lightest: #ffe9e7 !default;
// Dark border color
$color-border-dark: #9ca7ba !default;
// Lightest success border color
$color-border-success-lightest: #e0ffef !default;
// Error border color
$color-border-error: #ac1e16 !default;
// Input border color
$color-border-input: #9ca7ba !default;
// Destructive focus border color
$color-border-destructive-light: #e8534a !default;
// Light primary border color
$color-border-primary-light: #85a5ff !default;
// Default border color
$color-border: #b6bfce !default;
// Lightest warning border color
$color-border-warning-lightest: #ffecd8 !default;
// Dark primary border color
$color-border-primary-dark: #003adb !default;
// Destructive focus border color
$color-border-destructive-dark: #ac1e16 !default;
// Input focus border color
$color-border-input-focus: #003adb !default;
// Light border color
$color-border-light: #ccd2dc !default;
// Border radius reset
$border-radius-0: 0 !default;
// Small border radius
$border-radius-10: 3px !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;
// Border width reset
$border-width-0: 0 !default;
// Small border width
$border-width-10: 1px !default;
// Large border width
$border-width-20: 2px !default;
// Shadow for cards.
$shadow-card: 0 2px 4px 0 rgba(40, 42, 43, 0.3) !default;
// Shadow for focus ring on interactive elements
$shadow-focus: 0 0 0 4px rgba(0,117,195,0.5) !default;
$font-family-text: 'Colfax', Helvetica, Arial, sans-serif !default;
$font-family-code: 'Fira Mono', 'Courier New', Courier, monospace !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: 300 !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 font size 110
$line-height-110: 3.75rem !default;
// Constant line-height token for font size 90
$line-height-90: 2.5rem !default;
// Constant line-height token for font size 100
$line-height-100: 3.25rem !default;
// Constant line-height token for font size 80
$line-height-80: 2.25rem !default;
// Constant line-height token for font size 70
$line-height-70: 2rem !default;
// Constant line-height token for font size 60
$line-height-60: 1.75rem !default;
// Constant line-height token for font size 50
$line-height-50: 1.75rem !default;
// Constant line-height token for font size 40
$line-height-40: 1.75rem !default;
// Constant line-height token for font size 30
$line-height-30: 1.5rem !default;
// Constant line-height token for font size 20
$line-height-20: 1.25rem !default;
// Constant line-height token for font size 10
$line-height-10: 1rem !default;
// SendGrid product blue
$color-brand-highlight: #3368fa !default;
// Gray Color 0
$color-gray-0: #ffffff !default;
// Gray Color 10
$color-gray-100: #08152c !default;
// Gray Color 9
$color-gray-90: #1d2944 !default;
// Gray Color 8
$color-gray-80: #475672 !default;
// Gray Color 7
$color-gray-70: #76859e !default;
// Gray Color 6
$color-gray-60: #9ca7ba !default;
// Gray Color 5
$color-gray-50: #b6bfce !default;
// Gray Color 4
$color-gray-40: #ccd2dc !default;
// SendGrid product dark gray
$color-brand: #08152c !default;
// Gray Color 3
$color-gray-30: #e5e7ec !default;
// Gray Color 2
$color-gray-20: #f3f4f6 !default;
// Gray Color 1
$color-gray-10: #f9fafb !default;
// Generic sizing token scale for UI components.
$size-90: 57.5rem !default;
// Generic sizing token scale for UI components.
$size-120: 77rem !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;
// Generic sizing token scale for UI components.
$size-70: 44.5rem !default;
// Generic sizing token scale for UI components.
$size-100: 64rem !default;
// Icon sizing token
$size-icon-30: 2rem !default;
// Generic sizing token scale for UI components.
$size-60: 38rem !default;
// Icon sizing token
$size-icon-20: 1.5rem !default;
// Icon sizing token
$size-icon-10: 1rem !default;
// Generic sizing token scale for UI components.
$size-50: 31.5rem !default;
// Generic sizing token scale for UI components.
$size-40: 25rem !default;
// Generic sizing token scale for UI components.
$size-30: 18.5rem !default;
// Generic sizing token scale for UI components.
$size-20: 12rem !default;
// Generic sizing token scale for UI components.
$size-10: 5.5rem !default;
$space-70: 1.5rem !default;
$space-60: 1.25rem !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-110: 2.5rem !default;
$space-0: 0 !default;
$space-100: 2.25rem !default;
$space-200: 4.75rem !default;
$space-90: 2rem !default;
$space-80: 1.75rem !default;
// Darker shade of link text to be used in interactions
$color-text-link-darker: #001f75 !default;
// Destructive link text
$color-text-link-destructive: #ce241a !default;
// Color for warning text.
$color-text-warning: #e46216 !default;
// Weak inverse text color for dark backgrounds
$color-text-inverse-weak: #9ca7ba !default;
// Darker shade of destructive link text to be used in interactions
$color-text-link-destructive-darker: #940800 !default;
// Text color for success text.
$color-text-success: #00994a !default;
// Weak body text for visual hierarchy.
$color-text-weak: #76859e !default;
// Light shade of destructive link text to be used in interactions
$color-text-link-destructive-light: #e8534a !default;
// Default icon color.
$color-text-icon: #08152c !default;
// Link text
$color-text-link: #3368fa !default;
// Error text for inputs and error misc
$color-text-error: #ac1e16 !default;
// Dark shade of link text to be used in interactions
$color-text-link-dark: #002ca6 !default;
// Text color used on any brand color
$color-text-brand-inverse: #ffffff !default;
// Body text color
$color-text: #08152c !default;
// Twilio brand red, accessible on large text only.
$color-text-brand-highlight: #f22f46 !default;
// Light shade of link text to be used in interactions
$color-text-link-light: #85a5ff !default;
// Inverse text color for dark backgrounds
$color-text-inverse: #ffffff !default;
// Input placeholder text.
$color-text-placeholder: #76859e !default;
// Dark shade of destructive link text to be used in interactions
$color-text-link-destructive-dark: #ac1e16 !default;
// Text color for field labels.
$color-text-label: #08152c !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;