feat: compact theme (ant-design#38105)

* feat: compact theme * chore: code clean * chore: code clean * chore: show dynamic theme in preview * chore: code clean * feat: compact algorithm
peter-boot · Oct 25, 2022 · ffc09a2 · ffc09a2
1 parent d08deee
commit ffc09a2
Show file tree

Hide file tree

Showing 35 changed files with 268 additions and 171 deletions.
diff --git a/components/alert/style/index.tsx b/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,
-    paddingXS,
-    paddingTmp,
-    paddingLG,
+    paddingContentVerticalSM,
+    alertPaddingHorizontal,
+    paddingMD,
+    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,
-      paddingBlock: paddingTmp,
+      paddingInline: paddingContentHorizontalLG,
+      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)];

diff --git a/components/button/style/index.tsx b/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 [

diff --git a/components/card/style/index.tsx b/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 cardPaddingBaseSM = cardPaddingBase / 2;
-  const cardHeadPaddingSM = cardHeadPadding / 2;
+  const { componentCls, cardPaddingSM, fontSize, lineHeight, cardHeaderHeightSM } = token;
+  const cardHeadPaddingSM = (cardHeaderHeightSM - fontSize * lineHeight) / 2;
 
   return {
     [`${componentCls}-small`]: {
       [`> ${componentCls}-head`]: {
-        minHeight: cardHeadPaddingSM * 2 + token.fontSize,
-        padding: `0 ${cardPaddingBaseSM}px`,
+        minHeight: cardHeaderHeightSM,
+        padding: `0 ${cardPaddingSM}px`,
         fontSize: token.fontSize,
 
         [`> ${componentCls}-head-wrapper`]: {
@@ -369,25 +373,25 @@ const genCardSizeStyle: GenerateStyle<CardToken> = (token): CSSObject => {
       },
 
       [`> ${componentCls}-body`]: {
-        padding: cardPaddingBaseSM,
+        padding: cardPaddingSM,
       },
     },
   };
 };
 
 // ============================== Export ==============================
 export default genComponentStyleHook('Card', token => {
-  const cardHeadPadding = token.padding;
-
   const cardToken = mergeToken<CardToken>(token, {
     cardShadow: token.boxShadowCard,
-    cardHeadHeight: token.fontSizeLG + cardHeadPadding * 2,
-    cardHeadPadding,
+    cardHeaderHeight: token.fontSizeLG * token.lineHeightLG + token.padding * 2,
+    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 [

diff --git a/components/collapse/style/index.tsx b/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 [

diff --git a/components/config-provider/__tests__/theme.test.tsx b/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 = () => {

diff --git a/components/list/style/index.tsx b/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`,
-      listItemPaddingSM: `${token.paddingXS}px ${token.padding}px`,
-      listItemPaddingLG: `${token.padding}px ${token.paddingLG}px`,
+      listItemPadding: `${token.paddingContentVertical}px ${token.paddingContentHorizontalLG}px`,
+      listItemPaddingSM: `${token.paddingContentVerticalSM}px ${token.paddingContentHorizontal}px`,
+      listItemPaddingLG: `${token.paddingContentVerticalLG}px ${token.paddingContentHorizontalLG}px`,
     });
 
     return [genBaseStyle(listToken), genBorderedStyle(listToken), genResponsiveStyle(listToken)];

diff --git a/components/message/style/index.tsx b/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)];
   },

diff --git a/components/modal/style/index.tsx b/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`]: {

diff --git a/components/notification/style/index.tsx b/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,

diff --git a/components/popover/style/index.tsx b/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 [

diff --git a/components/radio/style/index.tsx b/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

diff --git a/components/slider/style/index.tsx b/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,