variables.scss

/*-- scss:defaults --*/

/**
 * Do not edit directly, this file was auto-generated.
 */

$surface-opacity-0: 0;
$surface-opacity-10: 0.1;
$surface-opacity-20: 0.2;
$surface-opacity-30: 0.3;
$surface-opacity-40: 0.4;
$surface-opacity-50: 0.5;
$surface-opacity-60: 0.6;
$surface-opacity-70: 0.7;
$surface-opacity-80: 0.8;
$surface-opacity-90: 0.9;
$surface-opacity-100: 1;
$surface-shadow-none: 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021; // Default shadow for most content and UI elements
$surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; // Reduced shadow for secondary UI elements
$surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; // Standard shadow for UI elements like cards and buttons
$surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; // Larger shadow for emphasis. Use sparingly
$surface-color-primary-button-default: #013366; // Default fill colour for primary buttons
$surface-color-primary-button-hover: #1E5189; // Fill colour used when user hovers over primary button
$surface-color-primary-button-disabled: #EDEBE9; // Fill colour for inactive primary buttons
$surface-color-primary-danger-button-default: #CE3E39; // Default fill colour for buttons in danger/warning state
$surface-color-primary-danger-button-hover: #A2312D; // Fill colour used when user hovers over danger/warning button
$surface-color-primary-danger-button-disabled: #EDEBE9; // Default fill colour for disabled danger/warning button
$surface-color-primary-default: #013366; // Default theme colour for components and layout
$surface-color-primary-hover: #1E5189; // Hover variant of surface.color.primary.default
$surface-color-primary-pressed: #01264C; // Selected/pressed variant of surface.color.primary.default
$surface-color-primary-disabled: #EDEBE9; // Disabled/inactive variant of surface.color.primary default
$surface-color-secondary-button-default: #FFFFFF; // Fill colour for secondary buttons
$surface-color-secondary-button-hover: #EDEBE9; // Fill colour used when user hovers over secondary button
$surface-color-secondary-button-disabled: #EDEBE9; // Fill colour for inactive secondary buttons
$surface-color-secondary-default: #FFFFFF; // Light theme colour for components and layout
$surface-color-secondary-hover: #EDEBE9; // Hover variant of surface.color.secondary.default
$surface-color-secondary-pressed: #E0DEDC; // Selected/pressed variant of surface.color.secondary.default
$surface-color-secondary-disabled: #EDEBE9; // Disabled/inactive variant of surface.color.secondary default
$surface-color-tertiary-button-default: rgba(255,255,255,0); // Default fill colour for tertiary buttons
$surface-color-tertiary-button-hover: #ECEAE8; // Fill colour used when user hovers over tertiary button
$surface-color-tertiary-button-disabled: #EDEBE9; // Fill colour for inactive tertiary buttons
$surface-color-tertiary-default: #FFFFFF00; // Alternative light theme colour for components and layout
$surface-color-tertiary-hover: #ECEAE8; // Hover variant of surface.color.tertiary.default
$surface-color-tertiary-pressed: #E0DEDC; // Selected/pressed variant of surface.color.tertiary.default
$surface-color-tertiary-disabled: #EDEBE9; // Disabled/inactive variant of surface.color.tertiary default
$surface-color-menus-default: #FFFFFF; // Default fill colour for menu items
$surface-color-menus-hover: #EDEBE9; // Fill colour used when user hovers over a menu item
$surface-color-forms-default: #FFFFFF; // Default fill colour for form/input fields
$surface-color-forms-disabled: #EDEBE9; // Fill colour for inactive/disabled form/input fields
$surface-color-background-white: #FFFFFF; // White background
$surface-color-background-light-gray: #FAF9F8; // Default background colour for layout
$surface-color-background-light-blue: #F1F8FE; // Light blue background
$surface-color-background-dark-blue: #053662; // Dark blue background
$surface-color-border-default: #D8D8D8; // Lighter border colour for UI elements
$surface-color-border-medium: #898785; // Default border colour for UI elements
$surface-color-border-dark: #353433; // Used as a hover colour for form fields and inputs
$surface-color-border-active: #2E5DD7; // Used as the active stroke colour for UI elements
$surface-color-overlay-default: rgba(0,0,0,0.45); // Background overlay colour for images and modal dialogues
$support-surface-color-info: #F7F9FC;
$support-surface-color-danger: #F4E1E2; // Background colour for error, failure or danger messages
$support-surface-color-success: #F6FFF8; // Background colour for success messages
$support-surface-color-warning: #FEF1D8; // Background colour for warning messages
$support-border-color-info: #053662; // Border stroke for general/informational messages
$support-border-color-danger: #CE3E39; // Border stroke for error, failure or danger messages
$support-border-color-success: #42814A; // Border stroke for success messages
$support-border-color-warning: #F8BB47; // Border stroke for warning messages
$icons-size-xsmall: 14px; // Smallest icon size
$icons-size-small: 16px;
$icons-size-medium: 20px; // Default icon size
$icons-size-large: 24px;
$icons-size-xlarge: 32px; // Largest icon size
$icons-color-primary: #2D2D2D; // Default colour for icons
$icons-color-secondary: #474543; // Alternative colour for secondary/miscellaneous icons
$icons-color-disabled: #9F9D9C; // Use only for inactive/disabled icons
$icons-color-link: #255A90; // Use for hyperlinked icons
$icons-color-info: #053662; // Emphasis colour for icons in general/informational state
$icons-color-danger: #CE3E39; // Emphasis colour for icons in error, failure or danger state
$icons-color-success: #42814A; // Emphasis colour for icons in success state
$icons-color-warning: #F8BB47; // Emphasis colour for icons in warning state
$icons-color-primary-invert: #FFFFFF; // Default colour for icons on dark backgrounds
$layout-border-width-none: 0;
$layout-border-width-small: 1px;
$layout-border-width-medium: 2px;
$layout-border-width-large: 4px;
$layout-padding-none: 0; // No padding
$layout-padding-hair: 0.125rem; // Smallest padding value for layout
$layout-padding-xsmall: 0.25rem;
$layout-padding-small: 0.5rem;
$layout-padding-medium: 1rem; // Default padding value for layout
$layout-padding-large: 1.5rem;
$layout-padding-xlarge: 2rem; // Largest padding value for layout
$layout-margin-none: 0rem; // No margin
$layout-margin-hair: 0.125rem; // Smallest margin value for layout
$layout-margin-xsmall: 0.25rem;
$layout-margin-small: 0.5rem; // Default margin value for layout
$layout-margin-medium: 1rem;
$layout-margin-large: 1.5rem;
$layout-margin-xlarge: 2rem;
$layout-margin-xxlarge: 2.5rem;
$layout-margin-xxxlarge: 3rem;
$layout-margin-huge: 3.5rem; // Largest margin value for layout
$layout-border-radius-none: 0;
$layout-border-radius-small: 2px;
$layout-border-radius-medium: 4px;
$layout-border-radius-large: 6px;
$layout-border-radius-circular: 9999px; // Used for components with a circular radius
$typography-font-families-bc-sans: 'BC Sans'; // BC Sans font. Requires BC Sans package
$typography-line-heights-xxxdense: 1.125rem; // Smallest line height
$typography-line-heights-xxdense: 1.313rem;
$typography-line-heights-xdense: 1.688rem;
$typography-line-heights-dense: 1.913rem;
$typography-line-heights-regular: 2.125rem; // Default line height
$typography-line-heights-sparse: 2.25rem;
$typography-line-heights-xsparse: 3rem;
$typography-line-heights-xxsparse: 3.375rem; // Largest line height
$typography-line-heights-auto: AUTO; // System token, used to generate type styles
$typography-font-weights-regular: 400; // System token, used to generate text styles
$typography-font-weights-bold: 700; // System token, used to generate text styles
$typography-font-weights-italic-weight: 400; // System token, used to generate text styles
$typography-font-weights-italic-style: italic; // System token, used to generate text styles
$typography-font-size-label: 0.75rem;
$typography-font-size-small-body: 0.875rem;
$typography-font-size-body: 1rem;
$typography-font-size-large-body: 1.125rem;
$typography-font-size-h5: 1.25rem;
$typography-font-size-h4: 1.5rem;
$typography-font-size-h3: 1.75rem;
$typography-font-size-h2: 2rem;
$typography-font-size-h1: 2.25rem;
$typography-font-size-display: 3rem;
$typography-letter-spacing-0: 0%; // System token, used to generate type styles
$typography-paragraph-spacing-0: 0; // System token, used to generate type styles
$typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; // Labels and captions
$typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; // Smaller body text
$typography-regular-body: 400 1rem/1.688rem 'BC Sans'; // Default body text
$typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans'; // Larger body text
$typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans'; // Alternate (unbolded) style for Heading 6
$typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans'; // Alternate (unbolded) style for Heading 5
$typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; // Alternate (unbolded) style for Heading 4
$typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; // Alternate (unbolded) style for Heading 3
$typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; // Alternate (unbolded) style for Heading 2
$typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; // Alternate (unbolded) style for Heading 1
$typography-regular-display: 400 3rem/AUTO 'BC Sans'; // Extra-large body text size. Do not use for headings
$typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; // Labels and captions (bolded)
$typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; // Default for small body text (bolded)
$typography-bold-body: 700 1rem/1.688rem 'BC Sans'; // Default for body text (bolded)
$typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans'; // Larger text size for body text (bolded)
$typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H6
$typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H5
$typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H4
$typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H3
$typography-bold-h2: 700 2rem/3rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H2
$typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; // Default style for Heading 6. Includes all sizing/spacing values for H1
$typography-bold-display: 700 3rem/AUTO 'BC Sans'; // Extra-large font size (bolded). Do not use for headings
$typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; // Labels and captions (italic)
$typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; // Small body text (italic)
$typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; // Default for body text (italic)
$typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; // Larger text size for body text (italic)
$typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; // Alternate (italic) style for Heading 6
$typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; // Alternate (italic) style for Heading 5
$typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; // Alternate (italic) style for Heading 4
$typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; // Alternate (italic) style for Heading 3
$typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; // Alternate (italic) style for Heading 2
$typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; // Alternate (italic) style for Heading 1
$typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; // Extra-large font size (italic). Do not use for headings
$typography-text-case-none: none;
$typography-text-decoration-none: none; // System token, used to generate type styles
$typography-paragraph-indent-0: 0px; // System token, used to generate type styles
$typography-color-primary: #2D2D2D; // Default colour for all body text and headings
$typography-color-secondary: #474543; // Alternative colour for secondary/miscellaneous text
$typography-color-placeholder: #9F9D9C; // Use for placeholder text in forms
$typography-color-disabled: #9F9D9C; // Use only for text in inactive user interface elements
$typography-color-link: #255A90; // Use for hyperlinks in body text and headings
$typography-color-danger: #CE3E39; // Use for error, failure or danger message text
$typography-color-primary-invert: #FFFFFF; // Default colour for text on dark backgrounds
$typography-color-secondary-invert: #ECEAE8; // Secondary colour for text on dark backgrounds
$theme-gold-10: #FEF8E8; // Gold scale — lightest
$theme-gold-20: #FEF0D8; // Gold scale
$theme-gold-30: #FDE9C4; // Gold scale
$theme-gold-40: #FCE2B0; // Gold scale
$theme-gold-50: #FBDA9D; // Gold scale
$theme-gold-60: #FBD389; // Gold scale
$theme-gold-70: #FACC75; // Gold scale
$theme-gold-80: #F9C462; // Gold scale
$theme-gold-90: #F8BA47; // Gold scale
$theme-gold-100: #FCBA19; // Gold scale — darkest
$theme-blue-10: #F1F8FE; // Blue scale — lightest
$theme-blue-20: #D8EAFD; // Blue scale
$theme-blue-30: #C1DDFC; // Blue scale
$theme-blue-40: #A8D0FB; // Blue scale
$theme-blue-50: #91C4FA; // Blue scale
$theme-blue-60: #7AB8F9; // Blue scale
$theme-blue-70: #5595D9; // Blue scale
$theme-blue-80: #3470B1; // Blue scale
$theme-blue-90: #1E5189; // Blue scale
$theme-blue-100: #013366; // Blue scale — darkest
$theme-gray-10: #FAF9F8; // Greyscale — lightest
$theme-gray-20: #F3F2F1; // Greyscale
$theme-gray-30: #ECEAE8; // Greyscale
$theme-gray-40: #E0DEDC; // Greyscale
$theme-gray-50: #D1CFCD; // Greyscale
$theme-gray-60: #C6C5C3; // Greyscale
$theme-gray-70: #9F9D9C; // Greyscale
$theme-gray-80: #605E5C; // Greyscale
$theme-gray-90: #3D3C3B; // Greyscale
$theme-gray-100: #353433; // Greyscale
$theme-gray-110: #252423; // Greyscale — darkest
$theme-gray-white: #FFFFFF; // White
$theme-primary-blue: #013366; // Primary Blue (Blue 100)
$theme-primary-gold: #FCBA19; // Primary Gold (Gold 100)

