Remove unused colors from color palette

The color palette has been stripped down to a
maximum of two colors shades per palette. This
works for our design since components use a
base color with a lighter color as an accent
color. This change reduces the amount of CSS
generated by Bootstrap when the CSS is compiled.

Github Story: https://github.com/openbmc/webui-vue/issues/2

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I2ddb37f5c89c749a7303799c6f7499ddd83d5a92

7 files changed, 45 insertions, 121 deletions

diff --git a/src/assets/styles/_buttons.scss b/src/assets/styles/_buttons.scss
index 02b0caea..2f961e00 100644
--- a/src/assets/styles/_buttons.scss
+++ b/src/assets/styles/_buttons.scss
@@ -7,12 +7,11 @@
 }
 
 .btn-primary {
-  fill: $white;
+  fill: currentColor;
 }
 
 .btn-secondary {
-  fill: $white;
-  @extend .btn-secondary-dark;
+  fill: currentColor;
 }
 
 .btn-link {
diff --git a/src/assets/styles/_colors.scss b/src/assets/styles/_colors.scss
index e27984bc..28bfe890 100644
--- a/src/assets/styles/_colors.scss
+++ b/src/assets/styles/_colors.scss
@@ -1,115 +1,74 @@
-// Custom Color system
+// SASS Color Variables
 $black: #000;
 $white: #fff;
 
+$blue-100: #eff2fb;
+$blue-500: #2d60e5;
+
+$green-100: #ecfdf1;
+$green-500: #0a7d06;
+
+$red-100: #feeeed;
+$red-500: #da1416;
+
+$yellow-100: #fff8e4;
+$yellow-500: #efc100;
+
 $gray-100: #fafafa;
 $gray-200: #f4f4f4;
 $gray-300: #dcdee0;
-$gray-400: #cccccc;
-$gray-500: #B3B3B3;
+$gray-400: #ccc;
+$gray-500: #b3b3b3;
 $gray-600: #999999;
 $gray-700: #666666;
 $gray-800: #333333;
 $gray-900: #161616;
 
-$blue-10: #eff2fb;
-$blue-20: #ccd7f4;
-$blue-30: #7295f1;
-$blue-40: #2d60e5;
-$blue-50: #1d3458;
-$blue-100: #1b2834;
-$blues: (
-  "100": $blue-10,
-  "200": $blue-20,
-  "300": $blue-30,
-  "400": $blue-40,
-  "500": $blue-50,
-  "900": $blue-100
-);
-
-// Accent colors
-$teal-20: #ccf0f5;
-$teal-50: #00b6cb;
-$teal-70: #098292;
-$teals: (
-  "200": $teal-20,
-  "500": $teal-50,
-  "700": $teal-70
-);
-
-$green-50: #0a7d06;
-$green-20: #c6e8c5;
-$green-10: #ecfdf1;
-$greens: (
-  "100": $green-10,
-  "200": $green-20,
-  "500": $green-50
-);
-
-$yellow-70: #db7c00;
-$yellow-50: #fedf39;
-$yellow-20: #fff8e4;
-$yellow-10: #fff8e4;
-$yellows: (
-  "100": $yellow-10,
-  "200": $yellow-20,
-  "500": $yellow-50,
-  "700": $yellow-70
-);
-
-$red-10: #fce9e9;
-$red-20: #fad3d3;
-$red-50: #da1416;
-$reds: (
-  "100": $red-10,
-  "200": $red-20,
-  "500": $red-50
-);
-
-$blue: $blue-40;
-$red: $red-50;
-$yellow: $yellow-50;
-$green: $green-50;
-$teal: $teal-50;
-$gray: $gray-400;
+// SASS Base Color Variables
+$blue: $blue-500;
+$green: $green-500;
+$red: $red-500;
+$yellow: $yellow-500;
 
 // Bootstrap will generate CSS variables for
 // all of the colors in this map.
 // https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables
 $colors: (
   "blue": $blue,
+  "green": $green,
   "red": $red,
   "yellow": $yellow,
-  "green": $green,
-  "teal": $teal,
-  "white": $white,
-  "gray": $gray
 );
 
+// SASS Theme Color Variables
+// Can be used as variants
+$danger: $red;
+$dark: $gray-900;
+$info: $blue;
+$light: $gray-100;
 $primary: $blue;
-$secondary: $gray-600;
-$secondary-dark: $gray-800;
-$secondary-light: $gray-200;
+$secondary: $gray-800;
 $success: $green;
-$info: $teal;
 $warning: $yellow;
-$danger: $red;
-$light: $gray-100;
-$dark: $gray-900;
+
+// Sass Color Variable Accents
+// Used for component styles and are
+// not available as variants
+$danger-light: $red-100;
+$info-light: $blue-100;
+$warning-light: $yellow-100;
+$success-light: $green-100;
 
 // Bootstrap will generate CSS variables for
 // all of the colors in this map.
 // https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables
 $theme-colors: (
   "primary": $primary,
-  "primary-dark": $blue-100,
-  "primary-light": $blue-10,
   "secondary": $secondary,
-  "secondary-dark": $secondary-dark,
-  "secondary-light": $secondary-light,
+  "dark": $dark,
+  "light": $light,
   "danger": $danger,
-  "warning": $warning,
   "info": $info,
-  "dark": $dark,
-  "light": $light
+  "success": $success,
+  "warning": $warning
 );
diff --git a/src/assets/styles/_form-components.scss b/src/assets/styles/_form-components.scss
index 35274e70..d9ae9d40 100644
--- a/src/assets/styles/_form-components.scss
+++ b/src/assets/styles/_form-components.scss
@@ -17,7 +17,7 @@
 .custom-control-label,
 .form-control {
   //important needed to override validation colors on radio labels
-  color: $gray-900 !important;
+  color: $dark !important;
   font-size: 16px;
   border-color: $gray-400 !important;
   &.is-invalid,
diff --git a/src/assets/styles/_functions.scss b/src/assets/styles/_functions.scss
deleted file mode 100644
index 8652a8b0..00000000
--- a/src/assets/styles/_functions.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-// Functions for getting colors from custom maps
-// Bootstrap has a gray function and colors, but we have
-// added new theme colors and helper functions. Using
-// get-{color}($key: "100") because using the color name only
-// {color}(key: "100"} convention that bootstrap does caused
-// the compilation to fail for blue, red, and green.
-//
-// https://getbootstrap.com/docs/4.0/getting-started/theming/#functions
-
-// Blues
-@function get-blue($key: "100") {
-  @return map-get($blues, $key);
-}
-
-// Reds
-@function get-red($key: "100") {
-  @return map-get($reds, $key);
-}
-
-// Greens
-@function get-green($key: "100") {
-  @return map-get($greens, $key);
-}
-
-// Yellows
-@function get-yellow($key: "100") {
-  @return map-get($yellows, $key);
-}
-
-// Teals
-@function get-teal($key: "200") {
-  @return map-get($teals, $key);
-}
diff --git a/src/assets/styles/_modal.scss b/src/assets/styles/_modal.scss
index b20327e7..5d3b6014 100644
--- a/src/assets/styles/_modal.scss
+++ b/src/assets/styles/_modal.scss
@@ -1,7 +1,7 @@
 .modal-header {
   .close {
     font-weight: normal;
-    color: $gray-900;
+    color: $dark;
     opacity: 1;
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss
index 09240705..66cebda2 100644
--- a/src/assets/styles/_obmc-custom.scss
+++ b/src/assets/styles/_obmc-custom.scss
@@ -1,6 +1,5 @@
 @import "./variables";
 @import "~bootstrap/scss/functions";
-@import "./functions";
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";
 @import "./motion";
diff --git a/src/assets/styles/_table.scss b/src/assets/styles/_table.scss
index 069a37c3..528cb805 100644
--- a/src/assets/styles/_table.scss
+++ b/src/assets/styles/_table.scss
@@ -13,6 +13,6 @@ table {
 .thead-light.thead-light {
   th {
     border: none;
-    color: $gray-900;
+    color: $dark;
   }
 }
\ No newline at end of file