From 68f42abdec3f4c3b7e3ca49b4c99f8c95fe8e4d3 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 23 Nov 2021 12:44:04 -0500 Subject: [PATCH 01/12] Update/add easing tokens --- documentation/Color system.md | 6 ++++-- src/components/README.md | 2 +- src/utilities/theme/tokens.ts | 8 ++++++-- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/documentation/Color system.md b/documentation/Color system.md index 9f9f36c4305..b29f2235502 100644 --- a/documentation/Color system.md +++ b/documentation/Color system.md @@ -261,6 +261,10 @@ Used to decorate elements where color does convey a specific meaning in componen | `--p-border-radius-base` | `0.4rem` | | `--p-border-radius-wide` | `0.8rem` | | `--p-border-radius-full` | `50%` | +| `--p-ease` | `cubic-bezier(0.25, 0.1, 0.25, 1)` | +| `--p-ease-in` | `cubic-bezier(0.36, 0, 1, 1)` | +| `--p-ease-out` | `cubic-bezier(0, 0, 0.42, 1)` | +| `--p-ease-excite` | `cubic-bezier(0.18, 0.67, 0.6, 1.22)` | | `--p-font-weight-regular` | `400` | | `--p-font-weight-medium` | `500` | | `--p-font-weight-semibold` | `600` | @@ -289,7 +293,5 @@ Used to decorate elements where color does convey a specific meaning in componen | `--p-button-group-item-spacing` | `-0.1rem` | | `--p-duration-100` | `100ms` | | `--p-duration-150` | `150ms` | -| `--p-ease-in` | `cubic-bezier(0.5, 0.1, 1, 1)` | -| `--p-ease` | `cubic-bezier(0.4, 0.22, 0.28, 1)` | | `--p-range-slider-thumb-size-base` | `1.6rem` | | `--p-range-slider-thumb-size-active` | `2.4rem` | diff --git a/src/components/README.md b/src/components/README.md index 3415347f388..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/utilities/theme/tokens.ts b/src/utilities/theme/tokens.ts index fc875121131..76c579e7d82 100644 --- a/src/utilities/theme/tokens.ts +++ b/src/utilities/theme/tokens.ts @@ -5,6 +5,12 @@ export const Tokens = { borderRadiusWide: rem('8px'), borderRadiusFull: '50%', + // Easing + ease: 'cubic-bezier(0.25, 0.1, 0.25, 1)', + easeIn: 'cubic-bezier(0.36, 0, 1, 1)', + easeOut: 'cubic-bezier(0, 0, 0.42, 1)', + easeExcite: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)', + // Font-Weights fontWeightRegular: 400, fontWeightMedium: 500, @@ -41,8 +47,6 @@ export const Tokens = { buttonGroupItemSpacing: rem('-1px'), duration100: '100ms', duration150: '150ms', - easeIn: 'cubic-bezier(0.5, 0.1, 1, 1)', - ease: 'cubic-bezier(0.4, 0.22, 0.28, 1)', rangeSliderThumbSizeBase: rem('16px'), rangeSliderThumbSizeActive: rem('24px'), }; From b96b07921d419499c81160f36dcf99cf557a8a8a Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 23 Nov 2021 12:57:58 -0500 Subject: [PATCH 02/12] Replace easing() with token --- src/components/Banner/Banner.scss | 4 ++-- src/components/BulkActions/BulkActions.scss | 2 +- src/components/DataTable/DataTable.scss | 4 ++-- src/components/Frame/Frame.scss | 2 +- src/components/IndexTable/IndexTable.scss | 2 +- src/components/Modal/components/Dialog/Dialog.scss | 3 ++- src/components/Popover/Popover.scss | 4 ++-- src/components/ProgressBar/ProgressBar.scss | 4 ++-- .../RangeSlider/components/SingleThumb/SingleThumb.scss | 6 +++--- src/components/ResourceItem/ResourceItem.scss | 2 +- src/components/ResourceList/ResourceList.scss | 2 +- src/components/TopBar/TopBar.scss | 2 +- .../TopBar/components/SearchField/SearchField.scss | 8 ++++---- src/components/TopBar/components/UserMenu/UserMenu.scss | 2 +- src/components/VideoThumbnail/VideoThumbnail.scss | 2 +- 15 files changed, 25 insertions(+), 24 deletions(-) diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss index 7e4de5abdfd..b4494918b25 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 duration() easing(); + transition: box-shadow duration() 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 duration() easing(); + transition: box-shadow duration() var(--p-ease); } .Button { diff --git a/src/components/BulkActions/BulkActions.scss b/src/components/BulkActions/BulkActions.scss index 521bbfbbd18..72ff05233d1 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() duration(); + transition: transform var(--p-ease) duration(); } .Slide-appear, diff --git a/src/components/DataTable/DataTable.scss b/src/components/DataTable/DataTable.scss index 2a05ee5be0f..39b7f6fcaf1 100644 --- a/src/components/DataTable/DataTable.scss +++ b/src/components/DataTable/DataTable.scss @@ -120,7 +120,7 @@ $breakpoint: 768px; display: flex; align-self: flex-end; opacity: 0; - transition: opacity duration() easing(), fill duration() easing(); + transition: opacity duration() var(--p-ease), fill duration() var(--p-ease); } .Heading { @@ -132,7 +132,7 @@ $breakpoint: 768px; align-items: baseline; @include recolor-icon(var(--p-icon)); color: var(--p-text); - transition: color duration() easing(); + transition: color duration() 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 707381e694f..6d8d253f743 100644 --- a/src/components/Frame/Frame.scss +++ b/src/components/Frame/Frame.scss @@ -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/IndexTable/IndexTable.scss b/src/components/IndexTable/IndexTable.scss index f7eee44b105..b8955afd800 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() duration(); + transition: transform var(--p-ease) duration(); 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 e4d2e69ac1f..61dbbbfdc50 100644 --- a/src/components/Modal/components/Dialog/Dialog.scss +++ b/src/components/Modal/components/Dialog/Dialog.scss @@ -88,7 +88,8 @@ $large-width: rem(980px); will-change: transform, opacity; opacity: 1; transform: translateY(0); - transition: transform easing() duration(), opacity easing() duration(); + transition: transform var(--p-ease) duration(), + opacity var(--p-ease) duration(); &.entering, &.exiting, diff --git a/src/components/Popover/Popover.scss b/src/components/Popover/Popover.scss index 822b6c92d38..3d6dc222ad7 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 aded78e2c15..363a67298e5 100644 --- a/src/components/ProgressBar/ProgressBar.scss +++ b/src/components/ProgressBar/ProgressBar.scss @@ -72,8 +72,8 @@ } .Animated { will-change: width; - animation: fillup duration(slowest) easing(); - transition: width duration(slowest) easing(); + animation: fillup duration(slowest) var(--p-ease); + transition: width duration(slowest) var(--p-ease); } .Progress, diff --git a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss b/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss index 0666e376177..3bce83754f3 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: duration(); - 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: duration(); - 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: duration(); - 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 4bec45cb631..022fd02b2d7 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() duration(); + transition: transform var(--p-ease) duration(); margin-right: -1 * resource-list-item(translate-offset); &.selectMode { diff --git a/src/components/ResourceList/ResourceList.scss b/src/components/ResourceList/ResourceList.scss index ecd4c5cd25c..5917cc3951a 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() duration(); + transition: opacity var(--p-ease) duration(); .HeaderWrapper-inSelectMode & { opacity: 0; diff --git a/src/components/TopBar/TopBar.scss b/src/components/TopBar/TopBar.scss index e8b93ac41b7..508c2181894 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: (duration() - 33ms) fill easing() 33ms; + transition: (duration() - 33ms) 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 848b49c891d..4b013d9d3c2 100644 --- a/src/components/TopBar/components/SearchField/SearchField.scss +++ b/src/components/TopBar/components/SearchField/SearchField.scss @@ -78,12 +78,12 @@ $stacking-order: ( outline: none; color: var(--p-text); will-change: fill, color; - transition: fill duration() easing(), color duration() easing(); + transition: fill duration() var(--p-ease), color duration() var(--p-ease); appearance: textfield; &::placeholder { color: var(--p-text); - transition: (duration() - 33ms) color easing() 33ms; + transition: (duration() - 33ms) color var(--p-ease) 33ms; } &::-webkit-search-decoration, @@ -104,7 +104,7 @@ $stacking-order: ( transform: translateY(-50%); svg { - transition: (duration() - 33ms) fill easing() 33ms; + transition: (duration() - 33ms) fill var(--p-ease) 33ms; } } @@ -150,7 +150,7 @@ $stacking-order: ( var(--top-bar-background-lighter) ); will-change: background-color; - transition: background-color duration() easing(); + transition: background-color duration() 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 079f5df3156..5f1bb73bb54 100644 --- a/src/components/TopBar/components/UserMenu/UserMenu.scss +++ b/src/components/TopBar/components/UserMenu/UserMenu.scss @@ -28,5 +28,5 @@ .Name, .Detail { - transition: (duration() - 33ms) color easing() 33ms; + transition: (duration() - 33ms) color var(--p-ease) 33ms; } diff --git a/src/components/VideoThumbnail/VideoThumbnail.scss b/src/components/VideoThumbnail/VideoThumbnail.scss index 4a53dab6c77..f7e468efb7a 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 duration(slowest) easing(); + transition: transform duration(slowest) var(--p-ease); } .ProgressBar, From cb4c574cd746e8365a1a2540b92288ebaa580e0f Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 23 Nov 2021 13:00:19 -0500 Subject: [PATCH 03/12] Replace easing(in) with token --- .../Tooltip/components/TooltipOverlay/TooltipOverlay.scss | 2 +- src/styles/shared/_controls.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss b/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss index 834332f8878..6d95f122ca0 100644 --- a/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss +++ b/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss @@ -10,7 +10,7 @@ $content-max-width: rem(200px); border-radius: var(--p-border-radius-base); pointer-events: none; will-change: opacity, left, top; - transition: opacity duration() easing(in) var(--p-duration-100); + transition: opacity duration() 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/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) { From 8b8c3049bd53c676ae2ffd31bbc1ee1f5e0b1c90 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 23 Nov 2021 13:01:30 -0500 Subject: [PATCH 04/12] Replace easing(out) with token --- src/components/Collapsible/Collapsible.scss | 2 +- src/components/Frame/Frame.scss | 4 ++-- .../Frame/components/CSSAnimation/CSSAnimation.scss | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) 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/Frame/Frame.scss b/src/components/Frame/Frame.scss index 6d8d253f743..3192fc9eb67 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 duration(slow) easing(out); + transition: transform duration(slow) var(--p-ease-out); } .Navigation-exit { @@ -70,7 +70,7 @@ $skip-vertical-offset: rem(10px); .Navigation-exitActive { transform: translateX(-100%); - transition: transform duration(slow) easing(out); + transition: transform duration(slow) var(--p-ease-out); } .NavigationDismiss { diff --git a/src/components/Frame/components/CSSAnimation/CSSAnimation.scss b/src/components/Frame/components/CSSAnimation/CSSAnimation.scss index a4d3af62af5..3b883989658 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 duration(slow) easing(out); + transition: opacity duration(slow) var(--p-ease-out); pointer-events: none; } From 110d99740405808e25e93a5bb537729aceb57337 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 23 Nov 2021 14:55:50 -0500 Subject: [PATCH 05/12] Update UNRELEASED.md --- UNRELEASED.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/UNRELEASED.md b/UNRELEASED.md index b7a80e0a9c3..c02313a1d07 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -4,6 +4,8 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t ### Breaking changes +- Replace easing() function with tokens ([#4698](https://github.com/Shopify/polaris-react/pull/4698)) + ### Enhancements - Allow for `readonly` items in ActionList ([#4623](https://github.com/Shopify/polaris-react/pull/4623)) From f54b2ff562edd23dd5bae759ff0de44e86c782d4 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 23 Nov 2021 15:02:58 -0500 Subject: [PATCH 06/12] Remove easing function file --- src/styles/foundation/_easing.scss | 23 ----------------------- 1 file changed, 23 deletions(-) delete mode 100644 src/styles/foundation/_easing.scss 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)}'; - } -} From fca77805169fe0a9ba5571b55c115199bde384dc Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 23 Nov 2021 15:03:49 -0500 Subject: [PATCH 07/12] Remove easing function imports --- src/styles/_common.scss | 1 - src/styles/_public-api.scss | 1 - 2 files changed, 2 deletions(-) diff --git a/src/styles/_common.scss b/src/styles/_common.scss index 85124f8a350..cf8cea2bb1a 100644 --- a/src/styles/_common.scss +++ b/src/styles/_common.scss @@ -11,7 +11,6 @@ @import './foundation/borders'; @import './foundation/border-radius'; @import './foundation/duration'; -@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 779e36639fc..338c0336047 100644 --- a/src/styles/_public-api.scss +++ b/src/styles/_public-api.scss @@ -23,7 +23,6 @@ @import './foundation/borders'; @import './foundation/border-radius'; @import './foundation/duration'; -@import './foundation/easing'; @import './foundation/layout'; @import './foundation/shadows'; @import './foundation/typography'; From 74e92bf438bdd88bb0efbd574636b80ed884a10b Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 23 Nov 2021 15:15:33 -0500 Subject: [PATCH 08/12] Replace last instances of easing() --- src/components/Sheet/Sheet.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Sheet/Sheet.scss b/src/components/Sheet/Sheet.scss index a1636277b2c..22693de1ccd 100644 --- a/src/components/Sheet/Sheet.scss +++ b/src/components/Sheet/Sheet.scss @@ -40,7 +40,7 @@ $sheet-desktop-width: rem(380px); .Bottom { will-change: transform; - transition: transform duration('slow') easing('base'); + transition: transform duration('slow') --p-ease; transform-origin: bottom; } .enterBottom { @@ -58,7 +58,7 @@ $sheet-desktop-width: rem(380px); .Right { will-change: transform; - transition: transform duration('slow') easing('base'); + transition: transform duration('slow') --p-ease; transform-origin: right; } .enterRight { From b78516c0273ec459cd613bb5946a08b451556c41 Mon Sep 17 00:00:00 2001 From: Laura Griffee Date: Tue, 23 Nov 2021 15:41:23 -0500 Subject: [PATCH 09/12] Update UNRELEASED.md --- UNRELEASED.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index c02313a1d07..abb619792f9 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -4,7 +4,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t ### Breaking changes -- Replace easing() function with tokens ([#4698](https://github.com/Shopify/polaris-react/pull/4698)) +- Removed the easing() function and replaced any instances with tokens ([#4698](https://github.com/Shopify/polaris-react/pull/4698)) ### Enhancements From e313994e936d6ce562c083c10c64782fceb5c7db Mon Sep 17 00:00:00 2001 From: Alex Page Date: Wed, 24 Nov 2021 09:29:04 -0800 Subject: [PATCH 10/12] Update ease function --- src/designTokens/motion.ts | 10 ++++------ src/utilities/theme/tokens.ts | 6 ------ 2 files changed, 4 insertions(+), 12 deletions(-) diff --git a/src/designTokens/motion.ts b/src/designTokens/motion.ts index 46c80502a2e..c34ae0ced58 100644 --- a/src/designTokens/motion.ts +++ b/src/designTokens/motion.ts @@ -6,10 +6,8 @@ export const motion: Tokens = { 'duration-3': '300ms', 'duration-4': '400ms', 'duration-5': '500m', - '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)', }; diff --git a/src/utilities/theme/tokens.ts b/src/utilities/theme/tokens.ts index 68251c9abad..6f6131c5727 100644 --- a/src/utilities/theme/tokens.ts +++ b/src/utilities/theme/tokens.ts @@ -5,12 +5,6 @@ export const Tokens = { borderRadiusWide: '0.8rem', borderRadiusFull: '50%', - // Easing - ease: 'cubic-bezier(0.25, 0.1, 0.25, 1)', - easeIn: 'cubic-bezier(0.36, 0, 1, 1)', - easeOut: 'cubic-bezier(0, 0, 0.42, 1)', - easeExcite: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)', - // Font-Weights fontWeightRegular: 400, fontWeightMedium: 500, From c34ee4a877ba8f7c4b18f5ff706d82154efc9a68 Mon Sep 17 00:00:00 2001 From: Alex Page Date: Wed, 24 Nov 2021 09:33:30 -0800 Subject: [PATCH 11/12] Update Sheet.scss --- src/components/Sheet/Sheet.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Sheet/Sheet.scss b/src/components/Sheet/Sheet.scss index 22693de1ccd..9bbc05a5771 100644 --- a/src/components/Sheet/Sheet.scss +++ b/src/components/Sheet/Sheet.scss @@ -40,7 +40,7 @@ $sheet-desktop-width: rem(380px); .Bottom { will-change: transform; - transition: transform duration('slow') --p-ease; + transition: transform duration('slow') var(--p-ease); transform-origin: bottom; } .enterBottom { @@ -58,7 +58,7 @@ $sheet-desktop-width: rem(380px); .Right { will-change: transform; - transition: transform duration('slow') --p-ease; + transition: transform duration('slow') var(--p-ease); transform-origin: right; } .enterRight { From e5c2f4503f4cc2f6afe7ccd42b8e4fc61c8750ea Mon Sep 17 00:00:00 2001 From: Alex Page Date: Wed, 24 Nov 2021 11:53:33 -0800 Subject: [PATCH 12/12] Move release changes --- UNRELEASED-v8.md | 2 ++ UNRELEASED.md | 2 -- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/UNRELEASED-v8.md b/UNRELEASED-v8.md index a3def058846..1ba6d5e78b5 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)) ### New components diff --git a/UNRELEASED.md b/UNRELEASED.md index 4d8b341de1e..a41f47b7616 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -4,8 +4,6 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t ### Breaking changes -- Removed the easing() function and replaced any instances with tokens ([#4698](https://github.com/Shopify/polaris-react/pull/4698)) - ### Enhancements - Removed animtion from `Skeleton` components ([#](https://github.com/Shopify/polaris-react/pull/))