1046: Add color utility classes (#1053)

* Add text colour utilities

* Add background colour utilities

* Add fill colour utilities

* Import colour utilities partial

* Add documentation

Author: danielmatthew

src/css/screen.scss

@@ -155,8 +155,8 @@
 	"utilities/hide",
 	"utilities/preserve-list-semantics",
 	"utilities/spacing",
-	"utilities/text-transform";
-
+	"utilities/text-transform",
+	"utilities/colors";
 
 // Components
 //

src/css/utilities/_colors.scss

@@ -0,0 +1,72 @@
+// Color Utilities
+//
+// A series of color utilities to control:
+// - text color
+// - background color
+// - fill color
+//
+// Supported colors are defined by the [brand colour variables](section-brand.html#kssref-brand-colors)
+//
+// Styleguide Utilities.Colors
+
+$text-colors: (
+"black": $color-black,
+"gray-tint": $color-gray-tint,
+"gray-shade": $color-gray-shade,
+"white": $color-white,
+"green-tint": $color-green-tint,
+"green": $color-green,
+"green-shade": $color-green-shade,
+"blue-tint": $color-blue-tint,
+"blue": $color-blue,
+"blue-shade": $color-blue-shade,
+"pink-tint": $color-pink-tint,
+"pink": $color-pink,
+"pink-shade": $color-pink-shade,
+"sand": $color-sand,
+"red": $color-red,
+"yellow-tint": $color-yellow-tint,
+"yellow": $color-yellow,
+"yellow-shade": $color-yellow-shade
+);
+
+@each $name, $var in $text-colors {
+  // u-text-[color]
+  //
+  // Applies the specified color to the foreground.
+  //
+  // Markup:
+  // <p class="u-text-green">The quick brown fox</p>
+  //
+  // Styleguide Utilities.Colors.u-text-[color]
+  //
+  .u-text-#{$name} {
+    color: $var;
+  }
+
+  // u-background-[color]
+  //
+  // Applies the specified color to the background.
+  //
+  // Markup:
+  // <p class="u-background-green u-text-white">The quick brown fox</p>
+  //
+  // Styleguide Utilities.Colors.u-background-[color]
+  //
+  .u-background-#{$name} {
+    background-color: $var;
+  }
+
+  // u-fill-[color]
+  //
+  // Applies the specified color to the SVG fill property.
+  //
+  // Markup:
+  // <svg class="u-fill-green" aria-hidden="true" focusable="false" width="51" height="51" xmlns="http://www.w3.org/2000/svg"><title>The A11Y Project</title><path d="M25.5 0C11.417 0 0 11.417 0 25.5S11.417 51 25.5 51 51 39.583 51 25.5 39.583 0 25.5 0zm-.385 5.064a3.3 3.3 0 0 1 3.307 3.291 3.304 3.304 0 0 1-3.307 3.306 3.3 3.3 0 0 1-3.29-3.306 3.29 3.29 0 0 1 3.29-3.291zm14.289 10.652l-9.809 1.24.005 9.817 4.755 15.867a1.85 1.85 0 0 1-1.344 2.252c-.989.25-2.003-.3-2.252-1.298l-4.87-14.443h-1.498l-4.48 14.742c-.374.964-1.448 1.404-2.407 1.03-.954-.37-1.533-1.454-1.158-2.418l4.115-15.572v-9.978l-9.04-1.228c-.928-.075-1.558-.89-1.483-1.818.07-.934.914-1.628 1.838-1.554l10.982.944h4.815l11.69-.963a1.68 1.68 0 0 1 1.749 1.623c.04.924-.68 1.718-1.608 1.758z"></path></svg>
+  //
+  // Styleguide Utilities.Colors.u-fill-[color]
+  //
+  .u-fill-#{$name} {
+    fill: $var;
+  }
+}