|
|
|
@ -15,46 +15,109 @@ export interface ComponentToken { |
|
|
|
zIndexPopup: number; |
|
|
|
|
|
|
|
// Group
|
|
|
|
/** @deprecated Use `groupTitleColor` instead */ |
|
|
|
colorGroupTitle: string; |
|
|
|
groupTitleColor: string; |
|
|
|
|
|
|
|
// radius
|
|
|
|
/** @deprecated Use `itemBorderRadius` instead */ |
|
|
|
radiusItem: number; |
|
|
|
itemBorderRadius: number; |
|
|
|
|
|
|
|
/** @deprecated Use `subMenuItemBorderRadius` instead */ |
|
|
|
radiusSubMenuItem: number; |
|
|
|
subMenuItemBorderRadius: number; |
|
|
|
|
|
|
|
// Item Text
|
|
|
|
// > Default
|
|
|
|
/** @deprecated Use `itemColor` instead */ |
|
|
|
colorItemText: string; |
|
|
|
itemColor: string; |
|
|
|
|
|
|
|
/** @deprecated Use `itemHoverColor` instead */ |
|
|
|
colorItemTextHover: string; |
|
|
|
itemHoverColor: string; |
|
|
|
|
|
|
|
/** @deprecated Use `horizontalItemHoverColor` instead */ |
|
|
|
colorItemTextHoverHorizontal: string; |
|
|
|
horizontalItemHoverColor: string; |
|
|
|
|
|
|
|
/** @deprecated Use `itemSelectedColor` instead */ |
|
|
|
colorItemTextSelected: string; |
|
|
|
itemSelectedColor: string; |
|
|
|
|
|
|
|
/** @deprecated Use `horizontalItemSelectedColor` instead */ |
|
|
|
colorItemTextSelectedHorizontal: string; |
|
|
|
horizontalItemSelectedColor: string; |
|
|
|
|
|
|
|
// > Disabled
|
|
|
|
/** @deprecated Use `itemDisabledColor` instead */ |
|
|
|
colorItemTextDisabled: string; |
|
|
|
itemDisabledColor: string; |
|
|
|
|
|
|
|
// > Danger
|
|
|
|
/** @deprecated Use `dangerItemColor` instead */ |
|
|
|
colorDangerItemText: string; |
|
|
|
dangerItemColor: string; |
|
|
|
|
|
|
|
/** @deprecated Use `dangerItemHoverColor` instead */ |
|
|
|
colorDangerItemTextHover: string; |
|
|
|
dangerItemHoverColor: string; |
|
|
|
|
|
|
|
/** @deprecated Use `dangerItemSelectedColor` instead */ |
|
|
|
colorDangerItemTextSelected: string; |
|
|
|
dangerItemSelectedColor: string; |
|
|
|
|
|
|
|
/** @deprecated Use `dangerItemActiveBg` instead */ |
|
|
|
colorDangerItemBgActive: string; |
|
|
|
dangerItemActiveBg: string; |
|
|
|
|
|
|
|
/** @deprecated Use `dangerItemSelectedBg` instead */ |
|
|
|
colorDangerItemBgSelected: string; |
|
|
|
dangerItemSelectedBg: string; |
|
|
|
|
|
|
|
// Item Bg
|
|
|
|
/** @deprecated Use `itemBg` instead */ |
|
|
|
colorItemBg: string; |
|
|
|
itemBg: string; |
|
|
|
|
|
|
|
/** @deprecated Use `itemHoverBg` instead */ |
|
|
|
colorItemBgHover: string; |
|
|
|
itemHoverBg: string; |
|
|
|
|
|
|
|
/** @deprecated Use `subMenuItemBg` instead */ |
|
|
|
colorSubItemBg: string; |
|
|
|
subMenuItemBg: string; |
|
|
|
|
|
|
|
// > Default
|
|
|
|
/** @deprecated Use `itemActiveBg` instead */ |
|
|
|
colorItemBgActive: string; |
|
|
|
itemActiveBg: string; |
|
|
|
|
|
|
|
/** @deprecated Use `itemSelectedBg` instead */ |
|
|
|
colorItemBgSelected: string; |
|
|
|
itemSelectedBg: string; |
|
|
|
|
|
|
|
/** @deprecated Use `horizontalItemSelectedBg` instead */ |
|
|
|
colorItemBgSelectedHorizontal: string; |
|
|
|
horizontalItemSelectedBg: string; |
|
|
|
|
|
|
|
// Ink Bar
|
|
|
|
/** @deprecated Use `activeBarWidth` instead */ |
|
|
|
colorActiveBarWidth: number; |
|
|
|
activeBarWidth: number; |
|
|
|
|
|
|
|
/** @deprecated Use `activeBarHeight` instead */ |
|
|
|
colorActiveBarHeight: number; |
|
|
|
activeBarHeight: number; |
|
|
|
|
|
|
|
/** @deprecated Use `activeBarBorderWidth` instead */ |
|
|
|
colorActiveBarBorderSize: number; |
|
|
|
activeBarBorderWidth: number; |
|
|
|
|
|
|
|
itemMarginInline: number; |
|
|
|
horizontalItemHoverBg: string; |
|
|
|
horizontalItemBorderRadius: number; |
|
|
|
} |
|
|
|
|
|
|
|
export interface MenuToken extends FullToken<'Menu'> { |
|
|
|
@ -212,7 +275,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => { |
|
|
|
lineWidth, |
|
|
|
zIndexPopup, |
|
|
|
borderRadiusLG, |
|
|
|
radiusSubMenuItem, |
|
|
|
subMenuItemBorderRadius, |
|
|
|
menuArrowSize, |
|
|
|
menuArrowOffset, |
|
|
|
lineType, |
|
|
|
@ -265,7 +328,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => { |
|
|
|
}, |
|
|
|
}, |
|
|
|
[`${componentCls}-item, ${componentCls}-submenu, ${componentCls}-submenu-title`]: { |
|
|
|
borderRadius: token.radiusItem, |
|
|
|
borderRadius: token.itemBorderRadius, |
|
|
|
}, |
|
|
|
|
|
|
|
[`${componentCls}-item-group-title`]: { |
|
|
|
@ -396,6 +459,13 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => { |
|
|
|
transformOrigin: '0 100%', |
|
|
|
}, |
|
|
|
|
|
|
|
[` |
|
|
|
&-placement-bottomLeft, |
|
|
|
&-placement-rightTop, |
|
|
|
`]: {
|
|
|
|
transformOrigin: '0 0', |
|
|
|
}, |
|
|
|
|
|
|
|
[` |
|
|
|
&-placement-leftTop, |
|
|
|
&-placement-leftBottom |
|
|
|
@ -431,7 +501,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => { |
|
|
|
...genSubMenuArrowStyle(token), |
|
|
|
|
|
|
|
[`${componentCls}-item, ${componentCls}-submenu > ${componentCls}-submenu-title`]: { |
|
|
|
borderRadius: radiusSubMenuItem, |
|
|
|
borderRadius: subMenuItemBorderRadius, |
|
|
|
}, |
|
|
|
|
|
|
|
[`${componentCls}-submenu-title::after`]: { |
|
|
|
@ -519,33 +589,33 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul |
|
|
|
const menuDarkToken = mergeToken<MenuToken>( |
|
|
|
menuToken, |
|
|
|
{ |
|
|
|
colorItemText: colorTextDark, |
|
|
|
colorItemTextHover: colorTextLightSolid, |
|
|
|
colorGroupTitle: colorTextDark, |
|
|
|
colorItemTextSelected: colorTextLightSolid, |
|
|
|
colorItemBg: '#001529', |
|
|
|
colorSubItemBg: '#000c17', |
|
|
|
colorItemBgActive: 'transparent', |
|
|
|
colorItemBgSelected: colorPrimary, |
|
|
|
colorActiveBarWidth: 0, |
|
|
|
colorActiveBarHeight: 0, |
|
|
|
colorActiveBarBorderSize: 0, |
|
|
|
itemColor: colorTextDark, |
|
|
|
itemHoverColor: colorTextLightSolid, |
|
|
|
groupTitleColor: colorTextDark, |
|
|
|
itemSelectedColor: colorTextLightSolid, |
|
|
|
itemBg: '#001529', |
|
|
|
subMenuItemBg: '#000c17', |
|
|
|
itemActiveBg: 'transparent', |
|
|
|
itemSelectedBg: colorPrimary, |
|
|
|
activeBarWidth: 0, |
|
|
|
activeBarHeight: 0, |
|
|
|
activeBarBorderWidth: 0, |
|
|
|
|
|
|
|
// Disabled
|
|
|
|
colorItemTextDisabled: new TinyColor(colorTextLightSolid).setAlpha(0.25).toRgbString(), |
|
|
|
itemDisabledColor: new TinyColor(colorTextLightSolid).setAlpha(0.25).toRgbString(), |
|
|
|
|
|
|
|
// Danger
|
|
|
|
colorDangerItemText: colorError, |
|
|
|
colorDangerItemTextHover: colorErrorHover, |
|
|
|
colorDangerItemTextSelected: colorTextLightSolid, |
|
|
|
colorDangerItemBgActive: colorError, |
|
|
|
colorDangerItemBgSelected: colorError, |
|
|
|
dangerItemColor: colorError, |
|
|
|
dangerItemHoverColor: colorErrorHover, |
|
|
|
dangerItemSelectedColor: colorTextLightSolid, |
|
|
|
dangerItemActiveBg: colorError, |
|
|
|
dangerItemSelectedBg: colorError, |
|
|
|
|
|
|
|
menuSubMenuBg: '#001529', |
|
|
|
|
|
|
|
// Horizontal
|
|
|
|
colorItemTextSelectedHorizontal: colorTextLightSolid, |
|
|
|
colorItemBgSelectedHorizontal: colorPrimary, |
|
|
|
horizontalItemSelectedColor: colorTextLightSolid, |
|
|
|
horizontalItemSelectedBg: colorPrimary, |
|
|
|
}, |
|
|
|
{ |
|
|
|
...overrideComponentToken, |
|
|
|
@ -598,36 +668,88 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul |
|
|
|
dropdownWidth: 160, |
|
|
|
zIndexPopup: token.zIndexPopupBase + 50, |
|
|
|
radiusItem: token.borderRadiusLG, |
|
|
|
itemBorderRadius: token.borderRadiusLG, |
|
|
|
radiusSubMenuItem: token.borderRadiusSM, |
|
|
|
subMenuItemBorderRadius: token.borderRadiusSM, |
|
|
|
colorItemText: colorText, |
|
|
|
itemColor: colorText, |
|
|
|
colorItemTextHover: colorText, |
|
|
|
itemHoverColor: colorText, |
|
|
|
colorItemTextHoverHorizontal: colorPrimary, |
|
|
|
horizontalItemHoverColor: colorPrimary, |
|
|
|
colorGroupTitle: colorTextDescription, |
|
|
|
groupTitleColor: colorTextDescription, |
|
|
|
colorItemTextSelected: colorPrimary, |
|
|
|
itemSelectedColor: colorPrimary, |
|
|
|
colorItemTextSelectedHorizontal: colorPrimary, |
|
|
|
horizontalItemSelectedColor: colorPrimary, |
|
|
|
colorItemBg: colorBgContainer, |
|
|
|
itemBg: colorBgContainer, |
|
|
|
colorItemBgHover: colorBgTextHover, |
|
|
|
itemHoverBg: colorBgTextHover, |
|
|
|
colorItemBgActive: colorFillContent, |
|
|
|
itemActiveBg: colorFillContent, |
|
|
|
colorSubItemBg: colorFillAlter, |
|
|
|
subMenuItemBg: colorFillAlter, |
|
|
|
colorItemBgSelected: controlItemBgActive, |
|
|
|
itemSelectedBg: controlItemBgActive, |
|
|
|
colorItemBgSelectedHorizontal: 'transparent', |
|
|
|
horizontalItemSelectedBg: 'transparent', |
|
|
|
colorActiveBarWidth: 0, |
|
|
|
activeBarWidth: 0, |
|
|
|
colorActiveBarHeight: lineWidthBold, |
|
|
|
activeBarHeight: lineWidthBold, |
|
|
|
colorActiveBarBorderSize: lineWidth, |
|
|
|
activeBarBorderWidth: lineWidth, |
|
|
|
|
|
|
|
// Disabled
|
|
|
|
colorItemTextDisabled: colorTextDisabled, |
|
|
|
itemDisabledColor: colorTextDisabled, |
|
|
|
|
|
|
|
// Danger
|
|
|
|
colorDangerItemText: colorError, |
|
|
|
dangerItemColor: colorError, |
|
|
|
colorDangerItemTextHover: colorError, |
|
|
|
dangerItemHoverColor: colorError, |
|
|
|
colorDangerItemTextSelected: colorError, |
|
|
|
dangerItemSelectedColor: colorError, |
|
|
|
colorDangerItemBgActive: colorErrorBg, |
|
|
|
dangerItemActiveBg: colorErrorBg, |
|
|
|
colorDangerItemBgSelected: colorErrorBg, |
|
|
|
dangerItemSelectedBg: colorErrorBg, |
|
|
|
|
|
|
|
itemMarginInline: token.marginXXS, |
|
|
|
|
|
|
|
horizontalItemBorderRadius: 0, |
|
|
|
horizontalItemHoverBg: 'transparent', |
|
|
|
}; |
|
|
|
}, |
|
|
|
{ |
|
|
|
deprecatedTokens: [ |
|
|
|
['colorGroupTitle', 'groupTitleColor'], |
|
|
|
['radiusItem', 'itemBorderRadius'], |
|
|
|
['radiusSubMenuItem', 'subMenuItemBorderRadius'], |
|
|
|
['colorItemText', 'itemColor'], |
|
|
|
['colorItemTextHover', 'itemHoverColor'], |
|
|
|
['colorItemTextHoverHorizontal', 'horizontalItemHoverColor'], |
|
|
|
['colorItemTextSelected', 'itemSelectedColor'], |
|
|
|
['colorItemTextSelectedHorizontal', 'horizontalItemSelectedColor'], |
|
|
|
['colorItemTextDisabled', 'itemDisabledColor'], |
|
|
|
['colorDangerItemText', 'dangerItemColor'], |
|
|
|
['colorDangerItemTextHover', 'dangerItemHoverColor'], |
|
|
|
['colorDangerItemTextSelected', 'dangerItemSelectedColor'], |
|
|
|
['colorDangerItemBgActive', 'dangerItemActiveBg'], |
|
|
|
['colorDangerItemBgSelected', 'dangerItemSelectedBg'], |
|
|
|
['colorItemBg', 'itemBg'], |
|
|
|
['colorItemBgHover', 'itemHoverBg'], |
|
|
|
['colorSubItemBg', 'subMenuItemBg'], |
|
|
|
['colorItemBgActive', 'itemActiveBg'], |
|
|
|
['colorItemBgSelectedHorizontal', 'horizontalItemSelectedBg'], |
|
|
|
['colorActiveBarWidth', 'activeBarWidth'], |
|
|
|
['colorActiveBarHeight', 'activeBarHeight'], |
|
|
|
['colorActiveBarBorderSize', 'activeBarBorderWidth'], |
|
|
|
], |
|
|
|
}, |
|
|
|
); |
|
|
|
|
|
|
|
return useOriginHook(prefixCls); |
|
|
|
|
MadCcc
1 year ago
GitHub