12 files changed, 277 insertions, 127 deletions

diff --git a/src/assets/styles/bmc/_sila/_alert.scss b/src/assets/styles/bmc/_sila/_alert.scss
index d85e9127..c986eed6 100644
--- a/src/assets/styles/bmc/_sila/_alert.scss
+++ b/src/assets/styles/bmc/_sila/_alert.scss
@@ -2,8 +2,10 @@
   display: flex;
   padding: $spacer;
   border-width: 0 0 0 3px;
-  color: gray("800");
   margin-bottom: $spacer;
+  @include themify($themes) {
+    color: themed("text-primary");
+  }
 
   &.small {
     padding: $spacer / 2;
@@ -46,25 +48,33 @@
 
   &.alert-info {
     border-left-color: theme-color("info");
-    background-color: theme-color-light("info");
     fill: theme-color("info");
+    @include themify($themes) {
+      background-color: themed("blue-10");
+    }
   }
 
   &.alert-success {
     border-left-color: theme-color("success");
-    background-color: theme-color-light("success");
     fill: theme-color("success");
+    @include themify($themes) {
+      background-color: themed("green-10");
+    }
   }
 
   &.alert-danger {
-    border-left-color: theme-color("danger");
-    background-color: theme-color-light("danger");
-    fill: theme-color("danger");
+    @include themify($themes) {
+      border-left-color: themed("red-40");
+      background-color: themed("red-5");
+      fill: themed("red-40");
+    }
   }
 
   &.alert-warning {
     border-left-color: theme-color("warning");
-    background-color: theme-color-light("warning");
     fill: theme-color("warning");
+    @include themify($themes) {
+      background-color: themed("yellow-10");
+    }
   }
 }
diff --git a/src/assets/styles/bmc/_sila/_badge.scss b/src/assets/styles/bmc/_sila/_badge.scss
index 7d59e9a6..62ff0e09 100644
--- a/src/assets/styles/bmc/_sila/_badge.scss
+++ b/src/assets/styles/bmc/_sila/_badge.scss
@@ -16,6 +16,8 @@
 }
 
 .badge-primary {
-  background-color: theme-color-light("info");
   color: theme-color("info");
+  @include themify($themes) {
+    background-color: themed("blue-10");
+  }
 }
diff --git a/src/assets/styles/bmc/_sila/_base.scss b/src/assets/styles/bmc/_sila/_base.scss
index fc8365d8..dc1e1508 100644
--- a/src/assets/styles/bmc/_sila/_base.scss
+++ b/src/assets/styles/bmc/_sila/_base.scss
@@ -4,7 +4,9 @@
 /* W3C standard: Firefox only */
 * {
   scrollbar-width: thin;
-  scrollbar-color: rgba(12, 32, 64, 0.7) transparent;
+  @include themify($themes) {
+    scrollbar-color: themed("gray-20") transparent;
+  }
 }
 
 /* For Chrome/Edge/Safari */
@@ -25,9 +27,11 @@
 }
 
 *::-webkit-scrollbar-thumb {
-  background-color: rgba(12, 32, 64, 0.7);
   border-radius: 2px;
   border: 2px solid transparent;
+  @include themify($themes) {
+    background-color: themed("gray-20");
+  }
 }
 
 //
@@ -81,19 +85,21 @@ label {
 }
 
 .nav-link--current {
-  background-color: $red-light-background !important;
+  background-color: $red-5 !important;
   color: $red !important;
   &:hover,
   &:focus {
-    background-color: $red-light-background !important;
+    background-color: $red-5 !important;
     color: $red !important;
   }
 }
 
 .btn-link:active,
 .nav-link:active {
-  background-color: $red-light-background !important;
   color: $red !important;
+  @include themify($themes) {
+    background-color: themed("red-5") !important;
+  }
 }
 
 .app-header .navbar-text,
diff --git a/src/assets/styles/bmc/_sila/_buttons.scss b/src/assets/styles/bmc/_sila/_buttons.scss
index 49d8e642..2ca971f8 100644
--- a/src/assets/styles/bmc/_sila/_buttons.scss
+++ b/src/assets/styles/bmc/_sila/_buttons.scss
@@ -6,6 +6,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: space-around;
+  @include themify($themes) {
+    color: themed("text-primary");
+  }
   svg {
     margin-right: $spacer / 4;
   }
