Background

The background foundation allows you to apply consistent background colors across components using a predefined map of color tokens.

---

Naming conventions

.f--background-{variation}

• {variation} represents a predefined background color key
• Each variation maps to a color token defined in the system

---

How it works

Background foundation classes are generated using a loop that iterates over a map of background color options. The loop goes through:

• A map of background color keys
• Their corresponding color variables

$colorbg-options: (
  a: $color-a,
  b: $color-b,
  c: $color-c,
);

For each entry in the map, a .f--background-{variation} class is generated and assigned the corresponding background color.

---

How to use it

In HTML

<div class="f--background-a">Background A</div>
<div class="f--background-b">Background B</div>

In SCSS

// using @extend (recommended)
.c--component-a {
  @extend .f--background-a;
}

// using the mixin directly (only if necessary)
.c--component-a {
  background: map-get($colorbg-options, a);
}

---

Codepen example:

NOTE!

Keep in mind that you can’t test @extend and map-get in CodePen.