feat: token wireframe (#37507)

* feat: wireframe token

* feat: token wireframe

* feat: wireframe steps

* feat: wireframe table

* feat: wireframe modal

* feat: wireframe popover

* chore: update token collect

components/modal/style/index.tsx

@@ -336,6 +336,55 @@ const genRTLStyle: GenerateStyle<ModalToken> = token => {
   };
 };
 
+const genWireframeStyle: GenerateStyle<ModalToken> = token => {
+  const { componentCls, antCls } = token;
+  const confirmComponentCls = `${componentCls}-confirm`;
+
+  return {
+    [componentCls]: {
+      [`${componentCls}-content`]: {
+        padding: 0,
+      },
+
+      [`${componentCls}-header`]: {
+        padding: token.modalHeaderPadding,
+        borderBottom: `${token.modalHeaderBorderWidth}px ${token.modalHeaderBorderStyle} ${token.modalHeaderBorderColorSplit}`,
+        marginBottom: 0,
+      },
+
+      [`${componentCls}-body`]: {
+        padding: token.modalBodyPadding,
+      },
+
+      [`${componentCls}-footer`]: {
+        padding: `${token.modalFooterPaddingVertical}px ${token.modalFooterPaddingHorizontal}px`,
+        borderTop: `${token.modalFooterBorderWidth}px ${token.modalFooterBorderStyle} ${token.modalFooterBorderColorSplit}`,
+        borderRadius: `0 0 ${token.radiusLG}px ${token.radiusLG}px`,
+        marginTop: 0,
+      },
+    },
+
+    [confirmComponentCls]: {
+      [`${antCls}-modal-body`]: {
+        padding: `${token.padding * 2}px ${token.padding * 2}px ${token.paddingLG}px`,
+      },
+      [`${confirmComponentCls}-body`]: {
+        [`> ${token.iconCls}`]: {
+          marginInlineEnd: token.margin,
+
+          // `content` after `icon` should set marginLeft
+          [`+ ${confirmComponentCls}-title + ${confirmComponentCls}-content`]: {
+            marginInlineStart: token.modalConfirmIconSize + token.margin,
+          },
+        },
+      },
+      [`${confirmComponentCls}-btns`]: {
+        marginTop: token.marginLG,
+      },
+    },
+  };
+};
+
 // ============================== Export ==============================
 export default genComponentStyleHook('Modal', token => {
   const headerPaddingVertical = token.padding;
@@ -370,6 +419,7 @@ export default genComponentStyleHook('Modal', token => {
     genModalConfirmStyle(modalToken),
     genRTLStyle(modalToken),
     genModalMaskStyle(modalToken),
+    token.wireframe && genWireframeStyle(modalToken),
     initZoomMotion(modalToken, 'zoom'),
   ];
 });

components/pagination/style/index.tsx

@@ -524,6 +524,66 @@ const genPaginationStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
   };
 };
 
+const genBorderedStyle: GenerateStyle<PaginationToken> = token => {
+  const { componentCls } = token;
+
+  return {
+    [`${componentCls}-disabled`]: {
+      '&, &:hover': {
+        [`${componentCls}-item-link`]: {
+          borderColor: token.colorBorder,
+        },
+      },
+
+      '&:focus-visible': {
+        [`${componentCls}-item-link`]: {
+          borderColor: token.colorBorder,
+        },
+      },
+
+      [`${componentCls}-item`]: {
+        background: token.colorBgContainerDisabled,
+        borderColor: token.colorBorder,
+      },
+
+      [`${componentCls}-item-link`]: {
+        background: token.colorBgContainerDisabled,
+        borderColor: token.colorBorder,
+      },
+    },
+
+    [componentCls]: {
+      [`${componentCls}-prev, ${componentCls}-next`]: {
+        '&:hover button': {
+          borderColor: token.colorPrimaryHover,
+        },
+
+        [`${componentCls}-item-link`]: {
+          backgroundColor: token.paginationItemLinkBg,
+          borderColor: token.colorBorder,
+        },
+
+        [`&:hover ${componentCls}-item-link`]: {
+          borderColor: token.colorPrimary,
+        },
+      },
+
+      [`${componentCls}-item`]: {
+        backgroundColor: token.paginationItemBg,
+        border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
+
+        '&:hover': {
+          borderColor: token.colorPrimary,
+        },
+
+        '&-active': {
+          borderColor: token.colorPrimary,
+        },
+      },
+    },
+  };
+};
+
 // ============================== Export ==============================
 export default genComponentStyleHook('Pagination', token => {
   const paginationToken = mergeToken<PaginationToken>(
@@ -551,5 +611,8 @@ export default genComponentStyleHook('Pagination', token => {
     },
     initInputToken(token),
   );
-  return [genPaginationStyle(paginationToken)];
+  return [
+    genPaginationStyle(paginationToken),
+    token.wireframe && genBorderedStyle(paginationToken),
+  ];
 });

components/popover/style/index.tsx

@@ -118,10 +118,47 @@ const genColorStyle: GenerateStyle<PopoverToken> = token => {
   };
 };
 
