@razorpay/blade
Version:
The Design System that powers Razorpay
46 lines (43 loc) • 1.98 kB
JavaScript
import { switchColors, switchSizes } from './switchTokens.js';
import getIn from '../../utils/lodashButBetter/get.js';
import isNumber from '../../utils/lodashButBetter/isNumber.js';
import '../../utils/index.js';
import '../../utils/makeSize/index.js';
import '../../utils/makeSpace/index.js';
import '../../utils/makeMotionTime/index.web.js';
import { makeSize } from '../../utils/makeSize/makeSize.js';
import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
import { isReactNative } from '../../utils/platform/isReactNative.js';
import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js';
var getTrackStyles = function getTrackStyles(_ref) {
var isChecked = _ref.isChecked,
isDisabled = _ref.isDisabled,
deviceType = _ref.deviceType,
size = _ref.size,
theme = _ref.theme;
var variant = 'default';
if (isDisabled) variant = 'disabled';
var checked = isChecked ? 'checked' : 'unchecked';
var background = switchColors.track[variant].background[checked];
var backgroundColor = getIn(theme, background);
var widthToken = switchSizes.track[deviceType][size].width;
var heightToken = switchSizes.track[deviceType][size].height;
var width = isNumber(widthToken) ? makeSize(widthToken) : makeSpace(getIn(theme, widthToken));
var height = isNumber(heightToken) ? makeSize(heightToken) : makeSpace(getIn(theme, heightToken));
return {
pointerEvents: 'none',
position: 'relative',
display: 'flex',
alignItems: 'center',
margin: makeSpace(theme.spacing[1]),
padding: makeSpace(theme.spacing[1]),
width: width,
height: height,
borderRadius: makeSize(theme.border.radius.max),
backgroundColor: backgroundColor,
transitionTimingFunction: "".concat(theme.motion.easing.standard),
transitionDuration: isReactNative() ? undefined : "".concat(makeMotionTime(theme.motion.duration['2xquick']))
};
};
export { getTrackStyles };
//# sourceMappingURL=getTrackStyles.js.map