ant-design/components/layout/style/index.ts
二货爱吃白萝卜 4fffbea08f
fix: Sider support ConfigProvider theme (#50780)
* fix: Sider support cp

* fix: css layout

* chore: size limit
2024-09-10 15:43:58 +08:00

230 lines
5.6 KiB
TypeScript

import type { CSSProperties } from 'react';
import { unit } from '@ant-design/cssinjs';
import type { CSSObject } from '@ant-design/cssinjs';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genStyleHooks } from '../../theme/internal';
export interface ComponentToken {
/** @deprecated Use headerBg instead */
colorBgHeader: string;
/** @deprecated Use bodyBg instead */
colorBgBody: string;
/** @deprecated Use triggerBg instead */
colorBgTrigger: string;
/**
* @desc 主体部分背景色
* @descEN Background Color of body
*/
bodyBg: string;
/**
* @desc 顶部背景色
* @descEN Background Color of header
*/
headerBg: string;
/**
* @desc 顶部高度
* @descEN Height of header
*/
headerHeight: number | string;
/**
* @desc 顶部内边距
* @descEN Padding of header
*/
headerPadding: CSSProperties['padding'];
/**
* @desc 顶部文字颜色
* @descEN Text color of header
*/
headerColor: string;
/**
* @desc 页脚内边距
* @descEN Padding of footer
*/
footerPadding: CSSProperties['padding'];
/**
* @desc 页脚背景色
* @descEN Background Color of footer
*/
footerBg: string;
/**
* @desc 侧边栏背景色
* @descEN Background Color of sider
*/
siderBg: string;
/**
* @desc 侧边栏开关高度
* @descEN Height of sider trigger
*/
triggerHeight: number | string;
/**
* @desc 侧边栏开关背景色
* @descEN Background Color of sider trigger
*/
triggerBg: string;
/**
* @desc 侧边栏开关颜色
* @descEN Color of sider trigger
*/
triggerColor: string;
/**
* @desc collapse 为 0 时侧边栏开关宽度
* @descEN Width of sider trigger when collapse is 0
*/
zeroTriggerWidth: number;
/**
* @desc collapse 为 0 时侧边栏开关高度
* @descEN Height of sider trigger when collapse is 0
*/
zeroTriggerHeight: number;
/**
* @desc 亮色主题侧边栏背景色
* @descEN Background Color of light theme sider
*/
lightSiderBg: string;
/**
* @desc 亮色主题侧边栏开关背景色
* @descEN Background Color of light theme sider trigger
*/
lightTriggerBg: string;
/**
* @desc 亮色主题侧边栏开关颜色
* @descEN Color of light theme sider trigger
*/
lightTriggerColor: string;
}
export interface LayoutToken extends FullToken<'Layout'> {}
const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
const {
antCls, // .ant
componentCls, // .ant-layout
colorText,
footerBg,
headerHeight,
headerPadding,
headerColor,
footerPadding,
fontSize,
bodyBg,
headerBg,
} = token;
return {
[componentCls]: {
display: 'flex',
flex: 'auto',
flexDirection: 'column',
/* fix firefox can't set height smaller than content on flex item */
minHeight: 0,
background: bodyBg,
'&, *': {
boxSizing: 'border-box',
},
[`&${componentCls}-has-sider`]: {
flexDirection: 'row',
[`> ${componentCls}, > ${componentCls}-content`]: {
// https://segmentfault.com/a/1190000019498300
width: 0,
},
},
[`${componentCls}-header, &${componentCls}-footer`]: {
flex: '0 0 auto',
},
// RTL
'&-rtl': {
direction: 'rtl',
},
},
// ==================== Header ====================
[`${componentCls}-header`]: {
height: headerHeight,
padding: headerPadding,
color: headerColor,
lineHeight: unit(headerHeight),
background: headerBg,
// Other components/menu/style/index.less line:686
// Integration with header element so menu items have the same height
[`${antCls}-menu`]: {
lineHeight: 'inherit',
},
},
// ==================== Footer ====================
[`${componentCls}-footer`]: {
padding: footerPadding,
color: colorText,
fontSize,
background: footerBg,
},
// =================== Content ====================
[`${componentCls}-content`]: {
flex: 'auto',
color: colorText,
// fix firefox can't set height smaller than content on flex item
minHeight: 0,
},
};
};
export const prepareComponentToken: GetDefaultToken<'Layout'> = (token) => {
const {
colorBgLayout,
controlHeight,
controlHeightLG,
colorText,
controlHeightSM,
marginXXS,
colorTextLightSolid,
colorBgContainer,
} = token;
const paddingInline = controlHeightLG * 1.25;
return {
// Deprecated
colorBgHeader: '#001529',
colorBgBody: colorBgLayout,
colorBgTrigger: '#002140',
bodyBg: colorBgLayout,
headerBg: '#001529',
headerHeight: controlHeight * 2,
headerPadding: `0 ${paddingInline}px`,
headerColor: colorText,
footerPadding: `${controlHeightSM}px ${paddingInline}px`,
footerBg: colorBgLayout,
siderBg: '#001529',
triggerHeight: controlHeightLG + marginXXS * 2,
triggerBg: '#002140',
triggerColor: colorTextLightSolid,
zeroTriggerWidth: controlHeightLG,
zeroTriggerHeight: controlHeightLG,
lightSiderBg: colorBgContainer,
lightTriggerBg: colorBgContainer,
lightTriggerColor: colorText,
};
};
// ============================== Export ==============================
export const DEPRECATED_TOKENS: [keyof ComponentToken, keyof ComponentToken][] = [
['colorBgBody', 'bodyBg'],
['colorBgHeader', 'headerBg'],
['colorBgTrigger', 'triggerBg'],
];
export default genStyleHooks('Layout', (token) => [genLayoutStyle(token)], prepareComponentToken, {
deprecatedTokens: DEPRECATED_TOKENS,
});