.bg-orange1 {background: $orange1}
.bg-orange2 {background: $orange2}
.bg-orange3 {background: $orange3}
.bg-orange4 {background: $orange4}

.bg-green1 {background: $green1}
.bg-green2 {background: $green2}
.bg-green3 {background: $green3}
.bg-green4 {background: $green4}

.bg-blue1 {background: $blue1}
.bg-blue2 {background: $blue2}
.bg-blue3 {background: $blue3}
.bg-blue4 {background: $blue4}
.bg-blue5 {background: $blue5}

.bg-purple1 {background: $purple1}
.bg-purple2 {background: $purple2}

.bg-tint-0 { $v: mix(#ffffff, $blue2, 0%); background: $v;}
.bg-tint-10 { $v: mix(#ffffff, $blue2, 10%); background: $v;}
.bg-tint-20 { $v: mix(#ffffff, $blue2, 20%); background: $v;}
.bg-tint-30 { $v: mix(#ffffff, $blue2, 30%); background: $v;}
.bg-tint-40 { $v: mix(#ffffff, $blue2, 40%); background: $v;}
.bg-tint-50 { $v: mix(#ffffff, $blue2, 50%); background: $v;}
.bg-tint-60 { $v: mix(#ffffff, $blue2, 60%); background: $v;}
.bg-tint-70 { $v: mix(#ffffff, $blue2, 70%); background: $v;}
.bg-tint-80 { $v: mix(#ffffff, $blue2, 80%); background: $v;}
.bg-tint-90 { $v: mix(#ffffff, $blue2, 90%); background: $v;}
.bg-tint-100 { $v: mix(#ffffff, $blue2, 100%); background: $v;}

.bg-shade-0 { $v: mix(#000000, $blue2, 0%); background: $v;}
.bg-shade-10 { $v: mix(#000000, $blue2, 10%); background: $v;}
.bg-shade-20 { $v: mix(#000000, $blue2, 20%); background: $v;}
.bg-shade-30 { $v: mix(#000000, $blue2, 30%); background: $v;}
.bg-shade-40 { $v: mix(#000000, $blue2, 40%); background: $v;}
.bg-shade-50 { $v: mix(#000000, $blue2, 50%); background: $v;}
.bg-shade-60 { $v: mix(#000000, $blue2, 60%); background: $v;}
.bg-shade-70 { $v: mix(#000000, $blue2, 70%); background: $v;}
.bg-shade-80 { $v: mix(#000000, $blue2, 80%); background: $v;}
.bg-shade-90 { $v: mix(#000000, $blue2, 90%); background: $v;}
.bg-shade-100 { $v: mix(#000000, $blue2, 100%); background: $v;}

.bg-baseFontColor { background-color: $baseFontColor; .tooltip-content:before { content: "#{$baseFontColor}"; } }
.bg-pageBg { background: $pageBg; .tooltip-content:before { content: "#{$pageBg}"; } }
.bg-linkColor{ background: $linkColor; .tooltip-content:before { content: "#{$linkColor}"; } }
.bg-linkColorHover { background: $linkColorHover; .tooltip-content:before { content: "#{$linkColorHover}"; } }
.bg-overlayBorder { background: $overlayBorder; .tooltip-content:before { content: "#{$overlayBorder}"; } }

// Grayscale

.bg-black { background: $black; .tooltip-content:before { content: "#{$black}"; } }
.bg-grayDark { background: $grayDark; .tooltip-content:before { content: "#{$grayDark}"; } }
.bg-gray { background: $gray; .tooltip-content:before { content: "#{$gray}"; } }
.bg-grayLight { background: $grayLight; .tooltip-content:before { content: "#{$grayLight}"; } }
.bg-grayLighter { background: $grayLighter; .tooltip-content:before { content: "#{$grayLighter}"; } }
.bg-white { background: $white; .tooltip-content:before { content: "#{$white}"; } }

// Colors

.bg-green { background: $green; .tooltip-content:before { content: "#{$green}"; } }
.bg-yellow { background: $yellow; .tooltip-content:before { content: "#{$yellow}"; } }
.bg-orange { background: $orange; .tooltip-content:before { content: "#{$orange}"; } }
.bg-blue-soft { background: $blueSoft; .tooltip-content:before { content: "#{$blueSoft}"; } }
.bg-blue-bright { background: $blueBright; .tooltip-content:before { content: "#{$blueBright}"; } }

.bg-borderColor { background: $borderColor; .tooltip-content:before { content: "#{$borderColor}"; } }
.bg-panelBackground { background: $panelBackground; .tooltip-content:before { content: "#{$panelBackground}"; } }
.bg-panelBorder { background: $panelBorder; .tooltip-content:before { content: "#{$panelBorder}"; } }
.bg-panelBorderDarker { background: $panelBorderDarker; .tooltip-content:before { content: "#{$panelBorderDarker}"; } }

.bg-highlightColor { background: $highlightColor; .tooltip-content:before { content: "#{$highlightColor}"; } }
.bg-errorText { background: $errorText; .tooltip-content:before { content: "#{$errorText}"; } }
.bg-premiumColor { background: $premiumColor; .tooltip-content:before { content: "#{$premiumColor}"; } }