@razorpay/blade
Version:
The Design System that powers Razorpay
194 lines (190 loc) • 6.45 kB
JavaScript
import '../../../tokens/global/index.js';
import '../../../utils/index.js';
import { size } from '../../../tokens/global/size.js';
import { makeSize } from '../../../utils/makeSize/makeSize.js';
/* eslint-disable @typescript-eslint/explicit-function-return-type */
var backgroundColor = function backgroundColor(property) {
var isBorder = property === 'border';
return {
base: {
primary: {
"default": "interactive.".concat(property, ".primary.default"),
highlighted: "interactive.".concat(property, ".primary.highlighted"),
disabled: "interactive.".concat(property, ".primary.disabled")
},
secondary: {
"default": isBorder ? 'interactive.border.primary.default' : 'transparent',
highlighted: isBorder ? "interactive.border.primary.default" : "interactive.background.primary.faded",
disabled: isBorder ? "interactive.border.primary.disabled" : "transparent"
},
tertiary: {
"default": "interactive.".concat(property, ".gray.default"),
highlighted: "interactive.".concat(property, ".gray.highlighted"),
disabled: "interactive.".concat(property, ".gray.disabled")
}
},
white: {
primary: {
"default": "interactive.".concat(property, ".staticWhite.default"),
highlighted: "interactive.".concat(property, ".staticWhite.highlighted"),
disabled: "interactive.".concat(property, ".staticWhite.disabled")
},
secondary: {
"default": isBorder ? 'interactive.border.staticWhite.highlighted' : 'transparent',
highlighted: isBorder ? 'interactive.border.staticWhite.highlighted' : 'interactive.background.staticWhite.faded',
disabled: isBorder ? "interactive.border.staticWhite.disabled" : 'transparent'
},
tertiary: {
"default": "interactive.background.staticWhite.faded",
highlighted: "interactive.background.staticWhite.fadedHighlighted",
disabled: "interactive.background.staticWhite.disabled"
}
},
color: function color(_color) {
return {
primary: {
"default": "interactive.".concat(property, ".").concat(_color, ".default"),
highlighted: "interactive.".concat(property, ".").concat(_color, ".highlighted"),
disabled: "interactive.".concat(property, ".").concat(_color, ".disabled")
},
secondary: {
"default": isBorder ? "interactive.border.".concat(_color, ".default") : "interactive.background.".concat(_color, ".faded"),
highlighted: isBorder ? "interactive.border.".concat(_color, ".default") : "interactive.background.".concat(_color, ".fadedHighlighted"),
disabled: "interactive.".concat(property, ".").concat(_color, ".disabled")
}
};
}
};
};
var textColor = function textColor(property) {
return {
base: {
primary: {
"default": "interactive.".concat(property, ".onPrimary.normal"),
highlighted: "interactive.".concat(property, ".onPrimary.normal"),
disabled: "interactive.".concat(property, ".primary.disabled")
},
secondary: {
"default": "interactive.".concat(property, ".primary.subtle"),
highlighted: "interactive.".concat(property, ".primary.subtle"),
disabled: "interactive.".concat(property, ".primary.disabled")
},
tertiary: {
"default": "interactive.".concat(property, ".gray.normal"),
highlighted: "interactive.".concat(property, ".gray.normal"),
disabled: "interactive.".concat(property, ".gray.disabled")
}
},
white: {
primary: {
"default": "interactive.".concat(property, ".staticBlack.muted"),
highlighted: "interactive.".concat(property, ".staticBlack.muted"),
disabled: "interactive.".concat(property, ".staticBlack.disabled")
},
secondary: {
"default": "interactive.".concat(property, ".staticWhite.normal"),
highlighted: "interactive.".concat(property, ".staticWhite.normal"),
disabled: "interactive.".concat(property, ".staticWhite.disabled")
},
tertiary: {
"default": "interactive.".concat(property, ".staticWhite.normal"),
highlighted: "interactive.".concat(property, ".staticWhite.normal"),
disabled: "interactive.".concat(property, ".staticWhite.disabled")
}
},
color: function color(_color2) {
return {
primary: {
"default": "interactive.".concat(property, ".staticWhite.normal"),
highlighted: "interactive.".concat(property, ".staticWhite.normal"),
disabled: "interactive.".concat(property, ".").concat(_color2, ".disabled")
},
secondary: {
"default": "interactive.".concat(property, ".").concat(_color2, ".normal"),
highlighted: "interactive.".concat(property, ".").concat(_color2, ".normal"),
disabled: "interactive.".concat(property, ".").concat(_color2, ".disabled")
}
};
}
};
};
var typography = {
fonts: {
size: {
xsmall: 50,
small: 50,
medium: 100,
large: 200
}
},
lineHeights: {
xsmall: 75,
small: 75,
medium: 100,
large: 200
}
};
var minHeight = {
xsmall: size[28],
small: size[32],
medium: size[36],
large: size[48]
};
var buttonPadding = {
xsmall: {
top: 0,
bottom: 0,
left: 3,
right: 3
},
small: {
top: 0,
bottom: 0,
left: 4,
right: 4
},
medium: {
top: 0,
bottom: 0,
left: 6,
right: 6
},
large: {
top: 0,
bottom: 0,
left: 6,
right: 6
}
};
var buttonIconOnlyHeightWidth = {
xsmall: makeSize(size['28']),
small: makeSize(size['32']),
medium: makeSize(size['36']),
large: makeSize(size['48'])
};
var buttonSizeToIconSizeMap = {
xsmall: 'small',
small: 'small',
medium: 'medium',
large: 'medium'
};
var buttonIconOnlySizeToIconSizeMap = {
xsmall: 'medium',
small: 'medium',
medium: 'medium',
large: 'medium'
};
var buttonSizeToSpinnerSizeMap = {
xsmall: 'medium',
small: 'large',
medium: 'large',
large: 'xlarge'
};
var buttonIconPadding = {
xsmall: 1,
small: 2,
medium: 3,
large: 3
};
export { backgroundColor, buttonIconOnlyHeightWidth, buttonIconOnlySizeToIconSizeMap, buttonIconPadding, buttonPadding, buttonSizeToIconSizeMap, buttonSizeToSpinnerSizeMap, minHeight, textColor, typography };
//# sourceMappingURL=buttonTokens.js.map