@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,23 @@
|
|
1
|
+
import type { CSSInterpolation, Theme } from '@ant-design/cssinjs';
|
2
|
+
import { useStyleRegister } from '@ant-design/cssinjs';
|
3
|
+
import React from 'react';
|
4
|
+
import type { AliasToken, GlobalToken, MapToken, OverrideToken, PresetColorType, SeedToken } from './interface';
|
5
|
+
import { PresetColors } from './interface';
|
6
|
+
import type { FullToken } from './util/genComponentStyleHook';
|
7
|
+
import genComponentStyleHook from './util/genComponentStyleHook';
|
8
|
+
import statisticToken, { merge as mergeToken, statistic } from './util/statistic';
|
9
|
+
export { PresetColors, statistic, statisticToken, mergeToken, useStyleRegister, genComponentStyleHook, };
|
10
|
+
export type { SeedToken, AliasToken, PresetColorType, AliasToken as DerivativeToken, FullToken, };
|
11
|
+
export declare const defaultConfig: {
|
12
|
+
token: SeedToken;
|
13
|
+
hashed: boolean;
|
14
|
+
};
|
15
|
+
export declare const DesignTokenContext: React.Context<{
|
16
|
+
token: Partial<AliasToken>;
|
17
|
+
theme?: Theme<SeedToken, MapToken> | undefined;
|
18
|
+
components?: OverrideToken | undefined;
|
19
|
+
hashed?: string | boolean | undefined;
|
20
|
+
}>;
|
21
|
+
export declare function useToken(): [Theme<SeedToken, MapToken>, GlobalToken, string];
|
22
|
+
export type UseComponentStyleResult = [(node: React.ReactNode) => React.ReactElement, string];
|
23
|
+
export type GenerateStyle<ComponentToken extends object = AliasToken, ReturnType = CSSInterpolation> = (token: ComponentToken) => ReturnType;
|
@@ -0,0 +1,108 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
|
4
|
+
|
5
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
6
|
+
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
8
|
+
value: true
|
9
|
+
});
|
10
|
+
exports.DesignTokenContext = void 0;
|
11
|
+
Object.defineProperty(exports, "PresetColors", {
|
12
|
+
enumerable: true,
|
13
|
+
get: function get() {
|
14
|
+
return _interface.PresetColors;
|
15
|
+
}
|
16
|
+
});
|
17
|
+
exports.defaultConfig = void 0;
|
18
|
+
Object.defineProperty(exports, "genComponentStyleHook", {
|
19
|
+
enumerable: true,
|
20
|
+
get: function get() {
|
21
|
+
return _genComponentStyleHook["default"];
|
22
|
+
}
|
23
|
+
});
|
24
|
+
Object.defineProperty(exports, "mergeToken", {
|
25
|
+
enumerable: true,
|
26
|
+
get: function get() {
|
27
|
+
return _statistic.merge;
|
28
|
+
}
|
29
|
+
});
|
30
|
+
Object.defineProperty(exports, "statistic", {
|
31
|
+
enumerable: true,
|
32
|
+
get: function get() {
|
33
|
+
return _statistic.statistic;
|
34
|
+
}
|
35
|
+
});
|
36
|
+
Object.defineProperty(exports, "statisticToken", {
|
37
|
+
enumerable: true,
|
38
|
+
get: function get() {
|
39
|
+
return _statistic["default"];
|
40
|
+
}
|
41
|
+
});
|
42
|
+
Object.defineProperty(exports, "useStyleRegister", {
|
43
|
+
enumerable: true,
|
44
|
+
get: function get() {
|
45
|
+
return _cssinjs.useStyleRegister;
|
46
|
+
}
|
47
|
+
});
|
48
|
+
exports.useToken = useToken;
|
49
|
+
|
50
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
51
|
+
|
52
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
53
|
+
|
54
|
+
var _cssinjs = require("@ant-design/cssinjs");
|
55
|
+
|
56
|
+
var _react = _interopRequireDefault(require("react"));
|
57
|
+
|
58
|
+
var _version = _interopRequireDefault(require("../version"));
|
59
|
+
|
60
|
+
var _interface = require("./interface");
|
61
|
+
|
62
|
+
var _default = _interopRequireDefault(require("./themes/default"));
|
63
|
+
|
64
|
+
var _seed = _interopRequireDefault(require("./themes/seed"));
|
65
|
+
|
66
|
+
var _alias = _interopRequireDefault(require("./util/alias"));
|
67
|
+
|
68
|
+
var _genComponentStyleHook = _interopRequireDefault(require("./util/genComponentStyleHook"));
|
69
|
+
|
70
|
+
var _statistic = _interopRequireWildcard(require("./util/statistic"));
|
71
|
+
|
72
|
+
var defaultTheme = (0, _cssinjs.createTheme)(_default["default"]); // ================================ Context =================================
|
73
|
+
// To ensure snapshot stable. We disable hashed in test env.
|
74
|
+
|
75
|
+
var defaultConfig = {
|
76
|
+
token: _seed["default"],
|
77
|
+
hashed: true
|
78
|
+
};
|
79
|
+
exports.defaultConfig = defaultConfig;
|
80
|
+
|
81
|
+
var DesignTokenContext = /*#__PURE__*/_react["default"].createContext(defaultConfig); // ================================== Hook ==================================
|
82
|
+
|
83
|
+
|
84
|
+
exports.DesignTokenContext = DesignTokenContext;
|
85
|
+
|
86
|
+
function useToken() {
|
87
|
+
var _React$useContext = _react["default"].useContext(DesignTokenContext),
|
88
|
+
rootDesignToken = _React$useContext.token,
|
89
|
+
hashed = _React$useContext.hashed,
|
90
|
+
theme = _React$useContext.theme,
|
91
|
+
components = _React$useContext.components;
|
92
|
+
|
93
|
+
var salt = _version["default"] + "-" + (hashed || '');
|
94
|
+
var mergedTheme = theme || defaultTheme;
|
95
|
+
|
96
|
+
var _useCacheToken = (0, _cssinjs.useCacheToken)(mergedTheme, [_seed["default"], rootDesignToken], {
|
97
|
+
salt: salt,
|
98
|
+
override: (0, _extends2["default"])({
|
99
|
+
override: rootDesignToken
|
100
|
+
}, components),
|
101
|
+
formatToken: _alias["default"]
|
102
|
+
}),
|
103
|
+
_useCacheToken2 = (0, _slicedToArray2["default"])(_useCacheToken, 2),
|
104
|
+
token = _useCacheToken2[0],
|
105
|
+
hashId = _useCacheToken2[1];
|
106
|
+
|
107
|
+
return [mergedTheme, token, hashed ? hashId : ''];
|
108
|
+
}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import type { ColorNeutralMapToken } from 'antd/es/theme/interface';
|
2
|
+
export interface ColorMap {
|
3
|
+
1: string;
|
4
|
+
2: string;
|
5
|
+
3: string;
|
6
|
+
4: string;
|
7
|
+
5: string;
|
8
|
+
6: string;
|
9
|
+
7: string;
|
10
|
+
8: string;
|
11
|
+
9: string;
|
12
|
+
10: string;
|
13
|
+
}
|
14
|
+
export declare type GenerateColorMap = (baseColor: string) => ColorMap;
|
15
|
+
export declare type GenerateNeutralColorMap = (bgBaseColor: string, textBaseColor: string) => ColorNeutralMapToken;
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1,16 @@
|
|
1
|
+
export default function genSizeMapToken(token) {
|
2
|
+
var sizeUnit = token.sizeUnit,
|
3
|
+
sizeStep = token.sizeStep;
|
4
|
+
var compactSizeStep = sizeStep - 2;
|
5
|
+
return {
|
6
|
+
sizeXXL: sizeUnit * (compactSizeStep + 10),
|
7
|
+
sizeXL: sizeUnit * (compactSizeStep + 6),
|
8
|
+
sizeLG: sizeUnit * (compactSizeStep + 2),
|
9
|
+
sizeMD: sizeUnit * (compactSizeStep + 2),
|
10
|
+
sizeMS: sizeUnit * (compactSizeStep + 1),
|
11
|
+
size: sizeUnit * compactSizeStep,
|
12
|
+
sizeSM: sizeUnit * compactSizeStep,
|
13
|
+
sizeXS: sizeUnit * (compactSizeStep - 1),
|
14
|
+
sizeXXS: sizeUnit * (compactSizeStep - 1)
|
15
|
+
};
|
16
|
+
}
|
@@ -0,0 +1,34 @@
|
|
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 genControlHeight from "../shared/genControlHeight";
|
8
|
+
import defaultAlgorithm from "../default";
|
9
|
+
import genCompactSizeMapToken from "./genCompactSizeMapToken";
|
10
|
+
import getFontSizes from "../shared/genFontSizes";
|
11
|
+
|
12
|
+
var derivative = function derivative(token, mapToken) {
|
13
|
+
var mergedMapToken = mapToken !== null && mapToken !== void 0 ? mapToken : defaultAlgorithm(token); // @ts-ignore
|
14
|
+
|
15
|
+
var fontSize = mergedMapToken.fontSizes[0]; // Smaller size font-size as base
|
16
|
+
|
17
|
+
var fontSizes = getFontSizes(fontSize);
|
18
|
+
var controlHeight = mergedMapToken.controlHeight - 4;
|
19
|
+
return _objectSpread(_objectSpread(_objectSpread({}, mergedMapToken), genCompactSizeMapToken(mapToken !== null && mapToken !== void 0 ? mapToken : token)), {}, {
|
20
|
+
// font
|
21
|
+
fontSizes: fontSizes.map(function (fs) {
|
22
|
+
return fs.size;
|
23
|
+
}),
|
24
|
+
lineHeights: fontSizes.map(function (fs) {
|
25
|
+
return fs.lineHeight;
|
26
|
+
}),
|
27
|
+
// controlHeight
|
28
|
+
controlHeight: controlHeight
|
29
|
+
}, genControlHeight(_objectSpread(_objectSpread({}, mergedMapToken), {}, {
|
30
|
+
controlHeight: controlHeight
|
31
|
+
})));
|
32
|
+
};
|
33
|
+
|
34
|
+
export default derivative;
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import { TinyColor } from '@ctrl/tinycolor';
|
2
|
+
export var getAlphaColor = function getAlphaColor(baseColor, alpha) {
|
3
|
+
return new TinyColor(baseColor).setAlpha(alpha).toRgbString();
|
4
|
+
};
|
5
|
+
export var getSolidColor = function getSolidColor(baseColor, brightness) {
|
6
|
+
var instance = new TinyColor(baseColor);
|
7
|
+
return instance.lighten(brightness).toHexString();
|
8
|
+
};
|
@@ -0,0 +1,44 @@
|
|
1
|
+
import { generate } from '@ant-design/colors';
|
2
|
+
import { getAlphaColor, getSolidColor } from "./colorAlgorithm";
|
3
|
+
export var generateColorPalettes = function generateColorPalettes(baseColor) {
|
4
|
+
var colors = generate(baseColor, {
|
5
|
+
theme: 'dark'
|
6
|
+
});
|
7
|
+
return {
|
8
|
+
1: colors[0],
|
9
|
+
2: colors[1],
|
10
|
+
3: colors[2],
|
11
|
+
4: colors[3],
|
12
|
+
5: colors[6],
|
13
|
+
6: colors[5],
|
14
|
+
7: colors[4],
|
15
|
+
8: colors[6],
|
16
|
+
9: colors[5],
|
17
|
+
10: colors[4] // 8: colors[9],
|
18
|
+
// 9: colors[8],
|
19
|
+
// 10: colors[7],
|
20
|
+
|
21
|
+
};
|
22
|
+
};
|
23
|
+
export var generateNeutralColorPalettes = function generateNeutralColorPalettes(bgBaseColor, textBaseColor) {
|
24
|
+
var colorBgBase = bgBaseColor || '#000';
|
25
|
+
var colorTextBase = textBaseColor || '#fff';
|
26
|
+
return {
|
27
|
+
colorBgBase: colorBgBase,
|
28
|
+
colorTextBase: colorTextBase,
|
29
|
+
colorText: getAlphaColor(colorTextBase, 0.85),
|
30
|
+
colorTextSecondary: getAlphaColor(colorTextBase, 0.65),
|
31
|
+
colorTextTertiary: getAlphaColor(colorTextBase, 0.45),
|
32
|
+
colorTextQuaternary: getAlphaColor(colorTextBase, 0.25),
|
33
|
+
colorFill: getAlphaColor(colorTextBase, 0.18),
|
34
|
+
colorFillSecondary: getAlphaColor(colorTextBase, 0.12),
|
35
|
+
colorFillTertiary: getAlphaColor(colorTextBase, 0.08),
|
36
|
+
colorFillQuaternary: getAlphaColor(colorTextBase, 0.04),
|
37
|
+
colorBgElevated: getSolidColor(colorBgBase, 12),
|
38
|
+
colorBgContainer: getSolidColor(colorBgBase, 8),
|
39
|
+
colorBgLayout: getSolidColor(colorBgBase, 0),
|
40
|
+
colorBgSpotlight: getSolidColor(colorBgBase, 26),
|
41
|
+
colorBorder: getSolidColor(colorBgBase, 26),
|
42
|
+
colorBorderSecondary: getSolidColor(colorBgBase, 19)
|
43
|
+
};
|
44
|
+
};
|
@@ -0,0 +1,34 @@
|
|
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 { generate } from '@ant-design/colors';
|
8
|
+
import { defaultPresetColors } from "../seed";
|
9
|
+
import genColorMapToken from "../shared/genColorMapToken";
|
10
|
+
import { generateColorPalettes, generateNeutralColorPalettes } from "./colors";
|
11
|
+
import defaultAlgorithm from "../default";
|
12
|
+
|
13
|
+
var derivative = function derivative(token, mapToken) {
|
14
|
+
var colorPalettes = Object.keys(defaultPresetColors) // @ts-ignore
|
15
|
+
.map(function (colorKey) {
|
16
|
+
var colors = generate(token[colorKey], {
|
17
|
+
theme: 'dark'
|
18
|
+
});
|
19
|
+
return new Array(10).fill(1).reduce(function (prev, _, i) {
|
20
|
+
prev["".concat(colorKey, "-").concat(i + 1)] = colors[i];
|
21
|
+
return prev;
|
22
|
+
}, {});
|
23
|
+
}).reduce(function (prev, cur) {
|
24
|
+
prev = _objectSpread(_objectSpread({}, prev), cur);
|
25
|
+
return prev;
|
26
|
+
}, {});
|
27
|
+
var mergedMapToken = mapToken !== null && mapToken !== void 0 ? mapToken : defaultAlgorithm(token);
|
28
|
+
return _objectSpread(_objectSpread(_objectSpread({}, mergedMapToken), colorPalettes), genColorMapToken(token, {
|
29
|
+
generateColorPalettes: generateColorPalettes,
|
30
|
+
generateNeutralColorPalettes: generateNeutralColorPalettes
|
31
|
+
}));
|
32
|
+
};
|
33
|
+
|
34
|
+
export default derivative;
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import { TinyColor } from '@ctrl/tinycolor';
|
2
|
+
export var getAlphaColor = function getAlphaColor(baseColor, alpha) {
|
3
|
+
return new TinyColor(baseColor).setAlpha(alpha).toRgbString();
|
4
|
+
};
|
5
|
+
export var getSolidColor = function getSolidColor(baseColor, brightness) {
|
6
|
+
var instance = new TinyColor(baseColor);
|
7
|
+
return instance.darken(brightness).toHexString();
|
8
|
+
};
|
@@ -0,0 +1,42 @@
|
|
1
|
+
import { generate } from '@ant-design/colors';
|
2
|
+
import { getAlphaColor, getSolidColor } from "./colorAlgorithm";
|
3
|
+
export var generateColorPalettes = function generateColorPalettes(baseColor) {
|
4
|
+
var colors = generate(baseColor);
|
5
|
+
return {
|
6
|
+
1: colors[0],
|
7
|
+
2: colors[1],
|
8
|
+
3: colors[2],
|
9
|
+
4: colors[3],
|
10
|
+
5: colors[4],
|
11
|
+
6: colors[5],
|
12
|
+
7: colors[6],
|
13
|
+
8: colors[4],
|
14
|
+
9: colors[5],
|
15
|
+
10: colors[6] // 8: colors[7],
|
16
|
+
// 9: colors[8],
|
17
|
+
// 10: colors[9],
|
18
|
+
|
19
|
+
};
|
20
|
+
};
|
21
|
+
export var generateNeutralColorPalettes = function generateNeutralColorPalettes(bgBaseColor, textBaseColor) {
|
22
|
+
var colorBgBase = bgBaseColor || '#fff';
|
23
|
+
var colorTextBase = textBaseColor || '#000';
|
24
|
+
return {
|
25
|
+
colorBgBase: colorBgBase,
|
26
|
+
colorTextBase: colorTextBase,
|
27
|
+
colorText: getAlphaColor(colorTextBase, 0.88),
|
28
|
+
colorTextSecondary: getAlphaColor(colorTextBase, 0.65),
|
29
|
+
colorTextTertiary: getAlphaColor(colorTextBase, 0.45),
|
30
|
+
colorTextQuaternary: getAlphaColor(colorTextBase, 0.25),
|
31
|
+
colorFill: getAlphaColor(colorTextBase, 0.15),
|
32
|
+
colorFillSecondary: getAlphaColor(colorTextBase, 0.06),
|
33
|
+
colorFillTertiary: getAlphaColor(colorTextBase, 0.04),
|
34
|
+
colorFillQuaternary: getAlphaColor(colorTextBase, 0.02),
|
35
|
+
colorBgLayout: getSolidColor(colorBgBase, 4),
|
36
|
+
colorBgContainer: getSolidColor(colorBgBase, 0),
|
37
|
+
colorBgElevated: getSolidColor(colorBgBase, 0),
|
38
|
+
colorBgSpotlight: getAlphaColor(colorTextBase, 0.85),
|
39
|
+
colorBorder: getSolidColor(colorBgBase, 15),
|
40
|
+
colorBorderSecondary: getSolidColor(colorBgBase, 6)
|
41
|
+
};
|
42
|
+
};
|
@@ -0,0 +1,30 @@
|
|
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 { generate } from '@ant-design/colors';
|
8
|
+
import genControlHeight from "../shared/genControlHeight";
|
9
|
+
import genSizeMapToken from "../shared/genSizeMapToken";
|
10
|
+
import { defaultPresetColors } from "../seed";
|
11
|
+
import genColorMapToken from "../shared/genColorMapToken";
|
12
|
+
import genCommonMapToken from "../shared/genCommonMapToken";
|
13
|
+
import { generateColorPalettes, generateNeutralColorPalettes } from "./colors";
|
14
|
+
export default function derivative(token) {
|
15
|
+
var colorPalettes = Object.keys(defaultPresetColors) // @ts-ignore
|
16
|
+
.map(function (colorKey) {
|
17
|
+
var colors = generate(token[colorKey]);
|
18
|
+
return new Array(10).fill(1).reduce(function (prev, _, i) {
|
19
|
+
prev["".concat(colorKey, "-").concat(i + 1)] = colors[i];
|
20
|
+
return prev;
|
21
|
+
}, {});
|
22
|
+
}).reduce(function (prev, cur) {
|
23
|
+
prev = _objectSpread(_objectSpread({}, prev), cur);
|
24
|
+
return prev;
|
25
|
+
}, {});
|
26
|
+
return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, token), colorPalettes), genColorMapToken(token, {
|
27
|
+
generateColorPalettes: generateColorPalettes,
|
28
|
+
generateNeutralColorPalettes: generateNeutralColorPalettes
|
29
|
+
})), genSizeMapToken(token)), genControlHeight(token)), genCommonMapToken(token));
|
30
|
+
}
|
@@ -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;
|