From 5193768ece544e149aadb2ece22dbaf7dbd35a9a Mon Sep 17 00:00:00 2001 From: Josh Black Date: Wed, 29 Apr 2020 11:38:19 -0500 Subject: [PATCH 1/5] fix(notification): update focus styles for low contrast --- .../src/components/notification/_toast-notification.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/notification/_toast-notification.scss b/packages/components/src/components/notification/_toast-notification.scss index 537a940e2451..7654c95ca8e0 100644 --- a/packages/components/src/components/notification/_toast-notification.scss +++ b/packages/components/src/components/notification/_toast-notification.scss @@ -158,7 +158,7 @@ } .#{$prefix}--toast-notification--low-contrast - .#{$prefix}--toast-notification__close-button { + .#{$prefix}--toast-notification__close-button:focus { @include focus-outline('outline'); } From df30cb673c0d34270223bcb5891bd17c0a35c293 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Wed, 29 Apr 2020 11:39:56 -0500 Subject: [PATCH 2/5] Update _inline-notification.scss --- .../src/components/notification/_inline-notification.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/notification/_inline-notification.scss b/packages/components/src/components/notification/_inline-notification.scss index e3a01eaaafd0..f8914b8a7789 100644 --- a/packages/components/src/components/notification/_inline-notification.scss +++ b/packages/components/src/components/notification/_inline-notification.scss @@ -256,7 +256,7 @@ } .#{$prefix}--inline-notification--low-contrast - .#{$prefix}--inline-notification__close-button { + .#{$prefix}--inline-notification__close-button:focus { @include focus-outline('outline'); } From c9c6e41751d9997c820b078f4492bfae96be62ee Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 12 May 2020 11:10:37 -0500 Subject: [PATCH 3/5] fix(notification): update focus styles for action button --- .../src/components/notification/_inline-notification.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/src/components/notification/_inline-notification.scss b/packages/components/src/components/notification/_inline-notification.scss index f8914b8a7789..47af80d0e6fd 100644 --- a/packages/components/src/components/notification/_inline-notification.scss +++ b/packages/components/src/components/notification/_inline-notification.scss @@ -200,13 +200,13 @@ &, &:hover, - &:focus, &:active { color: $inverse-link; } &:focus { border-color: transparent; + box-shadow: none; outline: 2px solid $inverse-focus-ui; outline-offset: -2px; } @@ -267,10 +267,10 @@ } .#{$prefix}--inline-notification__action-button { - color: $carbon--blue-60; + color: $interactive-01; &:active { - color: $carbon--blue-80; + color: $interactive-01; } &:active, From bfd9dd0564fd7aaa4e5a728d42510b782c708cea Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 12 May 2020 12:53:37 -0500 Subject: [PATCH 4/5] fix(notification): update hover and focus styles for action button --- .../notification/_inline-notification.scss | 22 +++++-------------- 1 file changed, 6 insertions(+), 16 deletions(-) diff --git a/packages/components/src/components/notification/_inline-notification.scss b/packages/components/src/components/notification/_inline-notification.scss index 47af80d0e6fd..44fcd6c8fe66 100644 --- a/packages/components/src/components/notification/_inline-notification.scss +++ b/packages/components/src/components/notification/_inline-notification.scss @@ -197,23 +197,13 @@ @include carbon--breakpoint(md) { margin: $carbon--spacing-03 0; } + } - &, - &:hover, - &:active { - color: $inverse-link; - } - - &:focus { - border-color: transparent; - box-shadow: none; - outline: 2px solid $inverse-focus-ui; - outline-offset: -2px; - } - - &:hover { - background-color: $inverse-hover-ui; - } + .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:focus { + border-color: transparent; + box-shadow: none; + outline: 2px solid $focus; + outline-offset: -2px; } .#{$prefix}--inline-notification--hide-close-button From 2e8a7d581171ac36dcedca50fdd9d0637b042a24 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 12 May 2020 15:08:39 -0500 Subject: [PATCH 5/5] fix(notification): update colors according to new spec --- .../notification/_inline-notification.scss | 25 ++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/packages/components/src/components/notification/_inline-notification.scss b/packages/components/src/components/notification/_inline-notification.scss index 44fcd6c8fe66..3f522fed331c 100644 --- a/packages/components/src/components/notification/_inline-notification.scss +++ b/packages/components/src/components/notification/_inline-notification.scss @@ -190,6 +190,7 @@ } .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost { + color: $inverse-link; height: rem(32px); margin-bottom: $carbon--spacing-03; margin-left: $carbon--spacing-08; @@ -199,13 +200,35 @@ } } + .#{$prefix}--inline-notification--low-contrast + .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost { + color: $link-01; + } + + .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:active, + .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:hover { + background-color: $inverse-hover-ui; + } + + .#{$prefix}--inline-notification--low-contrast + .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:active, + .#{$prefix}--inline-notification--low-contrast + .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:hover { + background-color: $carbon--white-0; + } + .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:focus { border-color: transparent; box-shadow: none; - outline: 2px solid $focus; + outline: 2px solid $inverse-focus-ui; outline-offset: -2px; } + .#{$prefix}--inline-notification--low-contrast + .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost:focus { + outline-color: $focus; + } + .#{$prefix}--inline-notification--hide-close-button .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost { margin-right: $carbon--spacing-03;