@@ -14,8 +17,9 @@
     fill: currentColor;
     box-shadow: none !important;
     &:not(.btn-link) {
-      border-color: gray("400");
-      background-color: gray("400");
+      @include themify($themes) {
+        background-color: themed("red-disabled");
+      }
     }
   }
 }
@@ -25,6 +29,7 @@
   border-radius: $border-radius;
   border: none;
   box-shadow: 1px 2px 2px -1px #4f252566 inset;
+  color: $white !important;
   &:hover {
     background-color: $red-hover;
   }
@@ -36,7 +41,7 @@
   }
   &:focus {
     border: none;
-    box-shadow: 0px 0px 0px 4px $red-shadow;
+    box-shadow: 0px 0px 0px 4px $red-50;
     background-color: $red;
   }
   &:active {
@@ -47,30 +52,32 @@
 }
 
 .btn-secondary {
-  background-color: $gray-5;
   color: $red;
   border-radius: $border-radius;
   border: none;
   box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 10%) inset;
-  &:hover {
-    background-color: $gray-5-hover;
-    color: $red;
-  }
-  &:focus {
-    border: none;
-    box-shadow: 0px 0px 0px 4px $red-shadow;
-    color: $red;
-    background-color: $gray-5-hover;
-  }
-  &:not(:disabled):not(.disabled):active:focus,
-  &:focus-visible {
-    border: none;
-    box-shadow: none;
-    color: $red;
-    background-color: $gray-5-hover;
-  }
-  &:active {
-    background-color: $gray-5-hover;
+  @include themify($themes) {
+    background-color: themed("gray-5");
+    &:hover {
+      background-color: themed("gray-5-hover");
+      color: $red;
+    }
+    &:focus {
+      border: none;
+      box-shadow: 0px 0px 0px 4px $red-50;
+      color: $red;
+      background-color: themed("gray-5-hover");
+    }
+    &:not(:disabled):not(.disabled):active:focus,
+    &:focus-visible {
+      border: none;
+      box-shadow: none;
+      color: $red;
+      background-color: themed("gray-5-hover");
+    }
+    &:active {
+      background-color: themed("gray-5-hover");
+    }
   }
 }
 
