Revert "Add motion prefix for motion tokens" (Shopify#9053)

Reverts Shopify#9017

Author: lgriffee

.changeset/forty-mangos-judge.md

@@ -45,11 +45,7 @@ function validateStandardBuild() {
   assert.ok(cssContent.includes('.Polaris-Avatar {'));
   assert.ok(cssContent.includes('.Polaris-BulkActions__BulkActionButton {'));
   assert.ok(cssContent.includes('@keyframes p-keyframes-bounce {'));
-  assert.ok(
-    cssContent.includes(
-      '--p-motion-keyframes-bounce:p-motion-keyframes-bounce;',
-    ),
-  );
+  assert.ok(cssContent.includes('--p-keyframes-bounce:p-keyframes-bounce;'));
 }
 
 function validateEsNextBuild() {
@@ -73,9 +69,7 @@ function validateEsNextBuild() {
   assert.ok(cssContent.includes('.Polaris-Avatar_z763p {'));
   assert.ok(cssKeyframesContent.includes('@keyframes p-keyframes-spin {'));
   assert.ok(
-    cssKeyframesContent.includes(
-      '--p-motion-keyframes-spin:p-motion-keyframes-spin;',
-    ),
+    cssKeyframesContent.includes('--p-keyframes-spin:p-keyframes-spin;'),
   );
 
   const jsContent = fs.readFileSync(

polaris-react/scripts/build-validate.js

@@ -18,7 +18,7 @@ import {Button} from '../Button';
 import {FilterPill, SearchField} from './components';
 import styles from './AlphaFilters.scss';
 
-const TRANSITION_DURATION = 'var(--p-motion-duration-150)';
+const TRANSITION_DURATION = 'var(--p-duration-150)';
 const TRANSITION_MARGIN = '-36px';
 
 const defaultStyle = {

polaris-react/src/components/AlphaFilters/AlphaFilters.tsx

@@ -8,8 +8,7 @@
   display: block;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   background-color: rgba(0, 0, 0, 0.5);
-  animation: var(--p-motion-keyframes-fade-in) var(--p-motion-duration-200) 1
-    forwards;
+  animation: var(--p-keyframes-fade-in) var(--p-duration-200) 1 forwards;
   opacity: 0;
   will-change: opacity;
 }

polaris-react/src/components/Backdrop/Backdrop.scss

@@ -14,7 +14,7 @@ $bulk-actions-button-stacking-order: (
   opacity: 0;
   width: 100%;
   justify-content: center;
-  transition: var(--p-motion-duration-100) var(--p-motion-ease);
+  transition: var(--p-duration-100) var(--p-ease);
   transition-property: transform, opacity;
   transform: translateY(120px);
   padding: 0 var(--p-space-4);

polaris-react/src/components/BulkActions/BulkActions.scss

@@ -26,8 +26,8 @@
     }
 
     ~ .Icon {
-      transition: opacity var(--p-motion-duration-150) var(--p-motion-ease),
-        transform var(--p-motion-duration-150) var(--p-motion-ease);
+      transition: opacity var(--p-duration-150) var(--p-ease),
+        transform var(--p-duration-150) var(--p-ease);
       transform: translate3d(-50%, -50%, 0) scale(1);
       opacity: 1;
     }
@@ -73,8 +73,8 @@
 
   transform: translate3d(-50%, -50%, 0) scale(0.25);
   opacity: 0;
-  transition: opacity var(--p-motion-duration-100) var(--p-motion-ease),
-    transform var(--p-motion-duration-100) var(--p-motion-ease);
+  transition: opacity var(--p-duration-100) var(--p-ease),
+    transform var(--p-duration-100) var(--p-ease);
 
   svg {
     fill: var(--p-color-icon-on-color);

polaris-react/src/components/Checkbox/Checkbox.scss

@@ -5,8 +5,8 @@
   overflow: hidden;
   will-change: max-height;
   transition-property: max-height;
-  transition-duration: var(--p-motion-duration-100);
-  transition-timing-function: var(--p-motion-ease-out);
+  transition-duration: var(--p-duration-100);
+  transition-timing-function: var(--p-ease-out);
 }
 
 // Stop children from being focused when fully closed

polaris-react/src/components/Collapsible/Collapsible.scss

@@ -33,8 +33,8 @@ export function Default() {
             open={open}
             id="basic-collapsible"
             transition={{
-              duration: 'var(--p-motion-duration-150)',
-              timingFunction: 'var(--p-motion-ease-in-out)',
+              duration: 'var(--p-duration-150)',
+              timingFunction: 'var(--p-ease-in-out)',
             }}
             expandOnPrint
           >

polaris-react/src/components/Collapsible/Collapsible.stories.tsx

@@ -19,7 +19,7 @@ export interface CollapsibleProps {
   /** Toggle whether the collapsible is expanded or not. */
   open: boolean;
   /** Override transition properties. When set to false, disables transition completely.
-   * @default transition={{duration: 'var(--p-motion-duration-150)', timingFunction: 'var(--p-motion-ease-in-out)'}}
+   * @default transition={{duration: 'var(--p-duration-150)', timingFunction: 'var(--p-ease-in-out)'}}
    */
   transition?: boolean | Transition;
   /** @deprecated Re-measuring is no longer necessary on children update **/

polaris-react/src/components/Collapsible/Collapsible.tsx

@@ -72,8 +72,7 @@
   padding: var(--p-space-4);
   white-space: nowrap;
   text-align: left;
-  transition: background-color var(--p-motion-duration-200)
-    var(--p-motion-ease-in-out);
+  transition: background-color var(--p-duration-200) var(--p-ease-in-out);
 
   .IncreasedTableDensity & {
     padding: var(--p-space-2) var(--p-space-4);
@@ -183,7 +182,7 @@
   display: flex;
   align-self: flex-end;
   opacity: 0;
-  transition: opacity var(--p-motion-duration-200) var(--p-motion-ease);
+  transition: opacity var(--p-duration-200) var(--p-ease);
 }
 
 .Heading {
@@ -196,7 +195,7 @@
   justify-content: flex-end;
   align-items: baseline;
   color: var(--p-color-text);
-  transition: color var(--p-motion-duration-200) var(--p-motion-ease);
+  transition: color var(--p-duration-200) var(--p-ease);
   cursor: pointer;
   padding: var(--p-space-2);
   margin: var(--p-space-2);