mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 09:26:06 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

feat: v5 shadow & colorPrimary (#37254)

Browse Source 
* feat: v5 shadow

* chore: color lint

* test: fix test case
This commit is contained in:
MadCcc 2022-08-26 16:05:16 +08:00 committed by GitHub
parent e3a2c68236
commit ec13e824be
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 73 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/card/style/index.tsx
View File

@ -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`]: {

48
components/config-provider/__tests__/theme.test.ts
View File

@ -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();
});
});

6
components/config-provider/__tests__/theme.test.tsx
View File

@ -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>,
);

2
components/date-picker/style/index.tsx
View File

@ -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`]: {

8
components/drawer/style/index.tsx
View File

@ -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`]: {

2
components/dropdown/style/index.tsx
View File

@ -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`,

4
components/menu/style/vertical.tsx
View File

@ -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,
},
},
},

4
components/message/style/index.tsx
View File

@ -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',
},

2
components/modal/style/index.tsx
View File

@ -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',
},

4
components/notification/style/index.tsx
View File

@ -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,

4
components/popover/style/index.tsx
View File

@ -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`]: {

2
components/segmented/style/index.tsx
View File

@ -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,
};
}

2
components/select/style/dropdown.tsx
View File

@ -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,

2
components/theme/__tests__/token.test.tsx
View File

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

5
components/theme/interface.ts
View File

@ -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;

9
components/theme/themes/dark/colors.ts
View File

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

9
components/theme/themes/default/colors.ts
View File

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

2
components/theme/themes/seed.ts
View File

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

43
components/theme/util/alias.ts
View File

@ -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:
'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)',
boxShadowDrawerLeft:
'-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)',
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)',
boxShadowDrawerDown:
'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)',
boxShadowDrawerRight: `
-6px 0 16px 0 rgba(0, 0, 0, 0.08),
-3px 0 6px -4px rgba(0, 0, 0, 0.12),
-9px 0 28px 8px rgba(0, 0, 0, 0.05)
`,
boxShadowDrawerLeft: `
6px 0 16px 0 rgba(0, 0, 0, 0.08),
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)`,

4
components/tooltip/style/index.tsx
View File

@ -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`]: {