feat: layout support css variable theme (#45794)

* feat: layout support cssVar

* feat: optimize code

* feat: optimize code

* feat: optimize code
This commit is contained in:
kiner-tang(文辉) 2023-11-13 11:24:37 +08:00 committed by GitHub
parent df169cc4c9
commit cb6d377f61
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 54 additions and 46 deletions

View File

@ -6,6 +6,7 @@ import { ConfigContext } from '../config-provider';
import { LayoutContext } from './context';
import useHasSider from './hooks/useHasSider';
import useStyle from './style';
import useCSSVar from './style/cssVar';
export interface GeneratorProps {
suffixCls?: string;
@ -83,7 +84,8 @@ const BasicLayout = React.forwardRef<HTMLDivElement, BasicPropsWithTagName>((pro
const mergedHasSider = useHasSider(siders, children, hasSider);
const [wrapSSR, hashId] = useStyle(prefixCls);
const [, hashId] = useStyle(prefixCls);
const wrapCSSVar = useCSSVar(prefixCls);
const classString = classNames(
prefixCls,
{
@ -110,7 +112,7 @@ const BasicLayout = React.forwardRef<HTMLDivElement, BasicPropsWithTagName>((pro
[],
);
return wrapSSR(
return wrapCSSVar(
<LayoutContext.Provider value={contextValue}>
<Tag
ref={ref}

View File

@ -0,0 +1,4 @@
import { genCSSVarRegister } from '../../theme/internal';
import { prepareComponentToken } from '.';
export default genCSSVarRegister('Layout', prepareComponentToken);

View File

@ -1,6 +1,6 @@
import type { CSSObject } from '@ant-design/cssinjs';
import { unit, type CSSObject } from '@ant-design/cssinjs';
import type { CSSProperties } from 'react';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genComponentStyleHook } from '../../theme/internal';
import genLayoutLightStyle from './light';
@ -181,7 +181,7 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
zIndex: 1,
height: triggerHeight,
color: triggerColor,
lineHeight: `${triggerHeight}px`,
lineHeight: unit(triggerHeight),
textAlign: 'center',
background: triggerBg,
cursor: 'pointer',
@ -196,7 +196,7 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
'&-trigger': {
position: 'absolute',
top: headerHeight,
insetInlineEnd: -zeroTriggerWidth,
insetInlineEnd: token.calc(zeroTriggerWidth).mul(-1).equal(),
zIndex: 1,
width: zeroTriggerWidth,
height: zeroTriggerHeight,
@ -227,7 +227,7 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
},
'&-right': {
insetInlineStart: -zeroTriggerWidth,
insetInlineStart: token.calc(zeroTriggerWidth).mul(-1).equal(),
borderStartStartRadius: borderRadius,
borderStartEndRadius: 0,
borderEndEndRadius: 0,
@ -249,7 +249,7 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
height: headerHeight,
padding: headerPadding,
color: headerColor,
lineHeight: `${headerHeight}px`,
lineHeight: unit(headerHeight),
background: headerBg,
// Other components/menu/style/index.less line:686
@ -277,48 +277,50 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
};
};
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 default genComponentStyleHook(
'Layout',
(token) => [genLayoutStyle(token)],
(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,
};
},
prepareComponentToken,
{
deprecatedTokens: [
['colorBgBody', 'bodyBg'],