1 files changed, 44 insertions, 31 deletions

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;