mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
refactor: default theme with algorithm (#36175)
* refactor: alias token * refactor: use palettes * refactor: default theme * chore: code clean * refactor: component token * feat: light tokens * feat: add dark theme * feat: dark derivative * chore: code clean * refactor: fix colorBgContainer * refactor: rename token * test: fix lint * chore: code clean * chore: code clen * refactor: badge shadow color * test: add test case
This commit is contained in:
MadCcc
GitHub
parent
373f0c5a65
commit
9f2f9bb57f
@ -1,8 +1,8 @@
|
||||
import type { CSSInterpolation } from '@ant-design/cssinjs';
|
||||
import { Theme, useCacheToken, useStyleRegister } from '@ant-design/cssinjs';
|
||||
import type { DeepPartial } from 'antd/es/_util/type';
|
||||
import React from 'react';
|
||||
import version from '../../version';
|
||||
import type { DeepPartial } from '../type';
|
||||
import type {
|
||||
AliasToken,
|
||||
DerivativeToken,
|
||||
@ -12,7 +12,8 @@ import type {
|
||||
SeedToken,
|
||||
} from './interface';
|
||||
import { PresetColors } from './interface';
|
||||
import defaultSeedToken, { derivative as defaultDerivative } from './themes/default';
|
||||
import defaultDerivative from './themes/default';
|
||||
import defaultSeedToken from './themes/seed';
|
||||
import { clearFix, operationUnit, resetComponent, resetIcon, roundedArrow } from './util';
|
||||
import formatToken from './util/alias';
|
||||
import type { FullToken } from './util/genComponentStyleHook';
|
||||
@ -47,16 +48,13 @@ export type {
|
||||
};
|
||||
|
||||
// ================================ Context =================================
|
||||
const defaultTheme = new Theme(defaultDerivative);
|
||||
|
||||
export const DesignTokenContext = React.createContext<{
|
||||
token: Partial<SeedToken>;
|
||||
theme?: Theme<SeedToken, DerivativeToken>;
|
||||
derivative?: (token: SeedToken) => DerivativeToken;
|
||||
override?: DeepPartial<OverrideToken>;
|
||||
hashed?: string | boolean;
|
||||
}>({
|
||||
token: defaultSeedToken,
|
||||
theme: defaultTheme,
|
||||
});
|
||||
|
||||
// ================================== Hook ==================================
|
||||
@ -68,11 +66,13 @@ const saltPrefix =
|
||||
export function useToken(): [Theme<SeedToken, DerivativeToken>, GlobalToken, string] {
|
||||
const {
|
||||
token: rootDesignToken,
|
||||
theme = defaultTheme,
|
||||
override,
|
||||
derivative = defaultDerivative,
|
||||
hashed,
|
||||
} = React.useContext(DesignTokenContext);
|
||||
|
||||
const theme = new Theme(derivative);
|
||||
|
||||
const salt = `${saltPrefix}-${hashed || ''}`;
|
||||
|
||||
const [token, hashId] = useCacheToken<GlobalToken, SeedToken>(
|
||||
|
||||
@ -41,6 +41,7 @@ import type { ComponentToken as TooltipComponentToken } from '../../tooltip/styl
|
||||
import type { ComponentToken as TransferComponentToken } from '../../transfer/style';
|
||||
import type { ComponentToken as TypographyComponentToken } from '../../typography/style';
|
||||
import type { ComponentToken as UploadComponentToken } from '../../upload/style';
|
||||
import type { BgPalettes, TextAlphaPalettes } from './themes/IPalettes';
|
||||
|
||||
export const PresetColors = [
|
||||
'blue',
|
||||
@ -175,6 +176,7 @@ export interface SeedToken extends PresetColorType {
|
||||
motionEaseOutBack: string;
|
||||
motionEaseInQuint: string;
|
||||
motionEaseOutQuint: string;
|
||||
motionEaseOut: string;
|
||||
|
||||
// Radius
|
||||
radiusBase: number;
|
||||
@ -214,32 +216,22 @@ export interface DerivativeToken extends SeedToken, ColorPalettes {
|
||||
colorPrimaryBorderHover: string;
|
||||
|
||||
colorSuccessSecondary: string;
|
||||
colorBgSuccess: string; // success[0]
|
||||
colorSuccessBg: string; // success[0]
|
||||
|
||||
colorWarningHover: string;
|
||||
colorWarningActive: string;
|
||||
colorWarningOutline: string;
|
||||
colorWarningSecondary: string;
|
||||
colorBgWarning: string;
|
||||
colorWarningBg: string;
|
||||
|
||||
colorErrorHover: string;
|
||||
colorErrorActive: string;
|
||||
colorErrorOutline: string;
|
||||
colorErrorSecondary: string;
|
||||
colorBgError: string;
|
||||
colorErrorBg: string;
|
||||
|
||||
colorInfoSecondary: string;
|
||||
colorBgInfo: string;
|
||||
|
||||
colorText2: string;
|
||||
colorTextBelow: string;
|
||||
colorTextBelow2: string;
|
||||
colorTextBelow3: string;
|
||||
|
||||
colorBg2: string;
|
||||
colorBg3: string;
|
||||
colorBgBelow: string;
|
||||
colorBgBelow2: string;
|
||||
colorInfoBg: string;
|
||||
|
||||
colorHighlight: string;
|
||||
|
||||
@ -278,23 +270,18 @@ export interface DerivativeToken extends SeedToken, ColorPalettes {
|
||||
controlHeightXS: number;
|
||||
controlHeightSM: number;
|
||||
controlHeightLG: number;
|
||||
|
||||
// Map Token
|
||||
bgColors: BgPalettes;
|
||||
textColors: TextAlphaPalettes;
|
||||
}
|
||||
|
||||
// ======================================================================
|
||||
// == Alias Token ==
|
||||
// ======================================================================
|
||||
// FIXME: DerivativeToken should part pick
|
||||
type OmitDerivativeKey =
|
||||
| 'colorText2'
|
||||
| 'colorTextBelow'
|
||||
| 'colorTextBelow2'
|
||||
| 'colorTextBelow3'
|
||||
| 'colorBg2'
|
||||
| 'colorBgBelow'
|
||||
| 'colorBgBelow2';
|
||||
|
||||
// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
|
||||
export interface AliasToken extends Omit<DerivativeToken, OmitDerivativeKey> {
|
||||
export interface AliasToken extends DerivativeToken {
|
||||
// Font
|
||||
fontSizeSM: number;
|
||||
fontSize: number;
|
||||
@ -408,8 +395,6 @@ export interface AliasToken extends Omit<DerivativeToken, OmitDerivativeKey> {
|
||||
screenXXLMin: number;
|
||||
screenXXLMax: number;
|
||||
|
||||
motionEaseOut: string;
|
||||
|
||||
controlMaskBg: string;
|
||||
colorBorderSecondary: string;
|
||||
|
||||
|
||||
38
components/_util/theme/themes/IPalettes.ts
Normal file
38
components/_util/theme/themes/IPalettes.ts
Normal file
@ -0,0 +1,38 @@
|
||||
export interface TextAlphaPalettes {
|
||||
85: string;
|
||||
75: string;
|
||||
65: string;
|
||||
45: string;
|
||||
30: string;
|
||||
25: string;
|
||||
// FIXME: 只有 Popover 用了
|
||||
'light-75': string;
|
||||
|
||||
// 从 12 往下基本上就是偏背景和装饰性元素了
|
||||
12: string;
|
||||
// 另外一种 hover 色 或者禁用的背景色
|
||||
8: string;
|
||||
// 不透明度叠加色或文本色强化
|
||||
4: string;
|
||||
// 文本 hover 色
|
||||
3: string;
|
||||
}
|
||||
export interface BgPalettes {
|
||||
// 作为比较重的描边或者填充内容
|
||||
26: string;
|
||||
// 表达 选中态，或者作为弱一级的实色 border
|
||||
19: string;
|
||||
// 用于表达选中态或用于与区分 component 区分
|
||||
15: string;
|
||||
// 8 是卡片容器底色
|
||||
8: string;
|
||||
// Container 类型
|
||||
// 12 是 elevated 模式
|
||||
12: string;
|
||||
// 0 是 base 模式
|
||||
0: string;
|
||||
// FIXME: 亮色需要额外增加的色彩序列
|
||||
'light-12'?: string;
|
||||
'light-2'?: string;
|
||||
'light-10'?: string;
|
||||
}
|
||||
9
components/_util/theme/themes/dark/colorAlgorithm.ts
Normal file
9
components/_util/theme/themes/dark/colorAlgorithm.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
|
||||
export const getAlphaColor = (baseColor: string, alpha: number) =>
|
||||
new TinyColor(baseColor).setAlpha(alpha).toRgbString();
|
||||
|
||||
export const getSolidColor = (baseColor: string, brightness: number) => {
|
||||
const instance = new TinyColor(baseColor);
|
||||
return instance.lighten(brightness).toHexString();
|
||||
};
|
||||
125
components/_util/theme/themes/dark/index.ts
Normal file
125
components/_util/theme/themes/dark/index.ts
Normal file
@ -0,0 +1,125 @@
|
||||
import { generate } from '@ant-design/colors';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import type { ColorPalettes, DerivativeToken, PresetColorType, SeedToken } from '../../interface';
|
||||
import { defaultPresetColors } from '../seed';
|
||||
import { getFontSizes } from '../shared';
|
||||
import { generateBgPalettes, generateTextAlphaPalettes } from './palettes';
|
||||
|
||||
export default function derivative(token: SeedToken): DerivativeToken {
|
||||
const {
|
||||
colorPrimary,
|
||||
colorSuccess,
|
||||
colorWarning,
|
||||
colorError,
|
||||
colorInfo,
|
||||
motionUnit,
|
||||
motionBase,
|
||||
fontSizeBase,
|
||||
sizeUnit,
|
||||
sizeBaseStep,
|
||||
gridUnit,
|
||||
gridBaseStep,
|
||||
radiusBase,
|
||||
controlHeight,
|
||||
lineWidth,
|
||||
} = token;
|
||||
|
||||
const colorPalettes = Object.keys(defaultPresetColors)
|
||||
.map((colorKey: keyof PresetColorType) => {
|
||||
const colors = generate(token[colorKey], { theme: 'dark' });
|
||||
|
||||
return new Array(10).fill(1).reduce((prev, _, i) => {
|
||||
prev[`${colorKey}-${i + 1}`] = colors[i];
|
||||
return prev;
|
||||
}, {}) as ColorPalettes;
|
||||
})
|
||||
.reduce((prev, cur) => {
|
||||
prev = {
|
||||
...prev,
|
||||
...cur,
|
||||
};
|
||||
return prev;
|
||||
}, {} as ColorPalettes);
|
||||
|
||||
const primaryColors = generate(colorPrimary, { theme: 'dark' });
|
||||
const successColors = generate(colorSuccess, { theme: 'dark' });
|
||||
const warningColors = generate(colorWarning, { theme: 'dark' });
|
||||
const errorColors = generate(colorError, { theme: 'dark' });
|
||||
const infoColors = generate(colorInfo, { theme: 'dark' });
|
||||
const bgColors = generateBgPalettes('#000');
|
||||
const textColors = generateTextAlphaPalettes('#fff');
|
||||
|
||||
const fontSizes = getFontSizes(fontSizeBase);
|
||||
|
||||
return {
|
||||
...token,
|
||||
...colorPalettes,
|
||||
|
||||
// motion
|
||||
motionDurationFast: `${(motionBase + motionUnit * 1).toFixed(1)}s`,
|
||||
motionDurationMid: `${(motionBase + motionUnit * 2).toFixed(1)}s`,
|
||||
motionDurationSlow: `${(motionBase + motionUnit * 3).toFixed(1)}s`,
|
||||
|
||||
// font
|
||||
fontSizes: fontSizes.map(fs => fs.size),
|
||||
lineHeights: fontSizes.map(fs => fs.lineHeight),
|
||||
|
||||
// size
|
||||
sizeSpaceSM: sizeUnit * (sizeBaseStep - 1),
|
||||
sizeSpace: sizeUnit * sizeBaseStep,
|
||||
sizeSpaceXS: sizeUnit * (sizeBaseStep - 2),
|
||||
sizeSpaceXXS: sizeUnit * (sizeBaseStep - 3),
|
||||
|
||||
// grid
|
||||
gridSpaceSM: gridUnit * (gridBaseStep - 1),
|
||||
gridSpaceBase: gridUnit * gridBaseStep,
|
||||
gridSpaceLG: gridUnit * (gridBaseStep + 1),
|
||||
gridSpaceXL: gridUnit * (gridBaseStep + 2),
|
||||
gridSpaceXXL: gridUnit * (gridBaseStep + 5),
|
||||
|
||||
// line
|
||||
lineWidthBold: lineWidth + 1,
|
||||
|
||||
// radius
|
||||
radiusSM: radiusBase / 2,
|
||||
radiusLG: radiusBase * 2,
|
||||
radiusXL: radiusBase * 4,
|
||||
|
||||
colorDefaultOutline: textColors['4'],
|
||||
|
||||
colorPrimaryActive: primaryColors[6],
|
||||
colorPrimaryHover: primaryColors[4],
|
||||
colorPrimaryOutline: new TinyColor(colorPrimary).setAlpha(0.2).toRgbString(),
|
||||
colorPrimarySecondary: primaryColors[2],
|
||||
colorPrimaryBorderHover: primaryColors[3],
|
||||
|
||||
colorSuccessSecondary: successColors[2],
|
||||
colorSuccessBg: successColors[0],
|
||||
|
||||
colorErrorActive: errorColors[6],
|
||||
colorErrorHover: errorColors[4],
|
||||
colorErrorOutline: new TinyColor(colorError).setAlpha(0.2).toRgbString(),
|
||||
colorErrorSecondary: errorColors[2],
|
||||
colorErrorBg: errorColors[0],
|
||||
|
||||
colorWarningActive: warningColors[6],
|
||||
colorWarningHover: warningColors[4],
|
||||
colorWarningOutline: new TinyColor(colorWarning).setAlpha(0.2).toRgbString(),
|
||||
colorWarningSecondary: warningColors[2],
|
||||
colorWarningBg: warningColors[0],
|
||||
|
||||
colorInfoSecondary: infoColors[2],
|
||||
colorInfoBg: infoColors[0],
|
||||
|
||||
colorHighlight: errorColors[4],
|
||||
|
||||
// control
|
||||
controlHeightSM: controlHeight * 0.75,
|
||||
controlHeightXS: controlHeight * 0.5,
|
||||
controlHeightLG: controlHeight * 1.25,
|
||||
|
||||
// map token
|
||||
bgColors,
|
||||
textColors,
|
||||
};
|
||||
}
|
||||
33
components/_util/theme/themes/dark/palettes.ts
Normal file
33
components/_util/theme/themes/dark/palettes.ts
Normal file
@ -0,0 +1,33 @@
|
||||
import type { BgPalettes, TextAlphaPalettes } from '../IPalettes';
|
||||
import { getAlphaColor, getSolidColor } from './colorAlgorithm';
|
||||
|
||||
export function generateBgPalettes(bgBaseColor: string): BgPalettes {
|
||||
return {
|
||||
'light-2': getSolidColor(bgBaseColor, 2),
|
||||
'light-10': getSolidColor(bgBaseColor, 10),
|
||||
'light-12': getSolidColor(bgBaseColor, 12),
|
||||
26: getSolidColor(bgBaseColor, 26),
|
||||
19: getSolidColor(bgBaseColor, 19),
|
||||
15: getSolidColor(bgBaseColor, 15),
|
||||
12: getSolidColor(bgBaseColor, 12),
|
||||
8: getSolidColor(bgBaseColor, 8),
|
||||
0: getSolidColor(bgBaseColor, 0),
|
||||
};
|
||||
}
|
||||
|
||||
export function generateTextAlphaPalettes(textBaseColor: string): TextAlphaPalettes {
|
||||
return {
|
||||
85: getAlphaColor(textBaseColor, 0.85),
|
||||
75: getAlphaColor(textBaseColor, 0.75), // 目前只有 Color Action 用了
|
||||
'light-75': getAlphaColor(textBaseColor, 0.75),
|
||||
65: getAlphaColor(textBaseColor, 0.65), // 目前只有 Segment Label 用了
|
||||
45: getAlphaColor(textBaseColor, 0.45),
|
||||
30: getAlphaColor(textBaseColor, 0.3),
|
||||
25: getAlphaColor(textBaseColor, 0.25),
|
||||
// 从 12 往下基本上就是偏背景和装饰性元素了
|
||||
12: getAlphaColor(textBaseColor, 0.12),
|
||||
8: getAlphaColor(textBaseColor, 0.08),
|
||||
4: getAlphaColor(textBaseColor, 0.04),
|
||||
3: getAlphaColor(textBaseColor, 0.03),
|
||||
};
|
||||
}
|
||||
@ -1,212 +0,0 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
|
||||
import { generate } from '@ant-design/colors';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import type { ColorPalettes, DerivativeToken, PresetColorType, SeedToken } from '../interface';
|
||||
import { getFontSizes } from './shared';
|
||||
|
||||
const defaultPresetColors: PresetColorType = {
|
||||
blue: '#1890FF',
|
||||
purple: '#722ED1',
|
||||
cyan: '#13C2C2',
|
||||
green: '#52C41A',
|
||||
magenta: '#EB2F96',
|
||||
pink: '#eb2f96',
|
||||
red: '#F5222D',
|
||||
orange: '#FA8C16',
|
||||
yellow: '#FADB14',
|
||||
volcano: '#FA541C',
|
||||
geekblue: '#2F54EB',
|
||||
gold: '#FAAD14',
|
||||
lime: '#A0D911',
|
||||
};
|
||||
|
||||
export function derivative(token: SeedToken): DerivativeToken {
|
||||
const {
|
||||
colorPrimary,
|
||||
colorSuccess,
|
||||
colorWarning,
|
||||
colorError,
|
||||
colorInfo,
|
||||
motionUnit,
|
||||
motionBase,
|
||||
fontSizeBase,
|
||||
sizeUnit,
|
||||
sizeBaseStep,
|
||||
gridUnit,
|
||||
gridBaseStep,
|
||||
radiusBase,
|
||||
controlHeight,
|
||||
lineWidth,
|
||||
} = 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) => {
|
||||
const colors = generate(token[colorKey]);
|
||||
|
||||
return new Array(10).fill(1).reduce((prev, _, i) => {
|
||||
prev[`${colorKey}-${i + 1}`] = colors[i];
|
||||
return prev;
|
||||
}, {}) as ColorPalettes;
|
||||
})
|
||||
.reduce((prev, cur) => {
|
||||
prev = {
|
||||
...prev,
|
||||
...cur,
|
||||
};
|
||||
return prev;
|
||||
}, {} as ColorPalettes);
|
||||
|
||||
const fontSizes = getFontSizes(fontSizeBase);
|
||||
|
||||
const colorBg2 = new TinyColor({ h: 0, s: 0, v: 98 }).toHexString();
|
||||
const colorBgBelow = new TinyColor({ h: 0, s: 0, v: 98 }).toHexString();
|
||||
const colorBgBelow2 = new TinyColor({ h: 0, s: 0, v: 96 }).toHexString();
|
||||
|
||||
return {
|
||||
...token,
|
||||
...colorPalettes,
|
||||
|
||||
// motion
|
||||
motionDurationFast: `${(motionBase + motionUnit * 1).toFixed(1)}s`,
|
||||
motionDurationMid: `${(motionBase + motionUnit * 2).toFixed(1)}s`,
|
||||
motionDurationSlow: `${(motionBase + motionUnit * 3).toFixed(1)}s`,
|
||||
|
||||
// font
|
||||
fontSizes: fontSizes.map(fs => fs.size),
|
||||
lineHeights: fontSizes.map(fs => fs.lineHeight),
|
||||
|
||||
// size
|
||||
sizeSpaceSM: sizeUnit * (sizeBaseStep - 1),
|
||||
sizeSpace: sizeUnit * sizeBaseStep,
|
||||
sizeSpaceXS: sizeUnit * (sizeBaseStep - 2),
|
||||
sizeSpaceXXS: sizeUnit * (sizeBaseStep - 3),
|
||||
|
||||
// grid
|
||||
gridSpaceSM: gridUnit * (gridBaseStep - 1),
|
||||
gridSpaceBase: gridUnit * gridBaseStep,
|
||||
gridSpaceLG: gridUnit * (gridBaseStep + 1),
|
||||
gridSpaceXL: gridUnit * (gridBaseStep + 2),
|
||||
gridSpaceXXL: gridUnit * (gridBaseStep + 5),
|
||||
|
||||
// line
|
||||
lineWidthBold: lineWidth + 1,
|
||||
|
||||
// radius
|
||||
radiusSM: radiusBase / 2,
|
||||
radiusLG: radiusBase * 2,
|
||||
radiusXL: radiusBase * 4,
|
||||
|
||||
// color
|
||||
colorBg2,
|
||||
colorBg3: '#e1e1e1',
|
||||
colorBgBelow,
|
||||
colorBgBelow2,
|
||||
|
||||
colorDefaultOutline: colorBgBelow2,
|
||||
|
||||
colorPrimaryActive: primaryColors[6],
|
||||
colorPrimaryHover: primaryColors[4],
|
||||
colorPrimaryOutline: new TinyColor(colorPrimary).setAlpha(0.2).toRgbString(),
|
||||
colorPrimarySecondary: primaryColors[2],
|
||||
colorPrimaryBorderHover: primaryColors[3],
|
||||
|
||||
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(),
|
||||
|
||||
colorTextBelow: new TinyColor('#000').setAlpha(0.45).toRgbString(),
|
||||
colorTextBelow2: new TinyColor('#000').setAlpha(0.25).toRgbString(),
|
||||
colorTextBelow3: new TinyColor({ h: 0, s: 0, v: 75 }).setAlpha(0.5).toRgbString(),
|
||||
|
||||
// control
|
||||
controlHeightSM: controlHeight * 0.75,
|
||||
controlHeightXS: controlHeight * 0.5,
|
||||
controlHeightLG: controlHeight * 1.25,
|
||||
};
|
||||
}
|
||||
|
||||
const seedToken: SeedToken = {
|
||||
// preset color palettes
|
||||
...defaultPresetColors,
|
||||
|
||||
// Color
|
||||
colorPrimary: '#1890ff',
|
||||
colorSuccess: '#52c41a',
|
||||
colorWarning: '#faad14',
|
||||
colorError: '#ff4d4f',
|
||||
colorInfo: '#1890ff',
|
||||
colorText: new TinyColor('#000').setAlpha(0.85).toRgbString(),
|
||||
colorTextLightSolid: '#fff',
|
||||
|
||||
colorBg: new TinyColor({ h: 0, s: 0, v: 100 }).toHexString(),
|
||||
|
||||
// Font
|
||||
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'`,
|
||||
fontSizeBase: 14,
|
||||
|
||||
// Grid
|
||||
gridUnit: 4,
|
||||
gridBaseStep: 2,
|
||||
|
||||
// Line
|
||||
lineWidth: 1,
|
||||
lineType: 'solid',
|
||||
|
||||
// Motion
|
||||
motionUnit: 0.1,
|
||||
motionBase: 0,
|
||||
motionEaseOutCirc: `cubic-bezier(0.08, 0.82, 0.17, 1)`,
|
||||
motionEaseInOutCirc: `cubic-bezier(0.78, 0.14, 0.15, 0.86)`,
|
||||
motionEaseInOut: `cubic-bezier(0.645, 0.045, 0.355, 1)`,
|
||||
motionEaseOutBack: `cubic-bezier(0.12, 0.4, 0.29, 1.46)`,
|
||||
motionEaseInQuint: `cubic-bezier(0.645, 0.045, 0.355, 1)`,
|
||||
motionEaseOutQuint: `cubic-bezier(0.23, 1, 0.32, 1)`,
|
||||
|
||||
// Radius
|
||||
radiusBase: 2,
|
||||
|
||||
// Size
|
||||
sizeUnit: 4,
|
||||
sizeBaseStep: 4,
|
||||
sizePopupArrow: 8 * Math.sqrt(2),
|
||||
|
||||
// Control Base
|
||||
controlHeight: 32,
|
||||
|
||||
// zIndex
|
||||
zIndexBase: 0,
|
||||
zIndexPopupBase: 1000,
|
||||
|
||||
// Image
|
||||
opacityImage: 1,
|
||||
};
|
||||
|
||||
export default seedToken;
|
||||
9
components/_util/theme/themes/default/colorAlgorithm.ts
Normal file
9
components/_util/theme/themes/default/colorAlgorithm.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
|
||||
export const getAlphaColor = (baseColor: string, alpha: number) =>
|
||||
new TinyColor(baseColor).setAlpha(alpha).toRgbString();
|
||||
|
||||
export const getSolidColor = (baseColor: string, brightness: number) => {
|
||||
const instance = new TinyColor(baseColor);
|
||||
return instance.darken(brightness).toHexString();
|
||||
};
|
||||
@ -1,25 +1,9 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
|
||||
import { generate } from '@ant-design/colors';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import type { ColorPalettes, DerivativeToken, PresetColorType, SeedToken } from '../interface';
|
||||
import { getFontSizes } from './shared';
|
||||
|
||||
const defaultPresetColors: PresetColorType = {
|
||||
blue: '#1890FF',
|
||||
purple: '#722ED1',
|
||||
cyan: '#13C2C2',
|
||||
green: '#52C41A',
|
||||
magenta: '#EB2F96',
|
||||
pink: '#eb2f96',
|
||||
red: '#F5222D',
|
||||
orange: '#FA8C16',
|
||||
yellow: '#FADB14',
|
||||
volcano: '#FA541C',
|
||||
geekblue: '#2F54EB',
|
||||
gold: '#FAAD14',
|
||||
lime: '#A0D911',
|
||||
};
|
||||
import type { ColorPalettes, DerivativeToken, PresetColorType, SeedToken } from '../../interface';
|
||||
import { defaultPresetColors } from '../seed';
|
||||
import { getFontSizes } from '../shared';
|
||||
import { generateBgPalettes, generateTextAlphaPalettes } from './palettes';
|
||||
|
||||
export default function derivative(token: SeedToken): DerivativeToken {
|
||||
const {
|
||||
@ -28,6 +12,7 @@ export default function derivative(token: SeedToken): DerivativeToken {
|
||||
colorWarning,
|
||||
colorError,
|
||||
colorInfo,
|
||||
colorBg,
|
||||
motionUnit,
|
||||
motionBase,
|
||||
fontSizeBase,
|
||||
@ -40,12 +25,6 @@ export default function derivative(token: SeedToken): DerivativeToken {
|
||||
lineWidth,
|
||||
} = 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) => {
|
||||
const colors = generate(token[colorKey]);
|
||||
@ -63,11 +42,16 @@ export default function derivative(token: SeedToken): DerivativeToken {
|
||||
return prev;
|
||||
}, {} as ColorPalettes);
|
||||
|
||||
const fontSizes = getFontSizes(fontSizeBase);
|
||||
const primaryColors = generate(colorPrimary);
|
||||
const successColors = generate(colorSuccess);
|
||||
const warningColors = generate(colorWarning);
|
||||
const errorColors = generate(colorError);
|
||||
const infoColors = generate(colorInfo);
|
||||
const bgColors = generateBgPalettes(colorBg);
|
||||
// FIXME: need seedToken '#000'
|
||||
const textColors = generateTextAlphaPalettes('#000');
|
||||
|
||||
const colorBg2 = new TinyColor({ h: 0, s: 0, v: 98 }).toHexString();
|
||||
const colorBgBelow = new TinyColor({ h: 0, s: 0, v: 98 }).toHexString();
|
||||
const colorBgBelow2 = new TinyColor({ h: 0, s: 0, v: 96 }).toHexString();
|
||||
const fontSizes = getFontSizes(fontSizeBase);
|
||||
|
||||
return {
|
||||
...token,
|
||||
@ -103,13 +87,7 @@ export default function derivative(token: SeedToken): DerivativeToken {
|
||||
radiusLG: radiusBase * 2,
|
||||
radiusXL: radiusBase * 4,
|
||||
|
||||
// color
|
||||
colorBg2,
|
||||
colorBg3: '#e1e1e1',
|
||||
colorBgBelow,
|
||||
colorBgBelow2,
|
||||
|
||||
colorDefaultOutline: colorBgBelow2,
|
||||
colorDefaultOutline: textColors['4'],
|
||||
|
||||
colorPrimaryActive: primaryColors[6],
|
||||
colorPrimaryHover: primaryColors[4],
|
||||
@ -118,35 +96,32 @@ export default function derivative(token: SeedToken): DerivativeToken {
|
||||
colorPrimaryBorderHover: primaryColors[3],
|
||||
|
||||
colorSuccessSecondary: successColors[2],
|
||||
colorBgSuccess: successColors[0],
|
||||
colorSuccessBg: successColors[0],
|
||||
|
||||
colorErrorActive: errorColors[6],
|
||||
colorErrorHover: errorColors[4],
|
||||
colorErrorOutline: new TinyColor(colorError).setAlpha(0.2).toRgbString(),
|
||||
colorErrorSecondary: errorColors[2],
|
||||
colorBgError: errorColors[0],
|
||||
colorErrorBg: errorColors[0],
|
||||
|
||||
colorWarningActive: warningColors[6],
|
||||
colorWarningHover: warningColors[4],
|
||||
colorWarningOutline: new TinyColor(colorWarning).setAlpha(0.2).toRgbString(),
|
||||
colorWarningSecondary: warningColors[2],
|
||||
colorBgWarning: warningColors[0],
|
||||
colorWarningBg: warningColors[0],
|
||||
|
||||
colorInfoSecondary: infoColors[2],
|
||||
colorBgInfo: infoColors[0],
|
||||
colorInfoBg: infoColors[0],
|
||||
|
||||
colorHighlight: errorColors[4],
|
||||
|
||||
// text color
|
||||
colorText2: new TinyColor('#000').setAlpha(0.85).toRgbString(),
|
||||
|
||||
colorTextBelow: new TinyColor('#000').setAlpha(0.45).toRgbString(),
|
||||
colorTextBelow2: new TinyColor('#000').setAlpha(0.25).toRgbString(),
|
||||
colorTextBelow3: new TinyColor({ h: 0, s: 0, v: 75 }).setAlpha(0.5).toRgbString(),
|
||||
|
||||
// control
|
||||
controlHeightSM: controlHeight * 0.75,
|
||||
controlHeightXS: controlHeight * 0.5,
|
||||
controlHeightLG: controlHeight * 1.25,
|
||||
|
||||
// map token
|
||||
bgColors,
|
||||
textColors,
|
||||
};
|
||||
}
|
||||
33
components/_util/theme/themes/default/palettes.ts
Normal file
33
components/_util/theme/themes/default/palettes.ts
Normal file
@ -0,0 +1,33 @@
|
||||
import type { BgPalettes, TextAlphaPalettes } from '../IPalettes';
|
||||
import { getAlphaColor, getSolidColor } from './colorAlgorithm';
|
||||
|
||||
export function generateBgPalettes(bgBaseColor: string): BgPalettes {
|
||||
return {
|
||||
26: getSolidColor(bgBaseColor, 15),
|
||||
'light-2': getSolidColor(bgBaseColor, 2),
|
||||
'light-10': getSolidColor(bgBaseColor, 10),
|
||||
'light-12': getSolidColor(bgBaseColor, 12),
|
||||
19: getSolidColor(bgBaseColor, 6),
|
||||
15: getSolidColor(bgBaseColor, 4),
|
||||
12: getSolidColor(bgBaseColor, 0),
|
||||
8: getSolidColor(bgBaseColor, 0),
|
||||
0: getSolidColor(bgBaseColor, 4),
|
||||
};
|
||||
}
|
||||
|
||||
export function generateTextAlphaPalettes(textBaseColor: string): TextAlphaPalettes {
|
||||
return {
|
||||
85: getAlphaColor(textBaseColor, 0.85),
|
||||
'light-75': getAlphaColor(textBaseColor, 0.75), // 目前只有 Popover 用了
|
||||
75: getAlphaColor(textBaseColor, 0.85), // 目前只有 Color Action 用了
|
||||
65: getAlphaColor(textBaseColor, 0.65), // 目前只有 Segment Label 用了
|
||||
45: getAlphaColor(textBaseColor, 0.45),
|
||||
30: getAlphaColor(textBaseColor, 0.25),
|
||||
25: getAlphaColor(textBaseColor, 0.25),
|
||||
// 从 12 往下基本上就是偏背景和装饰性元素了
|
||||
12: getAlphaColor(textBaseColor, 0.06), // 主要是 Split
|
||||
8: getAlphaColor(textBaseColor, 0.04),
|
||||
4: getAlphaColor(textBaseColor, 0.03),
|
||||
3: getAlphaColor(textBaseColor, 0.02),
|
||||
};
|
||||
}
|
||||
78
components/_util/theme/themes/seed.ts
Normal file
78
components/_util/theme/themes/seed.ts
Normal file
@ -0,0 +1,78 @@
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import type { PresetColorType, SeedToken } from '..';
|
||||
|
||||
export const defaultPresetColors: PresetColorType = {
|
||||
blue: '#1890FF',
|
||||
purple: '#722ED1',
|
||||
cyan: '#13C2C2',
|
||||
green: '#52C41A',
|
||||
magenta: '#EB2F96',
|
||||
pink: '#eb2f96',
|
||||
red: '#F5222D',
|
||||
orange: '#FA8C16',
|
||||
yellow: '#FADB14',
|
||||
volcano: '#FA541C',
|
||||
geekblue: '#2F54EB',
|
||||
gold: '#FAAD14',
|
||||
lime: '#A0D911',
|
||||
};
|
||||
|
||||
const seedToken: SeedToken = {
|
||||
// preset color palettes
|
||||
...defaultPresetColors,
|
||||
|
||||
// Color
|
||||
colorPrimary: '#1890ff',
|
||||
colorSuccess: '#52c41a',
|
||||
colorWarning: '#faad14',
|
||||
colorError: '#ff4d4f',
|
||||
colorInfo: '#1890ff',
|
||||
colorText: new TinyColor('#000').setAlpha(0.85).toRgbString(),
|
||||
colorTextLightSolid: '#fff',
|
||||
|
||||
colorBg: new TinyColor({ h: 0, s: 0, v: 100 }).toHexString(),
|
||||
|
||||
// Font
|
||||
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'`,
|
||||
fontSizeBase: 14,
|
||||
|
||||
// Grid
|
||||
gridUnit: 4,
|
||||
gridBaseStep: 2,
|
||||
|
||||
// Line
|
||||
lineWidth: 1,
|
||||
lineType: 'solid',
|
||||
|
||||
// Motion
|
||||
motionUnit: 0.1,
|
||||
motionBase: 0,
|
||||
motionEaseOutCirc: `cubic-bezier(0.08, 0.82, 0.17, 1)`,
|
||||
motionEaseInOutCirc: `cubic-bezier(0.78, 0.14, 0.15, 0.86)`,
|
||||
motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
|
||||
motionEaseInOut: `cubic-bezier(0.645, 0.045, 0.355, 1)`,
|
||||
motionEaseOutBack: `cubic-bezier(0.12, 0.4, 0.29, 1.46)`,
|
||||
motionEaseInQuint: `cubic-bezier(0.645, 0.045, 0.355, 1)`,
|
||||
motionEaseOutQuint: `cubic-bezier(0.23, 1, 0.32, 1)`,
|
||||
|
||||
// Radius
|
||||
radiusBase: 2,
|
||||
|
||||
// Size
|
||||
sizeUnit: 4,
|
||||
sizeBaseStep: 4,
|
||||
sizePopupArrow: 8 * Math.sqrt(2),
|
||||
|
||||
// Control Base
|
||||
controlHeight: 32,
|
||||
|
||||
// zIndex
|
||||
zIndexBase: 0,
|
||||
zIndexPopupBase: 1000,
|
||||
|
||||
// Image
|
||||
opacityImage: 1,
|
||||
};
|
||||
export default seedToken;
|
||||
@ -18,7 +18,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
...derivative,
|
||||
};
|
||||
|
||||
const { fontSizes, lineHeights } = mergedToken;
|
||||
const { fontSizes, lineHeights, textColors, bgColors } = mergedToken;
|
||||
|
||||
// FIXME: tmp
|
||||
const primaryColors = generate(mergedToken.colorPrimary);
|
||||
@ -40,26 +40,40 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
...mergedToken,
|
||||
|
||||
// Colors
|
||||
colorTextSecondary: mergedToken.colorTextBelow,
|
||||
colorTextDisabled: mergedToken.colorTextBelow2,
|
||||
colorTextPlaceholder: mergedToken.colorTextBelow2,
|
||||
colorTextHeading: mergedToken.colorText,
|
||||
colorText: textColors['85'],
|
||||
// TODO: 只有 Slider 用了，感觉命名有问题
|
||||
colorTextSecondary: textColors['45'],
|
||||
// TODO: 这个 30 估计要改成 25
|
||||
colorTextDisabled: textColors['30'],
|
||||
colorTextPlaceholder: textColors['25'],
|
||||
colorTextHeading: textColors['85'],
|
||||
|
||||
colorBgContainer: mergedToken.colorBgBelow2,
|
||||
colorBgContainerSecondary: mergedToken.colorBg3,
|
||||
colorBgComponent: mergedToken.colorBg,
|
||||
colorBgComponentSecondary: mergedToken.colorBg2,
|
||||
colorBgComponentDisabled: mergedToken.colorBgBelow2,
|
||||
colorBgElevated: mergedToken.colorBg,
|
||||
colorBgComponentTmp: mergedToken.colorBgBelow2,
|
||||
colorBgContainer: bgColors['0'],
|
||||
colorBgContainerSecondary: bgColors['26'],
|
||||
colorBgComponent: bgColors['8'],
|
||||
// TODO：Menu 用了这个 感觉命名有问题
|
||||
// TODO：能不能用透明色？用透明色会造成重叠后变亮的问题，是不是得用实色？
|
||||
colorBgComponentSecondary: textColors['4'],
|
||||
colorBgComponentDisabled: textColors['8'],
|
||||
// 浮窗等组件的背景色 token
|
||||
colorBgElevated: bgColors['12'],
|
||||
// TODO: Slider 和 Progress 需要一个名字
|
||||
colorBgComponentTmp: bgColors['15'],
|
||||
|
||||
colorLink: mergedToken.colorPrimary,
|
||||
colorLinkHover: primaryColors[4],
|
||||
colorLinkActive: primaryColors[6],
|
||||
|
||||
colorAction: mergedToken.colorTextBelow,
|
||||
colorActionHover: mergedToken.colorText,
|
||||
colorActionTmp: mergedToken.colorTextBelow2,
|
||||
// TODO: 确认 Action 的色彩关系
|
||||
colorAction: textColors['45'],
|
||||
colorActionHover: textColors['75'],
|
||||
colorActionTmp: textColors['30'],
|
||||
|
||||
// Split
|
||||
colorBorder: bgColors['26'],
|
||||
// TODO：Secondary 在纯实色背景下的颜色和 Split 是一样的
|
||||
colorBorderSecondary: bgColors['19'],
|
||||
colorSplit: textColors['12'],
|
||||
|
||||
// Font
|
||||
fontSizeSM,
|
||||
@ -84,21 +98,23 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
lineHeightHeading5: lineHeights[2],
|
||||
|
||||
// Control
|
||||
// TODO: 确认下 hover 是用 Alpha 还是实色
|
||||
// 暂时确认下来应该用 alpha
|
||||
controlLineWidth: mergedToken.lineWidth,
|
||||
controlOutlineWidth: mergedToken.lineWidth * 2,
|
||||
controlItemBgHover: mergedToken.colorBgBelow2,
|
||||
// Checkbox size and expand icon size
|
||||
controlInteractiveSize: mergedToken.controlHeight / 2,
|
||||
|
||||
controlItemBgHover: mergedToken.textColors['8'],
|
||||
controlItemBgActive: primaryColors[0],
|
||||
controlItemBgActiveHover: primaryColors[1],
|
||||
controlItemBgActiveDisabled: textColors['25'],
|
||||
controlMaskBg: textColors['45'],
|
||||
|
||||
// 👀👀👀👀👀👀👀👀👀 Not align with Derivative 👀👀👀👀👀👀👀👀👀
|
||||
// FIXME: @arvinxx handle this
|
||||
controlLineType: mergedToken.lineType,
|
||||
controlRadius: mergedToken.radiusBase,
|
||||
colorBorder: new TinyColor({ h: 0, s: 0, v: 85 }).toHexString(),
|
||||
colorSplit: 'rgba(0, 0, 0, 0.06)',
|
||||
controlItemBgActive: primaryColors[0],
|
||||
controlItemBgActiveHover: new TinyColor(primaryColors[0]).darken(2).toRgbString(),
|
||||
controlItemBgActiveDisabled: new TinyColor('#000').tint(90).toRgbString(),
|
||||
fontWeightStrong: 600,
|
||||
|
||||
// 🔥🔥🔥🔥🔥🔥🔥🔥🔥 All TMP Token leaves here 🔥🔥🔥🔥🔥🔥🔥🔥🔥
|
||||
@ -164,9 +180,6 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
|
||||
|
||||
motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
|
||||
|
||||
controlMaskBg: new TinyColor('#000').setAlpha(0.45).toRgbString(),
|
||||
colorBorderSecondary: new TinyColor({ h: 0, s: 0, v: 94 }).toHexString(),
|
||||
|
||||
// FIXME: component box-shadow, should be removed
|
||||
boxShadowPopoverArrow: `3px 3px 7px rgba(0, 0, 0, 0.1)`,
|
||||
boxShadowPopoverArrowBottom: `2px 2px 5px rgba(0, 0, 0, 0.1)`,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import seedToken from '../themes/default';
|
||||
import seedToken from '../themes/seed';
|
||||
|
||||
export const roundedArrow = (width: number, outerRadius: number, bgColor: string): CSSObject => {
|
||||
const cornerHeight = outerRadius * (1 - 1 / Math.sqrt(2));
|
||||
|
||||
@ -129,40 +129,40 @@ export const genTypeStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
|
||||
|
||||
colorSuccess,
|
||||
colorSuccessSecondary,
|
||||
colorBgSuccess,
|
||||
colorSuccessBg,
|
||||
|
||||
colorWarning,
|
||||
colorWarningSecondary,
|
||||
colorBgWarning,
|
||||
colorWarningBg,
|
||||
|
||||
colorError,
|
||||
colorErrorSecondary,
|
||||
colorBgError,
|
||||
colorErrorBg,
|
||||
|
||||
colorInfo,
|
||||
colorInfoSecondary,
|
||||
colorBgInfo,
|
||||
colorInfoBg,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
[componentCls]: {
|
||||
'&-success': genAlertTypeStyle(
|
||||
colorBgSuccess,
|
||||
colorSuccessBg,
|
||||
colorSuccessSecondary,
|
||||
colorSuccess,
|
||||
token,
|
||||
componentCls,
|
||||
),
|
||||
'&-info': genAlertTypeStyle(colorBgInfo, colorInfoSecondary, colorInfo, token, componentCls),
|
||||
'&-info': genAlertTypeStyle(colorInfoBg, colorInfoSecondary, colorInfo, token, componentCls),
|
||||
'&-warning': genAlertTypeStyle(
|
||||
colorBgWarning,
|
||||
colorWarningBg,
|
||||
colorWarningSecondary,
|
||||
colorWarning,
|
||||
token,
|
||||
componentCls,
|
||||
),
|
||||
'&-error': {
|
||||
...genAlertTypeStyle(colorBgError, colorErrorSecondary, colorError, token, componentCls),
|
||||
...genAlertTypeStyle(colorErrorBg, colorErrorSecondary, colorError, token, componentCls),
|
||||
[`${componentCls}-description > pre`]: {
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
|
||||
@ -3,11 +3,7 @@ import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { FullToken, GenerateStyle } from '../../_util/theme';
|
||||
import { genComponentStyleHook, mergeToken, resetComponent } from '../../_util/theme';
|
||||
|
||||
export interface ComponentToken {
|
||||
// FIXME: should be removed
|
||||
groupBorderColor: string;
|
||||
bgColor: string;
|
||||
}
|
||||
export interface ComponentToken {}
|
||||
|
||||
type AvatarToken = FullToken<'Avatar'> & {
|
||||
avatarBg: string;
|
||||
@ -21,6 +17,8 @@ type AvatarToken = FullToken<'Avatar'> & {
|
||||
avatarBorderRadius: number;
|
||||
avatarGroupOverlapping: number;
|
||||
avatarGroupSpace: number;
|
||||
avatarGroupBorderColor: string;
|
||||
avatarBgColor: string;
|
||||
};
|
||||
|
||||
const genBaseStyle: GenerateStyle<AvatarToken> = token => {
|
||||
@ -111,14 +109,14 @@ const genBaseStyle: GenerateStyle<AvatarToken> = token => {
|
||||
};
|
||||
|
||||
const genGroupStyle: GenerateStyle<AvatarToken> = token => {
|
||||
const { componentCls, groupBorderColor, avatarGroupOverlapping, avatarGroupSpace } = token;
|
||||
const { componentCls, avatarGroupBorderColor, avatarGroupOverlapping, avatarGroupSpace } = token;
|
||||
|
||||
return {
|
||||
[`${componentCls}-group`]: {
|
||||
display: 'inline-flex',
|
||||
|
||||
[`${componentCls}`]: {
|
||||
borderColor: groupBorderColor,
|
||||
borderColor: avatarGroupBorderColor,
|
||||
|
||||
[`&:not(:first-child)`]: {
|
||||
marginInlineStart: -avatarGroupOverlapping,
|
||||
@ -134,45 +132,40 @@ const genGroupStyle: GenerateStyle<AvatarToken> = token => {
|
||||
};
|
||||
};
|
||||
|
||||
export default genComponentStyleHook(
|
||||
'Avatar',
|
||||
token => {
|
||||
const {
|
||||
colorTextLightSolid,
|
||||
export default genComponentStyleHook('Avatar', token => {
|
||||
const {
|
||||
colorTextLightSolid,
|
||||
|
||||
controlHeight,
|
||||
controlHeightLG,
|
||||
controlHeightSM,
|
||||
controlHeight,
|
||||
controlHeightLG,
|
||||
controlHeightSM,
|
||||
|
||||
fontSize,
|
||||
fontSizeLG,
|
||||
fontSizeXL,
|
||||
fontSizeHeading3,
|
||||
fontSize,
|
||||
fontSizeLG,
|
||||
fontSizeXL,
|
||||
fontSizeHeading3,
|
||||
|
||||
marginXS,
|
||||
bgColor,
|
||||
} = token;
|
||||
marginXS,
|
||||
textColors,
|
||||
bgColors,
|
||||
} = token;
|
||||
|
||||
const avatarToken = mergeToken<AvatarToken>(token, {
|
||||
avatarBg: bgColor,
|
||||
avatarColor: colorTextLightSolid,
|
||||
const avatarToken = mergeToken<AvatarToken>(token, {
|
||||
avatarBg: textColors['25'],
|
||||
avatarColor: colorTextLightSolid,
|
||||
|
||||
avatarSizeBase: controlHeight,
|
||||
avatarSizeLG: controlHeightLG,
|
||||
avatarSizeSM: controlHeightSM,
|
||||
avatarSizeBase: controlHeight,
|
||||
avatarSizeLG: controlHeightLG,
|
||||
avatarSizeSM: controlHeightSM,
|
||||
|
||||
avatarFontSizeBase: Math.round((fontSizeLG + fontSizeXL) / 2),
|
||||
avatarFontSizeLG: fontSizeHeading3,
|
||||
avatarFontSizeSM: fontSize,
|
||||
avatarBorderRadius: token.radiusBase,
|
||||
avatarGroupOverlapping: marginXS,
|
||||
avatarGroupSpace: marginXS,
|
||||
});
|
||||
avatarFontSizeBase: Math.round((fontSizeLG + fontSizeXL) / 2),
|
||||
avatarFontSizeLG: fontSizeHeading3,
|
||||
avatarFontSizeSM: fontSize,
|
||||
avatarBorderRadius: token.radiusBase,
|
||||
avatarGroupOverlapping: marginXS,
|
||||
avatarGroupSpace: marginXS,
|
||||
avatarGroupBorderColor: bgColors['0'],
|
||||
});
|
||||
|
||||
return [genBaseStyle(avatarToken), genGroupStyle(avatarToken)];
|
||||
},
|
||||
token => ({
|
||||
groupBorderColor: '#fff',
|
||||
bgColor: token.colorTextPlaceholder,
|
||||
}),
|
||||
);
|
||||
return [genBaseStyle(avatarToken), genGroupStyle(avatarToken)];
|
||||
});
|
||||
|
||||
@ -114,7 +114,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
|
||||
textAlign: 'center',
|
||||
background: token.badgeColor,
|
||||
borderRadius: token.badgeHeight / 2,
|
||||
boxShadow: `0 0 0 ${badgeShadowSize}px ${token.colorBgComponent}`,
|
||||
boxShadow: `0 0 0 ${badgeShadowSize}px ${token.badgeShadowColor}`,
|
||||
a: {
|
||||
color: token.badgeTextColor,
|
||||
},
|
||||
@ -141,7 +141,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
|
||||
height: token.badgeDotSize,
|
||||
background: token.badgeColor,
|
||||
borderRadius: '100%',
|
||||
boxShadow: `0 0 0 ${badgeShadowSize}px ${token.colorBgComponent}`,
|
||||
boxShadow: `0 0 0 ${badgeShadowSize}px ${token.badgeShadowColor}`,
|
||||
},
|
||||
[`${componentCls}-dot${numberPrefixCls}`]: {
|
||||
transition: `background ${motionDurationSlow}`,
|
||||
@ -317,7 +317,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Badge', token => {
|
||||
const { fontSize, lineHeight, fontSizeSM, controlLineWidth, marginXS } = token;
|
||||
const { fontSize, lineHeight, fontSizeSM, controlLineWidth, marginXS, bgColors } = token;
|
||||
|
||||
const badgeFontHeight = Math.round(fontSize * lineHeight);
|
||||
const badgeShadowSize = controlLineWidth;
|
||||
@ -341,6 +341,7 @@ export default genComponentStyleHook('Badge', token => {
|
||||
badgeFontWeight,
|
||||
badgeFontSize,
|
||||
badgeColor,
|
||||
badgeShadowColor: bgColors['0'],
|
||||
badgeHeightSm,
|
||||
badgeDotSize,
|
||||
badgeFontSizeSm,
|
||||
|
||||
@ -1,20 +1,19 @@
|
||||
// deps-lint-skip-all
|
||||
import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import type { FullToken, GenerateStyle } from '../../_util/theme';
|
||||
import { genComponentStyleHook, mergeToken } from '../../_util/theme';
|
||||
import genGroupStyle from './group';
|
||||
|
||||
/** Component only token. Which will handle additional calculation of alias token */
|
||||
export interface ComponentToken {
|
||||
export interface ComponentToken {}
|
||||
|
||||
export interface ButtonToken extends FullToken<'Button'> {
|
||||
colorBgTextHover: string;
|
||||
colorBgTextActive: string;
|
||||
// FIXME: should be removed
|
||||
colorOutlineDefault: string;
|
||||
}
|
||||
|
||||
export interface ButtonToken extends FullToken<'Button'> {}
|
||||
|
||||
// ============================== Shared ==============================
|
||||
const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSSObject => {
|
||||
const { componentCls, iconCls } = token;
|
||||
@ -377,37 +376,28 @@ const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = token => {
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook(
|
||||
'Button',
|
||||
token => [
|
||||
export default genComponentStyleHook('Button', token => {
|
||||
const { textColors } = token;
|
||||
|
||||
const buttonToken = mergeToken<ButtonToken>(token, {
|
||||
colorBgTextHover: textColors['3'],
|
||||
colorBgTextActive: textColors['4'],
|
||||
colorOutlineDefault: textColors['8'],
|
||||
});
|
||||
|
||||
return [
|
||||
// Shared
|
||||
genSharedButtonStyle(token),
|
||||
genSharedButtonStyle(buttonToken),
|
||||
|
||||
// Size
|
||||
genSizeSmallButtonStyle(token),
|
||||
genSizeBaseButtonStyle(token),
|
||||
genSizeLargeButtonStyle(token),
|
||||
genSizeSmallButtonStyle(buttonToken),
|
||||
genSizeBaseButtonStyle(buttonToken),
|
||||
genSizeLargeButtonStyle(buttonToken),
|
||||
|
||||
// Group (type, ghost, danger, disabled, loading)
|
||||
genTypeButtonStyle(token),
|
||||
genTypeButtonStyle(buttonToken),
|
||||
|
||||
// Button Group
|
||||
genGroupStyle(token),
|
||||
],
|
||||
token => {
|
||||
const { colorText } = token;
|
||||
const textColor = new TinyColor(colorText);
|
||||
|
||||
return {
|
||||
colorBgTextHover: textColor
|
||||
.clone()
|
||||
.setAlpha(textColor.getAlpha() * 0.02)
|
||||
.toRgbString(),
|
||||
colorBgTextActive: textColor
|
||||
.clone()
|
||||
.setAlpha(textColor.getAlpha() * 0.03)
|
||||
.toRgbString(),
|
||||
colorOutlineDefault: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(),
|
||||
};
|
||||
},
|
||||
);
|
||||
genGroupStyle(buttonToken),
|
||||
];
|
||||
});
|
||||
|
||||
@ -220,7 +220,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
|
||||
|
||||
// Wrapper > Checkbox > inner
|
||||
[`${checkboxCls}-inner`]: {
|
||||
background: token.colorBgContainer,
|
||||
background: token.colorBgComponentDisabled,
|
||||
borderColor: token.colorBorder,
|
||||
|
||||
'&:after': {
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
import { kebabCase } from 'lodash';
|
||||
import canUseDom from 'rc-util/lib/Dom/canUseDom';
|
||||
import React from 'react';
|
||||
import ConfigProvider from '..';
|
||||
import { render } from '../../../tests/utils';
|
||||
import { useToken } from '../../_util/theme';
|
||||
import darkDerivative from '../../_util/theme/themes/dark';
|
||||
import { resetWarned } from '../../_util/warning';
|
||||
|
||||
let mockCanUseDom = true;
|
||||
@ -49,4 +53,19 @@ describe('ConfigProvider.Theme', () => {
|
||||
);
|
||||
errorSpy.mockRestore();
|
||||
});
|
||||
|
||||
it('derivative should work', () => {
|
||||
let tokenRef: any;
|
||||
const Demo = () => {
|
||||
const [, token] = useToken();
|
||||
tokenRef = token;
|
||||
return null;
|
||||
};
|
||||
render(
|
||||
<ConfigProvider theme={{ derivative: darkDerivative }}>
|
||||
<Demo />
|
||||
</ConfigProvider>,
|
||||
);
|
||||
expect(tokenRef?.colorBgComponent).toBe('#141414');
|
||||
});
|
||||
});
|
||||
@ -1,9 +1,8 @@
|
||||
import type { DeepPartial } from 'antd/es/_util/type';
|
||||
import * as React from 'react';
|
||||
import type { RequiredMark } from '../form/Form';
|
||||
import type { Locale } from '../locale-provider';
|
||||
import type { SeedToken } from '../_util/theme';
|
||||
import type { OverrideToken } from '../_util/theme/interface';
|
||||
import type { DerivativeToken, OverrideToken, SeedToken } from '../_util/theme/interface';
|
||||
import type { DeepPartial } from '../_util/type';
|
||||
import type { RenderEmptyHandler } from './defaultRenderEmpty';
|
||||
import type { SizeType } from './SizeContext';
|
||||
|
||||
@ -27,6 +26,7 @@ export type DirectionType = 'ltr' | 'rtl' | undefined;
|
||||
export interface ThemeConfig {
|
||||
token?: Partial<SeedToken>;
|
||||
override?: DeepPartial<OverrideToken>;
|
||||
derivative?: (token: SeedToken) => DerivativeToken;
|
||||
hashed?: boolean;
|
||||
}
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ import LocaleProvider, { ANT_MARK } from '../locale-provider';
|
||||
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
||||
import defaultLocale from '../locale/default';
|
||||
import { DesignTokenContext, useCustomToken, useToken } from '../_util/theme';
|
||||
import defaultSeedToken from '../_util/theme/themes/default';
|
||||
import defaultSeedToken from '../_util/theme/themes/seed';
|
||||
import { useCustomStyle, useStyle } from '../_util/theme/util/useStyle';
|
||||
import type { ConfigConsumerProps, CSPConfig, DirectionType, Theme, ThemeConfig } from './context';
|
||||
import { ConfigConsumer, ConfigContext, defaultIconPrefixCls } from './context';
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
// deps-lint-skip-all
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import type { GlobalToken } from 'antd/es/_util/theme/interface';
|
||||
import type { TokenWithCommonCls } from 'antd/es/_util/theme/util/genComponentStyleHook';
|
||||
import type { InputToken } from '../../input/style';
|
||||
import {
|
||||
genActiveStyle,
|
||||
@ -13,6 +11,8 @@ import {
|
||||
import { slideDownIn, slideDownOut, slideUpIn, slideUpOut } from '../../style/motion';
|
||||
import type { FullToken, GenerateStyle } from '../../_util/theme';
|
||||
import { genComponentStyleHook, mergeToken, resetComponent, roundedArrow } from '../../_util/theme';
|
||||
import type { GlobalToken } from '../../_util/theme/interface';
|
||||
import type { TokenWithCommonCls } from '../../_util/theme/util/genComponentStyleHook';
|
||||
|
||||
export interface ComponentToken {
|
||||
zIndexPopup: number;
|
||||
|
||||
@ -221,7 +221,7 @@ const genImageStyle: GenerateStyle<ImageToken> = (token: ImageToken) => {
|
||||
verticalAlign: 'middle',
|
||||
},
|
||||
[`${componentCls}-img-placeholder`]: {
|
||||
backgroundColor: token.colorBgContainer,
|
||||
backgroundColor: token.colorBgComponentDisabled,
|
||||
backgroundImage:
|
||||
"url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",
|
||||
backgroundRepeat: 'no-repeat',
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
// deps-lint-skip-all
|
||||
import type { TokenWithCommonCls } from 'antd/es/_util/theme/util/genComponentStyleHook';
|
||||
import type React from 'react';
|
||||
import { initFadeMotion, initZoomMotion } from '../../style/motion';
|
||||
import type { AliasToken, FullToken, GenerateStyle } from '../../_util/theme';
|
||||
import { clearFix, genComponentStyleHook, mergeToken, resetComponent } from '../../_util/theme';
|
||||
import type { TokenWithCommonCls } from '../../_util/theme/util/genComponentStyleHook';
|
||||
|
||||
/** Component only token. Which will handle additional calculation of alias token */
|
||||
export interface ComponentToken {
|
||||
|
||||
@ -3,14 +3,13 @@ import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { FullToken, GenerateStyle } from '../../_util/theme';
|
||||
import { genComponentStyleHook, mergeToken, resetComponent } from '../../_util/theme';
|
||||
|
||||
export type ComponentToken = {
|
||||
defaultColor: string;
|
||||
};
|
||||
export type ComponentToken = {};
|
||||
|
||||
interface RateToken extends FullToken<'Rate'> {
|
||||
rateStarColor: string;
|
||||
rateStarSize: number;
|
||||
rateStarHoverScale: CSSObject['transform'];
|
||||
defaultColor: string;
|
||||
}
|
||||
|
||||
const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = token => {
|
||||
@ -123,17 +122,14 @@ const genRateStyle: GenerateStyle<RateToken> = token => {
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook(
|
||||
'Rate',
|
||||
token => {
|
||||
const rateToken = mergeToken<RateToken>(token, {
|
||||
rateStarColor: token['yellow-6'],
|
||||
rateStarSize: token.controlHeightLG * 0.5,
|
||||
rateStarHoverScale: 'scale(1.1)',
|
||||
});
|
||||
return [genRateStyle(rateToken)];
|
||||
},
|
||||
token => ({
|
||||
defaultColor: token.colorSplit,
|
||||
}),
|
||||
);
|
||||
export default genComponentStyleHook('Rate', token => {
|
||||
const { textColors } = token;
|
||||
|
||||
const rateToken = mergeToken<RateToken>(token, {
|
||||
rateStarColor: token['yellow-6'],
|
||||
rateStarSize: token.controlHeightLG * 0.5,
|
||||
rateStarHoverScale: 'scale(1.1)',
|
||||
defaultColor: textColors['12'],
|
||||
});
|
||||
return [genRateStyle(rateToken)];
|
||||
});
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
// deps-lint-skip-all
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import type { FullToken, GenerateStyle } from '../../_util/theme';
|
||||
import { genComponentStyleHook, mergeToken, resetComponent } from '../../_util/theme';
|
||||
|
||||
@ -9,14 +8,14 @@ export interface ComponentToken {
|
||||
bgColor: string;
|
||||
bgColorHover: string;
|
||||
bgColorSelected: string;
|
||||
labelColor: string;
|
||||
labelColorHover: string;
|
||||
}
|
||||
|
||||
interface SegmentedToken extends FullToken<'Segmented'> {
|
||||
segmentedPaddingHorizontal: number;
|
||||
segmentedPaddingHorizontalSM: number;
|
||||
segmentedContainerPadding: number;
|
||||
labelColor: string;
|
||||
labelColorHover: string;
|
||||
}
|
||||
|
||||
// ============================== Mixins ==============================
|
||||
@ -172,20 +171,20 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
|
||||
export default genComponentStyleHook(
|
||||
'Segmented',
|
||||
token => {
|
||||
const { lineWidthBold, controlLineWidth } = token;
|
||||
const { lineWidthBold, controlLineWidth, textColors } = token;
|
||||
|
||||
const segmentedToken = mergeToken<SegmentedToken>(token, {
|
||||
segmentedPaddingHorizontal: token.controlPaddingHorizontal - controlLineWidth,
|
||||
segmentedPaddingHorizontalSM: token.controlPaddingHorizontalSM - controlLineWidth,
|
||||
segmentedContainerPadding: lineWidthBold,
|
||||
labelColor: textColors['65'],
|
||||
labelColorHover: textColors['85'],
|
||||
});
|
||||
return [genSegmentedStyle(segmentedToken)];
|
||||
},
|
||||
{
|
||||
bgColor: new TinyColor('#000').setAlpha(0.04).toRgbString(),
|
||||
bgColorHover: new TinyColor('#000').setAlpha(0.06).toRgbString(),
|
||||
bgColorSelected: '#fff',
|
||||
labelColor: new TinyColor('#000').setAlpha(0.65).toRgbString(),
|
||||
labelColorHover: '#262626',
|
||||
},
|
||||
({ bgColors, textColors }) => ({
|
||||
bgColor: textColors['8'],
|
||||
bgColorHover: textColors['12'],
|
||||
bgColorSelected: bgColors['8'],
|
||||
}),
|
||||
);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import type { CSSObject, CSSInterpolation } from '@ant-design/cssinjs';
|
||||
import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
|
||||
import type { SelectToken } from '.';
|
||||
import { mergeToken, resetIcon } from '../../_util/theme';
|
||||
|
||||
@ -92,7 +92,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
|
||||
marginTop: FIXED_ITEM_MARGIN,
|
||||
marginBottom: FIXED_ITEM_MARGIN,
|
||||
lineHeight: `${selectItemHeight - token.controlLineWidth * 2}px`,
|
||||
background: token.colorBgContainer,
|
||||
background: token.colorBgComponentTmp,
|
||||
border: `${token.controlLineWidth}px solid ${token.colorSplit}`,
|
||||
borderRadius: token.controlRadius,
|
||||
cursor: 'default',
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
// deps-lint-skip-all
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import { Keyframes } from '@ant-design/cssinjs';
|
||||
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import type { FullToken, GenerateStyle } from '../../_util/theme';
|
||||
import { genComponentStyleHook, mergeToken } from '../../_util/theme';
|
||||
|
||||
@ -370,8 +368,12 @@ export default genComponentStyleHook(
|
||||
});
|
||||
return [genBaseStyle(skeletonToken)];
|
||||
},
|
||||
{
|
||||
color: new TinyColor({ r: 190, g: 190, b: 190, a: 0.2 }).toRgbString(),
|
||||
colorGradientEnd: new TinyColor({ r: 129, g: 129, b: 129, a: 0.24 }).toRgbString(),
|
||||
token => {
|
||||
const { textColors } = token;
|
||||
|
||||
return {
|
||||
color: textColors['12'],
|
||||
colorGradientEnd: textColors['25'],
|
||||
};
|
||||
},
|
||||
);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import type { CSSInterpolation } from '@ant-design/cssinjs';
|
||||
import { Keyframes } from '@ant-design/cssinjs';
|
||||
import type { TokenWithCommonCls } from 'antd/es/_util/theme/util/genComponentStyleHook';
|
||||
import type { AliasToken } from '../../_util/theme';
|
||||
import type { TokenWithCommonCls } from '../../_util/theme/util/genComponentStyleHook';
|
||||
import { initMotion } from './motion';
|
||||
|
||||
export const fadeIn = new Keyframes('antFadeIn', {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import type { CSSInterpolation } from '@ant-design/cssinjs';
|
||||
import { Keyframes } from '@ant-design/cssinjs';
|
||||
import type { TokenWithCommonCls } from 'antd/es/_util/theme/util/genComponentStyleHook';
|
||||
import type { AliasToken } from '../../_util/theme';
|
||||
import type { TokenWithCommonCls } from '../../_util/theme/util/genComponentStyleHook';
|
||||
import { initMotion } from './motion';
|
||||
|
||||
export const slideUpIn = new Keyframes('antSlideUpIn', {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import type { CSSInterpolation } from '@ant-design/cssinjs';
|
||||
import { Keyframes } from '@ant-design/cssinjs';
|
||||
import type { TokenWithCommonCls } from 'antd/es/_util/theme/util/genComponentStyleHook';
|
||||
import type { AliasToken } from '../../_util/theme';
|
||||
import type { TokenWithCommonCls } from '../../_util/theme/util/genComponentStyleHook';
|
||||
import { initMotion } from './motion';
|
||||
|
||||
export const zoomIn = new Keyframes('antZoomIn', {
|
||||
|
||||
@ -18,11 +18,7 @@ import genSorterStyle from './sorter';
|
||||
import genStickyStyle from './sticky';
|
||||
import genSummaryStyle from './summary';
|
||||
|
||||
export interface ComponentToken {
|
||||
// FIXME: need to be removed
|
||||
headerHoverBgColor: string;
|
||||
headerSortActiveBgColor: string;
|
||||
}
|
||||
export interface ComponentToken {}
|
||||
|
||||
export interface TableToken extends FullToken<'Table'> {
|
||||
tableFontSize: number;
|
||||
@ -222,112 +218,105 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = token => {
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook(
|
||||
'Table',
|
||||
token => {
|
||||
const {
|
||||
controlItemBgActive,
|
||||
controlItemBgActiveHover,
|
||||
colorTextPlaceholder,
|
||||
colorTextHeading,
|
||||
colorSplit,
|
||||
fontSize,
|
||||
padding,
|
||||
paddingXS,
|
||||
paddingSM,
|
||||
controlHeight,
|
||||
colorBgComponentSecondary,
|
||||
colorAction,
|
||||
colorActionHover,
|
||||
opacityLoading,
|
||||
colorBgComponent,
|
||||
colorBgContainer,
|
||||
radiusBase,
|
||||
headerHoverBgColor,
|
||||
headerSortActiveBgColor,
|
||||
} = token;
|
||||
export default genComponentStyleHook('Table', token => {
|
||||
const {
|
||||
controlItemBgActive,
|
||||
controlItemBgActiveHover,
|
||||
colorTextPlaceholder,
|
||||
colorTextHeading,
|
||||
colorSplit,
|
||||
fontSize,
|
||||
padding,
|
||||
paddingXS,
|
||||
paddingSM,
|
||||
controlHeight,
|
||||
colorBgComponentSecondary,
|
||||
colorAction,
|
||||
colorActionHover,
|
||||
opacityLoading,
|
||||
colorBgComponent,
|
||||
colorBgComponentTmp,
|
||||
radiusBase,
|
||||
bgColors,
|
||||
textColors,
|
||||
} = token;
|
||||
|
||||
const baseColorAction = new TinyColor(colorAction);
|
||||
const baseColorActionHover = new TinyColor(colorActionHover);
|
||||
const baseColorAction = new TinyColor(colorAction);
|
||||
const baseColorActionHover = new TinyColor(colorActionHover);
|
||||
|
||||
const tableSelectedRowBg = controlItemBgActive;
|
||||
const zIndexTableFixed: number = 2;
|
||||
const tableSelectedRowBg = controlItemBgActive;
|
||||
const zIndexTableFixed: number = 2;
|
||||
|
||||
const tableToken = mergeToken<TableToken>(token, {
|
||||
tableFontSize: fontSize,
|
||||
tableBg: colorBgComponent,
|
||||
tableRadius: radiusBase,
|
||||
const tableToken = mergeToken<TableToken>(token, {
|
||||
tableFontSize: fontSize,
|
||||
tableBg: colorBgComponent,
|
||||
tableRadius: radiusBase,
|
||||
|
||||
tablePaddingVertical: padding,
|
||||
tablePaddingHorizontal: padding,
|
||||
tablePaddingVerticalMiddle: paddingSM,
|
||||
tablePaddingHorizontalMiddle: paddingXS,
|
||||
tablePaddingVerticalSmall: paddingXS,
|
||||
tablePaddingHorizontalSmall: paddingXS,
|
||||
tableBorderColor: colorSplit,
|
||||
tableHeaderTextColor: colorTextHeading,
|
||||
tableHeaderBg: colorBgComponentSecondary,
|
||||
tableFooterTextColor: colorTextHeading,
|
||||
tableFooterBg: colorBgComponentSecondary,
|
||||
tableHeaderCellSplitColor: colorSplit,
|
||||
tableHeaderSortBg: headerSortActiveBgColor,
|
||||
tableHeaderSortHoverBg: headerHoverBgColor,
|
||||
tableHeaderIconColor: baseColorAction
|
||||
.clone()
|
||||
.setAlpha(baseColorAction.getAlpha() * opacityLoading)
|
||||
.toRgbString(),
|
||||
tableHeaderIconColorHover: baseColorActionHover
|
||||
.clone()
|
||||
.setAlpha(baseColorActionHover.getAlpha() * opacityLoading)
|
||||
.toRgbString(),
|
||||
tableBodySortBg: colorBgComponentSecondary,
|
||||
tableFixedHeaderSortActiveBg: colorBgContainer,
|
||||
tableHeaderFilterActiveBg: headerHoverBgColor,
|
||||
tableFilterDropdownBg: colorBgComponent,
|
||||
tableRowHoverBg: colorBgComponentSecondary,
|
||||
tableSelectedRowBg,
|
||||
tableSelectedRowHoverBg: controlItemBgActiveHover,
|
||||
zIndexTableFixed,
|
||||
zIndexTableSticky: zIndexTableFixed + 1,
|
||||
tableFontSizeMiddle: fontSize,
|
||||
tableFontSizeSmall: fontSize,
|
||||
tableSelectionColumnWidth: controlHeight,
|
||||
tableExpandIconBg: colorBgComponent,
|
||||
tableExpandedRowBg: colorBgComponentSecondary,
|
||||
tablePaddingVertical: padding,
|
||||
tablePaddingHorizontal: padding,
|
||||
tablePaddingVerticalMiddle: paddingSM,
|
||||
tablePaddingHorizontalMiddle: paddingXS,
|
||||
tablePaddingVerticalSmall: paddingXS,
|
||||
tablePaddingHorizontalSmall: paddingXS,
|
||||
tableBorderColor: colorSplit,
|
||||
tableHeaderTextColor: colorTextHeading,
|
||||
tableHeaderBg: colorBgComponentSecondary,
|
||||
tableFooterTextColor: colorTextHeading,
|
||||
tableFooterBg: colorBgComponentSecondary,
|
||||
tableHeaderCellSplitColor: colorSplit,
|
||||
tableHeaderSortBg: bgColors['15'],
|
||||
tableHeaderSortHoverBg: textColors['12'],
|
||||
tableHeaderIconColor: baseColorAction
|
||||
.clone()
|
||||
.setAlpha(baseColorAction.getAlpha() * opacityLoading)
|
||||
.toRgbString(),
|
||||
tableHeaderIconColorHover: baseColorActionHover
|
||||
.clone()
|
||||
.setAlpha(baseColorActionHover.getAlpha() * opacityLoading)
|
||||
.toRgbString(),
|
||||
tableBodySortBg: colorBgComponentSecondary,
|
||||
tableFixedHeaderSortActiveBg: colorBgComponentTmp,
|
||||
tableHeaderFilterActiveBg: textColors['12'],
|
||||
tableFilterDropdownBg: colorBgComponent,
|
||||
tableRowHoverBg: colorBgComponentSecondary,
|
||||
tableSelectedRowBg,
|
||||
tableSelectedRowHoverBg: controlItemBgActiveHover,
|
||||
zIndexTableFixed,
|
||||
zIndexTableSticky: zIndexTableFixed + 1,
|
||||
tableFontSizeMiddle: fontSize,
|
||||
tableFontSizeSmall: fontSize,
|
||||
tableSelectionColumnWidth: controlHeight,
|
||||
tableExpandIconBg: colorBgComponent,
|
||||
tableExpandedRowBg: colorBgComponentSecondary,
|
||||
|
||||
// Dropdown
|
||||
tableFilterDropdownWidth: 120,
|
||||
tableFilterDropdownHeight: 264,
|
||||
tableFilterDropdownSearchWidth: 140,
|
||||
// Dropdown
|
||||
tableFilterDropdownWidth: 120,
|
||||
tableFilterDropdownHeight: 264,
|
||||
tableFilterDropdownSearchWidth: 140,
|
||||
|
||||
// Virtual Scroll Bar
|
||||
tableScrollThumbSize: 8, // Mac scroll bar size
|
||||
tableScrollThumbBg: colorTextPlaceholder,
|
||||
tableScrollThumbBgHover: colorTextHeading,
|
||||
tableScrollBg: colorSplit,
|
||||
});
|
||||
// Virtual Scroll Bar
|
||||
tableScrollThumbSize: 8, // Mac scroll bar size
|
||||
tableScrollThumbBg: colorTextPlaceholder,
|
||||
tableScrollThumbBgHover: colorTextHeading,
|
||||
tableScrollBg: colorSplit,
|
||||
});
|
||||
|
||||
return [
|
||||
genTableStyle(tableToken),
|
||||
genPaginationStyle(tableToken),
|
||||
genSummaryStyle(tableToken),
|
||||
genSorterStyle(tableToken),
|
||||
genFilterStyle(tableToken),
|
||||
genBorderedStyle(tableToken),
|
||||
genRadiusStyle(tableToken),
|
||||
genExpandStyle(tableToken),
|
||||
genSummaryStyle(tableToken),
|
||||
genEmptyStyle(tableToken),
|
||||
genSelectionStyle(tableToken),
|
||||
genFixedStyle(tableToken),
|
||||
genStickyStyle(tableToken),
|
||||
genEllipsisStyle(tableToken),
|
||||
genSizeStyle(tableToken),
|
||||
genRtlStyle(tableToken),
|
||||
];
|
||||
},
|
||||
{
|
||||
headerHoverBgColor: 'rgba(0, 0, 0, 0.04)',
|
||||
headerSortActiveBgColor: 'rgba(0, 0, 0, 0.04)',
|
||||
},
|
||||
);
|
||||
return [
|
||||
genTableStyle(tableToken),
|
||||
genPaginationStyle(tableToken),
|
||||
genSummaryStyle(tableToken),
|
||||
genSorterStyle(tableToken),
|
||||
genFilterStyle(tableToken),
|
||||
genBorderedStyle(tableToken),
|
||||
genRadiusStyle(tableToken),
|
||||
genExpandStyle(tableToken),
|
||||
genSummaryStyle(tableToken),
|
||||
genEmptyStyle(tableToken),
|
||||
genSelectionStyle(tableToken),
|
||||
genFixedStyle(tableToken),
|
||||
genStickyStyle(tableToken),
|
||||
genEllipsisStyle(tableToken),
|
||||
genSizeStyle(tableToken),
|
||||
genRtlStyle(tableToken),
|
||||
];
|
||||
});
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
// deps-lint-skip-all
|
||||
import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
|
||||
import capitalize from '../../_util/capitalize';
|
||||
import type { PresetColorType, FullToken } from '../../_util/theme';
|
||||
import { resetComponent, PresetColors, genComponentStyleHook, mergeToken } from '../../_util/theme';
|
||||
import type { FullToken, PresetColorType } from '../../_util/theme';
|
||||
import { genComponentStyleHook, mergeToken, PresetColors, resetComponent } from '../../_util/theme';
|
||||
|
||||
interface TagToken extends FullToken<'Tag'> {
|
||||
tagFontSize: number;
|
||||
@ -25,7 +25,7 @@ const genTagStatusStyle = (
|
||||
return {
|
||||
[`${token.componentCls}-${status}`]: {
|
||||
color: token[`color${cssVariableType}`],
|
||||
background: token[`colorBg${capitalizedCssVariableType}`],
|
||||
background: token[`color${capitalizedCssVariableType}Bg`],
|
||||
borderColor: token[`color${capitalizedCssVariableType}Secondary`],
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
// deps-lint-skip-all
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import { initZoomMotion } from '../../style/motion';
|
||||
import type {
|
||||
FullToken,
|
||||
@ -133,9 +132,9 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
|
||||
|
||||
return [genTooltipStyle(TooltipToken), initZoomMotion(token, 'zoom-big-fast')];
|
||||
},
|
||||
({ zIndexPopupBase }) => ({
|
||||
({ zIndexPopupBase, textColors }) => ({
|
||||
zIndexPopup: zIndexPopupBase + 70,
|
||||
colorBgDefault: new TinyColor('#000').setAlpha(0.75).toRgbString(),
|
||||
colorBgDefault: textColors['light-75'],
|
||||
}),
|
||||
);
|
||||
|
||||
|
||||
@ -59,7 +59,7 @@ const genPictureStyle: GenerateStyle<UploadToken> = token => {
|
||||
// Adjust the color of the error icon : https://github.com/ant-design/ant-design/pull/24160
|
||||
[`${itemCls}-thumbnail ${iconCls}`]: {
|
||||
[`svg path[fill='#e6f7ff']`]: {
|
||||
fill: token.colorBgError,
|
||||
fill: token.colorErrorBg,
|
||||
},
|
||||
[`svg path[fill='#1890ff']`]: {
|
||||
fill: token.colorError,
|
||||
|
||||
@ -248,8 +248,8 @@ a {
|
||||
}
|
||||
|
||||
& &-avatar {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
color: #000 !important;
|
||||
background-color: #fff !important;
|
||||
box-shadow: @shadow-2;
|
||||
transition: color 0.3s;
|
||||
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import * as React from 'react';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import { Drawer, Form, Input, Button, InputNumber, Checkbox, Space } from 'antd';
|
||||
import { useIntl } from 'react-intl';
|
||||
import { BugOutlined, EyeOutlined } from '@ant-design/icons';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import { Button, Checkbox, Drawer, Form, Input, InputNumber, Space } from 'antd';
|
||||
import * as React from 'react';
|
||||
import { useState } from 'react';
|
||||
import { useIntl } from 'react-intl';
|
||||
import type { SeedToken } from '../../../../../components/_util/theme';
|
||||
import defaultSeedToken from '../../../../../components/_util/theme/themes/default';
|
||||
import { PresetColors } from '../../../../../components/_util/theme/interface';
|
||||
import Preview from './Preview';
|
||||
import defaultSeedToken from '../../../../../components/_util/theme/themes/seed';
|
||||
import Diff from './Diff';
|
||||
import Preview from './Preview';
|
||||
|
||||
export interface ThemeConfigProps {
|
||||
componentName: string;
|
||||
|
||||
@ -1,23 +1,23 @@
|
||||
import { presetDarkPalettes, presetPalettes } from '@ant-design/colors';
|
||||
import { createCache, StyleProvider } from '@ant-design/cssinjs';
|
||||
import { setTwoToneColor } from '@ant-design/icons';
|
||||
import { ConfigProvider } from 'antd';
|
||||
import zhCN from 'antd/lib/locale/zh_CN';
|
||||
import { browserHistory } from 'bisheng/router';
|
||||
import classNames from 'classnames';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import classNames from 'classnames';
|
||||
import { IntlProvider } from 'react-intl';
|
||||
import { presetPalettes, presetDarkPalettes } from '@ant-design/colors';
|
||||
import themeSwitcher from 'theme-switcher';
|
||||
import { setTwoToneColor } from '@ant-design/icons';
|
||||
import { StyleProvider, createCache } from '@ant-design/cssinjs';
|
||||
import { Helmet, HelmetProvider } from 'react-helmet-async';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import { ConfigProvider } from 'antd';
|
||||
import { browserHistory } from 'bisheng/router';
|
||||
import zhCN from 'antd/lib/locale/zh_CN';
|
||||
import Header from './Header';
|
||||
import SiteContext from './SiteContext';
|
||||
import { IntlProvider } from 'react-intl';
|
||||
import themeSwitcher from 'theme-switcher';
|
||||
import enLocale from '../../en-US';
|
||||
import cnLocale from '../../zh-CN';
|
||||
import * as utils from '../utils';
|
||||
import defaultSeedToken from '../../../../components/_util/theme/themes/default';
|
||||
import Header from './Header';
|
||||
import SiteContext from './SiteContext';
|
||||
|
||||
import defaultSeedToken from '../../../../components/_util/theme/themes/seed';
|
||||
import DynamicTheme from './DynamicTheme';
|
||||
|
||||
if (typeof window !== 'undefined' && navigator.serviceWorker) {
|
||||
@ -44,7 +44,7 @@ if (typeof window !== 'undefined') {
|
||||
window['@ant-design/icons'] = require('@ant-design/icons');
|
||||
|
||||
// Error log statistic
|
||||
window.addEventListener('error', function onError(e) {
|
||||
window.addEventListener('error', e => {
|
||||
// Ignore ResizeObserver error
|
||||
if (e.message === 'ResizeObserver loop limit exceeded') {
|
||||
e.stopPropagation();
|
||||
@ -76,6 +76,7 @@ export default class Layout extends React.Component {
|
||||
static contextType = SiteContext;
|
||||
|
||||
isBeforeComponent = false;
|
||||
|
||||
syncIframeThemeId = null;
|
||||
|
||||
constructor(props) {
|
||||
@ -266,7 +267,6 @@ export default class Layout extends React.Component {
|
||||
/>
|
||||
<title>{title}</title>
|
||||
<link
|
||||
rel="apple-touch-icon-precomposed"
|
||||
sizes="144x144"
|
||||
href="https://gw.alipayobjects.com/zos/antfincdn/UmVnt3t4T0/antd.png"
|
||||
/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user