Remove high-contrast-outline() and high-contrast-border() mixins

UNRELEASED-v9.md

@@ -40,6 +40,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t
 - Removed the `available-names()` scss function ([#4967](https://github.com/Shopify/polaris-react/pull/4967))
 - Removed the `unstyled-link()` mixin and replaced any instances with values ([#4951](https://github.com/Shopify/polaris-react/pull/4951))
 - Removed the `unstyled-list()` mixin and replaced any instances with values ([#4960](https://github.com/Shopify/polaris-react/pull/4960))
+- 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
 

src/components/ActionList/ActionList.scss

@@ -55,14 +55,13 @@
   border-top: 1px solid transparent;
   color: inherit;
   @media (forced-colors: active) {
-    @include high-contrast-border;
+    border: var(--p-border-width-1) solid transparent;
   }
 
   &: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 {
@@ -72,7 +71,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;
   }
 
   &:visited {

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 {

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

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;

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

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) {

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

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

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 {

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,

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

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

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
 }
 

src/components/Tabs/Tabs.scss

@@ -107,15 +107,15 @@ $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);
     }
   }
 
   .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 {

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;

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

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.
@@ -39,7 +36,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;
     }
   }
 }

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 {

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