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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.IconUI = exports.config = void 0;

var _classNames = require("../../utilities/classNames");

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

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

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

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

var bem = (0, _classNames.BEM)('.c-Icon');
var ICON_SIZES = [8, 10, 12, 13, 14, 15, 16, 18, 20, 24, 32, 48, 52, 72];
var config = {
  caretSize: 13,
  marginOffset: 4,
  offsetRight: '6px',
  offsetTop: '1px',
  size: 20
};
exports.config = config;

var IconUI = _styledComponents.default.span.withConfig({
  displayName: "Iconcss__IconUI",
  componentId: "vne9x2-0"
})(["color:currentColor;display:block;height:", "px;position:relative;width:", "px;&.is-center{margin-left:auto;margin-right:auto;}&.is-clickable{cursor:pointer;}&.is-inline{display:inline-block;}&.is-noInteract{pointer-events:none;}&.is-offsetLeft{margin-right:", "px;}&.is-offsetRight{margin-left:", "px;}", ";", ";", ";&.withCaret{", "{width:calc(100% - (", "px - ", "));}}", "{color:currentColor;display:block;height:100%;pointer-events:none;svg{display:block;height:100%;max-width:100%;width:100%;}circle[fill],path,rect[fill]{fill:currentColor;}path[stroke]{fill:none;}circle[stroke],path[stroke],rect[stroke]{stroke:currentColor;}&.is-caret{height:", "px;position:absolute;right:0;top:calc( 50% - ", "px + ", " );width:", "px;}}"], config.size, config.size, config.marginOffset, config.marginOffset, makeShadeStyles(), makeSizeStyles(), makeStateColorStyles(), bem.element('icon'), config.caretSize, config.offsetRight, bem.element('icon'), config.caretSize, Math.round(config.caretSize / 2), config.offsetTop, config.caretSize);

exports.IconUI = IconUI;

function makeShadeStyles() {
  return (0, _forEach.default)(_constants.TEXT_SHADES, function (shade) {
    return "\n    &.is-" + shade + " {\n      color: " + (0, _color.getColor)('text', shade) + ";\n    }\n  ";
  });
}

function makeSizeStyles() {
  return (0, _forEach.default)(ICON_SIZES, function (size) {
    return "\n    &.is-" + size + " {\n      height: " + size + "px;\n      width: " + size + "px;\n\n      &.withCaret {\n        width: " + (size + config.caretSize) + "px;\n      }\n    }\n  ";
  });
}

function makeStateColorStyles() {
  return (0, _forEach.default)(_constants.STATES, function (state) {
    return "\n    &.is-" + state + " {\n      color: " + (0, _color.getColor)('state', state, 'default') + ";\n    }\n  ";
  });
}