@helpscout/hsds-react/components/Badge/Badge.css.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _constants = require("../../styles/configs/constants");

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _color = require("../../styles/utilities/color");

var _forEach = _interopRequireDefault(require("../../styles/utilities/forEach"));

var _variableFontSize = _interopRequireDefault(require("../../styles/utilities/variableFontSize"));

var DEFAULT_COLOR = (0, _color.getColor)('charcoal.200');

var BadgeUI = _styledComponents.default.div.withConfig({
  displayName: "Badgecss__BadgeUI",
  componentId: "sc-1blt889-0"
})(["", " background-color:", ";border-radius:9999px;box-sizing:border-box;border:", ";color:", ";display:inline-block;font-weight:500;min-width:18px;line-height:1;padding:3px 8px;text-align:center;", " &.is-sm{", " padding:2px 8px;}&.is-count{font-weight:400;min-width:20px;padding:4px;}&.is-square{border-radius:3px;font-weight:400;padding:4px 3px;font-size:11px;line-height:10px;color:", ";background-color:", ";box-shadow:0 0 0 1px ", " inset;}&.is-white{background-color:white;box-shadow:0 0 0 1px ", " inset;color:", ";}&.is-display-block{display:block;}&.is-display-inlineBlock{display:inline-block;}"], (0, _variableFontSize.default)({
  fontSize: 12
}), function (props) {
  return props.inverted ? 'white' : props.color || DEFAULT_COLOR;
}, function (props) {
  return props.inverted ? "1px solid " + props.color : 'none';
}, function (props) {
  return props.inverted ? props.textColor || props.color : props.textColor || 'white';
}, function (props) {
  return makeStatusStyles(props);
}, (0, _variableFontSize.default)({
  fontSize: 11
}), (0, _color.getColor)('charcoal.300'), (0, _color.getColor)('grey.300'), (0, _color.getColor)('grey.500'), (0, _color.getColor)('border.ui'), (0, _color.getColor)('charcoal.200'));

function makeStatusStyles(props) {
  return (0, _forEach.default)(_constants.STATUSES, function (status) {
    var statusColor = (0, _color.getColor)('state', status, 'borderColor');
    return "\n    &.is-" + status + " {\n      background-color: " + (props.inverted ? 'white' : statusColor) + ";\n      border: " + (props.inverted ? "1px solid " + statusColor : 'none') + ";\n      color: " + (props.inverted ? statusColor : 'white') + ";\n    }\n  ";
  });
}

var _default = BadgeUI;
exports.default = _default;