🎨 Color
The color foundation allows you to apply consistent colors across components using a predefined map of color tokens.
It uses a loop to generate utility classes following the naming convention:
.f--color-{variation}📌 This loop will iterate over a map like this:
Section titled “📌 This loop will iterate over a map like this:”$color-options: ( a: $color-a, b: $color-b, c: $color-c,);🔧 How to use it
Section titled “🔧 How to use it”In HTML
<div class="f--color-a">color A</div><div class="f--color-b">color B</div>In SCSS
- Extending the generated foundation class — preferred method:
.c--component-a { @extend .f--color-a;}- Using the map-get directly:
.c--component-a { color: map-get($color-options, a);}