antd/es/tag/style/index.js

An enterprise-class UI design language and React components implementation

import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme';
import capitalize from '../../_util/capitalize';
import { resetComponent } from '../../style';

var genTagStatusStyle = function genTagStatusStyle(token, status, cssVariableType) {
  var capitalizedCssVariableType = capitalize(cssVariableType);
  return _defineProperty({}, "".concat(token.componentCls, "-").concat(status), {
    color: token["color".concat(cssVariableType)],
    background: token["color".concat(capitalizedCssVariableType, "Bg")],
    borderColor: token["color".concat(capitalizedCssVariableType, "Border")]
  });
}; // FIXME: special preset colors


var genTagColorStyle = function genTagColorStyle(token) {
  return PresetColors.reduce(function (prev, colorKey) {
    var _extends2;

    var lightColor = token["".concat(colorKey, "-1")];
    var lightBorderColor = token["".concat(colorKey, "-3")];
    var darkColor = token["".concat(colorKey, "-6")];
    var textColor = token["".concat(colorKey, "-7")];
    return _extends(_extends({}, prev), (_extends2 = {}, _defineProperty(_extends2, "".concat(token.componentCls, "-").concat(colorKey), {
      color: textColor,
      background: lightColor,
      borderColor: lightBorderColor
    }), _defineProperty(_extends2, "".concat(token.componentCls, "-").concat(colorKey, "-inverse"), {
      color: token.colorTextLightSolid,
      background: darkColor,
      borderColor: darkColor
    }), _extends2));
  }, {});
};

var genBaseStyle = function genBaseStyle(token) {
  var _extends3;

  var paddingXS = token.paddingXS,
      paddingXXS = token.paddingXXS,
      controlLineWidth = token.controlLineWidth;
  var paddingInline = paddingXS - controlLineWidth;
  var iconMarginInline = paddingXXS - controlLineWidth;
  return _defineProperty({}, token.componentCls, _extends(_extends({}, resetComponent(token)), (_extends3 = {
    display: 'inline-block',
    height: 'auto',
    marginInlineEnd: token.marginXS,
    paddingInline: paddingInline,
    fontSize: token.tagFontSize,
    lineHeight: "".concat(token.tagLineHeight, "px"),
    whiteSpace: 'nowrap',
    background: token.tagDefaultBg,
    border: "".concat(token.controlLineWidth, "px ").concat(token.controlLineType, " ").concat(token.colorBorder),
    borderRadius: token.radiusSM,
    opacity: 1,
    transition: "all ".concat(token.motionDurationFast),
    textAlign: 'start',
    // RTL
    '&&-rtl': {
      direction: 'rtl'
    },
    '&, a, a:hover': {
      color: token.tagDefaultColor
    }
  }, _defineProperty(_extends3, "".concat(token.componentCls, "-close-icon"), {
    marginInlineStart: iconMarginInline,
    color: token.colorTextDescription,
    fontSize: token.tagIconSize,
    cursor: 'pointer',
    transition: "all ".concat(token.motionDurationFast),
    '&:hover': {
      color: token.colorTextHeading
    }
  }), _defineProperty(_extends3, "&&-has-color", _defineProperty({
    borderColor: 'transparent'
  }, "&, a, a:hover, ".concat(token.iconCls, "-close, ").concat(token.iconCls, "-close:hover"), {
    color: token.colorTextLightSolid
  })), _defineProperty(_extends3, "&-checkable", {
    backgroundColor: 'transparent',
    borderColor: 'transparent',
    cursor: 'pointer',
    '&:not(&-checked):hover': {
      color: token.colorPrimary,
      backgroundColor: token.colorFillSecondary
    },
    '&:active, &-checked': {
      color: token.colorTextLightSolid
    },
    '&-checked': {
      backgroundColor: token.colorPrimary,
      '&:hover': {
        backgroundColor: token.colorPrimaryHover
      }
    },
    '&:active': {
      backgroundColor: token.colorPrimaryActive
    }
  }), _defineProperty(_extends3, "&-hidden", {
    display: 'none'
  }), _defineProperty(_extends3, "> ".concat(token.iconCls, " + span, > span + ").concat(token.iconCls), {
    marginInlineStart: paddingInline
  }), _extends3)));
}; // ============================== Export ==============================


export default genComponentStyleHook('Tag', function (token) {
  var fontSize = token.fontSize,
      lineHeight = token.lineHeight,
      controlLineWidth = token.controlLineWidth,
      fontSizeIcon = token.fontSizeIcon;
  var tagHeight = Math.round(fontSize * lineHeight);
  var tagFontSize = token.fontSizeSM;
  var tagLineHeight = tagHeight - controlLineWidth * 2;
  var tagDefaultBg = token.colorFillAlter;
  var tagDefaultColor = token.colorText;
  var tagToken = mergeToken(token, {
    tagFontSize: tagFontSize,
    tagLineHeight: tagLineHeight,
    tagDefaultBg: tagDefaultBg,
    tagDefaultColor: tagDefaultColor,
    tagIconSize: fontSizeIcon - 2 * controlLineWidth // Tag icon is much more smaller

  });
  return [genBaseStyle(tagToken), genTagColorStyle(tagToken), genTagStatusStyle(tagToken, 'success', 'Success'), genTagStatusStyle(tagToken, 'processing', 'Info'), genTagStatusStyle(tagToken, 'error', 'Error'), genTagStatusStyle(tagToken, 'warning', 'Warning')];
});