@fluentui/react-northstar
Version:
A themable React component library.
110 lines (108 loc) • 2.9 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.statusStyles = exports.getSizeStyles = void 0;
var _utils = require("../../../../utils");
var getBackgroundColor = function getBackgroundColor(state, variables) {
switch (state) {
case 'success':
return variables.successBackgroundColor;
case 'info':
return variables.infoBackgroundColor;
case 'warning':
return variables.warningBackgroundColor;
case 'error':
return variables.errorBackgroundColor;
case 'unknown':
default:
return variables.defaultBackgroundColor;
}
};
var getTextColor = function getTextColor(state, variables) {
switch (state) {
case 'success':
return variables.successTextColor;
case 'info':
return variables.infoTextColor;
case 'warning':
return variables.warningTextColor;
case 'error':
return variables.errorTextColor;
case 'unknown':
default:
return variables.defaultTextColor;
}
};
var sizeToPxValue = {
smallest: 6,
smaller: 10,
small: 10,
medium: 10,
large: 10,
larger: 16,
largest: 0
};
var iconSizeToPxValue = {
smallest: 4,
smaller: 6,
small: 6,
medium: 6,
large: 6,
larger: 10,
largest: 0
};
var getSizeStyles = function getSizeStyles(sizeInPx, variables) {
var borderWidth = variables.borderColor && variables.borderWidth || 0;
var sizeInRem = (0, _utils.pxToRem)(sizeInPx + 2 * borderWidth);
return {
height: sizeInRem,
width: sizeInRem
};
};
exports.getSizeStyles = getSizeStyles;
var statusStyles = {
root: function root(_ref) {
var _ref$props = _ref.props,
color = _ref$props.color,
size = _ref$props.size,
state = _ref$props.state,
variables = _ref.variables;
return Object.assign({
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center'
}, getSizeStyles(sizeToPxValue[size], variables), {
verticalAlign: 'middle',
borderRadius: '9999px'
}, variables.borderColor && {
borderColor: variables.borderColor,
borderWidth: (0, _utils.pxToRem)(variables.borderWidth),
borderStyle: 'solid'
}, {
backgroundColor: color || getBackgroundColor(state, variables)
});
},
icon: function icon(_ref2) {
var _ref2$props = _ref2.props,
size = _ref2$props.size,
state = _ref2$props.state,
v = _ref2.variables;
return {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
width: (0, _utils.pxToRem)(iconSizeToPxValue[size]),
height: (0, _utils.pxToRem)(iconSizeToPxValue[size]),
color: getTextColor(state, v),
'& > :first-child': {
height: '100%',
width: '100%',
'& svg': {
height: '100%',
width: '100%'
}
}
};
}
};
exports.statusStyles = statusStyles;
//# sourceMappingURL=statusStyles.js.map