@fle-ui/next 3.0.0-alpha.2 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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,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,177 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = formatToken;
|
|
9
|
+
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
|
|
12
|
+
var _tinycolor = require("@ctrl/tinycolor");
|
|
13
|
+
|
|
14
|
+
var _getAlphaColor = _interopRequireDefault(require("./getAlphaColor"));
|
|
15
|
+
|
|
16
|
+
var _seed = _interopRequireDefault(require("../themes/seed"));
|
|
17
|
+
|
|
18
|
+
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
19
|
+
var t = {};
|
|
20
|
+
|
|
21
|
+
for (var p in s) {
|
|
22
|
+
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
26
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
27
|
+
}
|
|
28
|
+
return t;
|
|
29
|
+
};
|
|
30
|
+
/**
|
|
31
|
+
* Seed (designer) > Derivative (designer) > Alias (developer).
|
|
32
|
+
*
|
|
33
|
+
* Merge seed & derivative & override token and generate alias token for developer.
|
|
34
|
+
*/
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
function formatToken(derivativeToken) {
|
|
38
|
+
var override = derivativeToken.override,
|
|
39
|
+
restToken = __rest(derivativeToken, ["override"]);
|
|
40
|
+
|
|
41
|
+
var overrideTokens = (0, _extends2["default"])({}, override);
|
|
42
|
+
Object.keys(_seed["default"]).forEach(function (token) {
|
|
43
|
+
delete overrideTokens[token];
|
|
44
|
+
});
|
|
45
|
+
var mergedToken = (0, _extends2["default"])((0, _extends2["default"])({}, restToken), overrideTokens);
|
|
46
|
+
var fontSizes = mergedToken.fontSizes,
|
|
47
|
+
lineHeights = mergedToken.lineHeights;
|
|
48
|
+
var screenXS = 480;
|
|
49
|
+
var screenSM = 576;
|
|
50
|
+
var screenMD = 768;
|
|
51
|
+
var screenLG = 992;
|
|
52
|
+
var screenXL = 1200;
|
|
53
|
+
var screenXXL = 1600;
|
|
54
|
+
var fontSizeSM = fontSizes[0]; // Generate alias token
|
|
55
|
+
|
|
56
|
+
var aliasToken = (0, _extends2["default"])((0, _extends2["default"])((0, _extends2["default"])({}, mergedToken), {
|
|
57
|
+
colorLink: mergedToken.colorInfoText,
|
|
58
|
+
colorLinkHover: mergedToken.colorInfoHover,
|
|
59
|
+
colorLinkActive: mergedToken.colorInfoActive,
|
|
60
|
+
// ============== Background ============== //
|
|
61
|
+
colorFillContent: mergedToken.colorFillSecondary,
|
|
62
|
+
colorFillContentHover: mergedToken.colorFill,
|
|
63
|
+
colorFillAlter: mergedToken.colorFillQuaternary,
|
|
64
|
+
colorBgContainerDisabled: mergedToken.colorFillTertiary,
|
|
65
|
+
// ============== Split ============== //
|
|
66
|
+
colorBorderBg: mergedToken.colorBgContainer,
|
|
67
|
+
colorSplit: (0, _getAlphaColor["default"])(mergedToken.colorBorderSecondary, mergedToken.colorBgContainer),
|
|
68
|
+
// ============== Text ============== //
|
|
69
|
+
colorTextPlaceholder: mergedToken.colorTextQuaternary,
|
|
70
|
+
colorTextDisabled: mergedToken.colorTextQuaternary,
|
|
71
|
+
colorTextHeading: mergedToken.colorText,
|
|
72
|
+
colorTextLabel: mergedToken.colorTextSecondary,
|
|
73
|
+
colorTextDescription: mergedToken.colorTextTertiary,
|
|
74
|
+
colorTextLightSolid: mergedToken.colorWhite,
|
|
75
|
+
colorHighlight: mergedToken.colorError,
|
|
76
|
+
colorBgTextHover: mergedToken.colorFillSecondary,
|
|
77
|
+
colorBgTextActive: mergedToken.colorFill,
|
|
78
|
+
colorIcon: mergedToken.colorTextTertiary,
|
|
79
|
+
colorIconHover: mergedToken.colorText,
|
|
80
|
+
colorErrorOutline: (0, _getAlphaColor["default"])(mergedToken.colorErrorBg, mergedToken.colorBgContainer),
|
|
81
|
+
colorWarningOutline: (0, _getAlphaColor["default"])(mergedToken.colorWarningBg, mergedToken.colorBgContainer),
|
|
82
|
+
// Font
|
|
83
|
+
fontSizeSM: fontSizeSM,
|
|
84
|
+
fontSize: fontSizes[1],
|
|
85
|
+
fontSizeLG: fontSizes[2],
|
|
86
|
+
fontSizeXL: fontSizes[3],
|
|
87
|
+
fontSizeHeading1: fontSizes[6],
|
|
88
|
+
fontSizeHeading2: fontSizes[5],
|
|
89
|
+
fontSizeHeading3: fontSizes[4],
|
|
90
|
+
fontSizeHeading4: fontSizes[3],
|
|
91
|
+
fontSizeHeading5: fontSizes[2],
|
|
92
|
+
fontSizeIcon: fontSizeSM,
|
|
93
|
+
lineHeight: lineHeights[1],
|
|
94
|
+
lineHeightLG: lineHeights[2],
|
|
95
|
+
lineHeightSM: lineHeights[0],
|
|
96
|
+
lineHeightHeading1: lineHeights[6],
|
|
97
|
+
lineHeightHeading2: lineHeights[5],
|
|
98
|
+
lineHeightHeading3: lineHeights[4],
|
|
99
|
+
lineHeightHeading4: lineHeights[3],
|
|
100
|
+
lineHeightHeading5: lineHeights[2],
|
|
101
|
+
// Control
|
|
102
|
+
lineWidth: mergedToken.lineWidth,
|
|
103
|
+
controlOutlineWidth: mergedToken.lineWidth * 2,
|
|
104
|
+
// Checkbox size and expand icon size
|
|
105
|
+
controlInteractiveSize: mergedToken.controlHeight / 2,
|
|
106
|
+
controlItemBgHover: mergedToken.colorFillTertiary,
|
|
107
|
+
controlItemBgActive: mergedToken.colorPrimaryBg,
|
|
108
|
+
controlItemBgActiveHover: mergedToken.colorPrimaryBgHover,
|
|
109
|
+
controlItemBgActiveDisabled: mergedToken.colorFill,
|
|
110
|
+
controlTmpOutline: mergedToken.colorFillQuaternary,
|
|
111
|
+
controlOutline: (0, _getAlphaColor["default"])(mergedToken.colorPrimaryBg, mergedToken.colorBgContainer),
|
|
112
|
+
lineType: mergedToken.lineType,
|
|
113
|
+
borderRadius: mergedToken.borderRadius,
|
|
114
|
+
borderRadiusXS: mergedToken.borderRadiusXS,
|
|
115
|
+
borderRadiusSM: mergedToken.borderRadiusSM,
|
|
116
|
+
borderRadiusLG: mergedToken.borderRadiusLG,
|
|
117
|
+
fontWeightStrong: 600,
|
|
118
|
+
opacityLoading: 0.65,
|
|
119
|
+
linkDecoration: 'none',
|
|
120
|
+
linkHoverDecoration: 'none',
|
|
121
|
+
linkFocusDecoration: 'none',
|
|
122
|
+
controlPaddingHorizontal: 12,
|
|
123
|
+
controlPaddingHorizontalSM: 8,
|
|
124
|
+
paddingXXS: mergedToken.sizeXXS,
|
|
125
|
+
paddingXS: mergedToken.sizeXS,
|
|
126
|
+
paddingSM: mergedToken.sizeSM,
|
|
127
|
+
padding: mergedToken.size,
|
|
128
|
+
paddingMD: mergedToken.sizeMD,
|
|
129
|
+
paddingLG: mergedToken.sizeLG,
|
|
130
|
+
paddingXL: mergedToken.sizeXL,
|
|
131
|
+
paddingContentHorizontalLG: mergedToken.sizeLG,
|
|
132
|
+
paddingContentVerticalLG: mergedToken.sizeMS,
|
|
133
|
+
paddingContentHorizontal: mergedToken.sizeMS,
|
|
134
|
+
paddingContentVertical: mergedToken.sizeSM,
|
|
135
|
+
paddingContentHorizontalSM: mergedToken.size,
|
|
136
|
+
paddingContentVerticalSM: mergedToken.sizeXS,
|
|
137
|
+
marginXXS: mergedToken.sizeXXS,
|
|
138
|
+
marginXS: mergedToken.sizeXS,
|
|
139
|
+
marginSM: mergedToken.sizeSM,
|
|
140
|
+
margin: mergedToken.size,
|
|
141
|
+
marginMD: mergedToken.sizeMD,
|
|
142
|
+
marginLG: mergedToken.sizeLG,
|
|
143
|
+
marginXL: mergedToken.sizeXL,
|
|
144
|
+
marginXXL: mergedToken.sizeXXL,
|
|
145
|
+
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 ",
|
|
146
|
+
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 ",
|
|
147
|
+
screenXS: screenXS,
|
|
148
|
+
screenXSMin: screenXS,
|
|
149
|
+
screenXSMax: screenSM - 1,
|
|
150
|
+
screenSM: screenSM,
|
|
151
|
+
screenSMMin: screenSM,
|
|
152
|
+
screenSMMax: screenMD - 1,
|
|
153
|
+
screenMD: screenMD,
|
|
154
|
+
screenMDMin: screenMD,
|
|
155
|
+
screenMDMax: screenLG - 1,
|
|
156
|
+
screenLG: screenLG,
|
|
157
|
+
screenLGMin: screenLG,
|
|
158
|
+
screenLGMax: screenXL - 1,
|
|
159
|
+
screenXL: screenXL,
|
|
160
|
+
screenXLMin: screenXL,
|
|
161
|
+
screenXLMax: screenXXL - 1,
|
|
162
|
+
screenXXL: screenXXL,
|
|
163
|
+
screenXXLMin: screenXXL,
|
|
164
|
+
// FIXME: component box-shadow, should be removed
|
|
165
|
+
boxShadowPopoverArrow: "3px 3px 7px rgba(0, 0, 0, 0.1)",
|
|
166
|
+
boxShadowCard: "\n 0 1px 2px -2px " + new _tinycolor.TinyColor('rgba(0, 0, 0, 0.16)').toRgbString() + ",\n 0 3px 6px 0 " + new _tinycolor.TinyColor('rgba(0, 0, 0, 0.12)').toRgbString() + ",\n 0 5px 12px 4px " + new _tinycolor.TinyColor('rgba(0, 0, 0, 0.09)').toRgbString() + "\n ",
|
|
167
|
+
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 ",
|
|
168
|
+
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 ",
|
|
169
|
+
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 ",
|
|
170
|
+
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 ",
|
|
171
|
+
boxShadowTabsOverflowLeft: "inset 10px 0 8px -8px rgba(0, 0, 0, 0.08)",
|
|
172
|
+
boxShadowTabsOverflowRight: "inset -10px 0 8px -8px rgba(0, 0, 0, 0.08)",
|
|
173
|
+
boxShadowTabsOverflowTop: "inset 0 10px 8px -8px rgba(0, 0, 0, 0.08)",
|
|
174
|
+
boxShadowTabsOverflowBottom: "inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08)"
|
|
175
|
+
}), overrideTokens);
|
|
176
|
+
return aliasToken;
|
|
177
|
+
}
|
|
@@ -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,79 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = genComponentStyleHook;
|
|
9
|
+
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
|
|
12
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
|
+
|
|
14
|
+
var _cssinjs = require("@ant-design/cssinjs");
|
|
15
|
+
|
|
16
|
+
var _react = require("react");
|
|
17
|
+
|
|
18
|
+
var _style = require("../../style");
|
|
19
|
+
|
|
20
|
+
var _context = require("../../config-provider/context");
|
|
21
|
+
|
|
22
|
+
var _internal = require("../internal");
|
|
23
|
+
|
|
24
|
+
function genComponentStyleHook(component, styleFn, getDefaultToken) {
|
|
25
|
+
return function (prefixCls) {
|
|
26
|
+
var _useToken = (0, _internal.useToken)(),
|
|
27
|
+
_useToken2 = (0, _slicedToArray2["default"])(_useToken, 3),
|
|
28
|
+
theme = _useToken2[0],
|
|
29
|
+
token = _useToken2[1],
|
|
30
|
+
hashId = _useToken2[2];
|
|
31
|
+
|
|
32
|
+
var _useContext = (0, _react.useContext)(_context.ConfigContext),
|
|
33
|
+
getPrefixCls = _useContext.getPrefixCls,
|
|
34
|
+
iconPrefixCls = _useContext.iconPrefixCls;
|
|
35
|
+
|
|
36
|
+
var rootPrefixCls = getPrefixCls(); // Generate style for all a tags in antd component.
|
|
37
|
+
|
|
38
|
+
(0, _cssinjs.useStyleRegister)({
|
|
39
|
+
theme: theme,
|
|
40
|
+
token: token,
|
|
41
|
+
hashId: hashId,
|
|
42
|
+
path: ['Shared', rootPrefixCls]
|
|
43
|
+
}, function () {
|
|
44
|
+
return [{
|
|
45
|
+
// Link
|
|
46
|
+
'&': (0, _style.genLinkStyle)(token)
|
|
47
|
+
}];
|
|
48
|
+
});
|
|
49
|
+
return [(0, _cssinjs.useStyleRegister)({
|
|
50
|
+
theme: theme,
|
|
51
|
+
token: token,
|
|
52
|
+
hashId: hashId,
|
|
53
|
+
path: [component, prefixCls, iconPrefixCls]
|
|
54
|
+
}, function () {
|
|
55
|
+
var _statisticToken = (0, _internal.statisticToken)(token),
|
|
56
|
+
proxyToken = _statisticToken.token,
|
|
57
|
+
flush = _statisticToken.flush;
|
|
58
|
+
|
|
59
|
+
var defaultComponentToken = typeof getDefaultToken === 'function' ? getDefaultToken(proxyToken) : getDefaultToken;
|
|
60
|
+
var mergedComponentToken = (0, _extends2["default"])((0, _extends2["default"])({}, defaultComponentToken), token[component]);
|
|
61
|
+
var componentCls = "." + prefixCls;
|
|
62
|
+
var mergedToken = (0, _internal.mergeToken)(proxyToken, {
|
|
63
|
+
componentCls: componentCls,
|
|
64
|
+
prefixCls: prefixCls,
|
|
65
|
+
iconCls: "." + iconPrefixCls,
|
|
66
|
+
antCls: "." + rootPrefixCls
|
|
67
|
+
}, mergedComponentToken);
|
|
68
|
+
var styleInterpolation = styleFn(mergedToken, {
|
|
69
|
+
hashId: hashId,
|
|
70
|
+
prefixCls: prefixCls,
|
|
71
|
+
rootPrefixCls: rootPrefixCls,
|
|
72
|
+
iconPrefixCls: iconPrefixCls,
|
|
73
|
+
overrideComponentToken: token[component]
|
|
74
|
+
});
|
|
75
|
+
flush(component, mergedComponentToken);
|
|
76
|
+
return [(0, _style.genCommonStyle)(token, prefixCls), styleInterpolation];
|
|
77
|
+
}), hashId];
|
|
78
|
+
};
|
|
79
|
+
}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
|
|
8
|
+
var _tinycolor = require("@ctrl/tinycolor");
|
|
9
|
+
|
|
10
|
+
function isStableColor(color) {
|
|
11
|
+
return color >= 0 && color <= 255;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
function getAlphaColor(frontColor, backgroundColor) {
|
|
15
|
+
var _TinyColor$toRgb = new _tinycolor.TinyColor(frontColor).toRgb(),
|
|
16
|
+
fR = _TinyColor$toRgb.r,
|
|
17
|
+
fG = _TinyColor$toRgb.g,
|
|
18
|
+
fB = _TinyColor$toRgb.b,
|
|
19
|
+
originAlpha = _TinyColor$toRgb.a;
|
|
20
|
+
|
|
21
|
+
if (originAlpha < 1) {
|
|
22
|
+
return frontColor;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
var _TinyColor$toRgb2 = new _tinycolor.TinyColor(backgroundColor).toRgb(),
|
|
26
|
+
bR = _TinyColor$toRgb2.r,
|
|
27
|
+
bG = _TinyColor$toRgb2.g,
|
|
28
|
+
bB = _TinyColor$toRgb2.b;
|
|
29
|
+
|
|
30
|
+
for (var fA = 0.01; fA <= 1; fA += 0.01) {
|
|
31
|
+
var r = Math.round((fR - bR * (1 - fA)) / fA);
|
|
32
|
+
var g = Math.round((fG - bG * (1 - fA)) / fA);
|
|
33
|
+
var b = Math.round((fB - bB * (1 - fA)) / fA);
|
|
34
|
+
if (isStableColor(r) && isStableColor(g) && isStableColor(b)) return new _tinycolor.TinyColor({
|
|
35
|
+
r: r,
|
|
36
|
+
g: g,
|
|
37
|
+
b: b,
|
|
38
|
+
a: Math.round(fA * 100) / 100
|
|
39
|
+
}).toRgbString();
|
|
40
|
+
} // fallback
|
|
41
|
+
|
|
42
|
+
/* istanbul ignore next */
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
return new _tinycolor.TinyColor({
|
|
46
|
+
r: fR,
|
|
47
|
+
g: fG,
|
|
48
|
+
b: fB,
|
|
49
|
+
a: 1
|
|
50
|
+
}).toRgbString();
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
var _default = getAlphaColor;
|
|
54
|
+
exports["default"] = _default;
|
|
@@ -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
|
+
};
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports._statistic_build_ = void 0;
|
|
9
|
+
exports["default"] = statisticToken;
|
|
10
|
+
exports.merge = merge;
|
|
11
|
+
exports.statistic = void 0;
|
|
12
|
+
|
|
13
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
14
|
+
|
|
15
|
+
var enableStatistic = process.env.NODE_ENV !== 'production' || typeof CSSINJS_STATISTIC !== 'undefined';
|
|
16
|
+
var recording = true;
|
|
17
|
+
/**
|
|
18
|
+
* This function will do as `Object.assign` in production. But will use Object.defineProperty:get to
|
|
19
|
+
* pass all value access in development. To support statistic field usage with alias token.
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
function merge() {
|
|
23
|
+
for (var _len = arguments.length, objs = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
24
|
+
objs[_key] = arguments[_key];
|
|
25
|
+
}
|
|
26
|
+
/* istanbul ignore next */
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
if (!enableStatistic) {
|
|
30
|
+
return _extends2["default"].apply(void 0, [{}].concat(objs));
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
recording = false;
|
|
34
|
+
var ret = {};
|
|
35
|
+
objs.forEach(function (obj) {
|
|
36
|
+
var keys = Object.keys(obj);
|
|
37
|
+
keys.forEach(function (key) {
|
|
38
|
+
Object.defineProperty(ret, key, {
|
|
39
|
+
configurable: true,
|
|
40
|
+
enumerable: true,
|
|
41
|
+
get: function get() {
|
|
42
|
+
return obj[key];
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
});
|
|
46
|
+
});
|
|
47
|
+
recording = true;
|
|
48
|
+
return ret;
|
|
49
|
+
}
|
|
50
|
+
/** @private Internal Usage. Not use in your production. */
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
var statistic = {};
|
|
54
|
+
/** @private Internal Usage. Not use in your production. */
|
|
55
|
+
// eslint-disable-next-line camelcase
|
|
56
|
+
|
|
57
|
+
exports.statistic = statistic;
|
|
58
|
+
var _statistic_build_ = {};
|
|
59
|
+
/* istanbul ignore next */
|
|
60
|
+
|
|
61
|
+
exports._statistic_build_ = _statistic_build_;
|
|
62
|
+
|
|
63
|
+
function noop() {}
|
|
64
|
+
/** Statistic token usage case. Should use `merge` function if you do not want spread record. */
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
function statisticToken(token) {
|
|
68
|
+
var tokenKeys;
|
|
69
|
+
var proxy = token;
|
|
70
|
+
var flush = noop;
|
|
71
|
+
|
|
72
|
+
if (enableStatistic) {
|
|
73
|
+
tokenKeys = new Set();
|
|
74
|
+
proxy = new Proxy(token, {
|
|
75
|
+
get: function get(obj, prop) {
|
|
76
|
+
if (recording) {
|
|
77
|
+
tokenKeys.add(prop);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
return obj[prop];
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
flush = function flush(componentName, componentToken) {
|
|
85
|
+
statistic[componentName] = {
|
|
86
|
+
global: Array.from(tokenKeys),
|
|
87
|
+
component: componentToken
|
|
88
|
+
};
|
|
89
|
+
};
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
return {
|
|
93
|
+
token: proxy,
|
|
94
|
+
keys: tokenKeys,
|
|
95
|
+
flush: flush
|
|
96
|
+
};
|
|
97
|
+
}
|