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

11 files changed, 40 insertions, 42 deletions

diff --git a/src/assets/styles/bmc/custom/_alert.scss b/src/assets/styles/bmc/custom/_alert.scss
index 0b7b518a..1d28f2ae 100644
--- a/src/assets/styles/bmc/custom/_alert.scss
+++ b/src/assets/styles/bmc/custom/_alert.scss
@@ -2,7 +2,7 @@
     display: flex;
     padding: $spacer;
     border-width: 0 0 0 3px;
-    color: $gray-800;
+    color: gray("800");
     margin-bottom: $spacer;
 
     &.small {
@@ -45,20 +45,20 @@
     }
 
     &.alert-info {
-      border-left-color: $info;
+      border-left-color: theme-color("info");
       background-color: $info-light;
-      fill: $info;
+      fill: theme-color("info");
     }
 
     &.alert-danger {
-      border-left-color: $danger;
+      border-left-color: theme-color("danger");
       background-color: $danger-light;
-      fill: $danger;
+      fill: theme-color("danger");
     }
 
     &.alert-warning {
-      border-left-color: $warning;
+      border-left-color: theme-color("warning");
       background-color: $warning-light;
-      fill: $warning;
+      fill: theme-color("warning");
     }
   }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_badge.scss b/src/assets/styles/bmc/custom/_badge.scss
index 7acd73a0..87b96e61 100644
--- a/src/assets/styles/bmc/custom/_badge.scss
+++ b/src/assets/styles/bmc/custom/_badge.scss
@@ -17,5 +17,5 @@
 
 .badge-primary {
   background-color: $info-light;
-  color: $info;
+  color: theme-color("info");
 }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_base.scss b/src/assets/styles/bmc/custom/_base.scss
index 39a4aaa7..5a6a11ba 100644
--- a/src/assets/styles/bmc/custom/_base.scss
+++ b/src/assets/styles/bmc/custom/_base.scss
@@ -1,7 +1,7 @@
 dt,
 legend,
 label {
-  color: $gray-800;
+  color: gray("800");
   font-size: 14px;
   font-weight: 400;
 }
diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
index b9b8073b..3f111302 100644
--- a/src/assets/styles/bmc/custom/_buttons.scss
+++ b/src/assets/styles/bmc/custom/_buttons.scss
@@ -21,23 +21,23 @@
 }
 
 .btn-link {
-  fill: $primary;
+  fill: theme-color("primary");
   text-decoration: none !important;
 
   &:focus {
     box-shadow: $btn-focus-box-shadow;
   }
   &:hover {
-    fill: darken($primary, 15%);
+    fill: darken(theme-color("primary"), 15%);
   }
 }
 
 .btn:disabled {
-  color: $gray-600;
+  color: gray("600");
   fill: currentColor;
 
   &:not(.btn-link) {
-    border-color: $gray-400;
-    background-color: $gray-400;
+    border-color: gray("400");
+    background-color: gray("400");
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_calendar.scss b/src/assets/styles/bmc/custom/_calendar.scss
index bf7572e2..641e4ed1 100644
--- a/src/assets/styles/bmc/custom/_calendar.scss
+++ b/src/assets/styles/bmc/custom/_calendar.scss
@@ -2,7 +2,7 @@
   .btn {
     &:hover {
       background: none;
-      color: $dark;
+      color: theme-color("dark");
     }
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 8d3ed9e4..1195f6cb 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -1,11 +1,11 @@
 .form-text {
   margin-top: -$spacer / 4;
   margin-bottom: $spacer / 2;
-  color: $gray-800;
+  color: gray("800");
 }
 
 .col-form-label {
-  color: $gray-800;
+  color: gray("800");
   font-size: 14px;
 }
 
@@ -17,12 +17,12 @@
 .custom-control-label,
 .form-control {
   //important needed to override validation colors on radio labels
-  color: $dark !important;
+  color: theme-color("dark") !important;
   font-size: 16px;
-  border-color: $gray-400 !important;
+  border-color: gray("400") !important;
   &.is-invalid,
   &:invalid {
-    border-bottom: 2px solid $danger !important;
+    border-bottom: 2px solid theme-color("danger") !important;
   }
 }
 
@@ -31,7 +31,7 @@
     & + .custom-control-label {
       // Disabled label for checkbox, radio,
       // switch bootstrap form components
-      color: $gray-700!important;
+      color: gray("700")!important;
     }
   }
 }
@@ -46,11 +46,11 @@
   white-space: nowrap;
   margin-right: -$spacer;
   &.btn-link-primary {
-    color: $primary;
+    color: theme-color("primary");
     fill: currentColor;
   }
 }
 
 .form-background {
-  background-color: $container-bgd;
+  background-color: gray("200");
 }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_modal.scss b/src/assets/styles/bmc/custom/_modal.scss
