mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 17:59:57 +08:00
9f2f9bb57f
* 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
126 lines
3.7 KiB
TypeScript
126 lines
3.7 KiB
TypeScript
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,
|
|
};
|
|
}
|