@razorpay/blade
Version:
The Design System that powers Razorpay
301 lines (298 loc) • 6.83 kB
JavaScript
var paddingTop = {
bordered: {
horizontal: {
small: 'spacing.0',
medium: 'spacing.2',
large: 'spacing.4'
},
vertical: {
small: 'spacing.1',
medium: 'spacing.2',
large: 'spacing.3'
}
},
filled: {
horizontal: {
small: 'spacing.1',
medium: 'spacing.2',
large: 'spacing.3'
},
vertical: {
small: 'spacing.3',
medium: 'spacing.4',
large: 'spacing.4'
}
}
};
var paddingBottom = {
bordered: {
horizontal: {
small: 'spacing.3',
medium: 'spacing.4',
large: 'spacing.4'
},
vertical: {
small: 'spacing.1',
medium: 'spacing.2',
large: 'spacing.3'
}
},
filled: {
horizontal: {
small: 'spacing.1',
medium: 'spacing.2',
large: 'spacing.3'
},
vertical: {
small: 'spacing.3',
medium: 'spacing.4',
large: 'spacing.4'
}
}
};
var paddingX = {
bordered: {
horizontal: {
small: 'spacing.0',
medium: 'spacing.0',
large: 'spacing.0'
},
vertical: {
small: 'spacing.4',
medium: 'spacing.4',
large: 'spacing.4'
}
},
filled: {
horizontal: {
small: 'spacing.3',
medium: 'spacing.3',
large: 'spacing.3'
},
vertical: {
small: 'spacing.4',
medium: 'spacing.4',
large: 'spacing.4'
}
}
};
var trackColor = 'surface.border.gray.muted';
var textColor = {
selected: {
"default": 'interactive.text.gray.normal',
highlighted: 'interactive.text.gray.normal',
disabled: 'interactive.text.gray.disabled'
},
unselected: {
"default": 'interactive.text.gray.muted',
highlighted: 'interactive.text.gray.subtle',
disabled: 'interactive.text.gray.disabled'
}
};
var backgroundColor = {
selected: {
bordered: {
horizontal: {
"default": 'colors.transparent',
highlighted: 'colors.transparent',
disabled: 'colors.transparent'
},
vertical: {
"default": 'colors.transparent',
highlighted: 'colors.transparent',
disabled: 'colors.transparent'
}
},
filled: {
// Horizontal filled selected tabs use 'transparent' because
// the TabIndicator (white pill) handles the selected background
horizontal: {
"default": 'colors.transparent',
highlighted: 'colors.transparent',
disabled: 'colors.transparent'
},
vertical: {
"default": 'colors.surface.background.gray.intense',
highlighted: 'colors.surface.background.gray.intense',
disabled: 'colors.transparent'
}
}
},
unselected: {
bordered: {
horizontal: {
"default": 'colors.transparent',
highlighted: 'colors.transparent',
disabled: 'colors.transparent'
},
vertical: {
"default": 'colors.transparent',
highlighted: 'colors.transparent',
disabled: 'colors.transparent'
}
},
filled: {
horizontal: {
"default": 'colors.transparent',
highlighted: 'colors.interactive.background.gray.default',
disabled: 'colors.transparent'
},
vertical: {
"default": 'colors.transparent',
highlighted: 'colors.interactive.background.gray.default',
disabled: 'colors.transparent'
}
}
}
};
var iconColor = {
unselected: {
"default": 'interactive.icon.gray.muted',
highlighted: 'interactive.icon.gray.subtle',
disabled: 'interactive.icon.gray.disabled'
},
selected: {
"default": 'interactive.icon.gray.normal',
highlighted: 'interactive.icon.gray.normal',
disabled: 'interactive.icon.gray.disabled'
}
};
var textSizeMap = {
small: 'medium',
medium: 'medium',
large: 'large'
};
var borderWidth = {
bordered: {
horizontal: 'thicker',
vertical: 'thick'
},
filled: {
horizontal: 'none',
vertical: 'none'
}
};
var borderRadius = {
bordered: {
horizontal: {
small: 'none',
medium: 'none',
large: 'none'
},
vertical: {
small: 'none',
medium: 'none',
large: 'none'
}
},
filled: {
horizontal: {
small: 'medium',
medium: 'small',
large: 'small'
},
vertical: {
small: 'small',
medium: 'small',
large: 'small'
}
}
};
var focusBorderRadius = {
bordered: {
horizontal: {
small: 'medium',
medium: 'medium',
large: 'medium'
},
vertical: {
small: 'medium',
medium: 'medium',
large: 'medium'
}
},
filled: {
horizontal: {
small: 'medium',
medium: 'small',
large: 'small'
},
vertical: {
small: 'small',
medium: 'small',
large: 'small'
}
}
};
var borderColor = {
selected: {
bordered: {
horizontal: {
"default": 'colors.transparent',
highlighted: 'colors.transparent',
disabled: 'colors.transparent'
},
vertical: {
"default": 'colors.transparent',
highlighted: 'colors.transparent',
disabled: 'colors.transparent'
}
},
filled: {
horizontal: {
"default": 'colors.transparent',
highlighted: 'colors.transparent',
disabled: 'colors.transparent'
},
vertical: {
"default": 'colors.transparent',
highlighted: 'colors.transparent',
disabled: 'colors.transparent'
}
}
},
unselected: {
bordered: {
horizontal: {
"default": 'colors.transparent',
highlighted: 'colors.interactive.border.gray.highlighted',
disabled: 'colors.transparent'
},
vertical: {
"default": 'colors.transparent',
highlighted: 'colors.interactive.border.gray.highlighted',
disabled: 'colors.transparent'
}
},
filled: {
horizontal: {
"default": 'colors.transparent',
highlighted: 'colors.transparent',
disabled: 'colors.transparent'
},
vertical: {
"default": 'colors.transparent',
highlighted: 'colors.transparent',
disabled: 'colors.transparent'
}
}
}
};
/**
* In horizontal filled tabs, the TabIndicator (white pill) is rendered
* as an absolutely positioned sibling element AFTER the tab items in the DOM.
* The tab button needs `position: relative` + `zIndex: 1` so its content
* renders above the indicator.
*/
var needsStackingContext = {
bordered: {
horizontal: false,
vertical: false
},
filled: {
horizontal: true,
vertical: false
}
};
export { backgroundColor, borderColor, borderRadius, borderWidth, focusBorderRadius, iconColor, needsStackingContext, paddingBottom, paddingTop, paddingX, textColor, textSizeMap, trackColor };
//# sourceMappingURL=tabTokens.js.map