Ensure to increase contrasts on buttons & colored links hover/active states (#30989)

* feat(buttons): ensure to increase contrasts on hover/active

* Update _buttons.scss

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>

diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss
index 4eea8d333ec26ff52e29eed75e2c2140a48215e5..d135194d17efbd7a8fa3a4d7fe5a64dc9ecdfdd2 100644 (file)
--- a/scss/helpers/_colored-links.scss
+++ b/scss/helpers/_colored-links.scss
@@ -5,7 +5,7 @@
     @if $emphasized-link-hover-darken-percentage != 0 {
       &:hover,
       &:focus {
-        color: darken($value, $emphasized-link-hover-darken-percentage);
+        color: if(color-contrast($value) == $color-contrast-light, darken($value, $emphasized-link-hover-darken-percentage), lighten($value, $emphasized-link-hover-darken-percentage));
       }
     }
   }

diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index b72836fad2c58d731055c5e9749cfd0fdb9b113c..eeade6a32e67938a53f2939d52b056ac2a85ccd3 100644 (file)
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -7,11 +7,11 @@
   $background,
   $border,
   $color: color-contrast($background),
-  $hover-background: darken($background, 7.5%),
-  $hover-border: darken($border, 10%),
+  $hover-background: if($color == $color-contrast-light, darken($background, 7.5%), lighten($background, 7.5%)),
+  $hover-border: if($color == $color-contrast-light, darken($border, 10%), lighten($border, 5%)),
   $hover-color: color-contrast($hover-background),
-  $active-background: darken($background, 10%),
-  $active-border: darken($border, 12.5%),
+  $active-background: if($color == $color-contrast-light, darken($background, 10%), lighten($background, 10%)),
+  $active-border: if($color == $color-contrast-light, darken($border, 12.5%), lighten($border, 5%)),
   $active-color: color-contrast($active-background),
   $disabled-background: $background,
   $disabled-border: $border,