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

6 files changed, 17 insertions, 27 deletions

diff --git a/src/assets/styles/bmc/custom/_alert.scss b/src/assets/styles/bmc/custom/_alert.scss
index 741eb692..0e78ba64 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
diff --git a/src/assets/styles/bmc/custom/_badge.scss b/src/assets/styles/bmc/custom/_badge.scss
index 87b96e61..0b88b499 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
diff --git a/src/assets/styles/bmc/custom/_toasts.scss b/src/assets/styles/bmc/custom/_toasts.scss
index c3e91b8a..42b91dbb 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
diff --git a/src/assets/styles/bmc/helpers/_colors.scss b/src/assets/styles/bmc/helpers/_colors.scss
index 6e090fbc..f300d5c3 100644
--- a/src/assets/styles/bmc/helpers/_colors.scss
+++ b/src/assets/styles/bmc/helpers/_colors.scss
@@ -2,16 +2,9 @@
 $black: #000;
 $white: #fff;
 
-$blue-100: #eff2fb;
 $blue-500: #2d60e5;
-
-$green-100: #ecfdf1;
 $green-500: #0a7d06;
-
-$red-100: #feeeed;
 $red-500: #da1416;
-
-$yellow-100: #fff8e4;
 $yellow-500: #efc100;
 
 $gray-100: #f4f4f4;
@@ -39,13 +32,4 @@ $light: $gray-100;
 $primary: $blue;
 $secondary: $gray-800;
 $success: $green;
-$warning: $yellow;
-
-// Sass Color Variable Accents
-// Used for component styles and are
-// not available as variants
-$danger-light: $red-100;
-$info-light: $blue-100;
-$warning-light: $yellow-100;
-$success-light: $green-100;
-
+$warning: $yellow;
\ No newline at end of file
diff --git a/src/assets/styles/bmc/helpers/_functions.scss b/src/assets/styles/bmc/helpers/_functions.scss
new file mode 100644
index 00000000..456caf36
--- /dev/null
+++ b/src/assets/styles/bmc/helpers/_functions.scss
@@ -0,0 +1,5 @@
+// This function is usually used to get a lighter
+// theme variant color to use as a background color
+@function theme-color-light($variant) {
+  @return theme-color-level($variant, -11.3);
+}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/helpers/_index.scss b/src/assets/styles/bmc/helpers/_index.scss
index e4abf9c5..ce0631a7 100644
--- a/src/assets/styles/bmc/helpers/_index.scss
+++ b/src/assets/styles/bmc/helpers/_index.scss
@@ -1,3 +1,4 @@
 @import "./colors";
 @import "./motion";
-@import "./variables";
\ No newline at end of file
+@import "./variables";
+@import "./functions";
\ No newline at end of file