feat(utilities): add .fg-{hue}-{index}, .bg-{hue}-{index} classes

primer · Apr 29, 2019 · 872d309 · 872d309
1 parent 19b351b
commit 872d309
Showing 1 changed file with 8 additions and 0 deletions.
diff --git a/src/utilities/colors.scss b/src/utilities/colors.scss
@@ -32,6 +32,14 @@
 /* Set the background to $bg-purple-light */
 .bg-purple-light     { background-color: $bg-purple-light !important; }
 
+// Generate a foreground and background utility for every shade of every hue
+@each $hue, $shades in $hue-maps {
+  @each $index, $color in $shades {
+    .fg-#{$hue}-#{$index} { color: $color !important; }
+    .bg-#{$hue}-#{$index} { background-color: $color !important; }
+  }
+}
+
 .bg-shade-gradient {
   background-image: linear-gradient(180deg, rgba($black, 0.065), rgba($black, 0)) !important;
   background-repeat: no-repeat !important;