feat: skeleton css-var (#8326)

Co-authored-by: undefined <undefined>
feat-4.3
Shuhari 2025-08-26 00:05:33 +08:00 committed by GitHub
parent e1cfc828ec
commit 2d3f40aa3f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 161 additions and 109 deletions

View File

@ -5,6 +5,7 @@ import initDefaultProps from '../_util/props-util/initDefaultProps';
import useConfigInject from '../config-provider/hooks/useConfigInject'; import useConfigInject from '../config-provider/hooks/useConfigInject';
import Element, { skeletonElementProps } from './Element'; import Element, { skeletonElementProps } from './Element';
import useStyle from './style'; import useStyle from './style';
import useCSSVarCls from '../config-provider/hooks/useCssVarCls';
export const avatarProps = () => { export const avatarProps = () => {
return { return {
@ -24,7 +25,8 @@ const SkeletonAvatar = defineComponent({
}), }),
setup(props) { setup(props) {
const { prefixCls } = useConfigInject('skeleton', props); const { prefixCls } = useConfigInject('skeleton', props);
const [wrapSSR, hashId] = useStyle(prefixCls); const rootCls = useCSSVarCls(prefixCls);
const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const cls = computed(() => const cls = computed(() =>
classNames( classNames(
prefixCls.value, prefixCls.value,
@ -32,6 +34,8 @@ const SkeletonAvatar = defineComponent({
{ {
[`${prefixCls.value}-active`]: props.active, [`${prefixCls.value}-active`]: props.active,
}, },
rootCls.value,
cssVarCls.value,
hashId.value, hashId.value,
), ),
); );

View File

@ -5,6 +5,7 @@ import useConfigInject from '../config-provider/hooks/useConfigInject';
import { initDefaultProps } from '../_util/props-util'; import { initDefaultProps } from '../_util/props-util';
import Element, { skeletonElementProps } from './Element'; import Element, { skeletonElementProps } from './Element';
import useStyle from './style'; import useStyle from './style';
import useCSSVarCls from '../config-provider/hooks/useCssVarCls';
export const skeletonButtonProps = () => { export const skeletonButtonProps = () => {
return { return {
@ -24,7 +25,8 @@ const SkeletonButton = defineComponent({
}), }),
setup(props) { setup(props) {
const { prefixCls } = useConfigInject('skeleton', props); const { prefixCls } = useConfigInject('skeleton', props);
const [wrapSSR, hashId] = useStyle(prefixCls); const rootCls = useCSSVarCls(prefixCls);
const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const cls = computed(() => const cls = computed(() =>
classNames( classNames(
prefixCls.value, prefixCls.value,
@ -33,6 +35,8 @@ const SkeletonButton = defineComponent({
[`${prefixCls.value}-active`]: props.active, [`${prefixCls.value}-active`]: props.active,
[`${prefixCls.value}-block`]: props.block, [`${prefixCls.value}-block`]: props.block,
}, },
rootCls.value,
cssVarCls.value,
hashId.value, hashId.value,
), ),
); );

View File

@ -5,6 +5,7 @@ import omit from '../_util/omit';
import type { SkeletonElementProps } from './Element'; import type { SkeletonElementProps } from './Element';
import { skeletonElementProps } from './Element'; import { skeletonElementProps } from './Element';
import useStyle from './style'; import useStyle from './style';
import useCSSVarCls from '../config-provider/hooks/useCssVarCls';
export type SkeletonImageProps = Omit<SkeletonElementProps, 'size' | 'shape' | 'active'>; export type SkeletonImageProps = Omit<SkeletonElementProps, 'size' | 'shape' | 'active'>;
@ -17,9 +18,16 @@ const SkeletonImage = defineComponent({
props: omit(skeletonElementProps(), ['size', 'shape', 'active']), props: omit(skeletonElementProps(), ['size', 'shape', 'active']),
setup(props) { setup(props) {
const { prefixCls } = useConfigInject('skeleton', props); const { prefixCls } = useConfigInject('skeleton', props);
const [wrapSSR, hashId] = useStyle(prefixCls); const rootCls = useCSSVarCls(prefixCls);
const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const cls = computed(() => const cls = computed(() =>
classNames(prefixCls.value, `${prefixCls.value}-element`, hashId.value), classNames(
prefixCls.value,
`${prefixCls.value}-element`,
rootCls.value,
hashId.value,
cssVarCls.value,
),
); );
return () => { return () => {
return wrapSSR( return wrapSSR(

View File

@ -6,6 +6,7 @@ import type { SkeletonElementProps } from './Element';
import Element, { skeletonElementProps } from './Element'; import Element, { skeletonElementProps } from './Element';
import omit from '../_util/omit'; import omit from '../_util/omit';
import useStyle from './style'; import useStyle from './style';
import useCSSVarCls from '../config-provider/hooks/useCssVarCls';
export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' | 'shape'> { export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' | 'shape'> {
size?: 'large' | 'small' | 'default'; size?: 'large' | 'small' | 'default';
@ -22,7 +23,8 @@ const SkeletonInput = defineComponent({
}, },
setup(props) { setup(props) {
const { prefixCls } = useConfigInject('skeleton', props); const { prefixCls } = useConfigInject('skeleton', props);
const [wrapSSR, hashId] = useStyle(prefixCls); const rootCls = useCSSVarCls(prefixCls);
const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
const cls = computed(() => const cls = computed(() =>
classNames( classNames(
prefixCls.value, prefixCls.value,
@ -31,7 +33,9 @@ const SkeletonInput = defineComponent({
[`${prefixCls.value}-active`]: props.active, [`${prefixCls.value}-active`]: props.active,
[`${prefixCls.value}-block`]: props.block, [`${prefixCls.value}-block`]: props.block,
}, },
rootCls.value,
hashId.value, hashId.value,
cssVarCls.value,
), ),
); );
return () => { return () => {

View File

@ -10,6 +10,7 @@ import Paragraph from './Paragraph';
import useConfigInject from '../config-provider/hooks/useConfigInject'; import useConfigInject from '../config-provider/hooks/useConfigInject';
import Element from './Element'; import Element from './Element';
import useStyle from './style'; import useStyle from './style';
import useCSSVarCls from '../config-provider/hooks/useCssVarCls';
/* This only for skeleton internal. */ /* This only for skeleton internal. */
type SkeletonAvatarProps = Omit<AvatarProps, 'active'>; type SkeletonAvatarProps = Omit<AvatarProps, 'active'>;
@ -90,7 +91,8 @@ const Skeleton = defineComponent({
}), }),
setup(props, { slots }) { setup(props, { slots }) {
const { prefixCls, direction } = useConfigInject('skeleton', props); const { prefixCls, direction } = useConfigInject('skeleton', props);
const [wrapSSR, hashId] = useStyle(prefixCls); const rootCls = useCSSVarCls(prefixCls);
const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
return () => { return () => {
const { loading, avatar, title, paragraph, active, round } = props; const { loading, avatar, title, paragraph, active, round } = props;
@ -155,7 +157,9 @@ const Skeleton = defineComponent({
[`${pre}-active`]: active, [`${pre}-active`]: active,
[`${pre}-rtl`]: direction.value === 'rtl', [`${pre}-rtl`]: direction.value === 'rtl',
[`${pre}-round`]: round, [`${pre}-round`]: round,
[rootCls.value]: true,
[hashId.value]: true, [hashId.value]: true,
[cssVarCls.value]: true,
}); });
return wrapSSR( return wrapSSR(

View File

@ -1,19 +1,52 @@
import type { CSSObject } from '../../_util/cssinjs'; import type { CSSObject } from '../../_util/cssinjs';
import { Keyframes } from '../../_util/cssinjs'; import { Keyframes, unit } from '../../_util/cssinjs';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
export type ComponentToken = { import type { CSSUtil, FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genStyleHooks, mergeToken } from '../../theme/internal';
export interface ComponentToken {
/** @deprecated use gradientFromColor instead. */
color: string; color: string;
/** @deprecated use gradientToColor instead. */
colorGradientEnd: string; colorGradientEnd: string;
}; /**
* @desc
* @descEN Start color of gradient
*/
gradientFromColor: string;
/**
* @desc
* @descEN End color of gradient
*/
gradientToColor: string;
/**
* @desc
* @descEN Height of title skeleton
*/
titleHeight: number | string;
/**
* @desc
* @descEN Border radius of skeleton
*/
blockRadius: number;
/**
* @desc
* @descEN Margin top of paragraph skeleton
*/
paragraphMarginTop: number;
/**
* @desc
* @descEN Line height of paragraph skeleton
*/
paragraphLiHeight: number;
}
const skeletonClsLoading = new Keyframes(`ant-skeleton-loading`, { const skeletonClsLoading = new Keyframes(`ant-skeleton-loading`, {
'0%': { '0%': {
transform: 'translateX(-37.5%)', backgroundPosition: '100% 50%',
}, },
'100%': { '100%': {
transform: 'translateX(37.5%)', backgroundPosition: '0 50%',
}, },
}); });
@ -24,62 +57,44 @@ interface SkeletonToken extends FullToken<'Skeleton'> {
skeletonButtonCls: string; skeletonButtonCls: string;
skeletonInputCls: string; skeletonInputCls: string;
skeletonImageCls: string; skeletonImageCls: string;
imageSizeBase: number; imageSizeBase: number | string;
skeletonTitleHeight: number;
skeletonBlockRadius: number;
skeletonParagraphLineHeight: number;
skeletonParagraphMarginTop: number;
skeletonLoadingBackground: string; skeletonLoadingBackground: string;
skeletonLoadingMotionDuration: string; skeletonLoadingMotionDuration: string;
borderRadius: number; borderRadius: number;
} }
const genSkeletonElementCommonSize = (size: number): CSSObject => ({ const genSkeletonElementCommonSize = (size: number | string): CSSObject => ({
height: size, height: size,
lineHeight: `${size}px`, lineHeight: unit(size),
}); });
const genSkeletonElementAvatarSize = (size: number): CSSObject => ({ const genSkeletonElementAvatarSize = (size: number | string): CSSObject => ({
width: size, width: size,
...genSkeletonElementCommonSize(size), ...genSkeletonElementCommonSize(size),
}); });
const genSkeletonColor = (token: SkeletonToken): CSSObject => ({ const genSkeletonColor = (token: SkeletonToken): CSSObject => ({
position: 'relative',
// fix https://github.com/ant-design/ant-design/issues/36444
// https://monshin.github.io/202109/css/safari-border-radius-overflow-hidden/
/* stylelint-disable-next-line property-no-vendor-prefix,value-no-vendor-prefix */
zIndex: 0,
overflow: 'hidden',
background: 'transparent',
'&::after': {
position: 'absolute',
top: 0,
insetInlineEnd: '-150%',
bottom: 0,
insetInlineStart: '-150%',
background: token.skeletonLoadingBackground, background: token.skeletonLoadingBackground,
backgroundSize: '400% 100%',
animationName: skeletonClsLoading, animationName: skeletonClsLoading,
animationDuration: token.skeletonLoadingMotionDuration, animationDuration: token.skeletonLoadingMotionDuration,
animationTimingFunction: 'ease', animationTimingFunction: 'ease',
animationIterationCount: 'infinite', animationIterationCount: 'infinite',
content: '""',
},
}); });
const genSkeletonElementInputSize = (size: number, calc: CSSUtil['calc']): CSSObject => ({
const genSkeletonElementInputSize = (size: number): CSSObject => ({ width: calc(size).mul(5).equal(),
width: size * 5, minWidth: calc(size).mul(5).equal(),
minWidth: size * 5,
...genSkeletonElementCommonSize(size), ...genSkeletonElementCommonSize(size),
}); });
const genSkeletonElementAvatar = (token: SkeletonToken): CSSObject => { const genSkeletonElementAvatar = (token: SkeletonToken): CSSObject => {
const { skeletonAvatarCls, color, controlHeight, controlHeightLG, controlHeightSM } = token; const { skeletonAvatarCls, gradientFromColor, controlHeight, controlHeightLG, controlHeightSM } =
token;
return { return {
[`${skeletonAvatarCls}`]: { [skeletonAvatarCls]: {
display: 'inline-block', display: 'inline-block',
verticalAlign: 'top', verticalAlign: 'top',
background: color, background: gradientFromColor,
...genSkeletonElementAvatarSize(controlHeight), ...genSkeletonElementAvatarSize(controlHeight),
}, },
[`${skeletonAvatarCls}${skeletonAvatarCls}-circle`]: { [`${skeletonAvatarCls}${skeletonAvatarCls}-circle`]: {
@ -101,50 +116,51 @@ const genSkeletonElementInput = (token: SkeletonToken): CSSObject => {
skeletonInputCls, skeletonInputCls,
controlHeightLG, controlHeightLG,
controlHeightSM, controlHeightSM,
color, gradientFromColor,
calc,
} = token; } = token;
return { return {
[`${skeletonInputCls}`]: { [skeletonInputCls]: {
display: 'inline-block', display: 'inline-block',
verticalAlign: 'top', verticalAlign: 'top',
background: color, background: gradientFromColor,
borderRadius: borderRadiusSM, borderRadius: borderRadiusSM,
...genSkeletonElementInputSize(controlHeight), ...genSkeletonElementInputSize(controlHeight, calc),
}, },
[`${skeletonInputCls}-lg`]: { [`${skeletonInputCls}-lg`]: {
...genSkeletonElementInputSize(controlHeightLG), ...genSkeletonElementInputSize(controlHeightLG, calc),
}, },
[`${skeletonInputCls}-sm`]: { [`${skeletonInputCls}-sm`]: {
...genSkeletonElementInputSize(controlHeightSM), ...genSkeletonElementInputSize(controlHeightSM, calc),
}, },
}; };
}; };
const genSkeletonElementImageSize = (size: number): CSSObject => ({ const genSkeletonElementImageSize = (size: number | string): CSSObject => ({
width: size, width: size,
...genSkeletonElementCommonSize(size), ...genSkeletonElementCommonSize(size),
}); });
const genSkeletonElementImage = (token: SkeletonToken): CSSObject => { const genSkeletonElementImage = (token: SkeletonToken): CSSObject => {
const { skeletonImageCls, imageSizeBase, color, borderRadiusSM } = token; const { skeletonImageCls, imageSizeBase, gradientFromColor, borderRadiusSM, calc } = token;
return { return {
[`${skeletonImageCls}`]: { [skeletonImageCls]: {
display: 'flex', display: 'inline-flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
verticalAlign: 'top', verticalAlign: 'middle',
background: color, background: gradientFromColor,
borderRadius: borderRadiusSM, borderRadius: borderRadiusSM,
...genSkeletonElementImageSize(imageSizeBase * 2), ...genSkeletonElementImageSize(calc(imageSizeBase).mul(2).equal()),
[`${skeletonImageCls}-path`]: { [`${skeletonImageCls}-path`]: {
fill: '#bfbfbf', fill: '#bfbfbf',
}, },
[`${skeletonImageCls}-svg`]: { [`${skeletonImageCls}-svg`]: {
...genSkeletonElementImageSize(imageSizeBase), ...genSkeletonElementImageSize(imageSizeBase),
maxWidth: imageSizeBase * 4, maxWidth: calc(imageSizeBase).mul(4).equal(),
maxHeight: imageSizeBase * 4, maxHeight: calc(imageSizeBase).mul(4).equal(),
}, },
[`${skeletonImageCls}-svg${skeletonImageCls}-svg-circle`]: { [`${skeletonImageCls}-svg${skeletonImageCls}-svg-circle`]: {
borderRadius: '50%', borderRadius: '50%',
@ -173,9 +189,9 @@ const genSkeletonElementButtonShape = (
}; };
}; };
const genSkeletonElementButtonSize = (size: number): CSSObject => ({ const genSkeletonElementButtonSize = (size: number, calc: CSSUtil['calc']): CSSObject => ({
width: size * 2, width: calc(size).mul(2).equal(),
minWidth: size * 2, minWidth: calc(size).mul(2).equal(),
...genSkeletonElementCommonSize(size), ...genSkeletonElementCommonSize(size),
}); });
@ -186,27 +202,28 @@ const genSkeletonElementButton = (token: SkeletonToken): CSSObject => {
controlHeight, controlHeight,
controlHeightLG, controlHeightLG,
controlHeightSM, controlHeightSM,
color, gradientFromColor,
calc,
} = token; } = token;
return { return {
[`${skeletonButtonCls}`]: { [skeletonButtonCls]: {
display: 'inline-block', display: 'inline-block',
verticalAlign: 'top', verticalAlign: 'top',
background: color, background: gradientFromColor,
borderRadius: borderRadiusSM, borderRadius: borderRadiusSM,
width: controlHeight * 2, width: calc(controlHeight).mul(2).equal(),
minWidth: controlHeight * 2, minWidth: calc(controlHeight).mul(2).equal(),
...genSkeletonElementButtonSize(controlHeight), ...genSkeletonElementButtonSize(controlHeight, calc),
}, },
...genSkeletonElementButtonShape(token, controlHeight, skeletonButtonCls), ...genSkeletonElementButtonShape(token, controlHeight, skeletonButtonCls),
[`${skeletonButtonCls}-lg`]: { [`${skeletonButtonCls}-lg`]: {
...genSkeletonElementButtonSize(controlHeightLG), ...genSkeletonElementButtonSize(controlHeightLG, calc),
}, },
...genSkeletonElementButtonShape(token, controlHeightLG, `${skeletonButtonCls}-lg`), ...genSkeletonElementButtonShape(token, controlHeightLG, `${skeletonButtonCls}-lg`),
[`${skeletonButtonCls}-sm`]: { [`${skeletonButtonCls}-sm`]: {
...genSkeletonElementButtonSize(controlHeightSM), ...genSkeletonElementButtonSize(controlHeightSM, calc),
}, },
...genSkeletonElementButtonShape(token, controlHeightSM, `${skeletonButtonCls}-sm`), ...genSkeletonElementButtonShape(token, controlHeightSM, `${skeletonButtonCls}-sm`),
}; };
@ -225,19 +242,19 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
controlHeight, controlHeight,
controlHeightLG, controlHeightLG,
controlHeightSM, controlHeightSM,
color, gradientFromColor,
padding, padding,
marginSM, marginSM,
borderRadius, borderRadius,
skeletonTitleHeight, titleHeight,
skeletonBlockRadius, blockRadius,
skeletonParagraphLineHeight, paragraphLiHeight,
controlHeightXS, controlHeightXS,
skeletonParagraphMarginTop, paragraphMarginTop,
} = token; } = token;
return { return {
[`${componentCls}`]: { [componentCls]: {
display: 'table', display: 'table',
width: '100%', width: '100%',
@ -247,10 +264,10 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
verticalAlign: 'top', verticalAlign: 'top',
// Avatar // Avatar
[`${skeletonAvatarCls}`]: { [skeletonAvatarCls]: {
display: 'inline-block', display: 'inline-block',
verticalAlign: 'top', verticalAlign: 'top',
background: color, background: gradientFromColor,
...genSkeletonElementAvatarSize(controlHeight), ...genSkeletonElementAvatarSize(controlHeight),
}, },
[`${skeletonAvatarCls}-circle`]: { [`${skeletonAvatarCls}-circle`]: {
@ -269,25 +286,25 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
verticalAlign: 'top', verticalAlign: 'top',
// Title // Title
[`${skeletonTitleCls}`]: { [skeletonTitleCls]: {
width: '100%', width: '100%',
height: skeletonTitleHeight, height: titleHeight,
background: color, background: gradientFromColor,
borderRadius: skeletonBlockRadius, borderRadius: blockRadius,
[`+ ${skeletonParagraphCls}`]: { [`+ ${skeletonParagraphCls}`]: {
marginBlockStart: controlHeightSM, marginBlockStart: controlHeightSM,
}, },
}, },
// paragraph // paragraph
[`${skeletonParagraphCls}`]: { [skeletonParagraphCls]: {
padding: 0, padding: 0,
'> li': { '> li': {
width: '100%', width: '100%',
height: skeletonParagraphLineHeight, height: paragraphLiHeight,
listStyle: 'none', listStyle: 'none',
background: color, background: gradientFromColor,
borderRadius: skeletonBlockRadius, borderRadius: blockRadius,
'+ li': { '+ li': {
marginBlockStart: controlHeightXS, marginBlockStart: controlHeightXS,
}, },
@ -307,11 +324,11 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
}, },
[`${componentCls}-with-avatar ${componentCls}-content`]: { [`${componentCls}-with-avatar ${componentCls}-content`]: {
// Title // Title
[`${skeletonTitleCls}`]: { [skeletonTitleCls]: {
marginBlockStart: marginSM, marginBlockStart: marginSM,
[`+ ${skeletonParagraphCls}`]: { [`+ ${skeletonParagraphCls}`]: {
marginBlockStart: skeletonParagraphMarginTop, marginBlockStart: paragraphMarginTop,
}, },
}, },
}, },
@ -329,11 +346,11 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
[`${componentCls}${componentCls}-block`]: { [`${componentCls}${componentCls}-block`]: {
width: '100%', width: '100%',
[`${skeletonButtonCls}`]: { [skeletonButtonCls]: {
width: '100%', width: '100%',
}, },
[`${skeletonInputCls}`]: { [skeletonInputCls]: {
width: '100%', width: '100%',
}, },
}, },
@ -354,10 +371,26 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
}; };
// ============================== Export ============================== // ============================== Export ==============================
export default genComponentStyleHook( export const prepareComponentToken: GetDefaultToken<'Skeleton'> = token => {
const { colorFillContent, colorFill } = token;
const gradientFromColor = colorFillContent;
const gradientToColor = colorFill;
return {
color: gradientFromColor,
colorGradientEnd: gradientToColor,
gradientFromColor,
gradientToColor,
titleHeight: token.controlHeight / 2,
blockRadius: token.borderRadiusSM,
paragraphMarginTop: token.marginLG + token.marginXXS,
paragraphLiHeight: token.controlHeight / 2,
};
};
export default genStyleHooks(
'Skeleton', 'Skeleton',
token => { token => {
const { componentCls } = token; const { componentCls, calc } = token;
const skeletonToken = mergeToken<SkeletonToken>(token, { const skeletonToken = mergeToken<SkeletonToken>(token, {
skeletonAvatarCls: `${componentCls}-avatar`, skeletonAvatarCls: `${componentCls}-avatar`,
@ -366,23 +399,18 @@ export default genComponentStyleHook(
skeletonButtonCls: `${componentCls}-button`, skeletonButtonCls: `${componentCls}-button`,
skeletonInputCls: `${componentCls}-input`, skeletonInputCls: `${componentCls}-input`,
skeletonImageCls: `${componentCls}-image`, skeletonImageCls: `${componentCls}-image`,
imageSizeBase: token.controlHeight * 1.5, imageSizeBase: calc(token.controlHeight).mul(1.5).equal(),
skeletonTitleHeight: token.controlHeight / 2,
skeletonBlockRadius: token.borderRadiusSM,
skeletonParagraphLineHeight: token.controlHeight / 2,
skeletonParagraphMarginTop: token.marginLG + token.marginXXS,
borderRadius: 100, // Large number to make capsule shape borderRadius: 100, // Large number to make capsule shape
skeletonLoadingBackground: `linear-gradient(90deg, ${token.color} 25%, ${token.colorGradientEnd} 37%, ${token.color} 63%)`, skeletonLoadingBackground: `linear-gradient(90deg, ${token.gradientFromColor} 25%, ${token.gradientToColor} 37%, ${token.gradientFromColor} 63%)`,
skeletonLoadingMotionDuration: '1.4s', skeletonLoadingMotionDuration: '1.4s',
}); });
return [genBaseStyle(skeletonToken)]; return [genBaseStyle(skeletonToken)];
}, },
token => { prepareComponentToken,
const { colorFillContent, colorFill } = token; {
deprecatedTokens: [
return { ['color', 'gradientFromColor'],
color: colorFillContent, ['colorGradientEnd', 'gradientToColor'],
colorGradientEnd: colorFill, ],
};
}, },
); );