feat: migrate less to token for Skeleton

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

@@ -111,6 +111,30 @@ exports[`renders components/skeleton/demo/complex.tsx extend context correctly 1
 </div>
 `;
 
+exports[`renders components/skeleton/demo/componentToken.tsx extend context correctly 1`] = `
+<div
+  class="ant-skeleton ant-skeleton-active"
+>
+  <div
+    class="ant-skeleton-content"
+  >
+    <h3
+      class="ant-skeleton-title"
+      style="width: 38%;"
+    />
+    <ul
+      class="ant-skeleton-paragraph"
+    >
+      <li />
+      <li />
+      <li
+        style="width: 61%;"
+      />
+    </ul>
+  </div>
+</div>
+`;
+
 exports[`renders components/skeleton/demo/element.tsx extend context correctly 1`] = `
 Array [
   <div

components/skeleton/__tests__/__snapshots__/demo.test.tsx.snap

@@ -111,6 +111,30 @@ exports[`renders components/skeleton/demo/complex.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/skeleton/demo/componentToken.tsx correctly 1`] = `
+<div
+  class="ant-skeleton ant-skeleton-active"
+>
+  <div
+    class="ant-skeleton-content"
+  >
+    <h3
+      class="ant-skeleton-title"
+      style="width:38%"
+    />
+    <ul
+      class="ant-skeleton-paragraph"
+    >
+      <li />
+      <li />
+      <li
+        style="width:61%"
+      />
+    </ul>
+  </div>
+</div>
+`;
+
 exports[`renders components/skeleton/demo/element.tsx correctly 1`] = `
 Array [
   <div

components/skeleton/demo/componentToken.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+自定义组件 Token。
+
+## en-US
+
+Custom component token.

components/skeleton/demo/componentToken.tsx

@@ -0,0 +1,23 @@
+import { ConfigProvider, Skeleton } from 'antd';
+import React from 'react';
+
+const App: React.FC = () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Skeleton: {
+          blockRadius: 30,
+          titleHeight: 30,
+          gradientFromColor: '#222',
+          gradientToColor: '#444',
+          paragraphMarginTop: 30,
+          paragraphLiHeight: 30,
+        },
+      },
+    }}
+  >
+    <Skeleton loading active />
+  </ConfigProvider>
+);
+
+export default App;

components/skeleton/index.en-US.md

@@ -24,6 +24,7 @@ Provide a placeholder while you wait for content to load, or to visualize conten
 <code src="./demo/element.tsx">Button/Avatar/Input/Image/Node</code>
 <code src="./demo/children.tsx">Contains sub component</code>
 <code src="./demo/list.tsx">List</code>
+<code src="./demo/componentToken.tsx" debug>Custom component token</code>
 
 ## API
 

components/skeleton/index.zh-CN.md

@@ -25,6 +25,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VcjGQLSrYdcAAA
 <code src="./demo/element.tsx">按钮/头像/输入框/图像/自定义节点</code>
 <code src="./demo/children.tsx">包含子组件</code>
 <code src="./demo/list.tsx">列表</code>
+<code src="./demo/componentToken.tsx" debug>自定义组件 Token</code>
 
 ## API
 

components/skeleton/style/index.tsx

