mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-01 11:39:28 +08:00
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:
parent
df169cc4c9
commit
cb6d377f61
@ -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}
|
||||
|
4
components/layout/style/cssVar.ts
Normal file
4
components/layout/style/cssVar.ts
Normal file
@ -0,0 +1,4 @@
|
||||
import { genCSSVarRegister } from '../../theme/internal';
|
||||
import { prepareComponentToken } from '.';
|
||||
|
||||
export default genCSSVarRegister('Layout', prepareComponentToken);
|
@ -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'],
|
||||
|
Loading…
Reference in New Issue
Block a user