From 9181c84f0f4536aaeea3ec3157271dcc5d7d6e39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Tue, 4 Aug 2020 20:42:55 +0200 Subject: [PATCH] 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 Co-authored-by: Mark Otto --- scss/helpers/_colored-links.scss | 2 +- scss/mixins/_buttons.scss | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss index 4eea8d333e..d135194d17 100644 --- 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 b72836fad2..eeade6a32e 100644 --- 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,