✨ feat: Breadcrumb Component Token (#42342)

* ✨ feat: Breadcrumb Component Token * ✨ feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: update dome * ✨ feat: update * ✨ feat: update * ✨ feat: update dome
2 years ago · 90200684b2
10 changed files with 635 additions and 37 deletions
--- a/components/breadcrumb/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/breadcrumb/tests/snapshots/demo-extend.test.ts.snap
@ -63,6 +63,333 @@ exports[`renders components/breadcrumb/demo/basic.tsx extend context correctly 1
 </nav>
 `;

+exports[`renders components/breadcrumb/demo/component-token.tsx extend context correctly 1`] = `
+<nav
+  class="ant-breadcrumb"
+>
+  <ol>
+    <li>
+      <span
+        class="ant-breadcrumb-link"
+      >
+        Home
+      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      &gt;
+    </li>
+    <li>
+      <span
+        class="ant-breadcrumb-link"
+      >
+        <a
+          href=""
+        >
+          Application Center
+        </a>
+      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      &gt;
+    </li>
+    <li>
+      <span
+        class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
+      >
+        <span
+          class="ant-breadcrumb-link"
+        >
+          <a
+            href=""
+          >
+            General
+          </a>
+        </span>
+        <span
+          aria-label="down"
+          class="anticon anticon-down"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+      <div
+        class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-dropdown-placement-bottom"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <ul
+          class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
+          data-menu-list="true"
+          role="menu"
+          tabindex="0"
+        >
+          <li
+            class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+            data-menu-id="rc-menu-uuid-test-1"
+            role="menuitem"
+            tabindex="-1"
+          >
+            <span
+              class="ant-dropdown-menu-title-content"
+            >
+              <a
+                href="http://www.alipay.com/"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                General
+              </a>
+            </span>
+          </li>
+          <div
+            class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-dropdown-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-dropdown-menu-item ant-dropdown-menu-item-only-child"
+            data-menu-id="rc-menu-uuid-test-2"
+            role="menuitem"
+            tabindex="-1"
+          >
+            <span
+              class="ant-dropdown-menu-title-content"
+            >
+              <a
+                href="http://www.taobao.com/"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                Layout
+              </a>
+            </span>
+          </li>
+          <div
+            class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-dropdown-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-dropdown-menu-item ant-dropdown-menu-item-only-child"
+            data-menu-id="rc-menu-uuid-test-3"
+            role="menuitem"
+            tabindex="-1"
+          >
+            <span
+              class="ant-dropdown-menu-title-content"
+            >
+              <a
+                href="http://www.tmall.com/"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                Navigation
+              </a>
+            </span>
+          </li>
+          <div
+            class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-dropdown-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
+          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-dropdown-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-dropdown-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-dropdown-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>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      &gt;
+    </li>
+    <li>
+      <a
+        class="ant-breadcrumb-link"
+        href=""
+      >
+        Application Center
+      </a>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      &gt;
+    </li>
+    <li>
+      <a
+        class="ant-breadcrumb-link"
+        href=""
+      >
+        <span
+          aria-label="home"
+          class="anticon anticon-home"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="home"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 00-44.4 0L77.5 505a63.9 63.9 0 00-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0018.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"
+            />
+          </svg>
+        </span>
+      </a>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      &gt;
+    </li>
+    <li>
+      <a
+        class="ant-breadcrumb-link"
+        href=""
+      >
+        <span
+          aria-label="user"
+          class="anticon anticon-user"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="user"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+            />
+          </svg>
+        </span>
+        <span>
+          Application List
+        </span>
+      </a>
+    </li>
+  </ol>
+</nav>
+`;
+
 exports[`renders components/breadcrumb/demo/debug-routes.tsx extend context correctly 1`] = `
 <nav
  class="ant-breadcrumb"
--- a/components/breadcrumb/tests/snapshots/demo.test.ts.snap
+++ b/components/breadcrumb/tests/snapshots/demo.test.ts.snap
@ -63,6 +63,160 @@ exports[`renders components/breadcrumb/demo/basic.tsx correctly 1`] = `
 </nav>
 `;

+exports[`renders components/breadcrumb/demo/component-token.tsx correctly 1`] = `
+<nav
+  class="ant-breadcrumb"
+>
+  <ol>
+    <li>
+      <span
+        class="ant-breadcrumb-link"
+      >
+        Home
+      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      &gt;
+    </li>
+    <li>
+      <span
+        class="ant-breadcrumb-link"
+      >
+        <a
+          href=""
+        >
+          Application Center
+        </a>
+      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      &gt;
+    </li>
+    <li>
+      <span
+        class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
+      >
+        <span
+          class="ant-breadcrumb-link"
+        >
+          <a
+            href=""
+          >
+            General
+          </a>
+        </span>
+        <span
+          aria-label="down"
+          class="anticon anticon-down"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      &gt;
+    </li>
+    <li>
+      <a
+        class="ant-breadcrumb-link"
+        href=""
+      >
+        Application Center
+      </a>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      &gt;
+    </li>
+    <li>
+      <a
+        class="ant-breadcrumb-link"
+        href=""
+      >
+        <span
+          aria-label="home"
+          class="anticon anticon-home"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="home"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 00-44.4 0L77.5 505a63.9 63.9 0 00-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0018.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"
+            />
+          </svg>
+        </span>
+      </a>
+    </li>
+    <li
+      aria-hidden="true"
+      class="ant-breadcrumb-separator"
+    >
+      &gt;
+    </li>
+    <li>
+      <a
+        class="ant-breadcrumb-link"
+        href=""
+      >
+        <span
+          aria-label="user"
+          class="anticon anticon-user"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="user"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+            />
+          </svg>
+        </span>
+        <span>
+          Application List
+        </span>
+      </a>
+    </li>
+  </ol>
+</nav>
+`;
+
 exports[`renders components/breadcrumb/demo/debug-routes.tsx correctly 1`] = `
 <nav
  class="ant-breadcrumb"
--- a/components/breadcrumb/demo/component-token.md
+++ b/components/breadcrumb/demo/component-token.md
@ -0,0 +1,7 @@
+## zh-CN
+
+Component Token Debug.
+
+## en-US
+
+Component Token Debug.
--- a/components/breadcrumb/demo/component-token.tsx
+++ b/components/breadcrumb/demo/component-token.tsx
@ -0,0 +1,80 @@
+import { HomeOutlined, UserOutlined } from '@ant-design/icons';
+import { Breadcrumb, ConfigProvider } from 'antd';
+import React from 'react';
+
+const menuItems = [
+  {
+    key: '1',
+    label: (
+      <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
+        General
+      </a>
+    ),
+  },
+  {
+    key: '2',
+    label: (
+      <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
+        Layout
+      </a>
+    ),
+  },
+  {
+    key: '3',
+    label: (
+      <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
+        Navigation
+      </a>
+    ),
+  },
+];
+export default () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Breadcrumb: {
+          itemColor: '#b02121',
+          lastItemColor: '#0f3a88',
+          iconFontSize: 28,
+          linkColor: '#979a42',
+          linkHoverColor: '#9450c0',
+          separatorColor: '#b41b60',
+          separatorMargin: 22,
+        },
+      },
+    }}
+  >
+    <Breadcrumb
+      separator=">"
+      items={[
+        {
+          title: 'Home',
+        },
+        {
+          title: <a href="">Application Center</a>,
+        },
+        {
+          title: <a href="">General</a>,
+          menu: { items: menuItems },
+        },
+        {
+          title: 'Application Center',
+          href: '',
+        },
+        {
+          href: '',
+          title: <HomeOutlined />,
+        },
+        {
+          href: '',
+          title: (
+            <>
+              <UserOutlined />
+              <span>Application List</span>
+            </>
+          ),
+        },
+      ]}
+    />
+  </ConfigProvider>
+);
--- a/components/breadcrumb/index.en-US.md
+++ b/components/breadcrumb/index.en-US.md
@ -42,6 +42,7 @@ return <Breadcrumb routes={[{ breadcrumbName: 'sample' }]} />;
 <code src="./demo/overlay.tsx">Bread crumbs with drop down menu</code>
 <code src="./demo/separator-component.tsx">Configuring the Separator Independently</code>
 <code src="./demo/debug-routes.tsx">Debug Routes</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>

 ## API

