refactor: accessibility - tab-focus visibility - button variables and…

… button states
intershop · Aug 29, 2024 · de16d52 · de16d52
1 parent 5905b1d
commit de16d52
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 23 deletions.
diff --git a/src/styles/global/buttons.scss b/src/styles/global/buttons.scss
@@ -21,21 +21,21 @@
   @include focus-visible-reset();
 
   &-primary {
-    background-color: $CORPORATE-PRIMARY;
-    border-color: $CORPORATE-PRIMARY;
-
-    &:hover {
-      background-color: $CORPORATE-SECONDARY;
-      border-color: $CORPORATE-SECONDARY;
-    }
+    background-color: $button-primary-bg;
+    border-color: $button-primary-border;
 
+    &:hover,
     &:focus,
     &.focus {
       background-color: $CORPORATE-SECONDARY;
       border-color: $CORPORATE-SECONDARY;
       box-shadow: none;
     }
 
+    &:focus-visible {
+      box-shadow: 0 0 0 $btn-focus-width $button-focus-box-shadow;
+    }
+
     &.disabled,
     &:disabled {
       color: $text-color-secondary;
@@ -45,8 +45,9 @@
 
     &:not(:disabled):not(.disabled):active,
     &:not(:disabled):not(.disabled).active {
-      background-color: $CORPORATE-SECONDARY;
-      border-color: $CORPORATE-SECONDARY;
+      background-color: $input-accent-color;
+      border-color: $input-accent-color;
+      box-shadow: none;
 
       &:focus {
         box-shadow: none;
@@ -59,20 +60,19 @@
     background-color: $button-default-bg;
     border-color: $button-default-border;
 
-    &:hover {
-      color: $button-default-color;
-      background-color: $color-tertiary;
-      border-color: $CORPORATE-SECONDARY;
-    }
-
+    &:hover,
     &:focus,
     &.focus {
-      color: $button-default-color;
+      color: $CORPORATE-SECONDARY;
       background-color: $color-tertiary;
       border-color: $CORPORATE-SECONDARY;
       box-shadow: none;
     }
 
+    &:focus-visible {
+      box-shadow: 0 0 0 $btn-focus-width $button-focus-box-shadow;
+    }
+
     &.disabled,
     &:disabled {
       color: $text-color-secondary;
@@ -82,9 +82,10 @@
 
     &:not(:disabled):not(.disabled):active,
     &:not(:disabled):not(.disabled).active {
-      color: $button-default-color;
-      background-color: $color-tertiary;
-      border-color: $CORPORATE-SECONDARY;
+      color: $input-accent-color;
+      background-color: $color-quaternary;
+      border-color: $input-accent-color;
+      box-shadow: none;
 
       &:focus {
         box-shadow: none;

diff --git a/src/styles/themes/b2b/variables.scss b/src/styles/themes/b2b/variables.scss
@@ -83,7 +83,7 @@ $border-width-default: 1px;
 
 // primary buttons
 $button-primary-bg: $CORPORATE-PRIMARY;
-$button-primary-border: $CORPORATE-SECONDARY;
+$button-primary-border: $CORPORATE-PRIMARY;
 $button-focus-box-shadow: $CORPORATE-SHADOW;
 
 // default buttons
@@ -211,7 +211,7 @@ $headings-color: $text-color-primary;
 
 // Forms
 $input-placeholder-color: $text-color-tertiary;
-$input-accent-color: #222;
+$input-accent-color: $CORPORATE-DARK;
 
 // Dropdown
 // Dropdown menu container and contents.

diff --git a/src/styles/themes/b2c/variables.scss b/src/styles/themes/b2c/variables.scss
@@ -83,7 +83,7 @@ $border-width-default: 1px;
 
 // primary buttons
 $button-primary-bg: $CORPORATE-PRIMARY;
-$button-primary-border: $CORPORATE-SECONDARY;
+$button-primary-border: $CORPORATE-PRIMARY;
 $button-focus-box-shadow: $CORPORATE-SHADOW;
 
 // default buttons
@@ -215,7 +215,7 @@ $headings-color: $text-color-primary;
 
 // Forms
 $input-placeholder-color: $text-color-tertiary;
-$input-accent-color: #222;
+$input-accent-color: $CORPORATE-DARK;
 
 // Dropdown
 // Dropdown menu container and contents.