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

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