Background

//// Functional colors
$functional-green:  $ods-forest-200;
$functional-blue:   $ods-water-200;
$functional-yellow: $ods-sun-100;
$functional-red:    $ods-fire-200;
//// Supporting colors
$supporting-blue:   $ods-blue-300;
$supporting-yellow: $ods-yellow-300;
$supporting-green:  $ods-green-300;
$supporting-purple: $ods-purple-300;
$supporting-pink:   $ods-pink-300;
$supporting-orange: $ods-orange-100;

$functional-green-dark:  $ods-forest-100;
$functional-blue-dark:   $ods-water-100;
$functional-yellow-dark: $functional-yellow;
$functional-red-dark:    $ods-fire-100;

$blue:    $functional-blue;
$indigo:  $supporting-purple;
$purple:  $supporting-purple;
$pink:    $supporting-pink;
$red:     $functional-red;
$orange:  $ods-orange-200;
$yellow:  $functional-yellow;
$green:   $functional-green;
$teal:    $supporting-green;
$cyan:    $supporting-blue;

$primary:       $orange;
$secondary:     $black;
$success:       $green;
$info:          $blue;
$warning:       $yellow;
$danger:        $red;
$light:         $gray-500;
$dark:          $black;

$primary-dark:    $supporting-orange;
$secondary-dark:  $white;
$success-dark:    $functional-green-dark;
$info-dark:       $functional-blue-dark;
$warning-dark:    $functional-yellow-dark;
$danger-dark:     $functional-red-dark;
$light-dark:      $gray-500;
$dark-dark:       $black;

$white:    $ods-white-100;
$gray-100: #fafafa;
$gray-200: #f6f6f6;
$gray-300: $ods-gray-200;
$gray-400: $ods-gray-300;
$gray-500: $ods-gray-400;
$gray-600: $ods-gray-500;
$gray-700: $ods-gray-600;
$gray-800: $ods-gray-700;
$gray-900: $ods-gray-800;
$gray-950: $ods-gray-900;
$black:    $ods-black-900;

$primary-bg-subtle:       $primary; // Boosted mod: instead of `tint-color($primary, 80%)`
$secondary-bg-subtle:     $secondary; // Boosted mod: instead of `tint-color($secondary, 80%)`
$success-bg-subtle:       $success; // Boosted mod: instead of `tint-color($success, 80%)`
$info-bg-subtle:          $info; // Boosted mod: instead of `tint-color($info, 80%)`
$warning-bg-subtle:       $warning; // Boosted mod: instead of `tint-color($warning, 80%)`
$danger-bg-subtle:        $danger; // Boosted mod: instead of `tint-color($danger, 80%)`
$light-bg-subtle:         $light; // Boosted mod: instead of `mix($gray-100, $white)`
$dark-bg-subtle:          $dark; // Boosted mod: instead of `$gray-400`

$primary-bg-subtle-dark:            $primary-dark; // Boosted mod: instead of `shade-color($primary, 80%)`
$secondary-bg-subtle-dark:          $secondary-dark; // Boosted mod: instead of `shade-color($secondary, 80%)`
$success-bg-subtle-dark:            $success-dark; // Boosted mod: instead of `shade-color($success, 80%)`
$info-bg-subtle-dark:               $info-dark; // Boosted mod: instead of `shade-color($info, 80%)`
$warning-bg-subtle-dark:            $warning-dark; // Boosted mod: instead of `shade-color($warning, 80%)`
$danger-bg-subtle-dark:             $danger-dark; // Boosted mod: instead of `shade-color($danger, 80%)`
$light-bg-subtle-dark:              $light-dark; // Boosted mod: instead of `$gray-800`
$dark-bg-subtle-dark:               $dark-dark; // Boosted mod: instead of `mix($gray-800, $black)`

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

$theme-colors-dark: (
  "primary": $primary-dark,
  "secondary": $secondary-dark,
  "success": $success-dark,
  "info": $info-dark,
  "warning": $warning-dark,
  "danger": $danger-dark,
  "light": $light-dark,
  "dark": $dark-dark,
);

$grays: (
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900,
  "950": $gray-950,
);

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

$theme-colors-rgb-dark: map-loop($theme-colors-dark, to-rgb, "$value");

$utilities-bg: map-merge(
  $utilities-colors,
  (
    "black": to-rgb($black),
    "white": to-rgb($white),
    "body": to-rgb($body-bg)
  )
);
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg");

$utilities-bg-subtle: (
  "primary-subtle": var(--#{$prefix}primary-bg-subtle),
  "secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
  "success-subtle": var(--#{$prefix}success-bg-subtle),
  "info-subtle": var(--#{$prefix}info-bg-subtle),
  "warning-subtle": var(--#{$prefix}warning-bg-subtle),
  "danger-subtle": var(--#{$prefix}danger-bg-subtle),
  "light-subtle": var(--#{$prefix}light-bg-subtle),
  "dark-subtle": var(--#{$prefix}dark-bg-subtle)
);

$theme-colors-bg-subtle: (
  "primary": $primary-bg-subtle,
  "secondary": $secondary-bg-subtle,
  "success": $success-bg-subtle,
  "info": $info-bg-subtle,
  "warning": $warning-bg-subtle,
  "danger": $danger-bg-subtle,
  "light": $light-bg-subtle,
  "dark": $dark-bg-subtle,
);

$theme-colors-bg-subtle-dark: (
  "primary": $primary-bg-subtle-dark,
  "secondary": $secondary-bg-subtle-dark,
  "success": $success-bg-subtle-dark,
  "info": $info-bg-subtle-dark,
  "warning": $warning-bg-subtle-dark,
  "danger": $danger-bg-subtle-dark,
  "light": $light-bg-subtle-dark,
  "dark": $dark-bg-subtle-dark,
);

@mixin gradient-bg($color: null) {
  background-color: $color;

  @if $enable-gradients {
    background-image: var(--#{$prefix}gradient);
  }
}

"background-color": (
  property: background-color,
  class: bg,
  local-vars: (
    "bg-opacity": 1
  ),
  values: map-merge(
    $utilities-bg-colors,
    (
      "transparent": transparent,
      "body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
      "body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
      "supporting-green": $supporting-green, // Boosted mod
      "supporting-blue": $supporting-blue, // Boosted mod
      "supporting-yellow": $supporting-yellow, // Boosted mod
      "supporting-pink": $supporting-pink, // Boosted mod
      "supporting-purple": $supporting-purple, // Boosted mod
      "supporting-orange": $supporting-orange, // Boosted mod
    )
  )
),
"bg-opacity": (
  css-var: true,
  class: bg-opacity,
  values: (
    10: .1,
    25: .25,
    50: .5,
    75: .75,
    100: 1
  )
),
"subtle-background-color": (
  property: background-color,
  class: bg,
  values: $utilities-bg-subtle
),