2022-02-18 14:17:32 +08:00
|
|
|
import { TinyColor } from '@ctrl/tinycolor';
|
|
|
|
import type { DesignToken } from '.';
|
|
|
|
|
|
|
|
const defaultDesignToken: DesignToken = {
|
|
|
|
primaryColor: '#1890ff',
|
2022-03-04 19:09:55 +08:00
|
|
|
successColor: '#52c41a',
|
|
|
|
warningColor: '#faad14',
|
2022-02-18 14:17:32 +08:00
|
|
|
errorColor: '#ff4d4f',
|
2022-03-04 19:09:55 +08:00
|
|
|
infoColor: '#1890ff',
|
2022-02-18 14:17:32 +08:00
|
|
|
|
|
|
|
// 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(),
|
2022-03-08 10:29:00 +08:00
|
|
|
borderColorSplit: new TinyColor({ h: 0, s: 0, v: 94 }).toHexString(),
|
2022-02-18 14:17:32 +08:00
|
|
|
|
|
|
|
easeInOut: `cubic-bezier(0.645, 0.045, 0.355, 1)`,
|
2022-03-04 19:09:55 +08:00
|
|
|
easeInOutCirc: `cubic-bezier(0.78, 0.14, 0.15, 0.86)`,
|
2022-03-01 21:12:00 +08:00
|
|
|
easeOutBack: `cubic-bezier(0.12, 0.4, 0.29, 1.46)`,
|
2022-03-08 10:29:00 +08:00
|
|
|
easeInQuint: `cubic-bezier(0.755, 0.05, 0.855, 0.06)`,
|
|
|
|
easeOutQuint: `cubic-bezier(0.23, 1, 0.32, 1)`,
|
|
|
|
|
|
|
|
outlineWidth: 2,
|
|
|
|
outlineBlurSize: 0,
|
2022-02-18 14:17:32 +08:00
|
|
|
|
|
|
|
fontSize: 14,
|
2022-03-08 10:29:00 +08:00
|
|
|
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'`,
|
2022-02-18 14:17:32 +08:00
|
|
|
textColor: new TinyColor('#000').setAlpha(0.85).toRgbString(),
|
2022-03-04 19:09:55 +08:00
|
|
|
textColorSecondary: new TinyColor('#000').setAlpha(0.45).toRgbString(),
|
2022-02-18 14:17:32 +08:00
|
|
|
textColorDisabled: new TinyColor('#000').setAlpha(0.25).toRgbString(),
|
2022-03-03 14:55:19 +08:00
|
|
|
textColorInverse: '#fff',
|
2022-03-08 10:29:00 +08:00
|
|
|
placeholderColor: new TinyColor({ h: 0, s: 0, v: 75 }).setAlpha(0.5).toRgbString(),
|
2022-02-18 14:17:32 +08:00
|
|
|
|
2022-03-04 19:09:55 +08:00
|
|
|
headingColor: new TinyColor('#000').setAlpha(0.85).toRgbString(),
|
|
|
|
|
|
|
|
iconColorHover: new TinyColor('#000').setAlpha(0.75).toRgbString(),
|
|
|
|
|
2022-03-02 20:32:25 +08:00
|
|
|
itemHoverBackground: '#f5f5f5',
|
|
|
|
|
2022-03-08 10:29:00 +08:00
|
|
|
controlHeight: 32,
|
2022-02-18 14:17:32 +08:00
|
|
|
|
|
|
|
padding: 16,
|
|
|
|
margin: 16,
|
|
|
|
|
2022-03-07 14:20:10 +08:00
|
|
|
// Default grey background color
|
2022-03-01 21:12:00 +08:00
|
|
|
background: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(),
|
2022-03-07 14:20:10 +08:00
|
|
|
|
|
|
|
// background of header and selected item
|
|
|
|
backgroundLight: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(),
|
|
|
|
|
2022-02-18 14:17:32 +08:00
|
|
|
componentBackground: '#fff',
|
|
|
|
componentBackgroundDisabled: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(),
|
|
|
|
|
2022-03-01 21:12:00 +08:00
|
|
|
duration: 0.3,
|
2022-03-08 10:29:00 +08:00
|
|
|
|
|
|
|
zIndexDropdown: 1050,
|
2022-02-18 14:17:32 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
export default defaultDesignToken;
|