@razorpay/blade
Version:
The Design System that powers Razorpay
15 lines (12 loc) • 2.76 kB
JavaScript
import 'react-native';
import '@babel/runtime/helpers/slicedToArray';
import 'react';
import { isReactNative } from '../../../utils/platform/isReactNative.js';
import { castWebType } from '../../../utils/platform/castUtils.js';
import { makeMotionTime } from '../../../utils/makeMotionTime/makeMotionTime.native.js';
import { makeSpace } from '../../../utils/makeSpace/makeSpace.js';
import '../../BladeProvider/useTheme.js';
import { getFocusRingStyles } from '../../../utils/getFocusRingStyles/getFocusRingStyles.native.js';
var getNavigationButtonStyles=function getNavigationButtonStyles(props){var theme=props.theme,_props$isPressed=props.isPressed,isPressed=_props$isPressed===void 0?false:_props$isPressed,_props$variant=props.variant,variant=_props$variant===void 0?'filled':_props$variant;var motionToken=theme.motion;var iconColor={filled:{default:theme.colors.interactive.icon.staticBlack.muted,highlighted:theme.colors.interactive.icon.staticBlack.muted},stroked:{default:theme.colors.interactive.icon.gray.normal,highlighted:theme.colors.interactive.icon.gray.normal}};var backgroundColor={filled:{default:theme.colors.interactive.background.staticWhite.default,highlighted:theme.colors.interactive.background.staticWhite.highlighted},stroked:{default:theme.colors.interactive.background.staticWhite.faded,highlighted:theme.colors.interactive.background.staticWhite.fadedHighlighted}};var borderColors={filled:theme.colors.transparent,stroked:theme.colors.interactive.border.gray.faded};var borderColor=borderColors[variant];var borderWidth=theme.border.width.thin;var borderRadius=theme.border.radius.max;var state=isPressed?'highlighted':'default';return Object.assign({cursor:'pointer',background:'transparent',border:'none',borderStyle:'solid',borderWidth:borderWidth,borderRadius:borderRadius,borderColor:borderColor,backgroundColor:backgroundColor[variant][state],color:iconColor[variant][state],padding:makeSpace(theme.spacing[3]),display:'flex',alignItems:'center',justifyContent:'center',alignSelf:'center'},isReactNative()?{}:{transitionProperty:'color, box-shadow',transitionDuration:castWebType(makeMotionTime(motionToken.duration.xquick)),transitionTimingFunction:castWebType(motionToken.easing.standard),boxShadow:variant==='filled'?castWebType(theme.elevation.midRaised):undefined,'&:hover':{color:iconColor[variant].highlighted,backgroundColor:backgroundColor[variant].highlighted},'&:focus-visible':Object.assign({},getFocusRingStyles(),{color:iconColor[variant].highlighted,backgroundColor:backgroundColor[variant].highlighted}),'&:active':{color:iconColor[variant].highlighted,backgroundColor:backgroundColor[variant].highlighted}});};
export { getNavigationButtonStyles };
//# sourceMappingURL=getNavigationButtonStyles.js.map