@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,49 @@
|
|
1
|
+
export interface SizeMapToken {
|
2
|
+
/**
|
3
|
+
* @nameZH XXL
|
4
|
+
* @default 48
|
5
|
+
*/
|
6
|
+
sizeXXL: number;
|
7
|
+
/**
|
8
|
+
* @nameZH XL
|
9
|
+
* @default 32
|
10
|
+
*/
|
11
|
+
sizeXL: number;
|
12
|
+
/**
|
13
|
+
* @nameZH LG
|
14
|
+
* @default 24
|
15
|
+
*/
|
16
|
+
sizeLG: number;
|
17
|
+
/**
|
18
|
+
* @nameZH MD
|
19
|
+
* @default 20
|
20
|
+
*/
|
21
|
+
sizeMD: number;
|
22
|
+
/** Same as size by default, but could be larger in compact mode */
|
23
|
+
sizeMS: number;
|
24
|
+
/**
|
25
|
+
* @nameZH 默认
|
26
|
+
* @desc 默认尺寸
|
27
|
+
* @default 16
|
28
|
+
*/
|
29
|
+
size: number;
|
30
|
+
/**
|
31
|
+
* @nameZH SM
|
32
|
+
* @default 12
|
33
|
+
*/
|
34
|
+
sizeSM: number;
|
35
|
+
/**
|
36
|
+
* @nameZH XS
|
37
|
+
* @default 8
|
38
|
+
*/
|
39
|
+
sizeXS: number;
|
40
|
+
/**
|
41
|
+
* @nameZH XXS
|
42
|
+
* @default 4
|
43
|
+
*/
|
44
|
+
sizeXXS: number;
|
45
|
+
}
|
46
|
+
export interface HeightMapToken {
|
47
|
+
}
|
48
|
+
export interface FontSizeMapToken {
|
49
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1,33 @@
|
|
1
|
+
export interface StyleMapToken {
|
2
|
+
/**
|
3
|
+
* @nameZH 线宽
|
4
|
+
* @nameEN Line Width
|
5
|
+
* @desc 描边类组件的默认线宽,如 Button、Input、Select 等输入类控件。
|
6
|
+
* @descEN The default line width of the outline class components, such as Button, Input, Select, etc.
|
7
|
+
* @default 1
|
8
|
+
*/
|
9
|
+
lineWidthBold: number;
|
10
|
+
/**
|
11
|
+
* @nameZH XS号圆角
|
12
|
+
* @desc XS号圆角,用于组件中的一些小圆角,如 Segmented 、Arrow 等一些内部圆角的组件样式中。
|
13
|
+
* @descEN XS size border radius, used in some small border radius components, such as Segmented, Arrow and other components.
|
14
|
+
* @default 2
|
15
|
+
*/
|
16
|
+
borderRadiusXS: number;
|
17
|
+
/**
|
18
|
+
* @nameZH SM号圆角
|
19
|
+
* @nameEN SM Border Radius
|
20
|
+
* @desc SM号圆角,用于组件小尺寸下的圆角,如 Button、Input、Select 等输入类控件在 small size 下的圆角
|
21
|
+
* @descEN SM size border radius, used in small size components, such as Button, Input, Select and other input components in small size
|
22
|
+
* @default 4
|
23
|
+
*/
|
24
|
+
borderRadiusSM: number;
|
25
|
+
/**
|
26
|
+
* @nameZH LG号圆角
|
27
|
+
* @nameEN LG Border Radius
|
28
|
+
* @desc LG号圆角,用于组件中的一些大圆角,如 Card、Modal 等一些组件样式。
|
29
|
+
* @descEN LG size border radius, used in some large border radius components, such as Card, Modal and other components.
|
30
|
+
* @default 8
|
31
|
+
*/
|
32
|
+
borderRadiusLG: number;
|
33
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1,8 @@
|
|
1
|
+
export declare const PresetColors: readonly ["blue", "purple", "cyan", "green", "magenta", "pink", "red", "orange", "yellow", "volcano", "geekblue", "lime", "gold"];
|
2
|
+
type PresetColorKey = typeof PresetColors[number];
|
3
|
+
export type PresetColorType = Record<PresetColorKey, string>;
|
4
|
+
type ColorPaletteKeyIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
|
5
|
+
export type ColorPalettes = {
|
6
|
+
[key in `${keyof PresetColorType}-${ColorPaletteKeyIndex}`]: string;
|
7
|
+
};
|
8
|
+
export {};
|
@@ -0,0 +1 @@
|
|
1
|
+
export var PresetColors = ['blue', 'purple', 'cyan', 'green', 'magenta', 'pink', 'red', 'orange', 'yellow', 'volcano', 'geekblue', 'lime', 'gold'];
|
@@ -0,0 +1,139 @@
|
|
1
|
+
import type { PresetColorType } from './presetColors';
|
2
|
+
export interface SeedToken extends PresetColorType {
|
3
|
+
/**
|
4
|
+
* @nameZH 品牌主色
|
5
|
+
* @nameEN Brand Color
|
6
|
+
* @desc 品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后,我们会自动帮你生成一套完整的色板,并赋予它们有效的设计语义
|
7
|
+
* @descEN Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.
|
8
|
+
*/
|
9
|
+
colorPrimary: string;
|
10
|
+
/**
|
11
|
+
* @nameZH 成功色
|
12
|
+
* @nameEN Success Color
|
13
|
+
* @desc 用于表示操作成功的 Token 序列,如 Result、Progress 等组件会使用该组梯度变量。
|
14
|
+
* @descEN Used to represent the token sequence of operation success, such as Result, Progress and other components will use these map tokens.
|
15
|
+
*/
|
16
|
+
colorSuccess: string;
|
17
|
+
/**
|
18
|
+
* @nameZH 警戒色
|
19
|
+
* @nameEN Warning Color
|
20
|
+
* @desc 用于表示操作警告的 Token 序列,如 Notification、 Alert等警告类组件或 Input 输入类等组件会使用该组梯度变量。
|
21
|
+
* @descEN Used to represent the warning map token, such as Notification, Alert, etc. Alert or Control component(like Input) will use these map tokens.
|
22
|
+
*/
|
23
|
+
colorWarning: string;
|
24
|
+
/**
|
25
|
+
* @nameZH 错误色
|
26
|
+
* @nameEN Error Color
|
27
|
+
* @desc 用于表示操作失败的 Token 序列,如失败按钮、错误状态提示(Result)组件等。
|
28
|
+
* @descEN Used to represent the visual elements of the operation failure, such as the error Button, error Result component, etc.
|
29
|
+
*/
|
30
|
+
colorError: string;
|
31
|
+
/**
|
32
|
+
* @nameZH 信息色
|
33
|
+
* @desc 用于表示操作信息的 Token 序列,如 Alert 、Tag、 Progress 等组件都有用到该组梯度变量。
|
34
|
+
* @descEN Used to represent the operation information of the Token sequence, such as Alert, Tag, Progress, and other components use these map tokens.
|
35
|
+
*/
|
36
|
+
colorInfo: string;
|
37
|
+
/**
|
38
|
+
* @nameZH 基础文本色
|
39
|
+
* @nameEN Seed Text Color
|
40
|
+
* @desc 用于派生文本色梯度的基础变量,v5 中我们添加了一层文本色的派生算法可以产出梯度明确的文本色的梯度变量。但**请不要在代码中直接使用该 Seed Token**!
|
41
|
+
* @descEN Used to derive the base variable of the text color gradient. In v5, we added a layer of text color derivation algorithm to produce gradient variables of text color gradient. But please do not use this Seed Token directly in the code!
|
42
|
+
*/
|
43
|
+
colorTextBase: string;
|
44
|
+
/**
|
45
|
+
* @nameZH 基础背景色
|
46
|
+
* @nameEN Seed Background Color
|
47
|
+
* @desc 用于派生背景色梯度的基础变量,v5 中我们添加了一层背景色的派生算法可以产出梯度明确的背景色的梯度变量。但 **请不要在代码中直接使用该 Seed Token** !
|
48
|
+
* @descEN Used to derive the base variable of the background color gradient. In v5, we added a layer of background color derivation algorithm to produce map token of background color. But PLEASE DO NOT USE this Seed Token directly in the code!
|
49
|
+
*/
|
50
|
+
colorBgBase: string;
|
51
|
+
/**
|
52
|
+
* @nameZH 字体
|
53
|
+
* @nameEN FontFamily
|
54
|
+
* @desc Ant Design 的字体家族中优先使用系统默认的界面字体,同时提供了一套利于屏显的备用字体库,来维护在不同平台以及浏览器的显示下,字体始终保持良好的易读性和可读性,体现了友好、稳定和专业的特性。
|
55
|
+
*/
|
56
|
+
fontFamily: string;
|
57
|
+
/**
|
58
|
+
* @nameZH 默认字号
|
59
|
+
* @desc 设计系统中使用最广泛的字体大小,文本梯度也将基于该字号进行派生。
|
60
|
+
* @default 14
|
61
|
+
*/
|
62
|
+
fontSize: number;
|
63
|
+
/**
|
64
|
+
* @nameZH 基础线宽
|
65
|
+
* @nameEN Base Line Width
|
66
|
+
* @desc 用于控制组件边框、分割线等的宽度
|
67
|
+
* @descEN Border width of base components
|
68
|
+
*/
|
69
|
+
lineWidth: number;
|
70
|
+
/**
|
71
|
+
* @nameZH 线条样式
|
72
|
+
* @nameEN Line Style
|
73
|
+
* @desc 用于控制组件边框、分割线等的样式,默认是实线
|
74
|
+
* @descEN Border style of base components
|
75
|
+
*/
|
76
|
+
lineType: string;
|
77
|
+
/**
|
78
|
+
* @nameZH 基础圆角
|
79
|
+
* @nameEN Base Border Radius
|
80
|
+
* @descEN Border radius of base components
|
81
|
+
* @desc 基础组件的圆角大小,例如按钮、输入框、卡片等
|
82
|
+
*/
|
83
|
+
borderRadius: number;
|
84
|
+
/**
|
85
|
+
* @nameZH 尺寸变化单位
|
86
|
+
* @nameEN Size Change Unit
|
87
|
+
* @desc 用于控制组件尺寸的变化单位,在 Ant Design 中我们的基础单位为 4 ,便于更加细致地控制尺寸梯度
|
88
|
+
* @descEN The unit of size change, in Ant Design, our base unit is 4, which is more fine-grained control of the size step
|
89
|
+
* @default 4
|
90
|
+
*/
|
91
|
+
sizeUnit: number;
|
92
|
+
/**
|
93
|
+
* @nameZH 尺寸步长
|
94
|
+
* @nameEN Size Base Step
|
95
|
+
* @desc 用于控制组件尺寸的基础步长,尺寸步长结合尺寸变化单位,就可以派生各种尺寸梯度。通过调整步长即可得到不同的布局模式,例如 V5 紧凑模式下的尺寸步长为 2
|
96
|
+
* @descEN The base step of size change, the size step combined with the size change unit, can derive various size steps. By adjusting the step, you can get different layout modes, such as the size step of the compact mode of V5 is 2
|
97
|
+
* @default 4
|
98
|
+
*/
|
99
|
+
sizeStep: number;
|
100
|
+
/**
|
101
|
+
* @nameZH 基础高度
|
102
|
+
* @nameEN Base Control Height
|
103
|
+
* @desc Ant Design 中按钮和输入框等基础控件的高度
|
104
|
+
* @descEN The height of the basic controls such as buttons and input boxes in Ant Design
|
105
|
+
* @default 32
|
106
|
+
*/
|
107
|
+
controlHeight: number;
|
108
|
+
/**
|
109
|
+
* @nameZH 基础 zIndex
|
110
|
+
* @nameEN Base zIndex
|
111
|
+
* @desc 所有组件的基础 Z 轴值,用于一些悬浮类的组件的可以基于该值 Z 轴控制层级,例如 BackTop、 Affix 等
|
112
|
+
* @descEN The base Z axis value of all components, which can be used to control the level of some floating components based on the Z axis value, such as BackTop, Affix, etc.
|
113
|
+
*
|
114
|
+
* @default 0
|
115
|
+
*/
|
116
|
+
zIndexBase: number;
|
117
|
+
/**
|
118
|
+
* @nameZH 浮层基础 zIndex
|
119
|
+
* @nameEN popup base zIndex
|
120
|
+
* @desc 浮层类组件的基础 Z 轴值,用于一些悬浮类的组件的可以基于该值 Z 轴控制层级,例如 FloatButton、 Affix、Modal 等
|
121
|
+
* @descEN Base zIndex of component like FloatButton, Affix which can be cover by large popup
|
122
|
+
* @default 1000
|
123
|
+
*/
|
124
|
+
zIndexPopupBase: number;
|
125
|
+
/**
|
126
|
+
* @nameZH 动画时长变化单位
|
127
|
+
* @nameEN Animation Duration Unit
|
128
|
+
* @desc 用于控制动画时长的变化单位
|
129
|
+
* @descEN The unit of animation duration change
|
130
|
+
* @default 100ms
|
131
|
+
*/
|
132
|
+
motionUnit: number;
|
133
|
+
/**
|
134
|
+
* @nameZH 线框化
|
135
|
+
* @desc 用于将组件的视觉效果变为线框化,如果需要使用 V4 的效果,需要开启配置项
|
136
|
+
* @default false
|
137
|
+
*/
|
138
|
+
wireframe: boolean;
|
139
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -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,47 @@
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
3
|
+
import { createTheme, useCacheToken, useStyleRegister } from '@ant-design/cssinjs';
|
4
|
+
import React from 'react';
|
5
|
+
import version from "../version";
|
6
|
+
import { PresetColors } from "./interface";
|
7
|
+
import defaultDerivative from "./themes/default";
|
8
|
+
import defaultSeedToken from "./themes/seed";
|
9
|
+
import formatToken from "./util/alias";
|
10
|
+
import genComponentStyleHook from "./util/genComponentStyleHook";
|
11
|
+
import statisticToken, { merge as mergeToken, statistic } from "./util/statistic";
|
12
|
+
var defaultTheme = createTheme(defaultDerivative);
|
13
|
+
export { // colors
|
14
|
+
PresetColors, // Statistic
|
15
|
+
statistic, statisticToken, mergeToken, // hooks
|
16
|
+
useStyleRegister, genComponentStyleHook }; // ================================ Context =================================
|
17
|
+
// To ensure snapshot stable. We disable hashed in test env.
|
18
|
+
|
19
|
+
export var defaultConfig = {
|
20
|
+
token: defaultSeedToken,
|
21
|
+
hashed: true
|
22
|
+
};
|
23
|
+
export var DesignTokenContext = /*#__PURE__*/React.createContext(defaultConfig); // ================================== Hook ==================================
|
24
|
+
|
25
|
+
export function useToken() {
|
26
|
+
var _React$useContext = React.useContext(DesignTokenContext),
|
27
|
+
rootDesignToken = _React$useContext.token,
|
28
|
+
hashed = _React$useContext.hashed,
|
29
|
+
theme = _React$useContext.theme,
|
30
|
+
components = _React$useContext.components;
|
31
|
+
|
32
|
+
var salt = version + "-" + (hashed || '');
|
33
|
+
var mergedTheme = theme || defaultTheme;
|
34
|
+
|
35
|
+
var _useCacheToken = useCacheToken(mergedTheme, [defaultSeedToken, rootDesignToken], {
|
36
|
+
salt: salt,
|
37
|
+
override: _extends({
|
38
|
+
override: rootDesignToken
|
39
|
+
}, components),
|
40
|
+
formatToken: formatToken
|
41
|
+
}),
|
42
|
+
_useCacheToken2 = _slicedToArray(_useCacheToken, 2),
|
43
|
+
token = _useCacheToken2[0],
|
44
|
+
hashId = _useCacheToken2[1];
|
45
|
+
|
46
|
+
return [mergedTheme, token, hashed ? hashId : ''];
|
47
|
+
}
|
@@ -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
|
+
}
|