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>

The light, dark and primary colors utilities 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 styles can be customized in the _backgrounds.scss document in the [styles/utilities] directory, they're written as standard CSS with limited Sass functionality included for compiling purposes.

Styles

//  ------------------------------------------------------------
//  Backgrounds
//  ------------------------------------------------------------
@use "../../configuration" as *;
@use "../../properties" as *;

@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);
}

.surf-mono {
  --color: light-dark(#000, #fff);
  --ico: var(--color);
  color: var(--color);
  background-color: light-dark(#fff, #000);
}

.surf-white {
  --color: #000;
  --ico: var(--color);
  color: var(--color);
  background-color: #fff;
}

.surf-black {
  --color: #fff;
  --ico: var(--color);
  color: var(--color);
  background-color: #000;
}

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

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

@if $enable-theme-colors {

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

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

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

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

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

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

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

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

} // END [if/theme-colors]

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

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

} // END [if/backgrounds]