--- a/components/breadcrumb/index.zh-CN.md
+++ b/components/breadcrumb/index.zh-CN.md
@ -43,6 +43,7 @@ return <Breadcrumb routes={[{ breadcrumbName: 'sample' }]} />;
 <code src="./demo/overlay.tsx">带下拉菜单的面包屑</code>
 <code src="./demo/separator-component.tsx">独立的分隔符</code>
 <code src="./demo/debug-routes.tsx">Debug Routes</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>

 ## API

--- a/components/breadcrumb/style/index.ts
+++ b/components/breadcrumb/style/index.ts
@ -1,30 +1,31 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+import { genFocusStyle, resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
-import { genFocusStyle, resetComponent } from '../../style';

-interface BreadcrumbToken extends FullToken<'Breadcrumb'> {
-  breadcrumbBaseColor: string;
-  breadcrumbFontSize: number;
-  breadcrumbIconFontSize: number;
-  breadcrumbLinkColor: string;
-  breadcrumbLinkColorHover: string;
-  breadcrumbLastItemColor: string;
-  breadcrumbSeparatorMargin: number;
-  breadcrumbSeparatorColor: string;
+export interface ComponentToken {
+  itemColor: string;
+  iconFontSize: number;
+  linkColor: string;
+  linkHoverColor: string;
+  lastItemColor: string;
+  separatorMargin: number;
+  separatorColor: string;
 }

+interface BreadcrumbToken extends FullToken<'Breadcrumb'> {}
+
 const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = (token) => {
  const { componentCls, iconCls } = token;

  return {
    [componentCls]: {
      ...resetComponent(token),
-      color: token.breadcrumbBaseColor,
-      fontSize: token.breadcrumbFontSize,
+      color: token.itemColor,
+      fontSize: token.fontSize,

      [iconCls]: {
-        fontSize: token.breadcrumbIconFontSize,
+        fontSize: token.iconFontSize,
      },

      ol: {
@ -36,7 +37,7 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = (token) =>
      },

      a: {
-        color: token.breadcrumbLinkColor,
+        color: token.linkColor,
        transition: `color ${token.motionDurationMid}`,
        padding: `0 ${token.paddingXXS}px`,
        borderRadius: token.borderRadiusSM,
@ -45,7 +46,7 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = (token) =>
        marginInline: -token.marginXXS,

        '&:hover': {
-          color: token.breadcrumbLinkColorHover,
+          color: token.linkHoverColor,
          backgroundColor: token.colorBgTextHover,
        },

@ -53,12 +54,12 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = (token) =>
      },

      [`li:last-child`]: {
-        color: token.breadcrumbLastItemColor,
+        color: token.lastItemColor,
      },

      [`${componentCls}-separator`]: {
-        marginInline: token.breadcrumbSeparatorMargin,
-        color: token.breadcrumbSeparatorColor,
+        marginInline: token.separatorMargin,
+        color: token.separatorColor,
      },

      [`${componentCls}-link`]: {
@ -83,11 +84,11 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = (token) =>
        },

        '&:hover': {
-          color: token.breadcrumbLinkColorHover,
+          color: token.linkHoverColor,
          backgroundColor: token.colorBgTextHover,

          a: {
-            color: token.breadcrumbLinkColorHover,
+            color: token.linkHoverColor,
          },
        },

@ -107,17 +108,19 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = (token) =>
 };

 // ============================== Export ==============================
-export default genComponentStyleHook('Breadcrumb', (token) => {
-  const BreadcrumbToken = mergeToken<BreadcrumbToken>(token, {
-    breadcrumbBaseColor: token.colorTextDescription,
-    breadcrumbFontSize: token.fontSize,
-    breadcrumbIconFontSize: token.fontSize,
-    breadcrumbLinkColor: token.colorTextDescription,
-    breadcrumbLinkColorHover: token.colorText,
-    breadcrumbLastItemColor: token.colorText,
-    breadcrumbSeparatorMargin: token.marginXS,
-    breadcrumbSeparatorColor: token.colorTextDescription,
-  });
-
-  return [genBreadcrumbStyle(BreadcrumbToken)];
-});
+export default genComponentStyleHook(
+  'Breadcrumb',
+  (token) => {
+    const BreadcrumbToken = mergeToken<BreadcrumbToken>(token, {});
+    return [genBreadcrumbStyle(BreadcrumbToken)];
+  },
+  (token) => ({
+    itemColor: token.colorTextDescription,
+    lastItemColor: token.colorText,
+    iconFontSize: token.fontSize,
+    linkColor: token.colorTextDescription,
+    linkHoverColor: token.colorText,
+    separatorColor: token.colorTextDescription,
+    separatorMargin: token.marginXS,
+  }),
+);
--- a/components/theme/interface/components.ts
+++ b/components/theme/interface/components.ts
@ -4,6 +4,7 @@ import type { ComponentToken as AnchorComponentToken } from '../../anchor/style'
 import type { ComponentToken as AppComponentToken } from '../../app/style';
 import type { ComponentToken as AvatarComponentToken } from '../../avatar/style';
 import type { ComponentToken as BackTopComponentToken } from '../../back-top/style';
+import type { ComponentToken as BreadcrumbComponentToken } from '../../breadcrumb/style';
 import type { ComponentToken as ButtonComponentToken } from '../../button/style';
 import type { ComponentToken as CalendarComponentToken } from '../../calendar/style';
 import type { ComponentToken as CardComponentToken } from '../../card/style';
@ -61,7 +62,7 @@ export interface ComponentTokenMap {
  BackTop?: BackTopComponentToken;
  Badge?: {};
  Button?: ButtonComponentToken;
-  Breadcrumb?: {};
+  Breadcrumb?: BreadcrumbComponentToken;
  Card?: CardComponentToken;
  Carousel?: CarouselComponentToken;
  Cascader?: CascaderComponentToken;
--- a/docs/react/migrate-less-variables.en-US.md
+++ b/docs/react/migrate-less-variables.en-US.md
@ -19,7 +19,19 @@ This document contains the correspondence between all the less variables related

 <!-- ### Badge -->

-<!-- ### BreadCrumb -->
+### BreadCrumb 面包屑
+
+<!-- prettier-ignore -->
+| Less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@breadcrumb-base-color` | `itemColor` | - |
+| `@breadcrumb-last-item-color` | `lastItemColor` | - |
+| `@breadcrumb-font-size` | `fontSize` | GlobalToken |
+| `@breadcrumb-icon-font-size` | `iconFontSize` | - |
+| `@breadcrumb-link-color` | `linkColor` | - |
+| `@breadcrumb-link-color-hover` | `linkHoverColor` | - |
+| `@breadcrumb-separator-color` | `separatorColor` | - |
+| `@breadcrumb-separator-margin` | `separatorMargin` | - |

 <!-- ### Button -->

--- a/docs/react/migrate-less-variables.zh-CN.md
+++ b/docs/react/migrate-less-variables.zh-CN.md
@ -19,7 +19,19 @@ title: Less 变量迁移 Design Token

 <!-- ### Badge 徽标数 -->

-<!-- ### BreadCrumb 面包屑 -->
+### BreadCrumb 面包屑
+
+<!-- prettier-ignore -->
+| Less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@breadcrumb-base-color` | `itemColor` | - |
+| `@breadcrumb-last-item-color` | `lastItemColor` | - |
+| `@breadcrumb-font-size` | `fontSize` | 全局 Token |
+| `@breadcrumb-icon-font-size` | `iconFontSize` | - |
+| `@breadcrumb-link-color` | `linkColor` | - |
+| `@breadcrumb-link-color-hover` | `linkHoverColor` | - |
+| `@breadcrumb-separator-color` | `separatorColor` | - |
+| `@breadcrumb-separator-margin` | `separatorMargin` | - |

 <!-- ### Button 按钮 -->