Replace & tophat all non-mixin border/outline ms-high-contrast

Shopify · Feb 3, 2021 · 83a14f4 · 83a14f4
1 parent ada7f89
commit 83a14f4
Show file tree

Hide file tree

Showing 8 changed files with 8 additions and 23 deletions.
diff --git a/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss b/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.scss
@@ -22,9 +22,7 @@ $shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     color: var(--p-text);
   }
 
-  @media (-ms-high-contrast: active) {
-    border: 1px solid ms-high-contrast-color('text');
-  }
+  @include high-contrast-border;
 }
 
 .LogoContainer {

diff --git a/src/components/Frame/components/Toast/Toast.scss b/src/components/Frame/components/Toast/Toast.scss
@@ -18,9 +18,7 @@ $Backdrop-opacity: 0.88;
     padding: spacing();
   }
 
-  @media (-ms-high-contrast: active) {
-    border: border-width(thick) solid ms-high-contrast-color('text');
-  }
+  @include high-contrast-border(border-width(thick));
 }
 
 .Action {

diff --git a/src/components/Modal/components/Dialog/Dialog.scss b/src/components/Modal/components/Dialog/Dialog.scss
@@ -38,9 +38,7 @@ $large-width: rem(980px);
   background: var(--p-surface);
   box-shadow: var(--p-modal-shadow);
 
-  @media (-ms-high-contrast: active) {
-    border: 1px solid ms-high-contrast-color('text');
-  }
+  @include high-contrast-border;
 
   @include frame-when-nav-hidden {
     bottom: 0;

diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss
@@ -103,9 +103,7 @@ $disabled-fade: 0.6;
     border-bottom-right-radius: var(--p-border-radius-base);
   }
 
-  @media (-ms-high-contrast: active) {
-    outline: 1px solid ms-high-contrast-color('text');
-  }
+  @include high-contrast-outline;
 
   @include focus-ring;
 

diff --git a/src/components/ProgressBar/ProgressBar.scss b/src/components/ProgressBar/ProgressBar.scss
@@ -23,9 +23,7 @@
   background-color: var(--p-surface-neutral);
   border-radius: var(--p-border-radius-base);
 
-  @media screen and (-ms-high-contrast: active) {
-    border: 1px solid ms-high-contrast-color('text');
-  }
+  @include high-contrast-border;
 }
 
 .sizeSmall {

diff --git a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss b/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss
@@ -129,10 +129,6 @@ $stacking-order: (
       border-color: var(--p-surface);
       box-shadow: 0 0 0 rem(2px) var(--p-focused);
     }
-
-    @media (-ms-high-contrast: active) {
-      outline: 1px solid ms-high-contrast-color('text');
-    }
   }
 
   .error & {
@@ -163,7 +159,6 @@ $stacking-order: (
   }
 }
 
-///
 /// Output value indicator
 $range-output-size: rem(32px);
 $range-output-translate-x: calc(
@@ -222,6 +217,7 @@ $range-output-spacing: rem(16px);
       transform: translateY(-($range-output-spacing / 2));
     }
   }
+  @include high-contrast-outline;
   // stylelint-enable selector-max-specificity, selector-max-combinators, selector-max-class
 }
 

diff --git a/src/components/Tag/Tag.scss b/src/components/Tag/Tag.scss
@@ -53,9 +53,7 @@ $icon-size: rem(16px);
     }
   }
 
-  @media (-ms-high-contrast: active) {
-    outline: 1px solid ms-high-contrast-color('text');
-  }
+  @include high-contrast-outline;
 }
 
 .TagText {

diff --git a/src/styles/shared/_forms.scss b/src/styles/shared/_forms.scss
@@ -16,6 +16,7 @@
 
 @mixin range-track-selectors {
   &::-ms-track {
+    @include high-contrast-outline;
     @content;
   }