From 3128539211cdfb68191ce61bb12a23c68fe4cc9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Mon, 13 Nov 2023 09:38:05 +0800 Subject: [PATCH] feat: menu support css variable theme (#45750) * feat: layout support cssVar * feat: menu support cssVar * feat: menu support cssVar * feat: menu support cssVar * feat: menu support cssVar * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code --- components/menu/menu.tsx | 10 +- components/menu/style/cssVar.ts | 8 + components/menu/style/horizontal.tsx | 3 +- components/menu/style/index.tsx | 303 ++++++++++++++------------- components/menu/style/rtl.tsx | 12 +- components/menu/style/theme.tsx | 20 +- components/menu/style/vertical.tsx | 20 +- 7 files changed, 209 insertions(+), 167 deletions(-) create mode 100644 components/menu/style/cssVar.ts diff --git a/components/menu/menu.tsx b/components/menu/menu.tsx index f827f531c5..3779e3cd11 100644 --- a/components/menu/menu.tsx +++ b/components/menu/menu.tsx @@ -18,6 +18,8 @@ import type { MenuContextProps, MenuTheme } from './MenuContext'; import MenuContext from './MenuContext'; import OverrideContext from './OverrideContext'; import useStyle from './style'; +import useCSSVar from './style/cssVar'; +import useCSSVarCls from '../config-provider/hooks/useCSSVarCls'; export interface MenuProps extends Omit { theme?: MenuTheme; @@ -120,7 +122,9 @@ const InternalMenu = forwardRef((props, ref) => { }; const prefixCls = getPrefixCls('menu', customizePrefixCls || overrideObj.prefixCls); - const [wrapSSR, hashId] = useStyle(prefixCls, !override); + const [, hashId] = useStyle(prefixCls, !override); + const rootCls = useCSSVarCls(prefixCls); + const wrapCSSVar = useCSSVar(rootCls); const menuClassName = classNames(`${prefixCls}-${theme}`, menu?.className, className); // ====================== Expand Icon ======================== @@ -156,7 +160,7 @@ const InternalMenu = forwardRef((props, ref) => { ); // ========================= Render ========================== - return wrapSSR( + return wrapCSSVar( ((props, ref) => { defaultMotions={defaultMotions} expandIcon={mergedExpandIcon} ref={ref} - rootClassName={classNames(rootClassName, hashId, overrideObj.rootClassName)} + rootClassName={classNames(rootClassName, hashId, overrideObj.rootClassName, rootCls)} > {mergedChildren} diff --git a/components/menu/style/cssVar.ts b/components/menu/style/cssVar.ts new file mode 100644 index 0000000000..22911cb027 --- /dev/null +++ b/components/menu/style/cssVar.ts @@ -0,0 +1,8 @@ +import { genCSSVarRegister } from '../../theme/internal'; +import { prepareComponentToken } from '.'; + +export default genCSSVarRegister('Menu', prepareComponentToken, { + unitless: { + groupTitleLineHeight: true, + }, +}); diff --git a/components/menu/style/horizontal.tsx b/components/menu/style/horizontal.tsx index ba5e099655..f483170525 100644 --- a/components/menu/style/horizontal.tsx +++ b/components/menu/style/horizontal.tsx @@ -1,3 +1,4 @@ +import { unit } from '@ant-design/cssinjs'; import type { MenuToken } from '.'; import type { GenerateStyle } from '../../theme/internal'; @@ -16,7 +17,7 @@ const getHorizontalStyle: GenerateStyle = (token) => { [`${componentCls}-horizontal`]: { lineHeight: horizontalLineHeight, border: 0, - borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`, + borderBottom: `${unit(lineWidth)} ${lineType} ${colorSplit}`, boxShadow: 'none', '&::after': { diff --git a/components/menu/style/index.tsx b/components/menu/style/index.tsx index ef5f9cfda6..bac5c5707d 100644 --- a/components/menu/style/index.tsx +++ b/components/menu/style/index.tsx @@ -1,14 +1,20 @@ -import type { CSSObject } from '@ant-design/cssinjs'; +import { unit, type CSSObject } from '@ant-design/cssinjs'; import { TinyColor } from '@ctrl/tinycolor'; import type { CSSProperties } from 'react'; import { clearFix, resetComponent, resetIcon } from '../../style'; import { genCollapseMotion, initSlideMotion, initZoomMotion } from '../../style/motion'; -import type { FullToken, GenerateStyle, UseComponentStyleResult } from '../../theme/internal'; +import type { + FullToken, + GenerateStyle, + GetDefaultToken, + UseComponentStyleResult, +} from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import getHorizontalStyle from './horizontal'; import getRTLStyle from './rtl'; import getThemeStyle from './theme'; import getVerticalStyle from './vertical'; +import type { CssUtil } from 'antd-style'; /** Component only token. Which will handle additional calculation of alias token */ export interface ComponentToken { @@ -35,7 +41,7 @@ export interface ComponentToken { * @desc 分组标题文字高度 * @descEN line-height of group title */ - groupTitleLineHeight: CSSProperties['lineHeight']; + groupTitleLineHeight: string | number; /** * @desc 分组标题文字大小 * @descEN font-size of group title @@ -357,12 +363,14 @@ export interface ComponentToken { * @descEN Background of active danger menu item in dark mode */ darkDangerItemActiveBg: string; + /** @internal */ + subMenuTitleWidth: number | string; } export interface MenuToken extends FullToken<'Menu'> { - menuHorizontalHeight: number; - menuArrowSize: number; - menuArrowOffset: string; + menuHorizontalHeight: number | string; + menuArrowSize: number | string; + menuArrowOffset: number | string; menuPanelMaskInset: number; menuSubMenuBg: string; } @@ -471,8 +479,8 @@ const genSubMenuArrowStyle = (token: MenuToken): CSSObject => { // → '&::before, &::after': { position: 'absolute', - width: menuArrowSize * 0.6, - height: menuArrowSize * 0.15, + width: token.calc(menuArrowSize).mul(0.6).equal(), + height: token.calc(menuArrowSize).mul(0.15).equal(), backgroundColor: 'currentcolor', borderRadius, transition: [ @@ -485,11 +493,13 @@ const genSubMenuArrowStyle = (token: MenuToken): CSSObject => { }, '&::before': { - transform: `rotate(45deg) translateY(-${menuArrowOffset})`, + transform: `rotate(45deg) translateY(${unit( + token.calc(menuArrowOffset).mul(-1).equal(), + )})`, }, '&::after': { - transform: `rotate(-45deg) translateY(${menuArrowOffset})`, + transform: `rotate(-45deg) translateY(${unit(menuArrowOffset)})`, }, }, }, @@ -570,7 +580,7 @@ const getBaseStyle: GenerateStyle = (token) => { }, [`${componentCls}-item-group-title`]: { - padding: `${paddingXS}px ${padding}px`, + padding: `${unit(paddingXS)} ${unit(padding)}`, fontSize: groupTitleFontSize, lineHeight: groupTitleLineHeight, transition: `all ${motionDurationSlow}`, @@ -646,7 +656,7 @@ const getBaseStyle: GenerateStyle = (token) => { padding: 0, [`${componentCls}-item, ${componentCls}-submenu-title`]: { - paddingInline: `${fontSize * 2}px ${padding}px`, + paddingInline: `${unit(token.calc(fontSize).mul(2).equal())} ${unit(padding)}`, }, }, }, @@ -667,7 +677,7 @@ const getBaseStyle: GenerateStyle = (token) => { // https://github.com/ant-design/ant-design/issues/13955 '&::before': { position: 'absolute', - inset: `${menuPanelMaskInset}px 0 0`, + inset: `${unit(menuPanelMaskInset)} 0 0`, zIndex: -1, width: '100%', height: '100%', @@ -760,25 +770,29 @@ const getBaseStyle: GenerateStyle = (token) => { &-inline ${componentCls}-submenu-arrow`]: { // ↓ '&::before': { - transform: `rotate(-45deg) translateX(${menuArrowOffset})`, + transform: `rotate(-45deg) translateX(${unit(menuArrowOffset)})`, }, '&::after': { - transform: `rotate(45deg) translateX(-${menuArrowOffset})`, + transform: `rotate(45deg) translateX(${unit( + token.calc(menuArrowOffset).mul(-1).equal(), + )})`, }, }, [`${componentCls}-submenu-open${componentCls}-submenu-inline > ${componentCls}-submenu-title > ${componentCls}-submenu-arrow`]: { // ↑ - transform: `translateY(-${menuArrowSize * 0.2}px)`, + transform: `translateY(${unit(token.calc(menuArrowSize).mul(0.2).mul(-1).equal())})`, '&::after': { - transform: `rotate(-45deg) translateX(-${menuArrowOffset})`, + transform: `rotate(-45deg) translateX(${unit( + token.calc(menuArrowOffset).mul(-1).equal(), + )})`, }, '&::before': { - transform: `rotate(45deg) translateX(${menuArrowOffset})`, + transform: `rotate(45deg) translateX(${unit(menuArrowOffset)})`, }, }, }, @@ -795,6 +809,127 @@ const getBaseStyle: GenerateStyle = (token) => { ]; }; +export const prepareComponentToken: GetDefaultToken<'Menu'> = (token) => { + const { + colorPrimary, + colorError, + colorTextDisabled, + colorErrorBg, + colorText, + colorTextDescription, + colorBgContainer, + colorFillAlter, + colorFillContent, + lineWidth, + lineWidthBold, + controlItemBgActive, + colorBgTextHover, + controlHeightLG, + lineHeight, + colorBgElevated, + marginXXS, + padding, + fontSize, + controlHeightSM, + fontSizeLG, + colorTextLightSolid, + colorErrorHover, + } = token; + + const colorTextDark = new TinyColor(colorTextLightSolid).setAlpha(0.65).toRgbString(); + + return { + 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: controlItemBgActive, + 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', + itemHeight: controlHeightLG, + groupTitleLineHeight: lineHeight, + collapsedWidth: controlHeightLG * 2, + popupBg: colorBgElevated, + itemMarginBlock: marginXXS, + itemPaddingInline: padding, + horizontalLineHeight: `${controlHeightLG * 1.15}px`, + iconSize: fontSize, + iconMarginInlineEnd: controlHeightSM - fontSize, + collapsedIconSize: fontSizeLG, + groupTitleFontSize: fontSize, + + // Disabled + darkItemDisabledColor: new TinyColor(colorTextLightSolid).setAlpha(0.25).toRgbString(), + + // Dark + darkItemColor: colorTextDark, + darkDangerItemColor: colorError, + darkItemBg: '#001529', + darkSubMenuItemBg: '#000c17', + darkItemSelectedColor: colorTextLightSolid, + darkItemSelectedBg: colorPrimary, + darkDangerItemSelectedBg: colorError, + darkItemHoverBg: 'transparent', + darkGroupTitleColor: colorTextDark, + darkItemHoverColor: colorTextLightSolid, + darkDangerItemHoverColor: colorErrorHover, + darkDangerItemSelectedColor: colorTextLightSolid, + darkDangerItemActiveBg: colorError, + + subMenuTitleWidth: `calc(100% - ${token.marginXXS * 2}px)`, + }; +}; + // ============================== Export ============================== export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResult => { const useOriginHook = genComponentStyleHook( @@ -827,15 +962,20 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul darkDangerItemActiveBg, } = token; - const menuArrowSize = (fontSize / 7) * 5; + const menuArrowSize = token.calc(fontSize).div(7).mul(5).equal(); // Menu Token - const menuToken = mergeToken(token, { + const menuToken = mergeToken(token, { menuArrowSize, - menuHorizontalHeight: controlHeightLG * 1.15, - menuArrowOffset: `${menuArrowSize * 0.25}px`, + menuHorizontalHeight: token.calc(controlHeightLG).mul(1.15).equal(), + menuArrowOffset: token.calc(menuArrowSize).mul(0.25).equal(), menuPanelMaskInset: -7, // Still a hardcode here since it's offset by rc-align menuSubMenuBg: colorBgElevated, + calc: token.calc, + subMenuTitleWidth: + token.activeBarWidth && token.activeBarBorderWidth + ? `calc(100% + ${token.activeBarBorderWidth}px)` + : `calc(100% - ${token.marginXXS * 2}px)`, }); const menuDarkToken = mergeToken(menuToken, { @@ -894,124 +1034,7 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul initZoomMotion(menuToken, 'zoom-big'), ]; }, - (token) => { - const { - colorPrimary, - colorError, - colorTextDisabled, - colorErrorBg, - colorText, - colorTextDescription, - colorBgContainer, - colorFillAlter, - colorFillContent, - lineWidth, - lineWidthBold, - controlItemBgActive, - colorBgTextHover, - controlHeightLG, - lineHeight, - colorBgElevated, - marginXXS, - padding, - fontSize, - controlHeightSM, - fontSizeLG, - colorTextLightSolid, - colorErrorHover, - } = token; - - const colorTextDark = new TinyColor(colorTextLightSolid).setAlpha(0.65).toRgbString(); - - return { - 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: controlItemBgActive, - 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', - itemHeight: controlHeightLG, - groupTitleLineHeight: lineHeight, - collapsedWidth: controlHeightLG * 2, - popupBg: colorBgElevated, - itemMarginBlock: marginXXS, - itemPaddingInline: padding, - horizontalLineHeight: `${controlHeightLG * 1.15}px`, - iconSize: fontSize, - iconMarginInlineEnd: controlHeightSM - fontSize, - collapsedIconSize: fontSizeLG, - groupTitleFontSize: fontSize, - - // Disabled - darkItemDisabledColor: new TinyColor(colorTextLightSolid).setAlpha(0.25).toRgbString(), - - // Dark - darkItemColor: colorTextDark, - darkDangerItemColor: colorError, - darkItemBg: '#001529', - darkSubMenuItemBg: '#000c17', - darkItemSelectedColor: colorTextLightSolid, - darkItemSelectedBg: colorPrimary, - darkDangerItemSelectedBg: colorError, - darkItemHoverBg: 'transparent', - darkGroupTitleColor: colorTextDark, - darkItemHoverColor: colorTextLightSolid, - darkDangerItemHoverColor: colorErrorHover, - darkDangerItemSelectedColor: colorTextLightSolid, - darkDangerItemActiveBg: colorError, - }; - }, + prepareComponentToken, { deprecatedTokens: [ ['colorGroupTitle', 'groupTitleColor'], diff --git a/components/menu/style/rtl.tsx b/components/menu/style/rtl.tsx index a13fd7d8df..cec639304a 100644 --- a/components/menu/style/rtl.tsx +++ b/components/menu/style/rtl.tsx @@ -1,7 +1,13 @@ +import type { CssUtil } from 'antd-style'; import type { MenuToken } from '.'; import type { GenerateStyle } from '../../theme/internal'; +import { unit } from '@ant-design/cssinjs'; -const getRTLStyle: GenerateStyle = ({ componentCls, menuArrowOffset }) => ({ +const getRTLStyle: GenerateStyle = ({ + componentCls, + menuArrowOffset, + calc, +}) => ({ [`${componentCls}-rtl`]: { direction: 'rtl', }, @@ -15,11 +21,11 @@ const getRTLStyle: GenerateStyle = ({ componentCls, menuArrowOffset } ${componentCls}-submenu-rtl ${componentCls}-vertical`]: { [`${componentCls}-submenu-arrow`]: { '&::before': { - transform: `rotate(-45deg) translateY(-${menuArrowOffset})`, + transform: `rotate(-45deg) translateY(${unit(calc(menuArrowOffset).mul(-1).equal())})`, }, '&::after': { - transform: `rotate(45deg) translateY(${menuArrowOffset})`, + transform: `rotate(45deg) translateY(${unit(menuArrowOffset)})`, }, }, }, diff --git a/components/menu/style/theme.tsx b/components/menu/style/theme.tsx index 3b2215b924..3b30b13a0c 100644 --- a/components/menu/style/theme.tsx +++ b/components/menu/style/theme.tsx @@ -1,4 +1,5 @@ -import type { CSSInterpolation } from '@ant-design/cssinjs'; +import { unit, type CSSInterpolation } from '@ant-design/cssinjs'; + import type { MenuToken } from '.'; import { genFocusOutline } from '../../style'; @@ -172,7 +173,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation [`> ${componentCls}-item, > ${componentCls}-submenu`]: { top: activeBarBorderWidth, - marginTop: -activeBarBorderWidth, + marginTop: token.calc(activeBarBorderWidth).mul(-1).equal(), marginBottom: 0, borderRadius: horizontalItemBorderRadius, @@ -180,7 +181,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation position: 'absolute', insetInline: itemPaddingInline, bottom: 0, - borderBottom: `${activeBarHeight}px solid transparent`, + borderBottom: `${unit(activeBarHeight)} solid transparent`, transition: `border-color ${motionDurationSlow} ${motionEaseInOut}`, content: '""', }, @@ -210,7 +211,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation // [`&${componentCls}-root`]: { [`&${componentCls}-inline, &${componentCls}-vertical`]: { - borderInlineEnd: `${activeBarBorderWidth}px ${lineType} ${colorSplit}`, + borderInlineEnd: `${unit(activeBarBorderWidth)} ${lineType} ${colorSplit}`, }, }, @@ -222,12 +223,9 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation }, // Item - [`${componentCls}-item, ${componentCls}-submenu-title`]: - activeBarBorderWidth && activeBarWidth - ? { - width: `calc(100% + ${activeBarBorderWidth}px)`, - } - : {}, + [`${componentCls}-item, ${componentCls}-submenu-title`]: { + width: token.subMenuTitleWidth, + }, [`${componentCls}-item`]: { position: 'relative', @@ -236,7 +234,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation position: 'absolute', insetBlock: 0, insetInlineEnd: 0, - borderInlineEnd: `${activeBarWidth}px solid ${itemSelectedColor}`, + borderInlineEnd: `${unit(activeBarWidth)} solid ${itemSelectedColor}`, transform: 'scaleY(0.0001)', opacity: 0, transition: [ diff --git a/components/menu/style/vertical.tsx b/components/menu/style/vertical.tsx index a1cfb30dc0..23f03ac44b 100644 --- a/components/menu/style/vertical.tsx +++ b/components/menu/style/vertical.tsx @@ -1,4 +1,4 @@ -import type { CSSObject } from '@ant-design/cssinjs'; +import { unit, type CSSObject } from '@ant-design/cssinjs'; import type { MenuToken } from '.'; import { textEllipsis } from '../../style'; import type { GenerateStyle } from '../../theme/internal'; @@ -14,7 +14,7 @@ const getVerticalInlineStyle: GenerateStyle = (token) => { itemMarginBlock, } = token; - const paddingWithArrow = padding + menuArrowSize + marginXS; + const paddingWithArrow = token.calc(menuArrowSize).add(padding).add(marginXS).equal(); return { [`${componentCls}-item`]: { @@ -24,19 +24,19 @@ const getVerticalInlineStyle: GenerateStyle = (token) => { [`${componentCls}-item, ${componentCls}-submenu-title`]: { height: itemHeight, - lineHeight: `${itemHeight}px`, + lineHeight: `${unit(itemHeight)}`, paddingInline: padding, overflow: 'hidden', textOverflow: 'ellipsis', marginInline: itemMarginInline, marginBlock: itemMarginBlock, - width: `calc(100% - ${itemMarginInline * 2}px)`, + width: token.subMenuTitleWidth, }, [`> ${componentCls}-item, > ${componentCls}-submenu > ${componentCls}-submenu-title`]: { height: itemHeight, - lineHeight: `${itemHeight}px`, + lineHeight: `${unit(itemHeight)}`, }, [`${componentCls}-item-group-list ${componentCls}-submenu-title, @@ -68,7 +68,7 @@ const getVerticalStyle: GenerateStyle = (token) => { const inlineItemStyle: CSSObject = { height: itemHeight, - lineHeight: `${itemHeight}px`, + lineHeight: `${unit(itemHeight)}`, listStylePosition: 'inside', listStyleType: 'disc', }; @@ -97,7 +97,7 @@ const getVerticalStyle: GenerateStyle = (token) => { { [`${componentCls}-submenu-popup ${componentCls}-vertical${componentCls}-sub`]: { minWidth: dropdownWidth, - maxHeight: `calc(100vh - ${controlHeightLG * 2.5}px)`, + maxHeight: `calc(100vh - ${unit(token.calc(controlHeightLG).mul(2.5).equal())})`, padding: '0', overflow: 'hidden', borderInlineEnd: 0, @@ -178,7 +178,9 @@ const getVerticalStyle: GenerateStyle = (token) => { > ${componentCls}-item-group > ${componentCls}-item-group-list > ${componentCls}-submenu > ${componentCls}-submenu-title, > ${componentCls}-submenu > ${componentCls}-submenu-title`]: { insetInlineStart: 0, - paddingInline: `calc(50% - ${fontSizeLG / 2}px - ${itemMarginInline}px)`, + paddingInline: `calc(50% - ${unit(token.calc(fontSizeLG).div(2).equal())} - ${unit( + itemMarginInline, + )})`, textOverflow: 'clip', [` @@ -191,7 +193,7 @@ const getVerticalStyle: GenerateStyle = (token) => { [`${componentCls}-item-icon, ${iconCls}`]: { margin: 0, fontSize: collapsedIconSize, - lineHeight: `${itemHeight}px`, + lineHeight: `${unit(itemHeight)}`, '+ span': { display: 'inline-block',