mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

refactor: progress full token (#35745)

Browse Source 
* refactor: progress full token

* refactor: token

* refactor: more token
This commit is contained in:
MadCcc 2022-05-27 10:47:28 +08:00 committed by GitHub
parent 24f684925a
commit 53c1b3fce2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 44 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
components/progress/style/index.tsx
View File

@ -4,18 +4,16 @@ import { Keyframes } from '@ant-design/cssinjs';
import type { FullToken, GenerateStyle } from '../../_util/theme';
import { genComponentStyleHook, mergeToken, resetComponent } from '../../_util/theme';
export interface ComponentToken {
remainingColor: string;
defaultColor: string;
stepsItemBg: string;
infoTextColor: string;
}
export interface ComponentToken {}
interface ProgressToken extends FullToken<'Progress'> {
radius: string;
infoTextColor: string;
circleTextFontSize: string;
textFontSize: string;
progressLineRadius: number;
progressInfoTextColor: string;
progressRemainingColor: string;
progressDefaultColor: string;
progressStepMinWidth: number;
progressStepMarginInlineEnd: number;
progressActiveMotionDuration: string;
}
const antProgressActive = new Keyframes('antProgressActive', {
@ -72,21 +70,21 @@ const genBaseStyle: GenerateStyle<ProgressToken> = (token: ProgressToken) => {
width: '100%',
overflow: 'hidden',
verticalAlign: 'middle',
backgroundColor: token.remainingColor,
borderRadius: token.radius,
backgroundColor: token.progressRemainingColor,
borderRadius: token.progressLineRadius,
},
[`${progressCls}-inner:not(${progressCls}-circle-gradient)`]: {
[`${progressCls}-circle-path`]: {
stroke: token.blue,
stroke: token.colorInfo,
},
},
[`&${progressCls}-success-bg, ${progressCls}-bg`]: {
position: 'relative',
backgroundColor: token.blue,
borderRadius: token.radius,
transition: `all ${token.motionDurationSlow} cubic-bezier(0.08, 0.82, 0.17, 1) 0s`, // FIXME: hard code in v4
backgroundColor: token.colorInfo,
borderRadius: token.progressLineRadius,
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOutCirc}`,
},
[`${progressCls}-success-bg`]: {
@ -98,10 +96,9 @@ const genBaseStyle: GenerateStyle<ProgressToken> = (token: ProgressToken) => {
[`${progressCls}-text`]: {
display: 'inline-block',
width: '2em', // FIXME: hardcode in v4
marginInlineStart: token.marginXS, // FIXME: hard code in v4
color: token.infoTextColor,
fontSize: token.textFontSize,
width: '2em',
marginInlineStart: token.marginXS,
color: token.progressInfoTextColor,
lineHeight: 1,
whiteSpace: 'nowrap',
textAlign: 'start',
@ -117,10 +114,10 @@ const genBaseStyle: GenerateStyle<ProgressToken> = (token: ProgressToken) => {
position: 'absolute',
inset: 0,
background: token.colorBgComponent,
borderRadius: 10, // FIXME: hard code in v4
borderRadius: token.progressLineRadius,
opacity: 0,
animationName: antProgressActive,
animationDuration: '2.4s', // FIXME: hard code in v4
animationDuration: token.progressActiveMotionDuration,
animationTimingFunction: token.motionEaseOutQuint,
animationIterationCount: 'infinite',
content: '""',
@ -172,7 +169,7 @@ const genCircleStyle: GenerateStyle<ProgressToken> = (token: ProgressToken): CSS
},
[`${progressCls}-circle-trail`]: {
stroke: token.remainingColor,
stroke: token.progressRemainingColor,
},
[`&${progressCls}-circle ${progressCls}-inner`]: {
@ -189,14 +186,13 @@ const genCircleStyle: GenerateStyle<ProgressToken> = (token: ProgressToken): CSS
margin: 0,
padding: 0,
color: token.colorText,
fontSize: token.circleTextFontSize,
lineHeight: 1,
whiteSpace: 'normal',
textAlign: 'center',
transform: `translate(-50%, -50%)`,
[iconPrefixCls]: {
fontSize: `${14 / 12}em`, // FIXME: hard code in v4
fontSize: `${token.fontSize / token.fontSizeSM}em`,
},
},
@ -229,13 +225,13 @@ const genStepStyle: GenerateStyle<ProgressToken> = (token: ProgressToken): CSSOb
},
'&-item': {
flexShrink: 0,
minWidth: 2, // FIXME: hardcode in v4
marginInlineEnd: 2, // FIXME: hardcode in v4
background: token.stepsItemBg,
minWidth: token.progressStepMinWidth,
marginInlineEnd: token.progressStepMarginInlineEnd,
background: token.progressRemainingColor,
transition: `all ${token.motionDurationSlow}`,
'&-active': {
background: token.blue,
background: token.colorInfo,
},
},
},
@ -256,25 +252,22 @@ const genSmallLine: GenerateStyle<ProgressToken> = (token: ProgressToken): CSSOb
};
};
export default genComponentStyleHook(
'Progress',
token => {
const progressToken = mergeToken<ProgressToken>(token, {
radius: '100px',
circleTextFontSize: '1em', // FIXME: hard code in v4
textFontSize: '1em', // FIXME: hard code in v4
});
return [
genBaseStyle(progressToken),
genCircleStyle(progressToken),
genStepStyle(progressToken),
genSmallLine(progressToken),
];
},
token => ({
defaultColor: token.blue,
remainingColor: 'rgba(0, 0, 0, 0.04)',
stepsItemBg: '#f3f3f3',
infoTextColor: '#000000d9',
}),
);
export default genComponentStyleHook('Progress', token => {
const progressStepMarginInlineEnd = token.marginXXS / 2;
const progressToken = mergeToken<ProgressToken>(token, {
progressLineRadius: 100, // magic for capsule shape, should be a very large number
progressInfoTextColor: token.colorText,
progressDefaultColor: token.colorInfo,
progressRemainingColor: token.colorBgContainer,
progressStepMarginInlineEnd,
progressStepMinWidth: progressStepMarginInlineEnd,
progressActiveMotionDuration: '2.4s',
});
return [
genBaseStyle(progressToken),
genCircleStyle(progressToken),
genStepStyle(progressToken),
genSmallLine(progressToken),
];
});