Merge pull request #822 from mobi/chore_button_secondary_colors

[Chore] go-button Secondary Colors
mobi · Aug 13, 2021 · e0462e7 · e0462e7
2 parents 0de618a + 2bf2083
commit e0462e7
Showing 1 changed file with 13 additions and 10 deletions.
diff --git a/projects/go-lib/src/lib/components/go-button/go-button.component.scss b/projects/go-lib/src/lib/components/go-button/go-button.component.scss
@@ -2,7 +2,8 @@
 @import '../../../../styles/mixins';
 
 $transparent-color: rgba(0, 0, 0, 0);
-$button-shadow-secondary: 0 0 0 3px transparentize($base-light-tertiary, .75);
+$button-shadow-secondary-hover: 0 0 0 3px transparentize($theme-light-bg-hover, .5);
+$button-shadow-secondary-active: 0 0 0 3px transparentize($theme-light-bg-hover, .5);
 
 @mixin disabled-states($bg, $color, $color-opacity: .7) {
   // scss-lint:disable VariableForProperty
@@ -119,13 +120,15 @@ $button-shadow-secondary: 0 0 0 3px transparentize($base-light-tertiary, .75);
   }
 
   &--secondary {
-    border: 1px solid lighten($base-light-secondary, 10%);
+    border: 1px solid $base-light-tertiary;
+
+    &:hover {
+      box-shadow: $button-shadow-secondary-hover;
+    }
 
-    &:hover,
     &:focus,
     &:active {
-      border: 1px solid lighten($base-light-secondary, 10%);
-      box-shadow: $button-shadow-secondary;
+      box-shadow: $button-shadow-secondary-active;
     }
 
     &.go-button-group {
@@ -160,12 +163,12 @@ $button-shadow-secondary: 0 0 0 3px transparentize($base-light-tertiary, .75);
     &:hover,
     &:focus {
       background: $theme-light-bg-hover;
-      border: 1px solid $theme-light-bg-hover;
+      border: 1px solid $base-light-tertiary;
     }
 
     &:active {
       background: $theme-light-bg-active;
-      border: 1px solid $theme-light-bg-active;
+      border: 1px solid $base-light-tertiary;
     }
 
     &:disabled:not(.go-button--loading) {
@@ -421,21 +424,21 @@ $button-shadow-secondary: 0 0 0 3px transparentize($base-light-tertiary, .75);
 
   &--secondary {
     background: $theme-light-bg-hover;
-    border: 1px solid lighten($base-light-secondary, 10%);
+    border: 1px solid $base-light-tertiary;
     border-left: 0;
     color: $theme-light-color;
 
     &:hover,
     &:focus {
       background: $theme-light-bg-active;
       border-left: 0;
-      box-shadow: $button-shadow-secondary;
+      box-shadow: $button-shadow-secondary-hover;
     }
 
     &:active {
       background: darken($theme-light-bg, 10%);
       border-left: 0;
-      box-shadow: $button-shadow-secondary;
+      box-shadow: $button-shadow-secondary-active;
     }
 
     &:disabled:not(.go-button--loading) {