Merge pull request #91 from brianhall/color-additions

Update the color options to include white and black.

css/material.css

@@ -1826,6 +1826,18 @@ textarea {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -3862,6 +3874,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 .wsk-shadow--z1 {
   box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); }
 
@@ -5522,6 +5546,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 .wsk-animation--default {
   -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
@@ -7589,6 +7625,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -9286,6 +9334,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 .wsk-animation--default {
   -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
@@ -11494,6 +11554,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -13302,6 +13374,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -14984,6 +15068,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 .wsk-animation--default {
   -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
@@ -16850,6 +16946,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -20976,6 +21084,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -22711,6 +22831,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -24408,6 +24540,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 .wsk-animation--default {
   -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
@@ -26549,6 +26693,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -28230,6 +28386,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 .wsk-animation--default {
   -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
@@ -30052,6 +30220,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -34975,6 +35155,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -36690,6 +36882,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -38372,6 +38576,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 .wsk-animation--default {
   -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
@@ -40153,6 +40369,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -42084,6 +42312,18 @@ _:-moz-tree-row(hover), .wsk-slider__background-upper {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -44149,6 +44389,18 @@ _:-moz-tree-row(hover), .wsk-slider__background-upper {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -45846,6 +46098,18 @@ _:-moz-tree-row(hover), .wsk-slider__background-upper {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 .wsk-animation--default {
   -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
@@ -47654,6 +47918,18 @@ _:-moz-tree-row(hover), .wsk-slider__background-upper {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -49706,6 +49982,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 .wsk-animation--default {
   -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
@@ -51457,6 +51745,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -53250,6 +53550,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */

css/material.css.template

@@ -1827,6 +1827,18 @@ textarea {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -3863,6 +3875,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 .wsk-shadow--z1 {
   box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); }
 
@@ -5523,6 +5547,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 .wsk-animation--default {
   -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
@@ -7590,6 +7626,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -9287,6 +9335,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 .wsk-animation--default {
   -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
@@ -11495,6 +11555,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -13303,6 +13375,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -14985,6 +15069,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 .wsk-animation--default {
   -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
@@ -16851,6 +16947,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -20977,6 +21085,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -22712,6 +22832,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -24409,6 +24541,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 .wsk-animation--default {
   -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
@@ -26550,6 +26694,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -28231,6 +28387,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 .wsk-animation--default {
   -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
@@ -30053,6 +30221,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -34976,6 +35156,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -36691,6 +36883,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -38373,6 +38577,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 .wsk-animation--default {
   -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
@@ -40154,6 +40370,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -42085,6 +42313,18 @@ _:-moz-tree-row(hover), .wsk-slider__background-upper {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -44150,6 +44390,18 @@ _:-moz-tree-row(hover), .wsk-slider__background-upper {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -45847,6 +46099,18 @@ _:-moz-tree-row(hover), .wsk-slider__background-upper {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 .wsk-animation--default {
   -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
@@ -47655,6 +47919,18 @@ _:-moz-tree-row(hover), .wsk-slider__background-upper {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -49707,6 +49983,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 .wsk-animation--default {
   -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
@@ -51458,6 +51746,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */
@@ -53251,6 +53551,18 @@ dt {
 .wsk-color--blue-grey-900 {
   background-color: rgb(38,50,56); }
 
+.wsk-color-text--black {
+  color: rgb(0,0,0); }
+
+.wsk-color--black {
+  background-color: rgb(0,0,0); }
+
+.wsk-color-text--white {
+  color: rgb(255,255,255); }
+
+.wsk-color--white {
+  background-color: rgb(255,255,255); }
+
 /* ==========  Color & Themes  ========== */
 /* ==========  Typography  ========== */
 /* ==========  Components  ========== */

src/palette/_palette.scss

@@ -2239,3 +2239,53 @@
 .wsk-color--blue-grey-900 {
   background-color: unquote("rgb(#{$palette-blue-grey-900})");
 }
+
+
+// Black
+
+.wsk-color-text--black-12 {
+  color: unquote("rgba(#{$palette-black-12})");
+}
+
+.wsk-color-text--black-26 {
+  color: unquote("rgba(#{$palette-black-26})");
+}
+
+.wsk-color-text--black-54 {
+  color: unquote("rgba(#{$palette-black-54})");
+}
+
+.wsk-color-text--black {
+  color: unquote("rgba(#{$palette-black-87})");
+}
+
+.wsk-color-text--black-100 {
+  color: unquote("rgba(#{$palette-black-100})");
+}
+
+.wsk-color--black {
+  background-color: unquote("rgb(#{$palette-black})");
+}
+
+
+// White
+
+.wsk-color-text--white-12 {
+  color: unquote("rgb(#{$palette-white-12})");
+}
+
+.wsk-color-text--white-30 {
+  color: unquote("rgb(#{$palette-white-30})");
+}
+
+.wsk-color-text--white-70 {
+  color: unquote("rgb(#{$palette-white-70})");
+}
+
+.wsk-color-text--white {
+  color: unquote("rgb(#{$palette-white-100})");
+}
+
+.wsk-color--white {
+  background-color: unquote("rgb(#{$palette-white})");
+}

src/palette/color_definitions.scss

@@ -577,3 +577,27 @@ $palette-blue-grey-600: nth($palette-blue-grey, 7);
 $palette-blue-grey-700: nth($palette-blue-grey, 8);
 $palette-blue-grey-800: nth($palette-blue-grey, 9);
 $palette-blue-grey-900: nth($palette-blue-grey, 10);
+
+$palette-black:
+  "0,0,0"
+  "0,0,0,.87"
+  "0,0,0,.54"
+  "0,0,0,.26"
+  "0,0,0,.12";
+
+$palette-black-100: nth($palette-black, 1);
+$palette-black-87: nth($palette-black, 2);
+$palette-black-54: nth($palette-black, 3);
+$palette-black-26: nth($palette-black, 4);
+$palette-black-12: nth($palette-black, 5);
+
+$palette-white:
+  "255,255,255"
+  "255,255,255,.70"
+  "255,255,255,.30"
+  "255,255,255,.12";
+
+$palette-white-100: nth($palette-white, 1);
+$palette-white-70: nth($palette-white, 2);
+$palette-white-30: nth($palette-white, 3);
+$palette-white-12: nth($palette-white, 4);

src/palette/demo.html

@@ -400,8 +400,6 @@
         <div class="demo-palette-color demo-palette-color--700">700</div>
         <div class="demo-palette-color demo-palette-color--800">800</div>
         <div class="demo-palette-color demo-palette-color--900">900</div>
-        <div class="demo-palette-color demo-palette-color--1000">1000</div>
-        <div class="demo-palette-color demo-palette-color--1000-inverse demo-palette--dark-text">1000</div>
       </div>
 
       <div class="demo-palette demo-palette--blue-grey">
@@ -421,6 +419,42 @@
         <div class="demo-palette-color demo-palette-color--800">800</div>
         <div class="demo-palette-color demo-palette-color--900">900</div>
       </div>
+
+      <div class="demo-palette demo-palette--black">
+        <div class="demo-palette-headline demo-palette-single demo-palette-color">
+          <div class="demo-palette-name">Black</div>
+        </div>
+      </div>
+
+      <div class="demo-palette demo-palette--white">
+        <div class="demo-palette-headline demo-palette-single demo-palette-color demo-palette--dark-text">
+          <div class="demo-palette-name">White</div>
+        </div>
+      </div>
+
+      <div class="demo-palette demo-palette--black-text">
+        <div class="demo-palette-heading demo-palette-color">
+          <div class="demo-palette-name">Black</div>
+
+          100%
+        </div>
+        <div class="demo-palette-color demo-palette-color--12 demo-palette--dark-text">12%</div>
+        <div class="demo-palette-color demo-palette-color--26 demo-palette--dark-text">26%</div>
+        <div class="demo-palette-color demo-palette-color--54">54%</div>
+        <div class="demo-palette-color demo-palette-color--87">87%</div>
+      </div>
+
+      <div class="demo-palette demo-palette--white-text">
+        <div class="demo-palette-heading demo-palette-color demo-palette--dark-text">
+          <div class="demo-palette-name">White</div>
+
+          100%
+        </div>
+        <div class="demo-palette-color demo-palette-color--12 demo-palette--dark-text">12%</div>
+        <div class="demo-palette-color demo-palette-color--30 demo-palette--dark-text">30%</div>
+        <div class="demo-palette-color demo-palette-color--70 demo-palette--dark-text">70%</div>
+        <div class="demo-palette-color demo-palette-color--100 demo-palette--dark-text">100%</div>
+      </div>
     </div>
   </body>
 </html>

src/palette/demo.scss

@@ -159,6 +159,15 @@
   padding: 0 0 60px 0;
 }
 
+.demo-palette-single {
+  padding: 15px 15px 25px;
+
+  .demo-palette-name {
+    padding: 0;
+    float: left;
+  }
+}
+
 .demo-palette--red {
   @include demo-palette-color-groups($palette-red);
 }
@@ -229,8 +238,25 @@
 
 .demo-palette--grey {
   @include demo-palette-color-groups($palette-grey);
+}
 
-  .demo-palette-color--1000 {
+.demo-palette--blue-grey {
+  @include demo-palette-color-groups($palette-blue-grey);
+}
+
+.demo-palette--black {
+  .demo-palette-color {
+    background-color: #000000;
+
+    &:after {
+      content: '#000000';
+      float: right;
+    }
+  }
+}
+
+.demo-palette--black-text {
+  .demo-palette-color {
     background-color: #000000;
 
     &:after {
@@ -239,16 +265,95 @@
     }
   }
 
-  .demo-palette-color--1000-inverse {
+  .demo-palette-color--100 {
-    background-color: #ffffff;
+    background-color: unquote("rgb(#{nth($palette-black, 1)})");
 
     &:after {
-      content: '#ffffff';
+      content: '#000000';
+      float: right;
+    }
+  }
+
+  .demo-palette-color--12 {
+    background-color: unquote("rgba(#{nth($palette-black, 5)})");
+
+    &:after {
+      content: 'Dividers';
+      float: right;
+    }
+  }
+
+  .demo-palette-color--26 {
+    background-color: unquote("rgba(#{nth($palette-black, 4)})");
+
+    &:after {
+      content: 'Disabled / Hint Text';
+      float: right;
+    }
+  }
+
+  .demo-palette-color--54 {
+    background-color: unquote("rgba(#{nth($palette-black, 3)})");
+
+    &:after {
+      content: 'Secondary Text / Icons';
+      float: right;
+    }
+  }
+
+  .demo-palette-color--87 {
+    background-color: unquote("rgba(#{nth($palette-black, 2)})");
+
+    &:after {
+      content: 'Text';
       float: right;
     }
   }
 }
 
-.demo-palette--blue-grey {
+.demo-palette--white-text {
-  @include demo-palette-color-groups($palette-blue-grey);
+  .demo-palette-color {
+    background-color: #ffffff;
+
+    &:after {
+      content: '#FFFFFF';
+      float: right;
+    }
+  }
+
+  .demo-palette-color--12 {
+    background-color: unquote("rgba(#{nth($palette-white, 4)})");
+
+    &:after {
+      content: 'Dividers';
+      float: right;
+    }
+  }
+
+  .demo-palette-color--30 {
+    background-color: unquote("rgba(#{nth($palette-white, 3)})");
+
+    &:after {
+      content: 'Disabled / Hint Text';
+      float: right;
+    }
+  }
+
+  .demo-palette-color--70 {
+    background-color: unquote("rgba(#{nth($palette-white, 2)})");
+
+    &:after {
+      content: 'Secondary Text';
+      float: right;
+    }
+  }
+
+  .demo-palette-color--100 {
+    background-color: unquote("rgba(#{nth($palette-white, 1)})");
+
+    &:after {
+      content: 'Text / Icons';
+      float: right;
+    }
+  }
 }