From ea6edde840f76075024e05f374571326bf401f1a Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 21 Jan 2022 09:49:03 -0700 Subject: [PATCH 01/10] Update UNRELEASED-v8.md --- UNRELEASED-v8.md | 1 + 1 file changed, 1 insertion(+) diff --git a/UNRELEASED-v8.md b/UNRELEASED-v8.md index 45df41ba831..c3d9c885ae6 100644 --- a/UNRELEASED-v8.md +++ b/UNRELEASED-v8.md @@ -33,6 +33,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t - Updated all `--top-bar-*` CSS custom properties to `--pc-top-bar-*` ([#4804](https://github.com/Shopify/polaris-react/pull/4804)) - Removed the border-radius() function and replaced any instances with tokens ([#4793](https://github.com/Shopify/polaris-react/pull/4793)) - Removed the shadow() function (replaced any instances with tokens) and renamed shadow legacy tokens ([#4823](https://github.com/Shopify/polaris-react/pull/4823)) +- Replaced the ms-high-contrast-color() function and replaced any instances with values ([#](https://github.com/Shopify/polaris-react/pull/)) ### New components From 8fa4650f495a606577a31c12578fdee2d9592d36 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 21 Jan 2022 10:05:39 -0700 Subject: [PATCH 02/10] 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 c3d9c885ae6..959c3a9866a 100644 --- a/UNRELEASED-v8.md +++ b/UNRELEASED-v8.md @@ -33,7 +33,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t - Updated all `--top-bar-*` CSS custom properties to `--pc-top-bar-*` ([#4804](https://github.com/Shopify/polaris-react/pull/4804)) - Removed the border-radius() function and replaced any instances with tokens ([#4793](https://github.com/Shopify/polaris-react/pull/4793)) - Removed the shadow() function (replaced any instances with tokens) and renamed shadow legacy tokens ([#4823](https://github.com/Shopify/polaris-react/pull/4823)) -- Replaced the ms-high-contrast-color() function and replaced any instances with values ([#](https://github.com/Shopify/polaris-react/pull/)) +- Replaced the ms-high-contrast-color() function and replaced any instances with values ([#4938](https://github.com/Shopify/polaris-react/pull/4938)) ### New components From 4d0c255c71e0547d34bbbe150a42facc5791fbc3 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 21 Jan 2022 11:59:42 -0700 Subject: [PATCH 03/10] Replace ms-high-contrast-color('text') with corresponding value --- .../Autocomplete/components/MappedAction/MappedAction.scss | 2 +- src/components/Checkbox/Checkbox.scss | 2 +- src/components/OptionList/components/Checkbox/Checkbox.scss | 2 +- src/components/Select/Select.scss | 2 +- .../Tooltip/components/TooltipOverlay/TooltipOverlay.scss | 2 +- src/styles/shared/_buttons.scss | 2 +- src/styles/shared/_controls.scss | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/Autocomplete/components/MappedAction/MappedAction.scss b/src/components/Autocomplete/components/MappedAction/MappedAction.scss index 19bbd2baeb1..a370446f46e 100644 --- a/src/components/Autocomplete/components/MappedAction/MappedAction.scss +++ b/src/components/Autocomplete/components/MappedAction/MappedAction.scss @@ -35,7 +35,7 @@ text-decoration: none; @media (-ms-high-contrast: active) { - outline: 1px solid ms-high-contrast-color('text'); + outline: 1px solid windowText; } } diff --git a/src/components/Checkbox/Checkbox.scss b/src/components/Checkbox/Checkbox.scss index 91c76f65956..7bc01c2bf8f 100644 --- a/src/components/Checkbox/Checkbox.scss +++ b/src/components/Checkbox/Checkbox.scss @@ -71,7 +71,7 @@ transform var(--p-duration-100) var(--p-ease); @media (-ms-high-contrast: active) { - fill: ms-high-contrast-color('text'); + fill: windowText; } } diff --git a/src/components/OptionList/components/Checkbox/Checkbox.scss b/src/components/OptionList/components/Checkbox/Checkbox.scss index 694628bac10..bb8734df271 100644 --- a/src/components/OptionList/components/Checkbox/Checkbox.scss +++ b/src/components/OptionList/components/Checkbox/Checkbox.scss @@ -71,6 +71,6 @@ transform var(--p-duration-100) var(--p-ease); @media (-ms-high-contrast: active) { - fill: ms-high-contrast-color('text'); + fill: windowText; } } diff --git a/src/components/Select/Select.scss b/src/components/Select/Select.scss index 541f3819315..970c3ddae2a 100644 --- a/src/components/Select/Select.scss +++ b/src/components/Select/Select.scss @@ -134,7 +134,7 @@ @media (-ms-high-contrast: active) { .Content { - color: ms-high-contrast-color('text'); + color: windowText; -ms-high-contrast-adjust: none; } diff --git a/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss b/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss index 720e84a3780..124841fb2e2 100644 --- a/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss +++ b/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss @@ -14,7 +14,7 @@ $content-max-width: 200px; var(--p-duration-100); @media screen and (-ms-high-contrast: active) { - border: var(--p-border-width-2) solid ms-high-contrast-color('text'); + border: var(--p-border-width-2) solid windowText; } } diff --git a/src/styles/shared/_buttons.scss b/src/styles/shared/_buttons.scss index 5cf172bca0a..50f07c8e6cb 100644 --- a/src/styles/shared/_buttons.scss +++ b/src/styles/shared/_buttons.scss @@ -64,7 +64,7 @@ } @media (-ms-high-contrast: active) { - border: 1px solid ms-high-contrast-color('text'); + border: 1px solid windowText; } } diff --git a/src/styles/shared/_controls.scss b/src/styles/shared/_controls.scss index cf72a74240a..3660894d1ee 100644 --- a/src/styles/shared/_controls.scss +++ b/src/styles/shared/_controls.scss @@ -50,7 +50,7 @@ opacity: 1; transform: scale(1); @media (-ms-high-contrast: active) { - border: 2px solid ms-high-contrast-color('text'); + border: 2px solid windowText; } } } @else if $style == disabled { From c09ee5f765ec246c8e8d6903497d45f66ed47b49 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 21 Jan 2022 12:02:51 -0700 Subject: [PATCH 04/10] Replace ms-high-contrast-color('disabled-text') with corresponding value --- src/components/Choice/Choice.scss | 2 +- src/components/Select/Select.scss | 4 ++-- src/styles/shared/_skeleton.scss | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Choice/Choice.scss b/src/components/Choice/Choice.scss index df711df862b..6073e62ba0a 100644 --- a/src/components/Choice/Choice.scss +++ b/src/components/Choice/Choice.scss @@ -31,7 +31,7 @@ } @media (-ms-high-contrast: active) { - color: ms-high-contrast-color('disabled-text'); + color: grayText; } } } diff --git a/src/components/Select/Select.scss b/src/components/Select/Select.scss index 970c3ddae2a..7bc7361e58c 100644 --- a/src/components/Select/Select.scss +++ b/src/components/Select/Select.scss @@ -175,11 +175,11 @@ .disabled { .Content { - color: ms-high-contrast-color('disabled-text'); + color: grayText; } .Icon { - @include recolor-icon(ms-high-contrast-color('disabled-text')); + @include recolor-icon(grayText); opacity: 1; } } diff --git a/src/styles/shared/_skeleton.scss b/src/styles/shared/_skeleton.scss index 9ce8666d002..de0f8364e77 100644 --- a/src/styles/shared/_skeleton.scss +++ b/src/styles/shared/_skeleton.scss @@ -28,7 +28,7 @@ $thumbnail-sizes: ( border-radius: var(--p-border-radius-base); @media screen and (-ms-high-contrast: active) { - background-color: ms-high-contrast-color('disabled-text'); + background-color: grayText; } } } From 43e3958c4369aa66bf710c63f47cca8c67d42c1e Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 21 Jan 2022 12:04:45 -0700 Subject: [PATCH 05/10] Replace ms-high-contrast-color('selected-text') with corresponding value --- src/components/Select/Select.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Select/Select.scss b/src/components/Select/Select.scss index 7bc7361e58c..6fb2a1e06c9 100644 --- a/src/components/Select/Select.scss +++ b/src/components/Select/Select.scss @@ -163,7 +163,7 @@ .Input:focus { ~ .Content { - color: ms-high-contrast-color('selected-text'); + color: highlightText; } ~ .Backdrop { From 6cd2e6b039220d61a0b7261286c0ba82e7ed19f3 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 21 Jan 2022 12:07:02 -0700 Subject: [PATCH 06/10] Replace ms-high-contrast-color('selected-text-background') with corresponding value --- src/components/Frame/components/Loading/Loading.scss | 2 +- src/components/ProgressBar/ProgressBar.scss | 3 +-- src/components/Select/Select.scss | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/Frame/components/Loading/Loading.scss b/src/components/Frame/components/Loading/Loading.scss index ff6e021d8ef..98711693fba 100644 --- a/src/components/Frame/components/Loading/Loading.scss +++ b/src/components/Frame/components/Loading/Loading.scss @@ -15,6 +15,6 @@ transition: transform var(--p-duration-500) linear; @media screen and (-ms-high-contrast: active) { - background-color: ms-high-contrast-color('selected-text-background'); + background-color: highlight; } } diff --git a/src/components/ProgressBar/ProgressBar.scss b/src/components/ProgressBar/ProgressBar.scss index a150df4b282..cbdfc73a6c8 100644 --- a/src/components/ProgressBar/ProgressBar.scss +++ b/src/components/ProgressBar/ProgressBar.scss @@ -66,8 +66,7 @@ background-color: var(--pc-progress-bar-indicator); @media screen and (-ms-high-contrast: active) { - border: progress-bar-height() solid - ms-high-contrast-color('selected-text-background'); + border: progress-bar-height() solid highlight; } } diff --git a/src/components/Select/Select.scss b/src/components/Select/Select.scss index 6fb2a1e06c9..3fb83456bca 100644 --- a/src/components/Select/Select.scss +++ b/src/components/Select/Select.scss @@ -169,7 +169,7 @@ ~ .Backdrop { // Align with the native styling for this element, which differs from // what the control-backdrop mixin provides. - background-color: ms-high-contrast-color('selected-text-background'); + background-color: highlight; } } From 44ebb78cc31a7d15da896b11235f0238dca268b3 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 21 Jan 2022 12:08:16 -0700 Subject: [PATCH 07/10] Replace ms-high-contrast-color('button-text') with corresponding value --- src/components/Select/Select.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Select/Select.scss b/src/components/Select/Select.scss index 3fb83456bca..51376af7007 100644 --- a/src/components/Select/Select.scss +++ b/src/components/Select/Select.scss @@ -151,7 +151,7 @@ } .Icon { - @include recolor-icon(ms-high-contrast-color('button-text')); + @include recolor-icon(buttonText); } .Backdrop { From 114229f3472114bc9d7e0a22f13bcbb1755df61b Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 21 Jan 2022 12:10:39 -0700 Subject: [PATCH 08/10] Remove ms-high-contrast-color() function --- src/styles/foundation/_colors.scss | 31 ------------------------------ 1 file changed, 31 deletions(-) delete mode 100644 src/styles/foundation/_colors.scss diff --git a/src/styles/foundation/_colors.scss b/src/styles/foundation/_colors.scss deleted file mode 100644 index ad49d437a21..00000000000 --- a/src/styles/foundation/_colors.scss +++ /dev/null @@ -1,31 +0,0 @@ -/// -/// Color palette for Windows high-contrast mode -/// See https://bit.ly/2vN9aGO -/// -/// @type map - -$ms-high-contrast-color-data: ( - 'text': windowText, - 'disabled-text': grayText, - 'selected-text': highlightText, - 'selected-text-background': highlight, - 'button-text': buttonText, - 'button-text-background': buttonFace, - 'background': window, -); - -/// -/// Returns the color value for Windows high contrast mode -/// -/// @param {String} $color - The name of the high-contrast color. -/// @return {Color} The color value. - -@function ms-high-contrast-color($color) { - $fetched-color: map-get($ms-high-contrast-color-data, $color); - - @if $fetched-color { - @return $fetched-color; - } @else { - @error "Color `#{$color}` not found.\a Make sure argument is a string.\a GOOD: ms-high-contrast-color('selected-text').\a BAD: ms-high-contrast-color(selected-text).\a\a Available options: #{available-names($ms-high-contrast-color-data)}"; - } -} From 1d5da140cbb169c0ab35743e544218ccf5ba585c Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 21 Jan 2022 12:12:38 -0700 Subject: [PATCH 09/10] 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 959c3a9866a..5f23912fd7a 100644 --- a/UNRELEASED-v8.md +++ b/UNRELEASED-v8.md @@ -33,7 +33,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t - Updated all `--top-bar-*` CSS custom properties to `--pc-top-bar-*` ([#4804](https://github.com/Shopify/polaris-react/pull/4804)) - Removed the border-radius() function and replaced any instances with tokens ([#4793](https://github.com/Shopify/polaris-react/pull/4793)) - Removed the shadow() function (replaced any instances with tokens) and renamed shadow legacy tokens ([#4823](https://github.com/Shopify/polaris-react/pull/4823)) -- Replaced the ms-high-contrast-color() function and replaced any instances with values ([#4938](https://github.com/Shopify/polaris-react/pull/4938)) +- Removed the ms-high-contrast-color() function and replaced any instances with values ([#4938](https://github.com/Shopify/polaris-react/pull/4938)) ### New components From 9452f402c003ca8a5504b610f8683c3a1ea4cca3 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Fri, 21 Jan 2022 13:24:29 -0700 Subject: [PATCH 10/10] Remove file imports for foundation/color --- src/styles/_common.scss | 1 - src/styles/_public-api.scss | 1 - 2 files changed, 2 deletions(-) diff --git a/src/styles/_common.scss b/src/styles/_common.scss index 3e27ae8c8ec..31f1bbb9e49 100644 --- a/src/styles/_common.scss +++ b/src/styles/_common.scss @@ -5,7 +5,6 @@ // stylelint-disable scss/partial-no-import @import './foundation/utilities'; -@import './foundation/colors'; @import './foundation/borders'; @import './foundation/layout'; @import './foundation/typography'; diff --git a/src/styles/_public-api.scss b/src/styles/_public-api.scss index 4b69b20ca6f..c1738f3df0a 100644 --- a/src/styles/_public-api.scss +++ b/src/styles/_public-api.scss @@ -17,7 +17,6 @@ // stylelint-disable scss/partial-no-import @import './foundation/utilities'; -@import './foundation/colors'; @import './foundation/borders'; @import './foundation/layout'; @import './foundation/typography';