index 5d3b6014..a34a11bf 100644
--- a/src/assets/styles/bmc/custom/_modal.scss
+++ b/src/assets/styles/bmc/custom/_modal.scss
@@ -1,7 +1,7 @@
 .modal-header {
   .close {
     font-weight: normal;
-    color: $dark;
+    color: theme-color("dark");
     opacity: 1;
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_pagination.scss b/src/assets/styles/bmc/custom/_pagination.scss
index 4fed21ba..0c2ac85c 100644
--- a/src/assets/styles/bmc/custom/_pagination.scss
+++ b/src/assets/styles/bmc/custom/_pagination.scss
@@ -12,9 +12,9 @@
 
 .b-pagination {
   .page-item.active button {
-    color: $dark;
+    color: theme-color("dark");
     background-color: $white;
     border-color: $border-color;
-    box-shadow: inset 0px -3px $primary;
+    box-shadow: inset 0px -3px theme-color("primary");
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss
index b20feb0d..52bdcff2 100644
--- a/src/assets/styles/bmc/custom/_tables.scss
+++ b/src/assets/styles/bmc/custom/_tables.scss
@@ -3,20 +3,20 @@
   z-index: $zindex-dropdown;
 
   td {
-    border-top: 1px solid $gray-300;
-    border-bottom: 1px solid $gray-300;
+    border-top: 1px solid gray("300");
+    border-bottom: 1px solid gray("300");
     &:first-of-type {
-      border-left: 1px solid $gray-300;
+      border-left: 1px solid gray("300");
     }
     &:last-of-type {
-      border-right: 1px solid $gray-300;
+      border-right: 1px solid gray("300");
     }
   }
 
   // thead-light added for specificiy
   .thead-light th {
     border: none;
-    color: $dark;
+    color: theme-color("dark");
   }
 
   .status-icon svg {
@@ -34,7 +34,7 @@
   }
 
   .b-table-details {
-    background-color: $light;
+    background-color: theme-color("light");
     td {
       padding-left: calc(50px + (#{$table-cell-padding} * 2));
     }
@@ -57,7 +57,7 @@
       width: 50px;
     }
     svg {
-      fill: $dark;
+      fill: theme-color("dark");
     }
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_toasts.scss b/src/assets/styles/bmc/custom/_toasts.scss
index 9295b17e..c3e91b8a 100644
--- a/src/assets/styles/bmc/custom/_toasts.scss
+++ b/src/assets/styles/bmc/custom/_toasts.scss
@@ -14,31 +14,31 @@
 .toast-header {
   background-color: inherit!important; //override specificity
   border: none;
-  color: $dark!important; //override specificity
+  color: theme-color("dark")!important; //override specificity
   padding-bottom: 0;
 }
 
 .toast-body {
-  color: $dark;
+  color: theme-color("dark");
   padding-top: 0;
 }
 
 .b-toast-success .toast {
-  border-left-color: $success!important;
+  border-left-color: theme-color("success")!important;
   background-color: $success-light;
 }
 
 .b-toast-info .toast {
-  border-left-color: $info!important;
+  border-left-color: theme-color("info")!important;
   background-color: $info-light;
 }
 
 .b-toast-danger .toast {
-  border-left-color: $danger!important;
+  border-left-color: theme-color("danger")!important;
   background-color: $danger-light;
 }
 
 .b-toast-warning .toast {
-  border-left-color: $warning!important;
+  border-left-color: theme-color("warning")!important;
   background-color: $warning-light;
 }
\ No newline at end of file
diff --git a/src/assets/styles/bmc/helpers/_variables.scss b/src/assets/styles/bmc/helpers/_variables.scss
index cbee2dfe..ea300ec7 100644
--- a/src/assets/styles/bmc/helpers/_variables.scss
+++ b/src/assets/styles/bmc/helpers/_variables.scss
@@ -8,6 +8,4 @@ $transition-collapse:         height $duration--slow-01 $standard-easing--expres
 // 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
+$navigation-width: 300px;
\ No newline at end of file