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

feat: compact theme (#38105)

Browse Source 
* feat: compact theme

* chore: code clean

* chore: code clean

* chore: show dynamic theme in preview

* chore: code clean

* feat: compact algorithm
This commit is contained in:
MadCcc 2022-10-25 17:04:36 +08:00 committed by GitHub
parent d08deeeb8a
commit ffc09a2a0d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
35 changed files with 266 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/alert/style/index.tsx
View File

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

7
components/button/style/index.tsx
View File

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

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

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

11
components/collapse/style/index.tsx
View File

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

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

@ -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 = () => {

6
components/list/style/index.tsx
View File

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

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

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

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

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

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

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

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

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

6
components/radio/style/index.tsx
View File

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

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

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

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

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

2
components/steps/style/small.ts
View File

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

4
components/steps/style/vertical.ts
View File

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

14
components/switch/style/index.tsx
View File

@ -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,
marginInlineEnd: token.switchInnerMarginMin - token.marginXXS,
marginInlineStart: token.switchInnerMarginMax + token.switchPadding * 2,
marginInlineEnd: token.switchInnerMarginMin - token.switchPadding * 2,
},
},
[`&${componentCls}-checked ${switchInnerCls}`]: {
[`${switchInnerCls}-checked`]: {
marginInlineStart: token.switchInnerMarginMin - token.marginXXS,
marginInlineEnd: token.switchInnerMarginMax + token.marginXXS,
marginInlineStart: token.switchInnerMarginMin - token.switchPadding * 2,
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,

2
components/table/style/expand.tsx
View File

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

3
components/table/style/index.tsx
View File

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

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

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

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

@ -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 paddingInline = paddingXS - controlLineWidth;
const { paddingXXS, controlLineWidth, tagPaddingHorizontal } = token;
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 [

2
components/theme/export.ts
View File

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

91
components/theme/interface.ts
View File

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

17
components/theme/themes/compact/genCompactSizeMapToken.ts Normal file
View File

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

15
components/theme/themes/compact/index.ts Normal file
View File

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

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

@ -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 {
...token,
const mergedMapToken = mapToken ?? defaultAlgorithm(token);
// Other tokens
...(mapToken ?? genCommonMapToken(token)),
return {
...mergedMapToken,
// Dark tokens
...colorPalettes,

5
components/theme/themes/default/index.ts
View File

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

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

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

28
components/theme/themes/shared/genCommonMapToken.ts
View File

@ -3,24 +3,13 @@ import genFontSizes from './genFontSizes';
import genRadius from './genRadius';
export default function genCommonMapToken(token: SeedToken): CommonMapToken {
const {
motionUnit,
motionBase,
fontSizeBase,
sizeUnit,
sizeBaseStep,
gridUnit,
gridBaseStep,
radiusBase,
controlHeight,
lineWidth,
} = token;
const { motionUnit, motionBase, fontSizeBase, 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,

17
components/theme/themes/shared/genSizeMapToken.ts Normal file
View File

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

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

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

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

@ -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.
},
'> *': {

6
site/bisheng.config.js
View File

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

20
site/theme/template/Content/MainContent.jsx
View File

@ -1,18 +1,16 @@
import React, { cloneElement, Component } from 'react';
import { Link, browserHistory } from 'bisheng/router';
import { Row, Col, Menu, Affix, Tooltip, Avatar, Dropdown, Drawer } from 'antd';
import { injectIntl, FormattedMessage } from 'react-intl';
import { browserHistory, Link } from 'bisheng/router';
import { Affix, Avatar, Col, Drawer, Menu, Row, Tooltip } from 'antd';
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>

4
site/theme/template/Layout/DynamicTheme/index.tsx
View File

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

13
site/theme/template/Layout/index.tsx
View File

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