@medyll/cssfabric 0.1.0 → 0.1.1

package/lib/styles/core/color/color.css

@@ -1,252 +1,193 @@
-/**
-color ?
- */
-.color-palette-yellow {
+.foreground-palette-yellow {
   color: #ffb900;
 }
-.color-palette-yellow-light {
+.foreground-palette-yellow-light {
   color: #ffce4d;
 }
-.color-palette-yellow-lighter {
+.foreground-palette-yellow-lighter {
   color: #ffe399;
 }
-.color-palette-yellow-dark {
+.foreground-palette-yellow-dark {
   color: #cc9400;
 }
-.color-palette-yellow-darker {
+.foreground-palette-yellow-darker {
   color: #996f00;
 }
-.color-palette-yellow-complement {
+.foreground-palette-yellow-complement {
   color: #0046ff;
 }
-.color-palette-yellow-invert {
+.foreground-palette-yellow-invert {
   color: #0046ff;
 }
-.color-palette-orange {
+.foreground-palette-orange {
   color: #d83b01;
 }
-.color-palette-orange-light {
+.foreground-palette-orange-light {
   color: #fe6127;
 }
-.color-palette-orange-lighter {
+.foreground-palette-orange-lighter {
   color: #fe9974;
 }
-.color-palette-orange-dark {
+.foreground-palette-orange-dark {
   color: #a52d01;
 }
-.color-palette-orange-darker {
+.foreground-palette-orange-darker {
   color: #721f01;
 }
-.color-palette-orange-complement {
+.foreground-palette-orange-complement {
   color: #019ed8;
 }
-.color-palette-orange-invert {
+.foreground-palette-orange-invert {
   color: #27c4fe;
 }
-.color-palette-red {
+.foreground-palette-red {
   color: #d13438;
 }
-.color-palette-red-light {
+.foreground-palette-red-light {
   color: #df7275;
 }
-.color-palette-red-lighter {
+.foreground-palette-red-lighter {
   color: #edb1b2;
 }
-.color-palette-red-dark {
+.foreground-palette-red-dark {
   color: #ab272a;
 }
-.color-palette-red-darker {
+.foreground-palette-red-darker {
   color: #821d20;
 }
-.color-palette-red-complement {
+.foreground-palette-red-complement {
   color: #34d1cd;
 }
-.color-palette-red-invert {
+.foreground-palette-red-invert {
   color: #2ecbc7;
 }
-.color-palette-magenta {
+.foreground-palette-magenta {
   color: #b4009e;
 }
-.color-palette-magenta-light {
+.foreground-palette-magenta-light {
   color: #ff02e0;
 }
-.color-palette-magenta-lighter {
+.foreground-palette-magenta-lighter {
   color: #ff4ee9;
 }
-.color-palette-magenta-dark {
+.foreground-palette-magenta-dark {
   color: #810071;
 }
-.color-palette-magenta-darker {
+.foreground-palette-magenta-darker {
   color: #4e0044;
 }
-.color-palette-magenta-complement {
+.foreground-palette-magenta-complement {
   color: #00b416;
 }
-.color-palette-magenta-invert {
+.foreground-palette-magenta-invert {
   color: #4bff61;
 }
-.color-palette-purple {
+.foreground-palette-purple {
   color: #5c2d91;
 }
-.color-palette-purple-light {
+.foreground-palette-purple-light {
   color: #8145c5;
 }
-.color-palette-purple-lighter {
+.foreground-palette-purple-lighter {
   color: #a980d7;
 }
-.color-palette-purple-dark {
+.foreground-palette-purple-dark {
   color: #43216a;
 }
-.color-palette-purple-darker {
+.foreground-palette-purple-darker {
   color: #2b1543;
 }
-.color-palette-purple-complement {
+.foreground-palette-purple-complement {
   color: #62912d;
 }
-.color-palette-purple-invert {
+.foreground-palette-purple-invert {
   color: #a3d26e;
 }
-.color-palette-green {
+.foreground-palette-green {
   color: #107c10;
 }
-.color-palette-green-light {
+.foreground-palette-green-light {
   color: #19c019;
 }
-.color-palette-green-lighter {
+.foreground-palette-green-lighter {
   color: #3fe63f;
 }
-.color-palette-green-dark {
+.foreground-palette-green-dark {
   color: #0a4f0a;
 }
-.color-palette-green-darker {
+.foreground-palette-green-darker {
   color: #042204;
 }
-.color-palette-green-complement {
+.foreground-palette-green-complement {
   color: #7c107c;
 }
-.color-palette-green-invert {
+.foreground-palette-green-invert {
   color: #ef83ef;
 }
-.color-palette-teal {
+.foreground-palette-teal {
   color: #008272;
 }
-.color-palette-teal-light {
+.foreground-palette-teal-light {
   color: #00cfb5;
 }
-.color-palette-teal-lighter {
+.foreground-palette-teal-lighter {
   color: #1cffe3;
 }
-.color-palette-teal-dark {
+.foreground-palette-teal-dark {
   color: #004f45;
 }
-.color-palette-teal-darker {
+.foreground-palette-teal-darker {
   color: #001c19;
 }
-.color-palette-teal-complement {
+.foreground-palette-teal-complement {
   color: #820010;
 }
-.color-palette-teal-invert {
+.foreground-palette-teal-invert {
   color: #ff7d8d;
 }
-.color-palette-blue {
+.foreground-palette-blue {
   color: #0078d4;
 }
-.color-palette-blue-light {
+.foreground-palette-blue-light {
   color: #229fff;
 }
-.color-palette-blue-lighter {
+.foreground-palette-blue-lighter {
   color: #6ec0ff;
 }
-.color-palette-blue-dark {
+.foreground-palette-blue-dark {
   color: #005ba1;
 }
-.color-palette-blue-darker {
+.foreground-palette-blue-darker {
   color: #003e6e;
 }
-.color-palette-blue-complement {
+.foreground-palette-blue-complement {
   color: #d45c00;
 }
-.color-palette-blue-invert {
+.foreground-palette-blue-invert {
   color: #ff872b;
 }
-.color-palette-dark {
+.foreground-palette-dark {
   color: #323232;
 }
-.color-palette-dark-light {
+.foreground-palette-dark-light {
   color: #585858;
 }
-.color-palette-dark-lighter {
+.foreground-palette-dark-lighter {
   color: #7f7f7f;
 }
-.color-palette-dark-dark {
+.foreground-palette-dark-dark {
   color: #191919;
 }
-.color-palette-dark-darker {
+.foreground-palette-dark-darker {
   color: black;
 }
-.color-palette-dark-complement {
+.foreground-palette-dark-complement {
   color: #323232;
 }
-.color-palette-dark-invert {
+.foreground-palette-dark-invert {
   color: #cdcdcd;
 }
 
-/**
-color ?
- */
-.color-scheme-discrete {
-  color: #ccc;
-}
-.color-scheme-success {
-  color: green;
-}
-.color-scheme-info {
-  color: #ffdd57;
-}
-.color-scheme-warning {
-  color: #e6b905;
-}
-.color-scheme-alert {
-  color: #ff7300;
-}
-.color-scheme-error {
-  color: red;
-}
-
-/**
-color ?
- */
-.color-grey-100 {
-  color: #f4f4f4;
-}
-.color-grey-200 {
-  color: #e9e9e9;
-}
-.color-grey-300 {
-  color: #dddddd;
-}
-.color-grey-400 {
-  color: #d2d2d2;
-}
-.color-grey-500 {
-  color: #c7c7c7;
-}
-.color-grey-600 {
-  color: #bbbbbb;
-}
-.color-grey-700 {
-  color: #b0b0b0;
-}
-.color-grey-800 {
-  color: #a4a4a4;
-}
-.color-grey-900 {
-  color: #999999;
-}
-
-/**
-bg ?
- */
 .bg-palette-yellow {
   background-color: #ffb900;
 }
@@ -437,62 +378,6 @@ bg ?
   background-color: #cdcdcd;
 }
 
-/**
-bg ?
- */
-.bg-scheme-discrete {
-  background-color: #ccc;
-}
-.bg-scheme-success {
-  background-color: green;
-}
-.bg-scheme-info {
-  background-color: #ffdd57;
-}
-.bg-scheme-warning {
-  background-color: #e6b905;
-}
-.bg-scheme-alert {
-  background-color: #ff7300;
-}
-.bg-scheme-error {
-  background-color: red;
-}
-
-/**
-bg ?
- */
-.bg-grey-100 {
-  background-color: #f4f4f4;
-}
-.bg-grey-200 {
-  background-color: #e9e9e9;
-}
-.bg-grey-300 {
-  background-color: #dddddd;
-}
-.bg-grey-400 {
-  background-color: #d2d2d2;
-}
-.bg-grey-500 {
-  background-color: #c7c7c7;
-}
-.bg-grey-600 {
-  background-color: #bbbbbb;
-}
-.bg-grey-700 {
-  background-color: #b0b0b0;
-}
-.bg-grey-800 {
-  background-color: #a4a4a4;
-}
-.bg-grey-900 {
-  background-color: #999999;
-}
-
-/**
-bg-themed ?
- */
 .bg-themed-palette-yellow {
   color: black;
   text-shadow: 0 0 0.125rem #cc9400;
@@ -755,123 +640,463 @@ bg-themed ?
   background-color: #cdcdcd;
 }
 
-/**
-bg-themed ?
- */
-.bg-themed-scheme-discrete {
+.border-color-palette-yellow {
+  border-color: #cc9400 !important;
+}
+.border-color-palette-orange {
+  border-color: #a52d01 !important;
+}
+.border-color-palette-red {
+  border-color: #ab272a !important;
+}
+.border-color-palette-magenta {
+  border-color: #810071 !important;
+}
+.border-color-palette-purple {
+  border-color: #43216a !important;
+}
+.border-color-palette-green {
+  border-color: #0a4f0a !important;
+}
+.border-color-palette-teal {
+  border-color: #004f45 !important;
+}
+.border-color-palette-blue {
+  border-color: #005ba1 !important;
+}
+.border-color-palette-dark {
+  border-color: #191919 !important;
+}
+
+.foreground-scheme-discrete {
+  color: #ccc;
+}
+.foreground-scheme-discrete-light {
+  color: #f2f2f2;
+}
+.foreground-scheme-discrete-lighter {
+  color: white;
+}
+.foreground-scheme-discrete-dark {
+  color: #b3b3b3;
+}
+.foreground-scheme-discrete-darker {
+  color: #999999;
+}
+.foreground-scheme-discrete-complement {
+  color: #cccccc;
+}
+.foreground-scheme-discrete-invert {
+  color: #333333;
+}
+.foreground-scheme-success {
+  color: green;
+}
+.foreground-scheme-success-light {
+  color: #00cd00;
+}
+.foreground-scheme-success-lighter {
+  color: #1aff1a;
+}
+.foreground-scheme-success-dark {
+  color: #004d00;
+}
+.foreground-scheme-success-darker {
+  color: #001a00;
+}
+.foreground-scheme-success-complement {
+  color: purple;
+}
+.foreground-scheme-success-invert {
+  color: #ff7fff;
+}
+.foreground-scheme-info {
+  color: #ffdd57;
+}
+.foreground-scheme-info-light {
+  color: #ffeda3;
+}
+.foreground-scheme-info-lighter {
+  color: #fffcf0;
+}
+.foreground-scheme-info-dark {
+  color: #ffd324;
+}
+.foreground-scheme-info-darker {
+  color: #f0c000;
+}
+.foreground-scheme-info-complement {
+  color: #5778ff;
+}
+.foreground-scheme-info-invert {
+  color: #0022a8;
+}
+.foreground-scheme-warning {
+  color: #e6b905;
+}
+.foreground-scheme-warning-light {
+  color: #fbd53c;
+}
+.foreground-scheme-warning-lighter {
+  color: #fde587;
+}
+.foreground-scheme-warning-dark {
+  color: #b49104;
+}
+.foreground-scheme-warning-darker {
+  color: #826803;
+}
+.foreground-scheme-warning-complement {
+  color: #0532e6;
+}
+.foreground-scheme-warning-invert {
+  color: #1946fa;
+}
+.foreground-scheme-alert {
+  color: #ff7300;
+}
+.foreground-scheme-alert-light {
+  color: #ff9d4d;
+}
+.foreground-scheme-alert-lighter {
+  color: #ffc799;
+}
+.foreground-scheme-alert-dark {
+  color: #cc5c00;
+}
+.foreground-scheme-alert-darker {
+  color: #994500;
+}
+.foreground-scheme-alert-complement {
+  color: #008cff;
+}
+.foreground-scheme-alert-invert {
+  color: #008cff;
+}
+.foreground-scheme-error {
+  color: red;
+}
+.foreground-scheme-error-light {
+  color: #ff4d4d;
+}
+.foreground-scheme-error-lighter {
+  color: #ff9999;
+}
+.foreground-scheme-error-dark {
+  color: #cc0000;
+}
+.foreground-scheme-error-darker {
+  color: #990000;
+}
+.foreground-scheme-error-complement {
+  color: aqua;
+}
+.foreground-scheme-error-invert {
+  color: aqua;
+}
+
+.bg-scheme-discrete {
+  background-color: #ccc;
+}
+.bg-scheme-discrete-light {
+  background-color: #f2f2f2;
+}
+.bg-scheme-discrete-lighter {
+  background-color: white;
+}
+.bg-scheme-discrete-dark {
+  background-color: #b3b3b3;
+}
+.bg-scheme-discrete-darker {
+  background-color: #999999;
+}
+.bg-scheme-discrete-complement {
+  background-color: #cccccc;
+}
+.bg-scheme-discrete-invert {
+  background-color: #333333;
+}
+.bg-scheme-success {
+  background-color: green;
+}
+.bg-scheme-success-light {
+  background-color: #00cd00;
+}
+.bg-scheme-success-lighter {
+  background-color: #1aff1a;
+}
+.bg-scheme-success-dark {
+  background-color: #004d00;
+}
+.bg-scheme-success-darker {
+  background-color: #001a00;
+}
+.bg-scheme-success-complement {
+  background-color: purple;
+}
+.bg-scheme-success-invert {
+  background-color: #ff7fff;
+}
+.bg-scheme-info {
+  background-color: #ffdd57;
+}
+.bg-scheme-info-light {
+  background-color: #ffeda3;
+}
+.bg-scheme-info-lighter {
+  background-color: #fffcf0;
+}
+.bg-scheme-info-dark {
+  background-color: #ffd324;
+}
+.bg-scheme-info-darker {
+  background-color: #f0c000;
+}
+.bg-scheme-info-complement {
+  background-color: #5778ff;
+}
+.bg-scheme-info-invert {
+  background-color: #0022a8;
+}
+.bg-scheme-warning {
+  background-color: #e6b905;
+}
+.bg-scheme-warning-light {
+  background-color: #fbd53c;
+}
+.bg-scheme-warning-lighter {
+  background-color: #fde587;
+}
+.bg-scheme-warning-dark {
+  background-color: #b49104;
+}
+.bg-scheme-warning-darker {
+  background-color: #826803;
+}
+.bg-scheme-warning-complement {
+  background-color: #0532e6;
+}
+.bg-scheme-warning-invert {
+  background-color: #1946fa;
+}
+.bg-scheme-alert {
+  background-color: #ff7300;
+}
+.bg-scheme-alert-light {
+  background-color: #ff9d4d;
+}
+.bg-scheme-alert-lighter {
+  background-color: #ffc799;
+}
+.bg-scheme-alert-dark {
+  background-color: #cc5c00;
+}
+.bg-scheme-alert-darker {
+  background-color: #994500;
+}
+.bg-scheme-alert-complement {
+  background-color: #008cff;
+}
+.bg-scheme-alert-invert {
+  background-color: #008cff;
+}
+.bg-scheme-error {
+  background-color: red;
+}
+.bg-scheme-error-light {
+  background-color: #ff4d4d;
+}
+.bg-scheme-error-lighter {
+  background-color: #ff9999;
+}
+.bg-scheme-error-dark {
+  background-color: #cc0000;
+}
+.bg-scheme-error-darker {
+  background-color: #990000;
+}
+.bg-scheme-error-complement {
+  background-color: aqua;
+}
+.bg-scheme-error-invert {
+  background-color: aqua;
+}
+
+.bg-themed-palette-discrete {
   color: black;
   text-shadow: 0 0 0.125rem #b3b3b3;
   background-color: #ccc;
 }
-.bg-themed-scheme-success {
+.bg-themed-palette-discrete-light {
+  color: black;
+  background-color: #f2f2f2;
+}
+.bg-themed-palette-discrete-lighter {
+  color: black;
+  background-color: white;
+}
+.bg-themed-palette-discrete-dark {
+  color: black;
+  background-color: #b3b3b3;
+}
+.bg-themed-palette-discrete-darker {
+  color: black;
+  background-color: #999999;
+}
+.bg-themed-palette-discrete-complement {
+  color: black;
+  background-color: #cccccc;
+}
+.bg-themed-palette-discrete-invert {
+  color: white;
+  background-color: #333333;
+}
+.bg-themed-palette-success {
   color: white;
   text-shadow: 0 0 0.125rem #004d00;
   background-color: green;
 }
-.bg-themed-scheme-info {
+.bg-themed-palette-success-light {
+  color: black;
+  background-color: #00cd00;
+}
+.bg-themed-palette-success-lighter {
+  color: black;
+  background-color: #1aff1a;
+}
+.bg-themed-palette-success-dark {
+  color: white;
+  background-color: #004d00;
+}
+.bg-themed-palette-success-darker {
+  color: white;
+  background-color: #001a00;
+}
+.bg-themed-palette-success-complement {
+  color: white;
+  background-color: purple;
+}
+.bg-themed-palette-success-invert {
+  color: black;
+  background-color: #ff7fff;
+}
+.bg-themed-palette-info {
   color: black;
   text-shadow: 0 0 0.125rem #ffd324;
   background-color: #ffdd57;
 }
-.bg-themed-scheme-warning {
+.bg-themed-palette-info-light {
   color: black;
-  text-shadow: 0 0 0.125rem #b49104;
-  background-color: #e6b905;
+  background-color: #ffeda3;
 }
-.bg-themed-scheme-alert {
+.bg-themed-palette-info-lighter {
   color: black;
-  text-shadow: 0 0 0.125rem #cc5c00;
-  background-color: #ff7300;
+  background-color: #fffcf0;
 }
-.bg-themed-scheme-error {
-  color: white;
-  text-shadow: 0 0 0.125rem #cc0000;
-  background-color: red;
+.bg-themed-palette-info-dark {
+  color: black;
+  background-color: #ffd324;
 }
-
-/**
-bg-themed ?
- */
-.bg-themed-grey-100 {
+.bg-themed-palette-info-darker {
   color: black;
-  text-shadow: 0 0 0.125rem #dbdbdb;
-  background-color: #f4f4f4;
+  background-color: #f0c000;
+}
+.bg-themed-palette-info-complement {
+  color: white;
+  background-color: #5778ff;
 }
-.bg-themed-grey-200 {
+.bg-themed-palette-info-invert {
+  color: white;
+  background-color: #0022a8;
+}
+.bg-themed-palette-warning {
   color: black;
-  text-shadow: 0 0 0.125rem #d0d0d0;
-  background-color: #e9e9e9;
+  text-shadow: 0 0 0.125rem #b49104;
+  background-color: #e6b905;
 }
-.bg-themed-grey-300 {
+.bg-themed-palette-warning-light {
   color: black;
-  text-shadow: 0 0 0.125rem #c4c4c4;
-  background-color: #dddddd;
+  background-color: #fbd53c;
 }
-.bg-themed-grey-400 {
+.bg-themed-palette-warning-lighter {
   color: black;
-  text-shadow: 0 0 0.125rem #b9b9b9;
-  background-color: #d2d2d2;
+  background-color: #fde587;
 }
-.bg-themed-grey-500 {
+.bg-themed-palette-warning-dark {
   color: black;
-  text-shadow: 0 0 0.125rem #aeaeae;
-  background-color: #c7c7c7;
+  background-color: #b49104;
 }
-.bg-themed-grey-600 {
+.bg-themed-palette-warning-darker {
+  color: white;
+  background-color: #826803;
+}
+.bg-themed-palette-warning-complement {
+  color: white;
+  background-color: #0532e6;
+}
+.bg-themed-palette-warning-invert {
+  color: white;
+  background-color: #1946fa;
+}
+.bg-themed-palette-alert {
   color: black;
-  text-shadow: 0 0 0.125rem #a2a2a2;
-  background-color: #bbbbbb;
+  text-shadow: 0 0 0.125rem #cc5c00;
+  background-color: #ff7300;
 }
-.bg-themed-grey-700 {
+.bg-themed-palette-alert-light {
   color: black;
-  text-shadow: 0 0 0.125rem #979797;
-  background-color: #b0b0b0;
+  background-color: #ff9d4d;
 }
-.bg-themed-grey-800 {
+.bg-themed-palette-alert-lighter {
   color: black;
-  text-shadow: 0 0 0.125rem #8b8b8b;
-  background-color: #a4a4a4;
+  background-color: #ffc799;
 }
-.bg-themed-grey-900 {
+.bg-themed-palette-alert-dark {
   color: black;
-  text-shadow: 0 0 0.125rem gray;
-  background-color: #999999;
+  background-color: #cc5c00;
 }
-
-/**
-border-color ?
- */
-.border-color-palette-yellow {
-  border-color: #cc9400 !important;
+.bg-themed-palette-alert-darker {
+  color: white;
+  background-color: #994500;
 }
-.border-color-palette-orange {
-  border-color: #a52d01 !important;
+.bg-themed-palette-alert-complement {
+  color: white;
+  background-color: #008cff;
 }
-.border-color-palette-red {
-  border-color: #ab272a !important;
+.bg-themed-palette-alert-invert {
+  color: white;
+  background-color: #008cff;
 }
-.border-color-palette-magenta {
-  border-color: #810071 !important;
+.bg-themed-palette-error {
+  color: white;
+  text-shadow: 0 0 0.125rem #cc0000;
+  background-color: red;
 }
-.border-color-palette-purple {
-  border-color: #43216a !important;
+.bg-themed-palette-error-light {
+  color: black;
+  background-color: #ff4d4d;
 }
-.border-color-palette-green {
-  border-color: #0a4f0a !important;
+.bg-themed-palette-error-lighter {
+  color: black;
+  background-color: #ff9999;
 }
-.border-color-palette-teal {
-  border-color: #004f45 !important;
+.bg-themed-palette-error-dark {
+  color: white;
+  background-color: #cc0000;
 }
-.border-color-palette-blue {
-  border-color: #005ba1 !important;
+.bg-themed-palette-error-darker {
+  color: white;
+  background-color: #990000;
 }
-.border-color-palette-dark {
-  border-color: #191919 !important;
+.bg-themed-palette-error-complement {
+  color: black;
+  background-color: aqua;
+}
+.bg-themed-palette-error-invert {
+  color: black;
+  background-color: aqua;
 }
 
-/**
-border-color ?
- */
 .border-color-scheme-discrete {
   border-color: #b3b3b3 !important;
 }
@@ -891,33 +1116,450 @@ border-color ?
   border-color: #cc0000 !important;
 }
 
-/**
-border-color ?
- */
+.foreground-grey-100 {
+  color: #f4f4f4;
+}
+.foreground-grey-100-light {
+  color: white;
+}
+.foreground-grey-100-lighter {
+  color: white;
+}
+.foreground-grey-100-dark {
+  color: #dbdbdb;
+}
+.foreground-grey-100-darker {
+  color: #c1c1c1;
+}
+.foreground-grey-100-complement {
+  color: #f4f4f4;
+}
+.foreground-grey-100-invert {
+  color: #0b0b0b;
+}
+.foreground-grey-200 {
+  color: #e2e2e2;
+}
+.foreground-grey-200-light {
+  color: white;
+}
+.foreground-grey-200-lighter {
+  color: white;
+}
+.foreground-grey-200-dark {
+  color: #c9c9c9;
+}
+.foreground-grey-200-darker {
+  color: #afafaf;
+}
+.foreground-grey-200-complement {
+  color: #e2e2e2;
+}
+.foreground-grey-200-invert {
+  color: #1d1d1d;
+}
+.foreground-grey-300 {
+  color: #d0d0d0;
+}
+.foreground-grey-300-light {
+  color: #f6f6f6;
+}
+.foreground-grey-300-lighter {
+  color: white;
+}
+.foreground-grey-300-dark {
+  color: #b7b7b7;
+}
+.foreground-grey-300-darker {
+  color: #9d9d9d;
+}
+.foreground-grey-300-complement {
+  color: #d0d0d0;
+}
+.foreground-grey-300-invert {
+  color: #2f2f2f;
+}
+.foreground-grey-400 {
+  color: #bdbdbd;
+}
+.foreground-grey-400-light {
+  color: #e3e3e3;
+}
+.foreground-grey-400-lighter {
+  color: white;
+}
+.foreground-grey-400-dark {
+  color: #a4a4a4;
+}
+.foreground-grey-400-darker {
+  color: #8a8a8a;
+}
+.foreground-grey-400-complement {
+  color: #bdbdbd;
+}
+.foreground-grey-400-invert {
+  color: #424242;
+}
+.foreground-grey-500 {
+  color: #ababab;
+}
+.foreground-grey-500-light {
+  color: #d1d1d1;
+}
+.foreground-grey-500-lighter {
+  color: #f8f8f8;
+}
+.foreground-grey-500-dark {
+  color: #929292;
+}
+.foreground-grey-500-darker {
+  color: #787878;
+}
+.foreground-grey-500-complement {
+  color: #ababab;
+}
+.foreground-grey-500-invert {
+  color: #545454;
+}
+.foreground-grey-600 {
+  color: #999999;
+}
+.foreground-grey-600-light {
+  color: #bfbfbf;
+}
+.foreground-grey-600-lighter {
+  color: #e6e6e6;
+}
+.foreground-grey-600-dark {
+  color: gray;
+}
+.foreground-grey-600-darker {
+  color: #666666;
+}
+.foreground-grey-600-complement {
+  color: #999999;
+}
+.foreground-grey-600-invert {
+  color: #666666;
+}
+
+.bg-grey-100 {
+  background-color: #f4f4f4;
+}
+.bg-grey-100-light {
+  background-color: white;
+}
+.bg-grey-100-lighter {
+  background-color: white;
+}
+.bg-grey-100-dark {
+  background-color: #dbdbdb;
+}
+.bg-grey-100-darker {
+  background-color: #c1c1c1;
+}
+.bg-grey-100-complement {
+  background-color: #f4f4f4;
+}
+.bg-grey-100-invert {
+  background-color: #0b0b0b;
+}
+.bg-grey-200 {
+  background-color: #e2e2e2;
+}
+.bg-grey-200-light {
+  background-color: white;
+}
+.bg-grey-200-lighter {
+  background-color: white;
+}
+.bg-grey-200-dark {
+  background-color: #c9c9c9;
+}
+.bg-grey-200-darker {
+  background-color: #afafaf;
+}
+.bg-grey-200-complement {
+  background-color: #e2e2e2;
+}
+.bg-grey-200-invert {
+  background-color: #1d1d1d;
+}
+.bg-grey-300 {
+  background-color: #d0d0d0;
+}
+.bg-grey-300-light {
+  background-color: #f6f6f6;
+}
+.bg-grey-300-lighter {
+  background-color: white;
+}
+.bg-grey-300-dark {
+  background-color: #b7b7b7;
+}
+.bg-grey-300-darker {
+  background-color: #9d9d9d;
+}
+.bg-grey-300-complement {
+  background-color: #d0d0d0;
+}
+.bg-grey-300-invert {
+  background-color: #2f2f2f;
+}
+.bg-grey-400 {
+  background-color: #bdbdbd;
+}
+.bg-grey-400-light {
+  background-color: #e3e3e3;
+}
+.bg-grey-400-lighter {
+  background-color: white;
+}
+.bg-grey-400-dark {
+  background-color: #a4a4a4;
+}
+.bg-grey-400-darker {
+  background-color: #8a8a8a;
+}
+.bg-grey-400-complement {
+  background-color: #bdbdbd;
+}
+.bg-grey-400-invert {
+  background-color: #424242;
+}
+.bg-grey-500 {
+  background-color: #ababab;
+}
+.bg-grey-500-light {
+  background-color: #d1d1d1;
+}
+.bg-grey-500-lighter {
+  background-color: #f8f8f8;
+}
+.bg-grey-500-dark {
+  background-color: #929292;
+}
+.bg-grey-500-darker {
+  background-color: #787878;
+}
+.bg-grey-500-complement {
+  background-color: #ababab;
+}
+.bg-grey-500-invert {
+  background-color: #545454;
+}
+.bg-grey-600 {
+  background-color: #999999;
+}
+.bg-grey-600-light {
+  background-color: #bfbfbf;
+}
+.bg-grey-600-lighter {
+  background-color: #e6e6e6;
+}
+.bg-grey-600-dark {
+  background-color: gray;
+}
+.bg-grey-600-darker {
+  background-color: #666666;
+}
+.bg-grey-600-complement {
+  background-color: #999999;
+}
+.bg-grey-600-invert {
+  background-color: #666666;
+}
+
+.bg-themed-palette-100 {
+  color: black;
+  text-shadow: 0 0 0.125rem #dbdbdb;
+  background-color: #f4f4f4;
+}
+.bg-themed-palette-100-light {
+  color: black;
+  background-color: white;
+}
+.bg-themed-palette-100-lighter {
+  color: black;
+  background-color: white;
+}
+.bg-themed-palette-100-dark {
+  color: black;
+  background-color: #dbdbdb;
+}
+.bg-themed-palette-100-darker {
+  color: black;
+  background-color: #c1c1c1;
+}
+.bg-themed-palette-100-complement {
+  color: black;
+  background-color: #f4f4f4;
+}
+.bg-themed-palette-100-invert {
+  color: white;
+  background-color: #0b0b0b;
+}
+.bg-themed-palette-200 {
+  color: black;
+  text-shadow: 0 0 0.125rem #c9c9c9;
+  background-color: #e2e2e2;
+}
+.bg-themed-palette-200-light {
+  color: black;
+  background-color: white;
+}
+.bg-themed-palette-200-lighter {
+  color: black;
+  background-color: white;
+}
+.bg-themed-palette-200-dark {
+  color: black;
+  background-color: #c9c9c9;
+}
+.bg-themed-palette-200-darker {
+  color: black;
+  background-color: #afafaf;
+}
+.bg-themed-palette-200-complement {
+  color: black;
+  background-color: #e2e2e2;
+}
+.bg-themed-palette-200-invert {
+  color: white;
+  background-color: #1d1d1d;
+}
+.bg-themed-palette-300 {
+  color: black;
+  text-shadow: 0 0 0.125rem #b7b7b7;
+  background-color: #d0d0d0;
+}
+.bg-themed-palette-300-light {
+  color: black;
+  background-color: #f6f6f6;
+}
+.bg-themed-palette-300-lighter {
+  color: black;
+  background-color: white;
+}
+.bg-themed-palette-300-dark {
+  color: black;
+  background-color: #b7b7b7;
+}
+.bg-themed-palette-300-darker {
+  color: black;
+  background-color: #9d9d9d;
+}
+.bg-themed-palette-300-complement {
+  color: black;
+  background-color: #d0d0d0;
+}
+.bg-themed-palette-300-invert {
+  color: white;
+  background-color: #2f2f2f;
+}
+.bg-themed-palette-400 {
+  color: black;
+  text-shadow: 0 0 0.125rem #a4a4a4;
+  background-color: #bdbdbd;
+}
+.bg-themed-palette-400-light {
+  color: black;
+  background-color: #e3e3e3;
+}
+.bg-themed-palette-400-lighter {
+  color: black;
+  background-color: white;
+}
+.bg-themed-palette-400-dark {
+  color: black;
+  background-color: #a4a4a4;
+}
+.bg-themed-palette-400-darker {
+  color: black;
+  background-color: #8a8a8a;
+}
+.bg-themed-palette-400-complement {
+  color: black;
+  background-color: #bdbdbd;
+}
+.bg-themed-palette-400-invert {
+  color: white;
+  background-color: #424242;
+}
+.bg-themed-palette-500 {
+  color: black;
+  text-shadow: 0 0 0.125rem #929292;
+  background-color: #ababab;
+}
+.bg-themed-palette-500-light {
+  color: black;
+  background-color: #d1d1d1;
+}
+.bg-themed-palette-500-lighter {
+  color: black;
+  background-color: #f8f8f8;
+}
+.bg-themed-palette-500-dark {
+  color: black;
+  background-color: #929292;
+}
+.bg-themed-palette-500-darker {
+  color: white;
+  background-color: #787878;
+}
+.bg-themed-palette-500-complement {
+  color: black;
+  background-color: #ababab;
+}
+.bg-themed-palette-500-invert {
+  color: white;
+  background-color: #545454;
+}
+.bg-themed-palette-600 {
+  color: black;
+  text-shadow: 0 0 0.125rem gray;
+  background-color: #999999;
+}
+.bg-themed-palette-600-light {
+  color: black;
+  background-color: #bfbfbf;
+}
+.bg-themed-palette-600-lighter {
+  color: black;
+  background-color: #e6e6e6;
+}
+.bg-themed-palette-600-dark {
+  color: black;
+  background-color: gray;
+}
+.bg-themed-palette-600-darker {
+  color: white;
+  background-color: #666666;
+}
+.bg-themed-palette-600-complement {
+  color: black;
+  background-color: #999999;
+}
+.bg-themed-palette-600-invert {
+  color: white;
+  background-color: #666666;
+}
+
 .border-color-grey-100 {
   border-color: #dbdbdb !important;
 }
 .border-color-grey-200 {
-  border-color: #d0d0d0 !important;
+  border-color: #c9c9c9 !important;
 }
 .border-color-grey-300 {
-  border-color: #c4c4c4 !important;
+  border-color: #b7b7b7 !important;
 }
 .border-color-grey-400 {
-  border-color: #b9b9b9 !important;
+  border-color: #a4a4a4 !important;
 }
 .border-color-grey-500 {
-  border-color: #aeaeae !important;
+  border-color: #929292 !important;
 }
 .border-color-grey-600 {
-  border-color: #a2a2a2 !important;
-}
-.border-color-grey-700 {
-  border-color: #979797 !important;
-}
-.border-color-grey-800 {
-  border-color: #8b8b8b !important;
-}
-.border-color-grey-900 {
   border-color: gray !important;
 }