@razorpay/blade
Version:
The Design System that powers Razorpay
174 lines (165 loc) • 4.1 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 = {
xsmall: size['26'],
small: size['30'],
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 = {
xsmall: baseInputHeight.xsmall * BASEINPUT_MAX_ROWS,
small: baseInputHeight.small * BASEINPUT_MAX_ROWS,
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.intense',
focused: 'surface.background.gray.intense',
disabled: 'surface.background.gray.moderate',
error: 'surface.background.gray.intense',
success: 'surface.background.gray.intense'
};
var baseInputBorderlessBackgroundColor = {
"default": 'transparent',
hovered: 'surface.background.gray.intense',
focused: 'surface.background.gray.intense',
disabled: 'surface.background.gray.moderate',
error: 'feedback.background.negative.subtle',
success: 'feedback.background.positive.subtle'
};
/**
* Border radius tokens for input sizes
* - xsmall, small: 8px (small)
* - medium: 8px (small)
* - large: 12px (medium)
*/
var baseInputBorderRadius = {
xsmall: 'small',
small: 'small',
medium: 'small',
large: 'medium'
};
/**
* Border radius for input dropdown buttons (in px)
* - xsmall, small: 6px
* - medium: 6px
* - large: 8px
*/
var inputDropdownButtonBorderRadius = {
xsmall: size['6'],
small: size['6'],
medium: size['6'],
large: size['8']
};
/**
* Padding for input dropdown button wrapper
* Uses spacing tokens (1 = 2px, 2 = 4px)
*/
var inputDropdownButtonPadding = {
xsmall: 1,
small: 1,
medium: 2,
large: 2
};
var baseInputBorderWidth = {
"default": 'thin',
hovered: 'thin',
disabled: 'thin',
focused: 'thick',
error: 'thick',
success: 'thick'
};
var baseInputBorderBackgroundMotion = {
enter: {
duration: 'xgentle',
easing: 'emphasized'
},
exit: {
duration: 'xgentle',
easing: 'emphasized'
}
};
var baseInputPaddingTokens = {
top: {
xsmall: 2,
small: 2,
medium: 3,
large: 4
},
bottom: {
xsmall: 2,
small: 2,
medium: 3,
large: 4
},
left: {
xsmall: 3,
small: 3,
medium: 4,
large: 4
},
right: {
xsmall: 3,
small: 3,
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 = {
xsmall: 136,
small: 136,
medium: 136,
large: 192
};
var baseInputCounterInputPaddingTokens = {
top: {
xsmall: 2,
small: 2,
medium: 2,
large: 2
},
bottom: {
xsmall: 2,
small: 2,
medium: 2,
large: 2
},
left: {
xsmall: 2,
small: 2,
medium: 2,
large: 2
},
right: {
xsmall: 2,
small: 2,
medium: 2,
large: 2
}
};
export { BASEINPUT_MAX_ROWS, TAG_GAP, TAG_HEIGHT, baseInputBackgroundColor, baseInputBorderBackgroundMotion, baseInputBorderColor, baseInputBorderRadius, baseInputBorderWidth, baseInputBorderlessBackgroundColor, baseInputCounterInputPaddingTokens, baseInputHeight, baseInputPaddingTokens, baseInputWrapperMaxHeight, formHintLeftLabelMarginLeft, inputDropdownButtonBorderRadius, inputDropdownButtonPadding };
//# sourceMappingURL=baseInputTokens.js.map