(
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
diff --git a/components/badge/index.en-US.md b/components/badge/index.en-US.md
index 253195ffb89b..13e5e401bbc2 100644
--- a/components/badge/index.en-US.md
+++ b/components/badge/index.en-US.md
@@ -32,6 +32,7 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca
Mixed usage
Title
Colorful Badge support count Debug
+
Component Token
## API
diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md
index 83640d7aa28a..bd1866bf75f3 100644
--- a/components/badge/index.zh-CN.md
+++ b/components/badge/index.zh-CN.md
@@ -33,6 +33,7 @@ group: 数据展示
各种混用的情况
自定义标题
多彩徽标支持 count 显示 Debug
+
组件 Token
## API
diff --git a/components/badge/style/index.ts b/components/badge/style/index.ts
index 44b0cbdf18c2..9ed0afaef9d3 100644
--- a/components/badge/style/index.ts
+++ b/components/badge/style/index.ts
@@ -4,19 +4,56 @@ import { resetComponent } from '../../style';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, genPresetColor, mergeToken } from '../../theme/internal';
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {
+ // Component token here
+ /**
+ * @desc 徽标 z-index
+ * @descEN z-index of badge
+ */
+ indicatorZIndex: number | string;
+ /**
+ * @desc 徽标高度
+ * @descEN Height of badge
+ */
+ indicatorHeight: number;
+ /**
+ * @desc 小号徽标高度
+ * @descEN Height of small badge
+ */
+ indicatorHeightSM: number;
+ /**
+ * @desc 点状徽标尺寸
+ * @descEN Size of dot badge
+ */
+ dotSize: number;
+ /**
+ * @desc 徽标文本尺寸
+ * @descEN Font size of badge text
+ */
+ textFontSize: number;
+ /**
+ * @desc 小号徽标文本尺寸
+ * @descEN Font size of small badge text
+ */
+ textFontSizeSM: number;
+ /**
+ * @desc 徽标文本粗细
+ * @descEN Font weight of badge text
+ */
+ textFontWeight: number | string;
+ /**
+ * @desc 状态徽标尺寸
+ * @descEN Size of status badge
+ */
+ statusSize: number;
+}
+
interface BadgeToken extends FullToken<'Badge'> {
badgeFontHeight: number;
- badgeZIndex: number | string;
- badgeHeight: number;
- badgeHeightSm: number;
badgeTextColor: string;
- badgeFontWeight: string;
- badgeFontSize: number;
badgeColor: string;
badgeColorHover: string;
- badgeDotSize: number;
- badgeFontSizeSm: number;
- badgeStatusSize: number;
badgeShadowSize: number;
badgeShadowColor: string;
badgeProcessingDuration: string;
@@ -63,9 +100,14 @@ const genSharedBadgeStyle: GenerateStyle
= (token: BadgeToken): CSSO
antCls,
badgeFontHeight,
badgeShadowSize,
- badgeHeightSm,
motionDurationSlow,
- badgeStatusSize,
+ textFontSize,
+ textFontSizeSM,
+ statusSize,
+ dotSize,
+ textFontWeight,
+ indicatorHeight,
+ indicatorHeightSM,
marginXS,
badgeRibbonOffset,
} = token;
@@ -98,17 +140,17 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO
lineHeight: 1,
[`${componentCls}-count`]: {
- zIndex: token.badgeZIndex,
- minWidth: token.badgeHeight,
- height: token.badgeHeight,
+ zIndex: token.indicatorZIndex,
+ minWidth: indicatorHeight,
+ height: indicatorHeight,
color: token.badgeTextColor,
- fontWeight: token.badgeFontWeight,
- fontSize: token.badgeFontSize,
- lineHeight: `${token.badgeHeight}px`,
+ fontWeight: textFontWeight,
+ fontSize: textFontSize,
+ lineHeight: `${indicatorHeight}px`,
whiteSpace: 'nowrap',
textAlign: 'center',
background: token.badgeColor,
- borderRadius: token.badgeHeight / 2,
+ borderRadius: indicatorHeight / 2,
boxShadow: `0 0 0 ${badgeShadowSize}px ${token.badgeShadowColor}`,
transition: `background ${token.motionDurationMid}`,
@@ -124,11 +166,11 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO
},
},
[`${componentCls}-count-sm`]: {
- minWidth: badgeHeightSm,
- height: badgeHeightSm,
- fontSize: token.badgeFontSizeSm,
- lineHeight: `${badgeHeightSm}px`,
- borderRadius: badgeHeightSm / 2,
+ minWidth: indicatorHeightSM,
+ height: indicatorHeightSM,
+ fontSize: textFontSizeSM,
+ lineHeight: `${indicatorHeightSM}px`,
+ borderRadius: indicatorHeightSM / 2,
},
[`${componentCls}-multiple-words`]: {
@@ -136,10 +178,10 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO
},
[`${componentCls}-dot`]: {
- zIndex: token.badgeZIndex,
- width: token.badgeDotSize,
- minWidth: token.badgeDotSize,
- height: token.badgeDotSize,
+ zIndex: token.indicatorZIndex,
+ width: dotSize,
+ minWidth: dotSize,
+ height: dotSize,
background: token.badgeColor,
borderRadius: '100%',
boxShadow: `0 0 0 ${badgeShadowSize}px ${token.badgeShadowColor}`,
@@ -168,8 +210,8 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO
position: 'relative',
top: -1, // Magic number, but seems better experience
display: 'inline-block',
- width: badgeStatusSize,
- height: badgeStatusSize,
+ width: statusSize,
+ height: statusSize,
verticalAlign: 'middle',
borderRadius: '50%',
},
@@ -259,12 +301,12 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO
[`${numberPrefixCls}-only`]: {
position: 'relative',
display: 'inline-block',
- height: token.badgeHeight,
+ height: indicatorHeight,
transition: `all ${token.motionDurationSlow} ${token.motionEaseOutBack}`,
WebkitTransformStyle: 'preserve-3d',
WebkitBackfaceVisibility: 'hidden',
[`> p${numberPrefixCls}-only-unit`]: {
- height: token.badgeHeight,
+ height: indicatorHeight,
margin: 0,
WebkitTransformStyle: 'preserve-3d',
WebkitBackfaceVisibility: 'hidden',
@@ -334,45 +376,46 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO
};
// ============================== Export ==============================
-export default genComponentStyleHook('Badge', (token) => {
- const { fontSize, lineHeight, fontSizeSM, lineWidth, marginXS, colorBorderBg } = token;
+export default genComponentStyleHook(
+ 'Badge',
+ (token) => {
+ const { fontSize, lineHeight, lineWidth, marginXS, colorBorderBg } = token;
- const badgeFontHeight = Math.round(fontSize * lineHeight);
- const badgeShadowSize = lineWidth;
- const badgeZIndex = 'auto';
- const badgeHeight = badgeFontHeight - 2 * badgeShadowSize;
- const badgeTextColor = token.colorBgContainer;
- const badgeFontWeight = 'normal';
- const badgeFontSize = fontSizeSM;
- const badgeColor = token.colorError;
- const badgeColorHover = token.colorErrorHover;
- const badgeHeightSm = fontSize;
- const badgeDotSize = fontSizeSM / 2;
- const badgeFontSizeSm = fontSizeSM;
- const badgeStatusSize = fontSizeSM / 2;
+ const badgeFontHeight = Math.round(fontSize * lineHeight);
+ const badgeShadowSize = lineWidth;
+ const badgeTextColor = token.colorBgContainer;
+ const badgeColor = token.colorError;
+ const badgeColorHover = token.colorErrorHover;
- const badgeToken = mergeToken(token, {
- badgeFontHeight,
- badgeShadowSize,
- badgeZIndex,
- badgeHeight,
- badgeTextColor,
- badgeFontWeight,
- badgeFontSize,
- badgeColor,
- badgeColorHover,
- badgeShadowColor: colorBorderBg,
- badgeHeightSm,
- badgeDotSize,
- badgeFontSizeSm,
- badgeStatusSize,
- badgeProcessingDuration: '1.2s',
- badgeRibbonOffset: marginXS,
+ const badgeToken = mergeToken(token, {
+ badgeFontHeight,
+ badgeShadowSize,
+ badgeTextColor,
+ badgeColor,
+ badgeColorHover,
+ badgeShadowColor: colorBorderBg,
+ badgeProcessingDuration: '1.2s',
+ badgeRibbonOffset: marginXS,
- // Follow token just by Design. Not related with token
- badgeRibbonCornerTransform: 'scaleY(0.75)',
- badgeRibbonCornerFilter: `brightness(75%)`,
- });
+ // Follow token just by Design. Not related with token
+ badgeRibbonCornerTransform: 'scaleY(0.75)',
+ badgeRibbonCornerFilter: `brightness(75%)`,
+ });
- return [genSharedBadgeStyle(badgeToken)];
-});
+ return [genSharedBadgeStyle(badgeToken)];
+ },
+ (token) => {
+ const { fontSize, lineHeight, fontSizeSM, lineWidth } = token;
+
+ return {
+ indicatorZIndex: 'auto',
+ indicatorHeight: Math.round(fontSize * lineHeight) - 2 * lineWidth,
+ indicatorHeightSM: fontSize,
+ dotSize: fontSizeSM / 2,
+ textFontSize: fontSizeSM,
+ textFontSizeSM: fontSizeSM,
+ textFontWeight: 'normal',
+ statusSize: fontSizeSM / 2,
+ };
+ },
+);
diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts
index 8ae0623864f0..94904fc3ddef 100644
--- 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 BadgeComponentToken } from '../../badge/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';
@@ -61,7 +62,7 @@ export interface ComponentTokenMap {
Anchor?: AnchorComponentToken;
Avatar?: AvatarComponentToken;
BackTop?: BackTopComponentToken;
- Badge?: {};
+ Badge?: BadgeComponentToken;
Button?: ButtonComponentToken;
Breadcrumb?: BreadcrumbComponentToken;
Card?: CardComponentToken;
diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md
index 22c1901e0516..2abe7ca35c67 100644
--- a/docs/react/migrate-less-variables.en-US.md
+++ b/docs/react/migrate-less-variables.en-US.md
@@ -14,8 +14,8 @@ This document contains the correspondence between all the less variables related
We could configure global token and component token for each component through the `theme` property of ConfigProvider.
```tsx
-import React from 'react';
import { Checkbox, ConfigProvider, Radio } from 'antd';
+import React from 'react';
const App: React.FC = () => (
+### Badge
+
+
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@zindex-badge` | `indicatorZIndex` | - |
+| `@badge-height` | `indicatorHeight` | - |
+| `@badge-height-sm` | `indicatorHeightSM` | - |
+| `@badge-dot-size` | `dotSize` | - |
+| `@badge-font-size` | `textFontSize` | - |
+| `@badge-font-size-sm` | `textFontSizeSM` | - |
+| `@badge-font-weight` | `textFontWeight` | - |
+| `@badge-status-size` | `statusSize` | - |
+| `@badge-text-color` | `colorBgContainer` | Global Token |
+| `@badge-color` | `colorError` | Global Token |
### BreadCrumb
diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md
index 2d16cdea7bb9..79f41d62240c 100644
--- a/docs/react/migrate-less-variables.zh-CN.md
+++ b/docs/react/migrate-less-variables.zh-CN.md
@@ -14,8 +14,8 @@ title: 从 Less 变量到 Design Token
通过 ConfigProvider 的 `theme` 属性，我们可以对每一个组件单独配置全局 Token 和组件 Token
```tsx
-import React from 'react';
import { Checkbox, ConfigProvider, Radio } from 'antd';
+import React from 'react';
const App: React.FC = () => (
+### Badge 徽标数
+
+
+| less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@zindex-badge` | `indicatorZIndex` | - |
+| `@badge-height` | `indicatorHeight` | - |
+| `@badge-height-sm` | `indicatorHeightSM` | - |
+| `@badge-dot-size` | `dotSize` | - |
+| `@badge-font-size` | `textFontSize` | - |
+| `@badge-font-size-sm` | `textFontSizeSM` | - |
+| `@badge-font-weight` | `textFontWeight` | - |
+| `@badge-status-size` | `statusSize` | - |
+| `@badge-text-color` | `colorBgContainer` | 全局 Token |
+| `@badge-color` | `colorError` | 全局 Token |
### BreadCrumb 面包屑