+const genWireframeStyle: GenerateStyle<PopoverToken> = token => {
+  const {
+    componentCls,
+    lineWidth,
+    lineType,
+    colorSplit,
+    paddingSM,
+    controlHeight,
+    fontSize,
+    lineHeight,
+    padding,
+  } = token;
+
+  const titlePaddingBlockDist = controlHeight - Math.round(fontSize * lineHeight);
+  const popoverTitlePaddingBlockTop = titlePaddingBlockDist / 2;
+  const popoverTitlePaddingBlockBottom = titlePaddingBlockDist / 2 - lineWidth;
+  const popoverPaddingHorizontal = padding;
+
+  return {
+    [componentCls]: {
+      [`${componentCls}-inner`]: {
+        padding: 0,
+      },
+
+      [`${componentCls}-title`]: {
+        margin: 0,
+        padding: `${popoverTitlePaddingBlockTop}px ${popoverPaddingHorizontal}px ${popoverTitlePaddingBlockBottom}px`,
+        borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`,
+      },
+
+      [`${componentCls}-inner-content`]: {
+        padding: `${paddingSM}px ${popoverPaddingHorizontal}px`,
+      },
+    },
+  };
+};
+
 export default genComponentStyleHook(
   'Popover',
   token => {
-    const { colorBgElevated, colorText, paddingSM } = token;
+    const { colorBgElevated, colorText, paddingSM, wireframe } = token;
 
     const popoverToken = mergeToken<PopoverToken>(token, {
       popoverBg: colorBgElevated,
@@ -132,6 +169,7 @@ export default genComponentStyleHook(
     return [
       genBaseStyle(popoverToken),
       genColorStyle(popoverToken),
+      wireframe && genWireframeStyle(popoverToken),
       initZoomMotion(popoverToken, 'zoom-big'),
     ];
   },

components/radio/style/index.tsx

@@ -14,7 +14,7 @@ interface RadioToken extends FullToken<'Radio'> {
   radioTop: number;
   radioDotSize: number;
   radioDotDisabledSize: number;
-  radioDotColor: string;
+  radioCheckedColor: string;
   radioDotDisabledColor: string;
   radioSolidCheckedColor: string;
 
@@ -67,7 +67,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = token => {
   const {
     componentCls,
     radioWrapperMarginRight,
-    radioDotColor,
+    radioCheckedColor,
     radioTop,
     radioSize,
     motionDurationSlow,
@@ -84,6 +84,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = token => {
     radioDotDisabledColor,
     controlLineType,
     radioDotDisabledSize,
+    wireframe,
   } = token;
   const radioInnerPrefixCls = `${componentCls}-inner`;
 
@@ -120,7 +121,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = token => {
         insetInlineStart: 0,
         width: '100%',
         height: '100%',
-        border: `${controlLineWidth}px ${controlLineType} ${radioDotColor}`,
+        border: `${controlLineWidth}px ${controlLineType} ${radioCheckedColor}`,
         borderRadius: '50%',
         visibility: 'hidden',
         animationName: antRadioEffect,
@@ -141,7 +142,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = token => {
 
       [`${componentCls}-wrapper:hover &,
         &:hover ${radioInnerPrefixCls}`]: {
-        borderColor: radioDotColor,
+        borderColor: radioCheckedColor,
       },
 
       [`${componentCls}-input:focus-visible + ${radioInnerPrefixCls}`]: {
@@ -162,7 +163,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = token => {
           height: radioSize,
           marginBlockStart: radioSize / -2,
           marginInlineStart: radioSize / -2,
-          backgroundColor: radioButtonBg,
+          backgroundColor: wireframe ? radioCheckedColor : radioButtonBg,
           borderBlockStart: 0,
           borderInlineStart: 0,
           borderRadius: radioSize,
@@ -200,8 +201,8 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = token => {
       // 选中状态
       [`${componentCls}-checked`]: {
         [radioInnerPrefixCls]: {
-          borderColor: radioDotColor,
+          borderColor: radioCheckedColor,
-          backgroundColor: radioDotColor,
+          backgroundColor: wireframe ? radioButtonBg : radioCheckedColor,
 
           '&::after': {
             transform: `scale(${radioDotSize / radioSize})`,
@@ -271,7 +272,7 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
     controlRadius,
     controlRadiusSM,
     controlRadiusLG,
-    radioDotColor,
+    radioCheckedColor,
     radioButtonCheckedBg,
     radioButtonHoverColor,
     radioButtonActiveColor,
@@ -387,7 +388,7 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
 
       '&:hover': {
         position: 'relative',
-        color: radioDotColor,
+        color: radioCheckedColor,
       },
 
       '&:has(:focus-visible)': {
@@ -403,16 +404,16 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
 
       '&-checked:not(&-disabled)': {
         zIndex: 1,
-        color: radioDotColor,
+        color: radioCheckedColor,
         background: radioButtonCheckedBg,
-        borderColor: radioDotColor,
+        borderColor: radioCheckedColor,
 
         '&::before': {
-          backgroundColor: radioDotColor,
+          backgroundColor: radioCheckedColor,
         },
 
         '&:first-child': {
-          borderColor: radioDotColor,
+          borderColor: radioCheckedColor,
         },
 
         '&:hover': {
@@ -436,8 +437,8 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
 
       [`${componentCls}-group-solid &-checked:not(&-disabled)`]: {
         color: radioSolidCheckedColor,
-        background: radioDotColor,
+        background: radioCheckedColor,
-        borderColor: radioDotColor,
+        borderColor: radioCheckedColor,
 
         '&:hover': {
           color: radioSolidCheckedColor,
@@ -494,6 +495,7 @@ export default genComponentStyleHook('Radio', token => {
     marginXS,
     controlOutlineWidth,
     paddingXXS,
+    wireframe,
   } = token;
 
   // Radio
@@ -502,9 +504,11 @@ export default genComponentStyleHook('Radio', token => {
 
   const radioSize = fontSizeLG;
   const radioTop = (Math.round(fontSize * lineHeight) - radioSize) / 2;
-  const radioDotSize = radioSize - (paddingXXS + controlLineWidth) * 2;
   const radioDotDisabledSize = radioSize - paddingXXS * 2;
-  const radioDotColor = colorPrimary;
+  const radioDotSize = wireframe
+    ? radioDotDisabledSize
+    : radioSize - (paddingXXS + controlLineWidth) * 2;
+  const radioCheckedColor = colorPrimary;
 
   // Radio buttons
   const radioButtonColor = colorText;
@@ -521,7 +525,7 @@ export default genComponentStyleHook('Radio', token => {
     radioTop,
     radioDotSize,
     radioDotDisabledSize,
-    radioDotColor,
+    radioCheckedColor,
     radioDotDisabledColor: colorTextDisabled,
     radioSolidCheckedColor: colorBgContainer,
     radioButtonBg: colorBgContainer,

components/steps/style/index.tsx

@@ -35,24 +35,28 @@ export interface StepsToken extends FullToken<'Steps'> {
   processTitleColor: string;
   processDescriptionColor: string;
   processIconBgColor: string;
+  processIconBorderColor: string;
   processDotColor: string;
   waitIconColor: string;
   waitTitleColor: string;
   waitDescriptionColor: string;
   waitTailColor: string;
   waitIconBgColor: string;
+  waitIconBorderColor: string;
   waitDotColor: string;
   finishIconColor: string;
   finishTitleColor: string;
   finishDescriptionColor: string;
   finishTailColor: string;
   finishIconBgColor: string;
+  finishIconBorderColor: string;
   finishDotColor: string;
   errorIconColor: string;
   errorTitleColor: string;
   errorDescriptionColor: string;
   errorTailColor: string;
   errorIconBgColor: string;
+  errorIconBorderColor: string;
   errorDotColor: string;
   stepsNavActiveColor: string;
   stepsProgressSize: number;
@@ -72,10 +76,12 @@ const genStepsItemStatusStyle = (status: StepItemStatusEnum, token: StepsToken):
   const descriptionColorKey: keyof StepsToken = `${status}DescriptionColor`;
   const tailColorKey: keyof StepsToken = `${status}TailColor`;
   const iconBgColorKey: keyof StepsToken = `${status}IconBgColor`;
+  const iconBorderColorKey: keyof StepsToken = `${status}IconBorderColor`;
   const dotColorKey: keyof StepsToken = `${status}DotColor`;
   return {
     [`${prefix}-${status} ${prefix}-icon`]: {
       backgroundColor: token[iconBgColorKey],
+      borderColor: token[iconBorderColorKey],
       [`> ${token.componentCls}-icon`]: {
         color: token[iconColorKey],
         [`${token.componentCls}-icon-dot`]: {
@@ -142,13 +148,13 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = token => {
       lineHeight: `${token.stepsIconSize}px`,
       textAlign: 'center',
       borderRadius: token.stepsIconSize,
+      border: `${token.controlLineWidth}px ${token.controlLineType} transparent`,
       transition: `background-color ${motionDurationSlow}, border-color ${motionDurationSlow}`,
       [`${componentCls}-icon`]: {
         position: 'relative',
         top: token.stepsIconTop,
         color: token.colorPrimary,
         lineHeight: 1,
-        verticalAlign: 'text-bottom',
       },
     },
     [`${stepsItemCls}-tail`]: {
@@ -313,50 +319,72 @@ const genStepsStyle: GenerateStyle<StepsToken, CSSObject> = token => {
 export default genComponentStyleHook(
   'Steps',
   token => {
+    const {
+      wireframe,
+      colorTextDisabled,
+      fontSizeHeading3,
+      fontSize,
+      controlHeight,
+      controlHeightLG,
+      colorTextLightSolid,
+      colorText,
+      colorPrimary,
+      colorTextLabel,
+      colorTextDescription,
+      colorFillContent,
+      colorPrimaryBg,
+      colorError,
+      colorBgContainer,
+    } = token;
+
     const stepsIconSize = token.controlHeight;
     const processTailColor = token.colorSplit;
 
     const stepsToken = mergeToken<StepsToken>(token, {
       // Steps variable default.less
       processTailColor,
-      stepsNavArrowColor: token.colorTextDisabled,
+      stepsNavArrowColor: colorTextDisabled,
       stepsIconSize,
       stepsIconCustomSize: stepsIconSize,
       stepsIconCustomTop: 0,
-      stepsIconCustomFontSize: token.fontSizeHeading3,
+      stepsIconCustomFontSize: fontSizeHeading3,
       stepsIconTop: -0.5, // magic for ui experience
-      stepsIconFontSize: token.fontSize,
+      stepsIconFontSize: fontSize,
-      stepsTitleLineHeight: token.controlHeight,
+      stepsTitleLineHeight: controlHeight,
-      stepsSmallIconSize: token.fontSizeHeading3,
+      stepsSmallIconSize: fontSizeHeading3,
-      stepsDotSize: token.controlHeight / 4,
+      stepsDotSize: controlHeight / 4,
-      stepsCurrentDotSize: token.controlHeightLG / 4,
+      stepsCurrentDotSize: controlHeightLG / 4,
       stepsNavContentMaxWidth: 'auto',
       // Steps component less variable
-      processIconColor: token.colorTextLightSolid,
+      processIconColor: colorTextLightSolid,
-      processTitleColor: token.colorText,
+      processTitleColor: colorText,
-      processDescriptionColor: token.colorText,
+      processDescriptionColor: colorText,
-      processIconBgColor: token.colorPrimary,
+      processIconBgColor: colorPrimary,
-      processDotColor: token.colorPrimary,
+      processIconBorderColor: colorPrimary,
-      waitIconColor: token.colorTextLabel,
+      processDotColor: colorPrimary,
-      waitTitleColor: token.colorTextDescription,
+      waitIconColor: wireframe ? colorTextDisabled : colorTextLabel,
-      waitDescriptionColor: token.colorTextDescription,
+      waitTitleColor: colorTextDescription,
+      waitDescriptionColor: colorTextDescription,
       waitTailColor: processTailColor,
-      waitIconBgColor: token.colorFillContent,
+      waitIconBgColor: wireframe ? colorBgContainer : colorFillContent,
-      waitDotColor: token.colorTextDisabled,
+      waitIconBorderColor: wireframe ? colorTextDisabled : 'transparent',
-      finishIconColor: token.colorPrimary,
+      waitDotColor: colorTextDisabled,
-      finishTitleColor: token.colorText,
+      finishIconColor: colorPrimary,
-      finishDescriptionColor: token.colorTextDescription,
+      finishTitleColor: colorText,
-      finishTailColor: token.colorPrimary,
+      finishDescriptionColor: colorTextDescription,
-      finishIconBgColor: token.colorPrimaryBg,
+      finishTailColor: colorPrimary,
-      finishDotColor: token.colorPrimary,
+      finishIconBgColor: wireframe ? colorBgContainer : colorPrimaryBg,
-      errorIconColor: token.colorTextLightSolid,
+      finishIconBorderColor: wireframe ? colorPrimary : colorPrimaryBg,
-      errorTitleColor: token.colorError,
+      finishDotColor: colorPrimary,
-      errorDescriptionColor: token.colorError,
+      errorIconColor: colorTextLightSolid,
+      errorTitleColor: colorError,
+      errorDescriptionColor: colorError,
       errorTailColor: processTailColor,
-      errorIconBgColor: token.colorError,
+      errorIconBgColor: colorError,
-      errorDotColor: token.colorError,
+      errorIconBorderColor: colorError,
-      stepsNavActiveColor: token.colorPrimary,
+      errorDotColor: colorError,
-      stepsProgressSize: token.controlHeightLG,
+      stepsNavActiveColor: colorPrimary,
+      stepsProgressSize: controlHeightLG,
     });
 
     return [genStepsStyle(stepsToken)];

components/steps/style/progress.ts

@@ -33,8 +33,10 @@ const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = token => {
 
         [`${antCls}-progress`]: {
           position: 'absolute',
-          insetBlockStart: (token.stepsIconSize - token.stepsProgressSize) / 2,
+          insetBlockStart:
-          insetInlineStart: (token.stepsIconSize - token.stepsProgressSize) / 2,
+            (token.stepsIconSize - token.stepsProgressSize - token.lineWidth * 2) / 2,
+          insetInlineStart:
+            (token.stepsIconSize - token.stepsProgressSize - token.lineWidth * 2) / 2,
         },
       },
     },

components/table/style/index.tsx

@@ -90,6 +90,7 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = token => {
     tableSelectedRowHoverBg,
     tableFooterTextColor,
     tableFooterBg,
+    wireframe,
   } = token;
   const tableBorder = `${controlLineWidth}px ${controlLineType} ${tableBorderColor}`;
   return {
@@ -219,36 +220,38 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = token => {
         },
       },
 
-      [`${componentCls}:not(${componentCls}-bordered) ${componentCls}-tbody > tr`]: {
+      [`${componentCls}:not(${componentCls}-bordered) ${componentCls}-tbody > tr`]: wireframe
-        [`&${componentCls}-row:hover, &${componentCls}-row${componentCls}-row-selected`]: {
+        ? undefined
-          [`+ tr${componentCls}-row > td`]: {
+        : {
-            borderTopColor: 'transparent',
+            [`&${componentCls}-row:hover, &${componentCls}-row${componentCls}-row-selected`]: {
-          },
+              [`+ tr${componentCls}-row > td`]: {
-        },
+                borderTopColor: 'transparent',
+              },
+            },
 
-        [`&${componentCls}-row:last-child:hover > td,
+            [`&${componentCls}-row:last-child:hover > td,
           &${componentCls}-row${componentCls}-row-selected:last-child > td`]: {
-          borderBottomColor: 'transparent',
+              borderBottomColor: 'transparent',
-        },
+            },
 
-        [`
+            [`
           &${componentCls}-row:hover > td,
           > td${componentCls}-cell-row-hover,
           &${componentCls}-row${componentCls}-row-selected > td
         `]: {
-          borderTopColor: 'transparent',
+              borderTopColor: 'transparent',
 
-          '&:first-child': {
+              '&:first-child': {
-            borderStartStartRadius: tableRadius,
+                borderStartStartRadius: tableRadius,
-            borderEndStartRadius: tableRadius,
+                borderEndStartRadius: tableRadius,
-          },
+              },
 
-          '&:last-child': {
+              '&:last-child': {
-            borderStartEndRadius: tableRadius,
+                borderStartEndRadius: tableRadius,
-            borderEndEndRadius: tableRadius,
+                borderEndEndRadius: tableRadius,
+              },
+            },
           },
-        },
-      },
 
       // ============================ Footer ============================
       [`${componentCls}-footer`]: {

components/theme/interface.ts

@@ -203,6 +203,9 @@ export interface SeedToken extends PresetColorType {
   // Image
   /** Define default Image opacity. Useful when in dark-like theme */
   opacityImage: number;
+
+  // Wireframe
+  wireframe: boolean;
 }
 
 export interface NeutralColorMapToken {

components/theme/themes/seed.ts

@@ -73,5 +73,8 @@ const seedToken: SeedToken = {
 
   // Image
   opacityImage: 1,
+
+  // Wireframe
+  wireframe: false,
 };
 export default seedToken;

components/timeline/style/index.tsx

@@ -11,6 +11,7 @@ interface TimelineToken extends FullToken<'Timeline'> {
   timeLineItemCustomHeadPaddingVertical: number;
   timeLineItemTailWidth: number;
   timeLinePaddingInlineEnd: number;
+  timeLineHeadBorderWidth: number;
 }
 
 const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = token => {
@@ -54,7 +55,7 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = token => {
           width: token.timeLineItemHeadSize,
           height: token.timeLineItemHeadSize,
           backgroundColor: token.colorBgContainer,
-          border: `${token.lineWidth * 3}px ${token.lineType} transparent`,
+          border: `${token.timeLineHeadBorderWidth}px ${token.lineType} transparent`,
           borderRadius: '50%',
 
           '&-blue': {
@@ -219,6 +220,7 @@ export default genComponentStyleHook('Timeline', token => {
     timeLineItemCustomHeadPaddingVertical: token.paddingXXS,
     timeLinePaddingInlineEnd: 2,
     timeLineItemTailWidth: token.lineWidthBold,
+    timeLineHeadBorderWidth: token.wireframe ? token.lineWidthBold : token.lineWidth * 3,
   });
 
   return [genTimelineStyle(timeLineToken)];

scripts/collect-token-statistic.js

@@ -8,6 +8,8 @@ const glob = require('glob');
 const path = require('path');
 const ProgressBar = require('progress');
 const { statistic } = require('../components/theme/util/statistic');
+const { DesignTokenContext } = require('../components/theme');
+const seedToken = require('../components/theme/themes/seed');
 
 console.log(chalk.green(`🔥 Collecting token statistics...`));
 
@@ -46,6 +48,14 @@ styleFiles.forEach(file => {
     return EmptyElement;
   };
   ReactDOMServer.renderToString(React.createElement(Component));
+  // Render wireframe
+  ReactDOMServer.renderToString(
+    React.createElement(
+      DesignTokenContext.Provider,
+      { value: { token: { ...seedToken, wireframe: true } } },
+      React.createElement(Component),
+    ),
+  );
 });
 
 (async () => {

site/theme/template/Layout/DynamicTheme/index.tsx

@@ -1,6 +1,6 @@
 import { BugOutlined, EyeOutlined } from '@ant-design/icons';
 import { TinyColor } from '@ctrl/tinycolor';
-import { Button, Select, Checkbox, Drawer, Form, Input, InputNumber, Space } from 'antd';
+import { Button, Select, Checkbox, Drawer, Form, Input, InputNumber, Space, Switch } from 'antd';
 import * as React from 'react';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
@@ -121,14 +121,16 @@ export default function DynamicTheme({
               case 'number':
                 node = <InputNumber />;
                 break;
+              case 'boolean':
+                node = <Switch defaultChecked={!!originValue} />;
+                break;
 
               default:
                 node = <Input />;
             }
 
             const rules: any[] = [{ required: key !== 'colorTextBase' && key !== 'colorBgBase' }];
-            const originColor = new TinyColor(originValue);
+            if (originValueType === 'string' && new TinyColor(originValue as string).isValid) {
-            if (originValueType === 'string' && originColor.isValid) {
               rules.push({
                 validator: async (_: any, value: string) => {
                   if (!new TinyColor(value).isValid) {