Backgrounds

Background utilities use the color-scheme surface colors, and the theme and primary colors if each is also enabled. Disabled by default, enable with $enable-backgrounds: true; in the _configuration.scss document.

Default color-schemes (anchor)

The basic background utilities use the color-scheme surfaces colors.

.surf-1

.surf-2

.surf-3

.surf-4

Example HTML

<div class="surf-1 p-2">.surf-1</div>
<div class="surf-2 p-2">.surf-2</div>
<div class="surf-3 p-2">.surf-3</div>
<div class="surf-4 p-2">.surf-4</div>

Colors (anchor)

The theme and primary color background utilities are only included if each is also enabled in the configuration.scss document. These modifiers also include color property values for text to pass contrast-ratio testing, and if the icon utilities are enabled a variable is also added so the icons inherit the text values to display correctly.

With $enable-theme-colors: true;

.surf-1-light

.surf-2-light

.surf-3-light

.surf-4-light

.surf-1-dark

.surf-2-dark

.surf-3-dark

.surf-4-dark

Example HTML

<div class="surf-1-light p-2">.surf-1-light</div>
<div class="surf-2-light p-2">.surf-2-light</div>
<div class="surf-3-light p-2">.surf-3-light</div>
<div class="surf-4-light p-2 mb-3">.surf-4-light</div>
<div class="surf-1-dark p-2">.surf-1-dark</div>
<div class="surf-2-dark p-2">.surf-2-dark</div>
<div class="surf-3-dark p-2">.surf-3-dark</div>
<div class="surf-4-dark p-2">.surf-4-dark</div>

With $enable-primary-colors: true;

.bg-blue

.bg-red

.bg-green

.bg-orange

.bg-cyan

Example HTML

<div class="bg-blue p-2">.bg-blue</div>
<div class="bg-red p-2">.bg-red</div>
<div class="bg-green p-2">.bg-green</div>
<div class="bg-orange p-2">.bg-orange</div>
<div class="bg-cyan p-2">.bg-cyan</div>

Customize (anchor)

The background utilities are compiled from the _backgrounds.scss document within the [styles/utilities] directory. The Sass @if rules control compiling depending on settings in the configuration.scss document.

Styles

@mixin background-props {
  @if $enable-icon-mixins or $enable-icon-styles {
    --ico: var(--bg-txt);
  }
  color: var(--bg-txt);
  background-color: var(--bg);
}

@if $enable-backgrounds {

@if $enable-theme-colors and $enable-primary-colors {
  :where(.surf-1-light, .surf-2-light, .surf-3-light, .surf-4-light, .surf-1-dark, .surf-2-dark, .surf-3-dark, .surf-4-dark, .bg-blue, .bg-red, .bg-green, .bg-orange, .bg-cyan) {
    @include background-props;
  }
}
@else {
  @if $enable-primary-colors {
    :where(.bg-blue, .bg-red, .bg-green, .bg-orange, .bg-cyan) {
      @include background-props;
    }
  }
  @if $enable-theme-colors {
    :where(.surf-1-light, .surf-2-light, .surf-3-light, .surf-4-light, .surf-1-dark, .surf-2-dark, .surf-3-dark, .surf-4-dark) {
      @include background-props;
    }
  }
}

.bg-body {
  background-color: var(--body-bg);
}

.surf-1 {
  background-color: var(--surf-1);
}

.surf-2 {
  background-color: var(--surf-2);
}

.surf-3 {
  background-color: var(--surf-3);
}

.surf-4 {
  background-color: var(--surf-4);
}

@if $enable-theme-colors {

.bg-body-light {
  --color: #000;
  --ico: #000;
  color: #000;
  background-color: var(--body-bg-light);
}

.bg-body-dark {
  --color: #fff;
  --ico: #fff;
  color: #fff;
  background-color: var(--body-bg-dark);
}

.surf-1-light {
  --bg: var(--surf-1-light);
  --bg-txt: #000;
  --bd-col: var(--surf-1-light);
}

.surf-2-light {
  --bg: var(--surf-2-light);
  --bg-txt: #000;
  --bd-col: var(--surf-2-light);
}

.surf-3-light {
  --bg: var(--surf-3-light);
  --bg-txt: #000;
  --bd-col: var(--surf-3-light);
}

.surf-4-light {
  --bg: var(--surf-4-light);
  --bg-txt: #000;
  --bd-col: var(--surf-4-light);
}

.surf-1-dark {
  --bg: var(--surf-1-dark);
  --bg-txt: #fff;
  --bd-col: var(--surf-1-dark);
}

.surf-2-dark {
  --bg: var(--surf-2-dark);
  --bg-txt: #fff;
  --bd-col: var(--surf-2-dark);
}

.surf-3-dark {
  --bg: var(--surf-3-dark);
  --bg-txt: #fff;
  --bd-col: var(--surf-3-dark);
}

.surf-4-dark {
  --bg: var(--surf-4-dark);
  --bg-txt: #fff;
  --bd-col: var(--surf-4-dark);
}

} // END [if/theme-colors]

@if $enable-primary-colors {
  
  .bg-blue {
    --bg: var(--blue);
    --bg-txt: #fff;
    --bd-col: var(--blue);
  }
    
  .bg-green {
    --bg: var(--green);
    --bg-txt: #fff;
    --bd-col: var(--green);
  }

  .bg-red {
    --bg: var(--red);
    --bg-txt: #fff;
    --bd-col: var(--red);
  }
    
  .bg-orange {
    --bg: var(--orange);
    --bg-txt: #000;
    --bd-col: var(--orange);
  }
  
  .bg-cyan {
    --bg: var(--cyan);
    --bg-txt: #000;
    --bd-col: var(--cyan);
  }
} // END [if/primary-colors]

} // END [if/backgrounds]