diff --git a/packages/blade/src/components/Button/IconButton/StyledIconButton.web.tsx b/packages/blade/src/components/Button/IconButton/StyledIconButton.web.tsx index 46fca1867f0..04720a6caa1 100644 --- a/packages/blade/src/components/Button/IconButton/StyledIconButton.web.tsx +++ b/packages/blade/src/components/Button/IconButton/StyledIconButton.web.tsx @@ -34,7 +34,7 @@ const StyledButton = styled.button((props) => { : theme.colors.interactive.icon[emphasisColor].muted, transitionProperty: 'color, box-shadow', transitionDuration: castWebType(makeMotionTime(motionToken.duration.xquick)), - transitionTimingFunction: motionToken.easing.standard.effective as string, + transitionTimingFunction: motionToken.easing.standard as string, '&:hover': { color: theme.colors.interactive.icon[emphasisColor].subtle, diff --git a/packages/blade/src/components/Input/BaseInput/AnimatedBaseInputWrapper.native.tsx b/packages/blade/src/components/Input/BaseInput/AnimatedBaseInputWrapper.native.tsx index 4cbe6a444d8..257c3cd5286 100644 --- a/packages/blade/src/components/Input/BaseInput/AnimatedBaseInputWrapper.native.tsx +++ b/packages/blade/src/components/Input/BaseInput/AnimatedBaseInputWrapper.native.tsx @@ -122,11 +122,10 @@ const _AnimatedBaseInputWrapper: React.ForwardRefRenderFunction< ), ), easing: castNativeType( - getIn( - theme.motion.easing, + theme.motion.easing[ baseInputBorderBackgroundMotion[rest.currentInteraction === 'focus' ? 'enter' : 'exit'] - .easing, - ), + .easing + ], ), }; diff --git a/packages/blade/src/components/Input/BaseInput/BaseInput.tsx b/packages/blade/src/components/Input/BaseInput/BaseInput.tsx index 853e91f4aec..2ea045d446b 100644 --- a/packages/blade/src/components/Input/BaseInput/BaseInput.tsx +++ b/packages/blade/src/components/Input/BaseInput/BaseInput.tsx @@ -749,11 +749,10 @@ const FocusRingWrapper = styled(BaseBox)<{ ), ), transitionTimingFunction: castWebType( - getIn( - theme.motion.easing, + theme.motion.easing[ baseInputBorderBackgroundMotion[currentInteraction === 'focus' ? 'enter' : 'exit'] - .easing, - ), + .easing + ], ), } : {}, diff --git a/packages/blade/src/components/ProgressBar/CircularProgressBar.web.tsx b/packages/blade/src/components/ProgressBar/CircularProgressBar.web.tsx index f87ce6f2301..a2f9a3958b9 100644 --- a/packages/blade/src/components/ProgressBar/CircularProgressBar.web.tsx +++ b/packages/blade/src/components/ProgressBar/CircularProgressBar.web.tsx @@ -138,7 +138,7 @@ const CircularProgressBarFilled = ({ strokeDashoffset={dashOffset} pulseMotionDuration="duration.2xgentle" pulseMotionDelay="delay.long" - motionEasing="easing.standard.revealing" + motionEasing="easing.emphasized" /> {showPercentage && size !== 'small' && ( { const gentle = makeMotionTime(props.theme.motion.duration.gentle); const easing = props.theme.motion.easing; - const l1Expand = `width ${gentle} ${easing.entrance.revealing}`; - const l1Collapse = `width ${moderate} ${easing.exit.revealing}`; + const l1Expand = `width ${gentle} ${easing.entrance}`; + const l1Collapse = `width ${moderate} ${easing.exit}`; return { width: '100%', diff --git a/packages/blade/src/components/Spinner/BaseSpinner/spinnerTokens.ts b/packages/blade/src/components/Spinner/BaseSpinner/spinnerTokens.ts index 263e71fce96..f0d1a70c3ad 100644 --- a/packages/blade/src/components/Spinner/BaseSpinner/spinnerTokens.ts +++ b/packages/blade/src/components/Spinner/BaseSpinner/spinnerTokens.ts @@ -11,7 +11,7 @@ const motion: { easing: EasingString; } = { duration: 'duration.2xgentle', - easing: 'easing.overshoot', // TODO: confirm + easing: 'easing.overshoot', }; export { dimensions, motion }; diff --git a/packages/blade/src/components/Switch/AnimatedThumbIcon.web.tsx b/packages/blade/src/components/Switch/AnimatedThumbIcon.web.tsx index 07b82d64396..3beca6c16db 100644 --- a/packages/blade/src/components/Switch/AnimatedThumbIcon.web.tsx +++ b/packages/blade/src/components/Switch/AnimatedThumbIcon.web.tsx @@ -11,7 +11,7 @@ const AnimatedThumbIcon = styled(Svg)<{ isChecked?: boolean }>(({ isChecked, the return { transitionDuration: `${makeMotionTime(duration)}`, transitionTimingFunction: easing, - transitionDelay: isChecked ? `${makeMotionTime(theme.motion.delay['2xshort'])}` : `0ms`, + transitionDelay: isChecked ? `${makeMotionTime(theme.motion.delay['xquick'])}` : `0ms`, opacity: isChecked ? 1 : 0, }; }); diff --git a/packages/blade/src/components/Table/tokens.ts b/packages/blade/src/components/Table/tokens.ts index 3c873397388..de291f24be5 100644 --- a/packages/blade/src/components/Table/tokens.ts +++ b/packages/blade/src/components/Table/tokens.ts @@ -88,14 +88,14 @@ const tableRow = { }, borderBottomWidth: 'thin', borderColor: 'surface.border.gray.muted', - backgroundColorMotionEasing: 'easing.standard.effective', + backgroundColorMotionEasing: 'easing.standard', backgroundColorMotionDuration: 'duration.xquick', } as const; const tableToolbar = { backgroundColor: 'transparent', backgroundColorSelected: 'interactive.background.primary.faded', - backgroundColorMotionEasing: 'easing.standard.effective', + backgroundColorMotionEasing: 'easing.standard', backgroundColorMotionDuration: 'duration.xquick', } as const; diff --git a/packages/blade/src/utils/makeMotionTime/makeMotionTime.web.test.ts b/packages/blade/src/utils/makeMotionTime/makeMotionTime.web.test.ts index 33752302787..4af65c24ef1 100644 --- a/packages/blade/src/utils/makeMotionTime/makeMotionTime.web.test.ts +++ b/packages/blade/src/utils/makeMotionTime/makeMotionTime.web.test.ts @@ -4,11 +4,11 @@ import { motion } from '~tokens/global'; describe('makeMotionTime', () => { it('should return the duration value in `ms`', () => { const duration = makeMotionTime(motion.duration.moderate); - expect(duration).toEqual('250ms'); + expect(duration).toEqual('280ms'); }); it('should return the delay value in `ms`', () => { - const delay = makeMotionTime(motion.delay.short); - expect(delay).toEqual('180ms'); + const delay = makeMotionTime(motion.delay.xquick); + expect(delay).toEqual('160ms'); }); });