refactor: menu component token (#43576)

* docs: update examples link

* refacor: menu component token

* chore: update demo

* chore: update test case

* fix: token

* chore: fix

* Apply suggestions from code review

Signed-off-by: MadCcc <1075746765@qq.com>

* chore: fix lint

* refactor: more token

---------

Signed-off-by: MadCcc <1075746765@qq.com>

.dumi/theme/slots/Sidebar/index.tsx

@@ -134,7 +134,9 @@ const Sidebar: React.FC = () => {
   } = useSiteToken();
 
   const menuChild = (
-    <ConfigProvider theme={{ components: { Menu: { itemBg: colorBgContainer } } }}>
+    <ConfigProvider
+      theme={{ components: { Menu: { itemBg: colorBgContainer, darkItemBg: colorBgContainer } } }}
+    >
       <Menu
         items={menuItems}
         inlineIndent={30}

components/layout/__tests__/token.test.tsx

@@ -24,7 +24,6 @@ describe('Layout.Token', () => {
       >
         <Header>
           <Menu
-            theme="dark"
             mode="horizontal"
             defaultSelectedKeys={['2']}
             items={new Array(15).fill(null).map((_, index) => {
@@ -62,7 +61,6 @@ describe('Layout.Token', () => {
       >
         <Header>
           <Menu
-            theme="dark"
             mode="horizontal"
             defaultSelectedKeys={['2']}
             items={new Array(15).fill(null).map((_, index) => {

components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1,7 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders components/menu/demo/component-token.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-vertical"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom: 8px;"
+  >
     <ul
       class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-light"
       data-menu-list="true"
@@ -232,7 +238,7 @@ Array [
           />
         </div>
       </li>
-  </ul>,
+    </ul>
     <div
       aria-hidden="true"
       style="display: none;"
@@ -356,8 +362,873 @@ Array [
           />
         </div>
       </div>
-  </div>,
-]
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <ul
+      class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
+      data-menu-list="true"
+      role="menu"
+      style="width: 256px;"
+      tabindex="0"
+    >
+      <li
+        class="ant-menu-item ant-menu-item-selected"
+        data-menu-id="rc-menu-uuid-test-1"
+        role="menuitem"
+        style="padding-left: 24px;"
+        tabindex="-1"
+      >
+        <span
+          aria-label="pie-chart"
+          class="anticon anticon-pie-chart ant-menu-item-icon"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="pie-chart"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 00-282.8 117.1 398.19 398.19 0 00-85.7 127.1A397.61 397.61 0 0072 552a398.46 398.46 0 00117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 00472 952a398.46 398.46 0 00282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 00872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 01470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 00589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 01166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-menu-title-content"
+        >
+          Option 1
+        </span>
+      </li>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <li
+        class="ant-menu-item"
+        data-menu-id="rc-menu-uuid-test-2"
+        role="menuitem"
+        style="padding-left: 24px;"
+        tabindex="-1"
+      >
+        <span
+          aria-label="desktop"
+          class="anticon anticon-desktop ant-menu-item-icon"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="desktop"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32zm-40 488H136V212h752v416z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-menu-title-content"
+        >
+          Option 2
+        </span>
+      </li>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <li
+        class="ant-menu-item"
+        data-menu-id="rc-menu-uuid-test-3"
+        role="menuitem"
+        style="padding-left: 24px;"
+        tabindex="-1"
+      >
+        <span
+          aria-label="container"
+          class="anticon anticon-container ant-menu-item-icon"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="container"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-40 824H232V687h97.9c11.6 32.8 32 62.3 59.1 84.7 34.5 28.5 78.2 44.3 123 44.3s88.5-15.7 123-44.3c27.1-22.4 47.5-51.9 59.1-84.7H792v-63H643.6l-5.2 24.7C626.4 708.5 573.2 752 512 752s-114.4-43.5-126.5-103.3l-5.2-24.7H232V136h560v752zM320 341h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8zm0 160h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-menu-title-content"
+        >
+          Option 3
+        </span>
+      </li>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <li
+        class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open"
+        role="none"
+      >
+        <div
+          aria-controls="rc-menu-uuid-test-sub1-popup"
+          aria-expanded="true"
+          aria-haspopup="true"
+          class="ant-menu-submenu-title"
+          data-menu-id="rc-menu-uuid-test-sub1"
+          role="menuitem"
+          style="padding-left: 24px;"
+          tabindex="-1"
+        >
+          <span
+            aria-label="mail"
+            class="anticon anticon-mail ant-menu-item-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="mail"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
+              />
+            </svg>
+          </span>
+          <span
+            class="ant-menu-title-content"
+          >
+            Navigation One
+          </span>
+          <i
+            class="ant-menu-submenu-arrow"
+          />
+        </div>
+        <div
+          class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-dark"
+          style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+        >
+          <ul
+            class="ant-menu ant-menu-sub ant-menu-inline"
+            data-menu-list="true"
+            id="rc-menu-uuid-test-sub1-popup"
+            role="menu"
+          >
+            <li
+              class="ant-menu-item ant-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-5"
+              role="menuitem"
+              style="padding-left: 48px;"
+              tabindex="-1"
+            >
+              <span
+                class="ant-menu-title-content"
+              >
+                Option 5
+              </span>
+            </li>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
+              </div>
+            </div>
+            <li
+              class="ant-menu-item ant-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-6"
+              role="menuitem"
+              style="padding-left: 48px;"
+              tabindex="-1"
+            >
+              <span
+                class="ant-menu-title-content"
+              >
+                Option 6
+              </span>
+            </li>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
+              </div>
+            </div>
+            <li
+              class="ant-menu-item ant-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-7"
+              role="menuitem"
+              style="padding-left: 48px;"
+              tabindex="-1"
+            >
+              <span
+                class="ant-menu-title-content"
+              >
+                Option 7
+              </span>
+            </li>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
+              </div>
+            </div>
+            <li
+              class="ant-menu-item ant-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-8"
+              role="menuitem"
+              style="padding-left: 48px;"
+              tabindex="-1"
+            >
+              <span
+                class="ant-menu-title-content"
+              >
+                Option 8
+              </span>
+            </li>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
+              </div>
+            </div>
+          </ul>
+        </div>
+        <ul
+          class="ant-menu ant-menu-sub ant-menu-inline"
+          data-menu-list="true"
+          id="rc-menu-uuid-test-sub1-popup"
+          role="menu"
+        >
+          <li
+            class="ant-menu-item ant-menu-item-only-child"
+            data-menu-id="rc-menu-uuid-test-5"
+            role="menuitem"
+            style="padding-left: 48px;"
+            tabindex="-1"
+          >
+            <span
+              class="ant-menu-title-content"
+            >
+              Option 5
+            </span>
+          </li>
+          <div
+            class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+          >
+            <div
+              class="ant-tooltip-arrow"
+              style="position: absolute; top: 0px; left: 0px;"
+            />
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+          <li
+            class="ant-menu-item ant-menu-item-only-child"
+            data-menu-id="rc-menu-uuid-test-6"
+            role="menuitem"
+            style="padding-left: 48px;"
+            tabindex="-1"
+          >
+            <span
+              class="ant-menu-title-content"
+            >
+              Option 6
+            </span>
+          </li>
+          <div
+            class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+          >
+            <div
+              class="ant-tooltip-arrow"
+              style="position: absolute; top: 0px; left: 0px;"
+            />
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+          <li
+            class="ant-menu-item ant-menu-item-only-child"
+            data-menu-id="rc-menu-uuid-test-7"
+            role="menuitem"
+            style="padding-left: 48px;"
+            tabindex="-1"
+          >
+            <span
+              class="ant-menu-title-content"
+            >
+              Option 7
+            </span>
+          </li>
+          <div
+            class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+          >
+            <div
+              class="ant-tooltip-arrow"
+              style="position: absolute; top: 0px; left: 0px;"
+            />
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+          <li
+            class="ant-menu-item ant-menu-item-only-child"
+            data-menu-id="rc-menu-uuid-test-8"
+            role="menuitem"
+            style="padding-left: 48px;"
+            tabindex="-1"
+          >
+            <span
+              class="ant-menu-title-content"
+            >
+              Option 8
+            </span>
+          </li>
+          <div
+            class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+          >
+            <div
+              class="ant-tooltip-arrow"
+              style="position: absolute; top: 0px; left: 0px;"
+            />
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </ul>
+      </li>
+      <li
+        class="ant-menu-submenu ant-menu-submenu-inline"
+        role="none"
+      >
+        <div
+          aria-controls="rc-menu-uuid-test-sub2-popup"
+          aria-expanded="false"
+          aria-haspopup="true"
+          class="ant-menu-submenu-title"
+          data-menu-id="rc-menu-uuid-test-sub2"
+          role="menuitem"
+          style="padding-left: 24px;"
+          tabindex="-1"
+        >
+          <span
+            aria-label="appstore"
+            class="anticon anticon-appstore ant-menu-item-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="appstore"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
+              />
+            </svg>
+          </span>
+          <span
+            class="ant-menu-title-content"
+          >
+            Navigation Two
+          </span>
+          <i
+            class="ant-menu-submenu-arrow"
+          />
+        </div>
+        <div
+          class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-dark"
+          style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+        >
+          <ul
+            class="ant-menu ant-menu-sub ant-menu-inline"
+            data-menu-list="true"
+            id="rc-menu-uuid-test-sub2-popup"
+            role="menu"
+          >
+            <li
+              class="ant-menu-item ant-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-9"
+              role="menuitem"
+              style="padding-left: 48px;"
+              tabindex="-1"
+            >
+              <span
+                class="ant-menu-title-content"
+              >
+                Option 9
+              </span>
+            </li>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
+              </div>
+            </div>
+            <li
+              class="ant-menu-item ant-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-10"
+              role="menuitem"
+              style="padding-left: 48px;"
+              tabindex="-1"
+            >
+              <span
+                class="ant-menu-title-content"
+              >
+                Option 10
+              </span>
+            </li>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
+              </div>
+            </div>
+            <li
+              class="ant-menu-submenu ant-menu-submenu-inline"
+              role="none"
+            >
+              <div
+                aria-controls="rc-menu-uuid-test-sub3-popup"
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="ant-menu-submenu-title"
+                data-menu-id="rc-menu-uuid-test-sub3"
+                role="menuitem"
+                style="padding-left: 48px;"
+                tabindex="-1"
+              >
+                <span
+                  class="ant-menu-title-content"
+                >
+                  Submenu
+                </span>
+                <i
+                  class="ant-menu-submenu-arrow"
+                />
+              </div>
+              <div
+                class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-dark"
+                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+              >
+                <ul
+                  class="ant-menu ant-menu-sub ant-menu-inline"
+                  data-menu-list="true"
+                  id="rc-menu-uuid-test-sub3-popup"
+                  role="menu"
+                >
+                  <li
+                    class="ant-menu-item ant-menu-item-only-child"
+                    data-menu-id="rc-menu-uuid-test-11"
+                    role="menuitem"
+                    style="padding-left: 72px;"
+                    tabindex="-1"
+                  >
+                    <span
+                      class="ant-menu-title-content"
+                    >
+                      Option 11
+                    </span>
+                  </li>
+                  <div
+                    class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+                  >
+                    <div
+                      class="ant-tooltip-arrow"
+                      style="position: absolute; top: 0px; left: 0px;"
+                    />
+                    <div
+                      class="ant-tooltip-content"
+                    >
+                      <div
+                        class="ant-tooltip-inner"
+                        role="tooltip"
+                      />
+                    </div>
+                  </div>
+                  <li
+                    class="ant-menu-item ant-menu-item-only-child"
+                    data-menu-id="rc-menu-uuid-test-12"
+                    role="menuitem"
+                    style="padding-left: 72px;"
+                    tabindex="-1"
+                  >
+                    <span
+                      class="ant-menu-title-content"
+                    >
+                      Option 12
+                    </span>
+                  </li>
+                  <div
+                    class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+                  >
+                    <div
+                      class="ant-tooltip-arrow"
+                      style="position: absolute; top: 0px; left: 0px;"
+                    />
+                    <div
+                      class="ant-tooltip-content"
+                    >
+                      <div
+                        class="ant-tooltip-inner"
+                        role="tooltip"
+                      />
+                    </div>
+                  </div>
+                </ul>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </li>
+    </ul>
+    <div
+      aria-hidden="true"
+      style="display: none;"
+    >
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`renders components/menu/demo/horizontal.tsx extend context correctly 1`] = `

components/menu/__tests__/__snapshots__/demo.test.tsx.snap

@@ -1,7 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders components/menu/demo/component-token.tsx correctly 1`] = `
-Array [
+<div
+  class="ant-space ant-space-vertical"
+>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
     <ul
       class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-light"
       data-menu-list="true"
@@ -166,12 +172,258 @@ Array [
           />
         </div>
       </li>
-  </ul>,
+    </ul>
     <div
       aria-hidden="true"
       style="display:none"
-  />,
-]
+    />
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <ul
+      class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
+      data-menu-list="true"
+      role="menu"
+      style="width:256px"
+      tabindex="0"
+    >
+      <li
+        class="ant-menu-item ant-menu-item-selected"
+        role="menuitem"
+        style="padding-left:24px"
+        tabindex="-1"
+      >
+        <span
+          aria-label="pie-chart"
+          class="anticon anticon-pie-chart ant-menu-item-icon"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="pie-chart"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 00-282.8 117.1 398.19 398.19 0 00-85.7 127.1A397.61 397.61 0 0072 552a398.46 398.46 0 00117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 00472 952a398.46 398.46 0 00282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 00872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 01470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 00589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 01166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-menu-title-content"
+        >
+          Option 1
+        </span>
+      </li>
+      <li
+        class="ant-menu-item"
+        role="menuitem"
+        style="padding-left:24px"
+        tabindex="-1"
+      >
+        <span
+          aria-label="desktop"
+          class="anticon anticon-desktop ant-menu-item-icon"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="desktop"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32zm-40 488H136V212h752v416z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-menu-title-content"
+        >
+          Option 2
+        </span>
+      </li>
+      <li
+        class="ant-menu-item"
+        role="menuitem"
+        style="padding-left:24px"
+        tabindex="-1"
+      >
+        <span
+          aria-label="container"
+          class="anticon anticon-container ant-menu-item-icon"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="container"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-40 824H232V687h97.9c11.6 32.8 32 62.3 59.1 84.7 34.5 28.5 78.2 44.3 123 44.3s88.5-15.7 123-44.3c27.1-22.4 47.5-51.9 59.1-84.7H792v-63H643.6l-5.2 24.7C626.4 708.5 573.2 752 512 752s-114.4-43.5-126.5-103.3l-5.2-24.7H232V136h560v752zM320 341h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8zm0 160h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-menu-title-content"
+        >
+          Option 3
+        </span>
+      </li>
+      <li
+        class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open"
+        role="none"
+      >
+        <div
+          aria-expanded="true"
+          aria-haspopup="true"
+          class="ant-menu-submenu-title"
+          role="menuitem"
+          style="padding-left:24px"
+          tabindex="-1"
+        >
+          <span
+            aria-label="mail"
+            class="anticon anticon-mail ant-menu-item-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="mail"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
+              />
+            </svg>
+          </span>
+          <span
+            class="ant-menu-title-content"
+          >
+            Navigation One
+          </span>
+          <i
+            class="ant-menu-submenu-arrow"
+          />
+        </div>
+        <ul
+          class="ant-menu ant-menu-sub ant-menu-inline"
+          data-menu-list="true"
+          role="menu"
+        >
+          <li
+            class="ant-menu-item ant-menu-item-only-child"
+            role="menuitem"
+            style="padding-left:48px"
+            tabindex="-1"
+          >
+            <span
+              class="ant-menu-title-content"
+            >
+              Option 5
+            </span>
+          </li>
+          <li
+            class="ant-menu-item ant-menu-item-only-child"
+            role="menuitem"
+            style="padding-left:48px"
+            tabindex="-1"
+          >
+            <span
+              class="ant-menu-title-content"
+            >
+              Option 6
+            </span>
+          </li>
+          <li
+            class="ant-menu-item ant-menu-item-only-child"
+            role="menuitem"
+            style="padding-left:48px"
+            tabindex="-1"
+          >
+            <span
+              class="ant-menu-title-content"
+            >
+              Option 7
+            </span>
+          </li>
+          <li
+            class="ant-menu-item ant-menu-item-only-child"
+            role="menuitem"
+            style="padding-left:48px"
+            tabindex="-1"
+          >
+            <span
+              class="ant-menu-title-content"
+            >
+              Option 8
+            </span>
+          </li>
+        </ul>
+      </li>
+      <li
+        class="ant-menu-submenu ant-menu-submenu-inline"
+        role="none"
+      >
+        <div
+          aria-expanded="false"
+          aria-haspopup="true"
+          class="ant-menu-submenu-title"
+          role="menuitem"
+          style="padding-left:24px"
+          tabindex="-1"
+        >
+          <span
+            aria-label="appstore"
+            class="anticon anticon-appstore ant-menu-item-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="appstore"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
+              />
+            </svg>
+          </span>
+          <span
+            class="ant-menu-title-content"
+          >
+            Navigation Two
+          </span>
+          <i
+            class="ant-menu-submenu-arrow"
+          />
+        </div>
+      </li>
+    </ul>
+    <div
+      aria-hidden="true"
+      style="display:none"
+    />
+  </div>
+</div>
 `;
 
 exports[`renders components/menu/demo/horizontal.tsx correctly 1`] = `

components/menu/demo/component-token.tsx

@@ -1,8 +1,17 @@
-import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
+import {
+  AppstoreOutlined,
+  ContainerOutlined,
+  DesktopOutlined,
+  MailOutlined,
+  PieChartOutlined,
+  SettingOutlined,
+} from '@ant-design/icons';
 import type { MenuProps } from 'antd';
-import { ConfigProvider, Menu } from 'antd';
+import { ConfigProvider, Menu, Space } from 'antd';
 import React, { useState } from 'react';
 
+type MenuItem = Required<MenuProps>['items'][number];
+
 const items: MenuProps['items'] = [
   {
     label: 'Navigation One',
@@ -60,6 +69,42 @@ const items: MenuProps['items'] = [
   },
 ];
 
+function getItem(
+  label: React.ReactNode,
+  key: React.Key,
+  icon?: React.ReactNode,
+  children?: MenuItem[],
+  type?: 'group',
+): MenuItem {
+  return {
+    key,
+    icon,
+    children,
+    label,
+    type,
+  } as MenuItem;
+}
+
+const items2: MenuProps['items'] = [
+  getItem('Option 1', '1', <PieChartOutlined />),
+  getItem('Option 2', '2', <DesktopOutlined />),
+  getItem('Option 3', '3', <ContainerOutlined />),
+
+  getItem('Navigation One', 'sub1', <MailOutlined />, [
+    getItem('Option 5', '5'),
+    getItem('Option 6', '6'),
+    getItem('Option 7', '7'),
+    getItem('Option 8', '8'),
+  ]),
+
+  getItem('Navigation Two', 'sub2', <AppstoreOutlined />, [
+    getItem('Option 9', '9'),
+    getItem('Option 10', '10'),
+
+    getItem('Submenu', 'sub3', null, [getItem('Option 11', '11'), getItem('Option 12', '12')]),
+  ]),
+];
+
 const App: React.FC = () => {
   const [current, setCurrent] = useState('mail');
 
@@ -69,6 +114,7 @@ const App: React.FC = () => {
   };
 
   return (
+    <Space direction="vertical">
       <ConfigProvider
         theme={{
           components: {
@@ -81,6 +127,31 @@ const App: React.FC = () => {
       >
         <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />
       </ConfigProvider>
+      <ConfigProvider
+        theme={{
+          components: {
+            Menu: {
+              darkItemColor: '#91daff',
+              darkItemBg: '#d48806',
+              darkSubMenuItemBg: '#faad14',
+              darkItemSelectedColor: '#ffccc7',
+              darkItemSelectedBg: '#52c41a',
+            },
+          },
+        }}
+      >
+        <Menu
+          defaultSelectedKeys={['1']}
+          defaultOpenKeys={['sub1']}
+          mode='inline'
+          theme='dark'
+          items={items2}
+          style={{
+            width: 256,
+          }}
+        />
+      </ConfigProvider>
+    </Space>
   );
 };
 

components/menu/style/horizontal.tsx

@@ -5,16 +5,16 @@ 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}`,
       boxShadow: 'none',
@@ -31,7 +31,7 @@ const getHorizontalStyle: GenerateStyle<MenuToken> = (token) => {
         position: 'relative',
         display: 'inline-block',
         verticalAlign: 'bottom',
-        paddingInline: menuItemPaddingInline,
+        paddingInline: itemPaddingInline,
       },
 
       [`> ${componentCls}-item:hover,

components/menu/style/index.tsx

@@ -1,5 +1,6 @@
 import 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';
@@ -30,6 +31,16 @@ export interface ComponentToken {
    * @descEN Color of group title text
    */
   groupTitleColor: string;
+  /**
+   * @desc 分组标题文字高度
+   * @descEN line-height of group title
+   */
+  groupTitleLineHeight: CSSProperties['lineHeight'];
+  /**
+   * @desc 分组标题文字大小
+   * @descEN font-size of group title
+   */
+  groupTitleFontSize: number;
 
   // radius
   /** @deprecated Use `itemBorderRadius` instead */
@@ -229,12 +240,127 @@ export interface ComponentToken {
    * @descEN Border radius of horizontal menu item
    */
   horizontalItemBorderRadius: number;
+  /**
+   * @desc 菜单项高度
+   * @descEN Height of menu item
+   */
+  itemHeight: number;
+  /**
+   * @desc 收起后的宽度
+   * @descEN Width when collapsed
+   */
+  collapsedWidth: number;
+  /**
+   * @desc 弹出框背景色
+   * @descEN Background color of popup
+   */
+  popupBg: string;
+  /**
+   * @desc 菜单项纵向外间距
+   * @descEN margin-block of menu item
+   */
+  itemMarginBlock: CSSProperties['marginBlock'];
+  /**
+   * @desc 菜单项横向内间距
+   * @descEN padding-inline of menu item
+   */
+  itemPaddingInline: CSSProperties['paddingInline'];
+  /**
+   * @desc 横向菜单行高
+   * @descEN LineHeight of horizontal menu item
+   */
+  horizontalLineHeight: CSSProperties['lineHeight'];
+  /**
+   * @desc 图标与文字间距
+   * @descEN Spacing between icon and text
+   */
+  iconMarginInlineEnd: CSSProperties['marginInlineEnd'];
+  /**
+   * @desc 图标尺寸
+   * @descEN Size of icon
+   */
+  iconSize: number;
+  /**
+   * @desc 收起时图标尺寸
+   * @descEN Size of icon when collapsed
+   */
+  collapsedIconSize: number;
+
+  // Dark
+  /**
+   * @desc 暗色模式下的菜单项文字颜色
+   * @descEN Color of menu item text in dark mode
+   */
+  darkItemColor: string;
+  /**
+   * @desc 暗色模式下的危险菜单项文字颜色
+   * @descEN Color of danger menu item text in dark mode
+   */
+  darkDangerItemColor: string;
+  /**
+   * @desc 暗色模式下的菜单项背景
+   * @descEN Background of menu item in dark mode
+   */
+  darkItemBg: string;
+  /**
+   * @desc 暗色模式下的子菜单项背景
+   * @descEN Background of submenu item in dark mode
+   */
+  darkSubMenuItemBg: string;
+  /**
+   * @desc 暗色模式下的菜单项选中颜色
+   * @descEN Color of selected menu item in dark mode
+   */
+  darkItemSelectedColor: string;
+  /**
+   * @desc 暗色模式下的菜单项选中背景
+   * @descEN Background of active menu item in dark mode
+   */
+  darkItemSelectedBg: string;
+  /**
+   * @desc 暗色模式下的菜单项悬浮背景
+   * @descEN Background of hovered menu item in dark mode
+   */
+  darkItemHoverBg: string;
+  /**
+   * @desc 暗色模式下的分组标题文字颜色
+   * @descEN Color of group title text in dark mode
+   */
+  darkGroupTitleColor: string;
+  /**
+   * @desc 暗色模式下的菜单项悬浮颜色
+   * @descEN Color of hovered menu item in dark mode
+   */
+  darkItemHoverColor: string;
+  /**
+   * @desc 暗色模式下的菜单项禁用颜色
+   * @descEN Color of disabled menu item in dark mode
+   */
+  darkItemDisabledColor: string;
+  /**
+   * @desc 暗色模式下的危险菜单项选中背景
+   * @descEN Background of active danger menu item in dark mode
+   */
+  darkDangerItemSelectedBg: string;
+  /**
+   * @desc 暗色模式下的危险菜单项悬浮文字背景
+   * @descEN Background of hovered danger menu item in dark mode
+   */
+  darkDangerItemHoverColor: string;
+  /**
+   * @desc 暗色模式下的危险菜单项选中文字颜色
+   * @descEN Color of selected danger menu item in dark mode
+   */
+  darkDangerItemSelectedColor: string;
+  /**
+   * @desc 暗色模式下的危险菜单项激活态背景
+   * @descEN Background of active danger menu item in dark mode
+   */
+  darkDangerItemActiveBg: string;
 }
 
 export interface MenuToken extends FullToken<'Menu'> {
-  menuItemHeight: number;
   menuHorizontalHeight: number;
-  menuItemPaddingInline: number;
   menuArrowSize: number;
   menuArrowOffset: string;
   menuPanelMaskInset: number;
@@ -244,13 +370,13 @@ export interface MenuToken extends FullToken<'Menu'> {
 const genMenuItemStyle = (token: MenuToken): CSSObject => {
   const {
     componentCls,
-    fontSize,
     motionDurationSlow,
     motionDurationMid,
     motionEaseInOut,
     motionEaseOut,
     iconCls,
-    controlHeightSM,
+    iconSize,
+    iconMarginInlineEnd,
   } = token;
 
   return {
@@ -268,8 +394,8 @@ const genMenuItemStyle = (token: MenuToken): CSSObject => {
       ].join(','),
 
       [`${componentCls}-item-icon, ${iconCls}`]: {
-        minWidth: fontSize,
-        fontSize,
+        minWidth: iconSize,
+        fontSize: iconSize,
         transition: [
           `font-size ${motionDurationMid} ${motionEaseOut}`,
           `margin ${motionDurationSlow} ${motionEaseInOut}`,
@@ -277,7 +403,7 @@ const genMenuItemStyle = (token: MenuToken): CSSObject => {
         ].join(','),
 
         '+ span': {
-          marginInlineStart: controlHeightSM - fontSize,
+          marginInlineStart: iconMarginInlineEnd,
           opacity: 1,
           transition: [
             `opacity ${motionDurationSlow} ${motionEaseInOut}`,
@@ -379,7 +505,6 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
     motionDurationSlow,
     motionDurationMid,
     motionEaseInOut,
-    lineHeight,
     paddingXS,
     padding,
     colorSplit,
@@ -391,6 +516,8 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
     menuArrowOffset,
     lineType,
     menuPanelMaskInset,
+    groupTitleLineHeight,
+    groupTitleFontSize,
   } = token;
 
   return [
@@ -444,8 +571,8 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
 
         [`${componentCls}-item-group-title`]: {
           padding: `${paddingXS}px ${padding}px`,
-          fontSize,
-          lineHeight,
+          fontSize: groupTitleFontSize,
+          lineHeight: groupTitleLineHeight,
           transition: `all ${motionDurationSlow}`,
         },
 
@@ -666,7 +793,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
 export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResult => {
   const useOriginHook = genComponentStyleHook(
     'Menu',
-    (token, { overrideComponentToken }) => {
+    (token) => {
       // Dropdown will handle menu style self. We do not need to handle this.
       if (injectStyle === false) {
         return [];
@@ -675,19 +802,29 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
       const {
         colorBgElevated,
         colorPrimary,
-        colorError,
-        colorErrorHover,
         colorTextLightSolid,
         controlHeightLG,
         fontSize,
+        darkItemColor,
+        darkDangerItemColor,
+        darkItemBg,
+        darkSubMenuItemBg,
+        darkItemSelectedColor,
+        darkItemSelectedBg,
+        darkDangerItemSelectedBg,
+        darkItemHoverBg,
+        darkGroupTitleColor,
+        darkItemHoverColor,
+        darkItemDisabledColor,
+        darkDangerItemHoverColor,
+        darkDangerItemSelectedColor,
+        darkDangerItemActiveBg,
       } = token;
 
       const menuArrowSize = (fontSize / 7) * 5;
 
       // Menu Token
       const menuToken = mergeToken<MenuToken>(token, {
-        menuItemHeight: controlHeightLG,
-        menuItemPaddingInline: token.margin,
         menuArrowSize,
         menuHorizontalHeight: controlHeightLG * 1.15,
         menuArrowOffset: `${menuArrowSize * 0.25}px`,
@@ -695,43 +832,36 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
         menuSubMenuBg: colorBgElevated,
       });
 
-      const colorTextDark = new TinyColor(colorTextLightSolid).setAlpha(0.65).toRgbString();
-
-      const menuDarkToken = mergeToken<MenuToken>(
-        menuToken,
-        {
-          itemColor: colorTextDark,
-          itemHoverColor: colorTextLightSolid,
-          groupTitleColor: colorTextDark,
-          itemSelectedColor: colorTextLightSolid,
-          itemBg: '#001529',
-          subMenuItemBg: '#000c17',
+      const menuDarkToken = mergeToken<MenuToken>(menuToken, {
+        itemColor: darkItemColor,
+        itemHoverColor: darkItemHoverColor,
+        groupTitleColor: darkGroupTitleColor,
+        itemSelectedColor: darkItemSelectedColor,
+        itemBg: darkItemBg,
+        popupBg: darkItemBg,
+        subMenuItemBg: darkSubMenuItemBg,
         itemActiveBg: 'transparent',
-          itemSelectedBg: colorPrimary,
-          activeBarWidth: 0,
+        itemSelectedBg: darkItemSelectedBg,
         activeBarHeight: 0,
         activeBarBorderWidth: 0,
+        itemHoverBg: darkItemHoverBg,
 
         // Disabled
-          itemDisabledColor: new TinyColor(colorTextLightSolid).setAlpha(0.25).toRgbString(),
+        itemDisabledColor: darkItemDisabledColor,
 
         // Danger
-          dangerItemColor: colorError,
-          dangerItemHoverColor: colorErrorHover,
-          dangerItemSelectedColor: colorTextLightSolid,
-          dangerItemActiveBg: colorError,
-          dangerItemSelectedBg: colorError,
+        dangerItemColor: darkDangerItemColor,
+        dangerItemHoverColor: darkDangerItemHoverColor,
+        dangerItemSelectedColor: darkDangerItemSelectedColor,
+        dangerItemActiveBg: darkDangerItemActiveBg,
+        dangerItemSelectedBg: darkDangerItemSelectedBg,
 
-          menuSubMenuBg: '#001529',
+        menuSubMenuBg: darkSubMenuItemBg,
 
         // Horizontal
         horizontalItemSelectedColor: colorTextLightSolid,
         horizontalItemSelectedBg: colorPrimary,
-        },
-        {
-          ...overrideComponentToken,
-        },
-      );
+      });
 
       return [
         // Basic
@@ -773,8 +903,20 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
         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,
@@ -833,6 +975,35 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
 
         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,
       };
     },
     {

components/menu/style/theme.tsx

@@ -21,7 +21,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
     motionDurationSlow,
     motionEaseInOut,
     motionEaseOut,
-    menuItemPaddingInline,
+    itemPaddingInline,
     motionDurationMid,
     itemHoverColor,
     lineType,
@@ -45,6 +45,8 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
     horizontalItemSelectedBg,
     horizontalItemBorderRadius,
     horizontalItemHoverBg,
+
+    popupBg,
   } = token;
 
   return {
@@ -155,7 +157,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
       },
 
       [`&${componentCls}-popup > ${componentCls}`]: {
-        backgroundColor: itemBg,
+        backgroundColor: popupBg,
       },
 
       // ====================== Horizontal ======================
@@ -174,7 +176,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
 
           '&::after': {
             position: 'absolute',
-            insetInline: menuItemPaddingInline,
+            insetInline: itemPaddingInline,
             bottom: 0,
             borderBottom: `${activeBarHeight}px solid transparent`,
             transition: `border-color ${motionDurationSlow} ${motionEaseInOut}`,

components/menu/style/vertical.tsx

@@ -6,12 +6,12 @@ import type { GenerateStyle } from '../../theme/internal';
 const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = (token) => {
   const {
     componentCls,
-    menuItemHeight,
+    itemHeight,
     itemMarginInline,
     padding,
     menuArrowSize,
     marginXS,
-    marginXXS,
+    itemMarginBlock,
   } = token;
 
   const paddingWithArrow = padding + menuArrowSize + marginXS;
@@ -23,20 +23,20 @@ const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = (token) => {
     },
 
     [`${componentCls}-item, ${componentCls}-submenu-title`]: {
-      height: menuItemHeight,
-      lineHeight: `${menuItemHeight}px`,
+      height: itemHeight,
+      lineHeight: `${itemHeight}px`,
       paddingInline: padding,
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       marginInline: itemMarginInline,
-      marginBlock: marginXXS,
+      marginBlock: itemMarginBlock,
       width: `calc(100% - ${itemMarginInline * 2}px)`,
     },
 
     [`> ${componentCls}-item,
             > ${componentCls}-submenu > ${componentCls}-submenu-title`]: {
-      height: menuItemHeight,
-      lineHeight: `${menuItemHeight}px`,
+      height: itemHeight,
+      lineHeight: `${itemHeight}px`,
     },
 
     [`${componentCls}-item-group-list ${componentCls}-submenu-title,
@@ -50,7 +50,7 @@ const getVerticalStyle: GenerateStyle<MenuToken> = (token) => {
   const {
     componentCls,
     iconCls,
-    menuItemHeight,
+    itemHeight,
     colorTextLightSolid,
     dropdownWidth,
     controlHeightLG,
@@ -62,11 +62,13 @@ const getVerticalStyle: GenerateStyle<MenuToken> = (token) => {
     motionDurationSlow,
     paddingXS,
     boxShadowSecondary,
+    collapsedWidth,
+    collapsedIconSize,
   } = token;
 
   const inlineItemStyle: CSSObject = {
-    height: menuItemHeight,
-    lineHeight: `${menuItemHeight}px`,
+    height: itemHeight,
+    lineHeight: `${itemHeight}px`,
     listStylePosition: 'inside',
     listStyleType: 'disc',
   };
@@ -160,7 +162,7 @@ const getVerticalStyle: GenerateStyle<MenuToken> = (token) => {
     // Inline Collapse Only
     {
       [`${componentCls}-inline-collapsed`]: {
-        width: menuItemHeight * 2,
+        width: collapsedWidth,
 
         [`&${componentCls}-root`]: {
           [`${componentCls}-item, ${componentCls}-submenu ${componentCls}-submenu-title`]: {
@@ -188,8 +190,8 @@ const getVerticalStyle: GenerateStyle<MenuToken> = (token) => {
 
           [`${componentCls}-item-icon, ${iconCls}`]: {
             margin: 0,
-            fontSize: fontSizeLG,
-            lineHeight: `${menuItemHeight}px`,
+            fontSize: collapsedIconSize,
+            lineHeight: `${itemHeight}px`,
 
             '+ span': {
               display: 'inline-block',

docs/blog/extract-ssr.en-US.md

@@ -139,7 +139,7 @@ if (!fs.existsSync(cssFileName)) {
 Then add the corresponding CSS file on the HTML template side:
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <link rel="stylesheet" href="${hashCssFileUrl}" />

docs/blog/extract-ssr.zh-CN.md

@@ -139,7 +139,7 @@ if (!fs.existsSync(cssFileName)) {
 然后在 HTML 模板侧添加对应的 CSS 文件：
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <link rel="stylesheet" href="${hashCssFileUrl}" />

docs/react/migrate-less-variables.en-US.md

@@ -240,12 +240,50 @@ export default App;
 ### Mentions
 
 <!-- prettier-ignore -->
-| less 变量 | Component Token | Note |
+| Less variables | Component Token | Note |
 | --- | --- | --- |
 | `@mentions-dropdown-bg` | `colorBgElevated` | GlobalToken |
 | `@mentions-dropdown-menu-item-hover-bg` | - | Deprecated |
 
-<!-- ### Menu -->
+### Menu
+
+<!-- prettier-ignore -->
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@menu-inline-toplevel-item-height` | `itemHeight` | Same as `@menu-item-height` |
+| `@menu-item-height` | `itemHeight` | - |
+| `@menu-item-group-height` | `groupTitleLineHeight` | - |
+| `@menu-collapsed-width` | `collapsedWidth` | - |
+| `@menu-bg` | `itemBg` | - |
+| `@menu-popup-bg` | `popupBg` | - |
+| `@menu-item-color` | `itemColor` | - |
+| `@menu-inline-submenu-bg` | `subMenuItemBg` | - |
+| `@menu-highlight-color` | `itemSelectedColor` | - |
+| `@menu-highlight-danger-color` | `dangerItemSelectedColor` | - |
+| `@menu-item-active-bg` | `itemActiveBg` | - |
+| `@menu-item-active-danger-bg` | `dangerItemActiveBg` | - |
+| `@menu-item-active-border-width` | `activeBarBorderWidth` | - |
+| `@menu-item-group-title-color` | `groupTitleColor` | - |
+| `@menu-item-vertical-margin` | `itemMarginBlock` | - |
+| `@menu-item-font-size` | `fontSize` | Global Token |
+| `@menu-item-boundary-margin` | - | Deprecated in favor of new style, use `itemMarginBlock` instead |
+| `@menu-item-padding-horizontal` | `itemPaddingInline` | - |
+| `@menu-item-padding` | - | Depreacated, use `itemPaddingInline` and `itemHeight` instead |
+| `@menu-horizontal-line-height` | `horizontalLineHeight` | - |
+| `@menu-icon-margin-right` | `iconMarginInlineEnd` | - |
+| `@menu-icon-size` | `iconSize` | - |
+| `@menu-icon-size-lg` | `horizontalLineHeight` | - |
+| `@menu-dark-color` | `darkItemColor` | - |
+| `@menu-dark-danger-color` | `darkDangerItemColor` | - |
+| `@menu-dark-bg` | `darkItemBg` | - |
+| `@menu-dark-arrow-color` | - | Deprecated, and same as text color |
+| `@menu-dark-inline-submenu-bg` | `darkSubMenuItemBg` | - |
+| `@menu-dark-highlight-color` | `darkItemSelectedColor` | - |
+| `@menu-dark-item-active-bg` | `darkItemSelectedBg` | - |
+| `@menu-dark-item-active-danger-bg` | `darkDangerItemSelectedBg` | - |
+| `@menu-dark-selected-item-icon-color` | - | Deprecated, same as `darkItemSelectedColor` |
+| `@menu-dark-selected-item-text-color` | - | Deprecated, same as `darkItemSelectedColor` |
+| `@menu-dark-item-hover-bg` | `darkItemHoverBg` | - |
 
 ### Message
 

docs/react/migrate-less-variables.zh-CN.md

@@ -243,7 +243,45 @@ Mentions 提及
 | `@mentions-dropdown-bg` | `colorBgElevated` | - |
 | `@mentions-dropdown-menu-item-hover-bg` | - | 已废弃 |
 
-<!-- ### Menu 导航菜单 -->
+### Menu 导航菜单
+
+<!-- prettier-ignore -->
+| Less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@menu-inline-toplevel-item-height` | `itemHeight` | 同 `@menu-item-height` |
+| `@menu-item-height` | `itemHeight` | - |
+| `@menu-item-group-height` | `groupTitleLineHeight` | - |
+| `@menu-collapsed-width` | `collapsedWidth` | - |
+| `@menu-bg` | `itemBg` | - |
+| `@menu-popup-bg` | `popupBg` | - |
+| `@menu-item-color` | `itemColor` | - |
+| `@menu-inline-submenu-bg` | `subMenuItemBg` | - |
+| `@menu-highlight-color` | `itemSelectedColor` | - |
+| `@menu-highlight-danger-color` | `dangerItemSelectedColor` | - |
+| `@menu-item-active-bg` | `itemActiveBg` | - |
+| `@menu-item-active-danger-bg` | `dangerItemActiveBg` | - |
+| `@menu-item-active-border-width` | `activeBarBorderWidth` | - |
+| `@menu-item-group-title-color` | `groupTitleColor` | - |
+| `@menu-item-vertical-margin` | `itemMarginBlock` | - |
+| `@menu-item-font-size` | `fontSize` | 全局 Token |
+| `@menu-item-boundary-margin` | - | 因样式调整已废弃，可使用 `itemMarginBlock` 替代 |
+| `@menu-item-padding-horizontal` | `itemPaddingInline` | - |
+| `@menu-item-padding` | - | 已废弃，使用 `itemPaddingInline` 和 `itemHeight` 替代 |
+| `@menu-horizontal-line-height` | `horizontalLineHeight` | - |
+| `@menu-icon-margin-right` | `iconMarginInlineEnd` | - |
+| `@menu-icon-size` | `iconSize` | - |
+| `@menu-icon-size-lg` | `horizontalLineHeight` | - |
+| `@menu-dark-color` | `darkItemColor` | - |
+| `@menu-dark-danger-color` | `darkDangerItemColor` | - |
+| `@menu-dark-bg` | `darkItemBg` | - |
+| `@menu-dark-arrow-color` | - | 已废弃，和文字颜色相同 |
+| `@menu-dark-inline-submenu-bg` | `darkSubMenuItemBg` | - |
+| `@menu-dark-highlight-color` | `darkItemSelectedColor` | - |
+| `@menu-dark-item-active-bg` | `darkItemSelectedBg` | - |
+| `@menu-dark-item-active-danger-bg` | `darkDangerItemSelectedBg` | - |
+| `@menu-dark-selected-item-icon-color` | - | 已废弃，同 `darkItemSelectedColor` |
+| `@menu-dark-selected-item-text-color` | - | 已废弃，同 `darkItemSelectedColor` |
+| `@menu-dark-item-hover-bg` | `darkItemHoverBg` | - |
 
 ### Message 全局提示