mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 09:26:06 +08:00
refactor: Move design token in (#34624)
* chore: move in * wip: refactor the structure of design token * refactor: merge override * chore: mv in * chore: fix ts * chore: tmp all * chore: comment * chore: comment * chore: use variables * fix: compile error Co-authored-by: arvinxx <arvinx@foxmail.com>
This commit is contained in:
二货机器人
GitHub
parent
fbf9311100
commit
f3f1dbf1b1
@ -1,86 +0,0 @@
|
|||||||
import { TinyColor } from '@ctrl/tinycolor';
|
|
||||||
|
|
||||||
import type { DesignToken, PresetColorType } from '.';
|
|
||||||
|
|
||||||
const presetColors: PresetColorType = {
|
|
||||||
blue: '#1890FF',
|
|
||||||
purple: '#722ED1',
|
|
||||||
cyan: '#13C2C2',
|
|
||||||
green: '#52C41A',
|
|
||||||
magenta: '#EB2F96',
|
|
||||||
pink: '#eb2f96',
|
|
||||||
red: '#F5222D',
|
|
||||||
orange: '#FA8C16',
|
|
||||||
yellow: '#FADB14',
|
|
||||||
volcano: '#FA541C',
|
|
||||||
geekblue: '#2F54EB',
|
|
||||||
gold: '#FAAD14',
|
|
||||||
lime: '#A0D911',
|
|
||||||
};
|
|
||||||
|
|
||||||
const defaultDesignToken: DesignToken = {
|
|
||||||
primaryColor: '#1890ff',
|
|
||||||
successColor: '#52c41a',
|
|
||||||
warningColor: '#faad14',
|
|
||||||
errorColor: '#ff4d4f',
|
|
||||||
infoColor: '#1890ff',
|
|
||||||
|
|
||||||
// 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,
|
|
||||||
|
|
||||||
padding: 16,
|
|
||||||
margin: 16,
|
|
||||||
|
|
||||||
// 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.3,
|
|
||||||
|
|
||||||
zIndexDropdown: 1050,
|
|
||||||
|
|
||||||
// preset color palettes
|
|
||||||
...presetColors,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default defaultDesignToken;
|
|
||||||
479
components/_util/theme/index-bac.tsx
Normal file
479
components/_util/theme/index-bac.tsx
Normal file
@ -0,0 +1,479 @@
|
|||||||
|
// import React from 'react';
|
||||||
|
// import { generate } from '@ant-design/colors';
|
||||||
|
// import { TinyColor } from '@ctrl/tinycolor';
|
||||||
|
// import {
|
||||||
|
// CSSInterpolation,
|
||||||
|
// CSSObject,
|
||||||
|
// Theme,
|
||||||
|
// useCacheToken,
|
||||||
|
// useStyleRegister,
|
||||||
|
// } from '@ant-design/cssinjs';
|
||||||
|
// import defaultDesignToken from './default';
|
||||||
|
// import version from '../../version';
|
||||||
|
// import { resetComponent, resetIcon, clearFix } from './util';
|
||||||
|
// import {
|
||||||
|
// initSlideMotion,
|
||||||
|
// slideUpIn,
|
||||||
|
// slideUpOut,
|
||||||
|
// slideDownIn,
|
||||||
|
// slideDownOut,
|
||||||
|
// slideLeftIn,
|
||||||
|
// slideLeftOut,
|
||||||
|
// slideRightIn,
|
||||||
|
// slideRightOut,
|
||||||
|
// } from './util/slide';
|
||||||
|
|
||||||
|
// export {
|
||||||
|
// resetComponent,
|
||||||
|
// resetIcon,
|
||||||
|
// clearFix,
|
||||||
|
// initSlideMotion,
|
||||||
|
// slideUpIn,
|
||||||
|
// slideUpOut,
|
||||||
|
// slideDownIn,
|
||||||
|
// slideDownOut,
|
||||||
|
// slideLeftIn,
|
||||||
|
// slideLeftOut,
|
||||||
|
// slideRightIn,
|
||||||
|
// slideRightOut,
|
||||||
|
// };
|
||||||
|
|
||||||
|
// export interface PresetColorType {
|
||||||
|
// blue: string;
|
||||||
|
// purple: string;
|
||||||
|
// cyan: string;
|
||||||
|
// green: string;
|
||||||
|
// magenta: string;
|
||||||
|
// pink: string;
|
||||||
|
// red: string;
|
||||||
|
// orange: string;
|
||||||
|
// yellow: string;
|
||||||
|
// volcano: string;
|
||||||
|
// geekblue: string;
|
||||||
|
// lime: string;
|
||||||
|
// gold: string;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// export const PresetColorKeys: ReadonlyArray<keyof PresetColorType> = [
|
||||||
|
// 'blue',
|
||||||
|
// 'purple',
|
||||||
|
// 'cyan',
|
||||||
|
// 'green',
|
||||||
|
// 'magenta',
|
||||||
|
// 'pink',
|
||||||
|
// 'red',
|
||||||
|
// 'orange',
|
||||||
|
// 'yellow',
|
||||||
|
// 'volcano',
|
||||||
|
// 'geekblue',
|
||||||
|
// 'lime',
|
||||||
|
// 'gold',
|
||||||
|
// ];
|
||||||
|
|
||||||
|
// // 🚨🚨🚨🚨🚨 Note: Design Token is freeze. Please connect @zombieJ if need update this 🚨🚨🚨🚨🚨
|
||||||
|
// export interface DesignToken extends PresetColorType {
|
||||||
|
// // Color
|
||||||
|
// colorPrimary: string;
|
||||||
|
// colorSuccess: string;
|
||||||
|
// colorWarning: string;
|
||||||
|
// colorError: string;
|
||||||
|
// colorInfo: string;
|
||||||
|
// colorText: string;
|
||||||
|
// colorTextLightSolid: string;
|
||||||
|
// colorBg: string;
|
||||||
|
|
||||||
|
// // Font
|
||||||
|
// fontFamily: string;
|
||||||
|
// fontSizeBase: number;
|
||||||
|
|
||||||
|
// // Grid
|
||||||
|
// gridUnit: number;
|
||||||
|
// gridStepBase: number;
|
||||||
|
|
||||||
|
// // Line
|
||||||
|
// lineWidth: number;
|
||||||
|
|
||||||
|
// // Motion
|
||||||
|
// motionUnit: number;
|
||||||
|
// motionBaseStep: number;
|
||||||
|
// motionEaseInOutCirc: string;
|
||||||
|
// motionEaseInOut: string;
|
||||||
|
// motionEaseOutBack: string;
|
||||||
|
// motionEaseInQuint: string;
|
||||||
|
// motionEaseOutQuint: string;
|
||||||
|
|
||||||
|
// // Radius
|
||||||
|
// radiusBase: number;
|
||||||
|
|
||||||
|
// // Size
|
||||||
|
// sizeUnit: number;
|
||||||
|
// sizeBaseStep: number;
|
||||||
|
|
||||||
|
// // =============== Legacy: should be remove ===============
|
||||||
|
// primaryColor: string;
|
||||||
|
// successColor: string;
|
||||||
|
// warningColor: string;
|
||||||
|
// errorColor: string;
|
||||||
|
// infoColor: string;
|
||||||
|
|
||||||
|
// lineHeight: number;
|
||||||
|
// borderWidth: number;
|
||||||
|
// borderStyle: string;
|
||||||
|
// borderRadius: number;
|
||||||
|
// borderColor: string;
|
||||||
|
// borderColorSplit: string;
|
||||||
|
|
||||||
|
// easeInOut: string;
|
||||||
|
// easeInOutCirc: string;
|
||||||
|
// easeOutBack: string;
|
||||||
|
// easeInQuint: string;
|
||||||
|
// easeOutQuint: string;
|
||||||
|
|
||||||
|
// outlineWidth: number;
|
||||||
|
// outlineBlurSize: number;
|
||||||
|
|
||||||
|
// fontSize: number;
|
||||||
|
// // fontFamily: string;
|
||||||
|
// textColor: string;
|
||||||
|
// textColorSecondary: string;
|
||||||
|
// textColorDisabled: string;
|
||||||
|
// textColorInverse: string;
|
||||||
|
// placeholderColor: string;
|
||||||
|
|
||||||
|
// disabledColor: string;
|
||||||
|
|
||||||
|
// iconColorHover: string;
|
||||||
|
|
||||||
|
// headingColor: string;
|
||||||
|
|
||||||
|
// itemHoverBackground: string;
|
||||||
|
|
||||||
|
// controlHeight: number;
|
||||||
|
|
||||||
|
// padding: number;
|
||||||
|
// margin: number;
|
||||||
|
|
||||||
|
// background: string;
|
||||||
|
// backgroundLight: string;
|
||||||
|
|
||||||
|
// componentBackground: string;
|
||||||
|
// componentBackgroundDisabled: string;
|
||||||
|
|
||||||
|
// duration: number;
|
||||||
|
|
||||||
|
// zIndexDropdown: number;
|
||||||
|
|
||||||
|
// boxShadow?: string;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// type ColorPaletteKeyIndexes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
||||||
|
|
||||||
|
// export type ColorPalettes = {
|
||||||
|
// [key in `${keyof PresetColorType}-${ColorPaletteKeyIndexes[number]}`]: string;
|
||||||
|
// };
|
||||||
|
|
||||||
|
// export interface DerivativeToken extends ColorPalettes, Omit<DesignToken, 'duration'> {
|
||||||
|
// // =================== Derivative Parts ===================
|
||||||
|
// // Derivative Parts: is generated directly by the algorithm with DesignToken.
|
||||||
|
// colorPrimaryHover: string;
|
||||||
|
// colorPrimaryActive: string;
|
||||||
|
// colorPrimaryFocus: string;
|
||||||
|
// colorErrorHover: string;
|
||||||
|
// colorErrorActive: string;
|
||||||
|
// fontSizeSM: number;
|
||||||
|
// fontSizeLG: number;
|
||||||
|
// sizeSpace: number;
|
||||||
|
// fontSize: number;
|
||||||
|
// colorTextBelow: string;
|
||||||
|
// colorTextBelow2: string;
|
||||||
|
// sizeSpaceXS: number;
|
||||||
|
// motionDurationBase: number;
|
||||||
|
// motionDurationFast: number;
|
||||||
|
// motionDurationSlow: number;
|
||||||
|
// fontHeight: number;
|
||||||
|
// sizeSpaceSM: number;
|
||||||
|
// sizePaddingXXS: number;
|
||||||
|
// gridSpaceSM: number;
|
||||||
|
// gridSpaceBase: number;
|
||||||
|
// motionDurationMd: number;
|
||||||
|
// radiusLG: number;
|
||||||
|
// radiusXL: number;
|
||||||
|
// radiusSM: number;
|
||||||
|
// colorTextAbove: string;
|
||||||
|
// radiusXXL: number;
|
||||||
|
// radiusXXXL: number;
|
||||||
|
// gridSpaceLG: number;
|
||||||
|
// gridSpaceXL: number;
|
||||||
|
// gridSpaceXXL: number;
|
||||||
|
// fontSizeXL: number;
|
||||||
|
// colorTextAbove2: string;
|
||||||
|
// colorBgBelow: string;
|
||||||
|
// colorBgBelow2: string;
|
||||||
|
|
||||||
|
// // ===================== Alias Parts ======================
|
||||||
|
// // Alias Parts: Alias of the derivative parts for more meaningful name.
|
||||||
|
// colorPrimaryBorder: string;
|
||||||
|
// colorLink: string;
|
||||||
|
// colorPrimaryBg: string;
|
||||||
|
// controlHeight: number;
|
||||||
|
// colorBgContainer: string;
|
||||||
|
// colorBgComponent: string;
|
||||||
|
// colorBgComponentDisabled: string;
|
||||||
|
// controlLineType: string;
|
||||||
|
// colorBorder: string;
|
||||||
|
// colorHeading: string;
|
||||||
|
// colorIconHover: string;
|
||||||
|
// colorBgContainerHover: string;
|
||||||
|
// controlHeightSM: number;
|
||||||
|
// controlHeightLG: number;
|
||||||
|
// controlOutlineWidthActive: string;
|
||||||
|
// controlOutlineActiveStyle: string;
|
||||||
|
// controlOutlineActiveColor: string;
|
||||||
|
// colorPlaceholder: string;
|
||||||
|
// colorIcon: string;
|
||||||
|
// colorBgHover: string;
|
||||||
|
// colorSplit: string;
|
||||||
|
// colorTextPrimary: string;
|
||||||
|
// controlRadius: number;
|
||||||
|
// radiusPiece: number;
|
||||||
|
// gridContainerMargin: number;
|
||||||
|
// controlPaddingHorizontal: number;
|
||||||
|
// controlItemBgSelected: number;
|
||||||
|
// sizePaddingHorizontal: number;
|
||||||
|
// sizePaddingHorizontalXS: number;
|
||||||
|
// sizePaddingHorizontalSM: number;
|
||||||
|
// sizePaddingHorizontalXXS: number;
|
||||||
|
// controlPaddingHorizontalSM: number;
|
||||||
|
// controlLineWidth: number;
|
||||||
|
// controlHeightXS: number;
|
||||||
|
// controlItemBgActive: string;
|
||||||
|
// controlItemBgHover: string;
|
||||||
|
// colorTextDarkSolid: string;
|
||||||
|
|
||||||
|
// // =============== Legacy: should be remove ===============
|
||||||
|
// primaryHoverColor: string;
|
||||||
|
// primaryActiveColor: string;
|
||||||
|
// primaryOutlineColor: string;
|
||||||
|
// errorHoverColor: string;
|
||||||
|
// errorActiveColor: string;
|
||||||
|
// errorOutlineColor: string;
|
||||||
|
// warningHoverColor: string;
|
||||||
|
// warningOutlineColor: string;
|
||||||
|
// itemActiveBackground: string;
|
||||||
|
|
||||||
|
// highlightColor: string;
|
||||||
|
|
||||||
|
// linkColor: string;
|
||||||
|
// linkHoverColor: string;
|
||||||
|
// linkActiveColor: string;
|
||||||
|
// linkDecoration: CSSObject['textDecoration'];
|
||||||
|
// linkHoverDecoration: CSSObject['textDecoration'];
|
||||||
|
// linkFocusDecoration: CSSObject['textDecoration'];
|
||||||
|
|
||||||
|
// paddingSM: number;
|
||||||
|
// paddingXS: number;
|
||||||
|
// paddingXXS: number;
|
||||||
|
// paddingLG: number;
|
||||||
|
// marginXS: number;
|
||||||
|
// marginLG: number;
|
||||||
|
// marginXXS: number;
|
||||||
|
|
||||||
|
// duration: string;
|
||||||
|
// durationMid: string;
|
||||||
|
// durationFast: string;
|
||||||
|
|
||||||
|
// heading1Size: number;
|
||||||
|
// heading2Size: number;
|
||||||
|
// heading3Size: number;
|
||||||
|
// heading4Size: number;
|
||||||
|
// heading5Size: number;
|
||||||
|
|
||||||
|
// primaryColors: string[];
|
||||||
|
// errorColors: string[];
|
||||||
|
// warningColors: string[];
|
||||||
|
|
||||||
|
// // TMP
|
||||||
|
// tmpPrimaryColorWeak: string;
|
||||||
|
// tmpPrimaryHoverColorWeak: string;
|
||||||
|
// // Checked background for Checkable Tag
|
||||||
|
// tmpPrimaryColor6: string;
|
||||||
|
// // Active background for Checkable Tag
|
||||||
|
// tmpPrimaryColor7: string;
|
||||||
|
|
||||||
|
// tmpSuccessColorDeprecatedBg: string;
|
||||||
|
// tmpWarningColorDeprecatedBg: string;
|
||||||
|
// tmpErrorColorDeprecatedBg: string;
|
||||||
|
// tmpInfoColorDeprecatedBg: string;
|
||||||
|
|
||||||
|
// tmpSuccessColorDeprecatedBorder: string;
|
||||||
|
// tmpWarningColorDeprecatedBorder: string;
|
||||||
|
// tmpErrorColorDeprecatedBorder: string;
|
||||||
|
// tmpInfoColorDeprecatedBorder: string;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// export { useStyleRegister };
|
||||||
|
|
||||||
|
// // =============================== Derivative ===============================
|
||||||
|
// function derivative(designToken: DesignToken): DerivativeToken {
|
||||||
|
// const { primaryColor, errorColor, warningColor, infoColor, successColor } = designToken;
|
||||||
|
|
||||||
|
// const primaryColors = generate(primaryColor);
|
||||||
|
// const errorColors = generate(errorColor);
|
||||||
|
// const warningColors = generate(warningColor);
|
||||||
|
// const infoColors = generate(infoColor);
|
||||||
|
// const successColors = generate(successColor);
|
||||||
|
|
||||||
|
// const paddingSM = (designToken.padding / 4) * 3;
|
||||||
|
// const paddingXS = designToken.padding * 0.5;
|
||||||
|
|
||||||
|
// const colorPalettes = PresetColorKeys.map((colorKey: keyof PresetColorType) => {
|
||||||
|
// const colors = generate(designToken[colorKey]);
|
||||||
|
|
||||||
|
// const ret = new Array(10).fill(1).reduce((prev, _, i) => {
|
||||||
|
// prev[`${colorKey}-${i + 1}`] = colors[i];
|
||||||
|
// return prev;
|
||||||
|
// }, {}) as ColorPalettes;
|
||||||
|
// return ret;
|
||||||
|
// }).reduce((prev, cur) => {
|
||||||
|
// prev = {
|
||||||
|
// ...prev,
|
||||||
|
// ...cur,
|
||||||
|
// };
|
||||||
|
// return prev;
|
||||||
|
// }, {} as ColorPalettes);
|
||||||
|
|
||||||
|
// return {
|
||||||
|
// // =================== Derivative Parts ===================
|
||||||
|
// // FIXME: @arvinxx fix this
|
||||||
|
|
||||||
|
// // ===================== Alias Parts ======================
|
||||||
|
// // FIXME: @arvinxx fix this
|
||||||
|
|
||||||
|
// // =============== Legacy: should be remove ===============
|
||||||
|
// // FIXME: Need design token
|
||||||
|
// boxShadow: `
|
||||||
|
// 0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
||||||
|
// 0 6px 16px 0 rgba(0, 0, 0, 0.08),
|
||||||
|
// 0 9px 28px 8px rgba(0, 0, 0, 0.05)`,
|
||||||
|
|
||||||
|
// ...designToken,
|
||||||
|
|
||||||
|
// primaryHoverColor: primaryColors[4],
|
||||||
|
// primaryActiveColor: primaryColors[6],
|
||||||
|
// primaryOutlineColor: new TinyColor(primaryColor).setAlpha(0.2).toRgbString(),
|
||||||
|
|
||||||
|
// errorHoverColor: errorColors[4],
|
||||||
|
// errorActiveColor: errorColors[6],
|
||||||
|
// errorOutlineColor: new TinyColor(errorColor).setAlpha(0.2).toRgbString(),
|
||||||
|
|
||||||
|
// warningHoverColor: warningColors[4],
|
||||||
|
// warningOutlineColor: new TinyColor(warningColor).setAlpha(0.2).toRgbString(),
|
||||||
|
|
||||||
|
// highlightColor: errorColors[4], // FIXME: Should not align with error color
|
||||||
|
|
||||||
|
// itemActiveBackground: primaryColors[0],
|
||||||
|
|
||||||
|
// linkColor: primaryColor,
|
||||||
|
// linkHoverColor: primaryColors[4],
|
||||||
|
// linkActiveColor: primaryColors[6],
|
||||||
|
// linkDecoration: 'none',
|
||||||
|
// linkHoverDecoration: 'none',
|
||||||
|
// linkFocusDecoration: 'none',
|
||||||
|
|
||||||
|
// fontSizeSM: designToken.fontSize - 2,
|
||||||
|
// fontSizeLG: designToken.fontSize + 2,
|
||||||
|
// controlHeightXS: designToken.controlHeight / 2,
|
||||||
|
// controlHeightSM: designToken.controlHeight * 0.75,
|
||||||
|
// controlHeightLG: designToken.controlHeight * 1.25,
|
||||||
|
// controlPaddingHorizontal: paddingSM,
|
||||||
|
// controlPaddingHorizontalSM: paddingXS,
|
||||||
|
// paddingSM,
|
||||||
|
// paddingXS,
|
||||||
|
// paddingXXS: designToken.padding * 0.25,
|
||||||
|
// paddingLG: designToken.padding * 1.5,
|
||||||
|
// marginXS: designToken.margin * 0.5,
|
||||||
|
// marginLG: designToken.margin * 1.5,
|
||||||
|
// marginXXS: designToken.margin * 0.25,
|
||||||
|
|
||||||
|
// duration: `${designToken.duration}s`,
|
||||||
|
// durationMid: `${(designToken.duration / 3) * 2}s`,
|
||||||
|
// durationFast: `${designToken.duration / 3}s`,
|
||||||
|
|
||||||
|
// ...colorPalettes,
|
||||||
|
|
||||||
|
// heading1Size: Math.ceil(designToken.fontSize * 2.71),
|
||||||
|
// heading2Size: Math.ceil(designToken.fontSize * 2.14),
|
||||||
|
// heading3Size: Math.ceil(designToken.fontSize * 1.71),
|
||||||
|
// heading4Size: Math.ceil(designToken.fontSize * 1.42),
|
||||||
|
// heading5Size: Math.ceil(designToken.fontSize * 1.14),
|
||||||
|
|
||||||
|
// primaryColors,
|
||||||
|
// errorColors,
|
||||||
|
// warningColors,
|
||||||
|
|
||||||
|
// // TMP
|
||||||
|
// 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],
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // ================================ Context =================================
|
||||||
|
// export const ThemeContext = React.createContext(
|
||||||
|
// new Theme<DesignToken, DerivativeToken>(derivative),
|
||||||
|
// );
|
||||||
|
|
||||||
|
// export const DesignTokenContext = React.createContext<{
|
||||||
|
// token: Partial<DesignToken>;
|
||||||
|
// hashed?: string | boolean;
|
||||||
|
// }>({
|
||||||
|
// token: defaultDesignToken,
|
||||||
|
// });
|
||||||
|
|
||||||
|
// // ================================== Hook ==================================
|
||||||
|
// export function useToken(): [Theme<DesignToken, DerivativeToken>, DerivativeToken, string] {
|
||||||
|
// const { token: rootDesignToken, hashed } = React.useContext(DesignTokenContext);
|
||||||
|
// const theme = React.useContext(ThemeContext);
|
||||||
|
|
||||||
|
// const salt = `${version}-${hashed || ''}`;
|
||||||
|
|
||||||
|
// const [token, hashId] = useCacheToken<DerivativeToken, DesignToken>(
|
||||||
|
// theme,
|
||||||
|
// [defaultDesignToken, rootDesignToken],
|
||||||
|
// {
|
||||||
|
// salt,
|
||||||
|
// },
|
||||||
|
// );
|
||||||
|
// return [theme, token, hashed ? hashId : ''];
|
||||||
|
// }
|
||||||
|
|
||||||
|
// export type UseComponentStyleResult = [(node: React.ReactNode) => React.ReactElement, string];
|
||||||
|
|
||||||
|
// export type GenerateStyle<ComponentToken extends object, ReturnType = CSSInterpolation> = (
|
||||||
|
// token: ComponentToken,
|
||||||
|
// hashId?: string,
|
||||||
|
// ) => ReturnType;
|
||||||
|
|
||||||
|
// // ================================== Util ==================================
|
||||||
|
// export function withPrefix(
|
||||||
|
// style: CSSObject,
|
||||||
|
// prefixCls: string,
|
||||||
|
// additionalClsList: string[] = [],
|
||||||
|
// ): CSSObject {
|
||||||
|
// const fullClsList = [prefixCls, ...additionalClsList].filter(cls => cls).map(cls => `.${cls}`);
|
||||||
|
|
||||||
|
// return {
|
||||||
|
// [fullClsList.join('')]: style,
|
||||||
|
// };
|
||||||
|
// }
|
||||||
@ -1,6 +1,4 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { generate } from '@ant-design/colors';
|
|
||||||
import { TinyColor } from '@ctrl/tinycolor';
|
|
||||||
import {
|
import {
|
||||||
CSSInterpolation,
|
CSSInterpolation,
|
||||||
CSSObject,
|
CSSObject,
|
||||||
@ -8,9 +6,10 @@ import {
|
|||||||
useCacheToken,
|
useCacheToken,
|
||||||
useStyleRegister,
|
useStyleRegister,
|
||||||
} from '@ant-design/cssinjs';
|
} from '@ant-design/cssinjs';
|
||||||
import defaultDesignToken from './default';
|
import defaultSeedToken, { derivative as defaultDerivative } from './themes/default';
|
||||||
import version from '../../version';
|
import version from '../../version';
|
||||||
import { resetComponent, resetIcon, clearFix } from './util';
|
import { resetComponent, resetIcon, clearFix } from './util';
|
||||||
|
import formatToken from './util/alias';
|
||||||
import {
|
import {
|
||||||
initSlideMotion,
|
initSlideMotion,
|
||||||
slideUpIn,
|
slideUpIn,
|
||||||
@ -22,8 +21,17 @@ import {
|
|||||||
slideRightIn,
|
slideRightIn,
|
||||||
slideRightOut,
|
slideRightOut,
|
||||||
} from './util/slide';
|
} from './util/slide';
|
||||||
|
import { PresetColors } from './interface';
|
||||||
|
import type {
|
||||||
|
SeedToken,
|
||||||
|
DerivativeToken,
|
||||||
|
AliasToken,
|
||||||
|
OverrideToken,
|
||||||
|
PresetColorType,
|
||||||
|
} from './interface';
|
||||||
|
|
||||||
export {
|
export {
|
||||||
|
PresetColors,
|
||||||
resetComponent,
|
resetComponent,
|
||||||
resetIcon,
|
resetIcon,
|
||||||
clearFix,
|
clearFix,
|
||||||
@ -36,311 +44,51 @@ export {
|
|||||||
slideLeftOut,
|
slideLeftOut,
|
||||||
slideRightIn,
|
slideRightIn,
|
||||||
slideRightOut,
|
slideRightOut,
|
||||||
|
useStyleRegister,
|
||||||
};
|
};
|
||||||
|
|
||||||
export interface PresetColorType {
|
export type {
|
||||||
blue: string;
|
SeedToken,
|
||||||
purple: string;
|
AliasToken,
|
||||||
cyan: string;
|
PresetColorType,
|
||||||
green: string;
|
// FIXME: Remove this type
|
||||||
magenta: string;
|
AliasToken as DerivativeToken,
|
||||||
pink: string;
|
|
||||||
red: string;
|
|
||||||
orange: string;
|
|
||||||
yellow: string;
|
|
||||||
volcano: string;
|
|
||||||
geekblue: string;
|
|
||||||
lime: string;
|
|
||||||
gold: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const PresetColorKeys: ReadonlyArray<keyof PresetColorType> = [
|
|
||||||
'blue',
|
|
||||||
'purple',
|
|
||||||
'cyan',
|
|
||||||
'green',
|
|
||||||
'magenta',
|
|
||||||
'pink',
|
|
||||||
'red',
|
|
||||||
'orange',
|
|
||||||
'yellow',
|
|
||||||
'volcano',
|
|
||||||
'geekblue',
|
|
||||||
'lime',
|
|
||||||
'gold',
|
|
||||||
];
|
|
||||||
|
|
||||||
export interface DesignToken extends PresetColorType {
|
|
||||||
primaryColor: string;
|
|
||||||
successColor: string;
|
|
||||||
warningColor: string;
|
|
||||||
errorColor: string;
|
|
||||||
infoColor: string;
|
|
||||||
|
|
||||||
lineHeight: number;
|
|
||||||
borderWidth: number;
|
|
||||||
borderStyle: string;
|
|
||||||
borderRadius: number;
|
|
||||||
borderColor: string;
|
|
||||||
borderColorSplit: string;
|
|
||||||
|
|
||||||
easeInOut: string;
|
|
||||||
easeInOutCirc: string;
|
|
||||||
easeOutBack: string;
|
|
||||||
easeInQuint: string;
|
|
||||||
easeOutQuint: string;
|
|
||||||
|
|
||||||
outlineWidth: number;
|
|
||||||
outlineBlurSize: number;
|
|
||||||
|
|
||||||
fontSize: number;
|
|
||||||
fontFamily: string;
|
|
||||||
textColor: string;
|
|
||||||
textColorSecondary: string;
|
|
||||||
textColorDisabled: string;
|
|
||||||
textColorInverse: string;
|
|
||||||
placeholderColor: string;
|
|
||||||
|
|
||||||
disabledColor: string;
|
|
||||||
|
|
||||||
iconColorHover: string;
|
|
||||||
|
|
||||||
headingColor: string;
|
|
||||||
|
|
||||||
itemHoverBackground: string;
|
|
||||||
|
|
||||||
controlHeight: number;
|
|
||||||
|
|
||||||
padding: number;
|
|
||||||
margin: number;
|
|
||||||
|
|
||||||
background: string;
|
|
||||||
backgroundLight: string;
|
|
||||||
|
|
||||||
componentBackground: string;
|
|
||||||
componentBackgroundDisabled: string;
|
|
||||||
|
|
||||||
duration: number;
|
|
||||||
|
|
||||||
zIndexDropdown: number;
|
|
||||||
|
|
||||||
boxShadow?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
type ColorPaletteKeyIndexes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
|
||||||
|
|
||||||
type ColorPalettes = {
|
|
||||||
[key in `${keyof PresetColorType}-${ColorPaletteKeyIndexes[number]}`]: string;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/** This is temporary token definition since final token definition is not ready yet. */
|
|
||||||
export interface DerivativeToken extends ColorPalettes, Omit<DesignToken, 'duration'> {
|
|
||||||
primaryHoverColor: string;
|
|
||||||
primaryActiveColor: string;
|
|
||||||
primaryOutlineColor: string;
|
|
||||||
errorHoverColor: string;
|
|
||||||
errorActiveColor: string;
|
|
||||||
errorOutlineColor: string;
|
|
||||||
warningHoverColor: string;
|
|
||||||
warningOutlineColor: string;
|
|
||||||
itemActiveBackground: string;
|
|
||||||
|
|
||||||
highlightColor: string;
|
|
||||||
|
|
||||||
linkColor: string;
|
|
||||||
linkHoverColor: string;
|
|
||||||
linkActiveColor: string;
|
|
||||||
linkDecoration: CSSObject['textDecoration'];
|
|
||||||
linkHoverDecoration: CSSObject['textDecoration'];
|
|
||||||
linkFocusDecoration: CSSObject['textDecoration'];
|
|
||||||
|
|
||||||
fontSizeSM: number;
|
|
||||||
fontSizeLG: number;
|
|
||||||
/** @private Only Used for control inside component like Multiple Select inner selection item */
|
|
||||||
controlHeightXS: number;
|
|
||||||
controlHeightSM: number;
|
|
||||||
controlHeightLG: number;
|
|
||||||
controlPaddingHorizontal: number;
|
|
||||||
controlPaddingHorizontalSM: number;
|
|
||||||
paddingSM: number;
|
|
||||||
paddingXS: number;
|
|
||||||
paddingXXS: number;
|
|
||||||
paddingLG: number;
|
|
||||||
marginXS: number;
|
|
||||||
marginLG: number;
|
|
||||||
marginXXS: number;
|
|
||||||
|
|
||||||
duration: string;
|
|
||||||
durationMid: string;
|
|
||||||
durationFast: string;
|
|
||||||
|
|
||||||
heading1Size: number;
|
|
||||||
heading2Size: number;
|
|
||||||
heading3Size: number;
|
|
||||||
heading4Size: number;
|
|
||||||
heading5Size: number;
|
|
||||||
|
|
||||||
primaryColors: string[];
|
|
||||||
errorColors: string[];
|
|
||||||
warningColors: string[];
|
|
||||||
|
|
||||||
// TMP
|
|
||||||
tmpPrimaryColorWeak: string;
|
|
||||||
tmpPrimaryHoverColorWeak: string;
|
|
||||||
// Checked background for Checkable Tag
|
|
||||||
tmpPrimaryColor6: string;
|
|
||||||
// Active background for Checkable Tag
|
|
||||||
tmpPrimaryColor7: string;
|
|
||||||
|
|
||||||
tmpSuccessColorDeprecatedBg: string;
|
|
||||||
tmpWarningColorDeprecatedBg: string;
|
|
||||||
tmpErrorColorDeprecatedBg: string;
|
|
||||||
tmpInfoColorDeprecatedBg: string;
|
|
||||||
|
|
||||||
tmpSuccessColorDeprecatedBorder: string;
|
|
||||||
tmpWarningColorDeprecatedBorder: string;
|
|
||||||
tmpErrorColorDeprecatedBorder: string;
|
|
||||||
tmpInfoColorDeprecatedBorder: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export { useStyleRegister };
|
|
||||||
|
|
||||||
// =============================== Derivative ===============================
|
|
||||||
function derivative(designToken: DesignToken): DerivativeToken {
|
|
||||||
const { primaryColor, errorColor, warningColor, infoColor, successColor } = designToken;
|
|
||||||
|
|
||||||
const primaryColors = generate(primaryColor);
|
|
||||||
const errorColors = generate(errorColor);
|
|
||||||
const warningColors = generate(warningColor);
|
|
||||||
const infoColors = generate(infoColor);
|
|
||||||
const successColors = generate(successColor);
|
|
||||||
|
|
||||||
const paddingSM = (designToken.padding / 4) * 3;
|
|
||||||
const paddingXS = designToken.padding * 0.5;
|
|
||||||
|
|
||||||
const colorPalettes = PresetColorKeys.map((colorKey: keyof PresetColorType) => {
|
|
||||||
const colors = generate(designToken[colorKey]);
|
|
||||||
|
|
||||||
const ret = new Array(10).fill(1).reduce((prev, _, i) => {
|
|
||||||
prev[`${colorKey}-${i + 1}`] = colors[i];
|
|
||||||
return prev;
|
|
||||||
}, {}) as ColorPalettes;
|
|
||||||
return ret;
|
|
||||||
}).reduce((prev, cur) => {
|
|
||||||
prev = {
|
|
||||||
...prev,
|
|
||||||
...cur,
|
|
||||||
};
|
|
||||||
return prev;
|
|
||||||
}, {} as ColorPalettes);
|
|
||||||
|
|
||||||
return {
|
|
||||||
// FIXME: Need design token
|
|
||||||
boxShadow: `
|
|
||||||
0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
|
||||||
0 6px 16px 0 rgba(0, 0, 0, 0.08),
|
|
||||||
0 9px 28px 8px rgba(0, 0, 0, 0.05)`,
|
|
||||||
|
|
||||||
...designToken,
|
|
||||||
|
|
||||||
primaryHoverColor: primaryColors[4],
|
|
||||||
primaryActiveColor: primaryColors[6],
|
|
||||||
primaryOutlineColor: new TinyColor(primaryColor).setAlpha(0.2).toRgbString(),
|
|
||||||
|
|
||||||
errorHoverColor: errorColors[4],
|
|
||||||
errorActiveColor: errorColors[6],
|
|
||||||
errorOutlineColor: new TinyColor(errorColor).setAlpha(0.2).toRgbString(),
|
|
||||||
|
|
||||||
warningHoverColor: warningColors[4],
|
|
||||||
warningOutlineColor: new TinyColor(warningColor).setAlpha(0.2).toRgbString(),
|
|
||||||
|
|
||||||
highlightColor: errorColors[5], // FIXME: Should not align with error color
|
|
||||||
// FIXME: fix2 badge-color
|
|
||||||
|
|
||||||
itemActiveBackground: primaryColors[0],
|
|
||||||
|
|
||||||
linkColor: primaryColor,
|
|
||||||
linkHoverColor: primaryColors[4],
|
|
||||||
linkActiveColor: primaryColors[6],
|
|
||||||
linkDecoration: 'none',
|
|
||||||
linkHoverDecoration: 'none',
|
|
||||||
linkFocusDecoration: 'none',
|
|
||||||
|
|
||||||
fontSizeSM: designToken.fontSize - 2,
|
|
||||||
fontSizeLG: designToken.fontSize + 2,
|
|
||||||
controlHeightXS: designToken.controlHeight / 2,
|
|
||||||
controlHeightSM: designToken.controlHeight * 0.75,
|
|
||||||
controlHeightLG: designToken.controlHeight * 1.25,
|
|
||||||
controlPaddingHorizontal: paddingSM,
|
|
||||||
controlPaddingHorizontalSM: paddingXS,
|
|
||||||
paddingSM,
|
|
||||||
paddingXS,
|
|
||||||
paddingXXS: designToken.padding * 0.25,
|
|
||||||
paddingLG: designToken.padding * 1.5,
|
|
||||||
marginXS: designToken.margin * 0.5,
|
|
||||||
marginLG: designToken.margin * 1.5,
|
|
||||||
marginXXS: designToken.margin * 0.25,
|
|
||||||
|
|
||||||
duration: `${designToken.duration}s`,
|
|
||||||
durationMid: `${(designToken.duration / 3) * 2}s`,
|
|
||||||
durationFast: `${designToken.duration / 3}s`,
|
|
||||||
|
|
||||||
...colorPalettes,
|
|
||||||
|
|
||||||
heading1Size: Math.ceil(designToken.fontSize * 2.71),
|
|
||||||
heading2Size: Math.ceil(designToken.fontSize * 2.14),
|
|
||||||
heading3Size: Math.ceil(designToken.fontSize * 1.71),
|
|
||||||
heading4Size: Math.ceil(designToken.fontSize * 1.42),
|
|
||||||
heading5Size: Math.ceil(designToken.fontSize * 1.14),
|
|
||||||
|
|
||||||
primaryColors,
|
|
||||||
errorColors,
|
|
||||||
warningColors,
|
|
||||||
|
|
||||||
// TMP
|
|
||||||
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],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// ================================ Context =================================
|
// ================================ Context =================================
|
||||||
export const ThemeContext = React.createContext(
|
const defaultTheme = new Theme(defaultDerivative);
|
||||||
new Theme<DesignToken, DerivativeToken>(derivative),
|
|
||||||
);
|
|
||||||
|
|
||||||
export const DesignTokenContext = React.createContext<{
|
export const DesignTokenContext = React.createContext<{
|
||||||
token: Partial<DesignToken>;
|
token: Partial<SeedToken>;
|
||||||
|
theme?: Theme<SeedToken, DerivativeToken>;
|
||||||
|
override?: OverrideToken;
|
||||||
hashed?: string | boolean;
|
hashed?: string | boolean;
|
||||||
}>({
|
}>({
|
||||||
token: defaultDesignToken,
|
token: defaultSeedToken,
|
||||||
|
theme: defaultTheme,
|
||||||
});
|
});
|
||||||
|
|
||||||
// ================================== Hook ==================================
|
// ================================== Hook ==================================
|
||||||
export function useToken(): [Theme<DesignToken, DerivativeToken>, DerivativeToken, string] {
|
export function useToken(): [Theme<SeedToken, DerivativeToken>, AliasToken, string] {
|
||||||
const { token: rootDesignToken, hashed } = React.useContext(DesignTokenContext);
|
const {
|
||||||
const theme = React.useContext(ThemeContext);
|
token: rootDesignToken,
|
||||||
|
theme = defaultTheme,
|
||||||
|
override,
|
||||||
|
hashed,
|
||||||
|
} = React.useContext(DesignTokenContext);
|
||||||
|
|
||||||
const salt = `${version}-${hashed || ''}`;
|
const salt = `${version}-${hashed || ''}`;
|
||||||
|
|
||||||
const [token, hashId] = useCacheToken<DerivativeToken, DesignToken>(
|
const [token, hashId] = useCacheToken<AliasToken, SeedToken>(
|
||||||
theme,
|
theme,
|
||||||
[defaultDesignToken, rootDesignToken],
|
[defaultSeedToken, rootDesignToken],
|
||||||
{
|
{
|
||||||
salt,
|
salt,
|
||||||
|
override,
|
||||||
|
formatToken,
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
return [theme, token, hashed ? hashId : ''];
|
return [theme, token, hashed ? hashId : ''];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
256
components/_util/theme/interface.ts
Normal file
256
components/_util/theme/interface.ts
Normal file
@ -0,0 +1,256 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
export const PresetColors = [
|
||||||
|
'blue',
|
||||||
|
'purple',
|
||||||
|
'cyan',
|
||||||
|
'green',
|
||||||
|
'magenta',
|
||||||
|
'pink',
|
||||||
|
'red',
|
||||||
|
'orange',
|
||||||
|
'yellow',
|
||||||
|
'volcano',
|
||||||
|
'geekblue',
|
||||||
|
'lime',
|
||||||
|
'gold',
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
type PresetColorKey = typeof PresetColors[number];
|
||||||
|
|
||||||
|
export type PresetColorType = Record<PresetColorKey, string>;
|
||||||
|
|
||||||
|
type ColorPaletteKeyIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
|
||||||
|
|
||||||
|
export type ColorPalettes = {
|
||||||
|
[key in `${keyof PresetColorType}-${ColorPaletteKeyIndex}`]: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export interface OverrideToken {
|
||||||
|
derivative: Partial<DerivativeToken & AliasToken>;
|
||||||
|
[componentName: string]: object; // FIXME: tmp of component token
|
||||||
|
}
|
||||||
|
|
||||||
|
// ======================================================================
|
||||||
|
// == Seed Token ==
|
||||||
|
// ======================================================================
|
||||||
|
|
||||||
|
export interface SeedToken extends PresetColorType {
|
||||||
|
// Color
|
||||||
|
colorPrimary: string;
|
||||||
|
colorSuccess: string;
|
||||||
|
colorWarning: string;
|
||||||
|
colorError: string;
|
||||||
|
colorInfo: string;
|
||||||
|
colorText: string;
|
||||||
|
colorTextLightSolid: string;
|
||||||
|
colorBg: string;
|
||||||
|
|
||||||
|
// Font
|
||||||
|
fontFamily: string;
|
||||||
|
fontSizeBase: number;
|
||||||
|
|
||||||
|
// Grid
|
||||||
|
gridUnit: number;
|
||||||
|
gridBaseStep: number;
|
||||||
|
|
||||||
|
// Line
|
||||||
|
lineWidth: number;
|
||||||
|
|
||||||
|
// Motion
|
||||||
|
motionUnit: number;
|
||||||
|
motionBaseStep: number;
|
||||||
|
motionEaseInOutCirc: string;
|
||||||
|
motionEaseInOut: string;
|
||||||
|
motionEaseOutBack: string;
|
||||||
|
motionEaseInQuint: string;
|
||||||
|
motionEaseOutQuint: string;
|
||||||
|
|
||||||
|
// Radius
|
||||||
|
radiusBase: number;
|
||||||
|
|
||||||
|
// Size
|
||||||
|
sizeUnit: number;
|
||||||
|
sizeBaseStep: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ======================================================================
|
||||||
|
// == Derivative Token ==
|
||||||
|
// ======================================================================
|
||||||
|
|
||||||
|
export interface DerivativeToken extends SeedToken, ColorPalettes {
|
||||||
|
// Color
|
||||||
|
colorPrimaryHover: string;
|
||||||
|
colorPrimaryActive: string;
|
||||||
|
colorWarningHover: string;
|
||||||
|
colorWarningActive: string;
|
||||||
|
colorErrorHover: string;
|
||||||
|
colorErrorActive: string;
|
||||||
|
|
||||||
|
colorText2: string;
|
||||||
|
colorTextBelow: string;
|
||||||
|
colorTextBelow2: string;
|
||||||
|
colorTextBelow3: string;
|
||||||
|
|
||||||
|
colorBgBelow: string;
|
||||||
|
colorBgBelow2: string;
|
||||||
|
|
||||||
|
// Font
|
||||||
|
fontSizeSM: number;
|
||||||
|
fontSizeLG: number;
|
||||||
|
fontSize: number;
|
||||||
|
fontSizeXL: number;
|
||||||
|
|
||||||
|
// Size
|
||||||
|
sizeSpace: number;
|
||||||
|
sizeSpaceXS: number;
|
||||||
|
sizeSpaceXXS: number;
|
||||||
|
sizeSpaceSM: number;
|
||||||
|
|
||||||
|
// Grid
|
||||||
|
gridSpaceSM: number;
|
||||||
|
gridSpaceBase: number;
|
||||||
|
gridSpaceLG: number;
|
||||||
|
gridSpaceXL: number;
|
||||||
|
gridSpaceXXL: number;
|
||||||
|
|
||||||
|
// Motion
|
||||||
|
motionDurationBase: string;
|
||||||
|
motionDurationMd: string;
|
||||||
|
motionDurationFast: string;
|
||||||
|
motionDurationSlow: string;
|
||||||
|
fontHeight: number;
|
||||||
|
|
||||||
|
// Radius
|
||||||
|
radiusSM: number;
|
||||||
|
radiusLG: number;
|
||||||
|
radiusXL: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ======================================================================
|
||||||
|
// == Alias Token ==
|
||||||
|
// ======================================================================
|
||||||
|
// FIXME: DerivativeToken should part pick
|
||||||
|
export interface AliasToken extends DerivativeToken {
|
||||||
|
// =============== Legacy: should be remove ===============
|
||||||
|
primaryColor: string;
|
||||||
|
successColor: string;
|
||||||
|
warningColor: string;
|
||||||
|
errorColor: string;
|
||||||
|
infoColor: string;
|
||||||
|
|
||||||
|
lineHeight: number;
|
||||||
|
borderWidth: number;
|
||||||
|
borderStyle: string;
|
||||||
|
borderRadius: number;
|
||||||
|
borderColor: string;
|
||||||
|
borderColorSplit: string;
|
||||||
|
|
||||||
|
easeInOut: string;
|
||||||
|
easeInOutCirc: string;
|
||||||
|
easeOutBack: string;
|
||||||
|
easeInQuint: string;
|
||||||
|
easeOutQuint: string;
|
||||||
|
|
||||||
|
outlineWidth: number;
|
||||||
|
outlineBlurSize: number;
|
||||||
|
|
||||||
|
fontSize: number;
|
||||||
|
fontFamily: string;
|
||||||
|
textColor: string;
|
||||||
|
textColorSecondary: string;
|
||||||
|
textColorDisabled: string;
|
||||||
|
textColorInverse: string;
|
||||||
|
placeholderColor: string;
|
||||||
|
|
||||||
|
disabledColor: string;
|
||||||
|
|
||||||
|
iconColorHover: string;
|
||||||
|
|
||||||
|
headingColor: string;
|
||||||
|
|
||||||
|
itemHoverBackground: string;
|
||||||
|
|
||||||
|
controlHeight: number;
|
||||||
|
|
||||||
|
padding: number;
|
||||||
|
margin: number;
|
||||||
|
|
||||||
|
background: string;
|
||||||
|
backgroundLight: string;
|
||||||
|
|
||||||
|
componentBackground: string;
|
||||||
|
componentBackgroundDisabled: string;
|
||||||
|
|
||||||
|
zIndexDropdown: number;
|
||||||
|
|
||||||
|
boxShadow?: string;
|
||||||
|
|
||||||
|
// =============== Legacy: should be remove ===============
|
||||||
|
primaryHoverColor: string;
|
||||||
|
primaryActiveColor: string;
|
||||||
|
primaryOutlineColor: string;
|
||||||
|
errorHoverColor: string;
|
||||||
|
errorActiveColor: string;
|
||||||
|
errorOutlineColor: string;
|
||||||
|
warningHoverColor: string;
|
||||||
|
warningOutlineColor: string;
|
||||||
|
itemActiveBackground: string;
|
||||||
|
|
||||||
|
highlightColor: string;
|
||||||
|
|
||||||
|
linkColor: string;
|
||||||
|
linkHoverColor: string;
|
||||||
|
linkActiveColor: string;
|
||||||
|
linkDecoration: React.CSSProperties['textDecoration'];
|
||||||
|
linkHoverDecoration: React.CSSProperties['textDecoration'];
|
||||||
|
linkFocusDecoration: React.CSSProperties['textDecoration'];
|
||||||
|
|
||||||
|
fontSizeSM: number;
|
||||||
|
fontSizeLG: number;
|
||||||
|
/** @private Only Used for control inside component like Multiple Select inner selection item */
|
||||||
|
controlHeightXS: number;
|
||||||
|
controlHeightSM: number;
|
||||||
|
controlHeightLG: number;
|
||||||
|
controlPaddingHorizontal: number;
|
||||||
|
controlPaddingHorizontalSM: number;
|
||||||
|
paddingSM: number;
|
||||||
|
paddingXS: number;
|
||||||
|
paddingXXS: number;
|
||||||
|
paddingLG: number;
|
||||||
|
marginXS: number;
|
||||||
|
marginLG: number;
|
||||||
|
marginXXS: number;
|
||||||
|
|
||||||
|
duration: string;
|
||||||
|
durationMid: string;
|
||||||
|
durationFast: string;
|
||||||
|
|
||||||
|
heading1Size: number;
|
||||||
|
heading2Size: number;
|
||||||
|
heading3Size: number;
|
||||||
|
heading4Size: number;
|
||||||
|
heading5Size: number;
|
||||||
|
|
||||||
|
primaryColors: string[];
|
||||||
|
errorColors: string[];
|
||||||
|
warningColors: string[];
|
||||||
|
|
||||||
|
// TMP
|
||||||
|
tmpPrimaryColorWeak: string;
|
||||||
|
tmpPrimaryHoverColorWeak: string;
|
||||||
|
// Checked background for Checkable Tag
|
||||||
|
tmpPrimaryColor6: string;
|
||||||
|
// Active background for Checkable Tag
|
||||||
|
tmpPrimaryColor7: string;
|
||||||
|
|
||||||
|
tmpSuccessColorDeprecatedBg: string;
|
||||||
|
tmpWarningColorDeprecatedBg: string;
|
||||||
|
tmpErrorColorDeprecatedBg: string;
|
||||||
|
tmpInfoColorDeprecatedBg: string;
|
||||||
|
|
||||||
|
tmpSuccessColorDeprecatedBorder: string;
|
||||||
|
tmpWarningColorDeprecatedBorder: string;
|
||||||
|
tmpErrorColorDeprecatedBorder: string;
|
||||||
|
tmpInfoColorDeprecatedBorder: string;
|
||||||
|
}
|
||||||
162
components/_util/theme/themes/default.ts
Normal file
162
components/_util/theme/themes/default.ts
Normal file
@ -0,0 +1,162 @@
|
|||||||
|
/* eslint-disable import/prefer-default-export */
|
||||||
|
|
||||||
|
import { generate } from '@ant-design/colors';
|
||||||
|
import { TinyColor } from '@ctrl/tinycolor';
|
||||||
|
import type { PresetColorType, SeedToken, DerivativeToken, ColorPalettes } from '../interface';
|
||||||
|
|
||||||
|
const defaultPresetColors: PresetColorType = {
|
||||||
|
blue: '#1890FF',
|
||||||
|
purple: '#722ED1',
|
||||||
|
cyan: '#13C2C2',
|
||||||
|
green: '#52C41A',
|
||||||
|
magenta: '#EB2F96',
|
||||||
|
pink: '#eb2f96',
|
||||||
|
red: '#F5222D',
|
||||||
|
orange: '#FA8C16',
|
||||||
|
yellow: '#FADB14',
|
||||||
|
volcano: '#FA541C',
|
||||||
|
geekblue: '#2F54EB',
|
||||||
|
gold: '#FAAD14',
|
||||||
|
lime: '#A0D911',
|
||||||
|
};
|
||||||
|
|
||||||
|
export function derivative(token: SeedToken): DerivativeToken {
|
||||||
|
const {
|
||||||
|
colorPrimary,
|
||||||
|
colorWarning,
|
||||||
|
colorError,
|
||||||
|
motionUnit,
|
||||||
|
motionBaseStep,
|
||||||
|
fontSizeBase,
|
||||||
|
sizeUnit,
|
||||||
|
sizeBaseStep,
|
||||||
|
gridUnit,
|
||||||
|
gridBaseStep,
|
||||||
|
radiusBase,
|
||||||
|
} = token;
|
||||||
|
|
||||||
|
const primaryColors = generate(colorPrimary);
|
||||||
|
const warningColors = generate(colorWarning);
|
||||||
|
const errorColors = generate(colorError);
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
return {
|
||||||
|
...token,
|
||||||
|
...colorPalettes,
|
||||||
|
|
||||||
|
// motion
|
||||||
|
motionDurationBase: `${motionUnit * motionBaseStep}s`,
|
||||||
|
motionDurationMd: `${motionUnit * (motionBaseStep - 1)}s`,
|
||||||
|
motionDurationFast: `${motionUnit * (motionBaseStep - 2)}s`,
|
||||||
|
motionDurationSlow: `${motionUnit * (motionBaseStep + 1)}s`,
|
||||||
|
|
||||||
|
// font
|
||||||
|
fontSize: fontSizeBase,
|
||||||
|
fontSizeSM: fontSizeBase - 2,
|
||||||
|
fontSizeLG: fontSizeBase + 2,
|
||||||
|
fontSizeXL: fontSizeBase + 4,
|
||||||
|
|
||||||
|
// 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),
|
||||||
|
|
||||||
|
// radius
|
||||||
|
radiusSM: radiusBase / 2,
|
||||||
|
radiusLG: radiusBase * 2,
|
||||||
|
radiusXL: radiusBase * 4,
|
||||||
|
|
||||||
|
// color //
|
||||||
|
|
||||||
|
colorBgBelow: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(),
|
||||||
|
colorBgBelow2: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(),
|
||||||
|
|
||||||
|
colorErrorActive: errorColors[6],
|
||||||
|
colorErrorHover: errorColors[4],
|
||||||
|
colorPrimaryActive: primaryColors[6],
|
||||||
|
colorPrimaryHover: primaryColors[4],
|
||||||
|
colorWarningActive: warningColors[6],
|
||||||
|
colorWarningHover: warningColors[4],
|
||||||
|
|
||||||
|
// text color
|
||||||
|
colorText2: new TinyColor('#000').setAlpha(0.85).toRgbString(),
|
||||||
|
|
||||||
|
colorTextBelow: new TinyColor('#000').setAlpha(0.45).toRgbString(),
|
||||||
|
colorTextBelow2: new TinyColor('#000').setAlpha(0.25).toRgbString(),
|
||||||
|
colorTextBelow3: new TinyColor({ h: 0, s: 0, v: 75 }).setAlpha(0.5).toRgbString(),
|
||||||
|
|
||||||
|
// FIXME: should be currentFontSize + 8
|
||||||
|
fontHeight: fontSizeBase + 8,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const seedToken: SeedToken = {
|
||||||
|
// preset color palettes
|
||||||
|
...defaultPresetColors,
|
||||||
|
|
||||||
|
// Color
|
||||||
|
colorPrimary: '#1890ff',
|
||||||
|
colorSuccess: '#52c41a',
|
||||||
|
colorWarning: '#faad14',
|
||||||
|
colorError: '#ff4d4f',
|
||||||
|
colorInfo: '#1890ff',
|
||||||
|
colorText: new TinyColor('#000').setAlpha(0.85).toRgbString(),
|
||||||
|
colorTextLightSolid: '#fff',
|
||||||
|
|
||||||
|
colorBg: new TinyColor({ h: 0, s: 0, v: 100 }).toHexString(),
|
||||||
|
|
||||||
|
// Font
|
||||||
|
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'`,
|
||||||
|
fontSizeBase: 14,
|
||||||
|
|
||||||
|
// Grid
|
||||||
|
gridUnit: 4,
|
||||||
|
gridBaseStep: 2,
|
||||||
|
|
||||||
|
// Line
|
||||||
|
lineWidth: 1,
|
||||||
|
|
||||||
|
// Motion
|
||||||
|
motionUnit: 0.1,
|
||||||
|
motionBaseStep: 3,
|
||||||
|
motionEaseInOutCirc: `cubic-bezier(0.78, 0.14, 0.15, 0.86)`,
|
||||||
|
motionEaseInOut: `cubic-bezier(0.645, 0.045, 0.355, 1)`,
|
||||||
|
motionEaseOutBack: `cubic-bezier(0.12, 0.4, 0.29, 1.46)`,
|
||||||
|
motionEaseInQuint: `cubic-bezier(0.645, 0.045, 0.355, 1)`,
|
||||||
|
motionEaseOutQuint: `cubic-bezier(0.23, 1, 0.32, 1)`,
|
||||||
|
|
||||||
|
// Radius
|
||||||
|
radiusBase: 2,
|
||||||
|
|
||||||
|
// Size
|
||||||
|
sizeUnit: 4,
|
||||||
|
sizeBaseStep: 4,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default seedToken;
|
||||||
161
components/_util/theme/util/alias.ts
Normal file
161
components/_util/theme/util/alias.ts
Normal file
@ -0,0 +1,161 @@
|
|||||||
|
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;
|
||||||
|
}
|
||||||
@ -6,7 +6,7 @@ import {
|
|||||||
resetComponent,
|
resetComponent,
|
||||||
UseComponentStyleResult,
|
UseComponentStyleResult,
|
||||||
GenerateStyle,
|
GenerateStyle,
|
||||||
PresetColorKeys,
|
PresetColors,
|
||||||
PresetColorType,
|
PresetColorType,
|
||||||
} from '../../_util/theme';
|
} from '../../_util/theme';
|
||||||
import type { DerivativeToken } from '../../_util/theme';
|
import type { DerivativeToken } from '../../_util/theme';
|
||||||
@ -68,19 +68,16 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
|
|||||||
const ribbonWrapperPrefixCls = `${antPrefix}-ribbon-wrapper`;
|
const ribbonWrapperPrefixCls = `${antPrefix}-ribbon-wrapper`;
|
||||||
|
|
||||||
// FIXME preset color 后面可能要统一重构
|
// FIXME preset color 后面可能要统一重构
|
||||||
const statusPreset = PresetColorKeys.reduce(
|
const statusPreset = PresetColors.reduce((prev: CSSObject, colorKey: keyof PresetColorType) => {
|
||||||
(prev: CSSObject, colorKey: keyof PresetColorType) => {
|
const darkColor = token[`${colorKey}-6`];
|
||||||
const darkColor = token[`${colorKey}-6`];
|
return {
|
||||||
return {
|
...prev,
|
||||||
...prev,
|
[`.${badgePrefixCls}-status-${colorKey}`]: {
|
||||||
[`.${badgePrefixCls}-status-${colorKey}`]: {
|
background: darkColor,
|
||||||
background: darkColor,
|
},
|
||||||
},
|
};
|
||||||
};
|
}, {} as CSSObject);
|
||||||
},
|
const statusRibbonPreset = PresetColors.reduce(
|
||||||
{} as CSSObject,
|
|
||||||
);
|
|
||||||
const statusRibbonPreset = PresetColorKeys.reduce(
|
|
||||||
(prev: CSSObject, colorKey: keyof PresetColorType) => {
|
(prev: CSSObject, colorKey: keyof PresetColorType) => {
|
||||||
const darkColor = token[`${colorKey}-6`];
|
const darkColor = token[`${colorKey}-6`];
|
||||||
return {
|
return {
|
||||||
|
|||||||
@ -62,9 +62,7 @@ const BreadcrumbItem: BreadcrumbItemInterface = ({
|
|||||||
return (
|
return (
|
||||||
<li>
|
<li>
|
||||||
{link}
|
{link}
|
||||||
{separator && (
|
{separator && <span className={`${prefixCls}-separator`}>{separator}</span>}
|
||||||
<span className={`${prefixCls}-separator`}>{separator}</span>
|
|
||||||
)}
|
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,12 +3,12 @@ import { mount, render } from 'enzyme';
|
|||||||
import Breadcrumb from '../index';
|
import Breadcrumb from '../index';
|
||||||
import mountTest from '../../../tests/shared/mountTest';
|
import mountTest from '../../../tests/shared/mountTest';
|
||||||
import rtlTest from '../../../tests/shared/rtlTest';
|
import rtlTest from '../../../tests/shared/rtlTest';
|
||||||
import accessibilityTest from "../../../tests/shared/accessibilityTest";
|
import accessibilityTest from '../../../tests/shared/accessibilityTest';
|
||||||
|
|
||||||
describe('Breadcrumb', () => {
|
describe('Breadcrumb', () => {
|
||||||
mountTest(Breadcrumb);
|
mountTest(Breadcrumb);
|
||||||
rtlTest(Breadcrumb);
|
rtlTest(Breadcrumb);
|
||||||
accessibilityTest(Breadcrumb)
|
accessibilityTest(Breadcrumb);
|
||||||
|
|
||||||
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||||
|
|
||||||
|
|||||||
@ -15,7 +15,7 @@ describe('ConfigProvider.DynamicTheme', () => {
|
|||||||
<ConfigProvider
|
<ConfigProvider
|
||||||
theme={{
|
theme={{
|
||||||
token: {
|
token: {
|
||||||
primaryColor: '#f00',
|
colorPrimary: '#f00',
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|||||||
@ -21,8 +21,8 @@ import notification from '../notification';
|
|||||||
import { RequiredMark } from '../form/Form';
|
import { RequiredMark } from '../form/Form';
|
||||||
import { registerTheme } from './cssVariables';
|
import { registerTheme } from './cssVariables';
|
||||||
import defaultLocale from '../locale/default';
|
import defaultLocale from '../locale/default';
|
||||||
import { DesignToken, DesignTokenContext } from '../_util/theme';
|
import { SeedToken, DesignTokenContext } from '../_util/theme';
|
||||||
import defaultThemeToken from '../_util/theme/default';
|
import defaultSeedToken from '../_util/theme/themes/default';
|
||||||
|
|
||||||
export {
|
export {
|
||||||
RenderEmptyHandler,
|
RenderEmptyHandler,
|
||||||
@ -84,7 +84,7 @@ export interface ConfigProviderProps {
|
|||||||
virtual?: boolean;
|
virtual?: boolean;
|
||||||
dropdownMatchSelectWidth?: boolean;
|
dropdownMatchSelectWidth?: boolean;
|
||||||
theme?: {
|
theme?: {
|
||||||
token?: Partial<DesignToken>;
|
token?: Partial<SeedToken>;
|
||||||
hashed?: boolean;
|
hashed?: boolean;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@ -257,10 +257,11 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = props => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// ================================ Dynamic theme ================================
|
// ================================ Dynamic theme ================================
|
||||||
|
// FIXME: Multiple theme support for pass Theme & override
|
||||||
const memoTheme = React.useMemo(
|
const memoTheme = React.useMemo(
|
||||||
() => ({
|
() => ({
|
||||||
token: {
|
token: {
|
||||||
...defaultThemeToken,
|
...defaultSeedToken,
|
||||||
...theme?.token,
|
...theme?.token,
|
||||||
},
|
},
|
||||||
hashed: theme?.hashed,
|
hashed: theme?.hashed,
|
||||||
|
|||||||
@ -8,7 +8,7 @@ import {
|
|||||||
useToken,
|
useToken,
|
||||||
resetComponent,
|
resetComponent,
|
||||||
UseComponentStyleResult,
|
UseComponentStyleResult,
|
||||||
PresetColorKeys,
|
PresetColors,
|
||||||
} from '../../_util/theme';
|
} from '../../_util/theme';
|
||||||
|
|
||||||
interface TagToken extends DerivativeToken {
|
interface TagToken extends DerivativeToken {
|
||||||
@ -40,7 +40,7 @@ const genTagStatusStyle = (
|
|||||||
|
|
||||||
// FIXME: special preset colors
|
// FIXME: special preset colors
|
||||||
const genTagColorStyle = (prefixCls: string, token: TagToken): CSSInterpolation =>
|
const genTagColorStyle = (prefixCls: string, token: TagToken): CSSInterpolation =>
|
||||||
PresetColorKeys.reduce((prev: CSSObject, colorKey: keyof PresetColorType) => {
|
PresetColors.reduce((prev: CSSObject, colorKey: keyof PresetColorType) => {
|
||||||
const lightColor = token[`${colorKey}-1`];
|
const lightColor = token[`${colorKey}-1`];
|
||||||
const lightBorderColor = token[`${colorKey}-3`];
|
const lightBorderColor = token[`${colorKey}-3`];
|
||||||
const darkColor = token[`${colorKey}-6`];
|
const darkColor = token[`${colorKey}-6`];
|
||||||
|
|||||||
@ -113,7 +113,7 @@
|
|||||||
],
|
],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ant-design/colors": "^6.0.0",
|
"@ant-design/colors": "^6.0.0",
|
||||||
"@ant-design/cssinjs": "~0.0.0-alpha.17",
|
"@ant-design/cssinjs": "~0.0.0-alpha.20",
|
||||||
"@ant-design/icons": "^4.7.0",
|
"@ant-design/icons": "^4.7.0",
|
||||||
"@ant-design/react-slick": "~0.28.1",
|
"@ant-design/react-slick": "~0.28.1",
|
||||||
"@babel/runtime": "^7.12.5",
|
"@babel/runtime": "^7.12.5",
|
||||||
|
|||||||
@ -3,14 +3,14 @@ import { TinyColor } from '@ctrl/tinycolor';
|
|||||||
import { Drawer, Form, Input, Button, InputNumber, Checkbox, Space } from 'antd';
|
import { Drawer, Form, Input, Button, InputNumber, Checkbox, Space } from 'antd';
|
||||||
import { useIntl } from 'react-intl';
|
import { useIntl } from 'react-intl';
|
||||||
import { BugOutlined, EyeOutlined } from '@ant-design/icons';
|
import { BugOutlined, EyeOutlined } from '@ant-design/icons';
|
||||||
import { DesignToken } from '../../../../../components/_util/theme';
|
import { SeedToken } from '../../../../../components/_util/theme';
|
||||||
import defaultTheme from '../../../../../components/_util/theme/default';
|
import defaultSeedToken from '../../../../../components/_util/theme/themes/default';
|
||||||
import Preview from './Preview';
|
import Preview from './Preview';
|
||||||
|
|
||||||
export interface ThemeConfigProps {
|
export interface ThemeConfigProps {
|
||||||
componentName: string;
|
componentName: string;
|
||||||
defaultToken: DesignToken;
|
defaultToken: SeedToken;
|
||||||
onChangeTheme: (theme: DesignToken) => void;
|
onChangeTheme: (theme: SeedToken) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default ({ onChangeTheme, defaultToken, componentName }: ThemeConfigProps) => {
|
export default ({ onChangeTheme, defaultToken, componentName }: ThemeConfigProps) => {
|
||||||
@ -19,9 +19,9 @@ export default ({ onChangeTheme, defaultToken, componentName }: ThemeConfigProps
|
|||||||
const [previewVisible, setPreviewVisible] = React.useState(false);
|
const [previewVisible, setPreviewVisible] = React.useState(false);
|
||||||
const [form] = Form.useForm();
|
const [form] = Form.useForm();
|
||||||
|
|
||||||
const keys = Object.keys(defaultTheme);
|
const keys = Object.keys(defaultSeedToken);
|
||||||
|
|
||||||
const onFinish = (nextToken: DesignToken) => {
|
const onFinish = (nextToken: SeedToken) => {
|
||||||
onChangeTheme(nextToken);
|
onChangeTheme(nextToken);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -15,7 +15,7 @@ import SiteContext from './SiteContext';
|
|||||||
import enLocale from '../../en-US';
|
import enLocale from '../../en-US';
|
||||||
import cnLocale from '../../zh-CN';
|
import cnLocale from '../../zh-CN';
|
||||||
import * as utils from '../utils';
|
import * as utils from '../utils';
|
||||||
import defaultDesignToken from '../../../../components/_util/theme/default';
|
import defaultSeedToken from '../../../../components/_util/theme/themes/default';
|
||||||
|
|
||||||
import DynamicTheme from './DynamicTheme';
|
import DynamicTheme from './DynamicTheme';
|
||||||
|
|
||||||
@ -82,7 +82,7 @@ export default class Layout extends React.Component {
|
|||||||
setTheme: this.setTheme,
|
setTheme: this.setTheme,
|
||||||
direction: 'ltr',
|
direction: 'ltr',
|
||||||
setIframeTheme: this.setIframeTheme,
|
setIframeTheme: this.setIframeTheme,
|
||||||
designToken: defaultDesignToken,
|
designToken: defaultSeedToken,
|
||||||
hashedStyle: true,
|
hashedStyle: true,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user