@razorpay/blade
Version:
The Design System that powers Razorpay
24 lines (21 loc) • 1.21 kB
JavaScript
import { baseInputBorderBackgroundMotion } from './baseInputTokens.js';
import '../../../utils/index.js';
import getIn from '../../../utils/lodashButBetter/get.js';
import { makeBorderSize } from '../../../utils/makeBorderSize/makeBorderSize.js';
import { castWebType } from '../../../utils/platform/castUtils.js';
import { makeMotionTime } from '../../../utils/makeMotionTime/makeMotionTime.web.js';
var getBaseInputBorderStyles = function getBaseInputBorderStyles(_ref) {
var theme = _ref.theme,
borderWidth = _ref.borderWidth,
borderColor = _ref.borderColor,
isFocused = _ref.isFocused;
return {
borderWidth: makeBorderSize(theme.border.width.none),
boxShadow: "".concat(borderColor, " 0px 0px 0px ").concat(makeBorderSize(borderWidth)),
transitionProperty: 'box-shadow, background-color',
transitionDuration: castWebType(makeMotionTime(getIn(theme.motion.duration, baseInputBorderBackgroundMotion[isFocused ? 'enter' : 'exit'].duration))),
transitionEasing: castWebType(getIn(theme.motion.easing, baseInputBorderBackgroundMotion[isFocused ? 'enter' : 'exit'].easing))
};
};
export { getBaseInputBorderStyles };
//# sourceMappingURL=getBaseInputBorderStyles.web.js.map