feat: accessibility - adjust colors to have a sufficient contrast rat…

…io - update secondary form button
intershop · Aug 22, 2024 · 44d8e6b · 44d8e6b
1 parent a3dea53
commit 44d8e6b
Showing 1 changed file with 22 additions and 18 deletions.
diff --git a/src/styles/global/buttons.scss b/src/styles/global/buttons.scss
@@ -53,14 +53,35 @@
   }
 
   &-secondary {
+    color: $button-default-color;
+    background-color: $button-default-bg;
+    border-color: $button-default-border;
+
+    &:hover {
+      color: $button-default-color;
+      background-color: $color-tertiary;
+      border-color: $CORPORATE-SECONDARY;
+    }
+
     &:focus,
     &.focus {
+      color: $button-default-color;
+      background-color: $color-tertiary;
+      border-color: $CORPORATE-SECONDARY;
       box-shadow: 0 0 0 $btn-focus-width $CORPORATE-SHADOW;
     }
 
+    &.disabled,
+    &:disabled {
+      color: $text-color-secondary;
+      background-color: $button-default-bg;
+      border-color: $border-color-light;
+    }
+
     &:not(:disabled):not(.disabled):active,
     &:not(:disabled):not(.disabled).active {
-      background-color: $CORPORATE-SECONDARY;
+      color: $button-default-color;
+      background-color: $color-tertiary;
       border-color: $CORPORATE-SECONDARY;
 
       &:focus {
@@ -86,23 +107,6 @@
     line-height: inherit;
     vertical-align: baseline;
   }
-
-  &.btn-secondary {
-    color: $button-default-color;
-    background-color: $button-default-bg;
-    border-color: $button-default-border;
-
-    &.disabled,
-    &:disabled {
-      color: $text-color-secondary;
-      border-color: $border-color-light;
-    }
-
-    &:not(:disabled):hover {
-      background-color: $color-tertiary;
-      border-color: $CORPORATE-SECONDARY;
-    }
-  }
 }
 
 .btn-lg {