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

$tokens-map: (
  // Darker background for primary actions or highlights
  'color-background-primary-darker': (#001f75),
  // Lighter background for primary actions or highlights
  'color-background-primary-lighter': (#dbe6ff),
  // Darker background for destructive actions or highlights
  'color-background-destructive-darker': (#470500),
  // Lighter background for destructive actions or highlights
  'color-background-destructive-lighter': (#ffb9b3),
  // Warning background color
  'color-background-warning': (#e46216),
  // Lightest error background color
  'color-background-error-lightest': (#ffe9e7),
  // Lightest neutral background color
  'color-background-neutral-lightest': (#f5f8ff),
  // Background for destructive actions or highlights
  'color-background-destructive': (#ce241a),
  // Background for primary actions or highlights
  'color-background-primary': (#3368fa),
  // Success background color
  'color-background-success': (#00994a),
  // Background color for alternative striped rows
  'color-background-row-striped': (#f9fafb),
  // Lightest success background color
  'color-background-success-lightest': (#e0ffef),
  // Lightest background for destructive actions or highlights
  'color-background-destructive-lightest': (#ffe9e7),
  // Lightest background for primary actions or highlights
  'color-background-primary-lightest': (#f5f8ff),
  // Primary brand background, accessible with inverse text
  'color-background-brand': (#233659),
  // Error background color
  'color-background-error': (#ac1e16),
  // Required background color
  'color-background-required': (#e8534a),
  // Dark background for destructive actions or highlights
  'color-background-destructive-dark': (#700600),
  // Light background for destructive actions or highlights
  'color-background-destructive-light': (#ff8c85),
  // Dark background for primary actions or highlights
  'color-background-primary-dark': (#002ca6),
  // Light background for primary actions or highlights
  'color-background-primary-light': (#baccff),
  // Lightest warning background color
  'color-background-warning-lightest': (#ffecd8),
  // Background color of the main page body
  'color-background-body': (#ffffff),
  // Default background color for any container
  'color-background': (#f3f4f6),
  // Highlight brand background, accessible with black text
  'color-background-brand-highlight': (#f22f46),
  // Inverse background color for any container
  'color-background-inverse': (#08152c),
  // Destructive focus border color
  'color-border-destructive-lighter': (#ffb9b3),
  // Lighter primary border color
  'color-border-primary-lighter': (#dbe6ff),
  // Input hover border color
  'color-border-input-hover': (#003adb),
  // Darker primary border color
  'color-border-primary-darker': (#001f75),
  // Warning border color
  'color-border-warning': (#e46216),
  // Darker destructive hover border color
  'color-border-destructive-darker': (#470500),
  // Destructive border color
  'color-border-destructive': (#ce241a),
  // Primary border color
  'color-border-primary': (#3368fa),
  // Success border color
  'color-border-success': (#00994a),
  // Lightest error border color
  'color-border-error-lightest': (#ffe9e7),
  // Dark border color
  'color-border-dark': (#9ca7ba),
  // Light warning border color
  'color-border-warning-light': (#fa9c66),
  // Lightest success border color
  'color-border-success-lightest': (#e0ffef),
  // Error border color
  'color-border-error': (#ac1e16),
  // Input border color
  'color-border-input': (#8894aa),
  // Destructive focus border color
  'color-border-destructive-light': (#ff8c85),
  // Light primary border color
  'color-border-primary-light': (#baccff),
  // Default border color
  'color-border': (#b6bfce),
  // Lightest warning border color
  'color-border-warning-lightest': (#ffecd8),
  // Dark primary border color
  'color-border-primary-dark': (#002ca6),
  // Destructive focus border color
  'color-border-destructive-dark': (#700600),
  // Light neutral border color
  'color-border-neutral-light': (#b6bfce),
  // Light error border color
  'color-border-error-light': (#e8534a),
  // Input focus border color
  'color-border-input-focus': (#003adb),
  // Light border color
  'color-border-light': (#ccd2dc),
  // 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(18, 28, 45, 0.3)),
  // Shadow for focus ring on interactive elements
  'shadow-focus': (0 0 0 4px rgba(51, 104, 250, 0.8)),
  // Shadow border for inputs.
  'shadow-border-input': (0 0 0 1px #8894aa),
  // Shadow border for inputs hover.
  'shadow-border-input-hover': (0 0 0 1px #001f75),
  // Shadow border for error inputs.
  'shadow-border-input-error': (0 0 0 1px #d61f1f),
  // Shadow border for error inputs hover.
  'shadow-border-input-error-hover': (0 0 0 1px #940800),
  // Shadow border for disabled inputs.
  'shadow-border-input-disabled': (0 0 0 1px #ccd2dc),
  'font-family-text': ('Colfax', 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),
  // fontSize110's lineHeight mapping. fontSize110 * 1.25 = 60px / 16 = 3.75rem
  'line-height-110': (3.75rem),
  // fontSize90's lineHeight mapping. fontSize90 * 1.25 = 40px / 16 = 2.5rem
  'line-height-90': (2.5rem),
  // fontSize100's lineHeight mapping. fontSize100 * 1.25 = 52px / 16 = 3.25rem
  'line-height-100': (3.25rem),
  // fontSize80's lineHeight mapping. fontSize80 * 1.25 = 36px / 16 = 2.25rem
  'line-height-80': (2.25rem),
  // fontSize70's lineHeight mapping. fontSize70 * 1.25 = 32px / 16 = 2rem
  'line-height-70': (2rem),
  // fontSize60's lineHeight mapping. fontSize60 * 1.25 = 28px / 16 = 1.75rem
  'line-height-60': (1.75rem),
  // fontSize50's lineHeight mapping. fontSize50 * 1.55 = 28px / 16 = 1.75rem
  'line-height-50': (1.75rem),
  // fontSize40's lineHeight mapping. fontSize40 * 1.55 = 28px / 16 = 1.75rem
  'line-height-40': (1.75rem),
  // fontSize30's lineHeight mapping. fontSize30 * 1.55 = 24px / 16 = 1.5rem
  'line-height-30': (1.5rem),
  // fontSize20's lineHeight mapping. fontSize20 * 1.55 = 20px / 16 = 1.25rem
  'line-height-20': (1.25rem),
  // fontSize10's lineHeight mapping. fontSize10 * 1.55 = 16px / 16 = 1rem
  'line-height-10': (1rem),
  // SendGrid product blue
  'color-brand-highlight': (#3368fa),
  // Gray Color 0
  'color-gray-0': (#ffffff),
  // Gray Color 10
  'color-gray-100': (#08152c),
  // Gray Color 9
  'color-gray-90': (#1d2944),
  // Gray Color 8
  'color-gray-80': (#475672),
  // Gray Color 7
  'color-gray-70': (#8894aa),
  // Gray Color 6
  'color-gray-60': (#9ca7ba),
  // Gray Color 5
  'color-gray-50': (#b6bfce),
  // Gray Color 4
  'color-gray-40': (#ccd2dc),
  // SendGrid product dark gray
  'color-brand': (#08152c),
  // Gray Color 3
  'color-gray-30': (#e5e7ec),
  // Gray Color 2
  'color-gray-20': (#f3f4f6),
  // Gray Color 1
  'color-gray-10': (#f9fafb),
  // Maps to line-height tokens 1:1
  'size-icon-80': (2.25rem),
  // Maps to line-height tokens 1:1
  'size-icon-70': (2rem),
  // Maps to line-height tokens 1:1
  'size-icon-60': (1.75rem),
  // Generic sizing token scale for UI components.
  'size-90': (57.5rem),
  // 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 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 sizing token scale for UI components.
  'size-60': (38rem),
  // Maps to line-height tokens 1:1
  'size-icon-20': (1.25rem),
  // Maps to line-height tokens 1:1
  'size-icon-10': (1rem),
  // Generic sizing token scale for UI components.
  'size-50': (31.5rem),
  // Maps to line-height tokens 1:1
  'size-icon-110': (3.75rem),
  // Generic sizing token scale for UI components.
  'size-40': (25rem),
  // Maps to line-height tokens 1:1
  'size-icon-100': (3.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),
  // 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': (#001f75),
  // Destructive link text
  'color-text-link-destructive': (#ce241a),
  // Color for warning text.
  'color-text-warning': (#e46216),
  // Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.
  'color-text-inverse-weak': (#9ca7ba),
  // Darker shade of destructive link text to be used in interactions
  'color-text-link-destructive-darker': (#470500),
  // Text color for success text.
  'color-text-success': (#00994a),
  // Weak body text for visual hierarchy. Must pass AA color contrast with color-background.
  'color-text-weak': (#475672),
  // Light shade of destructive link text to be used in interactions
  'color-text-link-destructive-light': (#e8534a),
  // Default icon color.
  'color-text-icon': (#8894aa),
  // Link text
  'color-text-link': (#003adb),
  // Dark error text for inputs and error misc
  'color-text-error-dark': (#940800),
  // Error text for inputs and error misc
  'color-text-error': (#ac1e16),
  // Dark shade of link text to be used in interactions
  'color-text-link-dark': (#002ca6),
  // Text color used on any brand color
  'color-text-brand-inverse': (#ffffff),
  // Body text color
  'color-text': (#08152c),
  // 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': (#85a5ff),
  // Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.
  'color-text-inverse': (#ffffff),
  // Input placeholder text.
  'color-text-placeholder': (#8894aa),
  // Color for dark warning text.
  'color-text-warning-dark': (#a83e00),
  // Dark shade of destructive link text to be used in interactions
  'color-text-link-destructive-dark': (#700600),
  // Text color for field labels.
  'color-text-label': (#08152c),
  '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),
);