antd/es/menu/style/theme.js

An enterprise-class UI design language and React components implementation

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import { genFocusOutline } from '../../style';

var accessibilityFocus = function accessibilityFocus(token) {
  return _extends({}, genFocusOutline(token));
};

var getThemeStyle = function getThemeStyle(token, themeSuffix) {
  var _$concat3, _$concat4, _$concat$concat3, _$concat8, _$concat$concat4;

  var componentCls = token.componentCls,
      colorItemText = token.colorItemText,
      colorItemTextSelected = token.colorItemTextSelected,
      colorGroupTitle = token.colorGroupTitle,
      colorItemBg = token.colorItemBg,
      colorSubItemBg = token.colorSubItemBg,
      colorItemBgActive = token.colorItemBgActive,
      colorItemBgSelectedHorizontal = token.colorItemBgSelectedHorizontal,
      colorItemBgSelected = token.colorItemBgSelected,
      colorActiveBarHeight = token.colorActiveBarHeight,
      colorActiveBarWidth = token.colorActiveBarWidth,
      colorActiveBarBorderSize = token.colorActiveBarBorderSize,
      motionDurationSlow = token.motionDurationSlow,
      motionEaseInOut = token.motionEaseInOut,
      motionEaseOut = token.motionEaseOut,
      menuItemPaddingInline = token.menuItemPaddingInline,
      motionDurationFast = token.motionDurationFast,
      colorItemTextHover = token.colorItemTextHover,
      lineType = token.lineType,
      colorSplit = token.colorSplit,
      colorItemTextDisabled = token.colorItemTextDisabled,
      colorDangerItemText = token.colorDangerItemText,
      colorDangerItemTextHover = token.colorDangerItemTextHover,
      colorDangerItemTextSelected = token.colorDangerItemTextSelected,
      colorDangerItemBgActive = token.colorDangerItemBgActive,
      colorDangerItemBgSelected = token.colorDangerItemBgSelected;
  return _defineProperty({}, "".concat(componentCls, "-").concat(themeSuffix), (_$concat$concat4 = {
    color: colorItemText,
    background: colorItemBg
  }, _defineProperty(_$concat$concat4, "&".concat(componentCls, "-root:focus-visible"), _extends({}, accessibilityFocus(token))), _defineProperty(_$concat$concat4, "".concat(componentCls, "-item-group-title"), {
    color: colorGroupTitle
  }), _defineProperty(_$concat$concat4, "".concat(componentCls, "-submenu-selected"), _defineProperty({}, "> ".concat(componentCls, "-submenu-title"), {
    color: colorItemTextSelected
  })), _defineProperty(_$concat$concat4, "".concat(componentCls, "-item-disabled, ").concat(componentCls, "-submenu-disabled"), {
    color: "".concat(colorItemTextDisabled, " !important")
  }), _defineProperty(_$concat$concat4, "".concat(componentCls, "-item:hover, ").concat(componentCls, "-submenu-title:hover"), _defineProperty({}, "&:not(".concat(componentCls, "-item-selected):not(").concat(componentCls, "-submenu-selected)"), {
    color: colorItemTextHover
  })), _defineProperty(_$concat$concat4, "".concat(componentCls, "-item:active, ").concat(componentCls, "-submenu-title:active"), {
    background: colorItemBgActive
  }), _defineProperty(_$concat$concat4, "".concat(componentCls, "-item-danger"), (_$concat3 = {
    color: colorDangerItemText
  }, _defineProperty(_$concat3, "&".concat(componentCls, "-item:hover"), _defineProperty({}, "&:not(".concat(componentCls, "-item-selected):not(").concat(componentCls, "-submenu-selected)"), {
    color: colorDangerItemTextHover
  })), _defineProperty(_$concat3, "&".concat(componentCls, "-item:active"), {
    background: colorDangerItemBgActive
  }), _$concat3)), _defineProperty(_$concat$concat4, "".concat(componentCls, "-item a"), {
    '&, &:hover': {
      color: 'inherit'
    }
  }), _defineProperty(_$concat$concat4, "".concat(componentCls, "-item-selected"), (_$concat4 = {
    color: colorItemTextSelected
  }, _defineProperty(_$concat4, "&".concat(componentCls, "-item-danger"), {
    color: colorDangerItemTextSelected
  }), _defineProperty(_$concat4, "a, a:hover", {
    color: 'inherit'
  }), _$concat4)), _defineProperty(_$concat$concat4, "&:not(".concat(componentCls, "-horizontal) ").concat(componentCls, "-item-selected"), _defineProperty({
    backgroundColor: colorItemBgSelected
  }, "&".concat(componentCls, "-item-danger"), {
    backgroundColor: colorDangerItemBgSelected
  })), _defineProperty(_$concat$concat4, "".concat(componentCls, "-item, ").concat(componentCls, "-submenu-title"), _defineProperty({}, "&:not(".concat(componentCls, "-item-disabled):focus-visible"), _extends({}, accessibilityFocus(token)))), _defineProperty(_$concat$concat4, "&".concat(componentCls, "-submenu > ").concat(componentCls), {
    backgroundColor: colorItemBg
  }), _defineProperty(_$concat$concat4, "&".concat(componentCls, "-popup > ").concat(componentCls), {
    backgroundColor: colorItemBg
  }), _defineProperty(_$concat$concat4, "&".concat(componentCls, "-horizontal"), _defineProperty({}, "> ".concat(componentCls, "-item, > ").concat(componentCls, "-submenu"), (_$concat$concat3 = {
    top: colorActiveBarBorderSize,
    marginTop: -colorActiveBarBorderSize,
    marginBottom: 0,
    borderRadius: token.radiusItem,
    '&::after': {
      position: 'absolute',
      insetInline: menuItemPaddingInline,
      bottom: 0,
      borderBottom: "".concat(colorActiveBarHeight, "px solid transparent"),
      transition: "border-color ".concat(motionDurationSlow, " ").concat(motionEaseInOut),
      content: '""'
    }
  }, _defineProperty(_$concat$concat3, "&:hover, &-active, &-open", {
    color: colorItemTextSelected,
    '&::after': {
      borderWidth: "".concat(colorActiveBarHeight, "px"),
      borderBottomColor: colorItemTextSelected
    }
  }), _defineProperty(_$concat$concat3, "&-selected", {
    color: colorItemTextSelected,
    backgroundColor: colorItemBgSelectedHorizontal,
    '&::after': {
      borderWidth: "".concat(colorActiveBarHeight, "px"),
      borderBottomColor: colorItemTextSelected
    }
  }), _$concat$concat3))), _defineProperty(_$concat$concat4, "&".concat(componentCls, "-root"), _defineProperty({}, "&".concat(componentCls, "-inline, &").concat(componentCls, "-vertical"), {
    borderInlineEnd: "".concat(colorActiveBarBorderSize, "px ").concat(lineType, " ").concat(colorSplit)
  })), _defineProperty(_$concat$concat4, "&".concat(componentCls, "-inline"), (_$concat8 = {}, _defineProperty(_$concat8, "".concat(componentCls, "-sub").concat(componentCls, "-inline"), {
    background: colorSubItemBg
  }), _defineProperty(_$concat8, "".concat(componentCls, "-item, ").concat(componentCls, "-submenu-title"), colorActiveBarBorderSize ? {
    width: "calc(100% + ".concat(colorActiveBarBorderSize, "px)")
  } : {}), _defineProperty(_$concat8, "".concat(componentCls, "-item"), _defineProperty({
    position: 'relative',
    '&::after': {
      position: 'absolute',
      insetBlock: 0,
      insetInlineEnd: 0,
      borderInlineEnd: "".concat(colorActiveBarWidth, "px solid ").concat(colorItemTextSelected),
      transform: 'scaleY(0.0001)',
      opacity: 0,
      transition: ["transform ".concat(motionDurationFast, " ").concat(motionEaseOut), "opacity ".concat(motionDurationFast, " ").concat(motionEaseOut)].join(','),
      content: '""'
    }
  }, "&".concat(componentCls, "-item-danger"), {
    '&::after': {
      borderInlineEndColor: colorDangerItemTextSelected
    }
  })), _defineProperty(_$concat8, "".concat(componentCls, "-selected, ").concat(componentCls, "-item-selected"), {
    '&::after': {
      transform: 'scaleY(1)',
      opacity: 1,
      transition: ["transform ".concat(motionDurationFast, " ").concat(motionEaseInOut), "opacity ".concat(motionDurationFast, " ").concat(motionEaseInOut)].join(',')
    }
  }), _$concat8)), _$concat$concat4));
};

export default getThemeStyle;