Replace easing() function with tokens

UNRELEASED-v8.md

@@ -14,6 +14,8 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t
 - Remove `color-multiply` function ([#4714](https://github.com/Shopify/polaris-react/pull/4714))
 - Remove `$color-palette-data` global variable ([#4714](https://github.com/Shopify/polaris-react/pull/4714))
 - Moved `logo` from `ThemeProvider` to `Frame` context ([#4667](https://github.com/Shopify/polaris-react/pull/4667))
+- Removed the easing() function and replaced any instances with tokens ([#4698](https://github.com/Shopify/polaris-react/pull/4698))
+- Removed `$easing-data` global variable ([#4698](https://github.com/Shopify/polaris-react/pull/4698))
 - Removed the `duration()` scss function and replaced any instances with tokens ([#4699](https://github.com/Shopify/polaris-react/pull/4699))
 - Removed the `$duration-data` global variable ([#4699](https://github.com/Shopify/polaris-react/pull/4699))
 

src/components/Banner/Banner.scss

@@ -9,7 +9,7 @@ $spinner-size: rem(20px);
 @mixin banner-variants($in-page) {
   --p-banner-background: var(--p-background);
   --p-banner-border: var(--p-banner-border-default);
-  transition: box-shadow var(--p-duration-200) easing();
+  transition: box-shadow var(--p-duration-200) var(--p-ease);
   transition-delay: var(--p-duration-100);
   box-shadow: var(--p-banner-border);
 
@@ -265,7 +265,7 @@ $spinner-size: rem(20px);
 .Text {
   box-shadow: 0 -2px 0 0 rgba(var(--p-rgb-text), 0.25) inset;
   will-change: box-shadow;
-  transition: box-shadow var(--p-duration-200) easing();
+  transition: box-shadow var(--p-duration-200) var(--p-ease);
 }
 
 .Button {

src/components/BulkActions/BulkActions.scss

@@ -104,7 +104,7 @@ $bulk-actions-offset-slide-in-start: rem(-40px);
 .Slide {
   will-change: transform;
   transform: translateY(0);
-  transition: transform easing() var(--p-duration-200);
+  transition: transform var(--p-ease) var(--p-duration-200);
 }
 
 .Slide-appear,

src/components/Collapsible/Collapsible.scss

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

src/components/DataTable/DataTable.scss

@@ -120,8 +120,8 @@ $breakpoint: 768px;
   display: flex;
   align-self: flex-end;
   opacity: 0;
-  transition: opacity var(--p-duration-200) easing(),
-    fill var(--p-duration-200) easing();
+  transition: opacity var(--p-duration-200) var(--p-ease),
+    fill var(--p-duration-200) var(--p-ease);
 }
 
 .Heading {
@@ -133,7 +133,7 @@ $breakpoint: 768px;
   align-items: baseline;
   @include recolor-icon(var(--p-icon));
   color: var(--p-text);
-  transition: color var(--p-duration-200) easing();
+  transition: color var(--p-duration-200) var(--p-ease);
   cursor: pointer;
   padding: spacing(tight);
   margin: spacing(tight);

src/components/Frame/Frame.scss

@@ -61,7 +61,7 @@ $skip-vertical-offset: rem(10px);
 
 .Navigation-enterActive {
   transform: translateX(0%);
-  transition: transform var(--p-duration-300) easing(out);
+  transition: transform var(--p-duration-300) var(--p-ease-out);
 }
 
 .Navigation-exit {
@@ -70,7 +70,7 @@ $skip-vertical-offset: rem(10px);
 
 .Navigation-exitActive {
   transform: translateX(-100%);
-  transition: transform var(--p-duration-300) easing(out);
+  transition: transform var(--p-duration-300) var(--p-ease-out);
 }
 
 .NavigationDismiss {
@@ -91,7 +91,7 @@ $skip-vertical-offset: rem(10px);
   pointer-events: none;
   will-change: opacity;
   cursor: pointer;
-  transition: opacity var(--p-duration-100) easing();
+  transition: opacity var(--p-duration-100) var(--p-ease);
 
   .Navigation-visible & {
     pointer-events: all;

src/components/Frame/components/CSSAnimation/CSSAnimation.scss

@@ -3,7 +3,7 @@
 .startFade {
   opacity: 0;
   will-change: opacity;
-  transition: opacity var(--p-duration-300) easing(out);
+  transition: opacity var(--p-duration-300) var(--p-ease-out);
   pointer-events: none;
 }
 

src/components/IndexTable/IndexTable.scss

@@ -485,7 +485,7 @@ $scroll-bar-border-radius: rem(4px);
 .condensedRow {
   width: calc(100% + #{$translate-offset});
   transform: translateX(-1 * $translate-offset);
-  transition: transform easing() var(--p-duration-200);
+  transition: transform var(--p-ease) var(--p-duration-200);
   display: flex;
   border-top: border('divider');
   filter: none;

src/components/Modal/components/Dialog/Dialog.scss

@@ -88,8 +88,8 @@ $large-width: rem(980px);
   will-change: transform, opacity;
   opacity: 1;
   transform: translateY(0);
-  transition: transform easing() var(--p-duration-200),
-    opacity easing() var(--p-duration-200);
+  transition: transform var(--p-ease) var(--p-duration-200),
+    opacity var(--p-ease) var(--p-duration-200);
 
   &.entering,
   &.exiting,

src/components/Popover/Popover.scss

@@ -16,8 +16,8 @@ $vertical-motion-offset: rem(-5px);
 
 .PopoverOverlay {
   opacity: 0;
-  transition: opacity var(--p-duration-100) easing(),
-    transform var(--p-duration-100) easing();
+  transition: opacity var(--p-duration-100) var(--p-ease),
+    transform var(--p-duration-100) var(--p-ease);
   transform: translateY($vertical-motion-offset);
 }
 

src/components/ProgressBar/ProgressBar.scss

@@ -72,8 +72,8 @@
 }
 .Animated {
   will-change: width;
-  animation: fillup var(--p-duration-500) easing();
-  transition: width var(--p-duration-500) easing();
+  animation: fillup var(--p-duration-500) var(--p-ease);
+  transition: width var(--p-duration-500) var(--p-ease);
 }
 
 .Progress,

src/components/RangeSlider/components/SingleThumb/SingleThumb.scss

@@ -100,7 +100,7 @@ $stacking-order: (
     transition: box-shadow var(--p-duration-100) var(--p-ease);
     transition-property: border-color, box-shadow, transform;
     transition-duration: var(--p-duration-200);
-    transition-timing-function: easing();
+    transition-timing-function: var(--p-ease);
 
     @include rangeSliderThumbPosition($range-thumb-size);
 
@@ -176,7 +176,7 @@ $range-output-spacing: rem(16px);
   pointer-events: none;
   transition-property: opacity, visibility, bottom;
   transition-duration: var(--p-duration-200);
-  transition-timing-function: easing();
+  transition-timing-function: var(--p-ease);
 
   .Input:active + & {
     $range-thumb-size-difference: var(--p-range-slider-thumb-size-active) -
@@ -198,7 +198,7 @@ $range-output-spacing: rem(16px);
   border-radius: border-radius();
   transition-property: transform;
   transition-duration: var(--p-duration-200);
-  transition-timing-function: easing();
+  transition-timing-function: var(--p-ease);
 
   // stylelint-disable selector-max-specificity, selector-max-combinators, selector-max-class
   .Input:hover + .Output &,

src/components/ResourceItem/ResourceItem.scss

@@ -158,7 +158,7 @@ $resource-list-item-variables: (
 .selectable {
   width: calc(100% + #{resource-list-item(translate-offset)});
   transform: translateX(-1 * resource-list-item(translate-offset));
-  transition: transform easing() var(--p-duration-200);
+  transition: transform var(--p-ease) var(--p-duration-200);
   margin-right: -1 * resource-list-item(translate-offset);
 
   &.selectMode {

src/components/ResourceList/ResourceList.scss

@@ -83,7 +83,7 @@ $item-wrapper-loading-height: rem(64px);
   display: flex;
   min-height: resource-list(header-content-min-height);
   opacity: 1;
-  transition: opacity easing() var(--p-duration-200);
+  transition: opacity var(--p-ease) var(--p-duration-200);
 
   .HeaderWrapper-inSelectMode & {
     opacity: 0;

src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss

@@ -10,7 +10,8 @@ $content-max-width: rem(200px);
   border-radius: var(--p-border-radius-base);
   pointer-events: none;
   will-change: opacity, left, top;
-  transition: opacity var(--p-duration-200) easing(in) var(--p-duration-100);
+  transition: opacity var(--p-duration-200) var(--p-ease-in)
+    var(--p-duration-100);
 
   @media screen and (-ms-high-contrast: active) {
     border: border-width(thick) solid ms-high-contrast-color('text');

src/components/TopBar/TopBar.scss

@@ -68,7 +68,7 @@ $context-control-expand-after: 1400px;
   padding: spacing(tight);
   border-radius: border-radius();
   fill: var(--p-icon); // Icon will inherit this fill
-  transition: var(--p-duration-150) fill easing() 33ms;
+  transition: var(--p-duration-150) fill var(--p-ease) 33ms;
 
   &.focused:active {
     background-color: var(--p-surface-pressed);

src/components/TopBar/components/SearchField/SearchField.scss

@@ -78,13 +78,13 @@ $stacking-order: (
   outline: none;
   color: var(--p-text);
   will-change: fill, color;
-  transition: fill var(--p-duration-200) easing(),
-    color var(--p-duration-200) easing();
+  transition: fill var(--p-duration-200) var(--p-ease),
+    color var(--p-duration-200) var(--p-ease);
   appearance: textfield;
 
   &::placeholder {
     color: var(--p-text);
-    transition: var(--p-duration-150) color easing() 33ms;
+    transition: var(--p-duration-150) color var(--p-ease) 33ms;
   }
 
   &::-webkit-search-decoration,
@@ -105,7 +105,7 @@ $stacking-order: (
   transform: translateY(-50%);
 
   svg {
-    transition: var(--p-duration-150) fill easing() 33ms;
+    transition: var(--p-duration-150) fill var(--p-ease) 33ms;
   }
 }
 
@@ -151,7 +151,7 @@ $stacking-order: (
     var(--top-bar-background-lighter)
   );
   will-change: background-color;
-  transition: background-color var(--p-duration-200) easing();
+  transition: background-color var(--p-duration-200) var(--p-ease);
   border-radius: var(--p-border-radius-base);
   animation: toLightBackground 0.01ms;
 }

src/components/TopBar/components/UserMenu/UserMenu.scss

@@ -28,5 +28,5 @@
 
 .Name,
 .Detail {
-  transition: var(--p-duration-150) color easing() 33ms;
+  transition: var(--p-duration-150) color var(--p-ease) 33ms;
 }

src/components/VideoThumbnail/VideoThumbnail.scss

@@ -89,7 +89,7 @@ $progress-bar-height: rem(6px);
   transform-origin: left;
   transform: scaleX(0);
   background-color: var(--p-border-highlight);
-  transition: transform var(--p-duration-500) easing();
+  transition: transform var(--p-duration-500) var(--p-ease);
 }
 
 .ProgressBar,

src/styles/_common.scss

@@ -10,7 +10,6 @@
 @import './foundation/border-width';
 @import './foundation/borders';
 @import './foundation/border-radius';
-@import './foundation/easing';
 @import './foundation/layout';
 @import './foundation/shadows';
 @import './foundation/typography';

src/styles/_public-api.scss

@@ -22,7 +22,6 @@
 @import './foundation/border-width';
 @import './foundation/borders';
 @import './foundation/border-radius';
-@import './foundation/easing';
 @import './foundation/layout';
 @import './foundation/shadows';
 @import './foundation/typography';

src/styles/shared/_controls.scss

@@ -11,7 +11,7 @@
 }
 
 @function control-icon-transition() {
-  @return transform var(--p-duration-100) easing(in);
+  @return transform var(--p-duration-100) var(--p-ease-in);
 }
 
 @mixin control-backdrop($style: base) {

src/tokens/_motion.ts

@@ -7,10 +7,8 @@ export const motion: TokenGroup = {
   'duration-300': '300ms',
   'duration-400': '400ms',
   'duration-500': '500ms',
-  'easing-base': 'cubic-bezier(0.64, 0, 0.35, 1)',
-  'easing-in': 'cubic-bezier(0.36, 0, 1, 1)',
-  'easing-out': 'cubic-bezier(0, 0, 0.42, 1)',
-  'easing-excite': 'cubic-bezier(0.18, 0.67, 0.6, 1.22)',
-  'easing-overshoot': 'cubic-bezier(0.07, 0.28, 0.32, 1.22)',
-  'easing-anticipate': 'cubic-bezier(0.38, -0.4, 0.88, 0.65)',
+  ease: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
+  'ease-in': 'cubic-bezier(0.36, 0, 1, 1)',
+  'ease-out': 'cubic-bezier(0, 0, 0.42, 1)',
+  'ease-excite': 'cubic-bezier(0.18, 0.67, 0.6, 1.22)',
 };