2022-06-21 17:17:19 +08:00
|
|
|
import { generate } from '@ant-design/colors';
|
|
|
|
import { TinyColor } from '@ctrl/tinycolor';
|
2022-06-27 11:54:31 +08:00
|
|
|
import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface';
|
2022-06-24 11:11:42 +08:00
|
|
|
import { defaultPresetColors } from '../seed';
|
2022-06-29 16:15:58 +08:00
|
|
|
import genColorMapToken from '../shared/genColorMapToken';
|
|
|
|
import genCommonMapToken from '../shared/genCommonMapToken';
|
|
|
|
import {
|
|
|
|
generateBgPalettes,
|
|
|
|
generateErrorPalettes,
|
|
|
|
generateInfoPalettes,
|
|
|
|
generatePrimaryPalettes,
|
|
|
|
generateSuccessPalettes,
|
|
|
|
generateTextAlphaPalettes,
|
|
|
|
generateWarningPalettes,
|
|
|
|
} from './palettes';
|
2022-06-21 17:17:19 +08:00
|
|
|
|
2022-06-27 11:54:31 +08:00
|
|
|
export default function derivative(token: SeedToken): MapToken {
|
2022-06-29 21:24:29 +08:00
|
|
|
const { colorPrimary, colorSuccess, colorWarning, colorError, colorInfo, colorBgBase } = token;
|
2022-06-21 17:17:19 +08:00
|
|
|
|
|
|
|
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);
|
|
|
|
|
2022-06-29 16:15:58 +08:00
|
|
|
const primaryColors = generatePrimaryPalettes(colorPrimary);
|
|
|
|
const successColors = generateSuccessPalettes(colorSuccess);
|
|
|
|
const warningColors = generateWarningPalettes(colorWarning);
|
|
|
|
const errorColors = generateErrorPalettes(colorError);
|
|
|
|
const infoColors = generateInfoPalettes(colorInfo);
|
2022-06-29 21:24:29 +08:00
|
|
|
const bgColors = generateBgPalettes(colorBgBase);
|
2022-06-24 11:11:42 +08:00
|
|
|
const textColors = generateTextAlphaPalettes('#000');
|
2022-06-21 17:17:19 +08:00
|
|
|
|
|
|
|
return {
|
|
|
|
...token,
|
|
|
|
...colorPalettes,
|
|
|
|
|
2022-06-29 16:15:58 +08:00
|
|
|
// Colors
|
|
|
|
...genColorMapToken({
|
|
|
|
primaryPalettes: primaryColors,
|
|
|
|
successPalettes: successColors,
|
|
|
|
warningPalettes: warningColors,
|
|
|
|
errorPalettes: errorColors,
|
|
|
|
infoPalettes: infoColors,
|
|
|
|
bgPalettes: bgColors,
|
|
|
|
textAlphaPalettes: textColors,
|
|
|
|
}),
|
2022-06-21 17:17:19 +08:00
|
|
|
colorPrimaryOutline: new TinyColor(colorPrimary).setAlpha(0.2).toRgbString(),
|
|
|
|
colorErrorOutline: new TinyColor(colorError).setAlpha(0.2).toRgbString(),
|
|
|
|
colorWarningOutline: new TinyColor(colorWarning).setAlpha(0.2).toRgbString(),
|
2022-06-28 20:33:01 +08:00
|
|
|
|
2022-06-29 16:15:58 +08:00
|
|
|
...genCommonMapToken(token),
|
2022-06-21 17:17:19 +08:00
|
|
|
};
|
|
|
|
}
|