mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
refactor: More alias token (#34658)
* chore: rm disabled color * chore: color heading * chore: shows tokn * chore: fix color mapping * chore: status colors * chore: durations * chore: outline color * chore: comment info * chore: background color * chore: merge nexr
This commit is contained in:
二货机器人
GitHub
parent
950095971b
commit
b967f9eb81
@ -44,6 +44,7 @@ export interface SeedToken extends PresetColorType {
|
||||
colorInfo: string;
|
||||
colorText: string;
|
||||
colorTextLightSolid: string;
|
||||
/** Base component background color. Will derivative container background color with this */
|
||||
colorBg: string;
|
||||
|
||||
// Font
|
||||
@ -59,7 +60,7 @@ export interface SeedToken extends PresetColorType {
|
||||
|
||||
// Motion
|
||||
motionUnit: number;
|
||||
motionBaseStep: number;
|
||||
motionBase: number;
|
||||
motionEaseInOutCirc: string;
|
||||
motionEaseInOut: string;
|
||||
motionEaseOutBack: string;
|
||||
@ -85,10 +86,15 @@ export interface DerivativeToken extends SeedToken, ColorPalettes {
|
||||
// Color
|
||||
colorPrimaryHover: string;
|
||||
colorPrimaryActive: string;
|
||||
colorPrimaryOutline: string;
|
||||
|
||||
colorWarningHover: string;
|
||||
colorWarningActive: string;
|
||||
colorWarningOutline: string;
|
||||
|
||||
colorErrorHover: string;
|
||||
colorErrorActive: string;
|
||||
colorErrorOutline: string;
|
||||
|
||||
colorText2: string;
|
||||
colorTextBelow: string;
|
||||
@ -116,9 +122,8 @@ export interface DerivativeToken extends SeedToken, ColorPalettes {
|
||||
gridSpaceXXL: number;
|
||||
|
||||
// Motion
|
||||
motionDurationBase: string;
|
||||
motionDurationMd: string;
|
||||
motionDurationFast: string;
|
||||
motionDurationMid: string;
|
||||
motionDurationSlow: string;
|
||||
|
||||
// Radius
|
||||
@ -164,49 +169,35 @@ export interface AliasToken extends DerivativeToken {
|
||||
controlLineType: string;
|
||||
controlRadius: number;
|
||||
controlOutlineWidth: number;
|
||||
controlItemBgHover: string; // Note. It also is a color
|
||||
controlItemBgActive: string; // Note. It also is a color
|
||||
|
||||
// Color
|
||||
colorBorder: string;
|
||||
colorSplit: string;
|
||||
colorTextSecondary: string;
|
||||
colorTextDisabled: string;
|
||||
/** Placeholder text color */
|
||||
colorPlaceholder: string;
|
||||
colorTextHeading: string;
|
||||
colorBgContainer: string;
|
||||
colorBgComponent: string;
|
||||
colorBgComponentDisabled: string;
|
||||
|
||||
// =============== Legacy: should be remove ===============
|
||||
placeholderColor: string;
|
||||
|
||||
disabledColor: string;
|
||||
|
||||
iconColorHover: string;
|
||||
|
||||
headingColor: string;
|
||||
|
||||
itemHoverBackground: string;
|
||||
|
||||
padding: number;
|
||||
margin: number;
|
||||
|
||||
background: string;
|
||||
backgroundLight: string;
|
||||
|
||||
componentBackground: string;
|
||||
componentBackgroundDisabled: string;
|
||||
|
||||
zIndexDropdown: number;
|
||||
zIndexAffix: number;
|
||||
|
||||
boxShadow?: string;
|
||||
boxShadow: string;
|
||||
|
||||
// =============== Legacy: should be remove ===============
|
||||
primaryHoverColor: string;
|
||||
primaryActiveColor: string;
|
||||
primaryOutlineColor: string;
|
||||
errorHoverColor: string;
|
||||
errorActiveColor: string;
|
||||
errorOutlineColor: string;
|
||||
warningHoverColor: string;
|
||||
warningOutlineColor: string;
|
||||
itemActiveBackground: string;
|
||||
|
||||
highlightColor: string;
|
||||
|
||||
linkColor: string;
|
||||
@ -226,10 +217,6 @@ export interface AliasToken extends DerivativeToken {
|
||||
marginLG: number;
|
||||
marginXXS: number;
|
||||
|
||||
duration: string;
|
||||
durationMid: string;
|
||||
durationFast: string;
|
||||
|
||||
primaryColors: string[];
|
||||
errorColors: string[];
|
||||
warningColors: string[];
|
||||
|
||||
@ -27,7 +27,7 @@ export function derivative(token: SeedToken): DerivativeToken {
|
||||
colorWarning,
|
||||
colorError,
|
||||
motionUnit,
|
||||
motionBaseStep,
|
||||
motionBase,
|
||||
fontSizeBase,
|
||||
sizeUnit,
|
||||
sizeBaseStep,
|
||||
@ -65,10 +65,9 @@ export function derivative(token: SeedToken): DerivativeToken {
|
||||
...colorPalettes,
|
||||
|
||||
// motion
|
||||
motionDurationBase: `${motionUnit * motionBaseStep}s`,
|
||||
motionDurationMd: `${motionUnit * (motionBaseStep - 1)}s`,
|
||||
motionDurationFast: `${motionUnit * (motionBaseStep - 2)}s`,
|
||||
motionDurationSlow: `${motionUnit * (motionBaseStep + 1)}s`,
|
||||
motionDurationFast: `${motionBase + motionUnit * 1}s`,
|
||||
motionDurationMid: `${motionBase + motionUnit * 2}s`,
|
||||
motionDurationSlow: `${motionBase + motionUnit * 3}s`,
|
||||
|
||||
// font
|
||||
fontSizes: fontSizes.map(fs => fs.size),
|
||||
@ -96,12 +95,15 @@ export function derivative(token: SeedToken): DerivativeToken {
|
||||
colorBgBelow: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(),
|
||||
colorBgBelow2: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(),
|
||||
|
||||
colorErrorActive: errorColors[6],
|
||||
colorErrorHover: errorColors[4],
|
||||
colorPrimaryActive: primaryColors[6],
|
||||
colorPrimaryHover: primaryColors[4],
|
||||
colorPrimaryOutline: new TinyColor(colorPrimary).setAlpha(0.2).toRgbString(),
|
||||
colorErrorActive: errorColors[6],
|
||||
colorErrorHover: errorColors[4],
|
||||
colorErrorOutline: new TinyColor(colorError).setAlpha(0.2).toRgbString(),
|
||||
colorWarningActive: warningColors[6],
|
||||
colorWarningHover: warningColors[4],
|
||||
colorWarningOutline: new TinyColor(colorWarning).setAlpha(0.2).toRgbString(),
|
||||
|
||||
// text color
|
||||
colorText2: new TinyColor('#000').setAlpha(0.85).toRgbString(),
|
||||
@ -147,7 +149,7 @@ const seedToken: SeedToken = {
|
||||
|
||||
// Motion
|
||||
motionUnit: 0.1,
|
||||
motionBaseStep: 3,
|
||||
motionBase: 0,
|
||||
motionEaseInOutCirc: `cubic-bezier(0.78, 0.14, 0.15, 0.86)`,
|
||||
motionEaseInOut: `cubic-bezier(0.645, 0.045, 0.355, 1)`,
|
||||
motionEaseOutBack: `cubic-bezier(0.12, 0.4, 0.29, 1.46)`,
|
||||
|
||||
@ -32,14 +32,14 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
...mergedToken,
|
||||
|
||||
// Colors
|
||||
primaryHoverColor: mergedToken.colorPrimaryHover,
|
||||
primaryActiveColor: mergedToken.colorPrimaryActive,
|
||||
errorHoverColor: mergedToken.colorErrorHover,
|
||||
errorActiveColor: mergedToken.colorErrorActive,
|
||||
warningHoverColor: mergedToken.colorWarningHover,
|
||||
|
||||
colorTextSecondary: mergedToken.colorTextBelow,
|
||||
colorTextDisabled: mergedToken.colorTextBelow2,
|
||||
colorPlaceholder: mergedToken.colorTextBelow2,
|
||||
colorTextHeading: mergedToken.colorText,
|
||||
|
||||
colorBgContainer: mergedToken.colorBgBelow2,
|
||||
colorBgComponent: mergedToken.colorBg,
|
||||
colorBgComponentDisabled: mergedToken.colorBgBelow2,
|
||||
|
||||
// Font
|
||||
fontSizeSM: fontSizes[0],
|
||||
@ -64,6 +64,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
// Control
|
||||
controlLineWidth: mergedToken.lineWidth,
|
||||
controlOutlineWidth: mergedToken.lineWidth * 2,
|
||||
controlItemBgHover: mergedToken.colorBgBelow2,
|
||||
|
||||
// 👀👀👀👀👀👀👀👀👀 Not align with Derivative 👀👀👀👀👀👀👀👀👀
|
||||
// FIXME: @arvinxx handle this
|
||||
@ -71,6 +72,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
controlRadius: mergedToken.radiusBase,
|
||||
colorBorder: new TinyColor({ h: 0, s: 0, v: 85 }).toHexString(),
|
||||
colorSplit: new TinyColor({ h: 0, s: 0, v: 94 }).toHexString(),
|
||||
controlItemBgActive: primaryColors[0],
|
||||
|
||||
// 🔥🔥🔥🔥🔥🔥🔥🔥🔥 All TMP Token leaves here 🔥🔥🔥🔥🔥🔥🔥🔥🔥
|
||||
// FIXME: Handle this when derivative is ready
|
||||
@ -93,12 +95,6 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
tmpErrorColorDeprecatedBorder: errorColors[2],
|
||||
tmpInfoColorDeprecatedBorder: infoColors[2],
|
||||
|
||||
primaryOutlineColor: new TinyColor(mergedToken.colorPrimary).setAlpha(0.2).toRgbString(),
|
||||
errorOutlineColor: new TinyColor(mergedToken.colorError).setAlpha(0.2).toRgbString(),
|
||||
warningOutlineColor: new TinyColor(mergedToken.colorWarning).setAlpha(0.2).toRgbString(),
|
||||
|
||||
itemActiveBackground: primaryColors[0],
|
||||
|
||||
highlightColor: errorColors[5], // FIXME: Should not align with error color
|
||||
// FIXME: fix2 badge-color
|
||||
|
||||
@ -109,16 +105,8 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
linkHoverDecoration: 'none',
|
||||
linkFocusDecoration: 'none',
|
||||
|
||||
placeholderColor: new TinyColor({ h: 0, s: 0, v: 75 }).setAlpha(0.5).toRgbString(),
|
||||
|
||||
disabledColor: new TinyColor('#000').setAlpha(0.25).toRgbString(),
|
||||
|
||||
headingColor: new TinyColor('#000').setAlpha(0.85).toRgbString(),
|
||||
|
||||
iconColorHover: new TinyColor('#000').setAlpha(0.75).toRgbString(),
|
||||
|
||||
itemHoverBackground: '#f5f5f5',
|
||||
|
||||
controlPaddingHorizontal: 16,
|
||||
controlPaddingHorizontalSM: 12,
|
||||
|
||||
@ -135,21 +123,17 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
// marginSM: 8,
|
||||
marginLG: 32,
|
||||
|
||||
// Default grey background color
|
||||
background: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(),
|
||||
|
||||
// background of header and selected item
|
||||
backgroundLight: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(),
|
||||
|
||||
componentBackground: '#fff',
|
||||
componentBackgroundDisabled: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(),
|
||||
|
||||
duration: '0.3s',
|
||||
durationMid: '0.2s',
|
||||
durationFast: '0.1s',
|
||||
|
||||
zIndexDropdown: 1050,
|
||||
zIndexAffix: 10,
|
||||
|
||||
boxShadow: `
|
||||
0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
||||
0 6px 16px 0 rgba(0, 0, 0, 0.08),
|
||||
0 9px 28px 8px rgba(0, 0, 0, 0.05)
|
||||
`,
|
||||
};
|
||||
|
||||
return aliasToken;
|
||||
|
||||
@ -7,7 +7,7 @@ export const operationUnit = (token: DerivativeToken): CSSObject => ({
|
||||
textDecoration: 'none',
|
||||
outline: 'none',
|
||||
cursor: 'pointer',
|
||||
transition: `color ${token.duration}`,
|
||||
transition: `color ${token.motionDurationSlow}`,
|
||||
|
||||
'&:focus, &:hover': {
|
||||
color: token.linkHoverColor,
|
||||
|
||||
@ -14,7 +14,7 @@ export const initSlideMotion = (
|
||||
const motionCls = `.${rootMotionName}`;
|
||||
|
||||
return [
|
||||
initMotion(hashId, rootMotionName, inKeyframes, outKeyframes, token.durationMid),
|
||||
initMotion(hashId, rootMotionName, inKeyframes, outKeyframes, token.motionDurationMid),
|
||||
|
||||
{
|
||||
[`
|
||||
|
||||
@ -61,7 +61,7 @@ const genAlertTypeStyle = (
|
||||
export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSObject => {
|
||||
const {
|
||||
alertCls,
|
||||
duration,
|
||||
motionDurationSlow: duration,
|
||||
marginXS,
|
||||
fontSize,
|
||||
fontSizeLG,
|
||||
@ -222,7 +222,7 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
|
||||
const {
|
||||
alertCls,
|
||||
iconPrefixCls,
|
||||
duration,
|
||||
motionDurationSlow: duration,
|
||||
marginXS,
|
||||
fontSizeSM,
|
||||
alertCloseColor,
|
||||
@ -280,7 +280,7 @@ export default function useStyle(
|
||||
|
||||
const alertCls = `.${prefixCls}`;
|
||||
|
||||
const alertMessageColor = token.headingColor;
|
||||
const alertMessageColor = token.colorTextHeading;
|
||||
const alertCloseColor = token.colorTextSecondary;
|
||||
const alertCloseHoverColor = token.iconColorHover;
|
||||
// FIXME
|
||||
|
||||
@ -111,7 +111,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
|
||||
textAlign: 'center',
|
||||
background: token.badgeColor,
|
||||
borderRadius: token.badgeHeight / 2,
|
||||
boxShadow: `0 0 0 1px ${token.componentBackground}`,
|
||||
boxShadow: `0 0 0 1px ${token.colorBgComponent}`,
|
||||
a: {
|
||||
color: token.badgeTextColor,
|
||||
},
|
||||
@ -139,7 +139,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
|
||||
height: token.badgeDotSize,
|
||||
background: token.badgeColor,
|
||||
borderRadius: '100%',
|
||||
boxShadow: `0 0 0 1px ${token.componentBackground}`,
|
||||
boxShadow: `0 0 0 1px ${token.colorBgComponent}`,
|
||||
},
|
||||
[`.${badgePrefixCls}-dot.${numberPrefixCls}`]: {
|
||||
transition: 'background 1.5s', // FIXME: hard code, copied from old less file
|
||||
@ -152,7 +152,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
|
||||
transformOrigin: '100% 0%',
|
||||
[`.${iconPrefixCls}-spin`]: {
|
||||
animation: `${antBadgeLoadingCircle.getName(hashId)} ${
|
||||
token.durationFast
|
||||
token.motionDurationFast
|
||||
} infinite linear`,
|
||||
},
|
||||
},
|
||||
@ -208,24 +208,26 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
|
||||
},
|
||||
},
|
||||
[`.${badgePrefixCls}-zoom-appear, .${badgePrefixCls}-zoom-enter`]: {
|
||||
animation: `${antZoomBadgeIn.getName(hashId)} ${token.duration} ${token.motionEaseOutBack}`,
|
||||
animation: `${antZoomBadgeIn.getName(hashId)} ${token.motionDurationSlow} ${
|
||||
token.motionEaseOutBack
|
||||
}`,
|
||||
animationFillMode: 'both',
|
||||
},
|
||||
[`.${badgePrefixCls}-zoom-leave`]: {
|
||||
animation: `${antZoomBadgeOut.getName(hashId)} ${token.duration} ${
|
||||
animation: `${antZoomBadgeOut.getName(hashId)} ${token.motionDurationSlow} ${
|
||||
token.motionEaseOutBack
|
||||
}`,
|
||||
animationFillMode: 'both',
|
||||
},
|
||||
[`&.${badgePrefixCls}-not-a-wrapper`]: {
|
||||
[`.${badgePrefixCls}-zoom-appear, .${badgePrefixCls}-zoom-enter`]: {
|
||||
animation: `${antNoWrapperZoomBadgeIn.getName(hashId)} ${token.duration} ${
|
||||
animation: `${antNoWrapperZoomBadgeIn.getName(hashId)} ${token.motionDurationSlow} ${
|
||||
token.motionEaseOutBack
|
||||
}`,
|
||||
},
|
||||
|
||||
[`.${badgePrefixCls}-zoom-leave`]: {
|
||||
animation: `${antNoWrapperZoomBadgeOut.getName(hashId)} ${token.duration} ${
|
||||
animation: `${antNoWrapperZoomBadgeOut.getName(hashId)} ${token.motionDurationSlow} ${
|
||||
token.motionEaseOutBack
|
||||
}`,
|
||||
},
|
||||
@ -249,7 +251,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
height: token.badgeHeight,
|
||||
transition: `all ${token.duration} ${token.motionEaseOutBack}`,
|
||||
transition: `all ${token.motionDurationSlow} ${token.motionEaseOutBack}`,
|
||||
WebkitTransformStyle: 'preserve-3d',
|
||||
WebkitBackfaceVisibility: 'hidden',
|
||||
[`> p.${numberPrefixCls}-only-unit`]: {
|
||||
@ -332,7 +334,7 @@ export default function useStyle(
|
||||
|
||||
const badgeZIndex = 'auto';
|
||||
const badgeHeight = 20; // FIXME: hard code
|
||||
const badgeTextColor = token.componentBackground;
|
||||
const badgeTextColor = token.colorBgComponent;
|
||||
const badgeFontWeight = 'normal';
|
||||
const badgeFontSize = token.fontSizeSM;
|
||||
const badgeColor = token.highlightColor;
|
||||
|
||||
@ -25,7 +25,7 @@ const genSharedButtonStyle = (
|
||||
backgroundColor: 'transparent',
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} transparent`,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.duration} ${token.motionEaseInOut}`,
|
||||
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
|
||||
userSelect: 'none',
|
||||
touchAction: 'manipulation',
|
||||
lineHeight: token.lineHeight,
|
||||
@ -93,7 +93,7 @@ const genSolidDisabledButtonStyle = (token: DerivativeToken): CSSObject => ({
|
||||
cursor: 'not-allowed',
|
||||
borderColor: token.colorBorder,
|
||||
color: token.colorTextDisabled,
|
||||
backgroundColor: token.componentBackgroundDisabled,
|
||||
backgroundColor: token.colorBgComponentDisabled,
|
||||
boxShadow: 'none',
|
||||
},
|
||||
});
|
||||
@ -115,26 +115,26 @@ const genPureDisabledButtonStyle = (token: DerivativeToken): CSSObject => ({
|
||||
const genDefaultButtonStyle = (prefixCls: string, token: DerivativeToken): CSSObject => ({
|
||||
...genSolidButtonStyle(token),
|
||||
|
||||
backgroundColor: token.componentBackground,
|
||||
backgroundColor: token.colorBgComponent,
|
||||
borderColor: token.colorBorder,
|
||||
|
||||
boxShadow: '0 2px 0 rgba(0, 0, 0, 0.015)',
|
||||
|
||||
...genHoverActiveButtonStyle(
|
||||
{
|
||||
color: token.primaryHoverColor,
|
||||
borderColor: token.primaryHoverColor,
|
||||
color: token.colorPrimaryHover,
|
||||
borderColor: token.colorPrimaryHover,
|
||||
},
|
||||
{
|
||||
color: token.primaryActiveColor,
|
||||
borderColor: token.primaryActiveColor,
|
||||
color: token.colorPrimaryActive,
|
||||
borderColor: token.colorPrimaryActive,
|
||||
},
|
||||
),
|
||||
|
||||
...genGhostButtonStyle(
|
||||
prefixCls,
|
||||
token.componentBackground,
|
||||
token.componentBackground,
|
||||
token.colorBgComponent,
|
||||
token.colorBgComponent,
|
||||
token.colorTextDisabled,
|
||||
token.colorBorder,
|
||||
),
|
||||
@ -145,12 +145,12 @@ const genDefaultButtonStyle = (prefixCls: string, token: DerivativeToken): CSSOb
|
||||
|
||||
...genHoverActiveButtonStyle(
|
||||
{
|
||||
color: token.errorHoverColor,
|
||||
borderColor: token.errorHoverColor,
|
||||
color: token.colorErrorHover,
|
||||
borderColor: token.colorErrorHover,
|
||||
},
|
||||
{
|
||||
color: token.errorActiveColor,
|
||||
borderColor: token.errorActiveColor,
|
||||
color: token.colorErrorActive,
|
||||
borderColor: token.colorErrorActive,
|
||||
},
|
||||
),
|
||||
|
||||
@ -176,10 +176,10 @@ const genPrimaryButtonStyle = (prefixCls: string, token: DerivativeToken): CSSOb
|
||||
|
||||
...genHoverActiveButtonStyle(
|
||||
{
|
||||
backgroundColor: token.primaryHoverColor,
|
||||
backgroundColor: token.colorPrimaryHover,
|
||||
},
|
||||
{
|
||||
backgroundColor: token.primaryActiveColor,
|
||||
backgroundColor: token.colorPrimaryActive,
|
||||
},
|
||||
),
|
||||
|
||||
@ -196,10 +196,10 @@ const genPrimaryButtonStyle = (prefixCls: string, token: DerivativeToken): CSSOb
|
||||
|
||||
...genHoverActiveButtonStyle(
|
||||
{
|
||||
backgroundColor: token.errorHoverColor,
|
||||
backgroundColor: token.colorErrorHover,
|
||||
},
|
||||
{
|
||||
backgroundColor: token.errorActiveColor,
|
||||
backgroundColor: token.colorErrorActive,
|
||||
},
|
||||
),
|
||||
|
||||
@ -227,10 +227,10 @@ const genLinkButtonStyle = (prefixCls: string, token: DerivativeToken): CSSObjec
|
||||
|
||||
...genHoverActiveButtonStyle(
|
||||
{
|
||||
color: token.primaryHoverColor,
|
||||
color: token.colorPrimaryHover,
|
||||
},
|
||||
{
|
||||
color: token.primaryActiveColor,
|
||||
color: token.colorPrimaryActive,
|
||||
},
|
||||
),
|
||||
|
||||
@ -241,10 +241,10 @@ const genLinkButtonStyle = (prefixCls: string, token: DerivativeToken): CSSObjec
|
||||
|
||||
...genHoverActiveButtonStyle(
|
||||
{
|
||||
color: token.errorHoverColor,
|
||||
color: token.colorErrorHover,
|
||||
},
|
||||
{
|
||||
color: token.errorActiveColor,
|
||||
color: token.colorErrorActive,
|
||||
},
|
||||
),
|
||||
|
||||
@ -327,7 +327,7 @@ const genSizeButtonStyle = (
|
||||
},
|
||||
|
||||
[`.${prefixCls}-loading-icon`]: {
|
||||
transition: `width ${token.duration} ${token.motionEaseInOut}, opacity ${token.duration} ${token.motionEaseInOut}`,
|
||||
transition: `width ${token.motionDurationSlow} ${token.motionEaseInOut}, opacity ${token.motionDurationSlow} ${token.motionEaseInOut}`,
|
||||
},
|
||||
|
||||
[`&:not(${iconOnlyCls}) .${prefixCls}-loading-icon > .${iconPrefixCls}`]: {
|
||||
|
||||
@ -103,10 +103,10 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token, hashId) => {
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.duration}`,
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
|
||||
'&:hover': {
|
||||
background: token.itemHoverBackground,
|
||||
background: token.controlItemBgHover,
|
||||
},
|
||||
' &-disabled': {
|
||||
color: token.colorTextDisabled,
|
||||
@ -124,7 +124,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token, hashId) => {
|
||||
[`&-active:not(${cascaderMenuItemCls}-disabled)`]: {
|
||||
[`&, &:hover`]: {
|
||||
fontWeight: 600, // FIXME: hardcode
|
||||
backgroundColor: token.itemActiveBackground,
|
||||
backgroundColor: token.controlItemBgActive,
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@ -94,11 +94,11 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) =>
|
||||
width: token.fontSizeLG,
|
||||
height: token.fontSizeLG,
|
||||
direction: 'ltr',
|
||||
backgroundColor: token.componentBackground,
|
||||
backgroundColor: token.colorBgComponent,
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
|
||||
borderRadius: token.controlRadius,
|
||||
borderCollapse: 'separate',
|
||||
transition: `all ${token.duration}`,
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
|
||||
'&:after': {
|
||||
position: 'absolute',
|
||||
@ -107,12 +107,12 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) =>
|
||||
display: 'table',
|
||||
width: (token.fontSizeLG / 14) * 5,
|
||||
height: (token.fontSizeLG / 14) * 8,
|
||||
border: `2px solid ${token.componentBackground}`,
|
||||
border: `2px solid ${token.colorBgComponent}`,
|
||||
borderTop: 0,
|
||||
borderInlineStart: 0,
|
||||
transform: 'rotate(45deg) scale(0) translate(-50%,-50%)',
|
||||
opacity: 0,
|
||||
transition: `all ${token.durationFast} cubic-bezier(.71,-.46,.88,.6), opacity ${token.durationFast}`,
|
||||
transition: `all ${token.motionDurationFast} cubic-bezier(.71,-.46,.88,.6), opacity ${token.motionDurationFast}`,
|
||||
content: '""',
|
||||
},
|
||||
},
|
||||
@ -177,7 +177,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) =>
|
||||
'&:after': {
|
||||
opacity: 1,
|
||||
transform: 'rotate(45deg) scale(1) translate(-50%,-50%)',
|
||||
transition: `all ${token.duration} ${token.motionEaseOutBack} 0.1s`,
|
||||
transition: `all ${token.motionDurationSlow} ${token.motionEaseOutBack} 0.1s`,
|
||||
},
|
||||
},
|
||||
|
||||
@ -191,7 +191,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) =>
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorPrimary}`,
|
||||
borderRadius: token.controlRadius,
|
||||
visibility: 'hidden',
|
||||
animation: `${antCheckboxEffect.getName(hashId)} ${token.duration} ease-in-out`,
|
||||
animation: `${antCheckboxEffect.getName(hashId)} ${token.motionDurationSlow} ease-in-out`,
|
||||
animationFillMode: 'backwards',
|
||||
content: '""',
|
||||
},
|
||||
@ -214,7 +214,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) =>
|
||||
|
||||
// Wrapper > Checkbox > inner
|
||||
[`${checkboxCls}-inner`]: {
|
||||
background: token.background,
|
||||
background: token.colorBgContainer,
|
||||
borderColor: token.colorBorder,
|
||||
|
||||
'&:after': {
|
||||
|
||||
@ -21,7 +21,7 @@ import notification from '../notification';
|
||||
import { RequiredMark } from '../form/Form';
|
||||
import { registerTheme } from './cssVariables';
|
||||
import defaultLocale from '../locale/default';
|
||||
import { SeedToken, DesignTokenContext } from '../_util/theme';
|
||||
import { SeedToken, DesignTokenContext, useToken } from '../_util/theme';
|
||||
import defaultSeedToken from '../_util/theme/themes/default';
|
||||
|
||||
export {
|
||||
@ -284,6 +284,7 @@ const ConfigProvider: React.FC<ConfigProviderProps> & {
|
||||
ConfigContext: typeof ConfigContext;
|
||||
SizeContext: typeof SizeContext;
|
||||
config: typeof setGlobalConfig;
|
||||
useToken: typeof useToken;
|
||||
} = props => {
|
||||
React.useEffect(() => {
|
||||
if (props.direction) {
|
||||
@ -316,5 +317,6 @@ const ConfigProvider: React.FC<ConfigProviderProps> & {
|
||||
ConfigProvider.ConfigContext = ConfigContext;
|
||||
ConfigProvider.SizeContext = SizeContext;
|
||||
ConfigProvider.config = setGlobalConfig;
|
||||
ConfigProvider.useToken = useToken;
|
||||
|
||||
export default ConfigProvider;
|
||||
|
||||
@ -54,7 +54,7 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
|
||||
'&-horizontal&-with-text': {
|
||||
display: 'flex',
|
||||
margin: `${token.dividerHorizontalWithTextGutterMargin}px 0`,
|
||||
color: token.headingColor,
|
||||
color: token.colorTextHeading,
|
||||
fontWeight: 500,
|
||||
fontSize: token.fontSizeLG,
|
||||
whiteSpace: 'nowrap',
|
||||
|
||||
@ -45,7 +45,8 @@ export const genBoxStyle = (position?: PositionType): CSSObject => ({
|
||||
});
|
||||
|
||||
export const genImageMaskStyle = (token: ImageToken): CSSObject => {
|
||||
const { iconPrefixCls, white, black, duration, paddingXXS, marginXXS, prefixCls } = token;
|
||||
const { iconPrefixCls, white, black, motionDurationSlow, paddingXXS, marginXXS, prefixCls } =
|
||||
token;
|
||||
return {
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
@ -56,7 +57,7 @@ export const genImageMaskStyle = (token: ImageToken): CSSObject => {
|
||||
background: new TinyColor(black).setAlpha(0.5).toRgbString(), // FIXME: hard code in v4
|
||||
cursor: 'pointer',
|
||||
opacity: 0,
|
||||
transition: `opacity ${duration}`,
|
||||
transition: `opacity ${motionDurationSlow}`,
|
||||
|
||||
[`.${prefixCls}-mask-info`]: {
|
||||
padding: `0 ${paddingXXS}`,
|
||||
@ -158,7 +159,8 @@ export const genPreviewSwitchStyle = (token: ImageToken): CSSObject => {
|
||||
};
|
||||
|
||||
export const genImagePreviewStyle = (token: ImageToken): CSSObject => {
|
||||
const { motionEaseOut, previewPrefixCls, switchRight, switchLeft, width1px, duration } = token;
|
||||
const { motionEaseOut, previewPrefixCls, switchRight, switchLeft, width1px, motionDurationSlow } =
|
||||
token;
|
||||
return {
|
||||
height: '100%',
|
||||
textAlign: 'center',
|
||||
@ -173,13 +175,13 @@ export const genImagePreviewStyle = (token: ImageToken): CSSObject => {
|
||||
verticalAlign: 'middle',
|
||||
transform: 'scale3d(1, 1, 1)',
|
||||
cursor: 'grab',
|
||||
transition: `transform ${duration} ${motionEaseOut} 0s`,
|
||||
transition: `transform ${motionDurationSlow} ${motionEaseOut} 0s`,
|
||||
userSelect: 'none',
|
||||
pointerEvents: 'auto',
|
||||
|
||||
'&-wrapper': {
|
||||
...genBoxStyle(),
|
||||
transition: `transform ${duration} ${motionEaseOut} 0s`,
|
||||
transition: `transform ${motionDurationSlow} ${motionEaseOut} 0s`,
|
||||
|
||||
'&::before': {
|
||||
display: 'inline-block',
|
||||
@ -227,7 +229,7 @@ const genImageStyle: GenerateStyle<ImageToken> = (token: ImageToken) => {
|
||||
previewPrefixCls,
|
||||
imageBg,
|
||||
zIndexImage,
|
||||
duration,
|
||||
motionDurationSlow,
|
||||
} = token;
|
||||
return {
|
||||
// ============================== image ==============================
|
||||
@ -264,7 +266,7 @@ const genImageStyle: GenerateStyle<ImageToken> = (token: ImageToken) => {
|
||||
{
|
||||
transform: 'none',
|
||||
opacity: 0,
|
||||
animationDuration: duration,
|
||||
animationDuration: motionDurationSlow,
|
||||
userSelect: 'none', // https://github.com/ant-design/ant-design/issues/11777
|
||||
},
|
||||
[`.${previewPrefixCls}-root`]: {
|
||||
|
||||
@ -37,15 +37,15 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
colorError,
|
||||
paddingXS,
|
||||
colorTextSecondary: textColorSecondary,
|
||||
durationFast,
|
||||
motionDurationFast: durationFast,
|
||||
inputNumberHandlerActiveBgColor,
|
||||
colorPrimary,
|
||||
marginXXS,
|
||||
controlHeight,
|
||||
inputPaddingHorizontal,
|
||||
duration,
|
||||
componentBackground,
|
||||
durationMid,
|
||||
motionDurationSlow: duration,
|
||||
colorBgComponent: componentBackground,
|
||||
motionDurationMid: durationMid,
|
||||
colorTextDisabled: textColorDisabled,
|
||||
} = token;
|
||||
|
||||
|
||||
@ -47,14 +47,14 @@ export const genHoverStyle = (token: InputToken): CSSObject => ({
|
||||
|
||||
export const genActiveStyle = (token: InputToken) => ({
|
||||
borderColor: token.inputBorderHoverColor,
|
||||
boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.primaryOutlineColor}`,
|
||||
boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.colorPrimaryOutline}`,
|
||||
borderInlineEndWidth: token.controlLineWidth,
|
||||
outline: 0,
|
||||
});
|
||||
|
||||
export const genDisabledStyle = (token: InputToken): CSSObject => ({
|
||||
color: token.colorTextDisabled,
|
||||
backgroundColor: token.componentBackgroundDisabled,
|
||||
backgroundColor: token.colorBgComponentDisabled,
|
||||
borderColor: token.colorBorder,
|
||||
boxShadow: 'none',
|
||||
cursor: 'not-allowed',
|
||||
@ -79,7 +79,7 @@ const genInputSmallStyle = (token: InputToken): CSSObject => ({
|
||||
});
|
||||
|
||||
export const genStatusStyle = (token: InputToken): CSSObject => {
|
||||
const { prefixCls, colorError, colorWarning, errorOutlineColor, warningOutlineColor } = token;
|
||||
const { prefixCls, colorError, colorWarning, colorErrorOutline, colorWarningOutline } = token;
|
||||
|
||||
return {
|
||||
'&-status-error:not(&-disabled):not(&-borderless)&': {
|
||||
@ -92,7 +92,7 @@ export const genStatusStyle = (token: InputToken): CSSObject => {
|
||||
...token,
|
||||
inputBorderActiveColor: colorError,
|
||||
inputBorderHoverColor: colorError,
|
||||
primaryOutlineColor: errorOutlineColor,
|
||||
colorPrimaryOutline: colorErrorOutline,
|
||||
}),
|
||||
},
|
||||
|
||||
@ -110,7 +110,7 @@ export const genStatusStyle = (token: InputToken): CSSObject => {
|
||||
...token,
|
||||
inputBorderActiveColor: colorWarning,
|
||||
inputBorderHoverColor: colorWarning,
|
||||
primaryOutlineColor: warningOutlineColor,
|
||||
colorPrimaryOutline: colorWarningOutline,
|
||||
}),
|
||||
},
|
||||
|
||||
@ -130,13 +130,13 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({
|
||||
color: token.colorText,
|
||||
fontSize: token.fontSize,
|
||||
lineHeight: token.lineHeight,
|
||||
backgroundColor: token.componentBackground,
|
||||
backgroundColor: token.colorBgComponent,
|
||||
backgroundImage: 'none',
|
||||
borderWidth: token.controlLineWidth,
|
||||
borderStyle: token.controlLineType,
|
||||
borderColor: token.colorBorder,
|
||||
borderRadius: token.controlRadius,
|
||||
transition: `all ${token.duration}`,
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
...genPlaceholderStyle(),
|
||||
|
||||
'&:hover': {
|
||||
@ -166,7 +166,7 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({
|
||||
minHeight: token.controlHeight,
|
||||
lineHeight: token.lineHeight,
|
||||
verticalAlign: 'bottom',
|
||||
transition: `all ${token.duration}, height 0s`,
|
||||
transition: `all ${token.motionDurationSlow}, height 0s`,
|
||||
},
|
||||
|
||||
'&-textarea': {
|
||||
@ -259,7 +259,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
|
||||
backgroundColor: token.backgroundLight,
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
|
||||
borderRadius: token.controlRadius,
|
||||
transition: `all ${token.duration}`,
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
|
||||
// Reset Select's style in addon
|
||||
'.ant-select': {
|
||||
@ -542,7 +542,7 @@ const genAllowClearStyle = (token: InputToken): CSSObject => {
|
||||
// https://github.com/ant-design/ant-design/pull/18151
|
||||
// https://codesandbox.io/s/wizardly-sun-u10br
|
||||
cursor: 'pointer',
|
||||
transition: `color ${token.duration}`,
|
||||
transition: `color ${token.motionDurationSlow}`,
|
||||
|
||||
'&:hover': {
|
||||
color: token.colorTextSecondary,
|
||||
@ -582,7 +582,7 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
|
||||
iconPrefixCls,
|
||||
inputAffixMargin,
|
||||
colorTextSecondary: textColorSecondary,
|
||||
duration,
|
||||
motionDurationSlow: duration,
|
||||
iconColorHover,
|
||||
colorPrimary,
|
||||
colorSuccess,
|
||||
@ -730,11 +730,11 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
|
||||
[searchPrefixCls]: {
|
||||
[`.${prefixCls}`]: {
|
||||
'&:hover, &:focus': {
|
||||
borderColor: token.primaryHoverColor,
|
||||
borderColor: token.colorPrimaryHover,
|
||||
|
||||
[`+ .${prefixCls}-group-addon ${searchPrefixCls}-button:not(.@{ant-prefix}-btn-primary)`]:
|
||||
{
|
||||
borderInlineStartColor: token.primaryHoverColor,
|
||||
borderInlineStartColor: token.colorPrimaryHover,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -823,8 +823,8 @@ export const initInputToken = (
|
||||
0,
|
||||
),
|
||||
inputPaddingHorizontal: token.paddingSM - token.controlLineWidth,
|
||||
inputBorderHoverColor: token.primaryHoverColor,
|
||||
inputBorderActiveColor: token.primaryHoverColor,
|
||||
inputBorderHoverColor: token.colorPrimaryHover,
|
||||
inputBorderActiveColor: token.colorPrimaryHover,
|
||||
});
|
||||
|
||||
const genTextAreaStyle: GenerateStyle<InputToken> = token => {
|
||||
|
||||
@ -24,16 +24,16 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
|
||||
mentionsCls,
|
||||
backgroundLight,
|
||||
colorTextDisabled: textColorDisabled,
|
||||
itemHoverBackground,
|
||||
controlItemBgHover: itemHoverBackground,
|
||||
controlPaddingHorizontal,
|
||||
colorText: textColor,
|
||||
duration,
|
||||
motionDurationSlow: duration,
|
||||
lineHeight,
|
||||
controlHeight,
|
||||
inputPaddingHorizontal,
|
||||
inputPaddingVertical,
|
||||
fontSize,
|
||||
componentBackground,
|
||||
colorBgComponent: componentBackground,
|
||||
controlRadius: borderRadius,
|
||||
boxShadow,
|
||||
} = token;
|
||||
|
||||
@ -32,7 +32,7 @@ const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = token => {
|
||||
},
|
||||
|
||||
'> div': {
|
||||
transition: `all ${token.duration}, outline 0s`,
|
||||
transition: `all ${token.motionDurationSlow}, outline 0s`,
|
||||
|
||||
'&:hover': {
|
||||
transform: token.rateStarHoverScale,
|
||||
@ -50,7 +50,7 @@ const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = token => {
|
||||
|
||||
'&-first, &-second': {
|
||||
color: token.colorSplit,
|
||||
transition: `all ${token.duration}`,
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
userSelect: 'none',
|
||||
|
||||
[token.iconPrefixCls]: {
|
||||
|
||||
@ -57,7 +57,7 @@ const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
|
||||
},
|
||||
|
||||
[`${resultCls} ${resultCls}-title`]: {
|
||||
color: token.headingColor,
|
||||
color: token.colorTextHeading,
|
||||
fontSize: token.resultTitleFontSize,
|
||||
// FIXME: hard code
|
||||
lineHeight: 1.8,
|
||||
|
||||
@ -49,7 +49,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token, hashId) => {
|
||||
// https://github.com/ant-design/ant-design/issues/11456
|
||||
// https://github.com/ant-design/ant-design/issues/11843
|
||||
fontVariant: 'initial',
|
||||
backgroundColor: token.componentBackground,
|
||||
backgroundColor: token.colorBgComponent,
|
||||
borderRadius: token.controlRadius,
|
||||
outline: 'none',
|
||||
boxShadow: token.boxShadow,
|
||||
@ -93,7 +93,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token, hashId) => {
|
||||
[`${selectItemCls}`]: {
|
||||
...genItemStyle(token),
|
||||
cursor: 'pointer',
|
||||
transition: `background ${token.duration} ease`,
|
||||
transition: `background ${token.motionDurationSlow} ease`,
|
||||
|
||||
// =========== Group ============
|
||||
'&-group': {
|
||||
@ -118,13 +118,13 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token, hashId) => {
|
||||
},
|
||||
|
||||
[`&-active:not(${selectItemCls}-option-disabled)`]: {
|
||||
backgroundColor: token.itemHoverBackground,
|
||||
backgroundColor: token.controlItemBgHover,
|
||||
},
|
||||
|
||||
[`&-selected:not(${selectItemCls}-option-disabled)`]: {
|
||||
color: token.colorText,
|
||||
fontWeight: 600, // FIXME: Need design token?
|
||||
backgroundColor: token.itemActiveBackground,
|
||||
backgroundColor: token.controlItemBgActive,
|
||||
|
||||
[`${selectItemCls}-option-state`]: {
|
||||
color: token.colorPrimary,
|
||||
@ -132,7 +132,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token, hashId) => {
|
||||
},
|
||||
'&-disabled': {
|
||||
[`&${selectItemCls}-option-selected`]: {
|
||||
backgroundColor: token.componentBackgroundDisabled,
|
||||
backgroundColor: token.colorBgComponentDisabled,
|
||||
},
|
||||
|
||||
color: token.colorTextDisabled,
|
||||
|
||||
@ -33,10 +33,10 @@ const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = token => {
|
||||
|
||||
return {
|
||||
position: 'relative',
|
||||
backgroundColor: token.componentBackground,
|
||||
backgroundColor: token.colorBgComponent,
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
|
||||
borderRadius: token.controlRadius,
|
||||
transition: `all ${token.duration} ${token.motionEaseInOut}`,
|
||||
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
|
||||
|
||||
input: {
|
||||
cursor: 'pointer',
|
||||
@ -52,11 +52,11 @@ const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = token => {
|
||||
|
||||
[`${selectCls}-disabled&`]: {
|
||||
color: token.colorTextDisabled,
|
||||
background: token.componentBackgroundDisabled,
|
||||
background: token.colorBgComponentDisabled,
|
||||
cursor: 'not-allowed',
|
||||
|
||||
[`${selectCls}-multiple&`]: {
|
||||
background: token.componentBackgroundDisabled,
|
||||
background: token.colorBgComponentDisabled,
|
||||
},
|
||||
|
||||
input: {
|
||||
@ -165,7 +165,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
|
||||
[`${selectCls}-selection-placeholder`]: {
|
||||
flex: 1,
|
||||
overflow: 'hidden',
|
||||
color: token.placeholderColor,
|
||||
color: token.colorPlaceholder,
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
pointerEvents: 'none',
|
||||
@ -189,7 +189,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
|
||||
|
||||
[`.${iconPrefixCls}`]: {
|
||||
verticalAlign: 'top',
|
||||
transition: `transform ${token.duration}`,
|
||||
transition: `transform ${token.motionDurationSlow}`,
|
||||
|
||||
'> svg': {
|
||||
verticalAlign: 'top',
|
||||
@ -222,10 +222,10 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
|
||||
lineHeight: 1,
|
||||
textAlign: 'center',
|
||||
textTransform: 'none',
|
||||
background: token.componentBackground,
|
||||
background: token.colorBgComponent,
|
||||
cursor: 'pointer',
|
||||
opacity: 0,
|
||||
transition: `color ${token.duration} ease, opacity ${token.duration} ease`,
|
||||
transition: `color ${token.motionDurationSlow} ease, opacity ${token.motionDurationSlow} ease`,
|
||||
textRendering: 'auto',
|
||||
|
||||
'&:before': {
|
||||
@ -257,7 +257,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
|
||||
fontSize: token.fontSize,
|
||||
textAlign: 'center',
|
||||
visibility: 'visible',
|
||||
animation: `zoomIn ${token.duration} ${token.motionEaseOutBack}`,
|
||||
animation: `zoomIn ${token.motionDurationSlow} ${token.motionEaseOutBack}`,
|
||||
pointerEvents: 'none',
|
||||
|
||||
'&:not(:first-child)': {
|
||||
@ -331,15 +331,15 @@ const genSelectStyle = (
|
||||
// =====================================================
|
||||
genStatusStyle(selectCls, {
|
||||
...selectToken,
|
||||
borderHoverColor: token.primaryHoverColor,
|
||||
outlineColor: token.primaryOutlineColor,
|
||||
borderHoverColor: token.colorPrimaryHover,
|
||||
outlineColor: token.colorPrimaryOutline,
|
||||
}),
|
||||
genStatusStyle(
|
||||
`${selectCls}-status-error`,
|
||||
{
|
||||
...selectToken,
|
||||
borderHoverColor: token.errorHoverColor,
|
||||
outlineColor: token.errorOutlineColor,
|
||||
borderHoverColor: token.colorErrorHover,
|
||||
outlineColor: token.colorErrorOutline,
|
||||
},
|
||||
true,
|
||||
),
|
||||
@ -347,8 +347,8 @@ const genSelectStyle = (
|
||||
`${selectCls}-status-warning`,
|
||||
{
|
||||
...selectToken,
|
||||
borderHoverColor: token.warningHoverColor,
|
||||
outlineColor: token.warningOutlineColor,
|
||||
borderHoverColor: token.colorWarningHover,
|
||||
outlineColor: token.colorWarningOutline,
|
||||
},
|
||||
true,
|
||||
),
|
||||
|
||||
@ -61,7 +61,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
|
||||
},
|
||||
|
||||
[`${selectCls}-disabled&`]: {
|
||||
background: token.componentBackgroundDisabled,
|
||||
background: token.colorBgComponentDisabled,
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
|
||||
@ -92,11 +92,11 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
|
||||
marginTop: FIXED_ITEM_MARGIN,
|
||||
marginBottom: FIXED_ITEM_MARGIN,
|
||||
lineHeight: `${selectItemHeight - token.controlLineWidth * 2}px`,
|
||||
background: token.background,
|
||||
background: token.colorBgContainer,
|
||||
border: `${token.controlLineWidth}px solid ${token.colorSplit}`,
|
||||
borderRadius: token.controlRadius,
|
||||
cursor: 'default',
|
||||
transition: `font-size ${token.duration}, line-height ${token.duration}, height ${token.duration}`,
|
||||
transition: `font-size ${token.motionDurationSlow}, line-height ${token.motionDurationSlow}, height ${token.motionDurationSlow}`,
|
||||
userSelect: 'none',
|
||||
marginInlineEnd: FIXED_ITEM_MARGIN * 2,
|
||||
paddingInlineStart: token.paddingXS,
|
||||
@ -158,7 +158,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
|
||||
height: selectItemHeight,
|
||||
fontFamily: token.fontFamily,
|
||||
lineHeight: `${selectItemHeight}px`,
|
||||
transition: `all ${token.duration}`,
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
},
|
||||
|
||||
'&-input': {
|
||||
@ -184,7 +184,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
|
||||
insetInlineStart: token.inputPaddingHorizontalBase,
|
||||
insetInlineEnd: token.inputPaddingHorizontalBase,
|
||||
transform: 'translateY(-50%)',
|
||||
transition: `all ${token.duration}`,
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -35,7 +35,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
|
||||
`]: {
|
||||
padding: 0,
|
||||
lineHeight: `${selectHeightWithoutBorder}px`,
|
||||
transition: `all ${token.duration}`,
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
|
||||
// Firefox inline-block position calculation is not same as Chrome & Safari. Patch this:
|
||||
'@supports (-moz-appearance: meterbar) &': {
|
||||
@ -77,7 +77,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
|
||||
|
||||
// Opacity selection if open
|
||||
[`&${selectCls}-open ${selectCls}-selection-item`]: {
|
||||
color: token.placeholderColor,
|
||||
color: token.colorPlaceholder,
|
||||
},
|
||||
|
||||
// ========================== Input ==========================
|
||||
|
||||
@ -46,31 +46,31 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
|
||||
[`${sliderCls}-rail`]: {
|
||||
position: 'absolute',
|
||||
backgroundColor: token.background,
|
||||
backgroundColor: token.colorBgContainer,
|
||||
borderRadius: token.controlRadius,
|
||||
transition: `background-color ${token.duration}`,
|
||||
transition: `background-color ${token.motionDurationSlow}`,
|
||||
},
|
||||
|
||||
[`${sliderCls}-track`]: {
|
||||
position: 'absolute',
|
||||
backgroundColor: token.tmpPrimaryColorWeak, // FIXME: Origin @primary-3
|
||||
borderRadius: token.controlRadius,
|
||||
transition: `background-color ${token.duration}`,
|
||||
transition: `background-color ${token.motionDurationSlow}`,
|
||||
},
|
||||
|
||||
[`${sliderCls}-handle`]: {
|
||||
position: 'absolute',
|
||||
width: token.handleSize,
|
||||
height: token.handleSize,
|
||||
backgroundColor: token.componentBackground,
|
||||
backgroundColor: token.colorBgComponent,
|
||||
border: `2px solid ${token.tmpPrimaryColorWeak}`,
|
||||
borderRadius: '50%',
|
||||
boxShadow: 'none',
|
||||
cursor: 'pointer',
|
||||
transition: `
|
||||
border-color ${token.duration},
|
||||
box-shadow ${token.duration},
|
||||
transform ${token.duration} cubic-bezier(0.18, 0.89, 0.32, 1.28)
|
||||
border-color ${token.motionDurationSlow},
|
||||
box-shadow ${token.motionDurationSlow},
|
||||
transform ${token.motionDurationSlow} cubic-bezier(0.18, 0.89, 0.32, 1.28)
|
||||
`,
|
||||
outline: 'none',
|
||||
|
||||
@ -79,13 +79,13 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
},
|
||||
|
||||
'&:focus': {
|
||||
borderColor: token.primaryHoverColor,
|
||||
borderColor: token.colorPrimaryHover,
|
||||
boxShadow: 'none',
|
||||
},
|
||||
|
||||
'&:focus-visible': {
|
||||
// FIXME: This is a inline color calculation
|
||||
boxShadow: `0 0 0 5px ${new TinyColor(token.primaryHoverColor)
|
||||
boxShadow: `0 0 0 5px ${new TinyColor(token.colorPrimaryHover)
|
||||
.setAlpha(0.2)
|
||||
.toRgbString()}`,
|
||||
},
|
||||
@ -102,7 +102,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
},
|
||||
|
||||
[`${sliderCls}-track`]: {
|
||||
backgroundColor: token.primaryHoverColor, // FIXME: origin primary-4
|
||||
backgroundColor: token.colorPrimaryHover, // FIXME: origin primary-4
|
||||
},
|
||||
|
||||
[`${sliderCls}-dot`]: {
|
||||
@ -118,7 +118,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
${sliderCls}-handle,
|
||||
${sliderCls}-dot-active
|
||||
`]: {
|
||||
borderColor: token.primaryHoverColor,
|
||||
borderColor: token.colorPrimaryHover,
|
||||
},
|
||||
},
|
||||
|
||||
@ -151,11 +151,11 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
position: 'absolute',
|
||||
width: dotSize,
|
||||
height: dotSize,
|
||||
backgroundColor: token.componentBackground,
|
||||
backgroundColor: token.colorBgComponent,
|
||||
border: `2px solid ${token.colorSplit}`, // FIXME: hardcode in v4
|
||||
borderRadius: '50%',
|
||||
cursor: 'pointer',
|
||||
transition: `border-color ${token.duration}`,
|
||||
transition: `border-color ${token.motionDurationSlow}`,
|
||||
|
||||
'&-active': {
|
||||
borderColor: token.tmpPrimaryColorWeak,
|
||||
@ -166,7 +166,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
cursor: 'not-allowed',
|
||||
|
||||
[`${sliderCls}-rail`]: {
|
||||
backgroundColor: `${token.background} !important`,
|
||||
backgroundColor: `${token.colorBgContainer} !important`,
|
||||
},
|
||||
|
||||
[`${sliderCls}-track`]: {
|
||||
@ -177,7 +177,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
${sliderCls}-handle,
|
||||
${sliderCls}-dot
|
||||
`]: {
|
||||
backgroundColor: token.componentBackground,
|
||||
backgroundColor: token.colorBgComponent,
|
||||
borderColor: `${token.colorTextDisabled} !important`,
|
||||
boxShadow: 'none',
|
||||
cursor: 'not-allowed',
|
||||
|
||||
@ -25,7 +25,7 @@ const genStatisticStyle: GenerateStyle<StatisticToken> = (token: StatisticToken)
|
||||
fontSize: token.statisticTitleFontSize,
|
||||
},
|
||||
[`${token.statisticCls}-content`]: {
|
||||
color: token.headingColor,
|
||||
color: token.colorTextHeading,
|
||||
fontSize: token.statisticContentFontSize,
|
||||
fontFamily: token.statisticFontFamily,
|
||||
[`${token.statisticCls}-content-value`]: {
|
||||
|
||||
@ -241,7 +241,7 @@ export default function useStyle(
|
||||
switchInnerMarginMax: Math.ceil(switchHeight * 1.1),
|
||||
switchPadding: 2,
|
||||
switchPinSize: switchHeight - 4,
|
||||
switchBg: token.componentBackground,
|
||||
switchBg: token.colorBgComponent,
|
||||
switchShadowColor: new TinyColor('#00230b').setAlpha(0.2).toRgbString(),
|
||||
switchMinWidthSM: 28,
|
||||
switchHeightSM,
|
||||
|
||||
@ -81,7 +81,7 @@ const genBaseStyle = (
|
||||
borderRadius: token.controlRadius,
|
||||
// FIXME: hard code
|
||||
opacity: 1,
|
||||
transition: `all ${token.duration}`,
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
|
||||
// RTL
|
||||
'&&-rtl': {
|
||||
@ -100,10 +100,10 @@ const genBaseStyle = (
|
||||
// FIXME: hard code
|
||||
fontSize: 10,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.duration}`,
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
|
||||
'&:hover': {
|
||||
color: token.headingColor,
|
||||
color: token.colorTextHeading,
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@ -30,7 +30,7 @@ const getSwitchStyle = (prefixCls: string, token: DerivativeToken): CSSObject =>
|
||||
verticalAlign: 'baseline',
|
||||
|
||||
svg: {
|
||||
transition: `transform ${token.duration}`,
|
||||
transition: `transform ${token.motionDurationSlow}`,
|
||||
},
|
||||
},
|
||||
});
|
||||
@ -77,9 +77,9 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
|
||||
return {
|
||||
[treeCls]: {
|
||||
...resetComponent(token),
|
||||
background: token.componentBackground,
|
||||
background: token.colorBgComponent,
|
||||
borderRadius: token.controlRadius,
|
||||
transition: `background-color ${token.duration}`,
|
||||
transition: `background-color ${token.motionDurationSlow}`,
|
||||
|
||||
'&&-rtl': {
|
||||
// >>> Switcher
|
||||
@ -124,7 +124,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
|
||||
insetInlineStart: 0,
|
||||
border: `1px solid ${token.colorPrimary}`,
|
||||
opacity: 0,
|
||||
animation: `${treeNodeFX.getName(hashId)} ${token.duration}`,
|
||||
animation: `${treeNodeFX.getName(hashId)} ${token.motionDurationSlow}`,
|
||||
animationPlayState: 'running',
|
||||
animationFillMode: 'forwards',
|
||||
content: '""',
|
||||
@ -158,7 +158,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
|
||||
},
|
||||
|
||||
[`&-active ${treeCls}-node-content-wrapper`]: {
|
||||
background: token.itemHoverBackground,
|
||||
background: token.controlItemBgHover,
|
||||
},
|
||||
|
||||
[`&:not(&-disabled).filter-node ${treeCls}-title`]: {
|
||||
@ -184,7 +184,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
|
||||
lineHeight: `${treeTitleHeight}px`,
|
||||
textAlign: 'center',
|
||||
opacity: 0.2,
|
||||
transition: `opacity ${token.duration}`,
|
||||
transition: `opacity ${token.motionDurationSlow}`,
|
||||
|
||||
[`${treeNodeCls}:hover &`]: {
|
||||
opacity: 0.45,
|
||||
@ -269,10 +269,10 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
|
||||
background: 'transparent',
|
||||
borderRadius: token.controlRadius,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.duration}, border 0s, line-height 0s, box-shadow 0s`,
|
||||
transition: `all ${token.motionDurationSlow}, border 0s, line-height 0s, box-shadow 0s`,
|
||||
|
||||
'&:hover': {
|
||||
backgroundColor: token.itemHoverBackground,
|
||||
backgroundColor: token.controlItemBgHover,
|
||||
},
|
||||
|
||||
[`&${treeCls}-node-selected`]: {
|
||||
@ -340,7 +340,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
|
||||
|
||||
// ============== Cover Background ==============
|
||||
[`${treeCls}-switcher`]: {
|
||||
background: token.componentBackground,
|
||||
background: token.colorBgComponent,
|
||||
|
||||
'&-line-icon': {
|
||||
// https://github.com/ant-design/ant-design/issues/32813
|
||||
@ -381,14 +381,14 @@ export const genDirectoryStyle = (token: TreeToken): CSSObject => {
|
||||
insetInlineEnd: 0,
|
||||
bottom: treeNodePadding,
|
||||
insetInlineStart: 0,
|
||||
transition: `background-color ${token.duration}`,
|
||||
transition: `background-color ${token.motionDurationSlow}`,
|
||||
content: '""',
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
|
||||
'&:hover': {
|
||||
'&:before': {
|
||||
background: token.itemHoverBackground,
|
||||
background: token.controlItemBgHover,
|
||||
},
|
||||
},
|
||||
|
||||
@ -399,7 +399,7 @@ export const genDirectoryStyle = (token: TreeToken): CSSObject => {
|
||||
|
||||
// >>> Switcher
|
||||
[`${treeCls}-switcher`]: {
|
||||
transition: `color ${token.duration}`,
|
||||
transition: `color ${token.motionDurationSlow}`,
|
||||
},
|
||||
|
||||
// >>> Title
|
||||
|
||||
@ -39,7 +39,7 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = token => {
|
||||
},
|
||||
|
||||
'&&-disabled': {
|
||||
color: token.disabledColor,
|
||||
color: token.colorTextDisabled,
|
||||
cursor: 'not-allowed',
|
||||
userSelect: 'none',
|
||||
},
|
||||
|
||||
@ -57,7 +57,7 @@ export const getTitleStyles: GenerateStyle<TypographyToken, CSSObject> = token =
|
||||
] = getTitleStyle({
|
||||
fontSize: token[`fontSizeHeading${headingLevel}`],
|
||||
lineHeight: token[`lineHeightHeading${headingLevel}`],
|
||||
color: token.headingColor,
|
||||
color: token.colorTextHeading,
|
||||
typographyToken: token.typography,
|
||||
});
|
||||
});
|
||||
@ -74,7 +74,7 @@ export const getLinkStyles: GenerateStyle<TypographyToken, CSSObject> = token =>
|
||||
},
|
||||
|
||||
[`&[disabled], &.${token.typography.prefixCls}-disabled`]: {
|
||||
color: token.disabledColor,
|
||||
color: token.colorTextDisabled,
|
||||
cursor: 'not-allowed',
|
||||
|
||||
'&:active, &:hover': {
|
||||
|
||||
@ -3,11 +3,52 @@ import * as React from 'react';
|
||||
import hljs from 'highlight.js';
|
||||
import css from 'highlight.js/lib/languages/css';
|
||||
import 'highlight.js/styles/github.css';
|
||||
import { Drawer, Typography, Alert, Space, Tabs } from 'antd';
|
||||
import { Drawer, Typography, Alert, Space, Tabs, ConfigProvider, Table, TableProps } from 'antd';
|
||||
import getValidateStatus, { STATUS, PASS } from './validateCheck';
|
||||
|
||||
hljs.registerLanguage('css', css);
|
||||
|
||||
const columns: TableProps<{ name: string; value: any }>['columns'] = [
|
||||
{
|
||||
dataIndex: 'name',
|
||||
title: 'Name',
|
||||
width: 1,
|
||||
},
|
||||
{
|
||||
dataIndex: 'value',
|
||||
title: 'Value',
|
||||
render: (value: string) => {
|
||||
let content: React.ReactNode = value;
|
||||
|
||||
switch (typeof value) {
|
||||
case 'object': {
|
||||
if (Array.isArray(value)) {
|
||||
content = (
|
||||
<ul style={{ margin: 0 }}>
|
||||
{(value as string[]).map((val, index) => (
|
||||
<li key={index}>
|
||||
<Space size="large">
|
||||
<span style={{ userSelect: 'none' }}>[{index}]</span>
|
||||
{val}
|
||||
</Space>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-fallthrough
|
||||
default:
|
||||
content = String(value);
|
||||
}
|
||||
|
||||
return <span style={{ wordBreak: 'break-word' }}>{content}</span>;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export interface PreviewProps {
|
||||
visible: boolean;
|
||||
componentName: string;
|
||||
@ -17,6 +58,19 @@ export interface PreviewProps {
|
||||
export default function Preview({ visible, onClose }: PreviewProps) {
|
||||
const [styleList, setStyleList] = React.useState<string[]>([]);
|
||||
|
||||
// Full token
|
||||
const [, token] = ConfigProvider.useToken();
|
||||
const tokenList = React.useMemo(
|
||||
() =>
|
||||
Object.keys(token)
|
||||
.filter(name => !name.startsWith('_'))
|
||||
.map((name: keyof typeof token) => ({
|
||||
name,
|
||||
value: token[name],
|
||||
})),
|
||||
[token],
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
const observer = new MutationObserver(() => {
|
||||
const latestStyles = Array.from(document.querySelectorAll('style[data-css-hash]'))
|
||||
@ -134,6 +188,16 @@ export default function Preview({ visible, onClose }: PreviewProps) {
|
||||
))}
|
||||
</Typography>
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab="Token" key="token">
|
||||
<Table
|
||||
dataSource={tokenList}
|
||||
columns={columns}
|
||||
rowKey="name"
|
||||
bordered
|
||||
size="small"
|
||||
pagination={false}
|
||||
/>
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane tab="Analysis" key="analysis">
|
||||
<Space style={{ width: '100%' }} direction="vertical">
|
||||
{invalidateStyles.map(({ status, line, source }, index) => (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user