fix: button interaction states

Update the interaction states of buttons. fix #320
mdn · Dec 5, 2020 · bbd3ee2 · bbd3ee2
1 parent 1964e7c
commit bbd3ee2
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 16 deletions.
diff --git a/sass/atoms/_buttons.scss b/sass/atoms/_buttons.scss
@@ -12,10 +12,7 @@ a.button {
   text-decoration: none;
 
   &:hover,
-  &:focus {
-    text-decoration: underline;
-  }
-
+  &:focus,
   &:active {
     text-decoration: none;
   }
@@ -31,12 +28,12 @@ a.outline {
 
 .danger,
 a.danger {
-  @include button-state($bg-color: $red-200, $bg-hover-color: $red-100);
+  @include button-state($bg-color: $red-100, $bg-hover-color: $red-200);
 
   &.outline {
     @include outline-button-state(
       $border-color: $red-200,
-      $bg-hover-color: $red-100,
+      $bg-hover-color: $red-200,
       $bg-active-color: $red-200,
       $text-hover-color: $neutral-600
     );
@@ -45,12 +42,12 @@ a.danger {
 
 .positive,
 a.positive {
-  @include button-state($bg-color: $green-200, $bg-hover-color: $green-100);
+  @include button-state($bg-color: $green-100, $bg-hover-color: $green-200);
 
   &.outline {
     @include outline-button-state(
       $border-color: $green-200,
-      $bg-hover-color: $green-100,
+      $bg-hover-color: $green-200,
       $bg-active-color: $green-200,
       $text-hover-color: $neutral-600
     );

diff --git a/sass/mdn-minimalist.scss b/sass/mdn-minimalist.scss
@@ -3,6 +3,7 @@
 @import "./vars/color-palette";
 @import "./vars/layout";
 @import "./vars/borders";
+@import "./vars/shadows";
 @import "./vars/typography";
 
 @import "./mixins/animation";

diff --git a/sass/mixins/_buttons.scss b/sass/mixins/_buttons.scss
@@ -7,8 +7,8 @@
  * @param `$text-hover-color` - foreground text color for hover state [default: null]
  */
 @mixin button-state(
-  $bg-color: $primary-200,
-  $bg-hover-color: $primary-100,
+  $bg-color: $primary-100,
+  $bg-hover-color: $primary-200,
   $bg-active-color: $bg-color,
   $text-color: $text-color-inverted,
   $text-hover-color: null

diff --git a/sass/vars/_shadows.scss b/sass/vars/_shadows.scss
@@ -0,0 +1,2 @@
+$button-active-state-shadow: 1px 1px 0 3px $primary-300,
+  -1px -1px 0 3px $primary-300;
diff --git a/test/sass/_test-mixins-buttons.scss b/test/sass/_test-mixins-buttons.scss
@@ -6,19 +6,19 @@
       }
 
       @include expect {
-        background-color: #1e7f9d;
-        border: 2px solid #1e7f9d;
+        background-color: #216b82;
+        border: 2px solid #216b82;
         color: #fff;
 
         &:hover,
         &:focus {
-          background-color: #216b82;
-          border-color: #216b82;
+          background-color: #1e7f9d;
+          border-color: #1e7f9d;
         }
 
         &:active {
-          background-color: #1e7f9d;
-          border-color: #1e7f9d;
+          background-color: #216b82;
+          border-color: #216b82;
         }
       }
     }