mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 17:44:35 +08:00
refactor: Move token to latest one (#34637)
* chore: rename motion * chore: primary color * chore: success color * chore: all colors * chore: mv control height up * chore: font size format
This commit is contained in:
二货机器人
GitHub
parent
12ba88611c
commit
608ce271b1
@ -1,479 +0,0 @@
|
||||
// import React from 'react';
|
||||
// import { generate } from '@ant-design/colors';
|
||||
// import { TinyColor } from '@ctrl/tinycolor';
|
||||
// import {
|
||||
// CSSInterpolation,
|
||||
// CSSObject,
|
||||
// Theme,
|
||||
// useCacheToken,
|
||||
// useStyleRegister,
|
||||
// } from '@ant-design/cssinjs';
|
||||
// import defaultDesignToken from './default';
|
||||
// import version from '../../version';
|
||||
// import { resetComponent, resetIcon, clearFix } from './util';
|
||||
// import {
|
||||
// initSlideMotion,
|
||||
// slideUpIn,
|
||||
// slideUpOut,
|
||||
// slideDownIn,
|
||||
// slideDownOut,
|
||||
// slideLeftIn,
|
||||
// slideLeftOut,
|
||||
// slideRightIn,
|
||||
// slideRightOut,
|
||||
// } from './util/slide';
|
||||
|
||||
// export {
|
||||
// resetComponent,
|
||||
// resetIcon,
|
||||
// clearFix,
|
||||
// initSlideMotion,
|
||||
// slideUpIn,
|
||||
// slideUpOut,
|
||||
// slideDownIn,
|
||||
// slideDownOut,
|
||||
// slideLeftIn,
|
||||
// slideLeftOut,
|
||||
// slideRightIn,
|
||||
// slideRightOut,
|
||||
// };
|
||||
|
||||
// export interface PresetColorType {
|
||||
// blue: string;
|
||||
// purple: string;
|
||||
// cyan: string;
|
||||
// green: string;
|
||||
// magenta: string;
|
||||
// pink: string;
|
||||
// red: string;
|
||||
// orange: string;
|
||||
// yellow: string;
|
||||
// volcano: string;
|
||||
// geekblue: string;
|
||||
// lime: string;
|
||||
// gold: string;
|
||||
// }
|
||||
|
||||
// export const PresetColorKeys: ReadonlyArray<keyof PresetColorType> = [
|
||||
// 'blue',
|
||||
// 'purple',
|
||||
// 'cyan',
|
||||
// 'green',
|
||||
// 'magenta',
|
||||
// 'pink',
|
||||
// 'red',
|
||||
// 'orange',
|
||||
// 'yellow',
|
||||
// 'volcano',
|
||||
// 'geekblue',
|
||||
// 'lime',
|
||||
// 'gold',
|
||||
// ];
|
||||
|
||||
// // 🚨🚨🚨🚨🚨 Note: Design Token is freeze. Please connect @zombieJ if need update this 🚨🚨🚨🚨🚨
|
||||
// export interface DesignToken extends PresetColorType {
|
||||
// // Color
|
||||
// colorPrimary: string;
|
||||
// colorSuccess: string;
|
||||
// colorWarning: string;
|
||||
// colorError: string;
|
||||
// colorInfo: string;
|
||||
// colorText: string;
|
||||
// colorTextLightSolid: string;
|
||||
// colorBg: string;
|
||||
|
||||
// // Font
|
||||
// fontFamily: string;
|
||||
// fontSizeBase: number;
|
||||
|
||||
// // Grid
|
||||
// gridUnit: number;
|
||||
// gridStepBase: number;
|
||||
|
||||
// // Line
|
||||
// lineWidth: number;
|
||||
|
||||
// // Motion
|
||||
// motionUnit: number;
|
||||
// motionBaseStep: number;
|
||||
// motionEaseInOutCirc: string;
|
||||
// motionEaseInOut: string;
|
||||
// motionEaseOutBack: string;
|
||||
// motionEaseInQuint: string;
|
||||
// motionEaseOutQuint: string;
|
||||
|
||||
// // Radius
|
||||
// radiusBase: number;
|
||||
|
||||
// // Size
|
||||
// sizeUnit: number;
|
||||
// sizeBaseStep: number;
|
||||
|
||||
// // =============== Legacy: should be remove ===============
|
||||
// primaryColor: string;
|
||||
// successColor: string;
|
||||
// warningColor: string;
|
||||
// errorColor: string;
|
||||
// infoColor: string;
|
||||
|
||||
// lineHeight: number;
|
||||
// borderWidth: number;
|
||||
// borderStyle: string;
|
||||
// borderRadius: number;
|
||||
// borderColor: string;
|
||||
// borderColorSplit: string;
|
||||
|
||||
// easeInOut: string;
|
||||
// easeInOutCirc: string;
|
||||
// easeOutBack: string;
|
||||
// easeInQuint: string;
|
||||
// easeOutQuint: string;
|
||||
|
||||
// outlineWidth: number;
|
||||
// outlineBlurSize: number;
|
||||
|
||||
// fontSize: number;
|
||||
// // fontFamily: string;
|
||||
// textColor: string;
|
||||
// textColorSecondary: string;
|
||||
// textColorDisabled: string;
|
||||
// textColorInverse: string;
|
||||
// placeholderColor: string;
|
||||
|
||||
// disabledColor: string;
|
||||
|
||||
// iconColorHover: string;
|
||||
|
||||
// headingColor: string;
|
||||
|
||||
// itemHoverBackground: string;
|
||||
|
||||
// controlHeight: number;
|
||||
|
||||
// padding: number;
|
||||
// margin: number;
|
||||
|
||||
// background: string;
|
||||
// backgroundLight: string;
|
||||
|
||||
// componentBackground: string;
|
||||
// componentBackgroundDisabled: string;
|
||||
|
||||
// duration: number;
|
||||
|
||||
// zIndexDropdown: number;
|
||||
|
||||
// boxShadow?: string;
|
||||
// }
|
||||
|
||||
// type ColorPaletteKeyIndexes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
||||
|
||||
// export type ColorPalettes = {
|
||||
// [key in `${keyof PresetColorType}-${ColorPaletteKeyIndexes[number]}`]: string;
|
||||
// };
|
||||
|
||||
// export interface DerivativeToken extends ColorPalettes, Omit<DesignToken, 'duration'> {
|
||||
// // =================== Derivative Parts ===================
|
||||
// // Derivative Parts: is generated directly by the algorithm with DesignToken.
|
||||
// colorPrimaryHover: string;
|
||||
// colorPrimaryActive: string;
|
||||
// colorPrimaryFocus: string;
|
||||
// colorErrorHover: string;
|
||||
// colorErrorActive: string;
|
||||
// fontSizeSM: number;
|
||||
// fontSizeLG: number;
|
||||
// sizeSpace: number;
|
||||
// fontSize: number;
|
||||
// colorTextBelow: string;
|
||||
// colorTextBelow2: string;
|
||||
// sizeSpaceXS: number;
|
||||
// motionDurationBase: number;
|
||||
// motionDurationFast: number;
|
||||
// motionDurationSlow: number;
|
||||
// fontHeight: number;
|
||||
// sizeSpaceSM: number;
|
||||
// sizePaddingXXS: number;
|
||||
// gridSpaceSM: number;
|
||||
// gridSpaceBase: number;
|
||||
// motionDurationMd: number;
|
||||
// radiusLG: number;
|
||||
// radiusXL: number;
|
||||
// radiusSM: number;
|
||||
// colorTextAbove: string;
|
||||
// radiusXXL: number;
|
||||
// radiusXXXL: number;
|
||||
// gridSpaceLG: number;
|
||||
// gridSpaceXL: number;
|
||||
// gridSpaceXXL: number;
|
||||
// fontSizeXL: number;
|
||||
// colorTextAbove2: string;
|
||||
// colorBgBelow: string;
|
||||
// colorBgBelow2: string;
|
||||
|
||||
// // ===================== Alias Parts ======================
|
||||
// // Alias Parts: Alias of the derivative parts for more meaningful name.
|
||||
// colorPrimaryBorder: string;
|
||||
// colorLink: string;
|
||||
// colorPrimaryBg: string;
|
||||
// controlHeight: number;
|
||||
// colorBgContainer: string;
|
||||
// colorBgComponent: string;
|
||||
// colorBgComponentDisabled: string;
|
||||
// controlLineType: string;
|
||||
// colorBorder: string;
|
||||
// colorHeading: string;
|
||||
// colorIconHover: string;
|
||||
// colorBgContainerHover: string;
|
||||
// controlHeightSM: number;
|
||||
// controlHeightLG: number;
|
||||
// controlOutlineWidthActive: string;
|
||||
// controlOutlineActiveStyle: string;
|
||||
// controlOutlineActiveColor: string;
|
||||
// colorPlaceholder: string;
|
||||
// colorIcon: string;
|
||||
// colorBgHover: string;
|
||||
// colorSplit: string;
|
||||
// colorTextPrimary: string;
|
||||
// controlRadius: number;
|
||||
// radiusPiece: number;
|
||||
// gridContainerMargin: number;
|
||||
// controlPaddingHorizontal: number;
|
||||
// controlItemBgSelected: number;
|
||||
// sizePaddingHorizontal: number;
|
||||
// sizePaddingHorizontalXS: number;
|
||||
// sizePaddingHorizontalSM: number;
|
||||
// sizePaddingHorizontalXXS: number;
|
||||
// controlPaddingHorizontalSM: number;
|
||||
// controlLineWidth: number;
|
||||
// controlHeightXS: number;
|
||||
// controlItemBgActive: string;
|
||||
// controlItemBgHover: string;
|
||||
// colorTextDarkSolid: string;
|
||||
|
||||
// // =============== Legacy: should be remove ===============
|
||||
// primaryHoverColor: string;
|
||||
// primaryActiveColor: string;
|
||||
// primaryOutlineColor: string;
|
||||
// errorHoverColor: string;
|
||||
// errorActiveColor: string;
|
||||
// errorOutlineColor: string;
|
||||
// warningHoverColor: string;
|
||||
// warningOutlineColor: string;
|
||||
// itemActiveBackground: string;
|
||||
|
||||
// highlightColor: string;
|
||||
|
||||
// linkColor: string;
|
||||
// linkHoverColor: string;
|
||||
// linkActiveColor: string;
|
||||
// linkDecoration: CSSObject['textDecoration'];
|
||||
// linkHoverDecoration: CSSObject['textDecoration'];
|
||||
// linkFocusDecoration: CSSObject['textDecoration'];
|
||||
|
||||
// paddingSM: number;
|
||||
// paddingXS: number;
|
||||
// paddingXXS: number;
|
||||
// paddingLG: number;
|
||||
// marginXS: number;
|
||||
// marginLG: number;
|
||||
// marginXXS: number;
|
||||
|
||||
// duration: string;
|
||||
// durationMid: string;
|
||||
// durationFast: string;
|
||||
|
||||
// heading1Size: number;
|
||||
// heading2Size: number;
|
||||
// heading3Size: number;
|
||||
// heading4Size: number;
|
||||
// heading5Size: 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;
|
||||
// }
|
||||
|
||||
// export { useStyleRegister };
|
||||
|
||||
// // =============================== Derivative ===============================
|
||||
// function derivative(designToken: DesignToken): DerivativeToken {
|
||||
// const { primaryColor, errorColor, warningColor, infoColor, successColor } = designToken;
|
||||
|
||||
// const primaryColors = generate(primaryColor);
|
||||
// const errorColors = generate(errorColor);
|
||||
// const warningColors = generate(warningColor);
|
||||
// const infoColors = generate(infoColor);
|
||||
// const successColors = generate(successColor);
|
||||
|
||||
// const paddingSM = (designToken.padding / 4) * 3;
|
||||
// const paddingXS = designToken.padding * 0.5;
|
||||
|
||||
// const colorPalettes = PresetColorKeys.map((colorKey: keyof PresetColorType) => {
|
||||
// const colors = generate(designToken[colorKey]);
|
||||
|
||||
// const ret = new Array(10).fill(1).reduce((prev, _, i) => {
|
||||
// prev[`${colorKey}-${i + 1}`] = colors[i];
|
||||
// return prev;
|
||||
// }, {}) as ColorPalettes;
|
||||
// return ret;
|
||||
// }).reduce((prev, cur) => {
|
||||
// prev = {
|
||||
// ...prev,
|
||||
// ...cur,
|
||||
// };
|
||||
// return prev;
|
||||
// }, {} as ColorPalettes);
|
||||
|
||||
// return {
|
||||
// // =================== Derivative Parts ===================
|
||||
// // FIXME: @arvinxx fix this
|
||||
|
||||
// // ===================== Alias Parts ======================
|
||||
// // FIXME: @arvinxx fix this
|
||||
|
||||
// // =============== Legacy: should be remove ===============
|
||||
// // FIXME: Need design token
|
||||
// boxShadow: `
|
||||
// 0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
||||
// 0 6px 16px 0 rgba(0, 0, 0, 0.08),
|
||||
// 0 9px 28px 8px rgba(0, 0, 0, 0.05)`,
|
||||
|
||||
// ...designToken,
|
||||
|
||||
// primaryHoverColor: primaryColors[4],
|
||||
// primaryActiveColor: primaryColors[6],
|
||||
// primaryOutlineColor: new TinyColor(primaryColor).setAlpha(0.2).toRgbString(),
|
||||
|
||||
// errorHoverColor: errorColors[4],
|
||||
// errorActiveColor: errorColors[6],
|
||||
// errorOutlineColor: new TinyColor(errorColor).setAlpha(0.2).toRgbString(),
|
||||
|
||||
// warningHoverColor: warningColors[4],
|
||||
// warningOutlineColor: new TinyColor(warningColor).setAlpha(0.2).toRgbString(),
|
||||
|
||||
// highlightColor: errorColors[4], // FIXME: Should not align with error color
|
||||
|
||||
// itemActiveBackground: primaryColors[0],
|
||||
|
||||
// linkColor: primaryColor,
|
||||
// linkHoverColor: primaryColors[4],
|
||||
// linkActiveColor: primaryColors[6],
|
||||
// linkDecoration: 'none',
|
||||
// linkHoverDecoration: 'none',
|
||||
// linkFocusDecoration: 'none',
|
||||
|
||||
// fontSizeSM: designToken.fontSize - 2,
|
||||
// fontSizeLG: designToken.fontSize + 2,
|
||||
// controlHeightXS: designToken.controlHeight / 2,
|
||||
// controlHeightSM: designToken.controlHeight * 0.75,
|
||||
// controlHeightLG: designToken.controlHeight * 1.25,
|
||||
// controlPaddingHorizontal: paddingSM,
|
||||
// controlPaddingHorizontalSM: paddingXS,
|
||||
// paddingSM,
|
||||
// paddingXS,
|
||||
// paddingXXS: designToken.padding * 0.25,
|
||||
// paddingLG: designToken.padding * 1.5,
|
||||
// marginXS: designToken.margin * 0.5,
|
||||
// marginLG: designToken.margin * 1.5,
|
||||
// marginXXS: designToken.margin * 0.25,
|
||||
|
||||
// duration: `${designToken.duration}s`,
|
||||
// durationMid: `${(designToken.duration / 3) * 2}s`,
|
||||
// durationFast: `${designToken.duration / 3}s`,
|
||||
|
||||
// ...colorPalettes,
|
||||
|
||||
// heading1Size: Math.ceil(designToken.fontSize * 2.71),
|
||||
// heading2Size: Math.ceil(designToken.fontSize * 2.14),
|
||||
// heading3Size: Math.ceil(designToken.fontSize * 1.71),
|
||||
// heading4Size: Math.ceil(designToken.fontSize * 1.42),
|
||||
// heading5Size: Math.ceil(designToken.fontSize * 1.14),
|
||||
|
||||
// primaryColors,
|
||||
// errorColors,
|
||||
// warningColors,
|
||||
|
||||
// // TMP
|
||||
// tmpPrimaryColorWeak: primaryColors[2],
|
||||
// tmpPrimaryHoverColorWeak: primaryColors[0],
|
||||
// tmpPrimaryColor6: primaryColors[5],
|
||||
// tmpPrimaryColor7: primaryColors[6],
|
||||
|
||||
// tmpSuccessColorDeprecatedBg: successColors[0],
|
||||
// tmpWarningColorDeprecatedBg: warningColors[0],
|
||||
// tmpErrorColorDeprecatedBg: errorColors[0],
|
||||
// tmpInfoColorDeprecatedBg: infoColors[0],
|
||||
|
||||
// tmpSuccessColorDeprecatedBorder: successColors[2],
|
||||
// tmpWarningColorDeprecatedBorder: warningColors[2],
|
||||
// tmpErrorColorDeprecatedBorder: errorColors[2],
|
||||
// tmpInfoColorDeprecatedBorder: infoColors[2],
|
||||
// };
|
||||
// }
|
||||
|
||||
// // ================================ Context =================================
|
||||
// export const ThemeContext = React.createContext(
|
||||
// new Theme<DesignToken, DerivativeToken>(derivative),
|
||||
// );
|
||||
|
||||
// export const DesignTokenContext = React.createContext<{
|
||||
// token: Partial<DesignToken>;
|
||||
// hashed?: string | boolean;
|
||||
// }>({
|
||||
// token: defaultDesignToken,
|
||||
// });
|
||||
|
||||
// // ================================== Hook ==================================
|
||||
// export function useToken(): [Theme<DesignToken, DerivativeToken>, DerivativeToken, string] {
|
||||
// const { token: rootDesignToken, hashed } = React.useContext(DesignTokenContext);
|
||||
// const theme = React.useContext(ThemeContext);
|
||||
|
||||
// const salt = `${version}-${hashed || ''}`;
|
||||
|
||||
// const [token, hashId] = useCacheToken<DerivativeToken, DesignToken>(
|
||||
// theme,
|
||||
// [defaultDesignToken, rootDesignToken],
|
||||
// {
|
||||
// salt,
|
||||
// },
|
||||
// );
|
||||
// return [theme, token, hashed ? hashId : ''];
|
||||
// }
|
||||
|
||||
// export type UseComponentStyleResult = [(node: React.ReactNode) => React.ReactElement, string];
|
||||
|
||||
// export type GenerateStyle<ComponentToken extends object, ReturnType = CSSInterpolation> = (
|
||||
// token: ComponentToken,
|
||||
// hashId?: string,
|
||||
// ) => ReturnType;
|
||||
|
||||
// // ================================== Util ==================================
|
||||
// export function withPrefix(
|
||||
// style: CSSObject,
|
||||
// prefixCls: string,
|
||||
// additionalClsList: string[] = [],
|
||||
// ): CSSObject {
|
||||
// const fullClsList = [prefixCls, ...additionalClsList].filter(cls => cls).map(cls => `.${cls}`);
|
||||
|
||||
// return {
|
||||
// [fullClsList.join('')]: style,
|
||||
// };
|
||||
// }
|
||||
@ -72,6 +72,9 @@ export interface SeedToken extends PresetColorType {
|
||||
// Size
|
||||
sizeUnit: number;
|
||||
sizeBaseStep: number;
|
||||
|
||||
// Control Base
|
||||
controlHeight: number;
|
||||
}
|
||||
|
||||
// ======================================================================
|
||||
@ -96,10 +99,8 @@ export interface DerivativeToken extends SeedToken, ColorPalettes {
|
||||
colorBgBelow2: string;
|
||||
|
||||
// Font
|
||||
fontSizeSM: number;
|
||||
fontSizeLG: number;
|
||||
fontSize: number;
|
||||
fontSizeXL: number;
|
||||
fontSizes: number[];
|
||||
lineHeights: number[];
|
||||
|
||||
// Size
|
||||
sizeSpace: number;
|
||||
@ -119,7 +120,6 @@ export interface DerivativeToken extends SeedToken, ColorPalettes {
|
||||
motionDurationMd: string;
|
||||
motionDurationFast: string;
|
||||
motionDurationSlow: string;
|
||||
fontHeight: number;
|
||||
|
||||
// Radius
|
||||
radiusSM: number;
|
||||
@ -132,32 +132,39 @@ export interface DerivativeToken extends SeedToken, ColorPalettes {
|
||||
// ======================================================================
|
||||
// FIXME: DerivativeToken should part pick
|
||||
export interface AliasToken extends DerivativeToken {
|
||||
// =============== Legacy: should be remove ===============
|
||||
primaryColor: string;
|
||||
successColor: string;
|
||||
warningColor: string;
|
||||
errorColor: string;
|
||||
infoColor: string;
|
||||
// Font
|
||||
fontSizeSM: number;
|
||||
fontSize: number;
|
||||
fontSizeLG: number;
|
||||
fontSizeXL: number;
|
||||
|
||||
fontSizeHeading1: number;
|
||||
fontSizeHeading2: number;
|
||||
fontSizeHeading3: number;
|
||||
fontSizeHeading4: number;
|
||||
fontSizeHeading5: number;
|
||||
|
||||
// LineHeight
|
||||
lineHeight: number;
|
||||
lineHeightLG: number;
|
||||
|
||||
lineHeightHeading1: number;
|
||||
lineHeightHeading2: number;
|
||||
lineHeightHeading3: number;
|
||||
lineHeightHeading4: number;
|
||||
lineHeightHeading5: number;
|
||||
|
||||
// =============== Legacy: should be remove ===============
|
||||
borderWidth: number;
|
||||
borderStyle: string;
|
||||
borderRadius: number;
|
||||
borderColor: string;
|
||||
borderColorSplit: string;
|
||||
|
||||
easeInOut: string;
|
||||
easeInOutCirc: string;
|
||||
easeOutBack: string;
|
||||
easeInQuint: string;
|
||||
easeOutQuint: string;
|
||||
|
||||
outlineWidth: number;
|
||||
outlineBlurSize: number;
|
||||
|
||||
fontSize: number;
|
||||
fontFamily: string;
|
||||
textColor: string;
|
||||
textColorSecondary: string;
|
||||
textColorDisabled: string;
|
||||
textColorInverse: string;
|
||||
@ -171,8 +178,6 @@ export interface AliasToken extends DerivativeToken {
|
||||
|
||||
itemHoverBackground: string;
|
||||
|
||||
controlHeight: number;
|
||||
|
||||
padding: number;
|
||||
margin: number;
|
||||
|
||||
@ -206,8 +211,6 @@ export interface AliasToken extends DerivativeToken {
|
||||
linkHoverDecoration: React.CSSProperties['textDecoration'];
|
||||
linkFocusDecoration: React.CSSProperties['textDecoration'];
|
||||
|
||||
fontSizeSM: number;
|
||||
fontSizeLG: number;
|
||||
/** @private Only Used for control inside component like Multiple Select inner selection item */
|
||||
controlHeightXS: number;
|
||||
controlHeightSM: number;
|
||||
@ -226,12 +229,6 @@ export interface AliasToken extends DerivativeToken {
|
||||
durationMid: string;
|
||||
durationFast: string;
|
||||
|
||||
heading1Size: number;
|
||||
heading2Size: number;
|
||||
heading3Size: number;
|
||||
heading4Size: number;
|
||||
heading5Size: number;
|
||||
|
||||
primaryColors: string[];
|
||||
errorColors: string[];
|
||||
warningColors: string[];
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
import { generate } from '@ant-design/colors';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import type { PresetColorType, SeedToken, DerivativeToken, ColorPalettes } from '../interface';
|
||||
import { getFontSizes } from './shared';
|
||||
|
||||
const defaultPresetColors: PresetColorType = {
|
||||
blue: '#1890FF',
|
||||
@ -56,6 +57,8 @@ export function derivative(token: SeedToken): DerivativeToken {
|
||||
return prev;
|
||||
}, {} as ColorPalettes);
|
||||
|
||||
const fontSizes = getFontSizes(fontSizeBase);
|
||||
|
||||
return {
|
||||
...token,
|
||||
...colorPalettes,
|
||||
@ -67,10 +70,8 @@ export function derivative(token: SeedToken): DerivativeToken {
|
||||
motionDurationSlow: `${motionUnit * (motionBaseStep + 1)}s`,
|
||||
|
||||
// font
|
||||
fontSize: fontSizeBase,
|
||||
fontSizeSM: fontSizeBase - 2,
|
||||
fontSizeLG: fontSizeBase + 2,
|
||||
fontSizeXL: fontSizeBase + 4,
|
||||
fontSizes: fontSizes.map(fs => fs.size),
|
||||
lineHeights: fontSizes.map(fs => fs.lineHeight),
|
||||
|
||||
// size
|
||||
sizeSpaceSM: sizeUnit * (sizeBaseStep - 1),
|
||||
@ -90,7 +91,7 @@ export function derivative(token: SeedToken): DerivativeToken {
|
||||
radiusLG: radiusBase * 2,
|
||||
radiusXL: radiusBase * 4,
|
||||
|
||||
// color //
|
||||
// color
|
||||
|
||||
colorBgBelow: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(),
|
||||
colorBgBelow2: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(),
|
||||
@ -108,9 +109,6 @@ 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(),
|
||||
|
||||
// FIXME: should be currentFontSize + 8
|
||||
fontHeight: fontSizeBase + 8,
|
||||
};
|
||||
}
|
||||
|
||||
@ -157,6 +155,9 @@ const seedToken: SeedToken = {
|
||||
// Size
|
||||
sizeUnit: 4,
|
||||
sizeBaseStep: 4,
|
||||
|
||||
// Control Base
|
||||
controlHeight: 32,
|
||||
};
|
||||
|
||||
export default seedToken;
|
||||
|
||||
24
components/_util/theme/themes/shared.ts
Normal file
24
components/_util/theme/themes/shared.ts
Normal file
@ -0,0 +1,24 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
|
||||
// https://zhuanlan.zhihu.com/p/32746810
|
||||
export function getFontSizes(base: number) {
|
||||
const fontSizes = new Array(10).fill(null).map((_, index) => {
|
||||
const i = index - 1;
|
||||
const baseSize = base * 2.71828 ** (i / 5);
|
||||
const intSize = index > 1 ? Math.floor(baseSize) : Math.ceil(baseSize);
|
||||
|
||||
// Convert to even
|
||||
return Math.floor(intSize / 2) * 2;
|
||||
});
|
||||
|
||||
fontSizes[1] = base;
|
||||
|
||||
return fontSizes.map(size => {
|
||||
const height = size + 8;
|
||||
|
||||
return {
|
||||
size,
|
||||
lineHeight: height / size,
|
||||
};
|
||||
});
|
||||
}
|
||||
@ -18,6 +18,8 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
...derivative,
|
||||
};
|
||||
|
||||
const { fontSizes, lineHeights } = mergedToken;
|
||||
|
||||
// FIXME: tmp
|
||||
const primaryColors = generate(mergedToken.colorPrimary);
|
||||
const infoColors = generate(mergedToken.colorInfo);
|
||||
@ -36,6 +38,26 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
errorActiveColor: mergedToken.colorErrorActive,
|
||||
warningHoverColor: mergedToken.colorWarningHover,
|
||||
|
||||
// Font
|
||||
fontSizeSM: fontSizes[0],
|
||||
fontSize: fontSizes[1],
|
||||
fontSizeLG: fontSizes[2],
|
||||
fontSizeXL: fontSizes[3],
|
||||
fontSizeHeading1: fontSizes[6],
|
||||
fontSizeHeading2: fontSizes[5],
|
||||
fontSizeHeading3: fontSizes[4],
|
||||
fontSizeHeading4: fontSizes[3],
|
||||
fontSizeHeading5: fontSizes[2],
|
||||
|
||||
lineHeight: lineHeights[1],
|
||||
lineHeightLG: lineHeights[2],
|
||||
|
||||
lineHeightHeading1: lineHeights[6],
|
||||
lineHeightHeading2: lineHeights[5],
|
||||
lineHeightHeading3: lineHeights[4],
|
||||
lineHeightHeading4: lineHeights[3],
|
||||
lineHeightHeading5: lineHeights[2],
|
||||
|
||||
// 🔥🔥🔥🔥🔥🔥🔥🔥🔥 All TMP Token leaves here 🔥🔥🔥🔥🔥🔥🔥🔥🔥
|
||||
// FIXME: Handle this when derivative is ready
|
||||
primaryColors,
|
||||
@ -57,15 +79,9 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
tmpErrorColorDeprecatedBorder: errorColors[2],
|
||||
tmpInfoColorDeprecatedBorder: infoColors[2],
|
||||
|
||||
primaryOutlineColor: new TinyColor(mergedToken.primaryColor).setAlpha(0.2).toRgbString(),
|
||||
errorOutlineColor: new TinyColor(mergedToken.errorColor).setAlpha(0.2).toRgbString(),
|
||||
warningOutlineColor: new TinyColor(mergedToken.warningColor).setAlpha(0.2).toRgbString(),
|
||||
|
||||
primaryColor: mergedToken.colorPrimary,
|
||||
successColor: mergedToken.colorSuccess,
|
||||
warningColor: mergedToken.colorWarning,
|
||||
errorColor: mergedToken.colorError,
|
||||
infoColor: mergedToken.colorInfo,
|
||||
primaryOutlineColor: new TinyColor(mergedToken.colorPrimary).setAlpha(0.2).toRgbString(),
|
||||
errorOutlineColor: new TinyColor(mergedToken.colorError).setAlpha(0.2).toRgbString(),
|
||||
warningOutlineColor: new TinyColor(mergedToken.colorWarning).setAlpha(0.2).toRgbString(),
|
||||
|
||||
itemActiveBackground: primaryColors[0],
|
||||
|
||||
@ -79,29 +95,18 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
linkHoverDecoration: 'none',
|
||||
linkFocusDecoration: 'none',
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/20210
|
||||
lineHeight: 1.5715,
|
||||
|
||||
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(),
|
||||
|
||||
easeInOut: `cubic-bezier(0.645, 0.045, 0.355, 1)`,
|
||||
easeInOutCirc: `cubic-bezier(0.78, 0.14, 0.15, 0.86)`,
|
||||
easeOutBack: `cubic-bezier(0.12, 0.4, 0.29, 1.46)`,
|
||||
easeInQuint: `cubic-bezier(0.755, 0.05, 0.855, 0.06)`,
|
||||
easeOutQuint: `cubic-bezier(0.23, 1, 0.32, 1)`,
|
||||
|
||||
outlineWidth: 2,
|
||||
outlineBlurSize: 0,
|
||||
|
||||
fontSize: 14,
|
||||
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'`,
|
||||
textColor: new TinyColor('#000').setAlpha(0.85).toRgbString(),
|
||||
textColorSecondary: new TinyColor('#000').setAlpha(0.45).toRgbString(),
|
||||
textColorDisabled: new TinyColor('#000').setAlpha(0.25).toRgbString(),
|
||||
textColorInverse: '#fff',
|
||||
@ -115,7 +120,6 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
|
||||
itemHoverBackground: '#f5f5f5',
|
||||
|
||||
controlHeight: 32,
|
||||
controlHeightSM: 24,
|
||||
controlHeightXS: 16,
|
||||
controlHeightLG: 40,
|
||||
@ -148,12 +152,6 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
durationMid: '0.2s',
|
||||
durationFast: '0.1s',
|
||||
|
||||
heading1Size: Math.ceil(mergedToken.fontSize * 2.71),
|
||||
heading2Size: Math.ceil(mergedToken.fontSize * 2.14),
|
||||
heading3Size: Math.ceil(mergedToken.fontSize * 1.71),
|
||||
heading4Size: Math.ceil(mergedToken.fontSize * 1.42),
|
||||
heading5Size: Math.ceil(mergedToken.fontSize * 1.14),
|
||||
|
||||
zIndexDropdown: 1050,
|
||||
};
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@ export const resetComponent = (token: DerivativeToken): CSSObject => ({
|
||||
boxSizing: 'border-box',
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
color: token.textColor,
|
||||
color: token.colorText,
|
||||
fontSize: token.fontSize,
|
||||
// font-variant: @font-variant-base;
|
||||
lineHeight: token.lineHeight,
|
||||
|
||||
@ -22,11 +22,11 @@ export const initSlideMotion = (
|
||||
${motionCls}-appear
|
||||
`]: {
|
||||
opacity: 0,
|
||||
animationTimingFunction: token.easeOutQuint,
|
||||
animationTimingFunction: token.motionEaseOutQuint,
|
||||
},
|
||||
|
||||
[`${motionCls}-leave`]: {
|
||||
animationTimingFunction: token.easeInQuint,
|
||||
animationTimingFunction: token.motionEaseInQuint,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
@ -66,7 +66,7 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
|
||||
fontSize,
|
||||
fontSizeLG,
|
||||
borderRadius,
|
||||
easeInOutCirc,
|
||||
motionEaseInOutCirc,
|
||||
alertMessageColor,
|
||||
alertWithDescriptionIconSize,
|
||||
alertWithDescriptionPaddingVertical,
|
||||
@ -109,9 +109,9 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
|
||||
'&&-motion-leave': {
|
||||
overflow: 'hidden',
|
||||
opacity: 1,
|
||||
transition: `max-height ${duration} ${easeInOutCirc}, opacity ${duration} ${easeInOutCirc},
|
||||
padding-top ${duration} ${easeInOutCirc}, padding-bottom ${duration} ${easeInOutCirc},
|
||||
margin-bottom ${duration} ${easeInOutCirc}`,
|
||||
transition: `max-height ${duration} ${motionEaseInOutCirc}, opacity ${duration} ${motionEaseInOutCirc},
|
||||
padding-top ${duration} ${motionEaseInOutCirc}, padding-bottom ${duration} ${motionEaseInOutCirc},
|
||||
margin-bottom ${duration} ${motionEaseInOutCirc}`,
|
||||
},
|
||||
|
||||
'&&-motion-leave-active': {
|
||||
@ -289,24 +289,24 @@ export default function useStyle(
|
||||
const alertWithDescriptionNoIconPaddingVertical = token.padding - 1;
|
||||
|
||||
// FIXME
|
||||
const infoColors = generate(token.infoColor);
|
||||
const infoColors = generate(token.colorInfo);
|
||||
const alertInfoBgColor = infoColors[0];
|
||||
const alertInfoIconColor = token.infoColor;
|
||||
const alertInfoIconColor = token.colorInfo;
|
||||
const alertInfoBorderColor = infoColors[2];
|
||||
|
||||
const successColors = generate(token.successColor);
|
||||
const successColors = generate(token.colorSuccess);
|
||||
const alertSuccessBgColor = successColors[0];
|
||||
const alertSuccessIconColor = token.successColor;
|
||||
const alertSuccessIconColor = token.colorSuccess;
|
||||
const alertSuccessBorderColor = successColors[2];
|
||||
|
||||
const warningColors = generate(token.warningColor);
|
||||
const warningColors = generate(token.colorWarning);
|
||||
const alertWarningBgColor = warningColors[0];
|
||||
const alertWarningIconColor = token.warningColor;
|
||||
const alertWarningIconColor = token.colorWarning;
|
||||
const alertWarningBorderColor = warningColors[2];
|
||||
|
||||
const errorColors = generate(token.errorColor);
|
||||
const errorColors = generate(token.colorError);
|
||||
const alertErrorBgColor = errorColors[0];
|
||||
const alertErrorIconColor = token.errorColor;
|
||||
const alertErrorIconColor = token.colorError;
|
||||
const alertErrorBorderColor = errorColors[2];
|
||||
|
||||
const alertToken: AlertToken = {
|
||||
|
||||
@ -171,11 +171,11 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
|
||||
},
|
||||
|
||||
[`.${badgePrefixCls}-status-success`]: {
|
||||
backgroundColor: token.successColor,
|
||||
backgroundColor: token.colorSuccess,
|
||||
},
|
||||
[`.${badgePrefixCls}-status-processing`]: {
|
||||
position: 'relative',
|
||||
backgroundColor: token.primaryColor,
|
||||
backgroundColor: token.colorPrimary,
|
||||
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
@ -183,7 +183,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
|
||||
insetInlineStart: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
border: `1px solid ${token.primaryColor}`,
|
||||
border: `1px solid ${token.colorPrimary}`,
|
||||
borderRadius: '50%',
|
||||
animation: `${antStatusProcessing.getName(hashId)} 1.2s infinite ease-in-out`, // FIXME: hard code, copied from old less file
|
||||
content: '""',
|
||||
@ -194,37 +194,39 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
|
||||
},
|
||||
|
||||
[`.${badgePrefixCls}-status-error`]: {
|
||||
backgroundColor: token.errorColor,
|
||||
backgroundColor: token.colorError,
|
||||
},
|
||||
|
||||
[`.${badgePrefixCls}-status-warning`]: {
|
||||
backgroundColor: token.warningColor,
|
||||
backgroundColor: token.colorWarning,
|
||||
},
|
||||
...statusPreset,
|
||||
[`.${badgePrefixCls}-status-text`]: {
|
||||
marginInlineStart: token.marginXS,
|
||||
color: token.textColor,
|
||||
color: token.colorText,
|
||||
fontSize: token.fontSize,
|
||||
},
|
||||
},
|
||||
[`.${badgePrefixCls}-zoom-appear, .${badgePrefixCls}-zoom-enter`]: {
|
||||
animation: `${antZoomBadgeIn.getName(hashId)} ${token.duration} ${token.easeOutBack}`,
|
||||
animation: `${antZoomBadgeIn.getName(hashId)} ${token.duration} ${token.motionEaseOutBack}`,
|
||||
animationFillMode: 'both',
|
||||
},
|
||||
[`.${badgePrefixCls}-zoom-leave`]: {
|
||||
animation: `${antZoomBadgeOut.getName(hashId)} ${token.duration} ${token.easeOutBack}`,
|
||||
animation: `${antZoomBadgeOut.getName(hashId)} ${token.duration} ${
|
||||
token.motionEaseOutBack
|
||||
}`,
|
||||
animationFillMode: 'both',
|
||||
},
|
||||
[`&.${badgePrefixCls}-not-a-wrapper`]: {
|
||||
[`.${badgePrefixCls}-zoom-appear, .${badgePrefixCls}-zoom-enter`]: {
|
||||
animation: `${antNoWrapperZoomBadgeIn.getName(hashId)} ${token.duration} ${
|
||||
token.easeOutBack
|
||||
token.motionEaseOutBack
|
||||
}`,
|
||||
},
|
||||
|
||||
[`.${badgePrefixCls}-zoom-leave`]: {
|
||||
animation: `${antNoWrapperZoomBadgeOut.getName(hashId)} ${token.duration} ${
|
||||
token.easeOutBack
|
||||
token.motionEaseOutBack
|
||||
}`,
|
||||
},
|
||||
[`&:not(.${badgePrefixCls}-status)`]: {
|
||||
@ -247,7 +249,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
height: token.badgeHeight,
|
||||
transition: `all ${token.duration} ${token.easeOutBack}`,
|
||||
transition: `all ${token.duration} ${token.motionEaseOutBack}`,
|
||||
WebkitTransformStyle: 'preserve-3d',
|
||||
WebkitBackfaceVisibility: 'hidden',
|
||||
[`> p.${numberPrefixCls}-only-unit`]: {
|
||||
@ -268,9 +270,9 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
|
||||
height: 22, // FIXME: hard code, copied from old less file
|
||||
padding: `0 ${token.paddingXS}px`,
|
||||
color: token.badgeTextColor,
|
||||
lineHeight: '22px', // FIXME: hard code, copied from old less file
|
||||
lineHeight: '22px', // colorPrimarycode, copied from old less file
|
||||
whiteSpace: 'nowrap',
|
||||
backgroundColor: token.primaryColor,
|
||||
backgroundColor: token.colorPrimary,
|
||||
borderRadius: token.borderRadius,
|
||||
[`.${ribbonPrefixCls}-text`]: { color: '#fff' },
|
||||
[`.${ribbonPrefixCls}-corner`]: {
|
||||
|
||||
@ -25,11 +25,11 @@ const genSharedButtonStyle = (
|
||||
backgroundColor: 'transparent',
|
||||
border: `${token.borderWidth}px ${token.borderStyle} transparent`,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.duration} ${token.easeInOut}`,
|
||||
transition: `all ${token.duration} ${token.motionEaseInOut}`,
|
||||
userSelect: 'none',
|
||||
touchAction: 'manipulation',
|
||||
lineHeight: token.lineHeight,
|
||||
color: token.textColor,
|
||||
color: token.colorText,
|
||||
|
||||
'> span': {
|
||||
display: 'inline-block',
|
||||
@ -140,8 +140,8 @@ const genDefaultButtonStyle = (prefixCls: string, token: DerivativeToken): CSSOb
|
||||
),
|
||||
|
||||
[`&.${prefixCls}-dangerous`]: {
|
||||
color: token.errorColor,
|
||||
borderColor: token.errorColor,
|
||||
color: token.colorError,
|
||||
borderColor: token.colorError,
|
||||
|
||||
...genHoverActiveButtonStyle(
|
||||
{
|
||||
@ -156,8 +156,8 @@ const genDefaultButtonStyle = (prefixCls: string, token: DerivativeToken): CSSOb
|
||||
|
||||
...genGhostButtonStyle(
|
||||
prefixCls,
|
||||
token.errorColor,
|
||||
token.errorColor,
|
||||
token.colorError,
|
||||
token.colorError,
|
||||
token.textColorDisabled,
|
||||
token.borderColor,
|
||||
),
|
||||
@ -170,7 +170,7 @@ const genPrimaryButtonStyle = (prefixCls: string, token: DerivativeToken): CSSOb
|
||||
...genSolidButtonStyle(token),
|
||||
|
||||
color: '#FFF',
|
||||
backgroundColor: token.primaryColor,
|
||||
backgroundColor: token.colorPrimary,
|
||||
|
||||
boxShadow: '0 2px 0 rgba(0, 0, 0, 0.045)',
|
||||
|
||||
@ -185,14 +185,14 @@ const genPrimaryButtonStyle = (prefixCls: string, token: DerivativeToken): CSSOb
|
||||
|
||||
...genGhostButtonStyle(
|
||||
prefixCls,
|
||||
token.primaryColor,
|
||||
token.primaryColor,
|
||||
token.colorPrimary,
|
||||
token.colorPrimary,
|
||||
token.textColorDisabled,
|
||||
token.borderColor,
|
||||
),
|
||||
|
||||
[`&.${prefixCls}-dangerous`]: {
|
||||
backgroundColor: token.errorColor,
|
||||
backgroundColor: token.colorError,
|
||||
|
||||
...genHoverActiveButtonStyle(
|
||||
{
|
||||
@ -205,8 +205,8 @@ const genPrimaryButtonStyle = (prefixCls: string, token: DerivativeToken): CSSOb
|
||||
|
||||
...genGhostButtonStyle(
|
||||
prefixCls,
|
||||
token.errorColor,
|
||||
token.errorColor,
|
||||
token.colorError,
|
||||
token.colorError,
|
||||
token.textColorDisabled,
|
||||
token.borderColor,
|
||||
),
|
||||
@ -237,7 +237,7 @@ const genLinkButtonStyle = (prefixCls: string, token: DerivativeToken): CSSObjec
|
||||
...genPureDisabledButtonStyle(token),
|
||||
|
||||
[`&.${prefixCls}-dangerous`]: {
|
||||
color: token.errorColor,
|
||||
color: token.colorError,
|
||||
|
||||
...genHoverActiveButtonStyle(
|
||||
{
|
||||
@ -272,7 +272,7 @@ const genTextButtonStyle = (prefixCls: string, token: DerivativeToken): CSSObjec
|
||||
...genPureDisabledButtonStyle(token),
|
||||
|
||||
[`&.${prefixCls}-dangerous`]: {
|
||||
color: token.errorColor,
|
||||
color: token.colorError,
|
||||
|
||||
...genPureDisabledButtonStyle(token),
|
||||
},
|
||||
@ -327,7 +327,7 @@ const genSizeButtonStyle = (
|
||||
},
|
||||
|
||||
[`.${prefixCls}-loading-icon`]: {
|
||||
transition: `width ${token.duration} ${token.easeInOut}, opacity ${token.duration} ${token.easeInOut}`,
|
||||
transition: `width ${token.duration} ${token.motionEaseInOut}, opacity ${token.duration} ${token.motionEaseInOut}`,
|
||||
},
|
||||
|
||||
[`&:not(${iconOnlyCls}) .${prefixCls}-loading-icon > .${iconPrefixCls}`]: {
|
||||
|
||||
@ -136,7 +136,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) =>
|
||||
insetInlineStart: '50%',
|
||||
width: token.fontSizeLG / 2,
|
||||
height: token.fontSizeLG / 2,
|
||||
backgroundColor: token.primaryColor,
|
||||
backgroundColor: token.colorPrimary,
|
||||
border: 0,
|
||||
transform: 'translate(-50%, -50%) scale(1)',
|
||||
opacity: 1,
|
||||
@ -161,7 +161,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) =>
|
||||
${checkboxCls}-input:focus +
|
||||
`]: {
|
||||
[`${checkboxCls}-inner`]: {
|
||||
borderColor: token.primaryColor,
|
||||
borderColor: token.colorPrimary,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -171,13 +171,13 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) =>
|
||||
// Wrapper > Checkbox
|
||||
[`${checkboxCls}-checked`]: {
|
||||
[`${checkboxCls}-inner`]: {
|
||||
backgroundColor: token.primaryColor,
|
||||
borderColor: token.primaryColor,
|
||||
backgroundColor: token.colorPrimary,
|
||||
borderColor: token.colorPrimary,
|
||||
|
||||
'&:after': {
|
||||
opacity: 1,
|
||||
transform: 'rotate(45deg) scale(1) translate(-50%,-50%)',
|
||||
transition: `all ${token.duration} ${token.easeOutBack} 0.1s`,
|
||||
transition: `all ${token.duration} ${token.motionEaseOutBack} 0.1s`,
|
||||
},
|
||||
},
|
||||
|
||||
@ -188,7 +188,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) =>
|
||||
insetInlineStart: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
border: `${token.borderWidth}px ${token.borderStyle} ${token.primaryColor}`,
|
||||
border: `${token.borderWidth}px ${token.borderStyle} ${token.colorPrimary}`,
|
||||
borderRadius: token.borderRadius,
|
||||
visibility: 'hidden',
|
||||
animation: `${antCheckboxEffect.getName(hashId)} ${token.duration} ease-in-out`,
|
||||
|
||||
@ -122,7 +122,7 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
|
||||
},
|
||||
|
||||
'&-plain&-with-text': {
|
||||
color: token.textColor,
|
||||
color: token.colorText,
|
||||
fontWeight: 'normal',
|
||||
fontSize: token.fontSize,
|
||||
},
|
||||
|
||||
@ -34,12 +34,12 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
fontSizeLG,
|
||||
controlHeightLG,
|
||||
controlHeightSM,
|
||||
errorColor,
|
||||
colorError,
|
||||
paddingXS,
|
||||
textColorSecondary,
|
||||
durationFast,
|
||||
inputNumberHandlerActiveBgColor,
|
||||
primaryColor,
|
||||
colorPrimary,
|
||||
marginXXS,
|
||||
controlHeight,
|
||||
inputPaddingHorizontal,
|
||||
@ -123,7 +123,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
// ===================== Out Of Range =====================
|
||||
'&-out-of-range': {
|
||||
input: {
|
||||
color: errorColor,
|
||||
color: colorError,
|
||||
},
|
||||
},
|
||||
|
||||
@ -162,7 +162,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
},
|
||||
|
||||
'&:hover &-up-inner, &:hover &-down-inner': {
|
||||
color: primaryColor,
|
||||
color: colorPrimary,
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@ -79,43 +79,43 @@ const genInputSmallStyle = (token: InputToken): CSSObject => ({
|
||||
});
|
||||
|
||||
export const genStatusStyle = (token: InputToken): CSSObject => {
|
||||
const { prefixCls, errorColor, warningColor, errorOutlineColor, warningOutlineColor } = token;
|
||||
const { prefixCls, colorError, colorWarning, errorOutlineColor, warningOutlineColor } = token;
|
||||
|
||||
return {
|
||||
'&-status-error:not(&-disabled):not(&-borderless)&': {
|
||||
'&, &:hover': {
|
||||
borderColor: errorColor,
|
||||
borderColor: colorError,
|
||||
},
|
||||
|
||||
'&:focus, &-focused': {
|
||||
...genActiveStyle({
|
||||
...token,
|
||||
inputBorderActiveColor: errorColor,
|
||||
inputBorderHoverColor: errorColor,
|
||||
inputBorderActiveColor: colorError,
|
||||
inputBorderHoverColor: colorError,
|
||||
primaryOutlineColor: errorOutlineColor,
|
||||
}),
|
||||
},
|
||||
|
||||
[`.${prefixCls}-feedback-icon, .${prefixCls}-prefix`]: {
|
||||
color: errorColor,
|
||||
color: colorError,
|
||||
},
|
||||
},
|
||||
'&-status-warning:not(&-disabled):not(&-borderless)&': {
|
||||
'&, &:hover': {
|
||||
borderColor: warningColor,
|
||||
borderColor: colorWarning,
|
||||
},
|
||||
|
||||
'&:focus, &-focused': {
|
||||
...genActiveStyle({
|
||||
...token,
|
||||
inputBorderActiveColor: warningColor,
|
||||
inputBorderHoverColor: warningColor,
|
||||
inputBorderActiveColor: colorWarning,
|
||||
inputBorderHoverColor: colorWarning,
|
||||
primaryOutlineColor: warningOutlineColor,
|
||||
}),
|
||||
},
|
||||
|
||||
[`.${prefixCls}-feedback-icon, .${prefixCls}-prefix`]: {
|
||||
color: warningColor,
|
||||
color: colorWarning,
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -127,7 +127,7 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({
|
||||
width: '100%',
|
||||
minWidth: 0,
|
||||
padding: `${token.inputPaddingVertical}px ${token.inputPaddingHorizontal}px`,
|
||||
color: token.textColor,
|
||||
color: token.colorText,
|
||||
fontSize: token.fontSize,
|
||||
lineHeight: token.lineHeight,
|
||||
backgroundColor: token.componentBackground,
|
||||
@ -252,7 +252,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
|
||||
'&-addon': {
|
||||
position: 'relative',
|
||||
padding: `0 ${token.inputPaddingHorizontal}px`,
|
||||
color: token.textColor,
|
||||
color: token.colorText,
|
||||
fontWeight: 'normal',
|
||||
fontSize: token.fontSize,
|
||||
textAlign: 'center',
|
||||
@ -275,7 +275,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
|
||||
|
||||
'&-open, &-focused': {
|
||||
'.ant-select-selector': {
|
||||
color: token.primaryColor,
|
||||
color: token.colorPrimary,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -549,7 +549,7 @@ const genAllowClearStyle = (token: InputToken): CSSObject => {
|
||||
},
|
||||
|
||||
'&:active': {
|
||||
color: token.textColor,
|
||||
color: token.colorText,
|
||||
},
|
||||
|
||||
'&-hidden': {
|
||||
@ -584,8 +584,8 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
|
||||
textColorSecondary,
|
||||
duration,
|
||||
iconColorHover,
|
||||
primaryColor,
|
||||
successColor,
|
||||
colorPrimary,
|
||||
colorSuccess,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
@ -669,12 +669,12 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
|
||||
'&-status-validating': {
|
||||
[`.${prefixCls}-feedback-icon`]: {
|
||||
display: 'inline-block',
|
||||
color: primaryColor,
|
||||
color: colorPrimary,
|
||||
},
|
||||
},
|
||||
'&-status-success': {
|
||||
[`.${prefixCls}-feedback-icon`]: {
|
||||
color: successColor,
|
||||
color: colorSuccess,
|
||||
// FIXME: animationName
|
||||
},
|
||||
},
|
||||
@ -683,7 +683,7 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
|
||||
};
|
||||
|
||||
const genGroupStyle: GenerateStyle<InputToken> = (token: InputToken) => {
|
||||
const { prefixCls, errorColor, successColor } = token;
|
||||
const { prefixCls, colorError, colorSuccess } = token;
|
||||
|
||||
return {
|
||||
[`.${prefixCls}-group`]: {
|
||||
@ -708,14 +708,14 @@ const genGroupStyle: GenerateStyle<InputToken> = (token: InputToken) => {
|
||||
// Status
|
||||
'&-status-error': {
|
||||
[`.${prefixCls}-group-addon`]: {
|
||||
color: errorColor,
|
||||
borderColor: errorColor,
|
||||
color: colorError,
|
||||
borderColor: colorError,
|
||||
},
|
||||
},
|
||||
'&-status-warning': {
|
||||
[`.${prefixCls}-group-addon`]: {
|
||||
color: successColor,
|
||||
borderColor: successColor,
|
||||
color: colorSuccess,
|
||||
borderColor: colorSuccess,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -26,7 +26,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
|
||||
textColorDisabled,
|
||||
itemHoverBackground,
|
||||
controlPaddingHorizontal,
|
||||
textColor,
|
||||
colorText: textColor,
|
||||
duration,
|
||||
lineHeight,
|
||||
controlHeight,
|
||||
|
||||
@ -135,10 +135,10 @@ export default function useStyle(
|
||||
const resultIconFontSize = 72;
|
||||
const resultExtraMargin = `${token.padding * 1.5}px 0 0 0`;
|
||||
|
||||
const resultInfoIconColor = token.infoColor;
|
||||
const resultErrorIconColor = token.errorColor;
|
||||
const resultSuccessIconColor = token.successColor;
|
||||
const resultWarningIconColor = token.warningColor;
|
||||
const resultInfoIconColor = token.colorInfo;
|
||||
const resultErrorIconColor = token.colorError;
|
||||
const resultSuccessIconColor = token.colorSuccess;
|
||||
const resultWarningIconColor = token.colorWarning;
|
||||
|
||||
const resultToken: ResultToken = {
|
||||
...token,
|
||||
|
||||
@ -20,7 +20,7 @@ const genItemStyle: GenerateStyle<SelectToken, CSSObject> = token => {
|
||||
padding: `${
|
||||
(token.controlHeight - token.fontSize * token.lineHeight) / 2
|
||||
}px ${controlPaddingHorizontal}px`,
|
||||
color: token.textColor,
|
||||
color: token.colorText,
|
||||
fontWeight: 'normal',
|
||||
fontSize: token.fontSize,
|
||||
lineHeight: token.lineHeight,
|
||||
@ -122,12 +122,12 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token, hashId) => {
|
||||
},
|
||||
|
||||
[`&-selected:not(${selectItemCls}-option-disabled)`]: {
|
||||
color: token.textColor,
|
||||
color: token.colorText,
|
||||
fontWeight: 600, // FIXME: Need design token?
|
||||
backgroundColor: token.itemActiveBackground,
|
||||
|
||||
[`${selectItemCls}-option-state`]: {
|
||||
color: token.primaryColor,
|
||||
color: token.colorPrimary,
|
||||
},
|
||||
},
|
||||
'&-disabled': {
|
||||
|
||||
@ -36,7 +36,7 @@ const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = token => {
|
||||
backgroundColor: token.componentBackground,
|
||||
border: `${token.borderWidth}px ${token.borderStyle} ${token.borderColor}`,
|
||||
borderRadius: token.borderRadius,
|
||||
transition: `all ${token.duration} ${token.easeInOut}`,
|
||||
transition: `all ${token.duration} ${token.motionEaseInOut}`,
|
||||
|
||||
input: {
|
||||
cursor: 'pointer',
|
||||
@ -258,7 +258,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
|
||||
fontSize: token.fontSize,
|
||||
textAlign: 'center',
|
||||
visibility: 'visible',
|
||||
animation: `zoomIn ${token.duration} ${token.easeOutBack}`,
|
||||
animation: `zoomIn ${token.duration} ${token.motionEaseOutBack}`,
|
||||
pointerEvents: 'none',
|
||||
|
||||
'&:not(:first-child)': {
|
||||
|
||||
@ -137,7 +137,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
|
||||
userSelect: 'none',
|
||||
|
||||
'&-active': {
|
||||
color: token.textColor,
|
||||
color: token.colorText,
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@ -235,7 +235,7 @@ export default function useStyle(
|
||||
switchMinWidth: 44,
|
||||
switchHeight,
|
||||
switchDuration: '0.2s',
|
||||
switchColor: token.primaryColor,
|
||||
switchColor: token.colorPrimary,
|
||||
switchDisabledOpacity: 0.4,
|
||||
switchInnerMarginMin: Math.ceil(switchHeight * 0.3),
|
||||
switchInnerMarginMax: Math.ceil(switchHeight * 1.1),
|
||||
|
||||
@ -20,7 +20,7 @@ interface TagToken extends DerivativeToken {
|
||||
|
||||
// ============================== Styles ==============================
|
||||
|
||||
type CssVariableType = 'success' | 'info' | 'error' | 'warning';
|
||||
type CssVariableType = 'Success' | 'Info' | 'Error' | 'Warning';
|
||||
|
||||
const genTagStatusStyle = (
|
||||
prefixCls: string,
|
||||
@ -31,7 +31,7 @@ const genTagStatusStyle = (
|
||||
const capitalizedCssVariableType = capitalize<CssVariableType>(cssVariableType);
|
||||
return {
|
||||
[`.${prefixCls}-${status}`]: {
|
||||
color: token[`${cssVariableType}Color`],
|
||||
color: token[`color${cssVariableType}`],
|
||||
background: token[`tmp${capitalizedCssVariableType}ColorDeprecatedBg`],
|
||||
borderColor: token[`tmp${capitalizedCssVariableType}ColorDeprecatedBorder`],
|
||||
},
|
||||
@ -121,7 +121,7 @@ const genBaseStyle = (
|
||||
cursor: 'pointer',
|
||||
|
||||
'&:not(&-checked):hover': {
|
||||
color: token.primaryColor,
|
||||
color: token.colorPrimary,
|
||||
},
|
||||
|
||||
'&:active, &-checked': {
|
||||
@ -158,7 +158,7 @@ export const genTagStyle = (
|
||||
// FIXME: hard code
|
||||
const tagLineHeight = '18px';
|
||||
const tagDefaultBg = token.backgroundLight;
|
||||
const tagDefaultColor = token.textColor;
|
||||
const tagDefaultColor = token.colorText;
|
||||
|
||||
const tagToken = {
|
||||
...token,
|
||||
@ -171,10 +171,10 @@ export const genTagStyle = (
|
||||
return [
|
||||
genBaseStyle(prefixCls, iconPrefixCls, tagToken),
|
||||
genTagColorStyle(prefixCls, tagToken),
|
||||
genTagStatusStyle(prefixCls, tagToken, 'success', 'success'),
|
||||
genTagStatusStyle(prefixCls, tagToken, 'processing', 'info'),
|
||||
genTagStatusStyle(prefixCls, tagToken, 'error', 'error'),
|
||||
genTagStatusStyle(prefixCls, tagToken, 'warning', 'warning'),
|
||||
genTagStatusStyle(prefixCls, tagToken, 'success', 'Success'),
|
||||
genTagStatusStyle(prefixCls, tagToken, 'processing', 'Info'),
|
||||
genTagStatusStyle(prefixCls, tagToken, 'error', 'Error'),
|
||||
genTagStatusStyle(prefixCls, tagToken, 'warning', 'Warning'),
|
||||
];
|
||||
};
|
||||
|
||||
|
||||
@ -42,7 +42,7 @@ const getDropIndicatorStyle = (prefixCls: string, token: DerivativeToken) => ({
|
||||
// it should displayed over the following node
|
||||
zIndex: 1,
|
||||
height: 2,
|
||||
backgroundColor: token.primaryColor,
|
||||
backgroundColor: token.colorPrimary,
|
||||
borderRadius: 1,
|
||||
pointerEvents: 'none',
|
||||
|
||||
@ -53,7 +53,7 @@ const getDropIndicatorStyle = (prefixCls: string, token: DerivativeToken) => ({
|
||||
width: 8,
|
||||
height: 8,
|
||||
backgroundColor: 'transparent',
|
||||
border: `2px solid ${token.primaryColor}`,
|
||||
border: `2px solid ${token.colorPrimary}`,
|
||||
borderRadius: '50%',
|
||||
content: '""',
|
||||
},
|
||||
@ -122,7 +122,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
|
||||
insetInlineEnd: 0,
|
||||
bottom: treeNodePadding,
|
||||
insetInlineStart: 0,
|
||||
border: `1px solid ${token.primaryColor}`,
|
||||
border: `1px solid ${token.colorPrimary}`,
|
||||
opacity: 0,
|
||||
animation: `${treeNodeFX.getName(hashId)} ${token.duration}`,
|
||||
animationPlayState: 'running',
|
||||
@ -217,7 +217,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
|
||||
},
|
||||
|
||||
'&-loading-icon': {
|
||||
color: token.primaryColor,
|
||||
color: token.colorPrimary,
|
||||
},
|
||||
|
||||
'&-leaf-line': {
|
||||
@ -309,7 +309,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
|
||||
|
||||
[`${treeNodeCls}.drop-container`]: {
|
||||
'> [draggable]': {
|
||||
boxShadow: `0 0 0 2px ${token.primaryColor}`,
|
||||
boxShadow: `0 0 0 2px ${token.colorPrimary}`,
|
||||
},
|
||||
},
|
||||
|
||||
@ -423,7 +423,7 @@ export const genDirectoryStyle = (token: TreeToken): CSSObject => {
|
||||
&:hover::before,
|
||||
&::before
|
||||
`]: {
|
||||
background: token.primaryColor,
|
||||
background: token.colorPrimary,
|
||||
},
|
||||
|
||||
// >>> Switcher
|
||||
|
||||
@ -16,22 +16,22 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = token => {
|
||||
const { prefixCls, titleMarginTop } = token.typography;
|
||||
return {
|
||||
[`.${prefixCls}`]: {
|
||||
color: token.textColor,
|
||||
color: token.colorText,
|
||||
overflowWrap: 'break-word',
|
||||
'&&-secondary': {
|
||||
color: token.textColorSecondary,
|
||||
},
|
||||
|
||||
'&&-success': {
|
||||
color: token.successColor,
|
||||
color: token.colorSuccess,
|
||||
},
|
||||
|
||||
'&&-warning': {
|
||||
color: token.warningColor,
|
||||
color: token.colorWarning,
|
||||
},
|
||||
|
||||
'&&-danger': {
|
||||
color: token.errorColor,
|
||||
color: token.colorError,
|
||||
'a&:active, a&:focus, a&:hover': {
|
||||
// FIXME: need new token like errorColorHover
|
||||
color: token.errorColors[4],
|
||||
|
||||
@ -43,20 +43,20 @@ const getTitleStyle = ({
|
||||
|
||||
// eslint-disable-next-line import/prefer-default-export
|
||||
export const getTitleStyles: GenerateStyle<TypographyToken, CSSObject> = token => {
|
||||
// FIXME: magic numbers for H1/H2/.../H5 line height
|
||||
const lineHeights = [1.23, 1.35, 1.35, 1.4, 1.5];
|
||||
const headings = [1, 2, 3, 4, 5] as const;
|
||||
|
||||
const styles = {} as CSSObject;
|
||||
lineHeights.forEach((lineHeight, i) => {
|
||||
headings.forEach(headingLevel => {
|
||||
styles[
|
||||
`
|
||||
h${i + 1}&,
|
||||
div&-h${i + 1},
|
||||
div&-h${i + 1} > textarea,
|
||||
h${i + 1}
|
||||
h${headingLevel}&,
|
||||
div&-h${headingLevel},
|
||||
div&-h${headingLevel} > textarea,
|
||||
h${headingLevel}
|
||||
`
|
||||
] = getTitleStyle({
|
||||
fontSize: (token as any)[`heading${i + 1}Size`],
|
||||
lineHeight,
|
||||
fontSize: token[`fontSizeHeading${headingLevel}`],
|
||||
lineHeight: token[`lineHeightHeading${headingLevel}`],
|
||||
color: token.headingColor,
|
||||
typographyToken: token.typography,
|
||||
});
|
||||
@ -228,7 +228,7 @@ export const getCopiableStyles: GenerateStyle<TypographyToken, CSSObject> = toke
|
||||
&,
|
||||
&:hover,
|
||||
&:focus`]: {
|
||||
color: token.successColor,
|
||||
color: token.colorSuccess,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user