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

refactor: full token (#35845)

Browse Source
This commit is contained in:
二货机器人 2022-06-01 11:16:52 +08:00 committed by GitHub
parent 997cafaeae
commit 7b73b62c57
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 27 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,12 +12,10 @@ interface SegmentedToken extends FullToken<'Segmented'> {
segmentedSelectedBg: string; segmentedSelectedBg: string;
segmentedLabelColor: string; segmentedLabelColor: string;
segmentedLabelHoverColor: string; segmentedLabelHoverColor: string;
segmentedPaddingVertical: number;
segmentedPaddingVerticalLG: number;
segmentedPaddingVerticalSM: number;
segmentedPaddingHorizontal: number; segmentedPaddingHorizontal: number;
segmentedPaddingHorizontalSM: number; segmentedPaddingHorizontalSM: number;
segmentedContainerPadding: number; segmentedContainerPadding: number;
segmentedSelectedItemBoxShadow: string;
} }
// ============================== Mixins ============================== // ============================== Mixins ==============================
@ -30,18 +28,11 @@ function segmentedDisabledItem(cls: string, token: SegmentedToken): CSSObject {
}; };
} }
// FIXME: hard code
const segmentedSelectedItemBoxShadow = [
`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(',');
function getSegmentedItemSelectedStyle(token: SegmentedToken): CSSObject { function getSegmentedItemSelectedStyle(token: SegmentedToken): CSSObject {
return { return {
backgroundColor: token.segmentedSelectedBg, backgroundColor: token.segmentedSelectedBg,
borderRadius: token.controlRadius, borderRadius: token.controlRadius,
boxShadow: segmentedSelectedItemBoxShadow, boxShadow: token.segmentedSelectedItemBoxShadow,
}; };
} }
@ -115,7 +106,6 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
}, },
'&-label': { '&-label': {
// FIXME: hard code
minHeight: token.controlHeight - token.segmentedContainerPadding * 2, minHeight: token.controlHeight - token.segmentedContainerPadding * 2,
lineHeight: `${token.controlHeight - token.segmentedContainerPadding * 2}px`, lineHeight: `${token.controlHeight - token.segmentedContainerPadding * 2}px`,
padding: `0 ${token.segmentedPaddingHorizontal}px`, padding: `0 ${token.segmentedPaddingHorizontal}px`,
@ -124,7 +114,6 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
// syntactic sugar to add `icon` for Segmented Item // syntactic sugar to add `icon` for Segmented Item
'&-icon + *': { '&-icon + *': {
// FIXME: hard code
marginInlineEnd: token.marginSM / 2, marginInlineEnd: token.marginSM / 2,
}, },
@ -141,7 +130,6 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
// size styles // size styles
[`&&-lg ${componentCls}-item-label`]: { [`&&-lg ${componentCls}-item-label`]: {
// FIXME: hard code
minHeight: token.controlHeightLG - token.segmentedContainerPadding * 2, minHeight: token.controlHeightLG - token.segmentedContainerPadding * 2,
lineHeight: `${token.controlHeightLG - token.segmentedContainerPadding * 2}px`, lineHeight: `${token.controlHeightLG - token.segmentedContainerPadding * 2}px`,
padding: `0 ${token.segmentedPaddingHorizontal}px`, padding: `0 ${token.segmentedPaddingHorizontal}px`,
@ -149,7 +137,6 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
}, },
[`&&-sm ${componentCls}-item-label`]: { [`&&-sm ${componentCls}-item-label`]: {
// FIXME: hard code
minHeight: token.controlHeightSM - token.segmentedContainerPadding * 2, minHeight: token.controlHeightSM - token.segmentedContainerPadding * 2,
lineHeight: `${token.controlHeightSM - token.segmentedContainerPadding * 2}px`, lineHeight: `${token.controlHeightSM - token.segmentedContainerPadding * 2}px`,
padding: `0 ${token.segmentedPaddingHorizontalSM}px`, padding: `0 ${token.segmentedPaddingHorizontalSM}px`,
@ -182,34 +169,32 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
// ============================== Export ============================== // ============================== Export ==============================
export default genComponentStyleHook('Segmented', token => { export default genComponentStyleHook('Segmented', token => {
const {
colorBgComponentSecondary,
colorBgComponent,
colorTextSecondary,
colorText,
lineWidthBold,
controlLineWidth,
} = token;
const segmentedSelectedItemBoxShadow = [
`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(',');
const segmentedToken = mergeToken<SegmentedToken>(token, { const segmentedToken = mergeToken<SegmentedToken>(token, {
// FIXME: hard code segmentedSelectedItemBoxShadow,
segmentedBg: new TinyColor('#000').setAlpha(0.04).toRgbString(),
// FIXME: hard code segmentedBg: colorBgComponentSecondary,
segmentedHoverBg: new TinyColor('#000').setAlpha(0.06).toRgbString(), segmentedHoverBg: new TinyColor(colorBgComponentSecondary).darken(2).toRgbString(),
// FIXME: hard code segmentedSelectedBg: colorBgComponent,
segmentedSelectedBg: '#fff', segmentedLabelColor: colorTextSecondary,
// FIXME: hard code segmentedLabelHoverColor: colorText,
segmentedLabelColor: new TinyColor('#000').setAlpha(0.65).toRgbString(), segmentedPaddingHorizontal: token.controlPaddingHorizontal - controlLineWidth,
// FIXME: hard code segmentedPaddingHorizontalSM: token.controlPaddingHorizontalSM - controlLineWidth,
segmentedLabelHoverColor: '#262626', segmentedContainerPadding: lineWidthBold,
segmentedPaddingVertical: Math.max(
Math.round(((token.controlHeight - token.fontSize * token.lineHeight) / 2) * 10) / 10 -
token.controlLineWidth,
3,
),
segmentedPaddingVerticalLG:
Math.ceil(((token.controlHeightLG - token.fontSizeLG * token.lineHeight) / 2) * 10) / 10 -
token.controlLineWidth,
segmentedPaddingVerticalSM: Math.max(
Math.round(((token.controlHeightSM - token.fontSize * token.lineHeight) / 2) * 10) / 10 -
token.controlLineWidth,
0,
),
segmentedPaddingHorizontal: token.controlPaddingHorizontal - token.controlLineWidth,
segmentedPaddingHorizontalSM: token.controlPaddingHorizontalSM - token.controlLineWidth,
// FIXME: hard code
segmentedContainerPadding: token.paddingXXS / 2,
}); });
return [genSegmentedStyle(segmentedToken)]; return [genSegmentedStyle(segmentedToken)];
}); });