From 1a076ff3719dfbaa6bb8829539a16d4ed52a92fc Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 25 Jan 2022 14:22:23 -0700 Subject: [PATCH 1/6] Update UNRELEASED-v8.md --- UNRELEASED-v8.md | 1 + 1 file changed, 1 insertion(+) diff --git a/UNRELEASED-v8.md b/UNRELEASED-v8.md index cd8eb01713a..863a06ab6bb 100644 --- a/UNRELEASED-v8.md +++ b/UNRELEASED-v8.md @@ -36,6 +36,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t - Removed the shadow() function (replaced any instances with tokens) and renamed shadow legacy tokens ([#4823](https://github.com/Shopify/polaris-react/pull/4823)) - Removed the ms-high-contrast-color() function and replaced any instances with values ([#4938](https://github.com/Shopify/polaris-react/pull/4938)) - Removed the font-family() function and replaced any instances with tokens ([#4940](https://github.com/Shopify/polaris-react/pull/4940)) +- Removed high-contrast-outline() and high-contrast-border() mixins and replaced any instances with tokens and values ([#](https://github.com/Shopify/polaris-react/pull/)) ### New components From 5d840a82357445f8dc27000fe80fd25a0ac05ccd Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 25 Jan 2022 14:33:05 -0700 Subject: [PATCH 2/6] Update UNRELEASED-v8.md --- UNRELEASED-v8.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/UNRELEASED-v8.md b/UNRELEASED-v8.md index 863a06ab6bb..57c8e3c6587 100644 --- a/UNRELEASED-v8.md +++ b/UNRELEASED-v8.md @@ -36,7 +36,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t - Removed the shadow() function (replaced any instances with tokens) and renamed shadow legacy tokens ([#4823](https://github.com/Shopify/polaris-react/pull/4823)) - Removed the ms-high-contrast-color() function and replaced any instances with values ([#4938](https://github.com/Shopify/polaris-react/pull/4938)) - Removed the font-family() function and replaced any instances with tokens ([#4940](https://github.com/Shopify/polaris-react/pull/4940)) -- Removed high-contrast-outline() and high-contrast-border() mixins and replaced any instances with tokens and values ([#](https://github.com/Shopify/polaris-react/pull/)) +- Removed high-contrast-outline() and high-contrast-border() mixins and replaced any instances with tokens and values ([#4962](https://github.com/Shopify/polaris-react/pull/4962)) ### New components From 185b0e4e481d2e743f5a2777467abd1563fef329 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 25 Jan 2022 16:00:03 -0700 Subject: [PATCH 3/6] Replace high-contrast-outline() mixin with tokens and values --- src/components/ActionList/ActionList.scss | 5 ++--- src/components/Banner/Banner.scss | 3 +-- src/components/DatePicker/DatePicker.scss | 2 +- src/components/DropZone/DropZone.scss | 2 +- src/components/Filters/Filters.scss | 2 +- src/components/Navigation/Navigation.scss | 3 +-- .../RangeSlider/components/SingleThumb/SingleThumb.scss | 5 ++--- src/components/Tabs/Tabs.scss | 4 ++-- src/components/Tag/Tag.scss | 5 ++--- src/styles/foundation/_focus-ring.scss | 2 +- src/styles/shared/_buttons.scss | 2 +- src/styles/shared/_forms.scss | 2 +- 12 files changed, 16 insertions(+), 21 deletions(-) diff --git a/src/components/ActionList/ActionList.scss b/src/components/ActionList/ActionList.scss index 5c5c73205e7..b2f61d93a52 100644 --- a/src/components/ActionList/ActionList.scss +++ b/src/components/ActionList/ActionList.scss @@ -60,8 +60,7 @@ &:hover { background-color: var(--p-surface-hovered); text-decoration: none; - - @include high-contrast-outline($border-width: var(--p-border-width-3)); + outline: var(--p-border-width-3) solid transparent; } &.active { @@ -80,7 +79,7 @@ &:focus:not(:active) { @include focus-ring($style: 'focused'); - @include high-contrast-outline($border-width: var(--p-border-width-3)); + outline: var(--p-border-width-3) solid transparent; } &.destructive { diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss index fb242d1bfec..84b3ec8a5ed 100644 --- a/src/components/Banner/Banner.scss +++ b/src/components/Banner/Banner.scss @@ -6,6 +6,7 @@ transition: box-shadow var(--p-duration-200) var(--p-ease); transition-delay: var(--p-duration-100); box-shadow: var(--pc-banner-border); + outline: var(--p-border-width-1) solid transparent; @if $in-page { @include focus-ring('wide'); @@ -17,8 +18,6 @@ background-color: var(--pc-banner-background); } - @include high-contrast-outline; - &:focus { outline: none; } diff --git a/src/components/DatePicker/DatePicker.scss b/src/components/DatePicker/DatePicker.scss index a0cba170ddd..14370c2467c 100644 --- a/src/components/DatePicker/DatePicker.scss +++ b/src/components/DatePicker/DatePicker.scss @@ -64,7 +64,7 @@ $font-size: 12px; &:hover { background: var(--p-interactive-hovered); color: var(--p-text-on-interactive); - @include high-contrast-outline; + outline: var(--p-border-width-1) solid transparent; } @include focus-ring; diff --git a/src/components/DropZone/DropZone.scss b/src/components/DropZone/DropZone.scss index 3b4bff8e607..69be5f5eaa0 100755 --- a/src/components/DropZone/DropZone.scss +++ b/src/components/DropZone/DropZone.scss @@ -56,7 +56,7 @@ $dropzone-stacking-order: ( } &:hover { - @include high-contrast-outline; + outline: var(--p-border-width-1) solid transparent; } } diff --git a/src/components/Filters/Filters.scss b/src/components/Filters/Filters.scss index cfef67a89bd..6ca2d80d5f7 100644 --- a/src/components/Filters/Filters.scss +++ b/src/components/Filters/Filters.scss @@ -94,7 +94,7 @@ $list-filters-footer-height: 70px; &:hover { cursor: pointer; background-color: var(--p-surface-hovered); - @include high-contrast-outline; + outline: var(--p-border-width-1) solid transparent; } &:focus:not(:active) { diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss index 81f24bb3b61..636e5e20b64 100644 --- a/src/components/Navigation/Navigation.scss +++ b/src/components/Navigation/Navigation.scss @@ -90,6 +90,7 @@ $disabled-fade: 0.6; font-weight: var(--p-font-weight-semibold); color: var(--p-text-primary); background-color: var(--p-background-selected); + outline: var(--p-border-width-1) solid transparent; &::before { content: ''; @@ -104,8 +105,6 @@ $disabled-fade: 0.6; border-bottom-right-radius: var(--p-border-radius-1); } - @include high-contrast-outline; - @include focus-ring; &:hover, diff --git a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss b/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss index ecae3acb63e..a85476fff0a 100644 --- a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss +++ b/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss @@ -127,12 +127,11 @@ } &:focus { + outline: var(--p-border-width-1) solid transparent; @include range-thumb-selectors { border-color: var(--p-surface); box-shadow: 0 0 0 2px var(--p-focused); } - - @include high-contrast-outline; } .error & { @@ -203,6 +202,7 @@ $range-output-spacing: 16px; transition-property: transform; transition-duration: var(--p-duration-200); transition-timing-function: var(--p-ease); + outline: var(--p-border-width-1) solid transparent; // stylelint-disable selector-max-specificity, selector-max-combinators, selector-max-class .Input:hover + .Output &, @@ -214,7 +214,6 @@ $range-output-spacing: 16px; transform: translateY(-($range-output-spacing * 0.5)); } } - @include high-contrast-outline; // stylelint-enable selector-max-specificity, selector-max-combinators, selector-max-class } diff --git a/src/components/Tabs/Tabs.scss b/src/components/Tabs/Tabs.scss index 70f81d76cc7..fd2c91ed404 100644 --- a/src/components/Tabs/Tabs.scss +++ b/src/components/Tabs/Tabs.scss @@ -104,7 +104,7 @@ $focus-state-box-shadow-color: rgba(0, 0, 0, 0.8); @include text-emphasis-normal; &:focus .Title { - @include high-contrast-outline($border-width: var(--p-border-width-3)); + outline: var(--p-border-width-3) solid transparent; // stylelint-disable-next-line selector-max-specificity &::before { background: var(--p-action-primary); @@ -112,7 +112,7 @@ $focus-state-box-shadow-color: rgba(0, 0, 0, 0.8); } .Title { - @include high-contrast-outline($border-width: var(--p-border-width-3)); + outline: var(--p-border-width-3) solid transparent; color: var(--p-text); &::before { diff --git a/src/components/Tag/Tag.scss b/src/components/Tag/Tag.scss index b5a51dd756e..9ab75d7512b 100644 --- a/src/components/Tag/Tag.scss +++ b/src/components/Tag/Tag.scss @@ -25,6 +25,7 @@ $icon-size: 16px; cursor: pointer; padding: 0 var(--p-space-2); background-color: var(--p-surface-neutral); + outline: var(--p-border-width-1) solid transparent; &:hover { background: var(--p-surface-neutral-hovered); @@ -56,8 +57,6 @@ $icon-size: 16px; &.linkable { padding: 0; } - - @include high-contrast-outline; } .TagText { @@ -79,7 +78,7 @@ $icon-size: 16px; &:hover { background: var(--p-surface-neutral-hovered); - @include high-contrast-outline; + outline: var(--p-border-width-1) solid transparent; } @include focus-ring; diff --git a/src/styles/foundation/_focus-ring.scss b/src/styles/foundation/_focus-ring.scss index 5722ec3de6e..140850048fe 100644 --- a/src/styles/foundation/_focus-ring.scss +++ b/src/styles/foundation/_focus-ring.scss @@ -39,7 +39,7 @@ } @else if $style == 'focused' { &::after { box-shadow: 0 0 0 $stroke var(--p-focused); - @include high-contrast-outline; + outline: var(--p-border-width-1) solid transparent; } } } diff --git a/src/styles/shared/_buttons.scss b/src/styles/shared/_buttons.scss index 50f07c8e6cb..ad3b956e9b3 100644 --- a/src/styles/shared/_buttons.scss +++ b/src/styles/shared/_buttons.scss @@ -35,7 +35,7 @@ &:hover { background: var(--p-action-secondary-hovered); - @include high-contrast-outline; + outline: var(--p-border-width-1) solid transparent; } &:focus { diff --git a/src/styles/shared/_forms.scss b/src/styles/shared/_forms.scss index 30816d23ab4..d9e28f04b8f 100644 --- a/src/styles/shared/_forms.scss +++ b/src/styles/shared/_forms.scss @@ -16,7 +16,7 @@ @mixin range-track-selectors { &::-ms-track { - @include high-contrast-outline; + outline: var(--p-border-width-1) solid transparent; @content; } From 20536acbb2606a6df3b7d20959d8cdc31ad3fc06 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 25 Jan 2022 16:20:41 -0700 Subject: [PATCH 4/6] Replace high-contrast-border() mixin with tokens and values --- src/components/ActionList/ActionList.scss | 2 +- src/components/Avatar/Avatar.scss | 2 +- .../Frame/components/ContextualSaveBar/ContextualSaveBar.scss | 2 +- src/components/Frame/components/Toast/Toast.scss | 2 +- src/components/Modal/components/Dialog/Dialog.scss | 2 +- src/components/ProgressBar/ProgressBar.scss | 2 +- src/components/RadioButton/RadioButton.scss | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/ActionList/ActionList.scss b/src/components/ActionList/ActionList.scss index b2f61d93a52..2834e1f73fe 100644 --- a/src/components/ActionList/ActionList.scss +++ b/src/components/ActionList/ActionList.scss @@ -54,7 +54,7 @@ border-radius: var(--p-border-radius-1); border-top: 1px solid transparent; @media (forced-colors: active) { - @include high-contrast-border; + border: var(--p-border-width-1) solid transparent; } &:hover { diff --git a/src/components/Avatar/Avatar.scss b/src/components/Avatar/Avatar.scss index fc2e278c587..e1e6fd9ad51 100644 --- a/src/components/Avatar/Avatar.scss +++ b/src/components/Avatar/Avatar.scss @@ -16,7 +16,7 @@ user-select: none; @media (forced-colors: active) { - @include high-contrast-border; + border: var(--p-border-width-1) solid transparent; } &::after { diff --git a/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss b/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss index 370f6d538cf..84344aee90c 100644 --- a/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss +++ b/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss @@ -22,7 +22,7 @@ $off-white-border: rgb(235, 238, 240); } @media (forced-colors: active) { - @include high-contrast-border; + border: var(--p-border-width-1) solid transparent; } } diff --git a/src/components/Frame/components/Toast/Toast.scss b/src/components/Frame/components/Toast/Toast.scss index 760ffe1015b..481a98cb656 100644 --- a/src/components/Frame/components/Toast/Toast.scss +++ b/src/components/Frame/components/Toast/Toast.scss @@ -18,7 +18,7 @@ $Backdrop-opacity: 0.88; } @media (forced-colors: active) { - @include high-contrast-border(var(--p-border-width-2)); + border: var(--p-border-width-2) solid transparent; } } diff --git a/src/components/Modal/components/Dialog/Dialog.scss b/src/components/Modal/components/Dialog/Dialog.scss index ac013216cfe..709ea33621a 100644 --- a/src/components/Modal/components/Dialog/Dialog.scss +++ b/src/components/Modal/components/Dialog/Dialog.scss @@ -43,7 +43,7 @@ $dangerous-magic-space-16: 64px; box-shadow: var(--p-shadow-modal); @media (forced-colors: active) { - @include high-contrast-border; + border: var(--p-border-width-1) solid transparent; } @include frame-when-nav-hidden { diff --git a/src/components/ProgressBar/ProgressBar.scss b/src/components/ProgressBar/ProgressBar.scss index cbdfc73a6c8..ad46af20375 100644 --- a/src/components/ProgressBar/ProgressBar.scss +++ b/src/components/ProgressBar/ProgressBar.scss @@ -24,7 +24,7 @@ border-radius: var(--p-border-radius-1); @media (forced-colors: active) { - @include high-contrast-border; + border: var(--p-border-width-1) solid transparent; } } diff --git a/src/components/RadioButton/RadioButton.scss b/src/components/RadioButton/RadioButton.scss index b7e6001c8a7..dc274094582 100644 --- a/src/components/RadioButton/RadioButton.scss +++ b/src/components/RadioButton/RadioButton.scss @@ -70,7 +70,7 @@ transform var(--p-duration-100) var(--p-ease); @media (forced-colors: active) { - @include high-contrast-border(5px); + border: 5px solid transparent; } } From a5ec3115779e316ea99430edc269350754dcbfaf Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 25 Jan 2022 16:32:25 -0700 Subject: [PATCH 5/6] Remove high-contrast-outline() and high-contrast-border() mixins --- src/styles/_common.scss | 1 - src/styles/foundation/_accessibility.scss | 9 --------- 2 files changed, 10 deletions(-) delete mode 100644 src/styles/foundation/_accessibility.scss diff --git a/src/styles/_common.scss b/src/styles/_common.scss index 466bf516a01..8c54cbcba6e 100644 --- a/src/styles/_common.scss +++ b/src/styles/_common.scss @@ -7,7 +7,6 @@ @import './foundation/utilities'; @import './foundation/layout'; @import './foundation/focus-ring'; -@import './foundation/accessibility'; @import './shared/accessibility'; @import './shared/breakpoints'; diff --git a/src/styles/foundation/_accessibility.scss b/src/styles/foundation/_accessibility.scss deleted file mode 100644 index f3724818f22..00000000000 --- a/src/styles/foundation/_accessibility.scss +++ /dev/null @@ -1,9 +0,0 @@ -@mixin high-contrast-outline($border-width: var(--p-border-width-1)) { - outline: $border-width solid transparent; - @content; -} - -@mixin high-contrast-border($border-width: var(--p-border-width-1)) { - border: $border-width solid transparent; - @content; -} From c942ca495f3db05f38aa900b0ecd3f31e024cb40 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 25 Jan 2022 16:36:20 -0700 Subject: [PATCH 6/6] Remove missed import --- src/styles/foundation/_focus-ring.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/styles/foundation/_focus-ring.scss b/src/styles/foundation/_focus-ring.scss index 140850048fe..afb1333fcc4 100644 --- a/src/styles/foundation/_focus-ring.scss +++ b/src/styles/foundation/_focus-ring.scss @@ -1,6 +1,3 @@ -// stylelint-disable-next-line scss/partial-no-import -@import './accessibility'; - /// Sets the focus ring for an interactive element /// @param {String} $size - The size of the border radius on the focus ring. /// @param {String} $style - Focus ring state.