@@ -132,16 +139,20 @@
 
 // Global style for all button link
 .btn-link {
-  color: $text-primary;
   text-decoration: none !important;
   border-radius: $border-radius;
   margin-right: 5px;
-  &:hover {
-    background-color: gray("200");
-    color: theme-color("primary");
-  }
-  &:active {
-    background-color: gray("300");
+  @include themify($themes) {
+    color: themed("text-primary");
+
+    &:hover {
+      background-color: themed("gray-10");
+      color: theme-color("primary");
+    }
+
+    &:active {
+      background-color: themed("gray-20") !important;
+    }
   }
   &:disabled {
     box-shadow: $btn-focus-box-shadow;
@@ -189,7 +200,9 @@
     box-shadow: none;
   }
   &:hover {
-    color: $text-primary;
+    @include themify($themes) {
+      color: themed("text-primary");
+    }
   }
   .icon-expand {
     margin-left: auto;
diff --git a/src/assets/styles/bmc/_sila/_card.scss b/src/assets/styles/bmc/_sila/_card.scss
index d7ac04d2..f8ae2638 100644
--- a/src/assets/styles/bmc/_sila/_card.scss
+++ b/src/assets/styles/bmc/_sila/_card.scss
@@ -1,21 +1,34 @@
 .card {
   border-radius: $border-radius;
+  @include themify($themes) {
+    color: themed("text-primary");
+    background-color: themed("back-light") !important;
+    border-color: themed("back-light") !important;
+    .tabs {
+      background-color: themed("surface-primary") !important;
+    }
+  }
   .bg-success {
-    background-color: theme-color-light('success')!important;
+    background-color: theme-color-light("success") !important;
   }
 }
 
 .card-header {
+  @include themify($themes) {
+    background-color: themed("back-light") !important;
+  }
   .card-header-tabs {
     border: none !important;
 
     .nav-link {
       border: none !important;
-      color: $text-secondary;
       font-weight: 500 !important;
       background: none !important;
+      @include themify($themes) {
+        color: themed("text-secondary");
+      }
       &:hover {
-        color: $red-hover
+        color: $red-hover;
       }
     }
 
@@ -32,6 +45,6 @@
 
 .card-buttons > a {
   font-weight: 500;
-  font-size: .825rem;
+  font-size: 0.825rem;
   vertical-align: baseline;
 }
diff --git a/src/assets/styles/bmc/_sila/_dropdown.scss b/src/assets/styles/bmc/_sila/_dropdown.scss
index 02e4e855..261d91f1 100644
--- a/src/assets/styles/bmc/_sila/_dropdown.scss
+++ b/src/assets/styles/bmc/_sila/_dropdown.scss
@@ -3,6 +3,9 @@
   z-index: $zindex-dropdown + 1;
   padding: $spacer / 2;
   border-radius: $border-radius;
+  @include themify($themes) {
+    background-color: themed("surface-primary");
+  }
 }
 
 .dropdown-item {
@@ -10,9 +13,11 @@
   margin: $spacer / 4;
   width: auto;
   border-radius: $border-radius;
+  @include themify($themes) {
+    color: themed("text-primary");
+  }
   &:hover {
     background-color: $red-hover;
-    color: $white;
   }
   &:active {
     background-color: $red-active;
diff --git a/src/assets/styles/bmc/_sila/_forms.scss b/src/assets/styles/bmc/_sila/_forms.scss
index f993804f..4bc8f626 100644
--- a/src/assets/styles/bmc/_sila/_forms.scss
+++ b/src/assets/styles/bmc/_sila/_forms.scss
@@ -4,14 +4,34 @@
   line-height: $form-line-height;
   margin-top: -$spacer / 4;
   margin-bottom: $spacer / 2;
-  color: gray("700") !important;
+  @include themify($themes) {
+    color: themed("text-tretiatry") !important;
+  }
 }
 
 // Legend label
 .col-form-label {
-  color: gray("800");
   font-size: $form-label-font-size;
   line-height: $form-line-height;
+  @include themify($themes) {
+    color: themed("text-secondary");
+  }
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:focus {
+  @include themify($themes) {
+    -webkit-box-shadow: 0 0 0 50px themed("gray-passwordfield") inset; /*your box-shadow*/
+    -webkit-text-fill-color: themed("text-secondary");
+  }
+}
+
+input:-webkit-autofill:focus {
+  @include themify($themes) {
+    -webkit-box-shadow: 0 0 0 50px themed("gray-passwordfield") inset; /*your box-shadow*/
+    -webkit-text-fill-color: themed("text-secondary");
+    border: 1px solid theme-color("danger") !important;
+  }
 }
 
 div:not(.search-global) > .form-group {
@@ -33,7 +53,7 @@ div:not(.search-global) > .form-group {
     right: 10px;
     top: 0;
     margin-right: 0;
-    @include media-breakpoint-down(sm) { 
+    @include media-breakpoint-down(sm) {
       top: -25px;
     }
   }
@@ -50,16 +70,12 @@ div:not(.search-global) > .form-group {
     }
   }
   .custom-select {
-    background-color: $gray-5;
     border: none;
   }
   .custom-select:disabled,
   .form-control:disabled {
     position: initial;
   }
-  .form-control:disabled:hover {
-    background-color: #cccccc;
-  }
   .input-group-text {
     border: none;
     background-color: $gray-5;
@@ -84,33 +100,49 @@ div:not(.search-global) > .form-group {
   }
   label {
     position: relative;
-    color: $text-tretiatry;
     margin-left: 10px;
     margin-bottom: $spacer / 4;
+    @include themify($themes) {
+      color: themed("text-tretiatry");
+    }
     span {
       display: block;
     }
   }
 }
 .b-form-datepicker label {
-    margin-left: 0px !important;
+  margin-left: 0px !important;
 }
 
 .custom-select,
 .form-control,
 .input-group-text {
   border-radius: $border-radius;
-  background-color: $white;
+  @include themify($themes) {
+    color: themed("text-secondary");
+    background-color: themed("gray-5") !important;
+    option {
+      height: 18px;
+      color: themed("text-secondary");
+      background-color: themed("gray-20");
+    }
+    option[disabled="disabled"] {
+      color: themed("text-primary");
+      background-color: themed("gray-20");
+    }
+  }
 }
 
 .custom-select,
 .form-control {
-  &:disabled {
-    background-color: gray("400");
-    color: gray("600");
-  }
-  &::placeholder {
-    color: gray("600");
+  @include themify($themes) {
+    &:disabled {
+      color: themed("text-quaternary") !important;
+      background-color: themed("gray-20") !important;
+    }
+    &::placeholder {
+      color: themed("text-quaternary");
+    }
   }
   &.is-invalid,
   &:invalid {
@@ -128,16 +160,19 @@ div:not(.search-global) > .form-group {
 }
 
 .form-control {
-  color: $text-secondary;
   border-radius: $border-radius;
   border: none;
-  background-color: $gray-5;
-  font-size: 0.875rem;
-  &:focus {
-    color: $text-secondary;
-  }
-  &:hover {
-    background-color: $gray-5-hover;
+  @include themify($themes) {
+    color: themed("text-secondary");
+    background-color: themed("gray-5");
+    font-size: 0.875rem;
+
+    &:focus {
+      color: themed("text-secondary");
+    }
+    ul > li > div > input {
+      color: themed("text-secondary") !important;
+    }
   }
 }
 
@@ -200,9 +235,11 @@ div:not(.search-global) > .form-group {
   .custom-control-label::before,
   .custom-control-label::after {
     border-radius: $border-radius / 2;
-    background-color: #fff;
-    border: 2px solid $on-surface-secondary;
     box-shadow: none;
+    @include themify($themes) {
+      border: 2px solid themed("on-surface-secondary");
+      background-color: themed("surface-primary");
+    }
   }
 }
 
@@ -211,20 +248,29 @@ div:not(.search-global) > .form-group {
     background-image: none;
   }
   .custom-control-input:checked ~ .custom-control-label::before {
-    box-shadow: 0px 0px 0px 3px $white inset;
+    @include themify($themes) {
+      box-shadow: 0px 0px 0px 3px themed("surface-primary") inset;
+    }
+  }
+  .custom-control-label::before {
+    @include themify($themes) {
+      background-color: themed("surface-primary");
+    }
   }
 }
 
 .custom-switch {
   width: 28px;
   height: 16px;
-  .custom-control-input ~ .custom-control-label::after {
-    border: 1px solid $gray-20;
-    background: $white;
-  }
-  .custom-control-input ~ .custom-control-label::before {
-    border: 1px solid $gray-20;
-    background: rgba(4, 10, 15, 0.3);
+  @include themify($themes) {
+    .custom-control-input ~ .custom-control-label::after {
+      border: 1px solid themed("gray-30");
+      background: themed("custom-switch-back");
+    }
+    .custom-control-input ~ .custom-control-label::before {
+      border: 1px solid themed("gray-30");
+      background: themed("gray-30");
+    }
   }
 }
 
diff --git a/src/assets/styles/bmc/_sila/_modal.scss b/src/assets/styles/bmc/_sila/_modal.scss
index e67cb777..53895aa4 100644
--- a/src/assets/styles/bmc/_sila/_modal.scss
+++ b/src/assets/styles/bmc/_sila/_modal.scss
@@ -4,6 +4,10 @@
 
 .modal-content {
   border-radius: $border-radius;
+  @include themify($themes) {
+    color: themed("text-secondary");
+    background-color: themed("surface-primary");
+  }
 }
 
 .modal-header {
@@ -35,6 +39,12 @@
   justify-content: flex-start;
 }
 
+.modal-footer {
+  @include themify($themes) {
+    border-top: 1px solid themed("gray-10");
+  }
+}
+
 .file-input_container > .custom-file {
   height: 100%;
 }
diff --git a/src/assets/styles/bmc/_sila/_pagination.scss b/src/assets/styles/bmc/_sila/_pagination.scss
index 8183057e..2b36f79b 100644
--- a/src/assets/styles/bmc/_sila/_pagination.scss
+++ b/src/assets/styles/bmc/_sila/_pagination.scss
@@ -20,10 +20,25 @@
   @include media-breakpoint-up(sm) {
     justify-content: flex-end;
   }
+  .page-item button {
+    @include themify($themes) {
+      color: themed("text-primary");
+      background-color: themed("gray-30");
+      border-color: themed("gray-30");
+    }
+  }
   .page-item.active button {
-    color: theme-color("dark");
-    background-color: color("white");
-    border-color: $border-color;
-    box-shadow: inset 0px -3px theme-color("primary");
+    @include themify($themes) {
+      color: themed("text-primary");
+      background-color: themed("surface-primary");
+      border-color: themed("gray-30");
+    }
+  }
+  .page-item.disabled span {
+    @include themify($themes) {
+      color: themed("text-primary");
+      background-color: themed("surface-secondary");
+      border-color: themed("gray-30");
+    }
   }
 }
diff --git a/src/assets/styles/bmc/_sila/_section-divider.scss b/src/assets/styles/bmc/_sila/_section-divider.scss
index 9ccdcf49..d09c390b 100644
--- a/src/assets/styles/bmc/_sila/_section-divider.scss
+++ b/src/assets/styles/bmc/_sila/_section-divider.scss
@@ -1,5 +1,5 @@
 .section-divider {
-  border-bottom: 1px solid gray('400');
+  border-bottom: 1px solid gray("400");
 }
 
 .collapse-divider {
@@ -13,7 +13,7 @@
     @include media-breakpoint-down(md) {
       margin-left: 1rem;
       margin-right: 1rem;
-  }
+    }
   }
   .btn-collapse {
     padding-left: 2rem;
@@ -37,11 +37,11 @@
   width: auto;
   margin: 0rem -1.95rem 0rem -1.95rem;
   padding-left: 2rem;
-      @include media-breakpoint-down(md) {
-        padding-left: 1rem;
-        padding-right: 1rem;
-        margin-left: -0.95rem;
-    }
+  @include media-breakpoint-down(md) {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    margin-left: -0.95rem;
+  }
   border-bottom: 1px solid $gray-10;
   gap: 8px;
 }
@@ -51,15 +51,15 @@
   margin: 0rem -1.95rem;
   padding-left: 1rem;
   padding-bottom: 1rem;
-      @include media-breakpoint-down(md) {
-        padding-left: 0rem;
-        margin: 0rem -0.95rem;
-    }
+  @include media-breakpoint-down(md) {
+    padding-left: 0rem;
+    margin: 0rem -0.95rem;
+  }
   .form-group {
     margin-bottom: 0 !important;
     .col-form-label {
       padding-left: 0.7rem;
       white-space: nowrap;
     }
- }
+  }
 }
diff --git a/src/assets/styles/bmc/_sila/_tables.scss b/src/assets/styles/bmc/_sila/_tables.scss
index ac35f605..04265261 100644
--- a/src/assets/styles/bmc/_sila/_tables.scss
+++ b/src/assets/styles/bmc/_sila/_tables.scss
@@ -1,11 +1,14 @@
 .table {
   position: relative;
   z-index: $zindex-dropdown;
-  border: 1px solid $gray-30;
   border-radius: $border-radius;
   border-collapse: separate;
   border-spacing: 0px;
 
+  @include themify($themes) {
+    color: themed("text-primary");
+    border: 1px solid themed("gray-30");
+  }
   &.b-table > thead > tr {
     & > [aria-sort="ascending"] {
       background-image: url("~@/assets/images/_sila/sort-ascending.svg");
@@ -48,6 +51,9 @@
   td {
     vertical-align: middle;
     font-size: 0.875rem;
+    @include themify($themes) {
+      border-top: 1px solid themed("gray-30") !important;
+    }
     // Table action buttons
     .btn-link {
       width: 40px;
@@ -61,10 +67,12 @@
 
   // thead-light added for specificity
   .thead-light th {
-    background-color: $gray-light;
     vertical-align: middle;
     text-transform: uppercase;
-    color: $text-primary;
+    @include themify($themes) {
+      color: themed("text-primary");
+      background-color: themed("gray-10");
+    }
     &:focus {
       outline: none;
     }
@@ -92,8 +100,10 @@
   }
 
   .b-table-details {
-    border-top: 1px solid rgba(26, 62, 91, 0.3);
     background-color: inherit;
+    @include themify($themes) {
+      border-top: 1px solid themed("gray-30");
+    }
     td {
       padding-left: $table-cell-padding;
       padding-right: $table-cell-padding;
@@ -132,7 +142,9 @@
       box-shadow: inset 0 0 0 2px theme-color("primary") !important;
     }
     &:hover {
-      background-color: $gray-5-hover;
+      @include themify($themes) {
+        background-color: themed("gray-5-hover");
+      }
     }
   }
   .custom-radio,
@@ -146,7 +158,10 @@
 }
 
 .table-hover tbody tr:hover {
-  background-color: $gray-5;
+  @include themify($themes) {
+    color: themed("text-primary");
+    background-color: themed("gray-5");
+  }
 }
 
 .b-table-sticky-header td {
@@ -163,8 +178,10 @@
     overflow: auto;
     width: calc(100vw - 347px);
     .table {
-      border-right: 1px solid $gray-30;
       border-radius: $border-radius;
+      @include themify($themes) {
+        border-right: 1px solid themed("gray-30");
+      }
     }
     .table-accessory,
     .table-full {
@@ -176,8 +193,10 @@
     @include media-breakpoint-up(md) {
       overflow: auto;
       .table {
-        border-right: 1px solid $gray-30;
         border-radius: $border-radius;
+        @include themify($themes) {
+          border-right: 1px solid themed("gray-30");
+        }
       }
       .table-accessory,
       .table-full {
@@ -189,8 +208,8 @@
 }
 // style for table contained in <b-card> components
 #page-network {
-  [class*='table-responsive-'] {
-      @include media-breakpoint-up(lg) {
+  [class*="table-responsive-"] {
+    @include media-breakpoint-up(lg) {
       width: calc(100vw - 390px);
     }
   }
@@ -199,8 +218,9 @@
 // Table stacked style for small screen only
 @include media-breakpoint-down(xs) {
   .b-table-stacked-sm {
-    border: 1px solid $gray-10;
-
+    @include themify($themes) {
+      border: 1px solid themed("gray-10");
+    }
     tr {
       &:not(:first-child) > td[aria-colindex="1"] {
         padding-top: 0.625rem;
@@ -262,7 +282,9 @@
 .table-accessory {
   border: none;
   thead th {
-    border-bottom: 1px solid $gray-30;
+    @include themify($themes) {
+      border-bottom: 1px solid themed("gray-30");
+    }
     background-color: transparent !important;
     padding: 5px 0;
   }
@@ -274,7 +296,9 @@
   td {
     white-space: nowrap;
     font-size: 0.745rem;
-    color: $text-tretiatry;
+    @include themify($themes) {
+      color: themed("text-tretiatry");
+    }
   }
   .thead-light th > div {
     font-size: 0.755rem !important;
diff --git a/src/assets/styles/bmc/_sila/_toasts.scss b/src/assets/styles/bmc/_sila/_toasts.scss
index 482765ce..ab7e36c2 100644
--- a/src/assets/styles/bmc/_sila/_toasts.scss
+++ b/src/assets/styles/bmc/_sila/_toasts.scss
@@ -1,10 +1,10 @@
 .b-toaster {
-  top: 75px!important; // make sure toasts do not hide top header
+  top: 75px !important; // make sure toasts do not hide top header
 }
 
 // Toast component and status icon style
 .toast {
-  padding: $spacer/2 $spacer/2 $spacer/2 $spacer+2;
+  padding: $spacer/2 $spacer/2 $spacer/2 $spacer + 2;
   border-width: 0 0 0 3px;
   box-shadow: $box-shadow;
   .close {
@@ -16,10 +16,12 @@
 .toast-header {
   display: flex;
   align-items: flex-start;
-  background-color: inherit!important; //override specificity
+  background-color: transparent !important; //override specificity
   border: none;
-  color: theme-color("dark")!important; //override specificity
   padding-bottom: 0;
+  @include themify($themes) {
+    color: themed("text-primary") !important; //override specificity
+  }
 }
 
 .toast-icon {
@@ -31,31 +33,35 @@
   }
 
   + .close {
-    line-height: .9;
+    line-height: 0.9;
   }
 }
 
 .toast-body {
-  color: theme-color("dark");
+  @include themify($themes) {
+    color: themed("text-primary") !important;
+  }
   padding-top: 0;
 }
 
 .b-toast-success .toast {
-  border-left-color: theme-color("success")!important;
-  background-color: theme-color-light("success")!important;
+  border-left-color: theme-color("success") !important;
+  background-color: theme-color-light("success") !important;
 }
 
 .b-toast-info .toast {
-  border-left-color: theme-color("info")!important;
-  background-color: theme-color-light("info")!important;
+  border-left-color: theme-color("info") !important;
+  background-color: theme-color-light("info") !important;
 }
 
 .b-toast-danger .toast {
-  border-left-color: theme-color("danger")!important;
-  background-color: theme-color-light("danger")!important;
+  @include themify($themes) {
+    border-left-color: themed("red-40") !important;
+    background-color: themed("red-5") !important;
+  }
 }
 
 .b-toast-warning .toast {
-  border-left-color: theme-color("warning")!important;
-  background-color: theme-color-light("warning")!important;
+  border-left-color: theme-color("warning") !important;
+  background-color: theme-color-light("warning") !important;
 }