_colors.scss

// ┌────────┐
// │ Colors │
// └────────┘
// Subset of Calcite colors for easy styling of navbar 
// Core colors have opacity ranges .25, .50, .75 and 1

// Custom 

.calcite-bgcolor-custom {
  background-color: inherit;
}

// Transparent

.calcite-bgcolor-transparent {
  background-color: rgba($Calcite_True_Black, 0) !important;
}

// Theme base

.calcite-bgcolor-light {
  background-color: $Calcite_True_White !important;
}

.calcite-bgcolor-dark {
  background-color: $Calcite_Gray_300_Dark !important;
}

// White

.calcite-bgcolor-true-white {
  background-color: $Calcite_True_White !important;
}
.calcite-bgcolor-off-white {
  background-color: $Calcite_Gray_100 !important;
}
.calcite-bgcolor-white {
  background-color: $Calcite_Gray_050 !important;
}
.calcite-bgcolor-white-25 {
  background-color: rgba($Calcite_Gray_050, .25) !important;
}
.calcite-bgcolor-white-50 {
  background-color: rgba($Calcite_Gray_050, .5) !important;
}
.calcite-bgcolor-white-75 {
  background-color: rgba($Calcite_Gray_050, .75) !important;
}

// Gray

.calcite-bgcolor-lightest-grey {
  background-color: $Calcite_Gray_200 !important;
}
.calcite-bgcolor-lighter-grey {
  background-color: $Calcite_Gray_350 !important;
}
.calcite-bgcolor-light-grey {
  background-color: $Calcite_Gray_400 !important;
}
.calcite-bgcolor-grey {
  background-color: $Calcite_Gray_450 !important;
}
.calcite-bgcolor-grey-25 {
  background-color: rgba($Calcite_Gray_450, .25) !important;
}
.calcite-bgcolor-grey-50 {
  background-color: rgba($Calcite_Gray_450, .5) !important;
}
.calcite-bgcolor-grey-75 {
  background-color: rgba($Calcite_Gray_450, .75) !important;
}
.calcite-bgcolor-dark-grey {
  background-color: $Calcite_Gray_500 !important;
}
.calcite-bgcolor-darker-grey {
  background-color: $Calcite_Gray_550 !important;
}
.calcite-bgcolor-darkest-grey {
  background-color: $Calcite_Gray_600 !important;
}

// Black

.calcite-bgcolor-true-black {
  background-color: $Calcite_True_Black !important;
}  
.calcite-bgcolor-off-black {
  background-color: $Calcite_Gray_650 !important;
}
.calcite-bgcolor-black {
  background-color: $Calcite_Gray_700 !important;
}
.calcite-bgcolor-black-25 {
  background-color: rgba($Calcite_True_Black, .25) !important;
}
.calcite-bgcolor-black-50 {
  background-color: rgba($Calcite_True_Black, .5) !important;
}
.calcite-bgcolor-black-75 {
  background-color: rgba($Calcite_True_Black, .75) !important;
}

// Blue

.calcite-bgcolor-light-blue {
  background-color: $Calcite_Blue_100 !important;
}
.calcite-bgcolor-blue {
  background-color: $Calcite_Blue_250 !important;
}
.calcite-bgcolor-blue-25 {
  background-color: rgba($Calcite_Blue_250, .25) !important;
}
.calcite-bgcolor-blue-50 {
  background-color: rgba($Calcite_Blue_250, .5) !important;
}
.calcite-bgcolor-blue-75 {
  background-color: rgba($Calcite_Blue_250, .75) !important;
}
.calcite-bgcolor-dark-blue {
  background-color: $Calcite_Blue_a250 !important;
}

// Green

.calcite-bgcolor-light-green {
  background-color: $Calcite_Green_100 !important;
}
.calcite-bgcolor-green {
  background-color: $Calcite_Green_250 !important;
}
.calcite-bgcolor-green-25 {
  background-color: rgba($Calcite_Green_250, .25) !important;
}
.calcite-bgcolor-green-50 {
  background-color: rgba($Calcite_Green_250, .5) !important;
}
.calcite-bgcolor-green-75 {
  background-color: rgba($Calcite_Green_250, .75) !important;
}
.calcite-bgcolor-dark-green {
  background-color: $Calcite_Green_a250 !important;
}

// Red

.calcite-bgcolor-light-red {
  background-color: $Calcite_Red_150 !important;
}
.calcite-bgcolor-red {
  background-color: $Calcite_Red_250 !important;
}
.calcite-bgcolor-red-25 {
  background-color: rgba($Calcite_Red_250, .25) !important;
}
.calcite-bgcolor-red-50 {
  background-color: rgba($Calcite_Red_250, .5) !important;
}
.calcite-bgcolor-red-75 {
  background-color: rgba($Calcite_Red_250, .75) !important;
}
.calcite-bgcolor-dark-red {
  background-color: $Calcite_Red_a250 !important;
}

// Orange

.calcite-bgcolor-light-orange {
  background-color: $Calcite_Orange_150 !important;
}
.calcite-bgcolor-orange {
  background-color: $Calcite_Orange_a200 !important;
}
.calcite-bgcolor-orange-25 {
  background-color: rgba($Calcite_Orange_a200, .25) !important;
}
.calcite-bgcolor-orange-50 {
  background-color: rgba($Calcite_Orange_a200, .5) !important;
}
.calcite-bgcolor-orange-75 {
  background-color: rgba($Calcite_Orange_a200, .75) !important;
}
.calcite-bgcolor-dark-orange {
  background-color: $Calcite_Orange_a150 !important;
}

// Yellow

.calcite-bgcolor-light-yellow {
  background-color: $Calcite_Yellow_150 !important;
}
.calcite-bgcolor-yellow {
  background-color: $Calcite_Yellow_200 !important;
}
.calcite-bgcolor-yellow-25 {
  background-color: rgba($Calcite_Yellow_200, .25) !important;
}
.calcite-bgcolor-yellow-50 {
  background-color: rgba($Calcite_Yellow_200, .5) !important;
}
.calcite-bgcolor-yellow-75 {
  background-color: rgba($Calcite_Yellow_200, .75) !important;
}
.calcite-bgcolor-dark-yellow {
  background-color: $Calcite_Yellow_a150 !important;
}

// Purple

.calcite-bgcolor-light-purple {
  background-color: $Calcite_Purple_150 !important;
}
.calcite-bgcolor-purple {
  background-color: $Calcite_Purple_200 !important;
}
.calcite-bgcolor-purple-25 {
  background-color: rgba($Calcite_Purple_200, .25) !important;
}
.calcite-bgcolor-purple-50 {
  background-color: rgba($Calcite_Purple_200, .5) !important;
}
.calcite-bgcolor-purple-75 {
  background-color: rgba($Calcite_Purple_200, .75) !important;
}
.calcite-bgcolor-dark-purple {
  background-color: $Calcite_Purple_a150 !important;
}

// Brown

.calcite-bgcolor-light-brown {
  background-color: $Calcite_Brown_150 !important;
}
.calcite-bgcolor-brown {
  background-color: $Calcite_Brown_250 !important;
}
.calcite-bgcolor-brown-25 {
  background-color: rgba($Calcite_Brown_250, .25) !important;
}
.calcite-bgcolor-brown-50 {
  background-color: rgba($Calcite_Brown_250, .5) !important;
}
.calcite-bgcolor-brown-75 {
  background-color: rgba($Calcite_Brown_250, .75) !important;
}
.calcite-bgcolor-dark-brown {
  background-color: $Calcite_Brown_a200 !important;
}