feat: motion, migrate internal motion tokens

razorpay · Sep 9, 2024 · db90fbc · db90fbc
1 parent eb68a9b
commit db90fbc
Show file tree

Hide file tree

Showing 41 changed files with 117 additions and 82 deletions.
diff --git a/packages/blade/docs/tokens/Motion.stories.mdx b/packages/blade/docs/tokens/Motion.stories.mdx
@@ -13,11 +13,7 @@ import MovingDiv from '../components/MovingDiv';
         const colorScheme = context.store.globals.globals.colorScheme;
         return (
           <DocsContainer context={context}>
-            <BladeProvider
-              key={colorScheme}
-              themeTokens={bladeTheme}
-              colorScheme={colorScheme}
-            >
+            <BladeProvider key={colorScheme} themeTokens={bladeTheme} colorScheme={colorScheme}>
               {children}
             </BladeProvider>
           </DocsContainer>
@@ -113,7 +109,7 @@ export const MotionExample = () => {
     background-color: ${(props) => props.theme.colors.surface.background.primary.subtle};
     animation: ${(props) =>
       `resize ${makeMotionTime(props.theme.motion.duration.xgentle)} ${
-        props.theme.motion.easing.standard.effective
+        props.theme.motion.easing.standard
       } infinite`};
     @keyframes resize {
       0% {
@@ -127,7 +123,7 @@ export const MotionExample = () => {
       }
     }
   `;
-  return <ExampleDiv theme={theme} easing={theme.motion.easing.standard.effective} />;
+  return <ExampleDiv theme={theme} easing={theme.motion.easing.standard} />;
 };
 
 <Motion />
@@ -153,7 +149,7 @@ const ExampleDiv = styled.div`
     props.theme.colors.surface.background.primary.subtle};
   animation: ${(props) =>
     `resize ${makeMotionTime(props.theme.motion.duration.xgentle)} ${
-      props.theme.motion.easing.standard.effective
+      props.theme.motion.easing.standard
     } infinite`};
   @keyframes resize {
     0% {
@@ -177,7 +173,7 @@ import { makeMotionTime } from '@razorpay/blade/utils';
 
 const CustomComponent = () => {
   const { theme } = useTheme();
-  const easing = theme.motion.easing.standard.effective;
+  const easing = theme.motion.easing.standard;
   const duration = makeMotionTime(theme.motion.duration.xgentle);
   const delay = makeMotionTime(theme.motion.delay.short);
 

diff --git a/packages/blade/src/components/Accordion/commonStyles.ts b/packages/blade/src/components/Accordion/commonStyles.ts
@@ -7,7 +7,7 @@ import { makeMotionTime } from '~utils';
 const getTransitionDuration = (theme: Theme) => makeMotionTime(theme.motion.duration['2xquick']);
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-const getTransitionEasing = (theme: Theme) => theme.motion.easing.standard.effective;
+const getTransitionEasing = (theme: Theme) => theme.motion.easing.standard;
 
 const getBackgroundColor = ({
   theme,

diff --git a/packages/blade/src/components/BottomSheet/BottomSheetBackdrop.web.tsx b/packages/blade/src/components/BottomSheet/BottomSheetBackdrop.web.tsx
@@ -11,8 +11,8 @@ const StyledBottomSheetBackdrop = styled(BaseBox)<{ isOpen: boolean }>(({ theme,
   return {
     transitionDuration: `${makeMotionTime(theme.motion.duration.moderate)}`,
     transitionTimingFunction: isOpen
-      ? castWebType(theme.motion.easing.entrance.revealing)
-      : castWebType(theme.motion.easing.exit.revealing),
+      ? castWebType(theme.motion.easing.entrance)
+      : castWebType(theme.motion.easing.exit),
     pointerEvents: isOpen ? 'all' : 'none',
     transitionProperty: 'opacity',
   };

diff --git a/packages/blade/src/components/Card/CardRoot.native.tsx b/packages/blade/src/components/Card/CardRoot.native.tsx
@@ -51,7 +51,7 @@ const CardRoot = ({
   const { theme } = useTheme();
   const [isPressed, setIsPressed] = React.useState(false);
   const duration = castNativeType(makeMotionTime(theme.motion.duration.xquick));
-  const easing = castNativeType(theme.motion.easing.standard.effective);
+  const easing = castNativeType(theme.motion.easing.standard);
 
   const styles = useAnimatedStyle(() => {
     return {

diff --git a/packages/blade/src/components/Card/CardRoot.web.tsx b/packages/blade/src/components/Card/CardRoot.web.tsx
@@ -20,7 +20,7 @@ const StyledCardRoot = styled(BaseBox)<CardRootProps & { isPressed: boolean; isM
       // Selected state
       boxShadow: `${selectedBorder}${focusRing}`,
       transitionDuration: castWebType(makeMotionTime(theme.motion.duration.xquick)),
-      transitionTimingFunction: castWebType(theme.motion.easing.standard.effective),
+      transitionTimingFunction: castWebType(theme.motion.easing.standard),
       transitionProperty: 'transform, box-shadow',
 
       // pressed state for mobile only

diff --git a/packages/blade/src/components/Carousel/Carousel.web.tsx b/packages/blade/src/components/Carousel/Carousel.web.tsx
@@ -108,7 +108,7 @@ const CarouselContainer = styled(BaseBox)<{
     width: '100px',
     height: '100%',
     transitionDuration: castWebType(makeMotionTime(theme.motion.duration.gentle)),
-    transitionTimingFunction: castWebType(theme.motion.easing.standard.effective),
+    transitionTimingFunction: castWebType(theme.motion.easing.standard),
     transitionProperty: 'opacity',
   };
 

diff --git a/packages/blade/src/components/Carousel/Indicators/StyledIndicatorButton.native.tsx b/packages/blade/src/components/Carousel/Indicators/StyledIndicatorButton.native.tsx
@@ -21,7 +21,7 @@ const StyledIndicatorButton = ({
   ...props
 }: IndicatorButtonProps & { accessibilityLabel?: string }): React.ReactElement => {
   const { theme } = useTheme();
-  const easing = castNativeType(theme.motion.easing.standard.effective);
+  const easing = castNativeType(theme.motion.easing.standard);
   const duration = castNativeType(makeMotionTime(theme.motion.duration.gentle));
 
   const style = useAnimatedStyle(() => {

diff --git a/packages/blade/src/components/Carousel/Indicators/getIndicatorButtonStyles.ts b/packages/blade/src/components/Carousel/Indicators/getIndicatorButtonStyles.ts
@@ -17,7 +17,7 @@ const getIndicatorButtonStyles = ({
     blue: theme.colors.interactive.icon.primary.subtle,
   };
 
-  const easing = castWebType(theme.motion.easing.standard.effective);
+  const easing = castWebType(theme.motion.easing.standard);
   const duration = castWebType(makeMotionTime(theme.motion.duration.gentle));
 
   return {

diff --git a/packages/blade/src/components/Checkbox/CheckboxIcon/Fade.native.tsx b/packages/blade/src/components/Checkbox/CheckboxIcon/Fade.native.tsx
@@ -17,8 +17,8 @@ const StyledFade = styled(Animated.View)<{ styles: CSSObject }>(({ styles }) =>
 const Fade = ({ children, show, styles }: FadeProps) => {
   const { theme } = useTheme();
 
-  const fadeInEasing = (theme.motion.easing.entrance.effective as unknown) as EasingFn;
-  const fadeOutEasing = (theme.motion.easing.exit.effective as unknown) as EasingFn;
+  const fadeInEasing = (theme.motion.easing.entrance as unknown) as EasingFn;
+  const fadeOutEasing = (theme.motion.easing.exit as unknown) as EasingFn;
   const fadeIn = new Keyframe({
     from: {
       transform: [{ scale: 0.6 }],

diff --git a/packages/blade/src/components/Checkbox/CheckboxIcon/Fade.web.tsx b/packages/blade/src/components/Checkbox/CheckboxIcon/Fade.web.tsx
@@ -46,13 +46,11 @@ const Fade = ({ show, children, styles }: FadeProps) => {
 
   const duration = theme.motion.duration.xquick;
   const enter = css`
-    animation: ${fadeIn} ${makeMotionTime(duration)}
-      ${theme.motion.easing.entrance.effective as string};
+    animation: ${fadeIn} ${makeMotionTime(duration)} ${theme.motion.easing.entrance as string};
   `;
 
   const exit = css`
-    animation: ${fadeOut} ${makeMotionTime(duration)}
-      ${theme.motion.easing.exit.effective as string};
+    animation: ${fadeOut} ${makeMotionTime(duration)} ${theme.motion.easing.exit as string};
   `;
 
   // if show is undefined do not initialize the animation to prevent flash of animation

diff --git a/packages/blade/src/components/Collapsible/commonStyles.ts b/packages/blade/src/components/Collapsible/commonStyles.ts
@@ -31,7 +31,7 @@ const getOpacity = ({ isExpanded }: { isExpanded: boolean }): number => (isExpan
 const getTransitionDuration = (theme: Theme) => makeMotionTime(theme.motion.duration.xmoderate);
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-const getTransitionEasing = (theme: Theme) => theme.motion.easing.standard.effective;
+const getTransitionEasing = (theme: Theme) => theme.motion.easing.standard;
 
 const getCollapsibleChevronIconTransforms = (): {
   transformExpanded: number;

diff --git a/packages/blade/src/components/Drawer/Drawer.web.tsx b/packages/blade/src/components/Drawer/Drawer.web.tsx
@@ -29,11 +29,11 @@ const AnimatedDrawerContainer = styled(BaseBox)<{
 }>(({ theme, isFirstDrawerInStack, isVisible }) => {
   const entranceTransition: CSSProperties['transition'] = `all ${castWebType(
     castWebType(makeMotionTime(theme.motion.duration.gentle)),
-  )} ${castWebType(theme.motion.easing.entrance.revealing)}`;
+  )} ${castWebType(theme.motion.easing.entrance)}`;
 
   const exitTransition: CSSProperties['transition'] = `all
   ${castWebType(makeMotionTime(theme.motion.duration.xmoderate))}
-  ${castWebType(theme.motion.easing.exit.revealing)}`;
+  ${castWebType(theme.motion.easing.exit)}`;
 
   return {
     opacity: isVisible ? 1 : 0,
@@ -52,13 +52,13 @@ const DrawerOverlay = styled(FloatingOverlay)(({ theme }) => {
     opacity: 0,
     transition: `opacity
       ${makeMotionTime(theme.motion.duration.xmoderate)}
-      ${castWebType(theme.motion.easing.exit.revealing)}`,
+      ${castWebType(theme.motion.easing.exit)}`,
     backgroundColor: theme.colors.overlay.background.subtle,
 
     [`&.${SHOW_DRAWER}`]: {
       opacity: 1,
       transition: `opacity ${makeMotionTime(theme.motion.duration.gentle)} ${castWebType(
-        theme.motion.easing.entrance.revealing,
+        theme.motion.easing.entrance,
       )}`,
     },
   };

diff --git a/packages/blade/src/components/Form/Selector/SelectorInput.web.tsx b/packages/blade/src/components/Form/Selector/SelectorInput.web.tsx
@@ -31,7 +31,7 @@ const getHoverStyles = ({
   return {
     borderColor: borderColor ? getIn(theme, borderColor) : undefined,
     backgroundColor: getIn(theme, backgroundColor),
-    transitionTimingFunction: theme.motion.easing.standard.effective as string,
+    transitionTimingFunction: theme.motion.easing.standard as string,
     transitionDuration: castWebType(makeMotionTime(theme.motion.duration['2xquick'])),
   };
 };

diff --git a/packages/blade/src/components/Input/BaseInput/AnimatedBaseInputWrapper.native.tsx b/packages/blade/src/components/Input/BaseInput/AnimatedBaseInputWrapper.native.tsx
@@ -67,7 +67,7 @@ const _AnimatedBaseInputWrapper: React.ForwardRefRenderFunction<
       showAllTags ? baseInputWrapperMaxHeight[rest.size] : baseInputHeight[rest.size],
       {
         duration: theme.motion.duration.xquick,
-        easing: castNativeType(theme.motion.easing.exit.effective),
+        easing: castNativeType(theme.motion.easing.exit),
       },
       (isComplete) => {
         if (isComplete && !showAllTags) {

diff --git a/packages/blade/src/components/Input/BaseInput/AnimatedBaseInputWrapper.web.tsx b/packages/blade/src/components/Input/BaseInput/AnimatedBaseInputWrapper.web.tsx
@@ -46,7 +46,7 @@ const StyledBaseInputWrapper = styled(BaseBox)<
     }),
     transitionProperty: 'background-color',
     transitionDuration: castWebType(makeMotionTime(props.theme.motion.duration.xquick)),
-    transitionTimingFunction: castWebType(props.theme.motion.easing.standard.effective),
+    transitionTimingFunction: castWebType(props.theme.motion.easing.standard),
   },
   ':focus-within': {
     ...getInputBackgroundAndBorderStyles({
@@ -113,12 +113,12 @@ to {
 
   const expandTransition = css`
     animation: ${expandAnimation} ${makeMotionTime(motion.duration.quick)}
-      ${String(motion.easing.entrance.effective)};
+      ${String(motion.easing.entrance)};
   `;
 
   const collapseTransition = css`
     animation: ${collapseAnimation} ${makeMotionTime(motion.duration.quick)}
-      ${String(motion.easing.exit.effective)};
+      ${String(motion.easing.exit)};
   `;
 
   const noTransition = css`

diff --git a/packages/blade/src/components/Modal/Modal.web.tsx b/packages/blade/src/components/Modal/Modal.web.tsx
@@ -61,8 +61,8 @@ const ModalContent = styled(BaseBox)<{ isVisible: boolean }>(({ isVisible, theme
     animation: ${isVisible ? entry : exit}
       ${castWebType(makeMotionTime(theme.motion.duration.xmoderate))}
       ${isVisible
-        ? castWebType(theme.motion.easing.entrance.revealing)
-        : castWebType(theme.motion.easing.exit.revealing)};
+        ? castWebType(theme.motion.easing.entrance)
+        : castWebType(theme.motion.easing.exit)};
   `;
 });
 

diff --git a/packages/blade/src/components/Modal/ModalBackdrop.tsx b/packages/blade/src/components/Modal/ModalBackdrop.tsx
@@ -12,8 +12,8 @@ const StyledModalBackdrop = styled(FloatingOverlay)(({ theme }) => {
   return {
     transitionDuration: `${makeMotionTime(theme.motion.duration.xmoderate)}`,
     transitionTimingFunction: isVisible
-      ? castWebType(theme.motion.easing.entrance.revealing)
-      : castWebType(theme.motion.easing.exit.revealing),
+      ? castWebType(theme.motion.easing.entrance)
+      : castWebType(theme.motion.easing.exit),
     transitionProperty: 'opacity',
     opacity: isVisible ? 1 : 0,
     backgroundColor: theme.colors.overlay.background.subtle,

diff --git a/packages/blade/src/components/Popover/PopoverContentWrapper.native.tsx b/packages/blade/src/components/Popover/PopoverContentWrapper.native.tsx
@@ -38,7 +38,7 @@ const PopoverContentWrapper = React.forwardRef<View, PopoverContentWrapperProps>
     const translate = useSharedValue(offset);
     const opacity = useSharedValue(0);
 
-    const easing = (theme.motion.easing.entrance.effective as unknown) as EasingFn;
+    const easing = (theme.motion.easing.entrance as unknown) as EasingFn;
     const duration = theme.motion.duration.quick;
 
     React.useEffect(() => {

diff --git a/packages/blade/src/components/Radio/RadioIcon/Fade.native.tsx b/packages/blade/src/components/Radio/RadioIcon/Fade.native.tsx
@@ -17,8 +17,8 @@ const StyledFade = styled(Animated.View)<{ styles: CSSObject }>(({ styles }) =>
 const Fade = ({ children, show, styles }: FadeProps) => {
   const { theme } = useTheme();
 
-  const enterEasing = (theme.motion.easing.entrance.effective as unknown) as EasingFn;
-  const exitEasing = (theme.motion.easing.exit.effective as unknown) as EasingFn;
+  const enterEasing = (theme.motion.easing.entrance as unknown) as EasingFn;
+  const exitEasing = (theme.motion.easing.exit as unknown) as EasingFn;
   const scaleIn = new Keyframe({
     from: {
       transform: [{ scale: 0.3 }],

diff --git a/packages/blade/src/components/Radio/RadioIcon/Fade.web.tsx b/packages/blade/src/components/Radio/RadioIcon/Fade.web.tsx
@@ -46,13 +46,11 @@ const Fade = ({ show, children, styles }: FadeProps) => {
 
   const duration = theme.motion.duration.xquick;
   const enter = css`
-    animation: ${scaleIn} ${makeMotionTime(duration)}
-      ${theme.motion.easing.entrance.effective as string};
+    animation: ${scaleIn} ${makeMotionTime(duration)} ${theme.motion.easing.entrance as string};
   `;
 
   const exit = css`
-    animation: ${fadeOut} ${makeMotionTime(duration)}
-      ${theme.motion.easing.exit.effective as string};
+    animation: ${fadeOut} ${makeMotionTime(duration)} ${theme.motion.easing.exit as string};
   `;
 
   // usePresence hook waits for the animation to finish before unmounting the component

diff --git a/packages/blade/src/components/Radio/RadioIcon/RadioIconWrapperStyles.ts b/packages/blade/src/components/Radio/RadioIcon/RadioIconWrapperStyles.ts
@@ -44,7 +44,7 @@ const getRadioIconWrapperStyles = ({
     borderColor,
     ...(!isReactNative && {
       transitionDuration: castWebType(makeMotionTime(theme.motion.duration.xquick)),
-      transitionTimingFunction: castWebType(theme.motion.easing.exit.attentive),
+      transitionTimingFunction: castWebType(theme.motion.easing.exit),
     }),
   };
 };

diff --git a/packages/blade/src/components/SideNav/tokens.ts b/packages/blade/src/components/SideNav/tokens.ts
@@ -28,9 +28,7 @@ const HOVER_AGAIN_DELAY = 500;
 const L1_EXIT_HOVER_DELAY = 150;
 
 const getNavItemTransition = ({ motion }: Theme): string => {
-  return `background-color ${makeMotionTime(motion.duration['2xquick'])} ${
-    motion.easing.standard.effective
-  }`;
+  return `background-color ${makeMotionTime(motion.duration['2xquick'])} ${motion.easing.standard}`;
 };
 
 export {

diff --git a/packages/blade/src/components/Skeleton/PulseAnimation.native.tsx b/packages/blade/src/components/Skeleton/PulseAnimation.native.tsx
@@ -22,7 +22,7 @@ const PulseAnimation = (props: SkeletonProps): React.ReactElement => {
   const durationPluseOff = theme.motion.duration.xmoderate;
   const durationPluseOn = theme.motion.duration['2xgentle'];
   const totalDuration = castNativeType(makeMotionTime(durationPluseOn + durationPluseOff));
-  const easing = castNativeType(theme.motion.easing.standard.revealing);
+  const easing = castNativeType(theme.motion.easing.emphasized);
   const progress = useSharedValue(0);
 
   const fadeIn = () => {

diff --git a/packages/blade/src/components/Skeleton/PulseAnimation.web.tsx b/packages/blade/src/components/Skeleton/PulseAnimation.web.tsx
@@ -33,7 +33,7 @@ const PulseAnimation = styled(BaseBox)(({ theme }) => {
   const durationPulseOn = theme.motion.duration['2xgentle'];
   const totalDuration = castWebType(makeMotionTime(durationPulseOn + durationPluseOff));
   const duration = castWebType(makeMotionTime(theme.motion.duration['2xgentle']));
-  const easing = castWebType(theme.motion.easing.standard.effective);
+  const easing = castWebType(theme.motion.easing.standard);
 
   return css`
     opacity: 0;

diff --git a/packages/blade/src/components/SpotlightPopoverTour/TourMask.web.tsx b/packages/blade/src/components/SpotlightPopoverTour/TourMask.web.tsx
@@ -67,13 +67,13 @@ const FadeRect = React.memo(
     const duration = theme.motion.duration.gentle;
     const enter = css`
       animation: ${scaleIn} ${makeMotionTime(duration)}
-        ${(theme.motion.easing.entrance.effective as unknown) as string};
+        ${(theme.motion.easing.entrance as unknown) as string};
       animation-fill-mode: forwards;
     `;
 
     const exit = css`
       animation: ${fadeOut} ${makeMotionTime(duration)}
-        ${(theme.motion.easing.exit.effective as unknown) as string};
+        ${(theme.motion.easing.exit as unknown) as string};
       animation-fill-mode: forwards;
     `;
 

diff --git a/packages/blade/src/components/StepGroup/StepItem.web.tsx b/packages/blade/src/components/StepGroup/StepItem.web.tsx
@@ -43,7 +43,7 @@ const InteractiveItemHeaderBox = styled.button<InteractiveItemHeaderProps>((prop
       : props.theme.colors.transparent,
     borderRadius: props.theme.border.radius.medium,
     width: '100%',
-    transition: `background-color ${props.theme.motion.duration.xquick} ${props.theme.motion.easing.standard.effective}`,
+    transition: `background-color ${props.theme.motion.duration.xquick} ${props.theme.motion.easing.standard}`,
     ':hover': {
       backgroundColor: props.isSelected
         ? props.theme.colors.interactive.background.primary.fadedHighlighted

diff --git a/packages/blade/src/components/Switch/getTrackStyles.ts b/packages/blade/src/components/Switch/getTrackStyles.ts
@@ -42,7 +42,7 @@ const getTrackStyles = ({
     height,
     borderRadius: makeSize(theme.border.radius.max),
     backgroundColor,
-    transitionTimingFunction: `${theme.motion.easing.standard.effective}`,
+    transitionTimingFunction: `${theme.motion.easing.standard}`,
     transitionDuration: isReactNative()
       ? undefined
       : `${makeMotionTime(theme.motion.duration['2xquick'])}`,

diff --git a/packages/blade/src/components/Switch/switchTokens.ts b/packages/blade/src/components/Switch/switchTokens.ts
@@ -82,9 +82,9 @@ const switchColors = {
 
 const switchMotion = {
   easing: {
-    thumb: 'motion.easing.standard.effective',
-    thumbIcon: 'motion.easing.standard.effective',
-    track: 'motion.easing.standard.effective',
+    thumb: 'motion.easing.standard',
+    thumbIcon: 'motion.easing.standard',
+    track: 'motion.easing.standard',
   },
   duration: {
     thumb: 'motion.duration.xquick',

diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx
@@ -109,9 +109,9 @@ const RefreshWrapper = styled(BaseBox)<{
     opacity: isRefreshSpinnerVisible ? 1 : 0,
     transition: `opacity ${makeMotionTime(theme.motion.duration.quick)} ${
       isRefreshSpinnerEntering
-        ? theme.motion.easing.entrance.effective
+        ? theme.motion.easing.entrance
         : isRefreshSpinnerExiting
-        ? theme.motion.easing.exit.effective
+        ? theme.motion.easing.exit
         : ''
     }`,
   };

diff --git a/packages/blade/src/components/Tabs/TabIndicator.web.tsx b/packages/blade/src/components/Tabs/TabIndicator.web.tsx
@@ -100,7 +100,7 @@ const TabIndicator = ({
     transitionDuration: hasMeasured
       ? castWebType(makeMotionTime(theme.motion.duration.gentle))
       : '0ms',
-    transitionTimingFunction: castWebType(theme.motion.easing.standard.effective),
+    transitionTimingFunction: castWebType(theme.motion.easing.standard),
   };
 
   if (variant === 'filled') {

diff --git a/packages/blade/src/components/Tabs/TabItem.web.tsx b/packages/blade/src/components/Tabs/TabItem.web.tsx
@@ -88,11 +88,11 @@ const StyledTabButton = styled.button<{
     },
 
     transitionProperty: 'all',
-    transitionTimingFunction: castWebType(theme.motion.easing.standard.effective),
+    transitionTimingFunction: castWebType(theme.motion.easing.standard),
     transitionDuration: castWebType(makeMotionTime(theme.motion.duration.gentle)),
     '*': {
       transitionProperty: 'color, fill',
-      transitionTimingFunction: castWebType(theme.motion.easing.standard.effective),
+      transitionTimingFunction: castWebType(theme.motion.easing.standard),
       transitionDuration: castWebType(makeMotionTime(theme.motion.duration.xquick)),
     },
   };