feat: Menu support CSS Var (#8323)

Co-authored-by: songsichen <[email protected]>

Author: shu-hari

components/menu/src/Menu.tsx

@@ -43,6 +43,7 @@ import type { ItemType } from './hooks/useItems';
 import useItems from './hooks/useItems';
 import useStyle from '../style';
 import { useInjectOverride } from './OverrideContext';
+import useCSSVarCls from '../../config-provider/hooks/useCssVarCls';
 
 export const menuProps = () => ({
   id: String,
@@ -106,8 +107,10 @@ export default defineComponent({
     const prefixCls = computed(() => {
       return getPrefixCls('menu', props.prefixCls || override?.prefixCls?.value);
     });
-    const [wrapSSR, hashId] = useStyle(
+    const rootCls = useCSSVarCls(prefixCls);
+    const [wrapSSR, hashId, cssVarCls] = useStyle(
       prefixCls,
+      rootCls,
       computed(() => {
         return !override;
       }),
@@ -336,6 +339,8 @@ export default defineComponent({
         [`${prefixCls.value}-inline-collapsed`]: mergedInlineCollapsed.value,
         [`${prefixCls.value}-rtl`]: isRtl.value,
         [`${prefixCls.value}-${props.theme}`]: true,
+        [rootCls.value]: true,
+        [cssVarCls.value]: true,
       };
     });
     const rootPrefixCls = computed(() => getPrefixCls());
@@ -411,6 +416,7 @@ export default defineComponent({
     );
     useProvideMenu({
       prefixCls,
+      cssVarCls: computed(() => `${rootCls.value} ${cssVarCls.value}`),
       activeKeys,
       openKeys: mergedOpenKeys,
       selectedKeys: mergedSelectedKeys,

components/menu/src/SubMenu.tsx

@@ -103,6 +103,7 @@ export default defineComponent({
 
     const {
       prefixCls,
+      cssVarCls,
       activeKeys,
       disabled: contextDisabled,
       changeActiveKeys,
@@ -210,6 +211,7 @@ export default defineComponent({
 
     const popupClassName = computed(() =>
       classNames(
+        cssVarCls.value,
         prefixCls.value,
         `${prefixCls.value}-${props.theme || theme.value}`,
         props.popupClassName,

components/menu/src/hooks/useMenuContext.ts

@@ -23,6 +23,7 @@ export interface MenuContextProps {
   registerMenuInfo: (key: string, info: StoreMenuInfo) => void;
   unRegisterMenuInfo: (key: string) => void;
   prefixCls: ComputedRef<string>;
+  cssVarCls: ComputedRef<string>;
   openKeys: Ref<Key[]>;
   selectedKeys: Ref<Key[]>;
 

components/menu/style/horizontal.ts

@@ -1,22 +1,23 @@
+import { unit } from '../../_util/cssinjs';
 import type { MenuToken } from '.';
 import type { GenerateStyle } from '../../theme/internal';
 
 const getHorizontalStyle: GenerateStyle<MenuToken> = token => {
   const {
     componentCls,
     motionDurationSlow,
-    menuHorizontalHeight,
+    horizontalLineHeight,
     colorSplit,
     lineWidth,
     lineType,
-    menuItemPaddingInline,
+    itemPaddingInline,
   } = token;
 
   return {
     [`${componentCls}-horizontal`]: {
-      lineHeight: `${menuHorizontalHeight}px`,
+      lineHeight: horizontalLineHeight,
       border: 0,
-      borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`,
+      borderBottom: `${unit(lineWidth)} ${lineType} ${colorSplit}`,
       boxShadow: 'none',
 
       '&::after': {
@@ -31,7 +32,7 @@ const getHorizontalStyle: GenerateStyle<MenuToken> = token => {
         position: 'relative',
         display: 'inline-block',
         verticalAlign: 'bottom',
-        paddingInline: menuItemPaddingInline,
+        paddingInline: itemPaddingInline,
       },
 
       [`> ${componentCls}-item:hover,