mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-14 08:09:13 +08:00
162 lines
5.4 KiB
TypeScript
162 lines
5.4 KiB
TypeScript
|
import { generate } from '@ant-design/colors';
|
||
|
import { TinyColor } from '@ctrl/tinycolor';
|
||
|
import type { AliasToken, DerivativeToken, OverrideToken } from '../interface';
|
||
|
|
||
|
/** Raw merge of `@ant-design/cssinjs` token. Which need additional process */
|
||
|
type RawMergedToken = DerivativeToken & OverrideToken;
|
||
|
|
||
|
/**
|
||
|
* Seed (designer) > Derivative (designer) > Alias (developer).
|
||
|
*
|
||
|
* Merge seed & derivative & override token and generate alias token for developer.
|
||
|
*/
|
||
|
export default function formatToken(derivativeToken: RawMergedToken): AliasToken {
|
||
|
const { derivative, ...restToken } = derivativeToken;
|
||
|
|
||
|
const mergedToken = {
|
||
|
...restToken,
|
||
|
...derivative,
|
||
|
};
|
||
|
|
||
|
// FIXME: tmp
|
||
|
const primaryColors = generate(mergedToken.colorPrimary);
|
||
|
const infoColors = generate(mergedToken.colorInfo);
|
||
|
const successColors = generate(mergedToken.colorSuccess);
|
||
|
const warningColors = generate(mergedToken.colorWarning);
|
||
|
const errorColors = generate(mergedToken.colorError);
|
||
|
|
||
|
// Generate alias token
|
||
|
const aliasToken: AliasToken = {
|
||
|
...mergedToken,
|
||
|
|
||
|
// Colors
|
||
|
primaryHoverColor: mergedToken.colorPrimaryHover,
|
||
|
primaryActiveColor: mergedToken.colorPrimaryActive,
|
||
|
errorHoverColor: mergedToken.colorErrorHover,
|
||
|
errorActiveColor: mergedToken.colorErrorActive,
|
||
|
warningHoverColor: mergedToken.colorWarningHover,
|
||
|
|
||
|
// 🔥🔥🔥🔥🔥🔥🔥🔥🔥 All TMP Token leaves here 🔥🔥🔥🔥🔥🔥🔥🔥🔥
|
||
|
// FIXME: Handle this when derivative is ready
|
||
|
primaryColors,
|
||
|
warningColors,
|
||
|
errorColors,
|
||
|
|
||
|
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],
|
||
|
|
||
|
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,
|
||
|
|
||
|
itemActiveBackground: primaryColors[0],
|
||
|
|
||
|
highlightColor: errorColors[5], // FIXME: Should not align with error color
|
||
|
// FIXME: fix2 badge-color
|
||
|
|
||
|
linkColor: mergedToken.colorPrimary,
|
||
|
linkHoverColor: primaryColors[4],
|
||
|
linkActiveColor: primaryColors[6],
|
||
|
linkDecoration: 'none',
|
||
|
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',
|
||
|
placeholderColor: new TinyColor({ h: 0, s: 0, v: 75 }).setAlpha(0.5).toRgbString(),
|
||
|
|
||
|
disabledColor: new TinyColor('#000').setAlpha(0.25).toRgbString(),
|
||
|
|
||
|
headingColor: new TinyColor('#000').setAlpha(0.85).toRgbString(),
|
||
|
|
||
|
iconColorHover: new TinyColor('#000').setAlpha(0.75).toRgbString(),
|
||
|
|
||
|
itemHoverBackground: '#f5f5f5',
|
||
|
|
||
|
controlHeight: 32,
|
||
|
controlHeightSM: 24,
|
||
|
controlHeightXS: 16,
|
||
|
controlHeightLG: 40,
|
||
|
controlPaddingHorizontal: 16,
|
||
|
controlPaddingHorizontalSM: 12,
|
||
|
|
||
|
padding: 16,
|
||
|
margin: 16,
|
||
|
|
||
|
paddingXXS: 2,
|
||
|
paddingXS: 4,
|
||
|
paddingSM: 8,
|
||
|
paddingLG: 32,
|
||
|
|
||
|
marginXXS: 2,
|
||
|
marginXS: 4,
|
||
|
// marginSM: 8,
|
||
|
marginLG: 32,
|
||
|
|
||
|
// Default grey background color
|
||
|
background: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(),
|
||
|
|
||
|
// background of header and selected item
|
||
|
backgroundLight: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(),
|
||
|
|
||
|
componentBackground: '#fff',
|
||
|
componentBackgroundDisabled: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(),
|
||
|
|
||
|
duration: '0.3s',
|
||
|
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,
|
||
|
};
|
||
|
|
||
|
return aliasToken;
|
||
|
}
|