@razorpay/blade
Version:
The Design System that powers Razorpay
97 lines (91 loc) • 2.68 kB
JavaScript
import '../../../tokens/global/index.js';
import { size } from '../../../tokens/global/size.js';
import { spacing } from '../../../tokens/global/spacing.js';
var BASEINPUT_MAX_ROWS = 4;
var TAG_HEIGHT = size['20'];
var TAG_GAP = spacing['3'];
/**
* 36px
*/
var baseInputHeight = {
medium: size['36'],
large: size['48']
};
/**
* medium - 144px (36px height * 4 rows)
* large - 192px (48px height * 4 rows)
*/
// we don't want exact number but rough number to be able to animate correctly in height.
var baseInputWrapperMaxHeight = {
medium: baseInputHeight.medium * BASEINPUT_MAX_ROWS,
large: baseInputHeight.large * BASEINPUT_MAX_ROWS
};
var baseInputBorderColor = {
"default": 'interactive.border.gray.default',
hovered: 'interactive.border.gray.highlighted',
focused: 'interactive.border.primary.default',
disabled: 'interactive.border.gray.disabled',
error: 'interactive.border.negative.default',
success: 'interactive.border.positive.default'
};
var baseInputBackgroundColor = {
"default": 'surface.background.gray.intense',
hovered: 'surface.background.gray.moderate',
focused: 'surface.background.gray.moderate',
disabled: 'surface.background.gray.intense',
error: 'surface.background.gray.intense',
success: 'surface.background.gray.intense'
};
var baseInputBorderlessBackgroundColor = {
"default": 'transparent',
hovered: 'surface.background.gray.moderate',
focused: 'surface.background.gray.moderate',
disabled: 'surface.background.gray.intense',
error: 'feedback.background.negative.subtle',
success: 'feedback.background.positive.subtle'
};
var baseInputBorderWidth = {
"default": 'thin',
hovered: 'thin',
disabled: 'thin',
focused: 'thick',
error: 'thick',
success: 'thick'
};
var baseInputBorderBackgroundMotion = {
enter: {
duration: 'xgentle',
easing: 'emphasized'
},
exit: {
duration: 'gentle',
easing: 'standard'
}
};
var baseInputPaddingTokens = {
top: {
medium: 3,
large: 4
},
bottom: {
medium: 3,
large: 4
},
left: {
medium: 4,
large: 4
},
right: {
medium: 4,
large: 4
}
};
/* the magic number 192 is basically max-width of label
i.e 176 and then right margin
i.e 16 which is the spacing between label and input field */
var formHintLeftLabelMarginLeft = {
medium: 136,
large: 192
};
export { BASEINPUT_MAX_ROWS, TAG_GAP, TAG_HEIGHT, baseInputBackgroundColor, baseInputBorderBackgroundMotion, baseInputBorderColor, baseInputBorderWidth, baseInputBorderlessBackgroundColor, baseInputHeight, baseInputPaddingTokens, baseInputWrapperMaxHeight, formHintLeftLabelMarginLeft };
//# sourceMappingURL=baseInputTokens.js.map