Remove ms-high-contrast-color()

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))
+- Removed the ms-high-contrast-color() function and replaced any instances with values ([#4938](https://github.com/Shopify/polaris-react/pull/4938))
 
 ### New components
 

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;
     }
   }
 

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;
   }
 }
 

src/components/Choice/Choice.scss

@@ -31,7 +31,7 @@
     }
 
     @media (-ms-high-contrast: active) {
-      color: ms-high-contrast-color('disabled-text');
+      color: grayText;
     }
   }
 }

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;
   }
 }

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;
   }
 }

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;
   }
 }
 

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;
   }
 
@@ -151,7 +151,7 @@
   }
 
   .Icon {
-    @include recolor-icon(ms-high-contrast-color('button-text'));
+    @include recolor-icon(buttonText);
   }
 
   .Backdrop {
@@ -163,23 +163,23 @@
 
   .Input:focus {
     ~ .Content {
-      color: ms-high-contrast-color('selected-text');
+      color: highlightText;
     }
 
     ~ .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;
     }
   }
 
   .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;
     }
   }

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;
   }
 }
 

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';

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';

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;
   }
 }
 

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 {

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;
     }
   }
 }