✨ feat: migrate less to token for Tag (#42053)

* 🔀  feat: rebase feature

* 🔀  feat: rebase feature

* 📝 feat: update doc

* feat: clean up

* ✨ feat: migrate less to token for Avatar

* ✨ feat: migrate less to token for Tag

* ✨ feat: migrate less to token for Tag

* 🔀  feat: update

* ✨ feat: update

* ✨ feat: update

* ✨ feat: update

* ✨ feat: update snap

* 🔀  feat: rebase feature

* 🔀  feat: rebase feature

* 📝 feat: update doc

* ✨ feat: update

* ✨ feat: update

* ✨ feat: update

* ✨ feat: update

* ✨ feat: update

* ✨ feat: update

* ✨ feat: update

* ✨ feat: update

* ✨ feat: update

* ✨ feat: update

* ✨ feat: update

* chore: code clean

* chore: code clean

* chore: more suiltable line-height

* chore: fix lint

---------

Co-authored-by: MadCcc <1075746765@qq.com>

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

@@ -1003,6 +1003,143 @@ exports[`renders components/tag/demo/colorful-inverse.tsx extend context correct
 </div>
 `;
 
+exports[`renders components/tag/demo/component-token.tsx extend context correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+  style="flex-wrap: wrap; margin-bottom: -8px;"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right: 0px; padding-bottom: 8px;"
+  >
+    <span
+      class="ant-tag"
+    >
+      <a
+        href="https://github.com/ant-design/ant-design/issues/1862"
+      >
+        Link
+      </a>
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right: 0px; padding-bottom: 8px;"
+  >
+    <span
+      class="ant-tag ant-tag-magenta"
+    >
+      Tag 2
+      <span
+        aria-label="close"
+        class="anticon anticon-close ant-tag-close-icon"
+        role="img"
+        tabindex="-1"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="close"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right: 0px; padding-bottom: 8px;"
+  >
+    <span
+      class="ant-tag ant-tag-error"
+    >
+      <span
+        aria-label="close-circle"
+        class="anticon anticon-close-circle"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="close-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"
+          />
+          <path
+            d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+          />
+        </svg>
+      </span>
+      <span>
+        error
+      </span>
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right: 0px; padding-bottom: 8px;"
+  >
+    <span
+      class="ant-tag ant-tag-red-inverse"
+    >
+      red
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right: 0px; padding-bottom: 8px;"
+  >
+    <span
+      class="ant-tag ant-tag-magenta ant-tag-borderless"
+    >
+      magenta
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="padding-bottom: 8px;"
+  >
+    <span
+      class="ant-tag ant-tag-processing"
+    >
+      <span
+        aria-label="sync"
+        class="anticon anticon-sync anticon-spin"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="sync"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 01755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 01512.1 856a342.24 342.24 0 01-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 00-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 00-8-8.2z"
+          />
+        </svg>
+      </span>
+      <span>
+        processing
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
 exports[`renders components/tag/demo/control.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"

components/tag/__tests__/__snapshots__/demo.test.ts.snap

@@ -1003,6 +1003,143 @@ exports[`renders components/tag/demo/colorful-inverse.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/tag/demo/component-token.tsx correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+  style="flex-wrap:wrap;margin-bottom:-8px"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:0;padding-bottom:8px"
+  >
+    <span
+      class="ant-tag"
+    >
+      <a
+        href="https://github.com/ant-design/ant-design/issues/1862"
+      >
+        Link
+      </a>
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:0;padding-bottom:8px"
+  >
+    <span
+      class="ant-tag ant-tag-magenta"
+    >
+      Tag 2
+      <span
+        aria-label="close"
+        class="anticon anticon-close ant-tag-close-icon"
+        role="img"
+        tabindex="-1"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="close"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:0;padding-bottom:8px"
+  >
+    <span
+      class="ant-tag ant-tag-error"
+    >
+      <span
+        aria-label="close-circle"
+        class="anticon anticon-close-circle"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="close-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"
+          />
+          <path
+            d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+          />
+        </svg>
+      </span>
+      <span>
+        error
+      </span>
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:0;padding-bottom:8px"
+  >
+    <span
+      class="ant-tag ant-tag-red-inverse"
+    >
+      red
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:0;padding-bottom:8px"
+  >
+    <span
+      class="ant-tag ant-tag-magenta ant-tag-borderless"
+    >
+      magenta
+    </span>
+  </div>
+  <div
+    class="ant-space-item"
+    style="padding-bottom:8px"
+  >
+    <span
+      class="ant-tag ant-tag-processing"
+    >
+      <span
+        aria-label="sync"
+        class="anticon anticon-sync anticon-spin"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="sync"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 01755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 01512.1 856a342.24 342.24 0 01-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 00-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 00-8-8.2z"
+          />
+        </svg>
+      </span>
+      <span>
+        processing
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
 exports[`renders components/tag/demo/control.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"

components/tag/demo/component-token.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+Component Token Debug.
+
+## en-US
+
+Component Token Debug.

components/tag/demo/component-token.tsx

@@ -0,0 +1,35 @@
+import { CloseCircleOutlined, SyncOutlined } from '@ant-design/icons';
+import { ConfigProvider, Space, Tag } from 'antd';
+import React from 'react';
+
+export default () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Tag: {
+          defaultBg: '#f9f0ff',
+          defaultColor: '#4b34d3',
+        },
+      },
+    }}
+  >
+    <Space size={[0, 8]} wrap>
+      <Tag>
+        <a href="https://github.com/ant-design/ant-design/issues/1862">Link</a>
+      </Tag>
+      <Tag closable color="magenta">
+        Tag 2
+      </Tag>
+      <Tag icon={<CloseCircleOutlined />} color="error">
+        error
+      </Tag>
+      <Tag color="red-inverse">red</Tag>
+      <Tag bordered={false} color="magenta">
+        magenta
+      </Tag>
+      <Tag icon={<SyncOutlined spin />} color="processing">
+        processing
+      </Tag>
+    </Space>
+  </ConfigProvider>
+);

