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

refactor: More alias token (#34681)

Browse Source 
* 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:
二货机器人 2022-03-24 14:30:48 +08:00 committed by GitHub
parent ae7ce6789b
commit d952088650
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 162 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
components/_util/theme/interface.ts
View File

@ -34,7 +34,7 @@ export interface OverrideToken {
// ====================================================================== // ======================================================================
// == Seed Token == // == Seed Token ==
// ====================================================================== // ======================================================================
// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
export interface SeedToken extends PresetColorType { export interface SeedToken extends PresetColorType {
// Color // Color
colorPrimary: string; colorPrimary: string;
@ -56,6 +56,7 @@ export interface SeedToken extends PresetColorType {
gridBaseStep: number; gridBaseStep: number;
// Line // Line
/** Border width of base components */
lineWidth: number; lineWidth: number;
// Motion // Motion
@ -76,34 +77,54 @@ export interface SeedToken extends PresetColorType {
// Control Base // Control Base
controlHeight: number; 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 == // == Derivative Token ==
// ====================================================================== // ======================================================================
// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
export interface DerivativeToken extends SeedToken, ColorPalettes { export interface DerivativeToken extends SeedToken, ColorPalettes {
// Color // Color
colorPrimaryHover: string; colorPrimaryHover: string;
colorPrimaryActive: string; colorPrimaryActive: string;
colorPrimaryOutline: string; colorPrimaryOutline: string;
colorPrimarySecondary: string; // primary[2]
colorSuccessSecondary: string;
colorBgSuccess: string; // success[0]
colorWarningHover: string; colorWarningHover: string;
colorWarningActive: string; colorWarningActive: string;
colorWarningOutline: string; colorWarningOutline: string;
colorWarningSecondary: string;
colorBgWarning: string;
colorErrorHover: string; colorErrorHover: string;
colorErrorActive: string; colorErrorActive: string;
colorErrorOutline: string; colorErrorOutline: string;
colorErrorSecondary: string;
colorBgError: string;
colorInfoSecondary: string;
colorBgInfo: string;
colorText2: string; colorText2: string;
colorTextBelow: string; colorTextBelow: string;
colorTextBelow2: string; colorTextBelow2: string;
colorTextBelow3: string; colorTextBelow3: string;
colorBg2: string;
colorBgBelow: string; colorBgBelow: string;
colorBgBelow2: string; colorBgBelow2: string;
colorHighlight: string;
// Font // Font
fontSizes: number[]; fontSizes: number[];
lineHeights: number[]; lineHeights: number[];
@ -131,6 +152,7 @@ export interface DerivativeToken extends SeedToken, ColorPalettes {
radiusLG: number; radiusLG: number;
radiusXL: number; radiusXL: number;
// Control
/** @private Only Used for control inside component like Multiple Select inner selection item */ /** @private Only Used for control inside component like Multiple Select inner selection item */
controlHeightXS: number; controlHeightXS: number;
controlHeightSM: number; controlHeightSM: number;
@ -140,7 +162,7 @@ export interface DerivativeToken extends SeedToken, ColorPalettes {
// ====================================================================== // ======================================================================
// == Alias Token == // == Alias Token ==
// ====================================================================== // ======================================================================
// FIXME: DerivativeToken should part pick // 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
export interface AliasToken extends DerivativeToken { export interface AliasToken extends DerivativeToken {
// Font // Font
fontSizeSM: number; fontSizeSM: number;
@ -180,29 +202,27 @@ export interface AliasToken extends DerivativeToken {
/** Placeholder text color */ /** Placeholder text color */
colorPlaceholder: string; colorPlaceholder: string;
colorTextHeading: 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; colorBgContainer: string;
colorBgComponent: string; colorBgComponent: string;
colorBgComponentSecondary: string;
colorBgComponentDisabled: string; colorBgComponentDisabled: string;
// =============== Legacy: should be remove =============== // =============== Legacy: should be remove ===============
iconColorHover: string;
padding: number; padding: number;
margin: number; margin: number;
backgroundLight: string;
zIndexDropdown: number;
zIndexAffix: number;
boxShadow: string; boxShadow: string;
// =============== Legacy: should be remove ===============
highlightColor: string;
linkColor: string;
linkHoverColor: string;
linkActiveColor: string;
linkDecoration: React.CSSProperties['textDecoration']; linkDecoration: React.CSSProperties['textDecoration'];
linkHoverDecoration: React.CSSProperties['textDecoration']; linkHoverDecoration: React.CSSProperties['textDecoration'];
linkFocusDecoration: React.CSSProperties['textDecoration']; linkFocusDecoration: React.CSSProperties['textDecoration'];
@ -216,26 +236,4 @@ export interface AliasToken extends DerivativeToken {
marginXS: number; marginXS: number;
marginLG: number; marginLG: number;
marginXXS: 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
components/_util/theme/themes/default.ts
View File

@ -24,8 +24,10 @@ const defaultPresetColors: PresetColorType = {
export function derivative(token: SeedToken): DerivativeToken { export function derivative(token: SeedToken): DerivativeToken {
const { const {
colorPrimary, colorPrimary,
colorSuccess,
colorWarning, colorWarning,
colorError, colorError,
colorInfo,
motionUnit, motionUnit,
motionBase, motionBase,
fontSizeBase, fontSizeBase,
@ -38,8 +40,10 @@ export function derivative(token: SeedToken): DerivativeToken {
} = token; } = token;
const primaryColors = generate(colorPrimary); const primaryColors = generate(colorPrimary);
const successColors = generate(colorSuccess);
const warningColors = generate(colorWarning); const warningColors = generate(colorWarning);
const errorColors = generate(colorError); const errorColors = generate(colorError);
const infoColors = generate(colorInfo);
const colorPalettes = Object.keys(defaultPresetColors) const colorPalettes = Object.keys(defaultPresetColors)
.map((colorKey: keyof PresetColorType) => { .map((colorKey: keyof PresetColorType) => {
@ -92,18 +96,34 @@ export function derivative(token: SeedToken): DerivativeToken {
radiusXL: radiusBase * 4, radiusXL: radiusBase * 4,
// color // color
colorBg2: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(),
colorBgBelow: 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(), colorBgBelow2: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(),
colorPrimaryActive: primaryColors[6], colorPrimaryActive: primaryColors[6],
colorPrimaryHover: primaryColors[4], colorPrimaryHover: primaryColors[4],
colorPrimaryOutline: new TinyColor(colorPrimary).setAlpha(0.2).toRgbString(), colorPrimaryOutline: new TinyColor(colorPrimary).setAlpha(0.2).toRgbString(),
colorPrimarySecondary: primaryColors[2],
colorSuccessSecondary: successColors[2],
colorBgSuccess: successColors[0],
colorErrorActive: errorColors[6], colorErrorActive: errorColors[6],
colorErrorHover: errorColors[4], colorErrorHover: errorColors[4],
colorErrorOutline: new TinyColor(colorError).setAlpha(0.2).toRgbString(), colorErrorOutline: new TinyColor(colorError).setAlpha(0.2).toRgbString(),
colorErrorSecondary: errorColors[2],
colorBgError: errorColors[0],
colorWarningActive: warningColors[6], colorWarningActive: warningColors[6],
colorWarningHover: warningColors[4], colorWarningHover: warningColors[4],
colorWarningOutline: new TinyColor(colorWarning).setAlpha(0.2).toRgbString(), 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 // text color
colorText2: new TinyColor('#000').setAlpha(0.85).toRgbString(), colorText2: new TinyColor('#000').setAlpha(0.85).toRgbString(),
@ -165,6 +185,10 @@ const seedToken: SeedToken = {
// Control Base // Control Base
controlHeight: 32, controlHeight: 32,
// zIndex
zIndexBase: 0,
zIndexPopup: 1000,
}; };
export default seedToken; export default seedToken;

46
components/_util/theme/util/alias.ts
View File

@ -39,8 +39,16 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
colorBgContainer: mergedToken.colorBgBelow2, colorBgContainer: mergedToken.colorBgBelow2,
colorBgComponent: mergedToken.colorBg, colorBgComponent: mergedToken.colorBg,
colorBgComponentSecondary: mergedToken.colorBg2,
colorBgComponentDisabled: mergedToken.colorBgBelow2, colorBgComponentDisabled: mergedToken.colorBgBelow2,
colorLink: mergedToken.colorPrimary,
colorLinkHover: primaryColors[4],
colorLinkActive: primaryColors[6],
colorAction: mergedToken.colorTextBelow,
colorActionHover: mergedToken.colorText,
// Font // Font
fontSizeSM: fontSizes[0], fontSizeSM: fontSizes[0],
fontSize: fontSizes[1], fontSize: fontSizes[1],
@ -76,37 +84,19 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
// 🔥🔥🔥🔥🔥🔥🔥🔥🔥 All TMP Token leaves here 🔥🔥🔥🔥🔥🔥🔥🔥🔥 // 🔥🔥🔥🔥🔥🔥🔥🔥🔥 All TMP Token leaves here 🔥🔥🔥🔥🔥🔥🔥🔥🔥
// FIXME: Handle this when derivative is ready // FIXME: Handle this when derivative is ready
primaryColors, // primaryColors,
warningColors, // warningColors,
errorColors, // errorColors,
tmpPrimaryColorWeak: primaryColors[2], colorSuccessSecondary: successColors[2],
tmpPrimaryHoverColorWeak: primaryColors[0], colorWarningSecondary: warningColors[2],
tmpPrimaryColor6: primaryColors[5], colorErrorSecondary: errorColors[2],
tmpPrimaryColor7: primaryColors[6], 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', linkDecoration: 'none',
linkHoverDecoration: 'none', linkHoverDecoration: 'none',
linkFocusDecoration: 'none', linkFocusDecoration: 'none',
iconColorHover: new TinyColor('#000').setAlpha(0.75).toRgbString(),
controlPaddingHorizontal: 16, controlPaddingHorizontal: 16,
controlPaddingHorizontalSM: 12, controlPaddingHorizontalSM: 12,
@ -123,12 +113,6 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
// marginSM: 8, // marginSM: 8,
marginLG: 32, marginLG: 32,
// background of header and selected item
backgroundLight: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(),
zIndexDropdown: 1050,
zIndexAffix: 10,
boxShadow: ` boxShadow: `
0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px -4px rgba(0, 0, 0, 0.12),
0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 6px 16px 0 rgba(0, 0, 0, 0.08),

8
components/_util/theme/util/operationUnit.tsx
View File

@ -3,17 +3,19 @@ import { DerivativeToken } from '..';
// eslint-disable-next-line import/prefer-default-export // eslint-disable-next-line import/prefer-default-export
export const operationUnit = (token: DerivativeToken): CSSObject => ({ 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', textDecoration: 'none',
outline: 'none', outline: 'none',
cursor: 'pointer', cursor: 'pointer',
transition: `color ${token.motionDurationSlow}`, transition: `color ${token.motionDurationSlow}`,
'&:focus, &:hover': { '&:focus, &:hover': {
color: token.linkHoverColor, color: token.colorLinkHover,
}, },
'&:active': { '&:active': {
color: token.linkActiveColor, color: token.colorLinkActive,
}, },
}); });

2
components/affix/style/index.tsx
View File

@ -10,6 +10,7 @@ import {
interface AffixToken extends DerivativeToken { interface AffixToken extends DerivativeToken {
affixCls: string; affixCls: string;
zIndexAffix: number;
} }
// ============================== Shared ============================== // ============================== Shared ==============================
@ -32,6 +33,7 @@ export default function useStyle(prefixCls: string): UseComponentStyleResult {
...token, ...token,
affixCls: `.${prefixCls}`, affixCls: `.${prefixCls}`,
zIndexAffix: token.zIndexBase + 10,
}; };
return [ return [

107
components/alert/style/index.tsx
View File

@ -2,7 +2,6 @@
// import './index.less'; // import './index.less';
// deps-lint-skip-all // deps-lint-skip-all
import { generate } from '@ant-design/colors';
import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs'; import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
import { import {
@ -23,22 +22,6 @@ type AlertToken = DerivativeToken & {
alertCloseColor: string; alertCloseColor: string;
alertCloseHoverColor: 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; alertWithDescriptionIconSize: number;
alertWithDescriptionPaddingVertical: number; alertWithDescriptionPaddingVertical: number;
alertWithDescriptionNoIconPaddingVertical: number; alertWithDescriptionNoIconPaddingVertical: number;
@ -161,54 +144,43 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
export const genTypeStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSObject => { export const genTypeStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSObject => {
const { const {
alertCls, alertCls,
alertInfoBgColor,
alertInfoIconColor,
alertInfoBorderColor,
alertSuccessBgColor, colorSuccess,
alertSuccessIconColor, colorSuccessSecondary,
alertSuccessBorderColor, colorBgSuccess,
alertWarningBgColor, colorWarning,
alertWarningIconColor, colorWarningSecondary,
alertWarningBorderColor, colorBgWarning,
alertErrorBgColor, colorError,
alertErrorIconColor, colorErrorSecondary,
alertErrorBorderColor, colorBgError,
colorInfo,
colorInfoSecondary,
colorBgInfo,
} = token; } = token;
return { return {
[alertCls]: { [alertCls]: {
'&-success': genAlertTypeStyle( '&-success': genAlertTypeStyle(
alertSuccessBgColor, colorBgSuccess,
alertSuccessBorderColor, colorSuccessSecondary,
alertSuccessIconColor, colorSuccess,
token,
alertCls,
),
'&-info': genAlertTypeStyle(
alertInfoBgColor,
alertInfoBorderColor,
alertInfoIconColor,
token, token,
alertCls, alertCls,
), ),
'&-info': genAlertTypeStyle(colorBgInfo, colorInfoSecondary, colorInfo, token, alertCls),
'&-warning': genAlertTypeStyle( '&-warning': genAlertTypeStyle(
alertWarningBgColor, colorBgWarning,
alertWarningBorderColor, colorWarningSecondary,
alertWarningIconColor, colorWarning,
token, token,
alertCls, alertCls,
), ),
'&-error': { '&-error': {
...genAlertTypeStyle( ...genAlertTypeStyle(colorBgError, colorErrorSecondary, colorError, token, alertCls),
alertErrorBgColor,
alertErrorBorderColor,
alertErrorIconColor,
token,
alertCls,
),
[`${alertCls}-description > pre`]: { [`${alertCls}-description > pre`]: {
margin: 0, margin: 0,
padding: 0, padding: 0,
@ -281,50 +253,17 @@ export default function useStyle(
const alertCls = `.${prefixCls}`; const alertCls = `.${prefixCls}`;
const alertMessageColor = token.colorTextHeading; const alertMessageColor = token.colorTextHeading;
const alertCloseColor = token.colorTextSecondary; const alertCloseColor = token.colorAction;
const alertCloseHoverColor = token.iconColorHover; const alertCloseHoverColor = token.colorActionHover;
// FIXME // FIXME
const alertWithDescriptionIconSize = 24; const alertWithDescriptionIconSize = 24;
const alertWithDescriptionPaddingVertical = token.padding - 1; const alertWithDescriptionPaddingVertical = token.padding - 1;
const alertWithDescriptionNoIconPaddingVertical = 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 = { const alertToken: AlertToken = {
...token, ...token,
alertCls, alertCls,
iconPrefixCls, iconPrefixCls,
alertInfoBgColor,
alertInfoIconColor,
alertInfoBorderColor,
alertSuccessBgColor,
alertSuccessIconColor,
alertSuccessBorderColor,
alertWarningBgColor,
alertWarningIconColor,
alertWarningBorderColor,
alertErrorBgColor,
alertErrorIconColor,
alertErrorBorderColor,
alertMessageColor, alertMessageColor,
alertCloseColor, alertCloseColor,
alertCloseHoverColor, alertCloseHoverColor,

2
components/badge/style/index.tsx
View File

@ -337,7 +337,7 @@ export default function useStyle(
const badgeTextColor = token.colorBgComponent; const badgeTextColor = token.colorBgComponent;
const badgeFontWeight = 'normal'; const badgeFontWeight = 'normal';
const badgeFontSize = token.fontSizeSM; const badgeFontSize = token.fontSizeSM;
const badgeColor = token.highlightColor; const badgeColor = token.colorHighlight;
const badgeHeightSm = 14; // FIXME: hard code const badgeHeightSm = 14; // FIXME: hard code
const badgeDotSize = 6; // FIXME: hard code const badgeDotSize = 6; // FIXME: hard code
const badgeFontSizeSm = token.fontSizeSM; const badgeFontSizeSm = token.fontSizeSM;

6
components/button/style/index.tsx
View File

@ -223,14 +223,14 @@ const genDashedButtonStyle = (prefixCls: string, token: DerivativeToken): CSSObj
// Type: Link // Type: Link
const genLinkButtonStyle = (prefixCls: string, token: DerivativeToken): CSSObject => ({ const genLinkButtonStyle = (prefixCls: string, token: DerivativeToken): CSSObject => ({
color: token.linkColor, color: token.colorLink,
...genHoverActiveButtonStyle( ...genHoverActiveButtonStyle(
{ {
color: token.colorPrimaryHover, color: token.colorLinkHover,
}, },
{ {
color: token.colorPrimaryActive, color: token.colorLinkActive,
}, },
), ),

2
components/cascader/style/index.tsx
View File

@ -139,7 +139,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token, hashId) => {
}, },
'&-keyword': { '&-keyword': {
color: token.highlightColor, color: token.colorHighlight,
}, },
}, },
}, },

17
components/input/style/index.tsx
View File

@ -256,7 +256,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
fontWeight: 'normal', fontWeight: 'normal',
fontSize: token.fontSize, fontSize: token.fontSize,
textAlign: 'center', textAlign: 'center',
backgroundColor: token.backgroundLight, backgroundColor: token.colorBgComponentSecondary,
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`, border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
borderRadius: token.controlRadius, borderRadius: token.controlRadius,
transition: `all ${token.motionDurationSlow}`, transition: `all ${token.motionDurationSlow}`,
@ -581,9 +581,10 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
prefixCls, prefixCls,
iconPrefixCls, iconPrefixCls,
inputAffixMargin, inputAffixMargin,
colorTextSecondary: textColorSecondary, colorTextSecondary,
motionDurationSlow: duration, motionDurationSlow,
iconColorHover, colorAction,
colorActionHover,
colorPrimary, colorPrimary,
colorSuccess, colorSuccess,
} = token; } = token;
@ -635,7 +636,7 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
}, },
'&-show-count-suffix': { '&-show-count-suffix': {
color: textColorSecondary, color: colorTextSecondary,
}, },
'&-show-count-has-suffix': { '&-show-count-has-suffix': {
@ -655,12 +656,12 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
// password // password
[`.${iconPrefixCls}.${prefixCls}-password-icon`]: { [`.${iconPrefixCls}.${prefixCls}-password-icon`]: {
color: textColorSecondary, color: colorAction,
cursor: 'pointer', cursor: 'pointer',
transition: `all ${duration}`, transition: `all ${motionDurationSlow}`,
'&:hover': { '&:hover': {
color: iconColorHover, color: colorActionHover,
}, },
}, },

43
components/mentions/style/index.tsx
View File

@ -22,19 +22,18 @@ interface MentionsToken extends InputToken {
const genMentionsStyle: GenerateStyle<MentionsToken> = token => { const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
const { const {
mentionsCls, mentionsCls,
backgroundLight, colorTextDisabled,
colorTextDisabled: textColorDisabled, controlItemBgHover,
controlItemBgHover: itemHoverBackground,
controlPaddingHorizontal, controlPaddingHorizontal,
colorText: textColor, colorText,
motionDurationSlow: duration, motionDurationSlow,
lineHeight, lineHeight,
controlHeight, controlHeight,
inputPaddingHorizontal, inputPaddingHorizontal,
inputPaddingVertical, inputPaddingVertical,
fontSize, fontSize,
colorBgComponent: componentBackground, colorBgComponent,
controlRadius: borderRadius, controlRadius,
boxShadow, boxShadow,
} = token; } = token;
@ -124,8 +123,8 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
boxSizing: 'border-box', boxSizing: 'border-box',
fontSize, fontSize,
fontVariant: 'initial', fontVariant: 'initial',
backgroundColor: componentBackground, backgroundColor: colorBgComponent,
borderRadius, borderRadius: controlRadius,
outline: 'none', outline: 'none',
boxShadow, boxShadow,
@ -147,21 +146,21 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
minWidth: 100, // FIXME: magic minWidth: 100, // FIXME: magic
padding: `5px ${controlPaddingHorizontal}px`, // FIXME: magic padding: `5px ${controlPaddingHorizontal}px`, // FIXME: magic
overflow: 'hidden', overflow: 'hidden',
color: textColor, color: colorText,
fontWeight: 'normal', fontWeight: 'normal',
lineHeight, lineHeight,
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
cursor: 'pointer', cursor: 'pointer',
transition: `background ${duration} ease`, transition: `background ${motionDurationSlow} ease`,
'&:hover': { '&:hover': {
backgroundColor: itemHoverBackground, backgroundColor: controlItemBgHover,
}, },
'&:first-child': { '&:first-child': {
borderStartStartRadius: borderRadius, borderStartStartRadius: controlRadius,
borderStartEndRadius: borderRadius, borderStartEndRadius: controlRadius,
borderEndStartRadius: 0, borderEndStartRadius: 0,
borderEndEndRadius: 0, borderEndEndRadius: 0,
}, },
@ -169,29 +168,29 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
'&:last-child': { '&:last-child': {
borderStartStartRadius: 0, borderStartStartRadius: 0,
borderStartEndRadius: 0, borderStartEndRadius: 0,
borderEndStartRadius: borderRadius, borderEndStartRadius: controlRadius,
borderEndEndRadius: borderRadius, borderEndEndRadius: controlRadius,
}, },
'&-disabled': { '&-disabled': {
color: textColorDisabled, color: colorTextDisabled,
cursor: 'not-allowed', cursor: 'not-allowed',
'&:hover': { '&:hover': {
color: textColorDisabled, color: colorTextDisabled,
backgroundColor: itemHoverBackground, backgroundColor: controlItemBgHover,
cursor: 'not-allowed', cursor: 'not-allowed',
}, },
}, },
'&-selected': { '&-selected': {
color: textColor, color: colorText,
fontWeight: 600, // FIXME: Need design token? fontWeight: 600, // FIXME: Need design token?
backgroundColor: backgroundLight, backgroundColor: controlItemBgHover,
}, },
'&-active': { '&-active': {
backgroundColor: itemHoverBackground, backgroundColor: controlItemBgHover,
}, },
}, },
}, },

2
components/result/style/index.tsx
View File

@ -75,7 +75,7 @@ const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
[`${resultCls} ${resultCls}-content`]: { [`${resultCls} ${resultCls}-content`]: {
marginTop: token.padding * 1.5, marginTop: token.padding * 1.5,
padding: `${token.padding * 1.5}px ${token.padding * 2.5}px`, padding: `${token.padding * 1.5}px ${token.padding * 2.5}px`,
backgroundColor: token.backgroundLight, backgroundColor: token.colorBgComponentSecondary,
}, },
[`${resultCls} ${resultCls}-extra`]: { [`${resultCls} ${resultCls}-extra`]: {

2
components/select/style/index.tsx
View File

@ -25,6 +25,7 @@ export type SelectToken = DerivativeToken & {
selectCls: string; selectCls: string;
iconPrefixCls: string; iconPrefixCls: string;
inputPaddingHorizontalBase: number; inputPaddingHorizontalBase: number;
zIndexDropdown: number;
}; };
// ============================= Selector ============================= // ============================= Selector =============================
@ -288,6 +289,7 @@ const genSelectStyle = (
selectCls, selectCls,
iconPrefixCls, iconPrefixCls,
inputPaddingHorizontalBase, inputPaddingHorizontalBase,
zIndexDropdown: token.zIndexPopup + 50,
}; };
return [ return [

4
components/select/style/multiple.tsx
View File

@ -121,7 +121,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
...resetIcon(), ...resetIcon(),
display: 'inline-block', display: 'inline-block',
color: token.colorTextSecondary, color: token.colorAction,
fontWeight: 'bold', fontWeight: 'bold',
fontSize: 10, fontSize: 10,
lineHeight: 'inherit', lineHeight: 'inherit',
@ -132,7 +132,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
}, },
'&:hover': { '&:hover': {
color: token.iconColorHover, color: token.colorActionHover,
}, },
}, },
}, },

6
components/slider/style/index.tsx
View File

@ -53,7 +53,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
[`${sliderCls}-track`]: { [`${sliderCls}-track`]: {
position: 'absolute', position: 'absolute',
backgroundColor: token.tmpPrimaryColorWeak, // FIXME: Origin @primary-3 backgroundColor: token.colorPrimarySecondary,
borderRadius: token.controlRadius, borderRadius: token.controlRadius,
transition: `background-color ${token.motionDurationSlow}`, transition: `background-color ${token.motionDurationSlow}`,
}, },
@ -63,7 +63,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
width: token.handleSize, width: token.handleSize,
height: token.handleSize, height: token.handleSize,
backgroundColor: token.colorBgComponent, backgroundColor: token.colorBgComponent,
border: `2px solid ${token.tmpPrimaryColorWeak}`, border: `2px solid ${token.colorPrimarySecondary}`,
borderRadius: '50%', borderRadius: '50%',
boxShadow: 'none', boxShadow: 'none',
cursor: 'pointer', cursor: 'pointer',
@ -158,7 +158,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
transition: `border-color ${token.motionDurationSlow}`, transition: `border-color ${token.motionDurationSlow}`,
'&-active': { '&-active': {
borderColor: token.tmpPrimaryColorWeak, borderColor: token.colorPrimarySecondary,
}, },
}, },

13
components/switch/style/index.tsx
View File

@ -163,23 +163,18 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
verticalAlign: 'middle', verticalAlign: 'middle',
backgroundColor: token.colorTextDisabled, backgroundColor: token.colorTextDisabled,
border: '0', border: '0',
// FIXME
borderRadius: 100, borderRadius: 100,
cursor: 'pointer', cursor: 'pointer',
transition: `all ${token.switchDuration}`, transition: `all ${token.switchDuration}`,
userSelect: 'none', userSelect: 'none',
'&:focus': { '&:focus-visible': {
outline: 0, outline: 0,
// FIXME boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.colorBgComponentDisabled}`,
boxShadow: `0 0 0 2px ${new TinyColor(token.colorTextDisabled)
.setAlpha(0.1)
.toRgbString()}`,
}, },
[`&${token.switchCls}-checked:focus`]: { [`&${token.switchCls}-checked:focus-visible`]: {
// FIXME boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.colorPrimaryOutline}`,
boxShadow: `0 0 0 2px ${token.tmpPrimaryHoverColorWeak}`,
}, },
'&:focus:hover': { '&:focus:hover': {

14
components/tag/style/index.tsx
View File

@ -32,8 +32,8 @@ const genTagStatusStyle = (
return { return {
[`.${prefixCls}-${status}`]: { [`.${prefixCls}-${status}`]: {
color: token[`color${cssVariableType}`], color: token[`color${cssVariableType}`],
background: token[`tmp${capitalizedCssVariableType}ColorDeprecatedBg`], background: token[`colorBg${capitalizedCssVariableType}`],
borderColor: token[`tmp${capitalizedCssVariableType}ColorDeprecatedBorder`], borderColor: token[`color${capitalizedCssVariableType}Secondary`],
}, },
}; };
}; };
@ -115,7 +115,7 @@ const genBaseStyle = (
}, },
}, },
[`.${prefixCls}-checkable`]: { [`&-checkable`]: {
backgroundColor: 'transparent', backgroundColor: 'transparent',
borderColor: 'transparent', borderColor: 'transparent',
cursor: 'pointer', cursor: 'pointer',
@ -129,15 +129,15 @@ const genBaseStyle = (
}, },
'&-checked': { '&-checked': {
backgroundColor: token.tmpPrimaryColor6, backgroundColor: token.colorPrimary,
}, },
'&:active': { '&:active': {
backgroundColor: token.tmpPrimaryColor7, backgroundColor: token.colorPrimaryActive,
}, },
}, },
[`.${prefixCls}-hidden`]: { [`&-hidden`]: {
display: 'none', display: 'none',
}, },
@ -157,7 +157,7 @@ export const genTagStyle = (
const tagFontSize = token.fontSizeSM; const tagFontSize = token.fontSizeSM;
// FIXME: hard code // FIXME: hard code
const tagLineHeight = '18px'; const tagLineHeight = '18px';
const tagDefaultBg = token.backgroundLight; const tagDefaultBg = token.colorBgComponentSecondary;
const tagDefaultColor = token.colorText; const tagDefaultColor = token.colorText;
const tagToken = { const tagToken = {

4
components/tree/style/index.tsx
View File

@ -95,7 +95,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
}, },
'&-focused:not(:hover):not(&-active-focused)': { '&-focused:not(:hover):not(&-active-focused)': {
background: token.tmpPrimaryHoverColorWeak, background: token.colorPrimaryOutline,
}, },
// =================== Virtual List =================== // =================== Virtual List ===================
@ -276,7 +276,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
}, },
[`&${treeCls}-node-selected`]: { [`&${treeCls}-node-selected`]: {
backgroundColor: token.tmpPrimaryHoverColorWeak, backgroundColor: token.colorPrimaryOutline,
}, },
// Icon // Icon

3
components/typography/style/index.tsx
View File

@ -33,8 +33,7 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = token => {
'&&-danger': { '&&-danger': {
color: token.colorError, color: token.colorError,
'a&:active, a&:focus, a&:hover': { 'a&:active, a&:focus, a&:hover': {
// FIXME: need new token like errorColorHover color: token.colorErrorHover,
color: token.errorColors[4],
}, },
}, },