feat(tokens): add motion.easing.settle

Author: annamalailakshmann

.changeset/motion-settle-easing.md

@@ -0,0 +1,5 @@
+---
+'@razorpay/blade': minor
+---
+
+feat(tokens): add `motion.easing.settle` (`cubic-bezier(0.32, 0.72, 0, 1)`) for surfaces that grow, reflow, or settle into place — leaves quickly and decelerates hard into its final position

packages/blade/src/components/BladeProvider/__tests__/bladeLightTheme/bladeLightTheme.native.ts

@@ -19,6 +19,7 @@ const bladeLightTheme: Theme = {
       exit: Easing.bezier(0.17, 0, 1, 1),
       standard: Easing.bezier(0.3, 0, 0.2, 1),
       emphasized: Easing.bezier(0.5, 0, 0, 1),
+      settle: Easing.bezier(0.32, 0.72, 0, 1),
       overshoot: Easing.bezier(0.5, 0, 0.3, 1.5),
       shake: Easing.bezier(1, 0.5, 0, 0.5),
     },

packages/blade/src/tokens/global/motion.ts

@@ -91,6 +91,17 @@ type Easing = {
    */
   emphasized: EasingType<'cubic-bezier(0.5, 0, 0, 1)'>;
 
+  /**
+   * Settle Easing
+   *
+   * Use Case: Surfaces that grow, reflow, or settle into place — a composer
+   * expanding, a bar entering, chips reflowing. Leaves quickly and decelerates
+   * hard into its final position.
+   *
+   * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native
+   */
+  settle: EasingType<'cubic-bezier(0.32, 0.72, 0, 1)'>;
+
   /**
    * Overshoot Easing
    *
@@ -149,6 +160,7 @@ const easing: Easing = {
   exit: makeBezier(0.17, 0, 1, 1),
   standard: makeBezier(0.3, 0, 0.2, 1),
   emphasized: makeBezier(0.5, 0, 0, 1),
+  settle: makeBezier(0.32, 0.72, 0, 1),
   overshoot: makeBezier(0.5, 0, 0.3, 1.5),
   shake: makeBezier(1, 0.5, 0, 0.5),
 };

packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.native.test.tsx.snap

@@ -1531,6 +1531,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
       "exit": "0.17 0 1 1",
       "linear": "0 0 0 0",
       "overshoot": "0.5 0 0.3 1.5",
+      "settle": "0.32 0.72 0 1",
       "shake": "1 0.5 0 0.5",
       "standard": "0.3 0 0.2 1",
     },
@@ -3673,6 +3674,7 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
       "exit": "0.17 0 1 1",
       "linear": "0 0 0 0",
       "overshoot": "0.5 0 0.3 1.5",
+      "settle": "0.32 0.72 0 1",
       "shake": "1 0.5 0 0.5",
       "standard": "0.3 0 0.2 1",
     },

packages/blade/src/tokens/theme/__tests__/__snapshots__/createTheme.web.test.tsx.snap

@@ -1459,6 +1459,7 @@ exports[`createTheme should create a theme with the correct brand colors 1`] = `
       "exit": "cubic-bezier(0.17, 0, 1, 1)",
       "linear": "cubic-bezier(0, 0, 0, 0)",
       "overshoot": "cubic-bezier(0.5, 0, 0.3, 1.5)",
+      "settle": "cubic-bezier(0.32, 0.72, 0, 1)",
       "shake": "cubic-bezier(1, 0.5, 0, 0.5)",
       "standard": "cubic-bezier(0.3, 0, 0.2, 1)",
     },
@@ -3216,6 +3217,7 @@ exports[`createTheme should create a theme with the correct brand colors 4`] = `
       "exit": "cubic-bezier(0.17, 0, 1, 1)",
       "linear": "cubic-bezier(0, 0, 0, 0)",
       "overshoot": "cubic-bezier(0.5, 0, 0.3, 1.5)",
+      "settle": "cubic-bezier(0.32, 0.72, 0, 1)",
       "shake": "cubic-bezier(1, 0.5, 0, 0.5)",
       "standard": "cubic-bezier(0.3, 0, 0.2, 1)",
     },