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

// Darker background for primary actions or highlights
$color-background-primary-darker: #001f75 !default;
// Lighter background for primary actions or highlights
$color-background-primary-lighter: #dbe6ff !default;
// Darker background for destructive actions or highlights
$color-background-destructive-darker: #470500 !default;
// Lighter background for destructive actions or highlights
$color-background-destructive-lighter: #ffb9b3 !default;
// Warning background color
$color-background-warning: #e46216 !default;
// Lightest error background color
$color-background-error-lightest: #ffe9e7 !default;
// Lightest neutral background color
$color-background-neutral-lightest: #f5f8ff !default;
// Background for destructive actions or highlights
$color-background-destructive: #ce241a !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;
// Required background color
$color-background-required: #e8534a !default;
// Dark background for destructive actions or highlights
$color-background-destructive-dark: #700600 !default;
// Light background for destructive actions or highlights
$color-background-destructive-light: #ff8c85 !default;
// Dark background for primary actions or highlights
$color-background-primary-dark: #002ca6 !default;
// Light background for primary actions or highlights
$color-background-primary-light: #baccff !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: #08152c !default;
// Destructive focus border color
$color-border-destructive-lighter: #ffb9b3 !default;
// Lighter primary border color
$color-border-primary-lighter: #dbe6ff !default;
// Input hover border color
$color-border-input-hover: #003adb !default;
// Darker primary border color
$color-border-primary-darker: #001f75 !default;
// Warning border color
$color-border-warning: #e46216 !default;
// Darker destructive hover border color
$color-border-destructive-darker: #470500 !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;
// Light warning border color
$color-border-warning-light: #fa9c66 !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: #8894aa !default;
// Destructive focus border color
$color-border-destructive-light: #ff8c85 !default;
// Light primary border color
$color-border-primary-light: #baccff !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: #002ca6 !default;
// Destructive focus border color
$color-border-destructive-dark: #700600 !default;
// Light neutral border color
$color-border-neutral-light: #b6bfce !default;
// Light error border color
$color-border-error-light: #e8534a !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(18, 28, 45, 0.3) !default;
// Shadow for focus ring on interactive elements
$shadow-focus: 0 0 0 4px rgba(51, 104, 250, 0.8) !default;
// Shadow border for inputs.
$shadow-border-input: 0 0 0 1px #8894aa !default;
// Shadow border for inputs hover.
$shadow-border-input-hover: 0 0 0 1px #001f75 !default;
// Shadow border for error inputs.
$shadow-border-input-error: 0 0 0 1px #d61f1f !default;
// Shadow border for error inputs hover.
$shadow-border-input-error-hover: 0 0 0 1px #940800 !default;
// Shadow border for disabled inputs.
$shadow-border-input-disabled: 0 0 0 1px #ccd2dc !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;
// fontSize110's lineHeight mapping. fontSize110 * 1.25 = 60px / 16 = 3.75rem
$line-height-110: 3.75rem !default;
// fontSize90's lineHeight mapping. fontSize90 * 1.25 = 40px / 16 = 2.5rem
$line-height-90: 2.5rem !default;
// fontSize100's lineHeight mapping. fontSize100 * 1.25 = 52px / 16 = 3.25rem
$line-height-100: 3.25rem !default;
// fontSize80's lineHeight mapping. fontSize80 * 1.25 = 36px / 16 = 2.25rem
$line-height-80: 2.25rem !default;
// fontSize70's lineHeight mapping. fontSize70 * 1.25 = 32px / 16 = 2rem
$line-height-70: 2rem !default;
// fontSize60's lineHeight mapping. fontSize60 * 1.25 = 28px / 16 = 1.75rem
$line-height-60: 1.75rem !default;
// fontSize50's lineHeight mapping. fontSize50 * 1.55 = 28px / 16 = 1.75rem
$line-height-50: 1.75rem !default;
// fontSize40's lineHeight mapping. fontSize40 * 1.55 = 28px / 16 = 1.75rem
$line-height-40: 1.75rem !default;
// fontSize30's lineHeight mapping. fontSize30 * 1.55 = 24px / 16 = 1.5rem
$line-height-30: 1.5rem !default;
// fontSize20's lineHeight mapping. fontSize20 * 1.55 = 20px / 16 = 1.25rem
$line-height-20: 1.25rem !default;
// fontSize10's lineHeight mapping. fontSize10 * 1.55 = 16px / 16 = 1rem
$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: #8894aa !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;
// Maps to line-height tokens 1:1
$size-icon-80: 2.25rem !default;
// Maps to line-height tokens 1:1
$size-icon-70: 2rem !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 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.75rem !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.5rem !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;
// Maps to line-height tokens 1:1
$size-icon-10: 1rem !default;
// Generic sizing token scale for UI components.
$size-50: 31.5rem !default;
// Maps to line-height tokens 1:1
$size-icon-110: 3.75rem !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 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;
// Maps to line-height tokens 1:1
$size-icon-90: 2.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. Must pass AA color contrast with color-background-inverse.
$color-text-inverse-weak: #9ca7ba !default;
// Darker shade of destructive link text to be used in interactions
$color-text-link-destructive-darker: #470500 !default;
// Text color for success text.
$color-text-success: #00994a !default;
// Weak body text for visual hierarchy. Must pass AA color contrast with color-background.
$color-text-weak: #475672 !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: #8894aa !default;
// Link text
$color-text-link: #003adb !default;
// Dark error text for inputs and error misc
$color-text-error-dark: #940800 !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. Must pass AA color contrast with color-background-inverse.
$color-text-inverse: #ffffff !default;
// Input placeholder text.
$color-text-placeholder: #8894aa !default;
// Color for dark warning text.
$color-text-warning-dark: #a83e00 !default;
// Dark shade of destructive link text to be used in interactions
$color-text-link-destructive-dark: #700600 !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;