commit 01da81870818c364a67d9ba97ca84aec9afbcc4d
author Yoshie Muranaka <yoshiemuranaka@gmail.com> Wed Jul 08 15:46:43 2020 -0700
committer Derick Montague <derick.montague@ibm.com> Mon Jul 20 22:28:16 2020 +0000
tree 5962f489c9f86a46b3dab40734b882723a347f42
parent 330585760167d233a67a9301be991ba26b8e57df

Update use of Sass variables for better theming

Use Bootstrap color functions for theme-colors and grays instead
of directly referencing Sass variable to allow more flexible
theming.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Id08b77ff6df3bdf99400dcdfe964853706f1070f

src/components/AppNavigation/AppNavigation.vue

diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 175b0aa..37f0f71 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -212,16 +212,16 @@
   font-weight: $headings-font-weight;
   padding-left: $spacer; // defining consistent padding for links and buttons
   padding-right: $spacer;
-  color: $secondary;
+  color: theme-color('secondary');
 
   &:hover {
-    background-color: $primary-nav-hover;
-    color: $dark;
+    background-color: gray('300');
+    color: theme-color('dark');
   }
 
   &:focus {
     box-shadow: $btn-focus-box-shadow;
-    color: $dark;
+    color: theme-color('dark');
   }
 }
 
@@ -229,8 +229,8 @@
 .nav-link--current:hover,
 .nav-link--current:focus {
   font-weight: $headings-font-weight;
-  background-color: $secondary;
-  color: $light;
+  background-color: theme-color('secondary');
+  color: theme-color('light');
   cursor: default;
 
   &::before {
@@ -240,7 +240,7 @@
     bottom: 0;
     left: 0;
     width: 4px;
-    background-color: $primary;
+    background-color: theme-color('primary');
   }
 }
 
@@ -252,7 +252,7 @@
   left: 0;
   z-index: $zindex-fixed;
   overflow-y: auto;
-  background-color: $container-bgd;
+  background-color: gray('200');
   transform: translateX(-$navigation-width);
   transition: transform $exit-easing--productive $duration--moderate-02;
   @include media-breakpoint-down(md) {