components/tag/index.en-US.md

@@ -31,6 +31,7 @@ Tag for categorizing or markup.
 <code src="./demo/borderlessLayout.tsx" debug>borderless in layout</code>
 <code src="./demo/customize.tsx" debug>Customize close</code>
 <code src="./demo/draggable.tsx">Draggable Tag</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>
 
 ## API
 

components/tag/index.zh-CN.md

@@ -31,6 +31,7 @@ demo:
 <code src="./demo/borderlessLayout.tsx" debug>深色背景中无边框</code>
 <code src="./demo/customize.tsx" debug>自定义关闭按钮</code>
 <code src="./demo/draggable.tsx">可拖拽标签</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>
 
 ## API
 

components/tag/style/index.ts

@@ -5,13 +5,14 @@ import { resetComponent } from '../../style';
 import type { FullToken } from '../../theme/internal';
 import { genComponentStyleHook, genPresetColor, mergeToken } from '../../theme/internal';
 
-export interface ComponentToken {}
+export interface ComponentToken {
+  defaultBg: string;
+  defaultColor: string;
+}
 
 interface TagToken extends FullToken<'Tag'> {
   tagFontSize: number;
   tagLineHeight: React.CSSProperties['lineHeight'];
-  tagDefaultBg: string;
-  tagDefaultColor: string;
   tagIconSize: number;
   tagPaddingHorizontal: number;
   tagBorderlessBg: string;
@@ -68,9 +69,9 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
       marginInlineEnd: token.marginXS,
       paddingInline,
       fontSize: token.tagFontSize,
-      lineHeight: `${token.tagLineHeight}px`,
+      lineHeight: token.tagLineHeight,
       whiteSpace: 'nowrap',
-      background: token.tagDefaultBg,
+      background: token.defaultBg,
       border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
       borderRadius: token.borderRadiusSM,
       opacity: 1,
@@ -83,7 +84,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
       },
 
       '&, a, a:hover': {
-        color: token.tagDefaultColor,
+        color: token.defaultColor,
       },
 
       [`${componentCls}-close-icon`]: {
@@ -149,31 +150,33 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook('Tag', (token) => {
-  const { fontSize, lineHeight, lineWidth, fontSizeIcon } = token;
-  const tagHeight = Math.round(fontSize * lineHeight);
-
-  const tagFontSize = token.fontSizeSM;
-  const tagLineHeight = tagHeight - lineWidth * 2;
-  const tagDefaultBg = token.colorFillQuaternary;
-  const tagDefaultColor = token.colorText;
-
-  const tagToken = mergeToken<TagToken>(token, {
-    tagFontSize,
-    tagLineHeight,
-    tagDefaultBg,
-    tagDefaultColor,
-    tagIconSize: fontSizeIcon - 2 * lineWidth, // Tag icon is much more smaller
-    tagPaddingHorizontal: 8, // Fixed padding.
-    tagBorderlessBg: token.colorFillTertiary,
-  });
-
-  return [
-    genBaseStyle(tagToken),
-    genPresetStyle(tagToken),
-    genTagStatusStyle(tagToken, 'success', 'Success'),
-    genTagStatusStyle(tagToken, 'processing', 'Info'),
-    genTagStatusStyle(tagToken, 'error', 'Error'),
-    genTagStatusStyle(tagToken, 'warning', 'Warning'),
-  ];
-});
+export default genComponentStyleHook(
+  'Tag',
+  (token) => {
+    const { lineWidth, fontSizeIcon } = token;
+
+    const tagFontSize = token.fontSizeSM;
+    const tagLineHeight = `${token.lineHeightSM * tagFontSize}px`;
+
+    const tagToken = mergeToken<TagToken>(token, {
+      tagFontSize,
+      tagLineHeight,
+      tagIconSize: fontSizeIcon - 2 * lineWidth, // Tag icon is much smaller
+      tagPaddingHorizontal: 8, // Fixed padding.
+      tagBorderlessBg: token.colorFillTertiary,
+    });
+
+    return [
+      genBaseStyle(tagToken),
+      genPresetStyle(tagToken),
+      genTagStatusStyle(tagToken, 'success', 'Success'),
+      genTagStatusStyle(tagToken, 'processing', 'Info'),
+      genTagStatusStyle(tagToken, 'error', 'Error'),
+      genTagStatusStyle(tagToken, 'warning', 'Warning'),
+    ];
+  },
+  (token) => ({
+    defaultBg: token.colorFillQuaternary,
+    defaultColor: token.colorText,
+  }),
+);

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

@@ -302,7 +302,16 @@ This document contains the correspondence between all the less variables related
 
 <!-- ### Tabs -->
 
-<!-- ### Tag -->
+## Tag
+
+<!-- prettier-ignore -->
+| less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@tag-border-radius` | `borderRadiusSM` | Global Token |
+| `@tag-default-bg` | `defaultBg` | - |
+| `@tag-default-color` | `defaultColor` | - |
+| `@tag-font-size` | `fontSizeSM` | Global Token |
+| `@tag-line-height` | `lineHeightSM` | Global Token |
 
 ### Timeline
 

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

@@ -300,7 +300,16 @@ title: Less 变量迁移 Design Token
 
 <!-- ### Tabs 标签页 -->
 
-<!-- ### Tag 标签 -->
+## Tag 标签
+
+<!-- prettier-ignore -->
+| less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@tag-border-radius` | `borderRadiusSM` | 全局 Token |
+| `@tag-default-bg` | `defaultBg` | - |
+| `@tag-default-color` | `defaultColor` | - |
+| `@tag-font-size` | `fontSizeSM` | 全局 Token |
+| `@tag-line-height` | `lineHeightSM` | 全局 Token |
 
 ### Timeline 时间轴