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

1 files changed, 19 insertions, 13 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
 );