@fle-ui/next 3.0.0-alpha.2 → 3.0.0-alpha.3
Sign up to get free protection for your applications and to get access to all the features.
- package/es/theme/index.d.ts +21 -0
- package/es/theme/index.js +37 -0
- package/es/theme/interface/alias.d.ts +133 -0
- package/es/theme/interface/alias.js +1 -0
- package/es/theme/interface/components.d.ts +110 -0
- package/es/theme/interface/components.js +1 -0
- package/es/theme/interface/index.d.ts +13 -0
- package/es/theme/interface/index.js +1 -0
- package/es/theme/interface/maps/colors.d.ts +342 -0
- package/es/theme/interface/maps/colors.js +1 -0
- package/es/theme/interface/maps/index.d.ts +15 -0
- package/es/theme/interface/maps/index.js +3 -0
- package/es/theme/interface/maps/size.d.ts +49 -0
- package/es/theme/interface/maps/size.js +1 -0
- package/es/theme/interface/maps/style.d.ts +33 -0
- package/es/theme/interface/maps/style.js +1 -0
- package/es/theme/interface/presetColors.d.ts +8 -0
- package/es/theme/interface/presetColors.js +1 -0
- package/es/theme/interface/seeds.d.ts +139 -0
- package/es/theme/interface/seeds.js +1 -0
- package/es/theme/internal.d.ts +23 -0
- package/es/theme/internal.js +47 -0
- package/es/theme/themes/ColorMap.d.ts +15 -0
- package/es/theme/themes/ColorMap.js +1 -0
- package/es/theme/themes/compact/genCompactSizeMapToken.d.ts +2 -0
- package/es/theme/themes/compact/genCompactSizeMapToken.js +16 -0
- package/es/theme/themes/compact/index.d.ts +4 -0
- package/es/theme/themes/compact/index.js +34 -0
- package/es/theme/themes/dark/colorAlgorithm.d.ts +2 -0
- package/es/theme/themes/dark/colorAlgorithm.js +8 -0
- package/es/theme/themes/dark/colors.d.ts +3 -0
- package/es/theme/themes/dark/colors.js +44 -0
- package/es/theme/themes/dark/index.d.ts +4 -0
- package/es/theme/themes/dark/index.js +34 -0
- package/es/theme/themes/default/colorAlgorithm.d.ts +2 -0
- package/es/theme/themes/default/colorAlgorithm.js +8 -0
- package/es/theme/themes/default/colors.d.ts +3 -0
- package/es/theme/themes/default/colors.js +42 -0
- package/es/theme/themes/default/index.d.ts +2 -0
- package/es/theme/themes/default/index.js +30 -0
- package/es/theme/themes/seed.d.ts +4 -0
- package/es/theme/themes/seed.js +67 -0
- package/es/theme/themes/shared/genColorMapToken.d.ts +8 -0
- package/es/theme/themes/shared/genColorMapToken.js +78 -0
- package/es/theme/themes/shared/genCommonMapToken.d.ts +2 -0
- package/es/theme/themes/shared/genCommonMapToken.js +33 -0
- package/es/theme/themes/shared/genControlHeight.d.ts +3 -0
- package/es/theme/themes/shared/genControlHeight.js +10 -0
- package/es/theme/themes/shared/genFontSizes.d.ts +4 -0
- package/es/theme/themes/shared/genFontSizes.js +18 -0
- package/es/theme/themes/shared/genRadius.d.ts +3 -0
- package/es/theme/themes/shared/genRadius.js +51 -0
- package/es/theme/themes/shared/genSizeMapToken.d.ts +2 -0
- package/es/theme/themes/shared/genSizeMapToken.js +24 -0
- package/es/theme/util/alias.d.ts +12 -0
- package/es/theme/util/alias.js +169 -0
- package/es/theme/util/genComponentStyleHook.d.ts +25 -0
- package/es/theme/util/genComponentStyleHook.js +65 -0
- package/es/theme/util/getAlphaColor.d.ts +2 -0
- package/es/theme/util/getAlphaColor.js +46 -0
- package/es/theme/util/statistic.d.ts +18 -0
- package/es/theme/util/statistic.js +80 -0
- package/lib/theme/index.d.ts +21 -0
- package/lib/theme/index.js +52 -0
- package/lib/theme/interface/alias.d.ts +133 -0
- package/lib/theme/interface/alias.js +5 -0
- package/lib/theme/interface/components.d.ts +110 -0
- package/lib/theme/interface/components.js +5 -0
- package/lib/theme/interface/index.d.ts +13 -0
- package/lib/theme/interface/index.js +13 -0
- package/lib/theme/interface/maps/colors.d.ts +342 -0
- package/lib/theme/interface/maps/colors.js +5 -0
- package/lib/theme/interface/maps/index.d.ts +15 -0
- package/lib/theme/interface/maps/index.js +44 -0
- package/lib/theme/interface/maps/size.d.ts +49 -0
- package/lib/theme/interface/maps/size.js +5 -0
- package/lib/theme/interface/maps/style.d.ts +33 -0
- package/lib/theme/interface/maps/style.js +5 -0
- package/lib/theme/interface/presetColors.d.ts +8 -0
- package/lib/theme/interface/presetColors.js +8 -0
- package/lib/theme/interface/seeds.d.ts +139 -0
- package/lib/theme/interface/seeds.js +5 -0
- package/lib/theme/internal.d.ts +23 -0
- package/lib/theme/internal.js +108 -0
- package/lib/theme/themes/ColorMap.d.ts +15 -0
- package/lib/theme/themes/ColorMap.js +1 -0
- package/lib/theme/themes/compact/genCompactSizeMapToken.d.ts +2 -0
- package/lib/theme/themes/compact/genCompactSizeMapToken.js +16 -0
- package/lib/theme/themes/compact/index.d.ts +4 -0
- package/lib/theme/themes/compact/index.js +34 -0
- package/lib/theme/themes/dark/colorAlgorithm.d.ts +2 -0
- package/lib/theme/themes/dark/colorAlgorithm.js +8 -0
- package/lib/theme/themes/dark/colors.d.ts +3 -0
- package/lib/theme/themes/dark/colors.js +44 -0
- package/lib/theme/themes/dark/index.d.ts +4 -0
- package/lib/theme/themes/dark/index.js +34 -0
- package/lib/theme/themes/default/colorAlgorithm.d.ts +2 -0
- package/lib/theme/themes/default/colorAlgorithm.js +8 -0
- package/lib/theme/themes/default/colors.d.ts +3 -0
- package/lib/theme/themes/default/colors.js +42 -0
- package/lib/theme/themes/default/index.d.ts +2 -0
- package/lib/theme/themes/default/index.js +30 -0
- package/lib/theme/themes/seed.d.ts +4 -0
- package/lib/theme/themes/seed.js +67 -0
- package/lib/theme/themes/shared/genColorMapToken.d.ts +8 -0
- package/lib/theme/themes/shared/genColorMapToken.js +78 -0
- package/lib/theme/themes/shared/genCommonMapToken.d.ts +2 -0
- package/lib/theme/themes/shared/genCommonMapToken.js +33 -0
- package/lib/theme/themes/shared/genControlHeight.d.ts +3 -0
- package/lib/theme/themes/shared/genControlHeight.js +10 -0
- package/lib/theme/themes/shared/genFontSizes.d.ts +4 -0
- package/lib/theme/themes/shared/genFontSizes.js +18 -0
- package/lib/theme/themes/shared/genRadius.d.ts +3 -0
- package/lib/theme/themes/shared/genRadius.js +51 -0
- package/lib/theme/themes/shared/genSizeMapToken.d.ts +2 -0
- package/lib/theme/themes/shared/genSizeMapToken.js +24 -0
- package/lib/theme/util/alias.d.ts +12 -0
- package/lib/theme/util/alias.js +177 -0
- package/lib/theme/util/genComponentStyleHook.d.ts +25 -0
- package/lib/theme/util/genComponentStyleHook.js +79 -0
- package/lib/theme/util/getAlphaColor.d.ts +2 -0
- package/lib/theme/util/getAlphaColor.js +54 -0
- package/lib/theme/util/statistic.d.ts +18 -0
- package/lib/theme/util/statistic.js +97 -0
- package/package.json +1 -1
@@ -0,0 +1,67 @@
|
|
1
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
2
|
+
|
3
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
4
|
+
|
5
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
6
|
+
|
7
|
+
export var defaultPresetColors = {
|
8
|
+
blue: '#2c68ff',
|
9
|
+
purple: '#722ED1',
|
10
|
+
cyan: '#13C2C2',
|
11
|
+
green: '#52C41A',
|
12
|
+
magenta: '#EB2F96',
|
13
|
+
pink: '#eb2f96',
|
14
|
+
red: '#F5222D',
|
15
|
+
orange: '#FA8C16',
|
16
|
+
yellow: '#FADB14',
|
17
|
+
volcano: '#FA541C',
|
18
|
+
geekblue: '#2F54EB',
|
19
|
+
gold: '#FAAD14',
|
20
|
+
lime: '#A0D911'
|
21
|
+
};
|
22
|
+
|
23
|
+
var seedToken = _objectSpread(_objectSpread({}, defaultPresetColors), {}, {
|
24
|
+
// Color
|
25
|
+
colorPrimary: '#2c68ff',
|
26
|
+
colorSuccess: '#52c41a',
|
27
|
+
colorWarning: '#faad14',
|
28
|
+
colorError: '#ff4d4f',
|
29
|
+
colorInfo: '#2c68ff',
|
30
|
+
colorTextBase: '',
|
31
|
+
colorBgBase: '',
|
32
|
+
// Font
|
33
|
+
fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',\n'Noto Color Emoji'",
|
34
|
+
fontSize: 14,
|
35
|
+
// Line
|
36
|
+
lineWidth: 1,
|
37
|
+
lineType: 'solid',
|
38
|
+
// Motion
|
39
|
+
motionUnit: 0.1,
|
40
|
+
// @ts-ignore
|
41
|
+
motionBase: 0,
|
42
|
+
motionEaseOutCirc: "cubic-bezier(0.08, 0.82, 0.17, 1)",
|
43
|
+
motionEaseInOutCirc: "cubic-bezier(0.78, 0.14, 0.15, 0.86)",
|
44
|
+
motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
|
45
|
+
motionEaseInOut: "cubic-bezier(0.645, 0.045, 0.355, 1)",
|
46
|
+
motionEaseOutBack: "cubic-bezier(0.12, 0.4, 0.29, 1.46)",
|
47
|
+
motionEaseInBack: "cubic-bezier(0.71, -0.46, 0.88, 0.6)",
|
48
|
+
motionEaseInQuint: "cubic-bezier(0.645, 0.045, 0.355, 1)",
|
49
|
+
motionEaseOutQuint: "cubic-bezier(0.23, 1, 0.32, 1)",
|
50
|
+
// Radius
|
51
|
+
borderRadius: 6,
|
52
|
+
// Size
|
53
|
+
sizeUnit: 4,
|
54
|
+
sizeStep: 4,
|
55
|
+
sizePopupArrow: 16,
|
56
|
+
// Control Base
|
57
|
+
controlHeight: 32,
|
58
|
+
// zIndex
|
59
|
+
zIndexBase: 0,
|
60
|
+
zIndexPopupBase: 1000,
|
61
|
+
// Image
|
62
|
+
opacityImage: 1,
|
63
|
+
// Wireframe
|
64
|
+
wireframe: false
|
65
|
+
});
|
66
|
+
|
67
|
+
export default seedToken;
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import type { ColorMapToken, SeedToken } from 'antd/es/theme/interface';
|
2
|
+
import type { GenerateColorMap, GenerateNeutralColorMap } from '../ColorMap';
|
3
|
+
interface PaletteGenerators {
|
4
|
+
generateColorPalettes: GenerateColorMap;
|
5
|
+
generateNeutralColorPalettes: GenerateNeutralColorMap;
|
6
|
+
}
|
7
|
+
export default function genColorMapToken(seed: SeedToken, { generateColorPalettes, generateNeutralColorPalettes }: PaletteGenerators): ColorMapToken;
|
8
|
+
export {};
|
@@ -0,0 +1,78 @@
|
|
1
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
2
|
+
|
3
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
4
|
+
|
5
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
6
|
+
|
7
|
+
import { TinyColor } from '@ctrl/tinycolor';
|
8
|
+
export default function genColorMapToken(seed, _ref) {
|
9
|
+
var generateColorPalettes = _ref.generateColorPalettes,
|
10
|
+
generateNeutralColorPalettes = _ref.generateNeutralColorPalettes;
|
11
|
+
var colorSuccessBase = seed.colorSuccess,
|
12
|
+
colorWarningBase = seed.colorWarning,
|
13
|
+
colorErrorBase = seed.colorError,
|
14
|
+
colorInfoBase = seed.colorInfo,
|
15
|
+
colorPrimaryBase = seed.colorPrimary,
|
16
|
+
colorBgBase = seed.colorBgBase,
|
17
|
+
colorTextBase = seed.colorTextBase;
|
18
|
+
var primaryColors = generateColorPalettes(colorPrimaryBase);
|
19
|
+
var successColors = generateColorPalettes(colorSuccessBase);
|
20
|
+
var warningColors = generateColorPalettes(colorWarningBase);
|
21
|
+
var errorColors = generateColorPalettes(colorErrorBase);
|
22
|
+
var infoColors = generateColorPalettes(colorInfoBase);
|
23
|
+
var neutralColors = generateNeutralColorPalettes(colorBgBase, colorTextBase);
|
24
|
+
return _objectSpread(_objectSpread({}, neutralColors), {}, {
|
25
|
+
colorPrimaryBg: primaryColors[1],
|
26
|
+
colorPrimaryBgHover: primaryColors[2],
|
27
|
+
colorPrimaryBorder: primaryColors[3],
|
28
|
+
colorPrimaryBorderHover: primaryColors[4],
|
29
|
+
colorPrimaryHover: primaryColors[5],
|
30
|
+
colorPrimary: primaryColors[6],
|
31
|
+
colorPrimaryActive: primaryColors[7],
|
32
|
+
colorPrimaryTextHover: primaryColors[8],
|
33
|
+
colorPrimaryText: primaryColors[9],
|
34
|
+
colorPrimaryTextActive: primaryColors[10],
|
35
|
+
colorSuccessBg: successColors[1],
|
36
|
+
colorSuccessBgHover: successColors[2],
|
37
|
+
colorSuccessBorder: successColors[3],
|
38
|
+
colorSuccessBorderHover: successColors[4],
|
39
|
+
colorSuccessHover: successColors[4],
|
40
|
+
colorSuccess: successColors[6],
|
41
|
+
colorSuccessActive: successColors[7],
|
42
|
+
colorSuccessTextHover: successColors[8],
|
43
|
+
colorSuccessText: successColors[9],
|
44
|
+
colorSuccessTextActive: successColors[10],
|
45
|
+
colorErrorBg: errorColors[1],
|
46
|
+
colorErrorBgHover: errorColors[2],
|
47
|
+
colorErrorBorder: errorColors[3],
|
48
|
+
colorErrorBorderHover: errorColors[4],
|
49
|
+
colorErrorHover: errorColors[5],
|
50
|
+
colorError: errorColors[6],
|
51
|
+
colorErrorActive: errorColors[7],
|
52
|
+
colorErrorTextHover: errorColors[8],
|
53
|
+
colorErrorText: errorColors[9],
|
54
|
+
colorErrorTextActive: errorColors[10],
|
55
|
+
colorWarningBg: warningColors[1],
|
56
|
+
colorWarningBgHover: warningColors[2],
|
57
|
+
colorWarningBorder: warningColors[3],
|
58
|
+
colorWarningBorderHover: warningColors[4],
|
59
|
+
colorWarningHover: warningColors[4],
|
60
|
+
colorWarning: warningColors[6],
|
61
|
+
colorWarningActive: warningColors[7],
|
62
|
+
colorWarningTextHover: warningColors[8],
|
63
|
+
colorWarningText: warningColors[9],
|
64
|
+
colorWarningTextActive: warningColors[10],
|
65
|
+
colorInfoBg: infoColors[1],
|
66
|
+
colorInfoBgHover: infoColors[2],
|
67
|
+
colorInfoBorder: infoColors[3],
|
68
|
+
colorInfoBorderHover: infoColors[4],
|
69
|
+
colorInfoHover: infoColors[4],
|
70
|
+
colorInfo: infoColors[6],
|
71
|
+
colorInfoActive: infoColors[7],
|
72
|
+
colorInfoTextHover: infoColors[8],
|
73
|
+
colorInfoText: infoColors[9],
|
74
|
+
colorInfoTextActive: infoColors[10],
|
75
|
+
colorBgMask: new TinyColor('#000').setAlpha(0.45).toRgbString(),
|
76
|
+
colorWhite: '#fff'
|
77
|
+
});
|
78
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
2
|
+
|
3
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
4
|
+
|
5
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
6
|
+
|
7
|
+
import genFontSizes from "./genFontSizes";
|
8
|
+
import genRadius from "./genRadius";
|
9
|
+
export default function genCommonMapToken(token) {
|
10
|
+
// @ts-ignore
|
11
|
+
var motionUnit = token.motionUnit,
|
12
|
+
motionBase = token.motionBase,
|
13
|
+
fontSize = token.fontSize,
|
14
|
+
borderRadius = token.borderRadius,
|
15
|
+
lineWidth = token.lineWidth;
|
16
|
+
var fontSizes = genFontSizes(fontSize);
|
17
|
+
return _objectSpread({
|
18
|
+
// motion
|
19
|
+
motionDurationFast: "".concat((motionBase + motionUnit).toFixed(1), "s"),
|
20
|
+
motionDurationMid: "".concat((motionBase + motionUnit * 2).toFixed(1), "s"),
|
21
|
+
motionDurationSlow: "".concat((motionBase + motionUnit * 3).toFixed(1), "s"),
|
22
|
+
// font
|
23
|
+
// @ts-ignore
|
24
|
+
fontSizes: fontSizes.map(function (fs) {
|
25
|
+
return fs.size;
|
26
|
+
}),
|
27
|
+
lineHeights: fontSizes.map(function (fs) {
|
28
|
+
return fs.lineHeight;
|
29
|
+
}),
|
30
|
+
// line
|
31
|
+
lineWidthBold: lineWidth + 1
|
32
|
+
}, genRadius(borderRadius));
|
33
|
+
}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
var genControlHeight = function genControlHeight(token) {
|
2
|
+
var controlHeight = token.controlHeight;
|
3
|
+
return {
|
4
|
+
controlHeightSM: controlHeight * 0.75,
|
5
|
+
controlHeightXS: controlHeight * 0.5,
|
6
|
+
controlHeightLG: controlHeight * 1.25
|
7
|
+
};
|
8
|
+
};
|
9
|
+
|
10
|
+
export default genControlHeight;
|
@@ -0,0 +1,18 @@
|
|
1
|
+
// https://zhuanlan.zhihu.com/p/32746810
|
2
|
+
export default function getFontSizes(base) {
|
3
|
+
var fontSizes = new Array(10).fill(null).map(function (_, index) {
|
4
|
+
var i = index - 1;
|
5
|
+
var baseSize = base * Math.pow(2.71828, i / 5);
|
6
|
+
var intSize = index > 1 ? Math.floor(baseSize) : Math.ceil(baseSize); // Convert to even
|
7
|
+
|
8
|
+
return Math.floor(intSize / 2) * 2;
|
9
|
+
});
|
10
|
+
fontSizes[1] = base;
|
11
|
+
return fontSizes.map(function (size) {
|
12
|
+
var height = size + 8;
|
13
|
+
return {
|
14
|
+
size: size,
|
15
|
+
lineHeight: height / size
|
16
|
+
};
|
17
|
+
});
|
18
|
+
}
|
@@ -0,0 +1,51 @@
|
|
1
|
+
var genRadius = function genRadius(radiusBase) {
|
2
|
+
var radiusLG = radiusBase;
|
3
|
+
var radiusSM = radiusBase;
|
4
|
+
var radiusXS = radiusBase;
|
5
|
+
var radiusOuter = radiusBase; // radiusLG
|
6
|
+
|
7
|
+
if (radiusBase < 6 && radiusBase >= 5) {
|
8
|
+
radiusLG = radiusBase + 1;
|
9
|
+
} else if (radiusBase < 16 && radiusBase >= 6) {
|
10
|
+
radiusLG = radiusBase + 2;
|
11
|
+
} else if (radiusBase >= 16) {
|
12
|
+
radiusLG = 16;
|
13
|
+
} // radiusSM
|
14
|
+
|
15
|
+
|
16
|
+
if (radiusBase < 7 && radiusBase >= 5) {
|
17
|
+
radiusSM = 4;
|
18
|
+
} else if (radiusBase < 8 && radiusBase >= 7) {
|
19
|
+
radiusSM = 5;
|
20
|
+
} else if (radiusBase < 14 && radiusBase >= 8) {
|
21
|
+
radiusSM = 6;
|
22
|
+
} else if (radiusBase < 16 && radiusBase >= 14) {
|
23
|
+
radiusSM = 7;
|
24
|
+
} else if (radiusBase >= 16) {
|
25
|
+
radiusSM = 8;
|
26
|
+
} // radiusXS
|
27
|
+
|
28
|
+
|
29
|
+
if (radiusBase < 6 && radiusBase >= 2) {
|
30
|
+
radiusXS = 1;
|
31
|
+
} else if (radiusBase >= 6) {
|
32
|
+
radiusXS = 2;
|
33
|
+
} // radiusOuter
|
34
|
+
|
35
|
+
|
36
|
+
if (radiusBase > 4 && radiusBase < 8) {
|
37
|
+
radiusOuter = 4;
|
38
|
+
} else if (radiusBase >= 8) {
|
39
|
+
radiusOuter = 6;
|
40
|
+
}
|
41
|
+
|
42
|
+
return {
|
43
|
+
borderRadius: radiusBase > 16 ? 16 : radiusBase,
|
44
|
+
borderRadiusXS: radiusXS,
|
45
|
+
borderRadiusSM: radiusSM,
|
46
|
+
borderRadiusLG: radiusLG,
|
47
|
+
borderRadiusOuter: radiusOuter
|
48
|
+
};
|
49
|
+
};
|
50
|
+
|
51
|
+
export default genRadius;
|
@@ -0,0 +1,24 @@
|
|
1
|
+
export default function genSizeMapToken(token) {
|
2
|
+
var sizeUnit = token.sizeUnit,
|
3
|
+
sizeStep = token.sizeStep;
|
4
|
+
return {
|
5
|
+
sizeXXL: sizeUnit * (sizeStep + 8),
|
6
|
+
// 48
|
7
|
+
sizeXL: sizeUnit * (sizeStep + 4),
|
8
|
+
// 32
|
9
|
+
sizeLG: sizeUnit * (sizeStep + 2),
|
10
|
+
// 24
|
11
|
+
sizeMD: sizeUnit * (sizeStep + 1),
|
12
|
+
// 20
|
13
|
+
sizeMS: sizeUnit * sizeStep,
|
14
|
+
// 16
|
15
|
+
size: sizeUnit * sizeStep,
|
16
|
+
// 16
|
17
|
+
sizeSM: sizeUnit * (sizeStep - 1),
|
18
|
+
// 12
|
19
|
+
sizeXS: sizeUnit * (sizeStep - 2),
|
20
|
+
// 8
|
21
|
+
sizeXXS: sizeUnit * (sizeStep - 3) // 4
|
22
|
+
|
23
|
+
};
|
24
|
+
}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import type { AliasToken, MapToken, OverrideToken } from '../interface';
|
2
|
+
/** Raw merge of `@ant-design/cssinjs` token. Which need additional process */
|
3
|
+
type RawMergedToken = MapToken & OverrideToken & {
|
4
|
+
override: Partial<AliasToken>;
|
5
|
+
};
|
6
|
+
/**
|
7
|
+
* Seed (designer) > Derivative (designer) > Alias (developer).
|
8
|
+
*
|
9
|
+
* Merge seed & derivative & override token and generate alias token for developer.
|
10
|
+
*/
|
11
|
+
export default function formatToken(derivativeToken: RawMergedToken): AliasToken;
|
12
|
+
export {};
|
@@ -0,0 +1,169 @@
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
2
|
+
|
3
|
+
var __rest = this && this.__rest || function (s, e) {
|
4
|
+
var t = {};
|
5
|
+
|
6
|
+
for (var p in s) {
|
7
|
+
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
8
|
+
}
|
9
|
+
|
10
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
11
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
12
|
+
}
|
13
|
+
return t;
|
14
|
+
};
|
15
|
+
|
16
|
+
import { TinyColor } from '@ctrl/tinycolor';
|
17
|
+
import getAlphaColor from "./getAlphaColor";
|
18
|
+
import seedToken from "../themes/seed";
|
19
|
+
/**
|
20
|
+
* Seed (designer) > Derivative (designer) > Alias (developer).
|
21
|
+
*
|
22
|
+
* Merge seed & derivative & override token and generate alias token for developer.
|
23
|
+
*/
|
24
|
+
|
25
|
+
export default function formatToken(derivativeToken) {
|
26
|
+
var override = derivativeToken.override,
|
27
|
+
restToken = __rest(derivativeToken, ["override"]);
|
28
|
+
|
29
|
+
var overrideTokens = _extends({}, override);
|
30
|
+
|
31
|
+
Object.keys(seedToken).forEach(function (token) {
|
32
|
+
delete overrideTokens[token];
|
33
|
+
});
|
34
|
+
|
35
|
+
var mergedToken = _extends(_extends({}, restToken), overrideTokens);
|
36
|
+
|
37
|
+
var fontSizes = mergedToken.fontSizes,
|
38
|
+
lineHeights = mergedToken.lineHeights;
|
39
|
+
var screenXS = 480;
|
40
|
+
var screenSM = 576;
|
41
|
+
var screenMD = 768;
|
42
|
+
var screenLG = 992;
|
43
|
+
var screenXL = 1200;
|
44
|
+
var screenXXL = 1600;
|
45
|
+
var fontSizeSM = fontSizes[0]; // Generate alias token
|
46
|
+
|
47
|
+
var aliasToken = _extends(_extends(_extends({}, mergedToken), {
|
48
|
+
colorLink: mergedToken.colorInfoText,
|
49
|
+
colorLinkHover: mergedToken.colorInfoHover,
|
50
|
+
colorLinkActive: mergedToken.colorInfoActive,
|
51
|
+
// ============== Background ============== //
|
52
|
+
colorFillContent: mergedToken.colorFillSecondary,
|
53
|
+
colorFillContentHover: mergedToken.colorFill,
|
54
|
+
colorFillAlter: mergedToken.colorFillQuaternary,
|
55
|
+
colorBgContainerDisabled: mergedToken.colorFillTertiary,
|
56
|
+
// ============== Split ============== //
|
57
|
+
colorBorderBg: mergedToken.colorBgContainer,
|
58
|
+
colorSplit: getAlphaColor(mergedToken.colorBorderSecondary, mergedToken.colorBgContainer),
|
59
|
+
// ============== Text ============== //
|
60
|
+
colorTextPlaceholder: mergedToken.colorTextQuaternary,
|
61
|
+
colorTextDisabled: mergedToken.colorTextQuaternary,
|
62
|
+
colorTextHeading: mergedToken.colorText,
|
63
|
+
colorTextLabel: mergedToken.colorTextSecondary,
|
64
|
+
colorTextDescription: mergedToken.colorTextTertiary,
|
65
|
+
colorTextLightSolid: mergedToken.colorWhite,
|
66
|
+
colorHighlight: mergedToken.colorError,
|
67
|
+
colorBgTextHover: mergedToken.colorFillSecondary,
|
68
|
+
colorBgTextActive: mergedToken.colorFill,
|
69
|
+
colorIcon: mergedToken.colorTextTertiary,
|
70
|
+
colorIconHover: mergedToken.colorText,
|
71
|
+
colorErrorOutline: getAlphaColor(mergedToken.colorErrorBg, mergedToken.colorBgContainer),
|
72
|
+
colorWarningOutline: getAlphaColor(mergedToken.colorWarningBg, mergedToken.colorBgContainer),
|
73
|
+
// Font
|
74
|
+
fontSizeSM: fontSizeSM,
|
75
|
+
fontSize: fontSizes[1],
|
76
|
+
fontSizeLG: fontSizes[2],
|
77
|
+
fontSizeXL: fontSizes[3],
|
78
|
+
fontSizeHeading1: fontSizes[6],
|
79
|
+
fontSizeHeading2: fontSizes[5],
|
80
|
+
fontSizeHeading3: fontSizes[4],
|
81
|
+
fontSizeHeading4: fontSizes[3],
|
82
|
+
fontSizeHeading5: fontSizes[2],
|
83
|
+
fontSizeIcon: fontSizeSM,
|
84
|
+
lineHeight: lineHeights[1],
|
85
|
+
lineHeightLG: lineHeights[2],
|
86
|
+
lineHeightSM: lineHeights[0],
|
87
|
+
lineHeightHeading1: lineHeights[6],
|
88
|
+
lineHeightHeading2: lineHeights[5],
|
89
|
+
lineHeightHeading3: lineHeights[4],
|
90
|
+
lineHeightHeading4: lineHeights[3],
|
91
|
+
lineHeightHeading5: lineHeights[2],
|
92
|
+
// Control
|
93
|
+
lineWidth: mergedToken.lineWidth,
|
94
|
+
controlOutlineWidth: mergedToken.lineWidth * 2,
|
95
|
+
// Checkbox size and expand icon size
|
96
|
+
controlInteractiveSize: mergedToken.controlHeight / 2,
|
97
|
+
controlItemBgHover: mergedToken.colorFillTertiary,
|
98
|
+
controlItemBgActive: mergedToken.colorPrimaryBg,
|
99
|
+
controlItemBgActiveHover: mergedToken.colorPrimaryBgHover,
|
100
|
+
controlItemBgActiveDisabled: mergedToken.colorFill,
|
101
|
+
controlTmpOutline: mergedToken.colorFillQuaternary,
|
102
|
+
controlOutline: getAlphaColor(mergedToken.colorPrimaryBg, mergedToken.colorBgContainer),
|
103
|
+
lineType: mergedToken.lineType,
|
104
|
+
borderRadius: mergedToken.borderRadius,
|
105
|
+
borderRadiusXS: mergedToken.borderRadiusXS,
|
106
|
+
borderRadiusSM: mergedToken.borderRadiusSM,
|
107
|
+
borderRadiusLG: mergedToken.borderRadiusLG,
|
108
|
+
fontWeightStrong: 600,
|
109
|
+
opacityLoading: 0.65,
|
110
|
+
linkDecoration: 'none',
|
111
|
+
linkHoverDecoration: 'none',
|
112
|
+
linkFocusDecoration: 'none',
|
113
|
+
controlPaddingHorizontal: 12,
|
114
|
+
controlPaddingHorizontalSM: 8,
|
115
|
+
paddingXXS: mergedToken.sizeXXS,
|
116
|
+
paddingXS: mergedToken.sizeXS,
|
117
|
+
paddingSM: mergedToken.sizeSM,
|
118
|
+
padding: mergedToken.size,
|
119
|
+
paddingMD: mergedToken.sizeMD,
|
120
|
+
paddingLG: mergedToken.sizeLG,
|
121
|
+
paddingXL: mergedToken.sizeXL,
|
122
|
+
paddingContentHorizontalLG: mergedToken.sizeLG,
|
123
|
+
paddingContentVerticalLG: mergedToken.sizeMS,
|
124
|
+
paddingContentHorizontal: mergedToken.sizeMS,
|
125
|
+
paddingContentVertical: mergedToken.sizeSM,
|
126
|
+
paddingContentHorizontalSM: mergedToken.size,
|
127
|
+
paddingContentVerticalSM: mergedToken.sizeXS,
|
128
|
+
marginXXS: mergedToken.sizeXXS,
|
129
|
+
marginXS: mergedToken.sizeXS,
|
130
|
+
marginSM: mergedToken.sizeSM,
|
131
|
+
margin: mergedToken.size,
|
132
|
+
marginMD: mergedToken.sizeMD,
|
133
|
+
marginLG: mergedToken.sizeLG,
|
134
|
+
marginXL: mergedToken.sizeXL,
|
135
|
+
marginXXL: mergedToken.sizeXXL,
|
136
|
+
boxShadow: "\n 0 1px 2px 0 rgba(0, 0, 0, 0.03),\n 0 1px 6px -1px rgba(0, 0, 0, 0.02),\n 0 2px 4px 0 rgba(0, 0, 0, 0.02)\n ",
|
137
|
+
boxShadowSecondary: "\n 0 6px 16px 0 rgba(0, 0, 0, 0.08),\n 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n 0 9px 28px 8px rgba(0, 0, 0, 0.05)\n ",
|
138
|
+
screenXS: screenXS,
|
139
|
+
screenXSMin: screenXS,
|
140
|
+
screenXSMax: screenSM - 1,
|
141
|
+
screenSM: screenSM,
|
142
|
+
screenSMMin: screenSM,
|
143
|
+
screenSMMax: screenMD - 1,
|
144
|
+
screenMD: screenMD,
|
145
|
+
screenMDMin: screenMD,
|
146
|
+
screenMDMax: screenLG - 1,
|
147
|
+
screenLG: screenLG,
|
148
|
+
screenLGMin: screenLG,
|
149
|
+
screenLGMax: screenXL - 1,
|
150
|
+
screenXL: screenXL,
|
151
|
+
screenXLMin: screenXL,
|
152
|
+
screenXLMax: screenXXL - 1,
|
153
|
+
screenXXL: screenXXL,
|
154
|
+
screenXXLMin: screenXXL,
|
155
|
+
// FIXME: component box-shadow, should be removed
|
156
|
+
boxShadowPopoverArrow: "3px 3px 7px rgba(0, 0, 0, 0.1)",
|
157
|
+
boxShadowCard: "\n 0 1px 2px -2px " + new TinyColor('rgba(0, 0, 0, 0.16)').toRgbString() + ",\n 0 3px 6px 0 " + new TinyColor('rgba(0, 0, 0, 0.12)').toRgbString() + ",\n 0 5px 12px 4px " + new TinyColor('rgba(0, 0, 0, 0.09)').toRgbString() + "\n ",
|
158
|
+
boxShadowDrawerRight: "\n -6px 0 16px 0 rgba(0, 0, 0, 0.08),\n -3px 0 6px -4px rgba(0, 0, 0, 0.12),\n -9px 0 28px 8px rgba(0, 0, 0, 0.05)\n ",
|
159
|
+
boxShadowDrawerLeft: "\n 6px 0 16px 0 rgba(0, 0, 0, 0.08),\n 3px 0 6px -4px rgba(0, 0, 0, 0.12),\n 9px 0 28px 8px rgba(0, 0, 0, 0.05)\n ",
|
160
|
+
boxShadowDrawerUp: "\n 0 6px 16px 0 rgba(0, 0, 0, 0.08),\n 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n 0 9px 28px 8px rgba(0, 0, 0, 0.05)\n ",
|
161
|
+
boxShadowDrawerDown: "\n 0 -6px 16px 0 rgba(0, 0, 0, 0.08),\n 0 -3px 6px -4px rgba(0, 0, 0, 0.12),\n 0 -9px 28px 8px rgba(0, 0, 0, 0.05)\n ",
|
162
|
+
boxShadowTabsOverflowLeft: "inset 10px 0 8px -8px rgba(0, 0, 0, 0.08)",
|
163
|
+
boxShadowTabsOverflowRight: "inset -10px 0 8px -8px rgba(0, 0, 0, 0.08)",
|
164
|
+
boxShadowTabsOverflowTop: "inset 0 10px 8px -8px rgba(0, 0, 0, 0.08)",
|
165
|
+
boxShadowTabsOverflowBottom: "inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08)"
|
166
|
+
}), overrideTokens);
|
167
|
+
|
168
|
+
return aliasToken;
|
169
|
+
}
|
@@ -0,0 +1,25 @@
|
|
1
|
+
import type { CSSInterpolation } from '@ant-design/cssinjs';
|
2
|
+
import type { UseComponentStyleResult } from '../internal';
|
3
|
+
import type { ComponentTokenMap, GlobalToken } from '../interface';
|
4
|
+
export type OverrideTokenWithoutDerivative = ComponentTokenMap;
|
5
|
+
export type OverrideComponent = keyof OverrideTokenWithoutDerivative;
|
6
|
+
export type GlobalTokenWithComponent<ComponentName extends OverrideComponent> = GlobalToken & ComponentTokenMap[ComponentName];
|
7
|
+
export interface StyleInfo<ComponentName extends OverrideComponent> {
|
8
|
+
hashId: string;
|
9
|
+
prefixCls: string;
|
10
|
+
rootPrefixCls: string;
|
11
|
+
iconPrefixCls: string;
|
12
|
+
overrideComponentToken: ComponentTokenMap[ComponentName];
|
13
|
+
}
|
14
|
+
export type TokenWithCommonCls<T> = T & {
|
15
|
+
/** Wrap component class with `.` prefix */
|
16
|
+
componentCls: string;
|
17
|
+
/** Origin prefix which do not have `.` prefix */
|
18
|
+
prefixCls: string;
|
19
|
+
/** Wrap icon class with `.` prefix */
|
20
|
+
iconCls: string;
|
21
|
+
/** Wrap ant prefixCls class with `.` prefix */
|
22
|
+
antCls: string;
|
23
|
+
};
|
24
|
+
export type FullToken<ComponentName extends OverrideComponent> = TokenWithCommonCls<GlobalTokenWithComponent<ComponentName>>;
|
25
|
+
export default function genComponentStyleHook<ComponentName extends OverrideComponent>(component: ComponentName, styleFn: (token: FullToken<ComponentName>, info: StyleInfo<ComponentName>) => CSSInterpolation, getDefaultToken?: OverrideTokenWithoutDerivative[ComponentName] | ((token: GlobalToken) => OverrideTokenWithoutDerivative[ComponentName])): (prefixCls: string) => UseComponentStyleResult;
|
@@ -0,0 +1,65 @@
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
3
|
+
import { useStyleRegister } from '@ant-design/cssinjs';
|
4
|
+
import { useContext } from 'react';
|
5
|
+
import { genCommonStyle, genLinkStyle } from "../../style";
|
6
|
+
import { ConfigContext } from "../../config-provider/context";
|
7
|
+
import { mergeToken, statisticToken, useToken } from "../internal";
|
8
|
+
export default function genComponentStyleHook(component, styleFn, getDefaultToken) {
|
9
|
+
return function (prefixCls) {
|
10
|
+
var _useToken = useToken(),
|
11
|
+
_useToken2 = _slicedToArray(_useToken, 3),
|
12
|
+
theme = _useToken2[0],
|
13
|
+
token = _useToken2[1],
|
14
|
+
hashId = _useToken2[2];
|
15
|
+
|
16
|
+
var _useContext = useContext(ConfigContext),
|
17
|
+
getPrefixCls = _useContext.getPrefixCls,
|
18
|
+
iconPrefixCls = _useContext.iconPrefixCls;
|
19
|
+
|
20
|
+
var rootPrefixCls = getPrefixCls(); // Generate style for all a tags in antd component.
|
21
|
+
|
22
|
+
useStyleRegister({
|
23
|
+
theme: theme,
|
24
|
+
token: token,
|
25
|
+
hashId: hashId,
|
26
|
+
path: ['Shared', rootPrefixCls]
|
27
|
+
}, function () {
|
28
|
+
return [{
|
29
|
+
// Link
|
30
|
+
'&': genLinkStyle(token)
|
31
|
+
}];
|
32
|
+
});
|
33
|
+
return [useStyleRegister({
|
34
|
+
theme: theme,
|
35
|
+
token: token,
|
36
|
+
hashId: hashId,
|
37
|
+
path: [component, prefixCls, iconPrefixCls]
|
38
|
+
}, function () {
|
39
|
+
var _statisticToken = statisticToken(token),
|
40
|
+
proxyToken = _statisticToken.token,
|
41
|
+
flush = _statisticToken.flush;
|
42
|
+
|
43
|
+
var defaultComponentToken = typeof getDefaultToken === 'function' ? getDefaultToken(proxyToken) : getDefaultToken;
|
44
|
+
|
45
|
+
var mergedComponentToken = _extends(_extends({}, defaultComponentToken), token[component]);
|
46
|
+
|
47
|
+
var componentCls = "." + prefixCls;
|
48
|
+
var mergedToken = mergeToken(proxyToken, {
|
49
|
+
componentCls: componentCls,
|
50
|
+
prefixCls: prefixCls,
|
51
|
+
iconCls: "." + iconPrefixCls,
|
52
|
+
antCls: "." + rootPrefixCls
|
53
|
+
}, mergedComponentToken);
|
54
|
+
var styleInterpolation = styleFn(mergedToken, {
|
55
|
+
hashId: hashId,
|
56
|
+
prefixCls: prefixCls,
|
57
|
+
rootPrefixCls: rootPrefixCls,
|
58
|
+
iconPrefixCls: iconPrefixCls,
|
59
|
+
overrideComponentToken: token[component]
|
60
|
+
});
|
61
|
+
flush(component, mergedComponentToken);
|
62
|
+
return [genCommonStyle(token, prefixCls), styleInterpolation];
|
63
|
+
}), hashId];
|
64
|
+
};
|
65
|
+
}
|
@@ -0,0 +1,46 @@
|
|
1
|
+
import { TinyColor } from '@ctrl/tinycolor';
|
2
|
+
|
3
|
+
function isStableColor(color) {
|
4
|
+
return color >= 0 && color <= 255;
|
5
|
+
}
|
6
|
+
|
7
|
+
function getAlphaColor(frontColor, backgroundColor) {
|
8
|
+
var _TinyColor$toRgb = new TinyColor(frontColor).toRgb(),
|
9
|
+
fR = _TinyColor$toRgb.r,
|
10
|
+
fG = _TinyColor$toRgb.g,
|
11
|
+
fB = _TinyColor$toRgb.b,
|
12
|
+
originAlpha = _TinyColor$toRgb.a;
|
13
|
+
|
14
|
+
if (originAlpha < 1) {
|
15
|
+
return frontColor;
|
16
|
+
}
|
17
|
+
|
18
|
+
var _TinyColor$toRgb2 = new TinyColor(backgroundColor).toRgb(),
|
19
|
+
bR = _TinyColor$toRgb2.r,
|
20
|
+
bG = _TinyColor$toRgb2.g,
|
21
|
+
bB = _TinyColor$toRgb2.b;
|
22
|
+
|
23
|
+
for (var fA = 0.01; fA <= 1; fA += 0.01) {
|
24
|
+
var r = Math.round((fR - bR * (1 - fA)) / fA);
|
25
|
+
var g = Math.round((fG - bG * (1 - fA)) / fA);
|
26
|
+
var b = Math.round((fB - bB * (1 - fA)) / fA);
|
27
|
+
if (isStableColor(r) && isStableColor(g) && isStableColor(b)) return new TinyColor({
|
28
|
+
r: r,
|
29
|
+
g: g,
|
30
|
+
b: b,
|
31
|
+
a: Math.round(fA * 100) / 100
|
32
|
+
}).toRgbString();
|
33
|
+
} // fallback
|
34
|
+
|
35
|
+
/* istanbul ignore next */
|
36
|
+
|
37
|
+
|
38
|
+
return new TinyColor({
|
39
|
+
r: fR,
|
40
|
+
g: fG,
|
41
|
+
b: fB,
|
42
|
+
a: 1
|
43
|
+
}).toRgbString();
|
44
|
+
}
|
45
|
+
|
46
|
+
export default getAlphaColor;
|
@@ -0,0 +1,18 @@
|
|
1
|
+
/**
|
2
|
+
* This function will do as `Object.assign` in production. But will use Object.defineProperty:get to
|
3
|
+
* pass all value access in development. To support statistic field usage with alias token.
|
4
|
+
*/
|
5
|
+
export declare function merge<T extends object>(...objs: Partial<T>[]): T;
|
6
|
+
/** @private Internal Usage. Not use in your production. */
|
7
|
+
export declare const statistic: Record<string, {
|
8
|
+
global: string[];
|
9
|
+
component: Record<string, string | number>;
|
10
|
+
}>;
|
11
|
+
/** @private Internal Usage. Not use in your production. */
|
12
|
+
export declare const _statistic_build_: typeof statistic;
|
13
|
+
/** Statistic token usage case. Should use `merge` function if you do not want spread record. */
|
14
|
+
export default function statisticToken<T extends object>(token: T): {
|
15
|
+
token: T;
|
16
|
+
keys: Set<string> | undefined;
|
17
|
+
flush: (componentName: string, componentToken: Record<string, string | number>) => void;
|
18
|
+
};
|