diff --git a/UNRELEASED-v8.md b/UNRELEASED-v8.md index 04c53e0dc83..f0067a26721 100644 --- a/UNRELEASED-v8.md +++ b/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)) diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss index eeb9d519772..132eed761bd 100644 --- a/src/components/Banner/Banner.scss +++ b/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 { diff --git a/src/components/BulkActions/BulkActions.scss b/src/components/BulkActions/BulkActions.scss index 0ffbb91fb53..0e8b510afbd 100644 --- a/src/components/BulkActions/BulkActions.scss +++ b/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, diff --git a/src/components/Collapsible/Collapsible.scss b/src/components/Collapsible/Collapsible.scss index a7d369ce744..36ee62c44e4 100644 --- a/src/components/Collapsible/Collapsible.scss +++ b/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 diff --git a/src/components/DataTable/DataTable.scss b/src/components/DataTable/DataTable.scss index 2905634b1eb..299a24357e5 100644 --- a/src/components/DataTable/DataTable.scss +++ b/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); diff --git a/src/components/Frame/Frame.scss b/src/components/Frame/Frame.scss index fa8269e936e..4c69f5e8851 100644 --- a/src/components/Frame/Frame.scss +++ b/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; diff --git a/src/components/Frame/components/CSSAnimation/CSSAnimation.scss b/src/components/Frame/components/CSSAnimation/CSSAnimation.scss index a46ff383078..1389967cc51 100644 --- a/src/components/Frame/components/CSSAnimation/CSSAnimation.scss +++ b/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; } diff --git a/src/components/IndexTable/IndexTable.scss b/src/components/IndexTable/IndexTable.scss index cc28866791e..d3b1a4b2ac7 100644 --- a/src/components/IndexTable/IndexTable.scss +++ b/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; diff --git a/src/components/Modal/components/Dialog/Dialog.scss b/src/components/Modal/components/Dialog/Dialog.scss index 853febbbeb9..cebd1ab5f93 100644 --- a/src/components/Modal/components/Dialog/Dialog.scss +++ b/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, diff --git a/src/components/Popover/Popover.scss b/src/components/Popover/Popover.scss index 28a2770cdd9..5f7a8461714 100644 --- a/src/components/Popover/Popover.scss +++ b/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); } diff --git a/src/components/ProgressBar/ProgressBar.scss b/src/components/ProgressBar/ProgressBar.scss index 9cd31a1af86..a439cb7e492 100644 --- a/src/components/ProgressBar/ProgressBar.scss +++ b/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, diff --git a/src/components/README.md b/src/components/README.md index 176043f9f6e..1055ef63877 100644 --- a/src/components/README.md +++ b/src/components/README.md @@ -108,7 +108,7 @@ Wrap your application in a div that contains the Polaris CSS variables. This is ```html
``` diff --git a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss b/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss index f7ec78d7c2c..071c8b4db21 100644 --- a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss +++ b/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 &, diff --git a/src/components/ResourceItem/ResourceItem.scss b/src/components/ResourceItem/ResourceItem.scss index ee79c8101bc..0f571907ee2 100644 --- a/src/components/ResourceItem/ResourceItem.scss +++ b/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 { diff --git a/src/components/ResourceList/ResourceList.scss b/src/components/ResourceList/ResourceList.scss index 8ad39ae11c3..ca8c1dc4da4 100644 --- a/src/components/ResourceList/ResourceList.scss +++ b/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; diff --git a/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss b/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss index 8607e6bf289..230a4b0cb04 100644 --- a/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss +++ b/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'); diff --git a/src/components/TopBar/TopBar.scss b/src/components/TopBar/TopBar.scss index b83a07f6232..cb8ad83799b 100644 --- a/src/components/TopBar/TopBar.scss +++ b/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); diff --git a/src/components/TopBar/components/SearchField/SearchField.scss b/src/components/TopBar/components/SearchField/SearchField.scss index 090a8ff1769..b5180ff8b09 100644 --- a/src/components/TopBar/components/SearchField/SearchField.scss +++ b/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; } diff --git a/src/components/TopBar/components/UserMenu/UserMenu.scss b/src/components/TopBar/components/UserMenu/UserMenu.scss index 33ad1635353..113b5d147a3 100644 --- a/src/components/TopBar/components/UserMenu/UserMenu.scss +++ b/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; } diff --git a/src/components/VideoThumbnail/VideoThumbnail.scss b/src/components/VideoThumbnail/VideoThumbnail.scss index 820123f6095..1c7d19ca27c 100644 --- a/src/components/VideoThumbnail/VideoThumbnail.scss +++ b/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, diff --git a/src/styles/_common.scss b/src/styles/_common.scss index f88f795a6b1..c7a2101feec 100644 --- a/src/styles/_common.scss +++ b/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'; diff --git a/src/styles/_public-api.scss b/src/styles/_public-api.scss index 1c00db4148a..f81aae032d9 100644 --- a/src/styles/_public-api.scss +++ b/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'; diff --git a/src/styles/foundation/_easing.scss b/src/styles/foundation/_easing.scss deleted file mode 100644 index 1495bda1831..00000000000 --- a/src/styles/foundation/_easing.scss +++ /dev/null @@ -1,23 +0,0 @@ -$easing-data: ( - base: cubic-bezier(0.25, 0.1, 0.25, 1), - in: cubic-bezier(0.36, 0, 1, 1), - out: cubic-bezier(0, 0, 0.42, 1), - excite: cubic-bezier(0.18, 0.67, 0.6, 1.22), - overshoot: cubic-bezier(0.07, 0.28, 0.32, 1.22), - anticipate: cubic-bezier(0.38, -0.4, 0.88, 0.65), -); - -/// Returns the timing-function value for a given variant. -/// -/// @param {String} $variant - The key for the given variant. -/// @return {String} The cubic-bezier function (string) for the variant. - -@function easing($variant: base) { - $fetched-value: map-get($easing-data, $variant); - - @if type-of($fetched-value) == string { - @return $fetched-value; - } @else { - @error 'Easing variant `#{$variant}` not found. Available variants: #{available-names($easing-data)}'; - } -} diff --git a/src/styles/shared/_controls.scss b/src/styles/shared/_controls.scss index 1e9e021c9fa..06f98e70c0a 100644 --- a/src/styles/shared/_controls.scss +++ b/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) { diff --git a/src/tokens/_motion.ts b/src/tokens/_motion.ts index fed61f1ba7d..4525a77968e 100644 --- a/src/tokens/_motion.ts +++ b/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)', };