@fle-ui/next 3.0.0-alpha.2 → 3.0.0
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,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
|
+
}
|