mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
refactor: More alias token (#34681)
* chore: colorHighlight * chore: bgSecondary * chore: colorLink * chore: link style * chore: rm fly variables * chore: colorAction * chore: add warning comment * chore: token outline * chore: colorBgXXX * chore: alert * rm: zIndex * chore: rm zIndexComponent * fix: tag color checkabl * chore: tags tmp
This commit is contained in:
二货机器人
GitHub
parent
ae7ce6789b
commit
d952088650
@ -34,7 +34,7 @@ export interface OverrideToken {
|
||||
// ======================================================================
|
||||
// == Seed Token ==
|
||||
// ======================================================================
|
||||
|
||||
// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
|
||||
export interface SeedToken extends PresetColorType {
|
||||
// Color
|
||||
colorPrimary: string;
|
||||
@ -56,6 +56,7 @@ export interface SeedToken extends PresetColorType {
|
||||
gridBaseStep: number;
|
||||
|
||||
// Line
|
||||
/** Border width of base components */
|
||||
lineWidth: number;
|
||||
|
||||
// Motion
|
||||
@ -76,34 +77,54 @@ export interface SeedToken extends PresetColorType {
|
||||
|
||||
// Control Base
|
||||
controlHeight: number;
|
||||
|
||||
// zIndex
|
||||
/** Base zIndex of component like BackTop, Affix which can be cover by large popup */
|
||||
zIndexBase: number;
|
||||
/** Base popup component zIndex */
|
||||
zIndexPopup: number;
|
||||
}
|
||||
|
||||
// ======================================================================
|
||||
// == Derivative Token ==
|
||||
// ======================================================================
|
||||
|
||||
// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
|
||||
export interface DerivativeToken extends SeedToken, ColorPalettes {
|
||||
// Color
|
||||
colorPrimaryHover: string;
|
||||
colorPrimaryActive: string;
|
||||
colorPrimaryOutline: string;
|
||||
colorPrimarySecondary: string; // primary[2]
|
||||
|
||||
colorSuccessSecondary: string;
|
||||
colorBgSuccess: string; // success[0]
|
||||
|
||||
colorWarningHover: string;
|
||||
colorWarningActive: string;
|
||||
colorWarningOutline: string;
|
||||
colorWarningSecondary: string;
|
||||
colorBgWarning: string;
|
||||
|
||||
colorErrorHover: string;
|
||||
colorErrorActive: string;
|
||||
colorErrorOutline: string;
|
||||
colorErrorSecondary: string;
|
||||
colorBgError: string;
|
||||
|
||||
colorInfoSecondary: string;
|
||||
colorBgInfo: string;
|
||||
|
||||
colorText2: string;
|
||||
colorTextBelow: string;
|
||||
colorTextBelow2: string;
|
||||
colorTextBelow3: string;
|
||||
|
||||
colorBg2: string;
|
||||
colorBgBelow: string;
|
||||
colorBgBelow2: string;
|
||||
|
||||
colorHighlight: string;
|
||||
|
||||
// Font
|
||||
fontSizes: number[];
|
||||
lineHeights: number[];
|
||||
@ -131,6 +152,7 @@ export interface DerivativeToken extends SeedToken, ColorPalettes {
|
||||
radiusLG: number;
|
||||
radiusXL: number;
|
||||
|
||||
// Control
|
||||
/** @private Only Used for control inside component like Multiple Select inner selection item */
|
||||
controlHeightXS: number;
|
||||
controlHeightSM: number;
|
||||
@ -140,7 +162,7 @@ export interface DerivativeToken extends SeedToken, ColorPalettes {
|
||||
// ======================================================================
|
||||
// == Alias Token ==
|
||||
// ======================================================================
|
||||
// FIXME: DerivativeToken should part pick
|
||||
// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
|
||||
export interface AliasToken extends DerivativeToken {
|
||||
// Font
|
||||
fontSizeSM: number;
|
||||
@ -180,29 +202,27 @@ export interface AliasToken extends DerivativeToken {
|
||||
/** Placeholder text color */
|
||||
colorPlaceholder: string;
|
||||
colorTextHeading: string;
|
||||
|
||||
/** Weak action. Such as `allowClear` or Alert close button */
|
||||
colorAction: string;
|
||||
/** Weak action hover color. Such as `allowClear` or Alert close button */
|
||||
colorActionHover: string;
|
||||
|
||||
colorLink: string;
|
||||
colorLinkHover: string;
|
||||
colorLinkActive: string;
|
||||
|
||||
colorBgContainer: string;
|
||||
colorBgComponent: string;
|
||||
colorBgComponentSecondary: string;
|
||||
colorBgComponentDisabled: string;
|
||||
|
||||
// =============== Legacy: should be remove ===============
|
||||
iconColorHover: string;
|
||||
|
||||
padding: number;
|
||||
margin: number;
|
||||
|
||||
backgroundLight: string;
|
||||
|
||||
zIndexDropdown: number;
|
||||
zIndexAffix: number;
|
||||
|
||||
boxShadow: string;
|
||||
|
||||
// =============== Legacy: should be remove ===============
|
||||
highlightColor: string;
|
||||
|
||||
linkColor: string;
|
||||
linkHoverColor: string;
|
||||
linkActiveColor: string;
|
||||
linkDecoration: React.CSSProperties['textDecoration'];
|
||||
linkHoverDecoration: React.CSSProperties['textDecoration'];
|
||||
linkFocusDecoration: React.CSSProperties['textDecoration'];
|
||||
@ -216,26 +236,4 @@ export interface AliasToken extends DerivativeToken {
|
||||
marginXS: number;
|
||||
marginLG: number;
|
||||
marginXXS: number;
|
||||
|
||||
primaryColors: string[];
|
||||
errorColors: string[];
|
||||
warningColors: string[];
|
||||
|
||||
// TMP
|
||||
tmpPrimaryColorWeak: string;
|
||||
tmpPrimaryHoverColorWeak: string;
|
||||
// Checked background for Checkable Tag
|
||||
tmpPrimaryColor6: string;
|
||||
// Active background for Checkable Tag
|
||||
tmpPrimaryColor7: string;
|
||||
|
||||
tmpSuccessColorDeprecatedBg: string;
|
||||
tmpWarningColorDeprecatedBg: string;
|
||||
tmpErrorColorDeprecatedBg: string;
|
||||
tmpInfoColorDeprecatedBg: string;
|
||||
|
||||
tmpSuccessColorDeprecatedBorder: string;
|
||||
tmpWarningColorDeprecatedBorder: string;
|
||||
tmpErrorColorDeprecatedBorder: string;
|
||||
tmpInfoColorDeprecatedBorder: string;
|
||||
}
|
||||
|
||||
@ -24,8 +24,10 @@ const defaultPresetColors: PresetColorType = {
|
||||
export function derivative(token: SeedToken): DerivativeToken {
|
||||
const {
|
||||
colorPrimary,
|
||||
colorSuccess,
|
||||
colorWarning,
|
||||
colorError,
|
||||
colorInfo,
|
||||
motionUnit,
|
||||
motionBase,
|
||||
fontSizeBase,
|
||||
@ -38,8 +40,10 @@ export function derivative(token: SeedToken): DerivativeToken {
|
||||
} = token;
|
||||
|
||||
const primaryColors = generate(colorPrimary);
|
||||
const successColors = generate(colorSuccess);
|
||||
const warningColors = generate(colorWarning);
|
||||
const errorColors = generate(colorError);
|
||||
const infoColors = generate(colorInfo);
|
||||
|
||||
const colorPalettes = Object.keys(defaultPresetColors)
|
||||
.map((colorKey: keyof PresetColorType) => {
|
||||
@ -92,18 +96,34 @@ export function derivative(token: SeedToken): DerivativeToken {
|
||||
radiusXL: radiusBase * 4,
|
||||
|
||||
// color
|
||||
colorBg2: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(),
|
||||
colorBgBelow: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(),
|
||||
colorBgBelow2: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(),
|
||||
|
||||
colorPrimaryActive: primaryColors[6],
|
||||
colorPrimaryHover: primaryColors[4],
|
||||
colorPrimaryOutline: new TinyColor(colorPrimary).setAlpha(0.2).toRgbString(),
|
||||
colorPrimarySecondary: primaryColors[2],
|
||||
|
||||
colorSuccessSecondary: successColors[2],
|
||||
colorBgSuccess: successColors[0],
|
||||
|
||||
colorErrorActive: errorColors[6],
|
||||
colorErrorHover: errorColors[4],
|
||||
colorErrorOutline: new TinyColor(colorError).setAlpha(0.2).toRgbString(),
|
||||
colorErrorSecondary: errorColors[2],
|
||||
colorBgError: errorColors[0],
|
||||
|
||||
colorWarningActive: warningColors[6],
|
||||
colorWarningHover: warningColors[4],
|
||||
colorWarningOutline: new TinyColor(colorWarning).setAlpha(0.2).toRgbString(),
|
||||
colorWarningSecondary: warningColors[2],
|
||||
colorBgWarning: warningColors[0],
|
||||
|
||||
colorInfoSecondary: infoColors[2],
|
||||
colorBgInfo: infoColors[0],
|
||||
|
||||
colorHighlight: errorColors[4],
|
||||
|
||||
// text color
|
||||
colorText2: new TinyColor('#000').setAlpha(0.85).toRgbString(),
|
||||
@ -165,6 +185,10 @@ const seedToken: SeedToken = {
|
||||
|
||||
// Control Base
|
||||
controlHeight: 32,
|
||||
|
||||
// zIndex
|
||||
zIndexBase: 0,
|
||||
zIndexPopup: 1000,
|
||||
};
|
||||
|
||||
export default seedToken;
|
||||
|
||||
@ -39,8 +39,16 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
|
||||
colorBgContainer: mergedToken.colorBgBelow2,
|
||||
colorBgComponent: mergedToken.colorBg,
|
||||
colorBgComponentSecondary: mergedToken.colorBg2,
|
||||
colorBgComponentDisabled: mergedToken.colorBgBelow2,
|
||||
|
||||
colorLink: mergedToken.colorPrimary,
|
||||
colorLinkHover: primaryColors[4],
|
||||
colorLinkActive: primaryColors[6],
|
||||
|
||||
colorAction: mergedToken.colorTextBelow,
|
||||
colorActionHover: mergedToken.colorText,
|
||||
|
||||
// Font
|
||||
fontSizeSM: fontSizes[0],
|
||||
fontSize: fontSizes[1],
|
||||
@ -76,37 +84,19 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
|
||||
// 🔥🔥🔥🔥🔥🔥🔥🔥🔥 All TMP Token leaves here 🔥🔥🔥🔥🔥🔥🔥🔥🔥
|
||||
// FIXME: Handle this when derivative is ready
|
||||
primaryColors,
|
||||
warningColors,
|
||||
errorColors,
|
||||
// primaryColors,
|
||||
// warningColors,
|
||||
// errorColors,
|
||||
|
||||
tmpPrimaryColorWeak: primaryColors[2],
|
||||
tmpPrimaryHoverColorWeak: primaryColors[0],
|
||||
tmpPrimaryColor6: primaryColors[5],
|
||||
tmpPrimaryColor7: primaryColors[6],
|
||||
colorSuccessSecondary: successColors[2],
|
||||
colorWarningSecondary: warningColors[2],
|
||||
colorErrorSecondary: errorColors[2],
|
||||
colorInfoSecondary: infoColors[2],
|
||||
|
||||
tmpSuccessColorDeprecatedBg: successColors[0],
|
||||
tmpWarningColorDeprecatedBg: warningColors[0],
|
||||
tmpErrorColorDeprecatedBg: errorColors[0],
|
||||
tmpInfoColorDeprecatedBg: infoColors[0],
|
||||
|
||||
tmpSuccessColorDeprecatedBorder: successColors[2],
|
||||
tmpWarningColorDeprecatedBorder: warningColors[2],
|
||||
tmpErrorColorDeprecatedBorder: errorColors[2],
|
||||
tmpInfoColorDeprecatedBorder: infoColors[2],
|
||||
|
||||
highlightColor: errorColors[5], // FIXME: Should not align with error color
|
||||
// FIXME: fix2 badge-color
|
||||
|
||||
linkColor: mergedToken.colorPrimary,
|
||||
linkHoverColor: primaryColors[4],
|
||||
linkActiveColor: primaryColors[6],
|
||||
linkDecoration: 'none',
|
||||
linkHoverDecoration: 'none',
|
||||
linkFocusDecoration: 'none',
|
||||
|
||||
iconColorHover: new TinyColor('#000').setAlpha(0.75).toRgbString(),
|
||||
|
||||
controlPaddingHorizontal: 16,
|
||||
controlPaddingHorizontalSM: 12,
|
||||
|
||||
@ -123,12 +113,6 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
// marginSM: 8,
|
||||
marginLG: 32,
|
||||
|
||||
// background of header and selected item
|
||||
backgroundLight: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(),
|
||||
|
||||
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),
|
||||
|
||||
@ -3,17 +3,19 @@ import { DerivativeToken } from '..';
|
||||
|
||||
// eslint-disable-next-line import/prefer-default-export
|
||||
export const operationUnit = (token: DerivativeToken): CSSObject => ({
|
||||
color: token.linkColor,
|
||||
// FIXME: This use link but is a operation unit. Seems should be a colorPrimary.
|
||||
// And Typography use this to generate link style which should not do this.
|
||||
color: token.colorLink,
|
||||
textDecoration: 'none',
|
||||
outline: 'none',
|
||||
cursor: 'pointer',
|
||||
transition: `color ${token.motionDurationSlow}`,
|
||||
|
||||
'&:focus, &:hover': {
|
||||
color: token.linkHoverColor,
|
||||
color: token.colorLinkHover,
|
||||
},
|
||||
|
||||
'&:active': {
|
||||
color: token.linkActiveColor,
|
||||
color: token.colorLinkActive,
|
||||
},
|
||||
});
|
||||
|
||||
@ -10,6 +10,7 @@ import {
|
||||
|
||||
interface AffixToken extends DerivativeToken {
|
||||
affixCls: string;
|
||||
zIndexAffix: number;
|
||||
}
|
||||
|
||||
// ============================== Shared ==============================
|
||||
@ -32,6 +33,7 @@ export default function useStyle(prefixCls: string): UseComponentStyleResult {
|
||||
...token,
|
||||
|
||||
affixCls: `.${prefixCls}`,
|
||||
zIndexAffix: token.zIndexBase + 10,
|
||||
};
|
||||
|
||||
return [
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
// import './index.less';
|
||||
|
||||
// deps-lint-skip-all
|
||||
import { generate } from '@ant-design/colors';
|
||||
import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
|
||||
|
||||
import {
|
||||
@ -23,22 +22,6 @@ type AlertToken = DerivativeToken & {
|
||||
alertCloseColor: string;
|
||||
alertCloseHoverColor: string;
|
||||
|
||||
alertInfoBgColor: string;
|
||||
alertInfoIconColor: string;
|
||||
alertInfoBorderColor: string;
|
||||
|
||||
alertSuccessBgColor: string;
|
||||
alertSuccessIconColor: string;
|
||||
alertSuccessBorderColor: string;
|
||||
|
||||
alertWarningBgColor: string;
|
||||
alertWarningIconColor: string;
|
||||
alertWarningBorderColor: string;
|
||||
|
||||
alertErrorBgColor: string;
|
||||
alertErrorIconColor: string;
|
||||
alertErrorBorderColor: string;
|
||||
|
||||
alertWithDescriptionIconSize: number;
|
||||
alertWithDescriptionPaddingVertical: number;
|
||||
alertWithDescriptionNoIconPaddingVertical: number;
|
||||
@ -161,54 +144,43 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
|
||||
export const genTypeStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSObject => {
|
||||
const {
|
||||
alertCls,
|
||||
alertInfoBgColor,
|
||||
alertInfoIconColor,
|
||||
alertInfoBorderColor,
|
||||
|
||||
alertSuccessBgColor,
|
||||
alertSuccessIconColor,
|
||||
alertSuccessBorderColor,
|
||||
colorSuccess,
|
||||
colorSuccessSecondary,
|
||||
colorBgSuccess,
|
||||
|
||||
alertWarningBgColor,
|
||||
alertWarningIconColor,
|
||||
alertWarningBorderColor,
|
||||
colorWarning,
|
||||
colorWarningSecondary,
|
||||
colorBgWarning,
|
||||
|
||||
alertErrorBgColor,
|
||||
alertErrorIconColor,
|
||||
alertErrorBorderColor,
|
||||
colorError,
|
||||
colorErrorSecondary,
|
||||
colorBgError,
|
||||
|
||||
colorInfo,
|
||||
colorInfoSecondary,
|
||||
colorBgInfo,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
[alertCls]: {
|
||||
'&-success': genAlertTypeStyle(
|
||||
alertSuccessBgColor,
|
||||
alertSuccessBorderColor,
|
||||
alertSuccessIconColor,
|
||||
token,
|
||||
alertCls,
|
||||
),
|
||||
'&-info': genAlertTypeStyle(
|
||||
alertInfoBgColor,
|
||||
alertInfoBorderColor,
|
||||
alertInfoIconColor,
|
||||
colorBgSuccess,
|
||||
colorSuccessSecondary,
|
||||
colorSuccess,
|
||||
token,
|
||||
alertCls,
|
||||
),
|
||||
'&-info': genAlertTypeStyle(colorBgInfo, colorInfoSecondary, colorInfo, token, alertCls),
|
||||
'&-warning': genAlertTypeStyle(
|
||||
alertWarningBgColor,
|
||||
alertWarningBorderColor,
|
||||
alertWarningIconColor,
|
||||
colorBgWarning,
|
||||
colorWarningSecondary,
|
||||
colorWarning,
|
||||
token,
|
||||
alertCls,
|
||||
),
|
||||
'&-error': {
|
||||
...genAlertTypeStyle(
|
||||
alertErrorBgColor,
|
||||
alertErrorBorderColor,
|
||||
alertErrorIconColor,
|
||||
token,
|
||||
alertCls,
|
||||
),
|
||||
...genAlertTypeStyle(colorBgError, colorErrorSecondary, colorError, token, alertCls),
|
||||
[`${alertCls}-description > pre`]: {
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
@ -281,50 +253,17 @@ export default function useStyle(
|
||||
const alertCls = `.${prefixCls}`;
|
||||
|
||||
const alertMessageColor = token.colorTextHeading;
|
||||
const alertCloseColor = token.colorTextSecondary;
|
||||
const alertCloseHoverColor = token.iconColorHover;
|
||||
const alertCloseColor = token.colorAction;
|
||||
const alertCloseHoverColor = token.colorActionHover;
|
||||
// FIXME
|
||||
const alertWithDescriptionIconSize = 24;
|
||||
const alertWithDescriptionPaddingVertical = token.padding - 1;
|
||||
const alertWithDescriptionNoIconPaddingVertical = token.padding - 1;
|
||||
|
||||
// FIXME
|
||||
const infoColors = generate(token.colorInfo);
|
||||
const alertInfoBgColor = infoColors[0];
|
||||
const alertInfoIconColor = token.colorInfo;
|
||||
const alertInfoBorderColor = infoColors[2];
|
||||
|
||||
const successColors = generate(token.colorSuccess);
|
||||
const alertSuccessBgColor = successColors[0];
|
||||
const alertSuccessIconColor = token.colorSuccess;
|
||||
const alertSuccessBorderColor = successColors[2];
|
||||
|
||||
const warningColors = generate(token.colorWarning);
|
||||
const alertWarningBgColor = warningColors[0];
|
||||
const alertWarningIconColor = token.colorWarning;
|
||||
const alertWarningBorderColor = warningColors[2];
|
||||
|
||||
const errorColors = generate(token.colorError);
|
||||
const alertErrorBgColor = errorColors[0];
|
||||
const alertErrorIconColor = token.colorError;
|
||||
const alertErrorBorderColor = errorColors[2];
|
||||
|
||||
const alertToken: AlertToken = {
|
||||
...token,
|
||||
alertCls,
|
||||
iconPrefixCls,
|
||||
alertInfoBgColor,
|
||||
alertInfoIconColor,
|
||||
alertInfoBorderColor,
|
||||
alertSuccessBgColor,
|
||||
alertSuccessIconColor,
|
||||
alertSuccessBorderColor,
|
||||
alertWarningBgColor,
|
||||
alertWarningIconColor,
|
||||
alertWarningBorderColor,
|
||||
alertErrorBgColor,
|
||||
alertErrorIconColor,
|
||||
alertErrorBorderColor,
|
||||
alertMessageColor,
|
||||
alertCloseColor,
|
||||
alertCloseHoverColor,
|
||||
|
||||
@ -337,7 +337,7 @@ export default function useStyle(
|
||||
const badgeTextColor = token.colorBgComponent;
|
||||
const badgeFontWeight = 'normal';
|
||||
const badgeFontSize = token.fontSizeSM;
|
||||
const badgeColor = token.highlightColor;
|
||||
const badgeColor = token.colorHighlight;
|
||||
const badgeHeightSm = 14; // FIXME: hard code
|
||||
const badgeDotSize = 6; // FIXME: hard code
|
||||
const badgeFontSizeSm = token.fontSizeSM;
|
||||
|
||||
@ -223,14 +223,14 @@ const genDashedButtonStyle = (prefixCls: string, token: DerivativeToken): CSSObj
|
||||
|
||||
// Type: Link
|
||||
const genLinkButtonStyle = (prefixCls: string, token: DerivativeToken): CSSObject => ({
|
||||
color: token.linkColor,
|
||||
color: token.colorLink,
|
||||
|
||||
...genHoverActiveButtonStyle(
|
||||
{
|
||||
color: token.colorPrimaryHover,
|
||||
color: token.colorLinkHover,
|
||||
},
|
||||
{
|
||||
color: token.colorPrimaryActive,
|
||||
color: token.colorLinkActive,
|
||||
},
|
||||
),
|
||||
|
||||
|
||||
@ -139,7 +139,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token, hashId) => {
|
||||
},
|
||||
|
||||
'&-keyword': {
|
||||
color: token.highlightColor,
|
||||
color: token.colorHighlight,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -256,7 +256,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
|
||||
fontWeight: 'normal',
|
||||
fontSize: token.fontSize,
|
||||
textAlign: 'center',
|
||||
backgroundColor: token.backgroundLight,
|
||||
backgroundColor: token.colorBgComponentSecondary,
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
|
||||
borderRadius: token.controlRadius,
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
@ -581,9 +581,10 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
|
||||
prefixCls,
|
||||
iconPrefixCls,
|
||||
inputAffixMargin,
|
||||
colorTextSecondary: textColorSecondary,
|
||||
motionDurationSlow: duration,
|
||||
iconColorHover,
|
||||
colorTextSecondary,
|
||||
motionDurationSlow,
|
||||
colorAction,
|
||||
colorActionHover,
|
||||
colorPrimary,
|
||||
colorSuccess,
|
||||
} = token;
|
||||
@ -635,7 +636,7 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
|
||||
},
|
||||
|
||||
'&-show-count-suffix': {
|
||||
color: textColorSecondary,
|
||||
color: colorTextSecondary,
|
||||
},
|
||||
|
||||
'&-show-count-has-suffix': {
|
||||
@ -655,12 +656,12 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
|
||||
|
||||
// password
|
||||
[`.${iconPrefixCls}.${prefixCls}-password-icon`]: {
|
||||
color: textColorSecondary,
|
||||
color: colorAction,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${duration}`,
|
||||
transition: `all ${motionDurationSlow}`,
|
||||
|
||||
'&:hover': {
|
||||
color: iconColorHover,
|
||||
color: colorActionHover,
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@ -22,19 +22,18 @@ interface MentionsToken extends InputToken {
|
||||
const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
|
||||
const {
|
||||
mentionsCls,
|
||||
backgroundLight,
|
||||
colorTextDisabled: textColorDisabled,
|
||||
controlItemBgHover: itemHoverBackground,
|
||||
colorTextDisabled,
|
||||
controlItemBgHover,
|
||||
controlPaddingHorizontal,
|
||||
colorText: textColor,
|
||||
motionDurationSlow: duration,
|
||||
colorText,
|
||||
motionDurationSlow,
|
||||
lineHeight,
|
||||
controlHeight,
|
||||
inputPaddingHorizontal,
|
||||
inputPaddingVertical,
|
||||
fontSize,
|
||||
colorBgComponent: componentBackground,
|
||||
controlRadius: borderRadius,
|
||||
colorBgComponent,
|
||||
controlRadius,
|
||||
boxShadow,
|
||||
} = token;
|
||||
|
||||
@ -124,8 +123,8 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
|
||||
boxSizing: 'border-box',
|
||||
fontSize,
|
||||
fontVariant: 'initial',
|
||||
backgroundColor: componentBackground,
|
||||
borderRadius,
|
||||
backgroundColor: colorBgComponent,
|
||||
borderRadius: controlRadius,
|
||||
outline: 'none',
|
||||
boxShadow,
|
||||
|
||||
@ -147,21 +146,21 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
|
||||
minWidth: 100, // FIXME: magic
|
||||
padding: `5px ${controlPaddingHorizontal}px`, // FIXME: magic
|
||||
overflow: 'hidden',
|
||||
color: textColor,
|
||||
color: colorText,
|
||||
fontWeight: 'normal',
|
||||
lineHeight,
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
cursor: 'pointer',
|
||||
transition: `background ${duration} ease`,
|
||||
transition: `background ${motionDurationSlow} ease`,
|
||||
|
||||
'&:hover': {
|
||||
backgroundColor: itemHoverBackground,
|
||||
backgroundColor: controlItemBgHover,
|
||||
},
|
||||
|
||||
'&:first-child': {
|
||||
borderStartStartRadius: borderRadius,
|
||||
borderStartEndRadius: borderRadius,
|
||||
borderStartStartRadius: controlRadius,
|
||||
borderStartEndRadius: controlRadius,
|
||||
borderEndStartRadius: 0,
|
||||
borderEndEndRadius: 0,
|
||||
},
|
||||
@ -169,29 +168,29 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
|
||||
'&:last-child': {
|
||||
borderStartStartRadius: 0,
|
||||
borderStartEndRadius: 0,
|
||||
borderEndStartRadius: borderRadius,
|
||||
borderEndEndRadius: borderRadius,
|
||||
borderEndStartRadius: controlRadius,
|
||||
borderEndEndRadius: controlRadius,
|
||||
},
|
||||
|
||||
'&-disabled': {
|
||||
color: textColorDisabled,
|
||||
color: colorTextDisabled,
|
||||
cursor: 'not-allowed',
|
||||
|
||||
'&:hover': {
|
||||
color: textColorDisabled,
|
||||
backgroundColor: itemHoverBackground,
|
||||
color: colorTextDisabled,
|
||||
backgroundColor: controlItemBgHover,
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
},
|
||||
|
||||
'&-selected': {
|
||||
color: textColor,
|
||||
color: colorText,
|
||||
fontWeight: 600, // FIXME: Need design token?
|
||||
backgroundColor: backgroundLight,
|
||||
backgroundColor: controlItemBgHover,
|
||||
},
|
||||
|
||||
'&-active': {
|
||||
backgroundColor: itemHoverBackground,
|
||||
backgroundColor: controlItemBgHover,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -75,7 +75,7 @@ const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
|
||||
[`${resultCls} ${resultCls}-content`]: {
|
||||
marginTop: token.padding * 1.5,
|
||||
padding: `${token.padding * 1.5}px ${token.padding * 2.5}px`,
|
||||
backgroundColor: token.backgroundLight,
|
||||
backgroundColor: token.colorBgComponentSecondary,
|
||||
},
|
||||
|
||||
[`${resultCls} ${resultCls}-extra`]: {
|
||||
|
||||
@ -25,6 +25,7 @@ export type SelectToken = DerivativeToken & {
|
||||
selectCls: string;
|
||||
iconPrefixCls: string;
|
||||
inputPaddingHorizontalBase: number;
|
||||
zIndexDropdown: number;
|
||||
};
|
||||
|
||||
// ============================= Selector =============================
|
||||
@ -288,6 +289,7 @@ const genSelectStyle = (
|
||||
selectCls,
|
||||
iconPrefixCls,
|
||||
inputPaddingHorizontalBase,
|
||||
zIndexDropdown: token.zIndexPopup + 50,
|
||||
};
|
||||
|
||||
return [
|
||||
|
||||
@ -121,7 +121,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
|
||||
...resetIcon(),
|
||||
|
||||
display: 'inline-block',
|
||||
color: token.colorTextSecondary,
|
||||
color: token.colorAction,
|
||||
fontWeight: 'bold',
|
||||
fontSize: 10,
|
||||
lineHeight: 'inherit',
|
||||
@ -132,7 +132,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
|
||||
},
|
||||
|
||||
'&:hover': {
|
||||
color: token.iconColorHover,
|
||||
color: token.colorActionHover,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -53,7 +53,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
|
||||
[`${sliderCls}-track`]: {
|
||||
position: 'absolute',
|
||||
backgroundColor: token.tmpPrimaryColorWeak, // FIXME: Origin @primary-3
|
||||
backgroundColor: token.colorPrimarySecondary,
|
||||
borderRadius: token.controlRadius,
|
||||
transition: `background-color ${token.motionDurationSlow}`,
|
||||
},
|
||||
@ -63,7 +63,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
width: token.handleSize,
|
||||
height: token.handleSize,
|
||||
backgroundColor: token.colorBgComponent,
|
||||
border: `2px solid ${token.tmpPrimaryColorWeak}`,
|
||||
border: `2px solid ${token.colorPrimarySecondary}`,
|
||||
borderRadius: '50%',
|
||||
boxShadow: 'none',
|
||||
cursor: 'pointer',
|
||||
@ -158,7 +158,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
transition: `border-color ${token.motionDurationSlow}`,
|
||||
|
||||
'&-active': {
|
||||
borderColor: token.tmpPrimaryColorWeak,
|
||||
borderColor: token.colorPrimarySecondary,
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@ -163,23 +163,18 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
|
||||
verticalAlign: 'middle',
|
||||
backgroundColor: token.colorTextDisabled,
|
||||
border: '0',
|
||||
// FIXME
|
||||
borderRadius: 100,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.switchDuration}`,
|
||||
userSelect: 'none',
|
||||
|
||||
'&:focus': {
|
||||
'&:focus-visible': {
|
||||
outline: 0,
|
||||
// FIXME
|
||||
boxShadow: `0 0 0 2px ${new TinyColor(token.colorTextDisabled)
|
||||
.setAlpha(0.1)
|
||||
.toRgbString()}`,
|
||||
boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.colorBgComponentDisabled}`,
|
||||
},
|
||||
|
||||
[`&${token.switchCls}-checked:focus`]: {
|
||||
// FIXME
|
||||
boxShadow: `0 0 0 2px ${token.tmpPrimaryHoverColorWeak}`,
|
||||
[`&${token.switchCls}-checked:focus-visible`]: {
|
||||
boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.colorPrimaryOutline}`,
|
||||
},
|
||||
|
||||
'&:focus:hover': {
|
||||
|
||||
@ -32,8 +32,8 @@ const genTagStatusStyle = (
|
||||
return {
|
||||
[`.${prefixCls}-${status}`]: {
|
||||
color: token[`color${cssVariableType}`],
|
||||
background: token[`tmp${capitalizedCssVariableType}ColorDeprecatedBg`],
|
||||
borderColor: token[`tmp${capitalizedCssVariableType}ColorDeprecatedBorder`],
|
||||
background: token[`colorBg${capitalizedCssVariableType}`],
|
||||
borderColor: token[`color${capitalizedCssVariableType}Secondary`],
|
||||
},
|
||||
};
|
||||
};
|
||||
@ -115,7 +115,7 @@ const genBaseStyle = (
|
||||
},
|
||||
},
|
||||
|
||||
[`.${prefixCls}-checkable`]: {
|
||||
[`&-checkable`]: {
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: 'transparent',
|
||||
cursor: 'pointer',
|
||||
@ -129,15 +129,15 @@ const genBaseStyle = (
|
||||
},
|
||||
|
||||
'&-checked': {
|
||||
backgroundColor: token.tmpPrimaryColor6,
|
||||
backgroundColor: token.colorPrimary,
|
||||
},
|
||||
|
||||
'&:active': {
|
||||
backgroundColor: token.tmpPrimaryColor7,
|
||||
backgroundColor: token.colorPrimaryActive,
|
||||
},
|
||||
},
|
||||
|
||||
[`.${prefixCls}-hidden`]: {
|
||||
[`&-hidden`]: {
|
||||
display: 'none',
|
||||
},
|
||||
|
||||
@ -157,7 +157,7 @@ export const genTagStyle = (
|
||||
const tagFontSize = token.fontSizeSM;
|
||||
// FIXME: hard code
|
||||
const tagLineHeight = '18px';
|
||||
const tagDefaultBg = token.backgroundLight;
|
||||
const tagDefaultBg = token.colorBgComponentSecondary;
|
||||
const tagDefaultColor = token.colorText;
|
||||
|
||||
const tagToken = {
|
||||
|
||||
@ -95,7 +95,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
|
||||
},
|
||||
|
||||
'&-focused:not(:hover):not(&-active-focused)': {
|
||||
background: token.tmpPrimaryHoverColorWeak,
|
||||
background: token.colorPrimaryOutline,
|
||||
},
|
||||
|
||||
// =================== Virtual List ===================
|
||||
@ -276,7 +276,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
|
||||
},
|
||||
|
||||
[`&${treeCls}-node-selected`]: {
|
||||
backgroundColor: token.tmpPrimaryHoverColorWeak,
|
||||
backgroundColor: token.colorPrimaryOutline,
|
||||
},
|
||||
|
||||
// Icon
|
||||
|
||||
@ -33,8 +33,7 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = token => {
|
||||
'&&-danger': {
|
||||
color: token.colorError,
|
||||
'a&:active, a&:focus, a&:hover': {
|
||||
// FIXME: need new token like errorColorHover
|
||||
color: token.errorColors[4],
|
||||
color: token.colorErrorHover,
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user