refactor: full token (#35834)

components/_util/theme/interface.ts

@@ -24,6 +24,7 @@ import type { ComponentToken as NotificationComponentToken } from '../../notific
 import type { ComponentToken as PopconfirmComponentToken } from '../../popconfirm/style';
 import type { ComponentToken as PopoverComponentToken } from '../../popover/style';
 import type { ComponentToken as ProgressComponentToken } from '../../progress/style';
+import type { ComponentToken as ResultComponentToken } from '../../result/style';
 import type { ComponentToken as SegmentedComponentToken } from '../../segmented/style';
 import type { ComponentToken as SelectComponentToken } from '../../select/style';
 import type { ComponentToken as SliderComponentToken } from '../../slider/style';
@@ -94,7 +95,7 @@ export interface OverrideToken {
   Popover?: PopoverComponentToken;
   Popconfirm?: PopconfirmComponentToken;
   Rate?: {};
-  Result?: {};
+  Result?: ResultComponentToken;
   Segmented?: SegmentedComponentToken;
   Select?: SelectComponentToken;
   Skeleton?: {};

components/result/style/index.tsx

@@ -3,6 +3,11 @@ import type { CSSObject } from '@ant-design/cssinjs';
 import type { GenerateStyle, FullToken } from '../../_util/theme';
 import { genComponentStyleHook, mergeToken } from '../../_util/theme';
 
+export interface ComponentToken {
+  imageWidth: number;
+  imageHeight: number;
+}
+
 interface ResultToken extends FullToken<'Result'> {
   resultTitleFontSize: number;
   resultSubtitleFontSize: number;
@@ -18,12 +23,22 @@ interface ResultToken extends FullToken<'Result'> {
 
 // ============================== Styles ==============================
 const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
-  const { componentCls, iconCls } = token;
+  const {
+    componentCls,
+    lineHeightHeading3,
+    iconCls,
+    padding,
+    paddingXL,
+    paddingXS,
+    paddingLG,
+    marginXS,
+    lineHeight,
+  } = token;
 
   return {
     // Result
     [componentCls]: {
-      padding: `${token.padding * 3}px ${token.padding * 2}px`,
+      padding: `${paddingLG * 2}px ${paddingXL}px`,
 
       // RTL
       '&-rtl': {
@@ -33,14 +48,13 @@ const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
 
     // Exception Status image
     [`${componentCls} ${componentCls}-image`]: {
-      // FIXME: hard code
+      width: token.imageWidth,
-      width: 250,
+      height: token.imageHeight,
-      height: 295,
       margin: 'auto',
     },
 
     [`${componentCls} ${componentCls}-icon`]: {
-      marginBottom: token.padding * 1.5,
+      marginBottom: paddingLG,
       textAlign: 'center',
 
       [`& > ${iconCls}`]: {
@@ -51,22 +65,21 @@ const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
     [`${componentCls} ${componentCls}-title`]: {
       color: token.colorTextHeading,
       fontSize: token.resultTitleFontSize,
-      // FIXME: hard code
+      lineHeight: lineHeightHeading3,
-      lineHeight: 1.8,
+      marginBlock: marginXS,
       textAlign: 'center',
     },
 
     [`${componentCls} ${componentCls}-subtitle`]: {
       color: token.colorTextSecondary,
       fontSize: token.resultSubtitleFontSize,
-      // FIXME: hard code
+      lineHeight,
-      lineHeight: 1.6,
       textAlign: 'center',
     },
 
     [`${componentCls} ${componentCls}-content`]: {
-      marginTop: token.padding * 1.5,
+      marginTop: paddingLG,
-      padding: `${token.padding * 1.5}px ${token.padding * 2.5}px`,
+      padding: `${paddingLG}px ${padding * 2.5}px`,
       backgroundColor: token.colorBgComponentSecondary,
     },
 
@@ -75,7 +88,7 @@ const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
       textAlign: 'center',
 
       '& > *': {
-        marginInlineEnd: token.paddingXS,
+        marginInlineEnd: paddingXS,
 
         '&:last-child': {
           marginInlineEnd: 0,
@@ -112,31 +125,34 @@ const genResultStyle: GenerateStyle<ResultToken> = token => [
 // ============================== Export ==============================
 const getStyle: GenerateStyle<ResultToken> = token => genResultStyle(token);
 
-export default genComponentStyleHook('Result', token => {
+export default genComponentStyleHook(
-  // compact 20
+  'Result',
-  // FIXME: maybe we need a new token for fontSize 12px
+  token => {
-  const resultTitleFontSize = 24;
+    const { paddingLG, fontSizeHeading3 } = token;
-  const resultSubtitleFontSize = token.fontSize;
-  // compact 64
-  // FIXME: maybe we need a new token for fontSize 12px
-  const resultIconFontSize = 72;
-  const resultExtraMargin = `${token.padding * 1.5}px 0 0 0`;
 
-  const resultInfoIconColor = token.colorInfo;
+    const resultSubtitleFontSize = token.fontSize;
-  const resultErrorIconColor = token.colorError;
+    const resultExtraMargin = `${paddingLG}px 0 0 0`;
-  const resultSuccessIconColor = token.colorSuccess;
-  const resultWarningIconColor = token.colorWarning;
 
-  const resultToken = mergeToken<ResultToken>(token, {
+    const resultInfoIconColor = token.colorInfo;
-    resultTitleFontSize,
+    const resultErrorIconColor = token.colorError;
-    resultSubtitleFontSize,
+    const resultSuccessIconColor = token.colorSuccess;
-    resultIconFontSize,
+    const resultWarningIconColor = token.colorWarning;
-    resultExtraMargin,
-    resultInfoIconColor,
-    resultErrorIconColor,
-    resultSuccessIconColor,
-    resultWarningIconColor,
-  });
 
-  return [getStyle(resultToken)];
+    const resultToken = mergeToken<ResultToken>(token, {
-});
+      resultTitleFontSize: fontSizeHeading3,
+      resultSubtitleFontSize,
+      resultIconFontSize: fontSizeHeading3 * 3,
+      resultExtraMargin,
+      resultInfoIconColor,
+      resultErrorIconColor,
+      resultSuccessIconColor,
+      resultWarningIconColor,
+    });
+
+    return [getStyle(resultToken)];
+  },
+  {
+    imageWidth: 250,
+    imageHeight: 295,
+  },
+);