@naturacosmeticos/natds-react
Version:
A collection of components from Natura Design System for React
60 lines • 2.05 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
/* eslint-disable max-len */
var react_jss_1 = require("react-jss");
var ThemeProvider_1 = require("../../ThemeProvider");
var toggleColorEmphasis = function (theme) { return function (_a) {
var isActive = _a.isActive, isDisabled = _a.isDisabled;
if (isActive) {
return theme.color.highEmphasis;
}
if (isDisabled) {
return theme.color.lowEmphasis;
}
return theme.color.mediumEmphasis;
}; };
var themeSelectTab = function (theme) { return function (_a) {
var brand = _a.brand;
var themeSelecTb = (0, ThemeProvider_1.buildTheme)(brand, 'light');
if (brand) {
return "2px solid ".concat(themeSelecTb.color.primary);
}
return "2px solid ".concat(theme.color.primary);
}; };
var styles = (0, react_jss_1.createUseStyles)(function (theme) { return ({
wrapper: {
minWidth: theme.size.largeX,
height: '100%',
padding: "0 ".concat(theme.spacing.small, "px"),
borderBottom: function (_a) {
var isActive = _a.isActive, brand = _a.brand;
return isActive && themeSelectTab(theme)({ brand: brand });
},
pointerEvents: 'none',
'& > div': {
height: '100%'
},
'&:hover': {
background: "".concat(theme.color.highlight, "29")
}
},
tabButton: {
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: theme.spacing.tiny,
border: 'none',
textTransform: 'uppercase',
background: 'none',
cursor: function (props) { return (props.isDisabled ? 'not-allowed' : 'pointer'); },
pointerEvents: function (props) { return (props.isDisabled ? 'none' : 'auto'); },
color: toggleColorEmphasis(theme),
'& i': {
color: toggleColorEmphasis(theme)
}
}
}); });
exports.default = styles;
//# sourceMappingURL=TabItem.styles.js.map