@razorpay/blade/build/lib/web/production/utils/getFocusRingStyles/getFocusRingStyles.web.js

The Design System that powers Razorpay

import '../index.js';
import { castWebType } from '../platform/castUtils.js';
import { makeMotionTime } from '../makeMotionTime/makeMotionTime.web.js';

/* eslint-disable @typescript-eslint/explicit-function-return-type */


/**
 * @param props.theme Blade Theme Object
 * @param props.negativeOffset if set the outline offset will be set to -4px, this is useful
 * in table component where the outline will get cutoff by the table border
 */
function getFocusRingStyles(_ref) {
  var theme = _ref.theme,
    _ref$negativeOffset = _ref.negativeOffset,
    negativeOffset = _ref$negativeOffset === void 0 ? false : _ref$negativeOffset,
    _ref$isImportant = _ref.isImportant,
    isImportant = _ref$isImportant === void 0 ? false : _ref$isImportant;
  var important = "".concat(isImportant ? ' !important' : '');
  return {
    outline: "4px solid ".concat(theme.colors.surface.border.primary.muted).concat(important),
    outlineOffset: "".concat(negativeOffset ? '-4px' : '1px').concat(important),
    transitionProperty: 'outline-width',
    transitionDuration: castWebType(makeMotionTime(theme.motion.duration['2xquick'])),
    transitionTimingFunction: castWebType(theme.motion.easing.standard)
  };
}

export { getFocusRingStyles };
//# sourceMappingURL=getFocusRingStyles.web.js.map