feat: v5 shadow & colorPrimary (#37254)

* feat: v5 shadow

* chore: color lint

* test: fix test case

components/card/style/index.tsx

@@ -238,6 +238,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
     cardHeadPadding,
     cardPaddingBase,
     colorBorderSecondary,
+    boxShadow,
   } = token;
 
   return {
@@ -248,6 +249,10 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
       background: token.colorBgContainer,
       borderRadius: token.radiusLG,
 
+      [`&:not(${componentCls}-bordered)`]: {
+        boxShadow,
+      },
+
       [`${componentCls}-head`]: genCardHeadStyle(token),
 
       [`${componentCls}-extra`]: {

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

@@ -1,48 +0,0 @@
-import { kebabCase } from 'lodash';
-import canUseDom from 'rc-util/lib/Dom/canUseDom';
-import ConfigProvider from '..';
-import { resetWarned } from '../../_util/warning';
-
-let mockCanUseDom = true;
-
-jest.mock('rc-util/lib/Dom/canUseDom', () => () => mockCanUseDom);
-
-describe('ConfigProvider.Theme', () => {
-  beforeEach(() => {
-    mockCanUseDom = true;
-  });
-
-  const colorList = ['primaryColor', 'successColor', 'warningColor', 'errorColor', 'infoColor'];
-
-  colorList.forEach(colorName => {
-    it(colorName, () => {
-      ConfigProvider.config({
-        prefixCls: 'bamboo',
-        theme: { [colorName]: '#0000FF' },
-      });
-
-      const styles: HTMLStyleElement[] = Array.from(document.querySelectorAll('style'));
-      const themeStyle = styles.find(style =>
-        style.getAttribute('rc-util-key')?.includes('-dynamic-theme'),
-      );
-      expect(themeStyle).toBeTruthy();
-
-      expect(themeStyle?.innerHTML).toContain(`--bamboo-${kebabCase(colorName)}: rgb(0, 0, 255)`);
-    });
-  });
-
-  it('warning for SSR', () => {
-    resetWarned();
-
-    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    mockCanUseDom = false;
-    expect(canUseDom()).toBeFalsy();
-
-    ConfigProvider.config({ theme: {} });
-
-    expect(errorSpy).toHaveBeenCalledWith(
-      'Warning: [antd: ConfigProvider] SSR do not support dynamic theme with css variables.',
-    );
-    errorSpy.mockRestore();
-  });
-});

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

@@ -65,7 +65,7 @@ describe('ConfigProvider.Theme', () => {
       return null;
     };
     render(
-      <ConfigProvider theme={{ algorithm: darkAlgorithm }}>
+      <ConfigProvider theme={{ token: { colorPrimary: '#1890ff' }, algorithm: darkAlgorithm }}>
         <Demo />
       </ConfigProvider>,
     );
@@ -110,7 +110,9 @@ describe('ConfigProvider.Theme', () => {
       return null;
     };
     render(
-      <ConfigProvider theme={{ algorithm: [defaultAlgorithm, darkAlgorithm] }}>
+      <ConfigProvider
+        theme={{ token: { colorPrimary: '#1890ff' }, algorithm: [defaultAlgorithm, darkAlgorithm] }}
+      >
         <Demo />
       </ConfigProvider>,
     );

components/date-picker/style/index.tsx

@@ -1153,7 +1153,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
           verticalAlign: 'top',
           background: token.colorBgElevated,
           borderRadius: token.controlRadiusLG,
-          boxShadow: token.boxShadow,
+          boxShadow: token.boxShadowSecondary,
           transition: `margin ${token.motionDurationSlow}`,
 
           [`${componentCls}-panels`]: {

components/drawer/style/index.tsx

@@ -76,7 +76,7 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
           _skip_check_: true,
           value: 0,
         },
-        boxShadow: token.boxShadowDrawerRight,
+        boxShadow: token.boxShadowDrawerLeft,
       },
       [`&-right > ${wrapperCls}`]: {
         top: 0,
@@ -85,17 +85,17 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
           value: 0,
         },
         bottom: 0,
-        boxShadow: token.boxShadowDrawerLeft,
+        boxShadow: token.boxShadowDrawerRight,
       },
       [`&-top > ${wrapperCls}`]: {
         top: 0,
         insetInline: 0,
-        boxShadow: token.boxShadowDrawerDown,
+        boxShadow: token.boxShadowDrawerUp,
       },
       [`&-bottom > ${wrapperCls}`]: {
         bottom: 0,
         insetInline: 0,
-        boxShadow: token.boxShadowDrawerUp,
+        boxShadow: token.boxShadowDrawerDown,
       },
 
       [`${componentCls}-content`]: {

components/dropdown/style/index.tsx

@@ -266,7 +266,7 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
           backgroundClip: 'padding-box',
           borderRadius: token.controlRadiusLG,
           outline: 'none',
-          boxShadow: token.boxShadow,
+          boxShadow: token.boxShadowSecondary,
 
           [`${menuCls}-item-group-title`]: {
             padding: `${dropdownPaddingVertical}px ${controlPaddingHorizontal}px`,

components/menu/style/vertical.tsx

@@ -54,7 +54,7 @@ const getVerticalStyle: GenerateStyle<MenuToken> = token => {
     fontSizeLG,
     motionDurationSlow,
     paddingXS,
-    boxShadow,
+    boxShadowSecondary,
   } = token;
 
   return [
@@ -72,7 +72,7 @@ const getVerticalStyle: GenerateStyle<MenuToken> = token => {
       [`${componentCls}-submenu-popup`]: {
         [`${componentCls}-vertical`]: {
           ...getVerticalInlineStyle(token),
-          boxShadow,
+          boxShadow: boxShadowSecondary,
         },
       },
     },

components/message/style/index.tsx

@@ -20,7 +20,7 @@ const genMessageStyle: GenerateStyle<MessageToken> = token => {
   const {
     componentCls,
     iconCls,
-    boxShadow,
+    boxShadowSecondary,
     colorBgElevated,
     colorSuccess,
     colorError,
@@ -129,7 +129,7 @@ const genMessageStyle: GenerateStyle<MessageToken> = token => {
           padding: messageNoticeContentPadding,
           background: colorBgElevated,
           borderRadius: radiusLG,
-          boxShadow,
+          boxShadow: boxShadowSecondary,
           pointerEvents: 'all',
         },
 

components/modal/style/index.tsx

@@ -162,7 +162,7 @@ const genModalStyle: GenerateStyle<ModalToken> = token => {
           backgroundClip: 'padding-box',
           border: 0,
           borderRadius: token.radiusLG,
-          boxShadow: token.boxShadow,
+          boxShadow: token.boxShadowSecondary,
           pointerEvents: 'auto',
         },
 

components/notification/style/index.tsx

@@ -24,7 +24,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
   const {
     iconCls,
     componentCls, // .ant-notification
-    boxShadow,
+    boxShadowSecondary,
     fontSizeLG,
     notificationMarginBottom,
     radiusLG,
@@ -162,7 +162,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = token => {
         wordWrap: 'break-word',
         background: notificationBg,
         borderRadius: radiusLG,
-        boxShadow,
+        boxShadow: boxShadowSecondary,
 
         [`${componentCls}-close-icon`]: {
           fontSize: fontSizeBase,

components/popover/style/index.tsx

@@ -30,7 +30,7 @@ const genBaseStyle: GenerateStyle<PopoverToken> = token => {
     lineType,
     fontWeightStrong,
 
-    boxShadow,
+    boxShadowSecondary,
     colorSplit,
     colorTextHeading,
     radiusLG: borderRadius,
@@ -68,7 +68,7 @@ const genBaseStyle: GenerateStyle<PopoverToken> = token => {
           backgroundColor: popoverBg,
           backgroundClip: 'padding-box',
           borderRadius,
-          boxShadow,
+          boxShadow: boxShadowSecondary,
         },
 
         [`${componentCls}-title`]: {

components/segmented/style/index.tsx

@@ -29,7 +29,7 @@ function segmentedDisabledItem(cls: string, token: SegmentedToken): CSSObject {
 function getSegmentedItemSelectedStyle(token: SegmentedToken): CSSObject {
   return {
     backgroundColor: token.bgColorSelected,
-    boxShadow: token.boxShadowSegmentedSelectedItem,
+    boxShadow: token.boxShadow,
   };
 }
 

components/select/style/dropdown.tsx

@@ -54,7 +54,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = token => {
         backgroundColor: token.colorBgElevated,
         borderRadius: token.controlRadiusLG,
         outline: 'none',
-        boxShadow: token.boxShadow,
+        boxShadow: token.boxShadowSecondary,
 
         [`
             &${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-bottomLeft,

components/theme/__tests__/token.test.tsx

@@ -14,7 +14,7 @@ describe('Theme', () => {
     expect(result.current!.hashId).toBeFalsy();
     expect(result.current!.token).toEqual(
       expect.objectContaining({
-        colorPrimary: '#1890ff',
+        colorPrimary: '#1677ff',
       }),
     );
   });

components/theme/interface.ts

@@ -429,6 +429,7 @@ export interface AliasToken extends MapToken {
   margin: number;
 
   boxShadow: string;
+  boxShadowSecondary: string;
 
   linkDecoration: React.CSSProperties['textDecoration'];
   linkHoverDecoration: React.CSSProperties['textDecoration'];
@@ -442,12 +443,14 @@ export interface AliasToken extends MapToken {
   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;
@@ -474,8 +477,6 @@ export interface AliasToken extends MapToken {
 
   // FIXME: component box-shadow, should be removed
   boxShadowPopoverArrow: string;
-  boxShadowPopoverArrowBottom: string;
-  boxShadowSegmentedSelectedItem: string;
   boxShadowCard: string;
   boxShadowDrawerRight: string;
   boxShadowDrawerLeft: string;

components/theme/themes/dark/colors.ts

@@ -12,9 +12,12 @@ export const generateColorPalettes: GenerateColorMap = (baseColor: string) => {
     5: colors[6],
     6: colors[5],
     7: colors[4],
-    8: colors[9],
+    8: colors[6],
-    9: colors[8],
+    9: colors[5],
-    10: colors[7],
+    10: colors[4],
+    // 8: colors[9],
+    // 9: colors[8],
+    // 10: colors[7],
   };
 };
 

components/theme/themes/default/colors.ts

@@ -12,9 +12,12 @@ export const generateColorPalettes: GenerateColorMap = (baseColor: string) => {
     5: colors[4],
     6: colors[5],
     7: colors[6],
-    8: colors[7],
+    8: colors[4],
-    9: colors[8],
+    9: colors[5],
-    10: colors[9],
+    10: colors[6],
+    // 8: colors[7],
+    // 9: colors[8],
+    // 10: colors[9],
   };
 };
 

components/theme/themes/seed.ts

@@ -21,7 +21,7 @@ const seedToken: SeedToken = {
   ...defaultPresetColors,
 
   // Color
-  colorPrimary: '#1890ff',
+  colorPrimary: '#1677ff',
   colorSuccess: '#52c41a',
   colorWarning: '#faad14',
   colorError: '#ff4d4f',

components/theme/util/alias.ts

@@ -118,6 +118,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
     paddingSM: 12,
     paddingLG: 24,
     paddingXL: 32,
+    paddingTmp: 20,
 
     marginXXS: 4,
     marginXS: 8,
@@ -125,10 +126,16 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
     marginLG: 24,
     marginXL: 32,
     marginXXL: 48,
+    marginTmp: 20,
 
     boxShadow: `
-      0 3px 6px -4px rgba(0, 0, 0, 0.12),
+      0 1px 2px 0 rgba(0, 0, 0, 0.03),
+      0 1px 6px -1px rgba(0, 0, 0, 0.02),
+      0 2px 4px 0 rgba(0, 0, 0, 0.02)
+    `,
+    boxShadowSecondary: `
       0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 3px 6px -4px rgba(0, 0, 0, 0.12),
       0 9px 28px 8px rgba(0, 0, 0, 0.05)
     `,
 
@@ -153,25 +160,31 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
 
     // FIXME: component box-shadow, should be removed
     boxShadowPopoverArrow: `3px 3px 7px rgba(0, 0, 0, 0.1)`,
-    boxShadowPopoverArrowBottom: `2px 2px 5px rgba(0, 0, 0, 0.1)`,
-    boxShadowSegmentedSelectedItem: [
-      `0 2px 8px -2px ${new TinyColor('#000').setAlpha(0.05).toRgbString()}`,
-      `0 1px 4px -1px ${new TinyColor('#000').setAlpha(0.07).toRgbString()}`,
-      `0 0 1px 0 ${new TinyColor('#000').setAlpha(0.08).toRgbString()}`,
-    ].join(','),
     boxShadowCard: `
       0 1px 2px -2px ${new TinyColor('rgba(0, 0, 0, 0.16)').toRgbString()},
       0 3px 6px 0 ${new TinyColor('rgba(0, 0, 0, 0.12)').toRgbString()},
       0 5px 12px 4px ${new TinyColor('rgba(0, 0, 0, 0.09)').toRgbString()}
     `,
-    boxShadowDrawerRight:
+    boxShadowDrawerRight: `
-      '6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05),12px 0 48px 16px rgba(0, 0, 0, 0.03)',
+      -6px 0 16px 0 rgba(0, 0, 0, 0.08),
-    boxShadowDrawerLeft:
+      -3px 0 6px -4px rgba(0, 0, 0, 0.12),
-      '-6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05), -12px 0 48px 16px rgba(0, 0, 0, 0.03)',
+      -9px 0 28px 8px rgba(0, 0, 0, 0.05)
-    boxShadowDrawerUp:
+    `,
-      '0 -6px 16px -8px rgba(0, 0, 0, 0.32), 0 -9px 28px 0 rgba(0, 0, 0, 0.2),0 -12px 48px 16px rgba(0, 0, 0, 0.12)',
+    boxShadowDrawerLeft: `
-    boxShadowDrawerDown:
+      6px 0 16px 0 rgba(0, 0, 0, 0.08),
-      '0 6px 16px -8px rgba(0, 0, 0, 0.32), 0 9px 28px 0 rgba(0, 0, 0, 0.2), 0 12px 48px 16px rgba(0, 0, 0, 0.12)',
+      3px 0 6px -4px rgba(0, 0, 0, 0.12),
+      9px 0 28px 8px rgba(0, 0, 0, 0.05)
+    `,
+    boxShadowDrawerUp: `
+      0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 3px 6px -4px rgba(0, 0, 0, 0.12),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05)
+    `,
+    boxShadowDrawerDown: `
+      0 -6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 -3px 6px -4px rgba(0, 0, 0, 0.12),
+      0 -9px 28px 8px rgba(0, 0, 0, 0.05)
+    `,
     boxShadowTabsOverflowLeft: `inset 10px 0 8px -8px rgba(0, 0, 0, 0.08)`,
     boxShadowTabsOverflowRight: `inset -10px 0 8px -8px rgba(0, 0, 0, 0.08)`,
     boxShadowTabsOverflowTop: `inset 0 10px 8px -8px rgba(0, 0, 0, 0.08)`,

components/tooltip/style/index.tsx

@@ -49,7 +49,7 @@ const genTooltipStyle: GenerateStyle<TooltipToken> = token => {
     tooltipBorderRadius,
     zIndexPopup,
     controlHeight,
-    boxShadow,
+    boxShadowSecondary,
     paddingSM,
     paddingXS,
   } = token;
@@ -81,7 +81,7 @@ const genTooltipStyle: GenerateStyle<TooltipToken> = token => {
           wordWrap: 'break-word',
           backgroundColor: tooltipBg,
           borderRadius: tooltipBorderRadius,
-          boxShadow,
+          boxShadow: boxShadowSecondary,
         },
 
         [`${componentCls}-content`]: {