mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
refactor: Color related token (#34648)
* chore: move controlHeight in der * chore: controlLineWidth * chore: controlRadius * chore: color * chore: outline width * chore: outline width * chore: rm outlineBlurSize * chore: colorTextLightSolid
This commit is contained in:
二货机器人
GitHub
parent
608ce271b1
commit
a7a180b913
@ -125,6 +125,11 @@ export interface DerivativeToken extends SeedToken, ColorPalettes {
|
||||
radiusSM: number;
|
||||
radiusLG: number;
|
||||
radiusXL: number;
|
||||
|
||||
/** @private Only Used for control inside component like Multiple Select inner selection item */
|
||||
controlHeightXS: number;
|
||||
controlHeightSM: number;
|
||||
controlHeightLG: number;
|
||||
}
|
||||
|
||||
// ======================================================================
|
||||
@ -154,20 +159,19 @@ export interface AliasToken extends DerivativeToken {
|
||||
lineHeightHeading4: number;
|
||||
lineHeightHeading5: number;
|
||||
|
||||
// Control
|
||||
controlLineWidth: number;
|
||||
controlLineType: string;
|
||||
controlRadius: number;
|
||||
controlOutlineWidth: number;
|
||||
|
||||
// Color
|
||||
colorBorder: string;
|
||||
colorSplit: string;
|
||||
colorTextSecondary: string;
|
||||
colorTextDisabled: string;
|
||||
|
||||
// =============== Legacy: should be remove ===============
|
||||
borderWidth: number;
|
||||
borderStyle: string;
|
||||
borderRadius: number;
|
||||
borderColor: string;
|
||||
borderColorSplit: string;
|
||||
|
||||
outlineWidth: number;
|
||||
outlineBlurSize: number;
|
||||
|
||||
fontFamily: string;
|
||||
textColorSecondary: string;
|
||||
textColorDisabled: string;
|
||||
textColorInverse: string;
|
||||
placeholderColor: string;
|
||||
|
||||
disabledColor: string;
|
||||
@ -211,10 +215,6 @@ export interface AliasToken extends DerivativeToken {
|
||||
linkHoverDecoration: React.CSSProperties['textDecoration'];
|
||||
linkFocusDecoration: React.CSSProperties['textDecoration'];
|
||||
|
||||
/** @private Only Used for control inside component like Multiple Select inner selection item */
|
||||
controlHeightXS: number;
|
||||
controlHeightSM: number;
|
||||
controlHeightLG: number;
|
||||
controlPaddingHorizontal: number;
|
||||
controlPaddingHorizontalSM: number;
|
||||
paddingSM: number;
|
||||
|
||||
@ -34,6 +34,7 @@ export function derivative(token: SeedToken): DerivativeToken {
|
||||
gridUnit,
|
||||
gridBaseStep,
|
||||
radiusBase,
|
||||
controlHeight,
|
||||
} = token;
|
||||
|
||||
const primaryColors = generate(colorPrimary);
|
||||
@ -92,7 +93,6 @@ export function derivative(token: SeedToken): DerivativeToken {
|
||||
radiusXL: radiusBase * 4,
|
||||
|
||||
// color
|
||||
|
||||
colorBgBelow: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(),
|
||||
colorBgBelow2: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(),
|
||||
|
||||
@ -109,6 +109,11 @@ export function derivative(token: SeedToken): DerivativeToken {
|
||||
colorTextBelow: new TinyColor('#000').setAlpha(0.45).toRgbString(),
|
||||
colorTextBelow2: new TinyColor('#000').setAlpha(0.25).toRgbString(),
|
||||
colorTextBelow3: new TinyColor({ h: 0, s: 0, v: 75 }).setAlpha(0.5).toRgbString(),
|
||||
|
||||
// control
|
||||
controlHeightSM: controlHeight * 0.75,
|
||||
controlHeightXS: controlHeight * 0.5,
|
||||
controlHeightLG: controlHeight * 1.25,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -38,6 +38,9 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
errorActiveColor: mergedToken.colorErrorActive,
|
||||
warningHoverColor: mergedToken.colorWarningHover,
|
||||
|
||||
colorTextSecondary: mergedToken.colorTextBelow,
|
||||
colorTextDisabled: mergedToken.colorTextBelow2,
|
||||
|
||||
// Font
|
||||
fontSizeSM: fontSizes[0],
|
||||
fontSize: fontSizes[1],
|
||||
@ -58,6 +61,17 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
lineHeightHeading4: lineHeights[3],
|
||||
lineHeightHeading5: lineHeights[2],
|
||||
|
||||
// Control
|
||||
controlLineWidth: mergedToken.lineWidth,
|
||||
controlOutlineWidth: mergedToken.lineWidth * 2,
|
||||
|
||||
// 👀👀👀👀👀👀👀👀👀 Not align with Derivative 👀👀👀👀👀👀👀👀👀
|
||||
// FIXME: @arvinxx handle this
|
||||
controlLineType: 'solid',
|
||||
controlRadius: mergedToken.radiusBase,
|
||||
colorBorder: new TinyColor({ h: 0, s: 0, v: 85 }).toHexString(),
|
||||
colorSplit: new TinyColor({ h: 0, s: 0, v: 94 }).toHexString(),
|
||||
|
||||
// 🔥🔥🔥🔥🔥🔥🔥🔥🔥 All TMP Token leaves here 🔥🔥🔥🔥🔥🔥🔥🔥🔥
|
||||
// FIXME: Handle this when derivative is ready
|
||||
primaryColors,
|
||||
@ -95,21 +109,6 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
linkHoverDecoration: 'none',
|
||||
linkFocusDecoration: 'none',
|
||||
|
||||
borderWidth: 1,
|
||||
borderStyle: 'solid',
|
||||
borderRadius: 2,
|
||||
borderColor: new TinyColor({ h: 0, s: 0, v: 85 }).toHexString(),
|
||||
borderColorSplit: new TinyColor({ h: 0, s: 0, v: 94 }).toHexString(),
|
||||
|
||||
outlineWidth: 2,
|
||||
outlineBlurSize: 0,
|
||||
|
||||
fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
||||
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
||||
'Noto Color Emoji'`,
|
||||
textColorSecondary: new TinyColor('#000').setAlpha(0.45).toRgbString(),
|
||||
textColorDisabled: new TinyColor('#000').setAlpha(0.25).toRgbString(),
|
||||
textColorInverse: '#fff',
|
||||
placeholderColor: new TinyColor({ h: 0, s: 0, v: 75 }).setAlpha(0.5).toRgbString(),
|
||||
|
||||
disabledColor: new TinyColor('#000').setAlpha(0.25).toRgbString(),
|
||||
@ -120,9 +119,6 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
|
||||
itemHoverBackground: '#f5f5f5',
|
||||
|
||||
controlHeightSM: 24,
|
||||
controlHeightXS: 16,
|
||||
controlHeightLG: 40,
|
||||
controlPaddingHorizontal: 16,
|
||||
controlPaddingHorizontalSM: 12,
|
||||
|
||||
|
||||
@ -52,7 +52,7 @@ const genAlertTypeStyle = (
|
||||
alertCls: string,
|
||||
): CSSObject => ({
|
||||
backgroundColor: bgColor,
|
||||
border: `${token.borderWidth}px ${token.borderStyle} ${borderColor}`,
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${borderColor}`,
|
||||
[`${alertCls}-icon`]: {
|
||||
color: iconColor,
|
||||
},
|
||||
@ -65,7 +65,7 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
|
||||
marginXS,
|
||||
fontSize,
|
||||
fontSizeLG,
|
||||
borderRadius,
|
||||
controlRadius: borderRadius,
|
||||
motionEaseInOutCirc,
|
||||
alertMessageColor,
|
||||
alertWithDescriptionIconSize,
|
||||
@ -281,7 +281,7 @@ export default function useStyle(
|
||||
const alertCls = `.${prefixCls}`;
|
||||
|
||||
const alertMessageColor = token.headingColor;
|
||||
const alertCloseColor = token.textColorSecondary;
|
||||
const alertCloseColor = token.colorTextSecondary;
|
||||
const alertCloseHoverColor = token.iconColorHover;
|
||||
// FIXME
|
||||
const alertWithDescriptionIconSize = 24;
|
||||
|
||||
@ -273,7 +273,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
|
||||
lineHeight: '22px', // colorPrimarycode, copied from old less file
|
||||
whiteSpace: 'nowrap',
|
||||
backgroundColor: token.colorPrimary,
|
||||
borderRadius: token.borderRadius,
|
||||
borderRadius: token.controlRadius,
|
||||
[`.${ribbonPrefixCls}-text`]: { color: '#fff' },
|
||||
[`.${ribbonPrefixCls}-corner`]: {
|
||||
position: 'absolute',
|
||||
|
||||
@ -23,7 +23,7 @@ const genSharedButtonStyle = (
|
||||
textAlign: 'center',
|
||||
backgroundImage: 'none',
|
||||
backgroundColor: 'transparent',
|
||||
border: `${token.borderWidth}px ${token.borderStyle} transparent`,
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} transparent`,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.duration} ${token.motionEaseInOut}`,
|
||||
userSelect: 'none',
|
||||
@ -91,15 +91,15 @@ const genGhostButtonStyle = (
|
||||
const genSolidDisabledButtonStyle = (token: DerivativeToken): CSSObject => ({
|
||||
'&:disabled': {
|
||||
cursor: 'not-allowed',
|
||||
borderColor: token.borderColor,
|
||||
color: token.textColorDisabled,
|
||||
borderColor: token.colorBorder,
|
||||
color: token.colorTextDisabled,
|
||||
backgroundColor: token.componentBackgroundDisabled,
|
||||
boxShadow: 'none',
|
||||
},
|
||||
});
|
||||
|
||||
const genSolidButtonStyle = (token: DerivativeToken): CSSObject => ({
|
||||
borderRadius: token.borderRadius,
|
||||
borderRadius: token.controlRadius,
|
||||
|
||||
...genSolidDisabledButtonStyle(token),
|
||||
});
|
||||
@ -107,7 +107,7 @@ const genSolidButtonStyle = (token: DerivativeToken): CSSObject => ({
|
||||
const genPureDisabledButtonStyle = (token: DerivativeToken): CSSObject => ({
|
||||
'&:disabled': {
|
||||
cursor: 'not-allowed',
|
||||
color: token.textColorDisabled,
|
||||
color: token.colorTextDisabled,
|
||||
},
|
||||
});
|
||||
|
||||
@ -116,7 +116,7 @@ const genDefaultButtonStyle = (prefixCls: string, token: DerivativeToken): CSSOb
|
||||
...genSolidButtonStyle(token),
|
||||
|
||||
backgroundColor: token.componentBackground,
|
||||
borderColor: token.borderColor,
|
||||
borderColor: token.colorBorder,
|
||||
|
||||
boxShadow: '0 2px 0 rgba(0, 0, 0, 0.015)',
|
||||
|
||||
@ -135,8 +135,8 @@ const genDefaultButtonStyle = (prefixCls: string, token: DerivativeToken): CSSOb
|
||||
prefixCls,
|
||||
token.componentBackground,
|
||||
token.componentBackground,
|
||||
token.textColorDisabled,
|
||||
token.borderColor,
|
||||
token.colorTextDisabled,
|
||||
token.colorBorder,
|
||||
),
|
||||
|
||||
[`&.${prefixCls}-dangerous`]: {
|
||||
@ -158,8 +158,8 @@ const genDefaultButtonStyle = (prefixCls: string, token: DerivativeToken): CSSOb
|
||||
prefixCls,
|
||||
token.colorError,
|
||||
token.colorError,
|
||||
token.textColorDisabled,
|
||||
token.borderColor,
|
||||
token.colorTextDisabled,
|
||||
token.colorBorder,
|
||||
),
|
||||
...genSolidDisabledButtonStyle(token),
|
||||
},
|
||||
@ -187,8 +187,8 @@ const genPrimaryButtonStyle = (prefixCls: string, token: DerivativeToken): CSSOb
|
||||
prefixCls,
|
||||
token.colorPrimary,
|
||||
token.colorPrimary,
|
||||
token.textColorDisabled,
|
||||
token.borderColor,
|
||||
token.colorTextDisabled,
|
||||
token.colorBorder,
|
||||
),
|
||||
|
||||
[`&.${prefixCls}-dangerous`]: {
|
||||
@ -207,8 +207,8 @@ const genPrimaryButtonStyle = (prefixCls: string, token: DerivativeToken): CSSOb
|
||||
prefixCls,
|
||||
token.colorError,
|
||||
token.colorError,
|
||||
token.textColorDisabled,
|
||||
token.borderColor,
|
||||
token.colorTextDisabled,
|
||||
token.colorBorder,
|
||||
),
|
||||
...genSolidDisabledButtonStyle(token),
|
||||
},
|
||||
@ -296,9 +296,9 @@ const genSizeButtonStyle = (
|
||||
): CSSInterpolation => {
|
||||
const paddingVertical = Math.max(
|
||||
0,
|
||||
(token.controlHeight - token.fontSize * token.lineHeight) / 2 - token.borderWidth,
|
||||
(token.controlHeight - token.fontSize * token.lineHeight) / 2 - token.controlLineWidth,
|
||||
);
|
||||
const paddingHorizontal = token.padding - token.borderWidth;
|
||||
const paddingHorizontal = token.padding - token.controlLineWidth;
|
||||
|
||||
const iconOnlyCls = `.${prefixCls}-icon-only`;
|
||||
|
||||
|
||||
@ -73,7 +73,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token, hashId) => {
|
||||
height: 'auto',
|
||||
|
||||
[cascaderMenuItemCls]: {
|
||||
color: token.textColorDisabled,
|
||||
color: token.colorTextDisabled,
|
||||
cursor: 'default',
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
@ -90,7 +90,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token, hashId) => {
|
||||
overflow: 'auto',
|
||||
verticalAlign: 'top',
|
||||
listStyle: 'none',
|
||||
borderInlineEnd: `${token.borderWidth}px ${token.borderStyle} ${token.borderColorSplit}`,
|
||||
borderInlineEnd: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorSplit}`,
|
||||
'-ms-overflow-style': '-ms-autohiding-scrollbar', // https://github.com/ant-design/ant-design/issues/11857
|
||||
|
||||
'&-item': {
|
||||
@ -109,7 +109,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token, hashId) => {
|
||||
background: token.itemHoverBackground,
|
||||
},
|
||||
' &-disabled': {
|
||||
color: token.textColorDisabled,
|
||||
color: token.colorTextDisabled,
|
||||
cursor: 'not-allowed',
|
||||
|
||||
'&:hover': {
|
||||
@ -117,7 +117,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token, hashId) => {
|
||||
},
|
||||
|
||||
[iconCls]: {
|
||||
color: token.textColorDisabled,
|
||||
color: token.colorTextDisabled,
|
||||
},
|
||||
},
|
||||
|
||||
@ -134,7 +134,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token, hashId) => {
|
||||
|
||||
[iconCls]: {
|
||||
marginInlineStart: token.paddingXXS,
|
||||
color: token.textColorSecondary,
|
||||
color: token.colorTextSecondary,
|
||||
fontSize: 10, // FIXME: hardcode in v4
|
||||
},
|
||||
|
||||
|
||||
@ -95,8 +95,8 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) =>
|
||||
height: token.fontSizeLG,
|
||||
direction: 'ltr',
|
||||
backgroundColor: token.componentBackground,
|
||||
border: `${token.borderWidth}px ${token.borderStyle} ${token.borderColor}`,
|
||||
borderRadius: token.borderRadius,
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
|
||||
borderRadius: token.controlRadius,
|
||||
borderCollapse: 'separate',
|
||||
transition: `all ${token.duration}`,
|
||||
|
||||
@ -188,8 +188,8 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) =>
|
||||
insetInlineStart: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
border: `${token.borderWidth}px ${token.borderStyle} ${token.colorPrimary}`,
|
||||
borderRadius: token.borderRadius,
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorPrimary}`,
|
||||
borderRadius: token.controlRadius,
|
||||
visibility: 'hidden',
|
||||
animation: `${antCheckboxEffect.getName(hashId)} ${token.duration} ease-in-out`,
|
||||
animationFillMode: 'backwards',
|
||||
@ -215,10 +215,10 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) =>
|
||||
// Wrapper > Checkbox > inner
|
||||
[`${checkboxCls}-inner`]: {
|
||||
background: token.background,
|
||||
borderColor: token.borderColor,
|
||||
borderColor: token.colorBorder,
|
||||
|
||||
'&:after': {
|
||||
borderColor: token.borderColor,
|
||||
borderColor: token.colorBorder,
|
||||
},
|
||||
},
|
||||
|
||||
@ -227,7 +227,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) =>
|
||||
},
|
||||
|
||||
'& + span': {
|
||||
color: token.textColorDisabled,
|
||||
color: token.colorTextDisabled,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -164,7 +164,7 @@ export default function useStyle(prefixCls: string): UseComponentStyleResult {
|
||||
// FIXME
|
||||
const dividerBorderColor = 'rgba(0, 0, 0, 6%)';
|
||||
|
||||
const dividerBorderWidth = token.borderWidth;
|
||||
const dividerBorderWidth = token.controlLineWidth;
|
||||
|
||||
const dividerNotDefaultTextPadding = 0;
|
||||
const dividerVerticalGutterMargin = token.marginXS;
|
||||
|
||||
@ -27,16 +27,16 @@ interface InputNumberToken extends InputToken {
|
||||
const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumberToken) => {
|
||||
const {
|
||||
inputNumberCls,
|
||||
borderWidth,
|
||||
borderStyle,
|
||||
borderColor,
|
||||
borderRadius,
|
||||
controlLineWidth: borderWidth,
|
||||
controlLineType: borderStyle,
|
||||
colorBorder: borderColor,
|
||||
controlRadius: borderRadius,
|
||||
fontSizeLG,
|
||||
controlHeightLG,
|
||||
controlHeightSM,
|
||||
colorError,
|
||||
paddingXS,
|
||||
textColorSecondary,
|
||||
colorTextSecondary: textColorSecondary,
|
||||
durationFast,
|
||||
inputNumberHandlerActiveBgColor,
|
||||
colorPrimary,
|
||||
@ -46,7 +46,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
duration,
|
||||
componentBackground,
|
||||
durationMid,
|
||||
textColorDisabled,
|
||||
colorTextDisabled: textColorDisabled,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
|
||||
@ -42,26 +42,26 @@ export const genPlaceholderStyle = (
|
||||
|
||||
export const genHoverStyle = (token: InputToken): CSSObject => ({
|
||||
borderColor: token.inputBorderHoverColor,
|
||||
borderInlineEndWidth: token.borderWidth,
|
||||
borderInlineEndWidth: token.controlLineWidth,
|
||||
});
|
||||
|
||||
export const genActiveStyle = (token: InputToken) => ({
|
||||
borderColor: token.inputBorderHoverColor,
|
||||
boxShadow: `0 0 0 ${token.outlineWidth}px ${token.primaryOutlineColor}`,
|
||||
borderInlineEndWidth: token.borderWidth,
|
||||
boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.primaryOutlineColor}`,
|
||||
borderInlineEndWidth: token.controlLineWidth,
|
||||
outline: 0,
|
||||
});
|
||||
|
||||
export const genDisabledStyle = (token: InputToken): CSSObject => ({
|
||||
color: token.textColorDisabled,
|
||||
color: token.colorTextDisabled,
|
||||
backgroundColor: token.componentBackgroundDisabled,
|
||||
borderColor: token.borderColor,
|
||||
borderColor: token.colorBorder,
|
||||
boxShadow: 'none',
|
||||
cursor: 'not-allowed',
|
||||
opacity: 1,
|
||||
|
||||
'&:hover': {
|
||||
...genHoverStyle({ ...token, inputBorderHoverColor: token.borderColor }),
|
||||
...genHoverStyle({ ...token, inputBorderHoverColor: token.colorBorder }),
|
||||
},
|
||||
});
|
||||
|
||||
@ -132,10 +132,10 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({
|
||||
lineHeight: token.lineHeight,
|
||||
backgroundColor: token.componentBackground,
|
||||
backgroundImage: 'none',
|
||||
borderWidth: token.borderWidth,
|
||||
borderStyle: token.borderStyle,
|
||||
borderColor: token.borderColor,
|
||||
borderRadius: token.borderRadius,
|
||||
borderWidth: token.controlLineWidth,
|
||||
borderStyle: token.controlLineType,
|
||||
borderColor: token.colorBorder,
|
||||
borderRadius: token.controlRadius,
|
||||
transition: `all ${token.duration}`,
|
||||
...genPlaceholderStyle(),
|
||||
|
||||
@ -257,8 +257,8 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
|
||||
fontSize: token.fontSize,
|
||||
textAlign: 'center',
|
||||
backgroundColor: token.backgroundLight,
|
||||
border: `${token.borderWidth}px ${token.borderStyle} ${token.borderColor}`,
|
||||
borderRadius: token.borderRadius,
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
|
||||
borderRadius: token.controlRadius,
|
||||
transition: `all ${token.duration}`,
|
||||
|
||||
// Reset Select's style in addon
|
||||
@ -268,7 +268,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
|
||||
'&.ant-select-single:not(.ant-select-customize-input)': {
|
||||
'.ant-select-selector': {
|
||||
backgroundColor: 'inherit',
|
||||
border: `${token.borderWidth}px ${token.borderStyle} transparent`,
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} transparent`,
|
||||
boxShadow: 'none',
|
||||
},
|
||||
},
|
||||
@ -362,8 +362,8 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
|
||||
borderStartEndRadius: 0,
|
||||
borderEndEndRadius: 0,
|
||||
[`.${prefixCls}-search &`]: {
|
||||
borderStartStartRadius: token.borderRadius,
|
||||
borderEndStartRadius: token.borderRadius,
|
||||
borderStartStartRadius: token.controlRadius,
|
||||
borderEndStartRadius: token.controlRadius,
|
||||
},
|
||||
},
|
||||
|
||||
@ -379,7 +379,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
|
||||
|
||||
[`.${prefixCls}-group-addon, .${prefixCls}-group-wrap, > .${prefixCls}`]: {
|
||||
'&:not(:first-child):not(:last-child)': {
|
||||
borderInlineEndWidth: token.borderWidth,
|
||||
borderInlineEndWidth: token.controlLineWidth,
|
||||
|
||||
'&:hover': {
|
||||
zIndex: 1,
|
||||
@ -407,8 +407,8 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
|
||||
},
|
||||
|
||||
'& > *:not(:last-child)': {
|
||||
marginInlineEnd: -token.borderWidth,
|
||||
borderInlineEndWidth: token.borderWidth,
|
||||
marginInlineEnd: -token.controlLineWidth,
|
||||
borderInlineEndWidth: token.controlLineWidth,
|
||||
},
|
||||
|
||||
// Undo float for .ant-input-group .ant-input
|
||||
@ -421,7 +421,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
|
||||
& > .ant-select-auto-complete .${prefixCls},
|
||||
& > .ant-cascader-picker .${prefixCls},
|
||||
& > .${prefixCls}-group-wrapper .${prefixCls}`]: {
|
||||
borderInlineEndWidth: token.borderWidth,
|
||||
borderInlineEndWidth: token.controlLineWidth,
|
||||
borderRadius: 0,
|
||||
|
||||
'&:hover': {
|
||||
@ -446,17 +446,17 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
|
||||
& > .ant-select:first-child > .ant-select-selector,
|
||||
& > .ant-select-auto-complete:first-child .${prefixCls},
|
||||
& > .ant-cascader-picker:first-child .${prefixCls}`]: {
|
||||
borderStartStartRadius: token.borderRadius,
|
||||
borderEndStartRadius: token.borderRadius,
|
||||
borderStartStartRadius: token.controlRadius,
|
||||
borderEndStartRadius: token.controlRadius,
|
||||
},
|
||||
|
||||
[`& > *:last-child,
|
||||
& > .ant-select:last-child > .ant-select-selector,
|
||||
& > .ant-cascader-picker:last-child .${prefixCls},
|
||||
& > .ant-cascader-picker-focused:last-child .${prefixCls}`]: {
|
||||
borderInlineEndWidth: token.borderWidth,
|
||||
borderStartEndRadius: token.borderRadius,
|
||||
borderEndEndRadius: token.borderRadius,
|
||||
borderInlineEndWidth: token.controlLineWidth,
|
||||
borderStartEndRadius: token.controlRadius,
|
||||
borderEndEndRadius: token.controlRadius,
|
||||
},
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/12493
|
||||
@ -478,10 +478,10 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
|
||||
},
|
||||
|
||||
[`& > .${prefixCls}`]: {
|
||||
borderStartStartRadius: token.borderRadius,
|
||||
borderStartStartRadius: token.controlRadius,
|
||||
borderStartEndRadius: 0,
|
||||
borderEndEndRadius: 0,
|
||||
borderEndStartRadius: token.borderRadius,
|
||||
borderEndStartRadius: token.controlRadius,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -519,7 +519,7 @@ const genInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
|
||||
|
||||
'&::after': {
|
||||
textAlign: 'end',
|
||||
color: token.textColorSecondary,
|
||||
color: token.colorTextSecondary,
|
||||
whiteSpace: 'nowrap',
|
||||
content: 'attr(data-count)',
|
||||
pointerEvents: 'none',
|
||||
@ -536,7 +536,7 @@ const genAllowClearStyle = (token: InputToken): CSSObject => {
|
||||
// ========================= Input =========================
|
||||
[`.${prefixCls}-clear-icon`]: {
|
||||
margin: 0,
|
||||
color: token.textColorDisabled,
|
||||
color: token.colorTextDisabled,
|
||||
fontSize: token.fontSizeSM,
|
||||
verticalAlign: -1, // FIXME: magic number
|
||||
// https://github.com/ant-design/ant-design/pull/18151
|
||||
@ -545,7 +545,7 @@ const genAllowClearStyle = (token: InputToken): CSSObject => {
|
||||
transition: `color ${token.duration}`,
|
||||
|
||||
'&:hover': {
|
||||
color: token.textColorSecondary,
|
||||
color: token.colorTextSecondary,
|
||||
},
|
||||
|
||||
'&:active': {
|
||||
@ -581,7 +581,7 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
|
||||
prefixCls,
|
||||
iconPrefixCls,
|
||||
inputAffixMargin,
|
||||
textColorSecondary,
|
||||
colorTextSecondary: textColorSecondary,
|
||||
duration,
|
||||
iconColorHover,
|
||||
colorPrimary,
|
||||
@ -759,13 +759,13 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
|
||||
paddingTop: 0,
|
||||
paddingBottom: 0,
|
||||
borderStartStartRadius: 0,
|
||||
borderStartEndRadius: token.borderRadius,
|
||||
borderEndEndRadius: token.borderRadius,
|
||||
borderStartEndRadius: token.controlRadius,
|
||||
borderEndEndRadius: token.controlRadius,
|
||||
borderEndStartRadius: 0,
|
||||
},
|
||||
|
||||
[`${searchPrefixCls}-button:not(.ant-btn-primary)`]: {
|
||||
color: token.textColorSecondary,
|
||||
color: token.colorTextSecondary,
|
||||
|
||||
'&.ant-btn-loading::before': {
|
||||
insetInlineStart: 0,
|
||||
@ -811,18 +811,18 @@ export const initInputToken = (
|
||||
inputAffixMargin: token.marginXXS,
|
||||
inputPaddingVertical: Math.max(
|
||||
Math.round(((token.controlHeight - token.fontSize * token.lineHeight) / 2) * 10) / 10 -
|
||||
token.borderWidth,
|
||||
token.controlLineWidth,
|
||||
3,
|
||||
),
|
||||
inputPaddingVerticalLG:
|
||||
Math.ceil(((token.controlHeightLG - token.fontSizeLG * token.lineHeight) / 2) * 10) / 10 -
|
||||
token.borderWidth,
|
||||
token.controlLineWidth,
|
||||
inputPaddingVerticalSM: Math.max(
|
||||
Math.round(((token.controlHeightSM - token.fontSize * token.lineHeight) / 2) * 10) / 10 -
|
||||
token.borderWidth,
|
||||
token.controlLineWidth,
|
||||
0,
|
||||
),
|
||||
inputPaddingHorizontal: token.paddingSM - token.borderWidth,
|
||||
inputPaddingHorizontal: token.paddingSM - token.controlLineWidth,
|
||||
inputBorderHoverColor: token.primaryHoverColor,
|
||||
inputBorderActiveColor: token.primaryHoverColor,
|
||||
});
|
||||
|
||||
@ -23,7 +23,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
|
||||
const {
|
||||
mentionsCls,
|
||||
backgroundLight,
|
||||
textColorDisabled,
|
||||
colorTextDisabled: textColorDisabled,
|
||||
itemHoverBackground,
|
||||
controlPaddingHorizontal,
|
||||
colorText: textColor,
|
||||
@ -34,7 +34,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
|
||||
inputPaddingVertical,
|
||||
fontSize,
|
||||
componentBackground,
|
||||
borderRadius,
|
||||
controlRadius: borderRadius,
|
||||
boxShadow,
|
||||
} = token;
|
||||
|
||||
|
||||
@ -43,13 +43,13 @@ const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = token => {
|
||||
},
|
||||
|
||||
'&:focus-visible': {
|
||||
outline: `1px dashed ${token.borderColorSplit}`,
|
||||
outline: `1px dashed ${token.colorSplit}`,
|
||||
transform: token.rateStarHoverScale,
|
||||
},
|
||||
},
|
||||
|
||||
'&-first, &-second': {
|
||||
color: token.borderColorSplit,
|
||||
color: token.colorSplit,
|
||||
transition: `all ${token.duration}`,
|
||||
userSelect: 'none',
|
||||
|
||||
|
||||
@ -65,7 +65,7 @@ const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
|
||||
},
|
||||
|
||||
[`${resultCls} ${resultCls}-subtitle`]: {
|
||||
color: token.textColorSecondary,
|
||||
color: token.colorTextSecondary,
|
||||
fontSize: token.resultSubtitleFontSize,
|
||||
// FIXME: hard code
|
||||
lineHeight: 1.6,
|
||||
|
||||
@ -50,7 +50,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token, hashId) => {
|
||||
// https://github.com/ant-design/ant-design/issues/11843
|
||||
fontVariant: 'initial',
|
||||
backgroundColor: token.componentBackground,
|
||||
borderRadius: token.borderRadius,
|
||||
borderRadius: token.controlRadius,
|
||||
outline: 'none',
|
||||
boxShadow: token.boxShadow,
|
||||
|
||||
@ -81,13 +81,13 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token, hashId) => {
|
||||
},
|
||||
|
||||
'&-empty': {
|
||||
color: token.textColorDisabled,
|
||||
color: token.colorTextDisabled,
|
||||
},
|
||||
|
||||
// ========================= Options =========================
|
||||
[`${selectItemCls}-empty`]: {
|
||||
...genItemStyle(token),
|
||||
color: token.textColorDisabled,
|
||||
color: token.colorTextDisabled,
|
||||
},
|
||||
|
||||
[`${selectItemCls}`]: {
|
||||
@ -97,7 +97,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token, hashId) => {
|
||||
|
||||
// =========== Group ============
|
||||
'&-group': {
|
||||
color: token.textColorSecondary,
|
||||
color: token.colorTextSecondary,
|
||||
fontSize: token.fontSizeSM,
|
||||
cursor: 'default',
|
||||
},
|
||||
@ -135,7 +135,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token, hashId) => {
|
||||
backgroundColor: token.componentBackgroundDisabled,
|
||||
},
|
||||
|
||||
color: token.textColorDisabled,
|
||||
color: token.colorTextDisabled,
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
|
||||
|
||||
@ -34,8 +34,8 @@ const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = token => {
|
||||
return {
|
||||
position: 'relative',
|
||||
backgroundColor: token.componentBackground,
|
||||
border: `${token.borderWidth}px ${token.borderStyle} ${token.borderColor}`,
|
||||
borderRadius: token.borderRadius,
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
|
||||
borderRadius: token.controlRadius,
|
||||
transition: `all ${token.duration} ${token.motionEaseInOut}`,
|
||||
|
||||
input: {
|
||||
@ -51,7 +51,7 @@ const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = token => {
|
||||
},
|
||||
|
||||
[`${selectCls}-disabled&`]: {
|
||||
color: token.textColorDisabled,
|
||||
color: token.colorTextDisabled,
|
||||
background: token.componentBackgroundDisabled,
|
||||
cursor: 'not-allowed',
|
||||
|
||||
@ -73,9 +73,8 @@ const genStatusStyle = (
|
||||
selectCls: string;
|
||||
borderHoverColor: string;
|
||||
outlineColor: string;
|
||||
outlineWidth: number;
|
||||
outlineBlurSize: number;
|
||||
borderWidth: number;
|
||||
controlOutlineWidth: number;
|
||||
controlLineWidth: number;
|
||||
},
|
||||
overwriteDefaultBorder: boolean = false,
|
||||
): CSSObject => {
|
||||
@ -97,14 +96,14 @@ const genStatusStyle = (
|
||||
[`${selectCls}-focused& ${selectCls}-selector`]: {
|
||||
borderColor: borderHoverColor,
|
||||
// FIXME: missing variable of `@input-outline-offset`
|
||||
boxShadow: `0 0 ${token.outlineBlurSize}px ${token.outlineWidth}px ${outlineColor}`,
|
||||
borderInlineEndWidth: `${token.borderWidth}px !important`,
|
||||
boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${outlineColor}`,
|
||||
borderInlineEndWidth: `${token.controlLineWidth}px !important`,
|
||||
outline: 0,
|
||||
},
|
||||
|
||||
[`&:hover ${selectCls}-selector`]: {
|
||||
borderColor: borderHoverColor,
|
||||
borderInlineEndWidth: `${token.borderWidth}px !important`,
|
||||
borderInlineEndWidth: `${token.controlLineWidth}px !important`,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -182,7 +181,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
|
||||
width: token.fontSizeSM,
|
||||
height: token.fontSizeSM,
|
||||
marginTop: -token.fontSizeSM / 2,
|
||||
color: token.textColorDisabled,
|
||||
color: token.colorTextDisabled,
|
||||
fontSize: token.fontSizeSM,
|
||||
lineHeight: 1,
|
||||
textAlign: 'center',
|
||||
@ -217,7 +216,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
|
||||
width: token.fontSizeSM,
|
||||
height: token.fontSizeSM,
|
||||
marginTop: -token.fontSizeSM / 2,
|
||||
color: token.textColorDisabled,
|
||||
color: token.colorTextDisabled,
|
||||
fontSize: token.fontSizeSM,
|
||||
fontStyle: 'normal',
|
||||
lineHeight: 1,
|
||||
@ -234,7 +233,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
|
||||
},
|
||||
|
||||
'&:hover': {
|
||||
color: token.textColorSecondary,
|
||||
color: token.colorTextSecondary,
|
||||
},
|
||||
|
||||
[`${selectCls}:hover &`]: {
|
||||
|
||||
@ -4,7 +4,11 @@ import { resetIcon } from '../../_util/theme';
|
||||
|
||||
const FIXED_ITEM_MARGIN = 2;
|
||||
|
||||
function getSelectItemStyle({ controlHeightSM, controlHeight, borderWidth }: SelectToken) {
|
||||
function getSelectItemStyle({
|
||||
controlHeightSM,
|
||||
controlHeight,
|
||||
controlLineWidth: borderWidth,
|
||||
}: SelectToken) {
|
||||
const selectItemDist = (controlHeight - controlHeightSM) / 2 - borderWidth;
|
||||
const selectItemMargin = Math.ceil(selectItemDist / 2);
|
||||
return [selectItemDist, selectItemMargin];
|
||||
@ -87,10 +91,10 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
|
||||
height: selectItemHeight,
|
||||
marginTop: FIXED_ITEM_MARGIN,
|
||||
marginBottom: FIXED_ITEM_MARGIN,
|
||||
lineHeight: `${selectItemHeight - token.borderWidth * 2}px`,
|
||||
lineHeight: `${selectItemHeight - token.controlLineWidth * 2}px`,
|
||||
background: token.background,
|
||||
border: `${token.borderWidth}px solid ${token.borderColorSplit}`,
|
||||
borderRadius: token.borderRadius,
|
||||
border: `${token.controlLineWidth}px solid ${token.colorSplit}`,
|
||||
borderRadius: token.controlRadius,
|
||||
cursor: 'default',
|
||||
transition: `font-size ${token.duration}, line-height ${token.duration}, height ${token.duration}`,
|
||||
userSelect: 'none',
|
||||
@ -99,8 +103,8 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
|
||||
paddingInlineEnd: token.paddingXS / 2,
|
||||
|
||||
[`${selectCls}-disabled&`]: {
|
||||
color: token.textColorDisabled,
|
||||
borderColor: token.borderColor,
|
||||
color: token.colorTextDisabled,
|
||||
borderColor: token.colorBorder,
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
|
||||
@ -117,7 +121,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
|
||||
...resetIcon(),
|
||||
|
||||
display: 'inline-block',
|
||||
color: token.textColorSecondary,
|
||||
color: token.colorTextSecondary,
|
||||
fontWeight: 'bold',
|
||||
fontSize: 10,
|
||||
lineHeight: 'inherit',
|
||||
@ -206,7 +210,7 @@ export default function genMultipleStyle(token: SelectToken): CSSInterpolation {
|
||||
{
|
||||
[`${selectCls}-multiple${selectCls}-sm`]: {
|
||||
[`${selectCls}-selection-placeholder`]: {
|
||||
insetInlineStart: token.controlPaddingHorizontalSM - token.borderWidth,
|
||||
insetInlineStart: token.controlPaddingHorizontalSM - token.controlLineWidth,
|
||||
insetInlineEnd: 'auto',
|
||||
},
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ import type { SelectToken } from '.';
|
||||
function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
|
||||
const { selectCls, inputPaddingHorizontalBase } = token;
|
||||
|
||||
const selectHeightWithoutBorder = token.controlHeight - token.borderWidth * 2;
|
||||
const selectHeightWithoutBorder = token.controlHeight - token.controlLineWidth * 2;
|
||||
|
||||
const selectionItemPadding = Math.ceil(token.fontSize * 1.25);
|
||||
|
||||
@ -129,7 +129,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
|
||||
export default function genSingleStyle(token: SelectToken): CSSInterpolation {
|
||||
const { selectCls } = token;
|
||||
|
||||
const inputPaddingHorizontalSM = token.controlPaddingHorizontalSM - token.borderWidth;
|
||||
const inputPaddingHorizontalSM = token.controlPaddingHorizontalSM - token.controlLineWidth;
|
||||
|
||||
return [
|
||||
genSizeStyle(token),
|
||||
|
||||
@ -47,14 +47,14 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
[`${sliderCls}-rail`]: {
|
||||
position: 'absolute',
|
||||
backgroundColor: token.background,
|
||||
borderRadius: token.borderRadius,
|
||||
borderRadius: token.controlRadius,
|
||||
transition: `background-color ${token.duration}`,
|
||||
},
|
||||
|
||||
[`${sliderCls}-track`]: {
|
||||
position: 'absolute',
|
||||
backgroundColor: token.tmpPrimaryColorWeak, // FIXME: Origin @primary-3
|
||||
borderRadius: token.borderRadius,
|
||||
borderRadius: token.controlRadius,
|
||||
transition: `background-color ${token.duration}`,
|
||||
},
|
||||
|
||||
@ -130,7 +130,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
[`${sliderCls}-mark-text`]: {
|
||||
position: 'absolute',
|
||||
display: 'inline-block',
|
||||
color: token.textColorSecondary,
|
||||
color: token.colorTextSecondary,
|
||||
textAlign: 'center',
|
||||
wordBreak: 'keep-all',
|
||||
cursor: 'pointer',
|
||||
@ -152,7 +152,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
width: dotSize,
|
||||
height: dotSize,
|
||||
backgroundColor: token.componentBackground,
|
||||
border: `2px solid ${token.borderColorSplit}`, // FIXME: hardcode in v4
|
||||
border: `2px solid ${token.colorSplit}`, // FIXME: hardcode in v4
|
||||
borderRadius: '50%',
|
||||
cursor: 'pointer',
|
||||
transition: `border-color ${token.duration}`,
|
||||
@ -170,7 +170,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
},
|
||||
|
||||
[`${sliderCls}-track`]: {
|
||||
backgroundColor: `${token.textColorDisabled} !important`,
|
||||
backgroundColor: `${token.colorTextDisabled} !important`,
|
||||
},
|
||||
|
||||
[`
|
||||
@ -178,7 +178,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
${sliderCls}-dot
|
||||
`]: {
|
||||
backgroundColor: token.componentBackground,
|
||||
borderColor: `${token.textColorDisabled} !important`,
|
||||
borderColor: `${token.colorTextDisabled} !important`,
|
||||
boxShadow: 'none',
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
|
||||
@ -21,7 +21,7 @@ const genStatisticStyle: GenerateStyle<StatisticToken> = (token: StatisticToken)
|
||||
...resetComponent(token),
|
||||
[`${token.statisticCls}-title`]: {
|
||||
marginBottom: token.marginXXS,
|
||||
color: token.textColorSecondary,
|
||||
color: token.colorTextSecondary,
|
||||
fontSize: token.statisticTitleFontSize,
|
||||
},
|
||||
[`${token.statisticCls}-content`]: {
|
||||
|
||||
@ -135,7 +135,7 @@ const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
|
||||
display: 'block',
|
||||
marginInlineEnd: token.switchInnerMarginMin,
|
||||
marginInlineStart: token.switchInnerMarginMax,
|
||||
color: token.textColorInverse,
|
||||
color: token.colorTextLightSolid,
|
||||
fontSize: token.fontSizeSM,
|
||||
transition: `margin-inline-end ${token.switchDuration}, margin-inline-start ${token.switchDuration}`,
|
||||
},
|
||||
@ -161,7 +161,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
|
||||
height: token.switchHeight,
|
||||
lineHeight: `${token.switchHeight}px`,
|
||||
verticalAlign: 'middle',
|
||||
backgroundColor: token.textColorDisabled,
|
||||
backgroundColor: token.colorTextDisabled,
|
||||
border: '0',
|
||||
// FIXME
|
||||
borderRadius: 100,
|
||||
@ -172,7 +172,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
|
||||
'&:focus': {
|
||||
outline: 0,
|
||||
// FIXME
|
||||
boxShadow: `0 0 0 2px ${new TinyColor(token.textColorDisabled)
|
||||
boxShadow: `0 0 0 2px ${new TinyColor(token.colorTextDisabled)
|
||||
.setAlpha(0.1)
|
||||
.toRgbString()}`,
|
||||
},
|
||||
|
||||
@ -53,7 +53,7 @@ const genTagColorStyle = (prefixCls: string, token: TagToken): CSSInterpolation
|
||||
borderColor: lightBorderColor,
|
||||
},
|
||||
[`.${prefixCls}-${colorKey}-inverse`]: {
|
||||
color: token.textColorInverse,
|
||||
color: token.colorTextLightSolid,
|
||||
background: darkColor,
|
||||
borderColor: darkColor,
|
||||
},
|
||||
@ -77,8 +77,8 @@ const genBaseStyle = (
|
||||
lineHeight: token.tagLineHeight,
|
||||
whiteSpace: 'nowrap',
|
||||
background: token.tagDefaultBg,
|
||||
border: `${token.borderWidth}px ${token.borderStyle} ${token.borderColor}`,
|
||||
borderRadius: token.borderRadius,
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
|
||||
borderRadius: token.controlRadius,
|
||||
// FIXME: hard code
|
||||
opacity: 1,
|
||||
transition: `all ${token.duration}`,
|
||||
@ -96,7 +96,7 @@ const genBaseStyle = (
|
||||
[`.${prefixCls}-close-icon`]: {
|
||||
// FIXME: hard code
|
||||
marginInlineStart: 3,
|
||||
color: token.textColorSecondary,
|
||||
color: token.colorTextSecondary,
|
||||
// FIXME: hard code
|
||||
fontSize: 10,
|
||||
cursor: 'pointer',
|
||||
@ -111,7 +111,7 @@ const genBaseStyle = (
|
||||
borderColor: 'transparent',
|
||||
|
||||
[`&, a, a:hover, .${iconPrefixCls}-close, .${iconPrefixCls}-close:hover`]: {
|
||||
color: token.textColorInverse,
|
||||
color: token.colorTextLightSolid,
|
||||
},
|
||||
},
|
||||
|
||||
@ -125,7 +125,7 @@ const genBaseStyle = (
|
||||
},
|
||||
|
||||
'&:active, &-checked': {
|
||||
color: token.textColorInverse,
|
||||
color: token.colorTextLightSolid,
|
||||
},
|
||||
|
||||
'&-checked': {
|
||||
|
||||
@ -78,7 +78,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
|
||||
[treeCls]: {
|
||||
...resetComponent(token),
|
||||
background: token.componentBackground,
|
||||
borderRadius: token.borderRadius,
|
||||
borderRadius: token.controlRadius,
|
||||
transition: `background-color ${token.duration}`,
|
||||
|
||||
'&&-rtl': {
|
||||
@ -149,7 +149,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
|
||||
'&-disabled': {
|
||||
// >>> Title
|
||||
[`${treeCls}-node-content-wrapper`]: {
|
||||
color: token.textColorDisabled,
|
||||
color: token.colorTextDisabled,
|
||||
cursor: 'not-allowed',
|
||||
'&:hover': {
|
||||
background: 'transparent',
|
||||
@ -234,7 +234,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
|
||||
insetInlineEnd: treeTitleHeight / 2,
|
||||
bottom: -treeNodePadding,
|
||||
marginInlineStart: -1,
|
||||
borderInlineEnd: `1px solid ${token.borderColor}`,
|
||||
borderInlineEnd: `1px solid ${token.colorBorder}`,
|
||||
content: '""',
|
||||
},
|
||||
|
||||
@ -242,7 +242,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
|
||||
position: 'absolute',
|
||||
width: (treeTitleHeight / 2) * 0.8,
|
||||
height: treeTitleHeight / 2,
|
||||
borderBottom: `1px solid ${token.borderColor}`,
|
||||
borderBottom: `1px solid ${token.colorBorder}`,
|
||||
content: '""',
|
||||
},
|
||||
},
|
||||
@ -267,7 +267,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
|
||||
color: 'inherit',
|
||||
lineHeight: `${treeTitleHeight}px`,
|
||||
background: 'transparent',
|
||||
borderRadius: token.borderRadius,
|
||||
borderRadius: token.controlRadius,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.duration}, border 0s, line-height 0s, box-shadow 0s`,
|
||||
|
||||
@ -326,7 +326,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
|
||||
top: 0,
|
||||
insetInlineEnd: treeTitleHeight / 2,
|
||||
bottom: -treeNodePadding,
|
||||
borderInlineEnd: `1px solid ${token.borderColor}`,
|
||||
borderInlineEnd: `1px solid ${token.colorBorder}`,
|
||||
content: '""',
|
||||
},
|
||||
|
||||
@ -412,7 +412,7 @@ export const genDirectoryStyle = (token: TreeToken): CSSObject => {
|
||||
},
|
||||
|
||||
[`&.${treeCls}-node-selected`]: {
|
||||
color: token.textColorInverse,
|
||||
color: token.colorTextLightSolid,
|
||||
background: 'transparent',
|
||||
},
|
||||
},
|
||||
@ -428,12 +428,12 @@ export const genDirectoryStyle = (token: TreeToken): CSSObject => {
|
||||
|
||||
// >>> Switcher
|
||||
[`${treeCls}-switcher`]: {
|
||||
color: token.textColorInverse,
|
||||
color: token.colorTextLightSolid,
|
||||
},
|
||||
|
||||
// >>> Title
|
||||
[`${treeCls}-node-content-wrapper`]: {
|
||||
color: token.textColorInverse,
|
||||
color: token.colorTextLightSolid,
|
||||
background: 'transparent',
|
||||
},
|
||||
},
|
||||
|
||||
@ -19,7 +19,7 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = token => {
|
||||
color: token.colorText,
|
||||
overflowWrap: 'break-word',
|
||||
'&&-secondary': {
|
||||
color: token.textColorSecondary,
|
||||
color: token.colorTextSecondary,
|
||||
},
|
||||
|
||||
'&&-success': {
|
||||
|
||||
@ -204,7 +204,7 @@ export const getEditableStyles: GenerateStyle<TypographyToken, CSSObject> = toke
|
||||
position: 'absolute',
|
||||
insetInlineEnd: token.marginXS + 2,
|
||||
insetBlockEnd: token.marginXS,
|
||||
color: token.textColorSecondary,
|
||||
color: token.colorTextSecondary,
|
||||
// default style
|
||||
fontWeight: 'normal',
|
||||
fontSize: token.fontSize,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user