ant-design/components/_util/theme/util/alias.ts

162 lines
5.4 KiB
TypeScript
Raw Normal View History

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