`;
+exports[`renders components/button/demo/component-token.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
exports[`renders components/button/demo/danger.tsx correctly 1`] = `
(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+export default App;
diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md
index 30903a111e40..985a4ddc2d59 100644
--- a/components/button/index.en-US.md
+++ b/components/button/index.en-US.md
@@ -47,6 +47,7 @@ And 4 other properties additionally.
Block Button
Deprecated Button Group
Loading style bug
+Component Token
## API
diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md
index f24a0ec26388..e015c735cd7b 100644
--- a/components/button/index.zh-CN.md
+++ b/components/button/index.zh-CN.md
@@ -50,6 +50,7 @@ group:
Block 按钮
废弃的 Block 组
加载中状态 bug 还原
+组件 Token
## API
diff --git a/components/button/style/group.ts b/components/button/style/group.ts
index f084f9971a05..887f00cae556 100644
--- a/components/button/style/group.ts
+++ b/components/button/style/group.ts
@@ -23,7 +23,7 @@ const genButtonBorderStyle = (buttonTypeCls: string, borderColor: string) => ({
});
const genGroupStyle: GenerateStyle = (token) => {
- const { componentCls, fontSize, lineWidth, colorPrimaryHover, colorErrorHover } = token;
+ const { componentCls, fontSize, lineWidth, groupBorderColor, colorErrorHover } = token;
return {
[`${componentCls}-group`]: [
@@ -71,7 +71,7 @@ const genGroupStyle: GenerateStyle = (token) => {
},
// Border Color
- genButtonBorderStyle(`${componentCls}-primary`, colorPrimaryHover),
+ genButtonBorderStyle(`${componentCls}-primary`, groupBorderColor),
genButtonBorderStyle(`${componentCls}-danger`, colorErrorHover),
],
};
diff --git a/components/button/style/index.ts b/components/button/style/index.ts
index 1631719dbc7a..fd0dd3c2fe23 100644
--- a/components/button/style/index.ts
+++ b/components/button/style/index.ts
@@ -1,4 +1,5 @@
import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
+import type { CSSProperties } from 'react';
import { genFocusStyle } from '../../style';
import { genCompactItemStyle } from '../../style/compact-item';
import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical';
@@ -7,25 +8,135 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import genGroupStyle from './group';
/** Component only token. Which will handle additional calculation of alias token */
-export interface ComponentToken {}
+export interface ComponentToken {
+ /**
+ * @desc 文字字重
+ * @descEN Font weight of text
+ */
+ fontWeight: CSSProperties['fontWeight'];
+ /**
+ * @desc 默认按钮阴影
+ * @descEN Shadow of default button
+ */
+ defaultShadow: string;
+ /**
+ * @desc 主要按钮阴影
+ * @descEN Shadow of primary button
+ */
+ primaryShadow: string;
+ /**
+ * @desc 危险按钮阴影
+ * @descEN Shadow of danger button
+ */
+ dangerShadow: string;
+ /**
+ * @desc 主要按钮文本颜色
+ * @descEN Text color of primary button
+ */
+ primaryColor: string;
+ /**
+ * @desc 默认按钮文本颜色
+ * @descEN Text color of default button
+ */
+ defaultColor: string;
+ /**
+ * @desc 默认按钮背景色
+ * @descEN Background color of default button
+ */
+ defaultBg: string;
+ /**
+ * @desc 默认按钮边框颜色
+ * @descEN Border color of default button
+ */
+ defaultBorderColor: string;
+ /**
+ * @desc 危险按钮文本颜色
+ * @descEN Text color of danger button
+ */
+ dangerColor: string;
+ /**
+ * @desc 禁用状态边框颜色
+ * @descEN Border color of disabled button
+ */
+ borderColorDisabled: string;
+ /**
+ * @desc 默认幽灵按钮文本颜色
+ * @descEN Text color of default ghost button
+ */
+ defaultGhostColor: string;
+ /**
+ * @desc 幽灵按钮背景色
+ * @descEN Background color of ghost button
+ */
+ ghostBg: string;
+ /**
+ * @desc 默认幽灵按钮边框颜色
+ * @descEN Border color of default ghost button
+ */
+ defaultGhostBorderColor: string;
+ /**
+ * @desc 按钮横向内间距
+ * @descEN Horizontal padding of button
+ */
+ paddingInline: CSSProperties['paddingInline'];
+ /**
+ * @desc 大号按钮横向内间距
+ * @descEN Horizontal padding of large button
+ */
+ paddingInlineLG: CSSProperties['paddingInline'];
+ /**
+ * @desc 小号按钮横向内间距
+ * @descEN Horizontal padding of small button
+ */
+ paddingInlineSM: CSSProperties['paddingInline'];
+ /**
+ * @desc 只有图标的按钮图标尺寸
+ * @descEN Icon size of button which only contains icon
+ */
+ onlyIconSize: number;
+ /**
+ * @desc 大号只有图标的按钮图标尺寸
+ * @descEN Icon size of large button which only contains icon
+ */
+ onlyIconSizeLG: number;
+ /**
+ * @desc 小号只有图标的按钮图标尺寸
+ * @descEN Icon size of small button which only contains icon
+ */
+ onlyIconSizeSM: number;
+ /**
+ * @desc 按钮组边框颜色
+ * @descEN Border color of button group
+ */
+ groupBorderColor: string;
+ /**
+ * @desc 链接按钮悬浮态背景色
+ * @descEN Background color of link button when hover
+ */
+ linkHoverBg: string;
+ /**
+ * @desc 文本按钮悬浮态背景色
+ * @descEN Background color of text button when hover
+ */
+ textHoverBg: string;
+}
export interface ButtonToken extends FullToken<'Button'> {
colorOutlineDefault: string;
- buttonPaddingHorizontal: number;
+ buttonPaddingHorizontal: CSSProperties['paddingInline'];
buttonIconOnlyFontSize: number;
- buttonFontWeight: number;
}
// ============================== Shared ==============================
const genSharedButtonStyle: GenerateStyle = (token): CSSObject => {
- const { componentCls, iconCls, buttonFontWeight } = token;
+ const { componentCls, iconCls, fontWeight } = token;
return {
[componentCls]: {
outline: 'none',
position: 'relative',
display: 'inline-block',
- fontWeight: buttonFontWeight,
+ fontWeight,
whiteSpace: 'nowrap',
textAlign: 'center',
backgroundImage: 'none',
@@ -143,7 +254,7 @@ const genRoundButtonStyle: GenerateStyle = (token) => ({
// =============================== Type ===============================
const genDisabledStyle: GenerateStyle = (token) => ({
cursor: 'not-allowed',
- borderColor: token.colorBorder,
+ borderColor: token.borderColorDisabled,
color: token.colorTextDisabled,
backgroundColor: token.colorBgContainerDisabled,
boxShadow: 'none',
@@ -151,6 +262,7 @@ const genDisabledStyle: GenerateStyle = (token) => ({
const genGhostButtonStyle = (
btnCls: string,
+ background: string,
textColor: string | false,
borderColor: string | false,
textColorDisabled: string | false,
@@ -160,18 +272,18 @@ const genGhostButtonStyle = (
): CSSObject => ({
[`&${btnCls}-background-ghost`]: {
color: textColor || undefined,
- backgroundColor: 'transparent',
+ backgroundColor: background,
borderColor: borderColor || undefined,
boxShadow: 'none',
...genHoverActiveButtonStyle(
btnCls,
{
- backgroundColor: 'transparent',
+ backgroundColor: background,
...hoverStyle,
},
{
- backgroundColor: 'transparent',
+ backgroundColor: background,
...activeStyle,
},
),
@@ -205,10 +317,11 @@ const genPureDisabledButtonStyle: GenerateStyle = (token
const genDefaultButtonStyle: GenerateStyle = (token) => ({
...genSolidButtonStyle(token),
- backgroundColor: token.colorBgContainer,
- borderColor: token.colorBorder,
+ backgroundColor: token.defaultBg,
+ borderColor: token.defaultBorderColor,
+ color: token.defaultColor,
- boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlTmpOutline}`,
+ boxShadow: token.defaultShadow,
...genHoverActiveButtonStyle(
token.componentCls,
@@ -224,8 +337,9 @@ const genDefaultButtonStyle: GenerateStyle = (token) =>
...genGhostButtonStyle(
token.componentCls,
- token.colorBgContainer,
- token.colorBgContainer,
+ token.ghostBg,
+ token.defaultGhostColor,
+ token.defaultGhostBorderColor,
token.colorTextDisabled,
token.colorBorder,
),
@@ -248,6 +362,7 @@ const genDefaultButtonStyle: GenerateStyle = (token) =>
...genGhostButtonStyle(
token.componentCls,
+ token.ghostBg,
token.colorError,
token.colorError,
token.colorTextDisabled,
@@ -261,10 +376,10 @@ const genDefaultButtonStyle: GenerateStyle = (token) =>
const genPrimaryButtonStyle: GenerateStyle = (token) => ({
...genSolidButtonStyle(token),
- color: token.colorTextLightSolid,
+ color: token.primaryColor,
backgroundColor: token.colorPrimary,
- boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlOutline}`,
+ boxShadow: token.primaryShadow,
...genHoverActiveButtonStyle(
token.componentCls,
@@ -280,6 +395,7 @@ const genPrimaryButtonStyle: GenerateStyle = (token) =>
...genGhostButtonStyle(
token.componentCls,
+ token.ghostBg,
token.colorPrimary,
token.colorPrimary,
token.colorTextDisabled,
@@ -296,7 +412,8 @@ const genPrimaryButtonStyle: GenerateStyle = (token) =>
[`&${token.componentCls}-dangerous`]: {
backgroundColor: token.colorError,
- boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.colorErrorOutline}`,
+ boxShadow: token.dangerShadow,
+ color: token.dangerColor,
...genHoverActiveButtonStyle(
token.componentCls,
@@ -310,6 +427,7 @@ const genPrimaryButtonStyle: GenerateStyle = (token) =>
...genGhostButtonStyle(
token.componentCls,
+ token.ghostBg,
token.colorError,
token.colorError,
token.colorTextDisabled,
@@ -341,6 +459,7 @@ const genLinkButtonStyle: GenerateStyle = (token) => ({
token.componentCls,
{
color: token.colorLinkHover,
+ backgroundColor: token.linkHoverBg,
},
{
color: token.colorLinkActive,
@@ -372,7 +491,7 @@ const genTextButtonStyle: GenerateStyle = (token) => ({
token.componentCls,
{
color: token.colorText,
- backgroundColor: token.colorBgTextHover,
+ backgroundColor: token.textHoverBg,
},
{
color: token.colorText,
@@ -411,6 +530,7 @@ const genTypeButtonStyle: GenerateStyle = (token) => {
[`${componentCls}-text`]: genTextButtonStyle(token),
[`${componentCls}-ghost`]: genGhostButtonStyle(
token.componentCls,
+ token.ghostBg,
token.colorBgContainer,
token.colorBgContainer,
token.colorTextDisabled,
@@ -433,7 +553,6 @@ const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSS
} = token;
const paddingVertical = Math.max(0, (controlHeight - fontSize * lineHeight) / 2 - lineWidth);
- const paddingHorizontal = buttonPaddingHorizontal - lineWidth;
const iconOnlyCls = `${componentCls}-icon-only`;
@@ -443,7 +562,7 @@ const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSS
[`${componentCls}${sizePrefixCls}`]: {
fontSize,
height: controlHeight,
- padding: `${paddingVertical}px ${paddingHorizontal}px`,
+ padding: `${paddingVertical}px ${buttonPaddingHorizontal}px`,
borderRadius,
[`&${iconOnlyCls}`]: {
@@ -486,9 +605,9 @@ const genSizeSmallButtonStyle: GenerateStyle = (token) => {
const smallToken = mergeToken(token, {
controlHeight: token.controlHeightSM,
padding: token.paddingXS,
- buttonPaddingHorizontal: 8, // Fixed padding
+ buttonPaddingHorizontal: token.paddingInlineSM, // Fixed padding
borderRadius: token.borderRadiusSM,
- buttonIconOnlyFontSize: token.fontSizeLG - 2,
+ buttonIconOnlyFontSize: token.onlyIconSizeSM,
});
return genSizeButtonStyle(smallToken, `${token.componentCls}-sm`);
@@ -498,8 +617,9 @@ const genSizeLargeButtonStyle: GenerateStyle = (token) => {
const largeToken = mergeToken(token, {
controlHeight: token.controlHeightLG,
fontSize: token.fontSizeLG,
+ buttonPaddingHorizontal: token.paddingInlineLG,
borderRadius: token.borderRadiusLG,
- buttonIconOnlyFontSize: token.fontSizeLG + 2,
+ buttonIconOnlyFontSize: token.onlyIconSizeLG,
});
return genSizeButtonStyle(largeToken, `${token.componentCls}-lg`);
@@ -517,36 +637,62 @@ const genBlockButtonStyle: GenerateStyle = (token) => {
};
// ============================== Export ==============================
-export default genComponentStyleHook('Button', (token) => {
- const { controlTmpOutline, paddingContentHorizontal } = token;
-
- const buttonToken = mergeToken(token, {
- colorOutlineDefault: controlTmpOutline,
- buttonPaddingHorizontal: paddingContentHorizontal,
- buttonIconOnlyFontSize: token.fontSizeLG,
- buttonFontWeight: 400,
- });
-
- return [
- // Shared
- genSharedButtonStyle(buttonToken),
-
- // Size
- genSizeSmallButtonStyle(buttonToken),
- genSizeBaseButtonStyle(buttonToken),
- genSizeLargeButtonStyle(buttonToken),
-
- // Block
- genBlockButtonStyle(buttonToken),
-
- // Group (type, ghost, danger, loading)
- genTypeButtonStyle(buttonToken),
-
- // Button Group
- genGroupStyle(buttonToken),
-
- // Space Compact
- genCompactItemStyle(token),
- genCompactItemVerticalStyle(token),
- ];
-});
+export default genComponentStyleHook(
+ 'Button',
+ (token) => {
+ const { paddingInline, onlyIconSize } = token;
+
+ const buttonToken = mergeToken(token, {
+ buttonPaddingHorizontal: paddingInline,
+ buttonIconOnlyFontSize: onlyIconSize,
+ });
+
+ return [
+ // Shared
+ genSharedButtonStyle(buttonToken),
+
+ // Size
+ genSizeSmallButtonStyle(buttonToken),
+ genSizeBaseButtonStyle(buttonToken),
+ genSizeLargeButtonStyle(buttonToken),
+
+ // Block
+ genBlockButtonStyle(buttonToken),
+
+ // Group (type, ghost, danger, loading)
+ genTypeButtonStyle(buttonToken),
+
+ // Button Group
+ genGroupStyle(buttonToken),
+
+ // Space Compact
+ genCompactItemStyle(token),
+ genCompactItemVerticalStyle(token),
+ ];
+ },
+ (token) => ({
+ fontWeight: 400,
+ defaultShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlTmpOutline}`,
+ primaryShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlOutline}`,
+ dangerShadow: `0 ${token.controlOutlineWidth}px 0 ${token.colorErrorOutline}`,
+ primaryColor: token.colorTextLightSolid,
+ dangerColor: token.colorTextLightSolid,
+ borderColorDisabled: token.colorBorder,
+ defaultGhostColor: token.colorBgContainer,
+ ghostBg: 'transparent',
+ defaultGhostBorderColor: token.colorBgContainer,
+ paddingInline: token.paddingContentHorizontal - token.lineWidth,
+ paddingInlineLG: token.paddingContentHorizontal - token.lineWidth,
+ paddingInlineSM: 8 - token.lineWidth,
+ onlyIconSize: token.fontSizeLG,
+ onlyIconSizeSM: token.fontSizeLG - 2,
+ onlyIconSizeLG: token.fontSizeLG + 2,
+ groupBorderColor: token.colorPrimaryHover,
+ linkHoverBg: 'transparent',
+ textHoverBg: token.colorBgTextHover,
+ defaultColor: token.colorText,
+ defaultBg: token.colorBgContainer,
+ defaultBorderColor: token.colorBorder,
+ defaultBorderColorDisabled: token.colorBorder,
+ }),
+);
diff --git a/components/theme/interface/alias.ts b/components/theme/interface/alias.ts
index a08f61d008c4..159661dc999c 100644
--- a/components/theme/interface/alias.ts
+++ b/components/theme/interface/alias.ts
@@ -580,6 +580,7 @@ export interface AliasToken extends MapToken {
screenXXLMin: number;
/**
+ * @deprecated
* Used for DefaultButton, Switch which has default outline
* @desc 默认样式的 Outline 颜色
* @descEN Default style outline color.
diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md
index ec39acb61ee2..5260e528ab9e 100644
--- a/docs/react/migrate-less-variables.en-US.md
+++ b/docs/react/migrate-less-variables.en-US.md
@@ -58,7 +58,7 @@ export default App;
### Avatar
-| less 变量 | Component Token | 备注 |
+| Less variables | Component Token | Note |
| --- | --- | --- |
| `@avatar-size-base` | `containerSize` | - |
| `@avatar-size-lg` | `containerSizeLG` | - |
@@ -78,7 +78,7 @@ export default App;
### BreadCrumb
-| Less 变量 | Component Token | 备注 |
+| Less variables | Component Token | Note |
| --- | --- | --- |
| `@breadcrumb-base-color` | `itemColor` | - |
| `@breadcrumb-last-item-color` | `lastItemColor` | - |
@@ -89,7 +89,54 @@ export default App;
| `@breadcrumb-separator-color` | `separatorColor` | - |
| `@breadcrumb-separator-margin` | `separatorMargin` | - |
-
+### Button
+
+
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@btn-font-weight` | `fontWeight` | - |
+| `@btn-border-radius-base` | `borderRadius` | Global Token |
+| `@btn-border-radius-sm` | `borderRadisuSM` | Global Token |
+| `@btn-border-width` | `lineWidth` | Global Token |
+| `@btn-border-style` | `lineStyle` | Global Token |
+| `@btn-shadow` | `defaultShadow` | - |
+| `@btn-primary-shadow` | `primaryShadow` | - |
+| `@btn-text-shadow` | - | Deprecated for no `text-shadow` any more |
+| `@btn-primary-color` | `primaryColor` | - |
+| `@btn-primary-bg` | `colorPrimary` | Global Token |
+| `@btn-default-color` | `colorText` | Global Token |
+| `@btn-default-bg` | `colorBgContainer` | Global Token |
+| `@btn-default-border` | `colorBorder` | Global Token |
+| `@btn-danger-color` | `dangerColor` | - |
+| `@btn-danger-bg` | `colorError` | Global Token |
+| `@btn-danger-border` | `colorError` | Global Token |
+| `@btn-disable-color` | `colorTextDisabled` | Global Token |
+| `@btn-disable-bg` | `colorBgContainerDisabled` | Global Token |
+| `@btn-disable-border` | `borderColorDisabled` | - |
+| `@btn-default-ghost-color` | `defaultGhostColor` | - |
+| `@btn-default-ghost-bg` | `ghostBg` | - |
+| `@btn-default-ghost-border` | `defaultGhostBorderColor` | - |
+| `@btn-font-size-lg` | `fontSizeLG` | Global Token |
+| `@btn-font-size-sm` | `fontSizeSM` | Global Token |
+| `@btn-padding-horizontal-base` | `paddingInline` | - |
+| `@btn-padding-horizontal-lg` | `paddingInlineLG` | - |
+| `@btn-padding-horizontal-sm` | `paddingInlineSM` | - |
+| `@btn-height-base` | `controlHeight` | Global Token |
+| `@btn-height-lg` | `controlHeightLG` | Global Token |
+| `@btn-height-sm` | `controlHeightSM` | Global Token |
+| `@btn-line-height` | `lineHeight` | Global Token |
+| `@btn-circle-size` | `controlHeight` | Global Token |
+| `@btn-circle-size-lg` | `controlHeightLG` | Global Token |
+| `@btn-circle-size-sm` | `controlHeightSM` | Global Token |
+| `@btn-square-size` | `controlHeight` | Global Token |
+| `@btn-square-size-lg` | `controlHeightLG` | Global Token |
+| `@btn-square-size-sm` | `controlHeightSM` | Global Token |
+| `@btn-square-only-icon-size` | `onlyIconSize` | - |
+| `@btn-square-only-icon-size-sm` | `onlyIconSizeSM` | - |
+| `@btn-square-only-icon-size-lg` | `onlyIconSizeLG` | - |
+| `@btn-group-border` | `groupBorderColor` | - |
+| `@btn-link-hover-bg` | `linkHoverBg` | - |
+| `@btn-text-hover-bg` | `textHoverBg` | - |
### Calendar
@@ -434,7 +481,7 @@ export default App;
### Slider
-| Less 变量 | Component Token | 备注 |
+| Less variables | Component Token | Note |
| --- | --- | --- |
| `@slider-margin` | - | Could be customized with `className` or `style` |
| `@slider-rail-background-color` | `railBg` | - |
diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md
index 0aee516140ae..92d37eeefc1d 100644
--- a/docs/react/migrate-less-variables.zh-CN.md
+++ b/docs/react/migrate-less-variables.zh-CN.md
@@ -89,7 +89,54 @@ export default App;
| `@breadcrumb-separator-color` | `separatorColor` | - |
| `@breadcrumb-separator-margin` | `separatorMargin` | - |
-
+### Button 按钮
+
+
+| Less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@btn-font-weight` | `fontWeight` | - |
+| `@btn-border-radius-base` | `borderRadius` | 全局 Token |
+| `@btn-border-radius-sm` | `borderRadisuSM` | 全局 Token |
+| `@btn-border-width` | `lineWidth` | 全局 Token |
+| `@btn-border-style` | `lineStyle` | 全局 Token |
+| `@btn-shadow` | `defaultShadow` | - |
+| `@btn-primary-shadow` | `primaryShadow` | - |
+| `@btn-text-shadow` | - | 已废弃，v5 中不再有 `text-shadow` |
+| `@btn-primary-color` | `primaryColor` | - |
+| `@btn-primary-bg` | `colorPrimary` | 全局 Token |
+| `@btn-default-color` | `defaultColor` | - |
+| `@btn-default-bg` | `defaultBg` | - |
+| `@btn-default-border` | `defaultBorderColor` | - |
+| `@btn-danger-color` | `dangerColor` | - |
+| `@btn-danger-bg` | `colorError` | 全局 Token |
+| `@btn-danger-border` | `colorError` | 全局 Token |
+| `@btn-disable-color` | `colorTextDisabled` | 全局 Token |
+| `@btn-disable-bg` | `colorBgContainerDisabled` | 全局 Token |
+| `@btn-disable-border` | `borderColorDisabled` | - |
+| `@btn-default-ghost-color` | `defaultGhostColor` | - |
+| `@btn-default-ghost-bg` | `ghostBg` | - |
+| `@btn-default-ghost-border` | `defaultGhostBorderColor` | - |
+| `@btn-font-size-lg` | `fontSizeLG` | 全局 Token |
+| `@btn-font-size-sm` | `fontSizeSM` | 全局 Token |
+| `@btn-padding-horizontal-base` | `paddingInline` | - |
+| `@btn-padding-horizontal-lg` | `paddingInlineLG` | - |
+| `@btn-padding-horizontal-sm` | `paddingInlineSM` | - |
+| `@btn-height-base` | `controlHeight` | 全局 Token |
+| `@btn-height-lg` | `controlHeightLG` | 全局 Token |
+| `@btn-height-sm` | `controlHeightSM` | 全局 Token |
+| `@btn-line-height` | `lineHeight` | 全局 Token |
+| `@btn-circle-size` | `controlHeight` | 全局 Token |
+| `@btn-circle-size-lg` | `controlHeightLG` | 全局 Token |
+| `@btn-circle-size-sm` | `controlHeightSM` | 全局 Token |
+| `@btn-square-size` | `controlHeight` | 全局 Token |
+| `@btn-square-size-lg` | `controlHeightLG` | 全局 Token |
+| `@btn-square-size-sm` | `controlHeightSM` | 全局 Token |
+| `@btn-square-only-icon-size` | `onlyIconSize` | - |
+| `@btn-square-only-icon-size-sm` | `onlyIconSizeSM` | - |
+| `@btn-square-only-icon-size-lg` | `onlyIconSizeLG` | - |
+| `@btn-group-border` | `groupBorderColor` | - |
+| `@btn-link-hover-bg` | `linkHoverBg` | - |
+| `@btn-text-hover-bg` | `textHoverBg` | - |
### Calendar 日历