fix(styles): use valid media query (#20003)

* fix(styles): use valid media query

* fix(styles): update safari styles in loading, tabs, and tile

Author: matthewgallo

packages/styles/scss/components/code-snippet/_code-snippet.scss

@@ -508,15 +508,14 @@ $copy-btn-feedback: $background-inverse !default;
   // Safari-only media query
   // since fades won't appear correctly with CSS custom properties
   // see: tabs, code snippet, and modal overflow indicators
-  @media not all and (min-resolution >= 0.001dpcm) {
-    @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-      .#{$prefix}--snippet__overflow-indicator--left {
-        background-image: linear-gradient(to left, rgba($layer, 0), $layer);
-      }
-
-      .#{$prefix}--snippet__overflow-indicator--right {
-        background-image: linear-gradient(to right, rgba($layer, 0), $layer);
-      }
+  @supports (hanging-punctuation: first) and (font: -apple-system-body) and
+    (-webkit-appearance: none) {
+    .#{$prefix}--snippet__overflow-indicator--left {
+      background-image: linear-gradient(to left, rgba($layer, 0), $layer);
+    }
+
+    .#{$prefix}--snippet__overflow-indicator--right {
+      background-image: linear-gradient(to right, rgba($layer, 0), $layer);
     }
   }
 

packages/styles/scss/components/loading/_loading.scss

@@ -76,12 +76,11 @@
   }
 
   // Negative values for `stroke-dashoffset` are not supported in Safari
-  @media not all and (resolution >= 0.001dpcm) {
-    @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-      circle.#{$prefix}--loading__background {
-        stroke-dasharray: 265;
-        stroke-dashoffset: 0;
-      }
+  @supports (hanging-punctuation: first) and (font: -apple-system-body) and
+    (-webkit-appearance: none) {
+    circle.#{$prefix}--loading__background {
+      stroke-dasharray: 265;
+      stroke-dashoffset: 0;
     }
   }
 

packages/styles/scss/components/tabs/_tabs.scss

@@ -258,41 +258,40 @@
     // Safari-only media query
     // won't appear correctly with CSS custom properties
     // see: code snippet and modal overflow indicators
-    @media not all and (resolution >= 0.001dpcm) {
-      @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    @supports (hanging-punctuation: first) and (font: -apple-system-body) and
+      (-webkit-appearance: none) {
+      .#{$prefix}--tabs__overflow-indicator--left {
+        background-image: linear-gradient(
+          to left,
+          rgba($background, 0),
+          $background
+        );
+      }
+
+      .#{$prefix}--tabs__overflow-indicator--right {
+        background-image: linear-gradient(
+          to right,
+          rgba($background, 0),
+          $background
+        );
+      }
+
+      &.#{$prefix}--tabs--contained
         .#{$prefix}--tabs__overflow-indicator--left {
-          background-image: linear-gradient(
-            to left,
-            rgba($background, 0),
-            $background
-          );
-        }
+        background-image: linear-gradient(
+          to left,
+          rgba($layer-accent, 0),
+          $layer-accent
+        );
+      }
 
+      &.#{$prefix}--tabs--contained
         .#{$prefix}--tabs__overflow-indicator--right {
-          background-image: linear-gradient(
-            to right,
-            rgba($background, 0),
-            $background
-          );
-        }
-
-        &.#{$prefix}--tabs--contained
-          .#{$prefix}--tabs__overflow-indicator--left {
-          background-image: linear-gradient(
-            to left,
-            rgba($layer-accent, 0),
-            $layer-accent
-          );
-        }
-
-        &.#{$prefix}--tabs--contained
-          .#{$prefix}--tabs__overflow-indicator--right {
-          background-image: linear-gradient(
-            to right,
-            rgba($layer-accent, 0),
-            $layer-accent
-          );
-        }
+        background-image: linear-gradient(
+          to right,
+          rgba($layer-accent, 0),
+          $layer-accent
+        );
       }
     }
 

packages/styles/scss/components/tag/_tag.scss

@@ -381,10 +381,9 @@
     inline-size: convert.to-rem(60px);
 
     // Safari specific bug (#7672)
-    @media not all and (min-resolution >= 0.001dpcm) {
-      @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-        transform: translateZ(0);
-      }
+    @supports (hanging-punctuation: first) and (font: -apple-system-body) and
+      (-webkit-appearance: none) {
+      transform: translateZ(0);
     }
   }
 

packages/styles/scss/components/tile/_tile.scss

@@ -316,10 +316,9 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
       // Safari-only media query
       // Fixes an issue with scrolling
       // and absolutely positioned elements (#8119)
-      @media not all and (resolution >= 0.001dpcm) {
-        @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-          overflow-y: auto;
-        }
+      @supports (hanging-punctuation: first) and (font: -apple-system-body) and
+        (-webkit-appearance: none) {
+        overflow-y: auto;
       }
     }
   }