diff --git a/UNRELEASED-v8.md b/UNRELEASED-v8.md index 0243d3c41d3..38d6550192e 100644 --- a/UNRELEASED-v8.md +++ b/UNRELEASED-v8.md @@ -34,6 +34,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t ### Enhancements - Added duration token values between 0 and 500 with 50ms increments ([#4781](https://github.com/Shopify/polaris-react/pull/4781)) +- Aligned easing tokens and values with CSS defaults ([#4790](https://github.com/Shopify/polaris-react/pull/4790)) ### Bug fixes diff --git a/src/components/README.md b/src/components/README.md index 1e85c4fed8e..47d28c1cebb 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/tokens/_motion.ts b/src/tokens/_motion.ts index 52cb40a9bfa..583e5060184 100644 --- a/src/tokens/_motion.ts +++ b/src/tokens/_motion.ts @@ -13,7 +13,8 @@ export const motion: TokenGroup = { 'duration-450': '450ms', 'duration-500': '500ms', 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)', + 'ease-in': 'cubic-bezier(0.42, 0, 1, 1)', + 'ease-out': 'cubic-bezier(0, 0, 0.58, 1)', + 'ease-in-out': 'cubic-bezier(0.42, 0, 0.58, 1)', + linear: 'cubic-bezier(0, 0, 1, 1)', };