feat(menu): item-height theme variable

src/menu/src/Menu.tsx

@@ -292,12 +292,14 @@ export default defineComponent({
           common: { cubicBezierEaseInOut },
           self
         } = themeRef.value
-        const { borderRadius, borderColorHorizontal, fontSize } = self
+        const { borderRadius, borderColorHorizontal, fontSize, itemHeight } =
+          self
         const vars: any = {
           '--bezier': cubicBezierEaseInOut,
           '--font-size': fontSize,
           '--border-color-horizontal': borderColorHorizontal,
-          '--border-radius': borderRadius
+          '--border-radius': borderRadius,
+          '--item-height': itemHeight
         }
         if (inverted) {
           vars['--group-text-color'] = self.groupTextColorInverted

src/menu/src/styles/index.cssr.ts

@@ -24,6 +24,7 @@ import fadeInHeightExpandTransition from '../../../_styles/transitions/fade-in-h
 // --item-icon-color-active
 // --item-icon-color-collapsed
 // --item-icon-color-child-active
+// --item-height
 export default c([
   cB('menu', `
     background-color: var(--color);
@@ -91,12 +92,12 @@ export default c([
         })
       ])
     ]),
-    cB('menu-item', {
-      transition: 'background-color .3s var(--bezier)',
-      height: '42px',
-      marginTop: '6px',
-      position: 'relative'
-    }, [
+    cB('menu-item', `
+      transition: background-color .3s var(--bezier);
+      height: var(--item-height);
+      margin-top: 6px;
+      position: relative;
+    `, [
       c('&::before', `
         z-index: auto;
         content: "";
@@ -253,9 +254,9 @@ export default c([
       position: 'relative',
       marginTop: '6px'
     }, [
-      cB('menu-item-content', {
-        height: '42px'
-      }),
+      cB('menu-item-content', `
+        height: var(--item-height);
+      `),
       cB('submenu-children', {
         overflow: 'hidden',
         padding: 0

src/menu/styles/light.ts

@@ -52,6 +52,7 @@ export const self = (vars: ThemeCommonVars) => {
     itemIconColorActive: primaryColor,
     itemIconColorChildActive: primaryColor,
     itemIconColorCollapsed: textColor1,
+    itemHeight: '42px',
     arrowColor: primaryColor,
     arrowColorHover: primaryColorHover,
     arrowColorChildActive: primaryColor,