prep docs for displaying the colors

assets/scss/_colors.scss

@@ -0,0 +1,24 @@
+//
+// Docs color palette classes
+//
+
+@each $color, $value in $colors {
+  .swatch-#{$color} {
+    background-color: #{$value};
+    @include color-yiq($value);
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .swatch-#{$color} {
+    background-color: #{$value};
+    @include color-yiq($value);
+  }
+}
+
+@each $color, $value in $grays {
+  .swatch-#{$color} {
+    background-color: #{$value};
+    @include color-yiq($value);
+  }
+}

assets/scss/docs.scss

@@ -10,7 +10,7 @@
 //
 // Background information on nomenclature and architecture decisions here.
 //
-// - Bootstrap variables and mixins are included for easy reuse.
+// - Bootstrap functions, variables, and mixins are included for easy reuse.
 //   Doing so gives us access to the same core utilities provided by Bootstrap.
 //   For example, consistent media queries through those mixins.
 //
@@ -48,6 +48,7 @@
 @import "team";
 @import "browser-bugs";
 @import "brand";
+@import "colors";
 @import "clipboard-js";
 
 // Load docs dependencies