ant-design/components/_util/theme/themes/dark/index.ts
MadCcc 9f2f9bb57f
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
2022-06-24 11:11:42 +08:00

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,
};
}