|
|
|
import { TinyColor } from '@ctrl/tinycolor';
|
|
|
|
import { genCollapseMotion, initSlideMotion, initZoomMotion } from '../../style/motion';
|
|
|
|
import type { FullToken, GenerateStyle, UseComponentStyleResult } from '../../theme';
|
|
|
|
import { genComponentStyleHook, mergeToken } from '../../theme';
|
|
|
|
import getHorizontalStyle from './horizontal';
|
|
|
|
import getRTLStyle from './rtl';
|
|
|
|
import getThemeStyle from './theme';
|
|
|
|
import getVerticalStyle from './vertical';
|
|
|
|
import { clearFix, resetComponent, resetIcon } from '../../style';
|
|
|
|
|
|
|
|
/** Component only token. Which will handle additional calculation of alias token */
|
|
|
|
export interface ComponentToken {
|
|
|
|
dropdownWidth: number;
|
|
|
|
zIndexPopup: number;
|
|
|
|
|
|
|
|
// Group
|
|
|
|
colorGroupTitle: string;
|
|
|
|
|
|
|
|
// radius
|
|
|
|
radiusItem: number;
|
|
|
|
radiusSubMenuItem: number;
|
|
|
|
|
|
|
|
// Item Text
|
|
|
|
// > Default
|
|
|
|
colorItemText: string;
|
|
|
|
colorItemTextHover: string;
|
|
|
|
colorItemTextHoverHorizontal: string;
|
|
|
|
colorItemTextSelected: string;
|
|
|
|
colorItemTextSelectedHorizontal: string;
|
|
|
|
|
|
|
|
// > Disabled
|
|
|
|
colorItemTextDisabled: string;
|
|
|
|
|
|
|
|
// > Danger
|
|
|
|
colorDangerItemText: string;
|
|
|
|
colorDangerItemTextHover: string;
|
|
|
|
colorDangerItemTextSelected: string;
|
|
|
|
colorDangerItemBgActive: string;
|
|
|
|
colorDangerItemBgSelected: string;
|
|
|
|
|
|
|
|
// Item Bg
|
|
|
|
colorItemBg: string;
|
|
|
|
colorItemBgHover: string;
|
|
|
|
colorSubItemBg: string;
|
|
|
|
|
|
|
|
// > Default
|
|
|
|
colorItemBgActive: string;
|
|
|
|
colorItemBgSelected: string;
|
|
|
|
colorItemBgSelectedHorizontal: string;
|
|
|
|
|
|
|
|
// Ink Bar
|
|
|
|
colorActiveBarWidth: number;
|
|
|
|
colorActiveBarHeight: number;
|
|
|
|
colorActiveBarBorderSize: number;
|
|
|
|
|
|
|
|
itemMarginInline: number;
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface MenuToken extends FullToken<'Menu'> {
|
|
|
|
menuItemHeight: number;
|
|
|
|
menuHorizontalHeight: number;
|
|
|
|
menuItemPaddingInline: number;
|
|
|
|
menuItemMarginInline: number;
|
|
|
|
menuArrowSize: number;
|
|
|
|
menuArrowOffset: string;
|
|
|
|
menuPanelMaskInset: number;
|
|
|
|
}
|
|
|
|
|
|
|
|
// =============================== Base ===============================
|
|
|
|
const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
|
|
|
|
const {
|
|
|
|
antCls,
|
|
|
|
componentCls,
|
|
|
|
fontSize,
|
|
|
|
motionDurationSlow,
|
|
|