diff --git a/components/rate/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/rate/__tests__/__snapshots__/demo-extend.test.ts.snap
index 4f0d263bc4..813dec9283 100644
--- a/components/rate/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/rate/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1861,6 +1861,305 @@ Array [
]
`;
+exports[`renders components/rate/demo/component-token.tsx extend context correctly 1`] = `
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+
+`;
+
exports[`renders components/rate/demo/disabled.tsx extend context correctly 1`] = `
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+
+`;
+
exports[`renders components/rate/demo/disabled.tsx correctly 1`] = `
(
+
+
+
+);
diff --git a/components/rate/index.en-US.md b/components/rate/index.en-US.md
index aa492f6a76..ff171e608d 100644
--- a/components/rate/index.en-US.md
+++ b/components/rate/index.en-US.md
@@ -25,6 +25,7 @@ Rate component.
Clear star
Other Character
Customize character
+Component Token
## API
diff --git a/components/rate/index.zh-CN.md b/components/rate/index.zh-CN.md
index 2912314790..577bcb8bea 100644
--- a/components/rate/index.zh-CN.md
+++ b/components/rate/index.zh-CN.md
@@ -26,6 +26,7 @@ demo:
清除
其他字符
自定义字符
+组件 Token
## API
diff --git a/components/rate/style/index.tsx b/components/rate/style/index.tsx
index 507f6cc050..7fd439ed24 100644
--- a/components/rate/style/index.tsx
+++ b/components/rate/style/index.tsx
@@ -1,16 +1,16 @@
import type { CSSObject } from '@ant-design/cssinjs';
+import { resetComponent } from '../../style';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
-import { resetComponent } from '../../style';
-export type ComponentToken = {};
+export type ComponentToken = {
+ starColor: string;
+ starSize: number;
+ starHoverScale: CSSObject['transform'];
+ starBg: string;
+};
-interface RateToken extends FullToken<'Rate'> {
- rateStarColor: string;
- rateStarSize: number;
- rateStarHoverScale: CSSObject['transform'];
- defaultColor: string;
-}
+interface RateToken extends FullToken<'Rate'> {}
const genRateStarStyle: GenerateStyle = (token) => {
const { componentCls } = token;
@@ -30,7 +30,7 @@ const genRateStarStyle: GenerateStyle = (token) => {
transition: `all ${token.motionDurationMid}, outline 0s`,
'&:hover': {
- transform: token.rateStarHoverScale,
+ transform: token.starHoverScale,
},
'&:focus': {
@@ -38,13 +38,13 @@ const genRateStarStyle: GenerateStyle = (token) => {
},
'&:focus-visible': {
- outline: `${token.lineWidth}px dashed ${token.rateStarColor}`,
- transform: token.rateStarHoverScale,
+ outline: `${token.lineWidth}px dashed ${token.starColor}`,
+ transform: token.starHoverScale,
},
},
'&-first, &-second': {
- color: token.defaultColor,
+ color: token.starBg,
transition: `all ${token.motionDurationMid}`,
userSelect: 'none',
@@ -90,8 +90,8 @@ const genRateStyle: GenerateStyle = (token) => {
display: 'inline-block',
margin: 0,
padding: 0,
- color: token.rateStarColor,
- fontSize: token.rateStarSize,
+ color: token.starColor,
+ fontSize: token.starSize,
lineHeight: 'unset',
listStyle: 'none',
outline: 'none',
@@ -122,14 +122,16 @@ const genRateStyle: GenerateStyle = (token) => {
};
// ============================== Export ==============================
-export default genComponentStyleHook('Rate', (token) => {
- const { colorFillContent } = token;
-
- const rateToken = mergeToken(token, {
- rateStarColor: token.yellow6,
- rateStarSize: token.controlHeightLG * 0.5,
- rateStarHoverScale: 'scale(1.1)',
- defaultColor: colorFillContent,
- });
- return [genRateStyle(rateToken)];
-});
+export default genComponentStyleHook(
+ 'Rate',
+ (token) => {
+ const rateToken = mergeToken(token, {});
+ return [genRateStyle(rateToken)];
+ },
+ (token) => ({
+ starColor: token.yellow6,
+ starSize: token.controlHeightLG * 0.5,
+ starHoverScale: 'scale(1.1)',
+ starBg: token.colorFillContent,
+ }),
+);
diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md
index bba642d33b..2c6a74464f 100644
--- a/docs/react/migrate-less-variables.en-US.md
+++ b/docs/react/migrate-less-variables.en-US.md
@@ -138,7 +138,15 @@ This document contains the correspondence between all the less variables related
-
+## Rate
+
+
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@rate-star-color` | `starColor` | - |
+| `@rate-star-bg` | `starBg` | - |
+| `@rate-star-size` | `starSize` | - |
+| `@rate-star-hover-scale` | `starHoverScale` | - |
### Result
diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md
index 3df51e499a..c787f35ab3 100644
--- a/docs/react/migrate-less-variables.zh-CN.md
+++ b/docs/react/migrate-less-variables.zh-CN.md
@@ -138,7 +138,15 @@ title: Less 变量迁移 Design Token
-
+## Rate 评分
+
+
+| less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@rate-star-color` | `starColor` | - |
+| `@rate-star-bg` | `starBg` | - |
+| `@rate-star-size` | `starSize` | - |
+| `@rate-star-hover-scale` | `starHoverScale` | - |
### Result 结果