From 01da81870818c364a67d9ba97ca84aec9afbcc4d Mon Sep 17 00:00:00 2001
From: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Date: Wed, 8 Jul 2020 15:46:43 -0700
Subject: 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/AppHeader/AppHeader.vue         | 12 ++++++------
 src/components/AppNavigation/AppNavigation.vue | 16 ++++++++--------
 src/components/Global/PageSection.vue          |  2 +-
 src/components/Global/Search.vue               |  2 +-
 src/components/Global/TableToolbar.vue         |  2 +-
 5 files changed, 17 insertions(+), 17 deletions(-)

(limited to 'src/components')

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index a69d6d9f..7f18e1d2 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -179,7 +179,7 @@ export default {
   }
 
   .nav-item {
-    fill: $light;
+    fill: theme-color('light');
   }
 
   .navbar {
@@ -194,7 +194,7 @@ export default {
 
     .helper-menu {
       @include media-breakpoint-down(sm) {
-        background-color: $gray-800;
+        background-color: gray('800');
         width: 100%;
         justify-content: flex-end;
 
@@ -217,7 +217,7 @@ export default {
   }
 
   .nav-trigger {
-    fill: $light;
+    fill: theme-color('light');
     width: $header-height;
     height: $header-height;
     transition: none;
@@ -227,12 +227,12 @@ export default {
     }
 
     &:hover {
-      fill: $light;
-      background-color: $dark;
+      fill: theme-color('light');
+      background-color: theme-color('dark');
     }
 
     &.open {
-      background-color: $gray-800;
+      background-color: gray('800');
     }
 
     @include media-breakpoint-up($responsive-layout-bp) {
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 175b0aa0..37f0f717 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -212,16 +212,16 @@ svg {
   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 @@ svg {
 .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 @@ svg {
     bottom: 0;
     left: 0;
     width: 4px;
-    background-color: $primary;
+    background-color: theme-color('primary');
   }
 }
 
@@ -252,7 +252,7 @@ svg {
   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) {
diff --git a/src/components/Global/PageSection.vue b/src/components/Global/PageSection.vue
index 58119986..6f44a3a3 100644
--- a/src/components/Global/PageSection.vue
+++ b/src/components/Global/PageSection.vue
@@ -31,7 +31,7 @@ h2 {
     content: '';
     display: block;
     width: 100px;
-    border: 1px solid $gray-300;
+    border: 1px solid gray('300');
     margin-top: 10px;
   }
 }
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
index b4be4637..c385740b 100644
--- a/src/components/Global/Search.vue
+++ b/src/components/Global/Search.vue
@@ -59,6 +59,6 @@ export default {
   left: 10px;
   top: 12px;
   z-index: 4;
-  stroke: $gray-400;
+  stroke: gray('400');
 }
 </style>
diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
index 05b96699..2fbbd6cd 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -79,7 +79,7 @@ $toolbar-height: 46px;
 
 .toolbar-content {
   height: $toolbar-height;
-  background-color: $primary;
+  background-color: theme-color('primary');
   color: $white;
   position: absolute;
   left: 0;
-- 
cgit v1.2.3