Update application navigation colors

- Current navigation color did not match mockup
- Replace color variables with theme variables in .vue file
- Add $gray-500
- Delete the map-remove functions. Maps are based on the added
properties
- Increase navigaton icon size
- Add _variables.scss file for overrides to Bootstrap Sass
variables and adding custom variables

Testing:
1. Navigation item for current page will have a dark background,
light text, and a blue border.
2. Hovering over an active navigation item will display the cursor as
the default arrow.

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

3 files changed, 33 insertions, 32 deletions

diff --git a/src/assets/styles/_colors.scss b/src/assets/styles/_colors.scss
index 4a8b62c9..e27984bc 100644
--- a/src/assets/styles/_colors.scss
+++ b/src/assets/styles/_colors.scss
@@ -1,14 +1,16 @@
 // Custom Color system
-$white: #fff;
-$gray-100: #fafbfc; // gray-10
-$gray-200: #f0f2f5; // gray-20
-$gray-300: #dcdee0; // gray-30
-$gray-400: #cccccc; // gray-40
-$gray-600: #999999; // gray-60
-$gray-700: #495057; // gray-70
-$gray-800: #666666; // gray-80
-$gray-900: #333333; // gray-100
 $black: #000;
+$white: #fff;
+
+$gray-100: #fafafa;
+$gray-200: #f4f4f4;
+$gray-300: #dcdee0;
+$gray-400: #cccccc;
+$gray-500: #B3B3B3;
+$gray-600: #999999;
+$gray-700: #666666;
+$gray-800: #333333;
+$gray-900: #161616;
 
 $blue-10: #eff2fb;
 $blue-20: #ccd7f4;
@@ -86,12 +88,14 @@ $colors: (
 
 $primary: $blue;
 $secondary: $gray-600;
+$secondary-dark: $gray-800;
+$secondary-light: $gray-200;
 $success: $green;
 $info: $teal;
 $warning: $yellow;
 $danger: $red;
 $light: $gray-100;
-$dark: $black;
+$dark: $gray-900;
 
 // Bootstrap will generate CSS variables for
 // all of the colors in this map.
@@ -101,9 +105,11 @@ $theme-colors: (
   "primary-dark": $blue-100,
   "primary-light": $blue-10,
   "secondary": $secondary,
-  "secondary-dark": $gray-800,
-  "secondary-light": $gray-200,
+  "secondary-dark": $secondary-dark,
+  "secondary-light": $secondary-light,
   "danger": $danger,
   "warning": $warning,
-  "info": $info
+  "info": $info,
+  "dark": $dark,
+  "light": $light
 );
diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss
index 7328bb05..09240705 100644
--- a/src/assets/styles/_obmc-custom.scss
+++ b/src/assets/styles/_obmc-custom.scss
@@ -1,27 +1,10 @@
-$enable-rounded: false;
-$enable-validation-icons: false;
-$responsive-layout-bp: lg;
-$header-height: 56px;
-$navigation-width: 300px;
-
-// Required
+@import "./variables";
 @import "~bootstrap/scss/functions";
 @import "./functions";
-@import "./colors";
-@import "./motion";
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";
+@import "./motion";
 
-// Removing colors we do not have maps for or need for
-// the OpenBMC theme. There are some that are required by
-// Bootstrap keys that cannot be removed from theme colors
-// are primary, success, and danger.
-// https://getbootstrap.com/docs/4.0/getting-started/theming/#required-keys
-$grays: map-remove($grays, "500");
-$colors: map-remove($colors, "indigo", "purple", "pink", "orange", "cyan");
-$colors: map-remove($theme-colors, "light", "dark");
-
-// Optional
 @import "~bootstrap/scss/root";
 @import "~bootstrap/scss/reboot";
 @import "~bootstrap/scss/alert";
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
new file mode 100644
index 00000000..f59cfc1c
--- /dev/null
+++ b/src/assets/styles/_variables.scss
@@ -0,0 +1,12 @@
+@import "./colors";
+
+// Override Bootstrap Variables - node_modules/Bootstrap/scss/_variables.scss
+$enable-rounded: false;
+$enable-validation-icons: false;
+
+// OpenBMC Custom Variables
+$responsive-layout-bp: lg;
+$header-height: 56px;
+$navigation-width: 300px;
+$container-bgd: $gray-200;
+$primary-nav-hover: $gray-300;
\ No newline at end of file