commit 1f4eaa1695bde5891a786784a8845b54ad18e1f9
author Yoshie Muranaka <yoshiemuranaka@gmail.com> Mon Aug 10 11:17:12 2020 -0700
committer Yoshie Muranaka <yoshiemuranaka@gmail.com> Mon Aug 17 14:54:03 2020 +0000
tree 55ec0e05250824df30674382207e39e8bfd90acc
parent f0a1ac7eb7cf724d412acd2c0c9a3bf3d1fcc204

Update use of Sass variable background variant colors

The hardcoded Sass variable assignments to lighter variant background colors
does not work well with the theme-color functions that are used.

Use Bootstrap's built in theme-color-level function to programatically get
a lighter variant color to use for component backgrounds.

https://getbootstrap.com/docs/4.5/getting-started/theming/#functions

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

src/assets/styles/bmc/custom/_alert.scss

diff --git a/src/assets/styles/bmc/custom/_alert.scss b/src/assets/styles/bmc/custom/_alert.scss
index 741eb69..0e78ba6 100644
--- a/src/assets/styles/bmc/custom/_alert.scss
+++ b/src/assets/styles/bmc/custom/_alert.scss
@@ -46,25 +46,25 @@
 
     &.alert-info {
       border-left-color: theme-color("info");
-      background-color: $info-light;
+      background-color: theme-color-light("info");
       fill: theme-color("info");
     }
 
     &.alert-success {
       border-left-color: theme-color("success");
-      background-color: $success-light;
+      background-color: theme-color-light("success");
       fill: theme-color("success");
     }
 
     &.alert-danger {
       border-left-color: theme-color("danger");
-      background-color: $danger-light;
+      background-color: theme-color-light("danger");
       fill: theme-color("danger");
     }
 
     &.alert-warning {
       border-left-color: theme-color("warning");
-      background-color: $warning-light;
+      background-color: theme-color-light("warning");
       fill: theme-color("warning");
     }
   }
\ No newline at end of file

src/assets/styles/bmc/custom/_badge.scss

diff --git a/src/assets/styles/bmc/custom/_badge.scss b/src/assets/styles/bmc/custom/_badge.scss
index 87b96e6..0b88b49 100644
--- a/src/assets/styles/bmc/custom/_badge.scss
+++ b/src/assets/styles/bmc/custom/_badge.scss
@@ -16,6 +16,6 @@
 }
 
 .badge-primary {
-  background-color: $info-light;
+  background-color: theme-color-light("info");
   color: theme-color("info");
 }
\ No newline at end of file

src/assets/styles/bmc/custom/_toasts.scss

diff --git a/src/assets/styles/bmc/custom/_toasts.scss b/src/assets/styles/bmc/custom/_toasts.scss
index c3e91b8..42b91db 100644
--- a/src/assets/styles/bmc/custom/_toasts.scss
+++ b/src/assets/styles/bmc/custom/_toasts.scss
@@ -25,20 +25,20 @@
 
 .b-toast-success .toast {
   border-left-color: theme-color("success")!important;
-  background-color: $success-light;
+  background-color: theme-color-light("success")!important;
 }
 
 .b-toast-info .toast {
   border-left-color: theme-color("info")!important;
-  background-color: $info-light;
+  background-color: theme-color-light("info")!important;
 }
 
 .b-toast-danger .toast {
   border-left-color: theme-color("danger")!important;
-  background-color: $danger-light;
+  background-color: theme-color-light("danger")!important;
 }
 
 .b-toast-warning .toast {
   border-left-color: theme-color("warning")!important;
-  background-color: $warning-light;
+  background-color: theme-color-light("warning")!important;
 }
\ No newline at end of file