$bcds: (
  'surface': (
    'opacity': (
      '0': $surface-opacity-0,
      '10': $surface-opacity-10,
      '20': $surface-opacity-20,
      '30': $surface-opacity-30,
      '40': $surface-opacity-40,
      '50': $surface-opacity-50,
      '60': $surface-opacity-60,
      '70': $surface-opacity-70,
      '80': $surface-opacity-80,
      '90': $surface-opacity-90,
      '100': $surface-opacity-100
    ),
    'shadow': (
      'none': $surface-shadow-none,
      'small': $surface-shadow-small,
      'medium': $surface-shadow-medium,
      'large': $surface-shadow-large
    ),
    'color': (
      'primary': (
        'button': (
          'default': $surface-color-primary-button-default,
          'hover': $surface-color-primary-button-hover,
          'disabled': $surface-color-primary-button-disabled
        ),
        'dangerButton': (
          'default': $surface-color-primary-danger-button-default,
          'hover': $surface-color-primary-danger-button-hover,
          'disabled': $surface-color-primary-danger-button-disabled
        ),
        'default': $surface-color-primary-default,
        'hover': $surface-color-primary-hover,
        'pressed': $surface-color-primary-pressed,
        'disabled': $surface-color-primary-disabled
      ),
      'secondary': (
        'button': (
          'default': $surface-color-secondary-button-default,
          'hover': $surface-color-secondary-button-hover,
          'disabled': $surface-color-secondary-button-disabled
        ),
        'default': $surface-color-secondary-default,
        'hover': $surface-color-secondary-hover,
        'pressed': $surface-color-secondary-pressed,
        'disabled': $surface-color-secondary-disabled
      ),
      'tertiary': (
        'button': (
          'default': $surface-color-tertiary-button-default,
          'hover': $surface-color-tertiary-button-hover,
          'disabled': $surface-color-tertiary-button-disabled
        ),
        'default': $surface-color-tertiary-default,
        'hover': $surface-color-tertiary-hover,
        'pressed': $surface-color-tertiary-pressed,
        'disabled': $surface-color-tertiary-disabled
      ),
      'menus': (
        'default': $surface-color-menus-default,
        'hover': $surface-color-menus-hover
      ),
      'forms': (
        'default': $surface-color-forms-default,
        'disabled': $surface-color-forms-disabled
      ),
      'background': (
        'white': $surface-color-background-white,
        'lightGray': $surface-color-background-light-gray,
        'lightBlue': $surface-color-background-light-blue,
        'darkBlue': $surface-color-background-dark-blue
      ),
      'border': (
        'default': $surface-color-border-default,
        'medium': $surface-color-border-medium,
        'dark': $surface-color-border-dark,
        'active': $surface-color-border-active
      ),
      'overlay': (
        'default': $surface-color-overlay-default
      )
    )
  ),
  'support': (
    'surfaceColor': (
      'info': $support-surface-color-info,
      'danger': $support-surface-color-danger,
      'success': $support-surface-color-success,
      'warning': $support-surface-color-warning
    ),
    'borderColor': (
      'info': $support-border-color-info,
      'danger': $support-border-color-danger,
      'success': $support-border-color-success,
      'warning': $support-border-color-warning
    )
  ),
  'icons': (
    'size': (
      'xsmall': $icons-size-xsmall,
      'small': $icons-size-small,
      'medium': $icons-size-medium,
      'large': $icons-size-large,
      'xlarge': $icons-size-xlarge
    ),
    'color': (
      'primary': $icons-color-primary,
      'secondary': $icons-color-secondary,
      'disabled': $icons-color-disabled,
      'link': $icons-color-link,
      'info': $icons-color-info,
      'danger': $icons-color-danger,
      'success': $icons-color-success,
      'warning': $icons-color-warning,
      'primaryInvert': $icons-color-primary-invert
    )
  ),
  'layout': (
    'borderWidth': (
      'none': $layout-border-width-none,
      'small': $layout-border-width-small,
      'medium': $layout-border-width-medium,
      'large': $layout-border-width-large
    ),
    'padding': (
      'none': $layout-padding-none,
      'hair': $layout-padding-hair,
      'xsmall': $layout-padding-xsmall,
      'small': $layout-padding-small,
      'medium': $layout-padding-medium,
      'large': $layout-padding-large,
      'xlarge': $layout-padding-xlarge
    ),
    'margin': (
      'none': $layout-margin-none,
      'hair': $layout-margin-hair,
      'xsmall': $layout-margin-xsmall,
      'small': $layout-margin-small,
      'medium': $layout-margin-medium,
      'large': $layout-margin-large,
      'xlarge': $layout-margin-xlarge,
      'xxlarge': $layout-margin-xxlarge,
      'xxxlarge': $layout-margin-xxxlarge,
      'huge': $layout-margin-huge
    ),
    'borderRadius': (
      'none': $layout-border-radius-none,
      'small': $layout-border-radius-small,
      'medium': $layout-border-radius-medium,
      'large': $layout-border-radius-large,
      'circular': $layout-border-radius-circular
    )
  ),
  'typography': (
    'fontFamilies': (
      'bc-sans': $typography-font-families-bc-sans
    ),
    'lineHeights': (
      'xxxdense': $typography-line-heights-xxxdense,
      'xxdense': $typography-line-heights-xxdense,
      'xdense': $typography-line-heights-xdense,
      'dense': $typography-line-heights-dense,
      'regular': $typography-line-heights-regular,
      'sparse': $typography-line-heights-sparse,
      'xsparse': $typography-line-heights-xsparse,
      'xxsparse': $typography-line-heights-xxsparse,
      'auto': $typography-line-heights-auto
    ),
    'fontWeights': (
      'regular': $typography-font-weights-regular,
      'bold': $typography-font-weights-bold,
      'italic': (
        'weight': $typography-font-weights-italic-weight,
        'style': $typography-font-weights-italic-style
      )
    ),
    'fontSize': (
      'label': $typography-font-size-label,
      'smallBody': $typography-font-size-small-body,
      'body': $typography-font-size-body,
      'largeBody': $typography-font-size-large-body,
      'H5': $typography-font-size-h5,
      'H4': $typography-font-size-h4,
      'H3': $typography-font-size-h3,
      'H2': $typography-font-size-h2,
      'H1': $typography-font-size-h1,
      'display': $typography-font-size-display
    ),
    'letterSpacing': (
      '0': $typography-letter-spacing-0
    ),
    'paragraphSpacing': (
      '0': $typography-paragraph-spacing-0
    ),
    'regular': (
      'label': $typography-regular-label,
      'smallBody': $typography-regular-small-body,
      'body': $typography-regular-body,
      'largeBody': $typography-regular-large-body,
      'H6': $typography-regular-h6,
      'H5': $typography-regular-h5,
      'H4': $typography-regular-h4,
      'H3': $typography-regular-h3,
      'H2': $typography-regular-h2,
      'H1': $typography-regular-h1,
      'display': $typography-regular-display
    ),
    'bold': (
      'label': $typography-bold-label,
      'smallBody': $typography-bold-small-body,
      'body': $typography-bold-body,
      'largeBody': $typography-bold-large-body,
      'H6': $typography-bold-h6,
      'H5': $typography-bold-h5,
      'H4': $typography-bold-h4,
      'H3': $typography-bold-h3,
      'H2': $typography-bold-h2,
      'H1': $typography-bold-h1,
      'display': $typography-bold-display
    ),
    'italic': (
      'label': $typography-italic-label,
      'smallBody': $typography-italic-small-body,
      'body': $typography-italic-body,
      'largeBody': $typography-italic-large-body,
      'H6': $typography-italic-h6,
      'H5': $typography-italic-h5,
      'H4': $typography-italic-h4,
      'H3': $typography-italic-h3,
      'H2': $typography-italic-h2,
      'H1': $typography-italic-h1,
      'display': $typography-italic-display
    ),
    'textCase': (
      'none': $typography-text-case-none
    ),
    'textDecoration': (
      'none': $typography-text-decoration-none
    ),
    'paragraphIndent': (
      '0': $typography-paragraph-indent-0
    ),
    'color': (
      'primary': $typography-color-primary,
      'secondary': $typography-color-secondary,
      'placeholder': $typography-color-placeholder,
      'disabled': $typography-color-disabled,
      'link': $typography-color-link,
      'danger': $typography-color-danger,
      'primaryInvert': $typography-color-primary-invert,
      'secondaryInvert': $typography-color-secondary-invert
    )
  ),
  'theme': (
    'gold': (
      '10': $theme-gold-10,
      '20': $theme-gold-20,
      '30': $theme-gold-30,
      '40': $theme-gold-40,
      '50': $theme-gold-50,
      '60': $theme-gold-60,
      '70': $theme-gold-70,
      '80': $theme-gold-80,
      '90': $theme-gold-90,
      '100': $theme-gold-100
    ),
    'blue': (
      '10': $theme-blue-10,
      '20': $theme-blue-20,
      '30': $theme-blue-30,
      '40': $theme-blue-40,
      '50': $theme-blue-50,
      '60': $theme-blue-60,
      '70': $theme-blue-70,
      '80': $theme-blue-80,
      '90': $theme-blue-90,
      '100': $theme-blue-100
    ),
    'gray': (
      '10': $theme-gray-10,
      '20': $theme-gray-20,
      '30': $theme-gray-30,
      '40': $theme-gray-40,
      '50': $theme-gray-50,
      '60': $theme-gray-60,
      '70': $theme-gray-70,
      '80': $theme-gray-80,
      '90': $theme-gray-90,
      '100': $theme-gray-100,
      '110': $theme-gray-110,
      'white': $theme-gray-white
    ),
    'primaryBlue': $theme-primary-blue,
    'primaryGold': $theme-primary-gold
  )
);