.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: tint(@blue2, 0%); background: @v;}
.bg-tint-10 { @v: tint(@blue2, 10%); background: @v;}
.bg-tint-20 { @v: tint(@blue2, 20%); background: @v;}
.bg-tint-30 { @v: tint(@blue2, 30%); background: @v;}
.bg-tint-40 { @v: tint(@blue2, 40%); background: @v;}
.bg-tint-50 { @v: tint(@blue2, 50%); background: @v;}
.bg-tint-60 { @v: tint(@blue2, 60%); background: @v;}
.bg-tint-70 { @v: tint(@blue2, 70%); background: @v;}
.bg-tint-80 { @v: tint(@blue2, 80%); background: @v;}
.bg-tint-90 { @v: tint(@blue2, 90%); background: @v;}
.bg-tint-100 { @v: tint(@blue2, 100%); background: @v;}

.bg-shade-0 { @v: shade(@blue2, 0%); background: @v;}
.bg-shade-10 { @v: shade(@blue2, 10%); background: @v;}
.bg-shade-20 { @v: shade(@blue2, 20%); background: @v;}
.bg-shade-30 { @v: shade(@blue2, 30%); background: @v;}
.bg-shade-40 { @v: shade(@blue2, 40%); background: @v;}
.bg-shade-50 { @v: shade(@blue2, 50%); background: @v;}
.bg-shade-60 { @v: shade(@blue2, 60%); background: @v;}
.bg-shade-70 { @v: shade(@blue2, 70%); background: @v;}
.bg-shade-80 { @v: shade(@blue2, 80%); background: @v;}
.bg-shade-90 { @v: shade(@blue2, 90%); background: @v;}
.bg-shade-100 { @v: shade(@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}"; } }