Remove skeleton motion

UNRELEASED.md

@@ -7,9 +7,11 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t
 - Removed filter sass function and color-icon() mixin ([#4676](https://github.com/Shopify/polaris-react/pull/4676))
 - Renamed `--p-duration-1-0-0` and `--p-duration-1-5-0` to `--p-duration-100` and `--p-duration-150`.
 - Removed miscellaneous css custom properties ([#4686](https://github.com/Shopify/polaris-react/pull/4686))
+- Removed `skeleton-shimmer` mixin ([#4462])(https://github.com/Shopify/polaris-react/pull/4462)
 
 ### Enhancements
 
+- Removed motion from `Skeleton` components mixin ([#4462])(https://github.com/Shopify/polaris-react/pull/4462)
 - Allow for `readonly` items in ActionList ([#4623](https://github.com/Shopify/polaris-react/pull/4623))
 - Updated `VisuallyHidden` styles to not use `top` or `clip` ([#4641](https://github.com/Shopify/polaris-react/pull/4641))
 - Added `PlainAction` type to `ComplexAction`. ([#4489](https://github.com/Shopify/polaris-react/pull/4489))

src/components/AppProvider/AppProvider.scss

@@ -6,16 +6,6 @@
 
 :root {
   --polaris-version-number: '{{POLARIS_VERSION}}';
-  // This value matches the name of the animation defined below.
-  // The animation name is stored in a custom property so that the scss mixins
-  // in our public api that reference this animation can do so with
-  // `var(--polaris-animation-skeleton-shimmer)` instead of
-  // `:global(polaris-SkeletonShimmerAnimation)`. This allows us to expose a
-  // single set of public sass API files instead of needing distinct sass API
-  // entrypoints for consumers that use css-modules in locals mode (such as scss
-  // files in apps using sewing-kit) and for consumers not using css-modules.
-  // stylelint-disable-next-line value-keyword-case
-  --polaris-animation-skeleton-shimmer: polaris-SkeletonShimmerAnimation;
 }
 
 html,
@@ -87,13 +77,3 @@ button::-moz-focus-inner,
 [type='submit']::-moz-focus-inner {
   border-style: none;
 }
-
-@keyframes :global(polaris-SkeletonShimmerAnimation) {
-  0% {
-    opacity: 0.45;
-  }
-
-  100% {
-    opacity: 0.9;
-  }
-}

src/components/SkeletonBodyText/SkeletonBodyText.scss

@@ -4,10 +4,6 @@ $body-text-height: rem(8px);
 $body-text-line-height: rem(12px);
 $body-text-last-line-width: 80%;
 
-.SkeletonBodyTextContainer {
-  @include skeleton-shimmer;
-}
-
 .SkeletonBodyText {
   height: $body-text-height;
 

src/components/SkeletonDisplayText/SkeletonDisplayText.scss

@@ -13,7 +13,6 @@ $skeleton-display-text-max-width: rem(120px);
 .DisplayText {
   max-width: $skeleton-display-text-max-width;
 
-  @include skeleton-shimmer;
   @include skeleton-content;
 }
 

src/components/SkeletonPage/SkeletonPage.scss

@@ -56,7 +56,6 @@ $skeleton-display-text-max-width: rem(120px);
 }
 
 .SkeletonTitle {
-  @include skeleton-shimmer;
   @include skeleton-content;
   max-width: $skeleton-display-text-max-width;
   height: rem(28px);

src/components/SkeletonThumbnail/SkeletonThumbnail.scss

@@ -6,7 +6,6 @@
 }
 
 .SkeletonThumbnail {
-  @include skeleton-shimmer;
   @include skeleton-content;
 }
 

src/styles/shared/_skeleton.scss

@@ -1,6 +1,3 @@
-/// Used to create the shimmer effect of skeleton components
-$skeleton-shimmer-duration: duration(slower) * 2;
-
 // Used by both Thumbnail and SkeletonThumbnail
 $small-thumbnail-size: rem(40px);
 $medium-thumbnail-size: rem(60px);
@@ -16,19 +13,6 @@ $thumbnail-sizes: (
   @return map-get($thumbnail-sizes, $size);
 }
 
-@mixin skeleton-shimmer {
-  // This is a global animation, defined in /src/components/AppProvider/AppProvider.scss
-  // See that file for why this is referenced as a custom property instead of
-  // by name
-  animation: var(--polaris-animation-skeleton-shimmer)
-    $skeleton-shimmer-duration linear infinite alternate;
-  will-change: opacity;
-
-  @media (prefers-reduced-motion) {
-    animation: none;
-  }
-}
-
 @mixin skeleton-content {
   position: relative;