@@ -4,8 +4,16 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export type ComponentToken = {
+  /** @deprecated use gradientFromColor instead. */
   color: string;
+  /** @deprecated use gradientToColor instead. */
   colorGradientEnd: string;
+  gradientFromColor: string;
+  gradientToColor: string;
+  titleHeight: number;
+  blockRadius: number;
+  paragraphMarginTop: number;
+  paragraphLiHeight: number;
 };
 
 const skeletonClsLoading = new Keyframes(`ant-skeleton-loading`, {
@@ -25,10 +33,6 @@ interface SkeletonToken extends FullToken<'Skeleton'> {
   skeletonInputCls: string;
   skeletonImageCls: string;
   imageSizeBase: number;
-  skeletonTitleHeight: number;
-  skeletonBlockRadius: number;
-  skeletonParagraphLineHeight: number;
-  skeletonParagraphMarginTop: number;
   skeletonLoadingBackground: string;
   skeletonLoadingMotionDuration: string;
   borderRadius: number;
@@ -215,11 +219,11 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
     padding,
     marginSM,
     borderRadius,
-    skeletonTitleHeight,
-    skeletonBlockRadius,
-    skeletonParagraphLineHeight,
+    titleHeight,
+    blockRadius,
+    paragraphLiHeight,
     controlHeightXS,
-    skeletonParagraphMarginTop,
+    paragraphMarginTop,
   } = token;
 
   return {
@@ -257,9 +261,9 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
         // Title
         [`${skeletonTitleCls}`]: {
           width: '100%',
-          height: skeletonTitleHeight,
+          height: titleHeight,
           background: color,
-          borderRadius: skeletonBlockRadius,
+          borderRadius: blockRadius,
           [`+ ${skeletonParagraphCls}`]: {
             marginBlockStart: controlHeightSM,
           },
@@ -270,10 +274,10 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
           padding: 0,
           '> li': {
             width: '100%',
-            height: skeletonParagraphLineHeight,
+            height: paragraphLiHeight,
             listStyle: 'none',
             background: color,
-            borderRadius: skeletonBlockRadius,
+            borderRadius: blockRadius,
             '+ li': {
               marginBlockStart: controlHeightXS,
             },
@@ -297,7 +301,7 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
         marginBlockStart: marginSM,
 
         [`+ ${skeletonParagraphCls}`]: {
-          marginBlockStart: skeletonParagraphMarginTop,
+          marginBlockStart: paragraphMarginTop,
         },
       },
     },
@@ -353,10 +357,6 @@ export default genComponentStyleHook(
       skeletonInputCls: `${componentCls}-input`,
       skeletonImageCls: `${componentCls}-image`,
       imageSizeBase: token.controlHeight * 1.5,
-      skeletonTitleHeight: token.controlHeight / 2,
-      skeletonBlockRadius: token.borderRadiusSM,
-      skeletonParagraphLineHeight: token.controlHeight / 2,
-      skeletonParagraphMarginTop: token.marginLG + token.marginXXS,
       borderRadius: 100, // Large number to make capsule shape
       skeletonLoadingBackground: `linear-gradient(90deg, ${token.color} 25%, ${token.colorGradientEnd} 37%, ${token.color} 63%)`,
       skeletonLoadingMotionDuration: '1.4s',
@@ -365,10 +365,15 @@ export default genComponentStyleHook(
   },
   (token) => {
     const { colorFillContent, colorFill } = token;
-
     return {
       color: colorFillContent,
       colorGradientEnd: colorFill,
+      gradientFromColor: colorFillContent,
+      gradientToColor: colorFill,
+      titleHeight: token.controlHeight / 2,
+      blockRadius: token.borderRadiusSM,
+      paragraphMarginTop: token.marginLG + token.marginXXS,
+      paragraphLiHeight: token.controlHeight / 2,
     };
   },
 );

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

@@ -154,7 +154,18 @@ This document contains the correspondence between all the less variables related
 
 <!-- ### Select -->
 
-<!-- ### Skeleton -->
+### Skeleton
+
+<!-- prettier-ignore -->
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@skeleton-block-radius` | `blockRadius` | - |
+| `@skeleton-title-height` | `titleHeight` | - |
+| `@skeleton-color` | `gradientFromColor` | - |
+| `@skeleton-to-color` | `gradientToColor` | - |
+| `@skeleton-paragraph-margin-top` | `paragraphMarginTop` | - |
+| `@skeleton-paragraph-li-height` | `paragraphLiHeight` | - |
+| `@skeleton-paragraph-li-margin-top` | - | 由于样式变化已废弃 |
 
 <!-- ### Slider -->
 

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

@@ -154,7 +154,18 @@ title: Less 变量迁移 Design Token
 
 <!-- ### Select 选择器 -->
 
-<!-- ### Skeleton 骨架屏 -->
+### Skeleton 骨架屏
+
+<!-- prettier-ignore -->
+| Less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@skeleton-block-radius` | `blockRadius` | - |
+| `@skeleton-title-height` | `titleHeight` | - |
+| `@skeleton-color` | `gradientFromColor` | - |
+| `@skeleton-to-color` | `gradientToColor` | - |
+| `@skeleton-paragraph-margin-top` | `paragraphMarginTop` | - |
+| `@skeleton-paragraph-li-height` | `paragraphLiHeight` | - |
+| `@skeleton-paragraph-li-margin-top` | - | 由于样式变化已废弃 |
 
 <!-- ### Slider 滑动输入条 -->