feat: compact theme (#38105)

* feat: compact theme

* chore: code clean

* chore: code clean

* chore: show dynamic theme in preview

* chore: code clean

* feat: compact algorithm

components/alert/style/index.tsx

@@ -7,6 +7,7 @@ export interface ComponentToken {}
 
 type AlertToken = FullToken<'Alert'> & {
   alertIconSizeLG: number;
+  alertPaddingHorizontal: number;
 };
 
 const genAlertTypeStyle = (
@@ -36,10 +37,10 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
     motionEaseInOutCirc,
     alertIconSizeLG,
     colorText,
-    paddingSM,
+    paddingContentVerticalSM,
-    paddingXS,
+    alertPaddingHorizontal,
-    paddingTmp,
+    paddingMD,
-    paddingLG,
+    paddingContentHorizontalLG,
   } = token;
 
   return {
@@ -48,7 +49,7 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
       position: 'relative',
       display: 'flex',
       alignItems: 'center',
-      padding: `${paddingXS}px ${paddingSM}px`,
+      padding: `${paddingContentVerticalSM}px ${alertPaddingHorizontal}px`, // Fixed horizontal padding here.
       wordWrap: 'break-word',
       borderRadius,
 
@@ -95,8 +96,8 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
 
     [`${componentCls}-with-description`]: {
       alignItems: 'flex-start',
-      paddingInline: paddingLG,
+      paddingInline: paddingContentHorizontalLG,
-      paddingBlock: paddingTmp,
+      paddingBlock: paddingMD,
 
       [`${componentCls}-icon`]: {
         marginInlineEnd: marginSM,
@@ -232,6 +233,7 @@ export default genComponentStyleHook('Alert', token => {
 
   const alertToken = mergeToken<AlertToken>(token, {
     alertIconSizeLG: fontSizeHeading3,
+    alertPaddingHorizontal: 12, // Fixed value here.
   });
 
   return [genAlertStyle(alertToken)];

components/button/style/index.tsx

@@ -10,6 +10,7 @@ export interface ComponentToken {}
 export interface ButtonToken extends FullToken<'Button'> {
   // FIXME: should be removed
   colorOutlineDefault: string;
+  buttonPaddingHorizontal: number;
 }
 
 // ============================== Shared ==============================
@@ -344,7 +345,7 @@ const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSS
     0,
     (token.controlHeight - token.fontSize * token.lineHeight) / 2 - token.controlLineWidth,
   );
-  const paddingHorizontal = token.padding - token.controlLineWidth;
+  const paddingHorizontal = token.buttonPaddingHorizontal - token.controlLineWidth;
 
   const iconOnlyCls = `${componentCls}-icon-only`;
 
@@ -399,6 +400,7 @@ const genSizeSmallButtonStyle: GenerateStyle<ButtonToken> = token => {
   const smallToken = mergeToken<ButtonToken>(token, {
     controlHeight: token.controlHeightSM,
     padding: token.paddingXS,
+    buttonPaddingHorizontal: 8, // Fixed padding
     controlRadius: token.controlRadiusSM,
   });
 
@@ -417,10 +419,11 @@ const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = token => {
 
 // ============================== Export ==============================
 export default genComponentStyleHook('Button', token => {
-  const { controlTmpOutline } = token;
+  const { controlTmpOutline, paddingContentHorizontal } = token;
 
   const buttonToken = mergeToken<ButtonToken>(token, {
     colorOutlineDefault: controlTmpOutline,
+    buttonPaddingHorizontal: paddingContentHorizontal,
   });
 
   return [

components/card/style/index.tsx

@@ -4,10 +4,15 @@ import type { FullToken, GenerateStyle } from '../../theme';
 import { genComponentStyleHook, mergeToken } from '../../theme';
 import { clearFix, resetComponent } from '../../style';
 
+export interface ComponentToken {}
+
 interface CardToken extends FullToken<'Card'> {
+  cardHeaderHeight: number;
+  cardHeaderHeightSM: number;
   cardShadow: string;
   cardHeadHeight: number;
   cardHeadPadding: number;
+  cardPaddingSM: number;
   cardPaddingBase: number;
   cardHeadTabsMarginBottom: number;
   cardInnerHeadPadding: number;
@@ -236,9 +241,9 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
     cardShadow,
     cardHeadHeight,
     cardHeadPadding,
-    cardPaddingBase,
     colorBorderSecondary,
     boxShadow,
+    cardPaddingBase,
   } = token;
 
   return {
@@ -345,15 +350,14 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
 
 // ============================== Size ==============================
 const genCardSizeStyle: GenerateStyle<CardToken> = (token): CSSObject => {
-  const { componentCls, cardPaddingBase, cardHeadPadding } = token;
+  const { componentCls, cardPaddingSM, fontSize, lineHeight, cardHeaderHeightSM } = token;
-  const cardPaddingBaseSM = cardPaddingBase / 2;
+  const cardHeadPaddingSM = (cardHeaderHeightSM - fontSize * lineHeight) / 2;
-  const cardHeadPaddingSM = cardHeadPadding / 2;
 
   return {
     [`${componentCls}-small`]: {
       [`> ${componentCls}-head`]: {
-        minHeight: cardHeadPaddingSM * 2 + token.fontSize,
+        minHeight: cardHeaderHeightSM,
-        padding: `0 ${cardPaddingBaseSM}px`,
+        padding: `0 ${cardPaddingSM}px`,
         fontSize: token.fontSize,
 
         [`> ${componentCls}-head-wrapper`]: {
@@ -369,7 +373,7 @@ const genCardSizeStyle: GenerateStyle<CardToken> = (token): CSSObject => {
       },
 
       [`> ${componentCls}-body`]: {
-        padding: cardPaddingBaseSM,
+        padding: cardPaddingSM,
       },
     },
   };
@@ -377,17 +381,17 @@ const genCardSizeStyle: GenerateStyle<CardToken> = (token): CSSObject => {
 
 // ============================== Export ==============================
 export default genComponentStyleHook('Card', token => {
-  const cardHeadPadding = token.padding;
-
   const cardToken = mergeToken<CardToken>(token, {
     cardShadow: token.boxShadowCard,
-    cardHeadHeight: token.fontSizeLG + cardHeadPadding * 2,
+    cardHeaderHeight: token.fontSizeLG * token.lineHeightLG + token.padding * 2,
-    cardHeadPadding,
+    cardHeaderHeightSM: token.fontSize * token.lineHeight + token.paddingXS * 2,
+    cardHeadPadding: token.padding,
     cardPaddingBase: token.paddingLG,
     cardHeadTabsMarginBottom: -token.padding - token.lineWidth,
     cardInnerHeadPadding: token.paddingSM,
     cardActionsLiMargin: `${token.paddingSM}px 0`,
     cardActionsIconSize: token.fontSize,
+    cardPaddingSM: 12, // Fixed padding.
   });
 
   return [

components/collapse/style/index.tsx

@@ -3,19 +3,22 @@ import type { FullToken, GenerateStyle } from '../../theme';
 import { genComponentStyleHook, mergeToken } from '../../theme';
 import { resetComponent, resetIcon } from '../../style';
 
+export interface ComponentToken {}
+
 type CollapseToken = FullToken<'Collapse'> & {
   collapseContentBg: string;
-  collapseContentPadding: number;
   collapseHeaderBg: string;
   collapseHeaderPadding: string;
   collapsePanelBorderRadius: number;
+  collapseContentPaddingHorizontal: number;
 };
 
 export const genBaseStyle: GenerateStyle<CollapseToken> = token => {
   const {
     componentCls,
     collapseContentBg,
-    collapseContentPadding,
+    padding,
+    collapseContentPaddingHorizontal,
     collapseHeaderBg,
     collapseHeaderPadding,
     collapsePanelBorderRadius,
@@ -130,7 +133,7 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = token => {
         borderTop: borderBase,
 
         [`& > ${componentCls}-content-box`]: {
-          padding: collapseContentPadding,
+          padding: `${padding}px ${collapseContentPaddingHorizontal}px`,
         },
 
         [`&-hidden`]: {
@@ -255,10 +258,10 @@ const genGhostStyle: GenerateStyle<CollapseToken> = token => {
 export default genComponentStyleHook('Collapse', token => {
   const collapseToken = mergeToken<CollapseToken>(token, {
     collapseContentBg: token.colorBgContainer,
-    collapseContentPadding: token.padding,
     collapseHeaderBg: token.colorFillAlter,
     collapseHeaderPadding: `${token.paddingSM}px ${token.padding}px`,
     collapsePanelBorderRadius: token.radiusLG,
+    collapseContentPaddingHorizontal: 16, // Fixed value
   });
 
   return [

components/config-provider/__tests__/theme.test.tsx

@@ -8,7 +8,8 @@ import { useToken } from '../../theme';
 import theme from '../../theme/export';
 import { resetWarned } from '../../_util/warning';
 
-const { defaultAlgorithm, darkAlgorithm, defaultAlgorithmV4, darkAlgorithmV4 } = theme;
+const { defaultAlgorithm, darkAlgorithm, defaultAlgorithmV4, darkAlgorithmV4, compactAlgorithm } =
+  theme;
 
 let mockCanUseDom = true;
 
@@ -102,6 +103,33 @@ describe('ConfigProvider.Theme', () => {
     expect(tokenRef?.colorPrimaryText).toBe('#177ddc');
   });
 
+  it('compactAlgorithm should work', () => {
+    let tokenRef: any;
+    const Demo = () => {
+      const [, token] = useToken();
+      tokenRef = token;
+      return null;
+    };
+    render(
+      <ConfigProvider theme={{ token: { sizeBaseStep: 2 }, algorithm: compactAlgorithm }}>
+        <Demo />
+      </ConfigProvider>,
+    );
+    expect(tokenRef).toEqual(
+      expect.objectContaining({
+        sizeXXL: 48,
+        sizeXL: 32,
+        sizeLG: 16,
+        sizeMD: 16,
+        sizeMS: 12,
+        size: 8,
+        sizeSM: 8,
+        sizeXS: 4,
+        sizeXXS: 4,
+      }),
+    );
+  });
+
   it('should support algorithm array', () => {
     let tokenRef: any;
     const Demo = () => {

components/list/style/index.tsx

@@ -341,9 +341,9 @@ export default genComponentStyleHook(
     const listToken = mergeToken<ListToken>(token, {
       listBorderedCls: `${token.componentCls}-bordered`,
       minHeight: token.controlHeightLG,
-      listItemPadding: `${token.paddingSM}px 0`,
+      listItemPadding: `${token.paddingContentVertical}px ${token.paddingContentHorizontalLG}px`,
-      listItemPaddingSM: `${token.paddingXS}px ${token.padding}px`,
+      listItemPaddingSM: `${token.paddingContentVerticalSM}px ${token.paddingContentHorizontal}px`,
-      listItemPaddingLG: `${token.padding}px ${token.paddingLG}px`,
+      listItemPaddingLG: `${token.paddingContentVerticalLG}px ${token.paddingContentHorizontalLG}px`,
     });
 
     return [genBaseStyle(listToken), genBorderedStyle(listToken), genResponsiveStyle(listToken)];

components/message/style/index.tsx

@@ -168,7 +168,7 @@ export default genComponentStyleHook(
     const combinedToken = mergeToken<MessageToken>(token, {
       messageNoticeContentPadding: `${
         (token.controlHeightLG - token.fontSize * token.lineHeight) / 2
-      }px ${token.paddingSM}px`,
+      }px ${token.paddingContentVertical}px`,
     });
     return [genMessageStyle(combinedToken)];
   },

components/modal/style/index.tsx

@@ -165,7 +165,7 @@ const genModalStyle: GenerateStyle<ModalToken> = token => {
           borderRadius: token.radiusLG,
           boxShadow: token.boxShadowSecondary,
           pointerEvents: 'auto',
-          padding: `${token.paddingTmp}px ${token.paddingLG}px`,
+          padding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`,
         },
 
         [`${componentCls}-close`]: {

components/notification/style/index.tsx

@@ -261,7 +261,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
 export default genComponentStyleHook(
   'Notification',
   token => {
-    const notificationPaddingVertical = token.paddingTmp;
+    const notificationPaddingVertical = token.paddingMD;
     const notificationPaddingHorizontal = token.paddingLG;
 
     const notificationToken = mergeToken<NotificationToken>(token, {
@@ -270,7 +270,7 @@ export default genComponentStyleHook(
       notificationPaddingVertical,
       notificationPaddingHorizontal,
       // index.less variables
-      notificationPadding: `${notificationPaddingVertical}px ${notificationPaddingHorizontal}px`,
+      notificationPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`,
       notificationMarginBottom: token.margin,
       notificationMarginEdge: token.marginLG,
       animationMaxHeight: 150,

components/popover/style/index.tsx

@@ -12,7 +12,7 @@ export interface ComponentToken {
 export type PopoverToken = FullToken<'Popover'> & {
   popoverBg: string;
   popoverColor: string;
-  popoverPadding: number;
+  popoverPadding: number | string;
 };
 
 const genBaseStyle: GenerateStyle<PopoverToken> = token => {
@@ -158,12 +158,12 @@ const genWireframeStyle: GenerateStyle<PopoverToken> = token => {
 export default genComponentStyleHook(
   'Popover',
   token => {
-    const { colorBgElevated, colorText, paddingSM, wireframe } = token;
+    const { colorBgElevated, colorText, wireframe } = token;
 
     const popoverToken = mergeToken<PopoverToken>(token, {
       popoverBg: colorBgElevated,
       popoverColor: colorText,
-      popoverPadding: paddingSM,
+      popoverPadding: 12, // Fixed Value
     });
 
     return [

components/radio/style/index.tsx

@@ -496,7 +496,6 @@ export default genComponentStyleHook('Radio', token => {
     colorPrimary,
     marginXS,
     controlOutlineWidth,
-    paddingXXS,
     wireframe,
   } = token;
 
@@ -506,10 +505,11 @@ export default genComponentStyleHook('Radio', token => {
 
   const radioSize = fontSizeLG;
   const radioTop = (Math.round(fontSize * lineHeight) - radioSize) / 2;
-  const radioDotDisabledSize = radioSize - paddingXXS * 2;
+  const dotPadding = 4; // Fixed value
+  const radioDotDisabledSize = radioSize - dotPadding * 2;
   const radioDotSize = wireframe
     ? radioDotDisabledSize
-    : radioSize - (paddingXXS + controlLineWidth) * 2;
+    : radioSize - (dotPadding + controlLineWidth) * 2;
   const radioCheckedColor = colorPrimary;
 
   // Radio buttons

components/slider/style/index.tsx

@@ -237,7 +237,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
 
 // ============================ Horizontal ============================
 const genDirectionStyle = (token: SliderToken, horizontal: boolean): CSSObject => {
-  const { componentCls, railSize, controlSize, handleSize, dotSize } = token;
+  const { componentCls, railSize, handleSize, dotSize } = token;
 
   const railPadding: keyof React.CSSProperties = horizontal ? 'paddingBlock' : 'paddingInline';
   const full: keyof React.CSSProperties = horizontal ? 'width' : 'height';
@@ -247,7 +247,7 @@ const genDirectionStyle = (token: SliderToken, horizontal: boolean): CSSObject =
 
   return {
     [railPadding]: railSize,
-    [part]: controlSize,
+    [part]: railSize * 3,
 
     [`${componentCls}-rail`]: {
       [full]: '100%',
@@ -259,7 +259,7 @@ const genDirectionStyle = (token: SliderToken, horizontal: boolean): CSSObject =
     },
 
     [`${componentCls}-handle`]: {
-      [handlePos]: (controlSize - handleSize) / 2,
+      [handlePos]: (railSize * 3 - handleSize) / 2,
     },
 
     [`${componentCls}-mark`]: {
@@ -336,7 +336,7 @@ export default genComponentStyleHook(
     const handleLineWidthHover = token.lineWidth + increaseHandleWidth * 3;
     return {
       controlSize,
-      railSize: controlSize / 3,
+      railSize: 4,
       handleSize: controlSize,
       handleSizeHover: controlSizeHover,
       dotSize: (controlSize / 3) * 2,

components/steps/style/index.tsx

@@ -159,7 +159,7 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = token => {
     },
     [`${stepsItemCls}-tail`]: {
       position: 'absolute',
-      top: token.marginSM,
+      top: token.stepsIconSize / 2 - token.lineWidth,
       insetInlineStart: 0,
       width: '100%',
 
@@ -347,7 +347,7 @@ export default genComponentStyleHook(
       stepsIconSize,
       stepsIconCustomSize: stepsIconSize,
       stepsIconCustomTop: 0,
-      stepsIconCustomFontSize: fontSizeHeading3,
+      stepsIconCustomFontSize: controlHeightLG / 2,
       stepsIconTop: -0.5, // magic for ui experience
       stepsIconFontSize: fontSize,
       stepsTitleLineHeight: controlHeight,

components/steps/style/small.ts

@@ -47,7 +47,7 @@ const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = token => {
         fontSize: fontSizeBase,
       },
       [`${componentCls}-item-tail`]: {
-        top: token.marginXS,
+        top: stepsSmallIconSize / 2 - token.lineWidth,
       },
       [`${componentCls}-item-custom ${componentCls}-item-icon`]: {
         width: 'inherit',

components/steps/style/vertical.ts

@@ -35,7 +35,7 @@ const genStepsVerticalStyle: GenerateStyle<StepsToken, CSSObject> = token => {
       [`> ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
         position: 'absolute',
         top: 0,
-        insetInlineStart: token.margin,
+        insetInlineStart: token.stepsIconSize / 2 - token.lineWidth,
         width: token.lineWidth,
         height: '100%',
         padding: `${stepsIconSize + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`,
@@ -59,7 +59,7 @@ const genStepsVerticalStyle: GenerateStyle<StepsToken, CSSObject> = token => {
         [`${componentCls}-item-tail`]: {
           position: 'absolute',
           top: 0,
-          insetInlineStart: token.marginSM,
+          insetInlineStart: token.stepsSmallIconSize / 2 - token.lineWidth,
           padding: `${stepsSmallIconSize + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`,
         },
         [`${componentCls}-item-title`]: {

components/switch/style/index.tsx

@@ -226,15 +226,15 @@ const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
       [`&:not(${componentCls}-disabled):active`]: {
         [`&:not(${componentCls}-checked) ${switchInnerCls}`]: {
           [`${switchInnerCls}-unchecked`]: {
-            marginInlineStart: token.switchInnerMarginMax + token.marginXXS,
+            marginInlineStart: token.switchInnerMarginMax + token.switchPadding * 2,
-            marginInlineEnd: token.switchInnerMarginMin - token.marginXXS,
+            marginInlineEnd: token.switchInnerMarginMin - token.switchPadding * 2,
           },
         },
 
         [`&${componentCls}-checked ${switchInnerCls}`]: {
           [`${switchInnerCls}-checked`]: {
-            marginInlineStart: token.switchInnerMarginMin - token.marginXXS,
+            marginInlineStart: token.switchInnerMarginMin - token.switchPadding * 2,
-            marginInlineEnd: token.switchInnerMarginMax + token.marginXXS,
+            marginInlineEnd: token.switchInnerMarginMax + token.switchPadding * 2,
           },
         },
       },
@@ -299,7 +299,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
 export default genComponentStyleHook('Switch', token => {
   const switchHeight = token.fontSize * token.lineHeight;
   const switchHeightSM = token.controlHeight / 2;
-  const switchPadding = token.paddingXXS / 2;
+  const switchPadding = 2; // This is magic
   const switchPinSize = switchHeight - switchPadding * 2;
   const switchPinSizeSM = switchHeightSM - switchPadding * 2;
 
@@ -310,14 +310,14 @@ export default genComponentStyleHook('Switch', token => {
     switchColor: token.colorPrimary,
     switchDisabledOpacity: token.opacityLoading,
     switchInnerMarginMin: switchPinSize / 2,
-    switchInnerMarginMax: switchPinSize + switchPadding + token.paddingXXS,
+    switchInnerMarginMax: switchPinSize + switchPadding + switchPadding * 2,
     switchPadding,
     switchPinSize,
     switchBg: token.colorBgContainer,
     switchMinWidthSM: switchPinSizeSM * 2 + switchPadding * 2,
     switchHeightSM,
     switchInnerMarginMinSM: switchPinSizeSM / 2,
-    switchInnerMarginMaxSM: switchPinSizeSM + switchPadding + token.paddingXXS,
+    switchInnerMarginMaxSM: switchPinSizeSM + switchPadding + switchPadding * 2,
     switchPinSizeSM,
     switchHandleShadow: `0 2px 4px 0 ${new TinyColor('#00230b').setAlpha(0.2).toRgbString()}`,
     switchLoadingIconSize: token.fontSizeIcon * 0.75,

components/table/style/expand.tsx

@@ -10,7 +10,6 @@ const genExpandStyle: GenerateStyle<TableToken, CSSObject> = token => {
     controlInteractiveSize: checkboxSize,
     motionDurationSlow,
     controlLineWidth,
-    paddingXXS,
     paddingXS,
     controlLineType,
     tableBorderColor,
@@ -24,6 +23,7 @@ const genExpandStyle: GenerateStyle<TableToken, CSSObject> = token => {
     tablePaddingVertical,
     tablePaddingHorizontal,
     tableExpandedRowBg,
+    paddingXXS,
   } = token;
   const halfInnerSize = checkboxSize / 2 - controlLineWidth;
   // must be odd number, unless it cannot align center

components/table/style/index.tsx

@@ -90,6 +90,7 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = token => {
     tableSelectedRowHoverBg,
     tableFooterTextColor,
     tableFooterBg,
+    paddingContentVerticalLG,
     wireframe,
   } = token;
   const tableBorder = `${controlLineWidth}px ${controlLineType} ${tableBorderColor}`;
@@ -122,7 +123,7 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = token => {
           tfoot > tr > td
         `]: {
         position: 'relative',
-        padding: `${tablePaddingVertical}px ${tablePaddingHorizontal}px`,
+        padding: `${paddingContentVerticalLG}px ${tablePaddingHorizontal}px`,
         overflowWrap: 'break-word',
       },
 

components/tabs/style/index.tsx

@@ -880,7 +880,7 @@ export default genComponentStyleHook(
       }px ${token.padding}px`,
       tabsCardHeight,
       tabsCardGutter: token.marginXXS / 2,
-      tabsHorizontalGutter: token.marginXL,
+      tabsHorizontalGutter: 32, // Fixed Value
       tabsCardHeadBackground: token.colorFillAlter,
       dropdownEdgeChildVerticalPadding: token.paddingXXS,
       tabsActiveTextShadow: '0 0 0.25px currentcolor',

components/tag/style/index.tsx

@@ -5,12 +5,15 @@ import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme';
 import capitalize from '../../_util/capitalize';
 import { resetComponent } from '../../style';
 
+export interface ComponentToken {}
+
 interface TagToken extends FullToken<'Tag'> {
   tagFontSize: number;
   tagLineHeight: React.CSSProperties['lineHeight'];
   tagDefaultBg: string;
   tagDefaultColor: string;
   tagIconSize: number;
+  tagPaddingHorizontal: number;
 }
 
 // ============================== Styles ==============================
@@ -55,8 +58,8 @@ const genTagColorStyle = (token: TagToken): CSSInterpolation =>
   }, {} as CSSObject);
 
 const genBaseStyle = (token: TagToken): CSSInterpolation => {
-  const { paddingXS, paddingXXS, controlLineWidth } = token;
+  const { paddingXXS, controlLineWidth, tagPaddingHorizontal } = token;
-  const paddingInline = paddingXS - controlLineWidth;
+  const paddingInline = tagPaddingHorizontal - controlLineWidth;
   const iconMarginInline = paddingXXS - controlLineWidth;
 
   return {
@@ -160,6 +163,7 @@ export default genComponentStyleHook('Tag', token => {
     tagDefaultBg,
     tagDefaultColor,
     tagIconSize: fontSizeIcon - 2 * controlLineWidth, // Tag icon is much more smaller
+    tagPaddingHorizontal: 8, // Fixed padding.
   });
 
   return [

components/theme/export.ts

@@ -2,6 +2,7 @@
 import { useToken as useInternalToken, defaultConfig } from '.';
 import defaultAlgorithm from './themes/default';
 import darkAlgorithm from './themes/dark';
+import compactAlgorithm from './themes/compact';
 import { defaultAlgorithmV4, darkAlgorithmV4 } from './themes/v4';
 
 // ZombieJ: We export as object to user but array in internal.
@@ -23,4 +24,5 @@ export default {
   darkAlgorithm,
   defaultAlgorithmV4,
   darkAlgorithmV4,
+  compactAlgorithm,
 };

components/theme/interface.ts

@@ -6,9 +6,11 @@ import type { ComponentToken as BackTopComponentToken } from '../back-top/style'
 import type { ComponentToken as ButtonComponentToken } from '../button/style';
 import type { ComponentToken as FloatButtonComponentToken } from '../float-button/style';
 import type { ComponentToken as CalendarComponentToken } from '../calendar/style';
+import type { ComponentToken as CardComponentToken } from '../card/style';
 import type { ComponentToken as CarouselComponentToken } from '../carousel/style';
 import type { ComponentToken as CascaderComponentToken } from '../cascader/style';
 import type { ComponentToken as CheckboxComponentToken } from '../checkbox/style';
+import type { ComponentToken as CollapseComponentToken } from '../collapse/style';
 import type { ComponentToken as DatePickerComponentToken } from '../date-picker/style';
 import type { ComponentToken as DividerComponentToken } from '../divider/style';
 import type { ComponentToken as DropdownComponentToken } from '../dropdown/style';
@@ -38,6 +40,7 @@ import type { ComponentToken as SpinComponentToken } from '../spin/style';
 import type { ComponentToken as StepsComponentToken } from '../steps/style';
 import type { ComponentToken as TableComponentToken } from '../table/style';
 import type { ComponentToken as TabsComponentToken } from '../tabs/style';
+import type { ComponentToken as TagComponentToken } from '../tag/style';
 import type { ComponentToken as TimelineComponentToken } from '../timeline/style';
 import type { ComponentToken as TooltipComponentToken } from '../tooltip/style';
 import type { ComponentToken as TransferComponentToken } from '../transfer/style';
@@ -79,10 +82,11 @@ export interface ComponentTokenMap {
   Badge?: {};
   Button?: ButtonComponentToken;
   Breadcrumb?: {};
+  Card?: CardComponentToken;
   Carousel?: CarouselComponentToken;
   Cascader?: CascaderComponentToken;
   Checkbox?: CheckboxComponentToken;
-  Collapse?: {};
+  Collapse?: CollapseComponentToken;
   DatePicker?: DatePickerComponentToken;
   Descriptions?: {};
   Divider?: DividerComponentToken;
@@ -112,7 +116,7 @@ export interface ComponentTokenMap {
   Spin?: SpinComponentToken;
   Statistic?: {};
   Switch?: {};
-  Tag?: {};
+  Tag?: TagComponentToken;
   Tree?: {};
   TreeSelect?: {};
   Typography?: TypographyComponentToken;
@@ -120,7 +124,6 @@ export interface ComponentTokenMap {
   Transfer?: TransferComponentToken;
   Tabs?: TabsComponentToken;
   Calendar?: CalendarComponentToken;
-  Card?: {};
   Steps?: StepsComponentToken;
   Menu?: MenuComponentToken;
   Modal?: ModalComponentToken;
@@ -159,10 +162,6 @@ export interface SeedToken extends PresetColorType {
   fontFamily: string;
   fontSizeBase: number;
 
-  // Grid
-  gridUnit: number;
-  gridBaseStep: number;
-
   // Line
   /** Border width of base components */
   lineWidth: number;
@@ -296,24 +295,25 @@ export interface ColorMapToken extends NeutralColorMapToken {
   colorBgMask: string;
 }
 
+export interface SizeMapToken {
+  // Size
+  sizeXXL: number;
+  sizeXL: number;
+  sizeLG: number;
+  sizeMD: number;
+  /** Same as size by default, but can be larger in compact mode */
+  sizeMS: number;
+  size: number;
+  sizeSM: number;
+  sizeXS: number;
+  sizeXXS: number;
+}
+
 export interface CommonMapToken {
   // Font
   fontSizes: number[];
   lineHeights: number[];
 
-  // Size
-  sizeSpace: number;
-  sizeSpaceXS: number;
-  sizeSpaceXXS: number;
-  sizeSpaceSM: number;
-
-  // Grid
-  gridSpaceSM: number;
-  gridSpaceBase: number;
-  gridSpaceLG: number;
-  gridSpaceXL: number;
-  gridSpaceXXL: number;
-
   // Line
   lineWidthBold: number;
 
@@ -339,7 +339,12 @@ export interface CommonMapToken {
 // ==                         Map Token                         ==
 // ======================================================================
 // 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
-export interface MapToken extends SeedToken, ColorPalettes, ColorMapToken, CommonMapToken {}
+export interface MapToken
+  extends SeedToken,
+    ColorPalettes,
+    ColorMapToken,
+    SizeMapToken,
+    CommonMapToken {}
 
 // ======================================================================
 // ==                           Alias Token                            ==
@@ -422,12 +427,36 @@ export interface AliasToken extends MapToken {
   controlInteractiveSize: number;
   controlItemBgActiveDisabled: string; // Note. It also is a color
 
+  // Padding
+  paddingXXS: number;
+  paddingXS: number;
+  paddingSM: number;
+  padding: number;
+  paddingMD: number;
+  paddingLG: number;
+  paddingXL: number;
+
+  // Padding Content
+  paddingContentHorizontalLG: number;
+  paddingContentHorizontal: number;
+  paddingContentHorizontalSM: number;
+  paddingContentVerticalLG: number;
+  paddingContentVertical: number;
+  paddingContentVerticalSM: number;
+
+  // Margin
+  marginXXS: number;
+  marginXS: number;
+  marginSM: number;
+  margin: number;
+  marginMD: number;
+  marginLG: number;
+  marginXL: number;
+  marginXXL: number;
+
   // =============== Legacy: should be remove ===============
   opacityLoading: number;
 
-  padding: number;
-  margin: number;
-
   boxShadow: string;
   boxShadowSecondary: string;
 
@@ -438,20 +467,6 @@ export interface AliasToken extends MapToken {
   controlPaddingHorizontal: number;
   controlPaddingHorizontalSM: number;
 
-  paddingSM: number;
-  paddingXS: number;
-  paddingXXS: number;
-  paddingLG: number;
-  paddingXL: number;
-  paddingTmp: number;
-  marginXXS: number;
-  marginXS: number;
-  marginSM: number;
-  marginLG: number;
-  marginXL: number;
-  marginXXL: number;
-  marginTmp: number;
-
   // Media queries breakpoints
   screenXS: number;
   screenXSMin: number;

components/theme/themes/compact/genCompactSizeMapToken.ts

@@ -0,0 +1,17 @@
+import type { SeedToken, SizeMapToken } from '../../interface';
+
+export default function genSizeMapToken(token: SeedToken): SizeMapToken {
+  const { sizeUnit, sizeBaseStep } = token;
+
+  return {
+    sizeXXL: sizeUnit * (sizeBaseStep + 10),
+    sizeXL: sizeUnit * (sizeBaseStep + 6),
+    sizeLG: sizeUnit * (sizeBaseStep + 2),
+    sizeMD: sizeUnit * (sizeBaseStep + 2),
+    sizeMS: sizeUnit * (sizeBaseStep + 1),
+    size: sizeUnit * sizeBaseStep,
+    sizeSM: sizeUnit * sizeBaseStep,
+    sizeXS: sizeUnit * (sizeBaseStep - 1),
+    sizeXXS: sizeUnit * (sizeBaseStep - 1),
+  };
+}

components/theme/themes/compact/index.ts

@@ -0,0 +1,15 @@
+import type { DerivativeFunc } from '@ant-design/cssinjs';
+import type { SeedToken, MapToken } from '../../interface';
+import defaultAlgorithm from '../default';
+import genCompactSizeMapToken from './genCompactSizeMapToken';
+
+const derivative: DerivativeFunc<SeedToken, MapToken> = (token, mapToken) => {
+  const mergedMapToken = mapToken ?? defaultAlgorithm(token);
+
+  return {
+    ...mergedMapToken,
+    ...genCompactSizeMapToken(token),
+  };
+};
+
+export default derivative;

components/theme/themes/dark/index.ts

@@ -3,8 +3,8 @@ import type { DerivativeFunc } from '@ant-design/cssinjs';
 import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface';
 import { defaultPresetColors } from '../seed';
 import genColorMapToken from '../shared/genColorMapToken';
-import genCommonMapToken from '../shared/genCommonMapToken';
 import { generateColorPalettes, generateNeutralColorPalettes } from './colors';
+import defaultAlgorithm from '../default';
 
 const derivative: DerivativeFunc<SeedToken, MapToken> = (token, mapToken) => {
   const colorPalettes = Object.keys(defaultPresetColors)
@@ -24,11 +24,10 @@ const derivative: DerivativeFunc<SeedToken, MapToken> = (token, mapToken) => {
       return prev;
     }, {} as ColorPalettes);
 
-  return {
+  const mergedMapToken = mapToken ?? defaultAlgorithm(token);
-    ...token,
 
-    // Other tokens
+  return {
-    ...(mapToken ?? genCommonMapToken(token)),
+    ...mergedMapToken,
 
     // Dark tokens
     ...colorPalettes,

components/theme/themes/default/index.ts

@@ -1,4 +1,5 @@
 import { generate } from '@ant-design/colors';
+import genSizeMapToken from '../shared/genSizeMapToken';
 import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface';
 import { defaultPresetColors } from '../seed';
 import genColorMapToken from '../shared/genColorMapToken';
@@ -31,7 +32,9 @@ export default function derivative(token: SeedToken): MapToken {
       generateColorPalettes,
       generateNeutralColorPalettes,
     }),
-
+    // Size
+    ...genSizeMapToken(token),
+    // Others
     ...genCommonMapToken(token),
   };
 }

components/theme/themes/seed.ts

@@ -37,10 +37,6 @@ const seedToken: SeedToken = {
 'Noto Color Emoji'`,
   fontSizeBase: 14,
 
-  // Grid
-  gridUnit: 4,
-  gridBaseStep: 2,
-
   // Line
   lineWidth: 1,
   lineType: 'solid',

components/theme/themes/shared/genCommonMapToken.ts

@@ -3,24 +3,13 @@ import genFontSizes from './genFontSizes';
 import genRadius from './genRadius';
 
 export default function genCommonMapToken(token: SeedToken): CommonMapToken {
-  const {
+  const { motionUnit, motionBase, fontSizeBase, radiusBase, controlHeight, lineWidth } = token;
-    motionUnit,
-    motionBase,
-    fontSizeBase,
-    sizeUnit,
-    sizeBaseStep,
-    gridUnit,
-    gridBaseStep,
-    radiusBase,
-    controlHeight,
-    lineWidth,
-  } = token;
 
   const fontSizes = genFontSizes(fontSizeBase);
 
   return {
     // motion
-    motionDurationFast: `${(motionBase + motionUnit * 1).toFixed(1)}s`,
+    motionDurationFast: `${(motionBase + motionUnit).toFixed(1)}s`,
     motionDurationMid: `${(motionBase + motionUnit * 2).toFixed(1)}s`,
     motionDurationSlow: `${(motionBase + motionUnit * 3).toFixed(1)}s`,
 
@@ -28,19 +17,6 @@ export default function genCommonMapToken(token: SeedToken): CommonMapToken {
     fontSizes: fontSizes.map(fs => fs.size),
     lineHeights: fontSizes.map(fs => fs.lineHeight),
 
-    // size
-    sizeSpaceSM: sizeUnit * (sizeBaseStep - 1),
-    sizeSpace: sizeUnit * sizeBaseStep,
-    sizeSpaceXS: sizeUnit * (sizeBaseStep - 2),
-    sizeSpaceXXS: sizeUnit * (sizeBaseStep - 3),
-
-    // grid
-    gridSpaceSM: gridUnit * (gridBaseStep - 1),
-    gridSpaceBase: gridUnit * gridBaseStep,
-    gridSpaceLG: gridUnit * (gridBaseStep + 1),
-    gridSpaceXL: gridUnit * (gridBaseStep + 2),
-    gridSpaceXXL: gridUnit * (gridBaseStep + 5),
-
     // line
     lineWidthBold: lineWidth + 1,
 

components/theme/themes/shared/genSizeMapToken.ts

@@ -0,0 +1,17 @@
+import type { SeedToken, SizeMapToken } from '../../interface';
+
+export default function genSizeMapToken(token: SeedToken): SizeMapToken {
+  const { sizeUnit, sizeBaseStep } = token;
+
+  return {
+    sizeXXL: sizeUnit * (sizeBaseStep + 8), // 48
+    sizeXL: sizeUnit * (sizeBaseStep + 4), // 32
+    sizeLG: sizeUnit * (sizeBaseStep + 2), // 24
+    sizeMD: sizeUnit * (sizeBaseStep + 1), // 20
+    sizeMS: sizeUnit * sizeBaseStep, // 16
+    size: sizeUnit * sizeBaseStep, // 16
+    sizeSM: sizeUnit * (sizeBaseStep - 1), // 12
+    sizeXS: sizeUnit * (sizeBaseStep - 2), // 8
+    sizeXXS: sizeUnit * (sizeBaseStep - 3), // 4
+  };
+}

components/theme/util/alias.ts

@@ -120,23 +120,29 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
     controlPaddingHorizontal: 12,
     controlPaddingHorizontalSM: 8,
 
-    padding: 16,
+    paddingXXS: mergedToken.sizeXXS,
-    margin: 16,
+    paddingXS: mergedToken.sizeXS,
+    paddingSM: mergedToken.sizeSM,
+    padding: mergedToken.size,
+    paddingMD: mergedToken.sizeMD,
+    paddingLG: mergedToken.sizeLG,
+    paddingXL: mergedToken.sizeXL,
 
-    paddingXXS: 4,
+    paddingContentHorizontalLG: mergedToken.sizeLG,
-    paddingXS: 8,
+    paddingContentVerticalLG: mergedToken.sizeMS,
-    paddingSM: 12,
+    paddingContentHorizontal: mergedToken.sizeMS,
-    paddingLG: 24,
+    paddingContentVertical: mergedToken.sizeSM,
-    paddingXL: 32,
+    paddingContentHorizontalSM: mergedToken.size,
-    paddingTmp: 20,
+    paddingContentVerticalSM: mergedToken.sizeXS,
 
-    marginXXS: 4,
+    marginXXS: mergedToken.sizeXXS,
-    marginXS: 8,
+    marginXS: mergedToken.sizeXS,
-    marginSM: 12,
+    marginSM: mergedToken.sizeSM,
-    marginLG: 24,
+    margin: mergedToken.size,
-    marginXL: 32,
+    marginMD: mergedToken.sizeMD,
-    marginXXL: 48,
+    marginLG: mergedToken.sizeLG,
-    marginTmp: 20,
+    marginXL: mergedToken.sizeXL,
+    marginXXL: mergedToken.sizeXXL,
 
     boxShadow: `
       0 1px 2px 0 rgba(0, 0, 0, 0.03),

components/transfer/style/index.tsx

@@ -12,9 +12,9 @@ export interface ComponentToken {
 
 interface TransferToken extends FullToken<'Transfer'> {
   transferItemHeight: number;
-  transferHeaderHeight: number;
   transferHeaderVerticalPadding: number;
   transferItemPaddingVertical: number;
+  transferHeaderHeight: number;
 }
 
 const genTransferCustomizeStyle: GenerateStyle<TransferToken> = (
@@ -99,7 +99,6 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
     listHeight,
     listWidth,
     listWidthLG,
-    marginXXS,
     fontSizeIcon,
     marginXS,
     paddingSM,
@@ -142,7 +141,7 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
       borderRadius: `${token.controlRadiusLG}px ${token.controlRadiusLG}px 0 0`,
 
       '> *:not(:last-child)': {
-        marginInlineEnd: marginXXS,
+        marginInlineEnd: 4, // This is magic and fixed number, DO NOT use token since it may change.
       },
 
       '> *': {

site/bisheng.config.js

@@ -128,6 +128,12 @@ module.exports = {
       // eslint-disable-next-line no-console
       console.log('Site build with development mode...');
       config.mode = 'development';
+
+      config.plugins.push(
+        new webpack.DefinePlugin({
+          antdPreview: JSON.stringify(true),
+        }),
+      );
     }
 
     // Split chunks

site/theme/template/Content/MainContent.jsx

@@ -1,18 +1,16 @@
 import React, { cloneElement, Component } from 'react';
-import { Link, browserHistory } from 'bisheng/router';
+import { browserHistory, Link } from 'bisheng/router';
-import { Row, Col, Menu, Affix, Tooltip, Avatar, Dropdown, Drawer } from 'antd';
+import { Affix, Avatar, Col, Drawer, Menu, Row, Tooltip } from 'antd';
-import { injectIntl, FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
 import {
+  DoubleRightOutlined,
+  ExportOutlined,
   LeftOutlined,
   RightOutlined,
-  ExportOutlined,
-  DoubleRightOutlined,
 } from '@ant-design/icons';
 import ContributorsList from '@qixian.cs/github-contributors-list';
 import classNames from 'classnames';
 import get from 'lodash/get';
-
-import ThemeIcon from './ThemeIcon';
 import Article from './Article';
 import PrevAndNext from './PrevAndNext';
 import Footer from '../Layout/Footer';
@@ -513,7 +511,6 @@ class MainContent extends Component {
         {menuItems}
       </Menu>
     );
-    const componentPage = /^\/?components/.test(location.pathname);
     return (
       <div className="main-wrapper">
         <Row>
@@ -551,13 +548,6 @@ class MainContent extends Component {
             <section className={mainContainerClass}>
               {this.renderMainContent({ theme, setIframeTheme })}
             </section>
-            {componentPage && (
-              <div className="fixed-widgets">
-                <Dropdown overlay={this.getThemeSwitchMenu()} placement="top">
-                  <Avatar className="fixed-widgets-avatar" size={44} icon={<ThemeIcon />} />
-                </Dropdown>
-              </div>
-            )}
             <PrevAndNext prev={prev} next={next} />
             <Footer location={location} />
           </Col>

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

@@ -107,6 +107,10 @@ export default function DynamicTheme({
             />
           </Form.Item>
 
+          <Form.Item valuePropName="checked" name="compact" label="Compact">
+            <Checkbox>Compact</Checkbox>
+          </Form.Item>
+
           {keys.map((key: keyof typeof defaultToken) => {
             if (PresetColors.includes(key as any)) {
               return null;

site/theme/template/Layout/index.tsx

@@ -24,6 +24,8 @@ import defaultSeedToken from '../../../../components/theme/themes/seed';
 import DynamicTheme from './DynamicTheme';
 import 'moment/locale/zh-cn';
 
+declare const antdPreview: string | undefined;
+
 if (typeof window !== 'undefined' && navigator.serviceWorker) {
   navigator.serviceWorker.getRegistrations().then(registrations => {
     registrations.forEach(registration => registration.unregister());
@@ -91,6 +93,7 @@ interface LayoutStateType {
   setTheme: SiteContextProps['setTheme'];
   setIframeTheme: SiteContextProps['setIframeTheme'];
   v5theme: string;
+  compact: boolean;
   designToken: SeedToken;
   hashedStyle: boolean;
 }
@@ -117,6 +120,7 @@ export default class Layout extends React.Component<LayoutPropsType, LayoutState
       setTheme: this.setTheme,
       setIframeTheme: this.setIframeTheme,
       v5theme: 'default',
+      compact: false,
       designToken: defaultSeedToken,
       hashedStyle: true,
     };
@@ -320,13 +324,15 @@ export default class Layout extends React.Component<LayoutPropsType, LayoutState
                 theme={{
                   token: designToken,
                   hashed: hashedStyle,
-                  algorithm: this.getAlgorithm(),
+                  algorithm: this.state.compact
+                    ? [this.getAlgorithm(), antdTheme.compactAlgorithm]
+                    : this.getAlgorithm(),
                 }}
               >
                 <Header {...restProps} changeDirection={this.changeDirection} />
                 {children}
 
-                {process.env.NODE_ENV !== 'production' && (
+                {(process.env.NODE_ENV !== 'production' || antdPreview) && (
                   <DynamicTheme
                     componentName={(this.props as any).params?.children?.replace('-cn', '')}
                     defaultToken={
@@ -338,11 +344,12 @@ export default class Layout extends React.Component<LayoutPropsType, LayoutState
                     }
                     onChangeTheme={newToken => {
                       console.log('Change Theme:', newToken);
-                      const { hashed, theme: newTheme, ...restToken } = newToken as any;
+                      const { hashed, theme: newTheme, compact, ...restToken } = newToken as any;
                       this.setState({
                         v5theme: newTheme,
                         designToken: restToken,
                         hashedStyle: hashed,
+                        compact,
                       });
                     }}
                   />