From 0dead00782e9a82b49c292ea4dbd3b489745966c Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Mon, 25 Jan 2021 14:22:20 -0800 Subject: [PATCH 1/4] fix(Checkbox): update focus styles (#7620) * fix(Checkbox): update focus styles * fix(Checkbox): reduce outline offset Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../src/components/checkbox/_checkbox.scss | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/packages/components/src/components/checkbox/_checkbox.scss b/packages/components/src/components/checkbox/_checkbox.scss index 8f4420ada376..2f25f980def4 100644 --- a/packages/components/src/components/checkbox/_checkbox.scss +++ b/packages/components/src/components/checkbox/_checkbox.scss @@ -153,16 +153,8 @@ // Indeterminate .#{$prefix}--checkbox:indeterminate:focus + .#{$prefix}--checkbox-label::before, .#{$prefix}--checkbox-label[data-contained-checkbox-state='mixed'].#{$prefix}--checkbox-label__focus::before { - // Must use box-shadow for appearance of multiple borders with rounded corners. - box-shadow: 0 0 0 2px $inverse-01, 0 0 0 4px $focus; - - // Windows, Firefox HCM Fix - @media screen and (-ms-high-contrast: active), - screen and (prefers-contrast) { - // `highlightText` is a CSS2 system color to help improve colors in HCM - outline: 1px solid highlightText; - outline-offset: 2px; - } + outline: 2px solid $focus; + outline-offset: 1px; } //---------------------------------------------- From aa4ab1db5aa68b04079deabd868c0aeca985bb70 Mon Sep 17 00:00:00 2001 From: carbon-bot Date: Mon, 25 Jan 2021 22:45:34 +0000 Subject: [PATCH 2/4] chore(project): sync generated files --- packages/components/docs/sass.md | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md index bc064c0caf99..44fe9401a81d 100644 --- a/packages/components/docs/sass.md +++ b/packages/components/docs/sass.md @@ -15773,16 +15773,8 @@ Checkbox styles // Indeterminate .#{$prefix}--checkbox:indeterminate:focus + .#{$prefix}--checkbox-label::before, .#{$prefix}--checkbox-label[data-contained-checkbox-state='mixed'].#{$prefix}--checkbox-label__focus::before { - // Must use box-shadow for appearance of multiple borders with rounded corners. - box-shadow: 0 0 0 2px $inverse-01, 0 0 0 4px $focus; - - // Windows, Firefox HCM Fix - @media screen and (-ms-high-contrast: active), - screen and (prefers-contrast) { - // `highlightText` is a CSS2 system color to help improve colors in HCM - outline: 1px solid highlightText; - outline-offset: 2px; - } + outline: 2px solid $focus; + outline-offset: 1px; } //---------------------------------------------- From 0ebd93beac8ef191901e0e9c74d4c42be43de6f4 Mon Sep 17 00:00:00 2001 From: emyarod Date: Mon, 25 Jan 2021 15:19:50 -0800 Subject: [PATCH 3/4] fix(button): avoid overriding styles on SVGS with paths (#7632) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- packages/components/src/components/button/_button.scss | 9 +-------- packages/components/src/components/button/_mixins.scss | 2 +- 2 files changed, 2 insertions(+), 9 deletions(-) diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss index a842a4bad2c3..aaf94fe45f59 100644 --- a/packages/components/src/components/button/_button.scss +++ b/packages/components/src/components/button/_button.scss @@ -162,11 +162,6 @@ } } - .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--btn--ghost:focus svg, - .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--btn--ghost:hover svg { - fill: $icon-01; - } - .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus { border-color: $focus; @@ -224,8 +219,6 @@ .#{$prefix}--btn__icon, .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--btn--ghost:hover .#{$prefix}--btn__icon { - fill: $icon-01; - // Windows, Firefox HCM Fix @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) { @@ -238,7 +231,7 @@ .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only .#{$prefix}--btn__icon - path, + path:not([data-icon-path]), .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only .#{$prefix}--btn__icon { fill: $icon-01; } diff --git a/packages/components/src/components/button/_mixins.scss b/packages/components/src/components/button/_mixins.scss index b8c9b306a354..e2df2b53f4bf 100644 --- a/packages/components/src/components/button/_mixins.scss +++ b/packages/components/src/components/button/_mixins.scss @@ -96,7 +96,7 @@ } .#{$prefix}--btn__icon, - .#{$prefix}--btn__icon path { + .#{$prefix}--btn__icon path:not([data-icon-path]) { fill: $icon-color; } } From 670477d1284d54babe9773d77b6ceaedb4724f28 Mon Sep 17 00:00:00 2001 From: carbon-bot Date: Mon, 25 Jan 2021 23:44:35 +0000 Subject: [PATCH 4/4] chore(project): sync generated files --- packages/components/docs/sass.md | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md index 44fe9401a81d..f596467a218f 100644 --- a/packages/components/docs/sass.md +++ b/packages/components/docs/sass.md @@ -15188,11 +15188,6 @@ Button styles } } - .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--btn--ghost:focus svg, - .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--btn--ghost:hover svg { - fill: $icon-01; - } - .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus { border-color: $focus; @@ -15250,8 +15245,6 @@ Button styles .#{$prefix}--btn__icon, .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--btn--ghost:hover .#{$prefix}--btn__icon { - fill: $icon-01; - // Windows, Firefox HCM Fix @media screen and (-ms-high-contrast: active), screen and (prefers-contrast) { @@ -15264,7 +15257,7 @@ Button styles .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only .#{$prefix}--btn__icon - path, + path:not([data-icon-path]), .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only .#{$prefix}--btn__icon { fill: $icon-01; } @@ -15497,8 +15490,8 @@ Button styles - [active-ui [variable]](#active-ui-variable) - [carbon--spacing-03 [variable]](#carbon--spacing-03-variable) - [hover-primary-text [variable]](#hover-primary-text-variable) - - [icon-01 [variable]](#icon-01-variable) - [focus [variable]](#focus-variable) + - [icon-01 [variable]](#icon-01-variable) - [danger-01 [variable]](#danger-01-variable) - [hover-danger [variable]](#hover-danger-variable) - [active-danger [variable]](#active-danger-variable) @@ -15609,7 +15602,7 @@ Button variant styles } .#{$prefix}--btn__icon, - .#{$prefix}--btn__icon path { + .#{$prefix}--btn__icon path:not([data-icon-path]) { fill: $icon-color; } }