@akinon/ui-theme 0.4.1 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/colors.d.ts +31 -1
- package/dist/cjs/colors.d.ts.map +1 -1
- package/dist/cjs/colors.js +38 -8
- package/dist/cjs/index.d.ts +1 -0
- package/dist/cjs/index.d.ts.map +1 -1
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/theme.d.ts +1 -1
- package/dist/cjs/theme.d.ts.map +1 -1
- package/dist/cjs/theme.js +275 -6
- package/dist/esm/colors.d.ts +31 -1
- package/dist/esm/colors.d.ts.map +1 -1
- package/dist/esm/colors.js +38 -8
- package/dist/esm/index.d.ts +1 -0
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/theme.d.ts +1 -1
- package/dist/esm/theme.d.ts.map +1 -1
- package/dist/esm/theme.js +275 -6
- package/package.json +3 -9
package/dist/cjs/colors.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export declare const neutral: {
|
|
2
2
|
'50': string;
|
|
3
3
|
'75': string;
|
|
4
|
+
'80': string;
|
|
4
5
|
'100': string;
|
|
5
6
|
'150': string;
|
|
6
7
|
'200': string;
|
|
@@ -10,6 +11,7 @@ export declare const neutral: {
|
|
|
10
11
|
'375': string;
|
|
11
12
|
'400': string;
|
|
12
13
|
'500': string;
|
|
14
|
+
'550': string;
|
|
13
15
|
'600': string;
|
|
14
16
|
'700': string;
|
|
15
17
|
'800': string;
|
|
@@ -17,9 +19,11 @@ export declare const neutral: {
|
|
|
17
19
|
'950': string;
|
|
18
20
|
};
|
|
19
21
|
export declare const ebonyClay: {
|
|
22
|
+
'25': string;
|
|
20
23
|
'50': string;
|
|
21
24
|
'100': string;
|
|
22
25
|
'150': string;
|
|
26
|
+
'175': string;
|
|
23
27
|
'200': string;
|
|
24
28
|
'300': string;
|
|
25
29
|
'350': string;
|
|
@@ -32,18 +36,24 @@ export declare const ebonyClay: {
|
|
|
32
36
|
'600': string;
|
|
33
37
|
'700': string;
|
|
34
38
|
'800': string;
|
|
39
|
+
'850': string;
|
|
35
40
|
'900': string;
|
|
36
41
|
'950': string;
|
|
42
|
+
'951': string;
|
|
37
43
|
};
|
|
38
44
|
export declare const gray: {
|
|
39
45
|
'100': string;
|
|
46
|
+
'150': string;
|
|
40
47
|
'200': string;
|
|
48
|
+
'250': string;
|
|
41
49
|
'300': string;
|
|
42
50
|
'400': string;
|
|
43
51
|
'500': string;
|
|
44
52
|
'600': string;
|
|
45
53
|
'700': string;
|
|
54
|
+
'750': string;
|
|
46
55
|
'800': string;
|
|
56
|
+
'850': string;
|
|
47
57
|
'900': string;
|
|
48
58
|
'925': string;
|
|
49
59
|
'950': string;
|
|
@@ -54,12 +64,16 @@ export declare const red: {
|
|
|
54
64
|
'200': string;
|
|
55
65
|
'300': string;
|
|
56
66
|
'400': string;
|
|
67
|
+
'425': string;
|
|
68
|
+
'450': string;
|
|
57
69
|
'500': string;
|
|
58
70
|
'600': string;
|
|
59
71
|
'700': string;
|
|
60
72
|
'800': string;
|
|
61
73
|
'900': string;
|
|
62
74
|
'950': string;
|
|
75
|
+
'951': string;
|
|
76
|
+
'952': string;
|
|
63
77
|
};
|
|
64
78
|
export declare const green: {
|
|
65
79
|
'50': string;
|
|
@@ -73,6 +87,10 @@ export declare const green: {
|
|
|
73
87
|
'800': string;
|
|
74
88
|
'900': string;
|
|
75
89
|
'950': string;
|
|
90
|
+
'951': string;
|
|
91
|
+
'952': string;
|
|
92
|
+
'953': string;
|
|
93
|
+
'954': string;
|
|
76
94
|
};
|
|
77
95
|
export declare const blue: {
|
|
78
96
|
'50': string;
|
|
@@ -86,6 +104,10 @@ export declare const blue: {
|
|
|
86
104
|
'800': string;
|
|
87
105
|
'900': string;
|
|
88
106
|
'950': string;
|
|
107
|
+
'951': string;
|
|
108
|
+
'952': string;
|
|
109
|
+
'953': string;
|
|
110
|
+
'954': string;
|
|
89
111
|
};
|
|
90
112
|
export declare const purple: {
|
|
91
113
|
'50': string;
|
|
@@ -99,6 +121,9 @@ export declare const purple: {
|
|
|
99
121
|
'800': string;
|
|
100
122
|
'900': string;
|
|
101
123
|
'950': string;
|
|
124
|
+
'951': string;
|
|
125
|
+
'952': string;
|
|
126
|
+
'953': string;
|
|
102
127
|
};
|
|
103
128
|
export declare const pink: {
|
|
104
129
|
'50': string;
|
|
@@ -121,7 +146,6 @@ export declare const azure: {
|
|
|
121
146
|
'400': string;
|
|
122
147
|
'500': string;
|
|
123
148
|
'600': string;
|
|
124
|
-
'750': string;
|
|
125
149
|
'700': string;
|
|
126
150
|
'800': string;
|
|
127
151
|
'900': string;
|
|
@@ -133,12 +157,18 @@ export declare const orange: {
|
|
|
133
157
|
'200': string;
|
|
134
158
|
'300': string;
|
|
135
159
|
'400': string;
|
|
160
|
+
'425': string;
|
|
161
|
+
'450': string;
|
|
136
162
|
'500': string;
|
|
137
163
|
'600': string;
|
|
138
164
|
'700': string;
|
|
139
165
|
'800': string;
|
|
140
166
|
'900': string;
|
|
141
167
|
'950': string;
|
|
168
|
+
'951': string;
|
|
169
|
+
'952': string;
|
|
170
|
+
'953': string;
|
|
171
|
+
'954': string;
|
|
142
172
|
};
|
|
143
173
|
export declare const akinon: {
|
|
144
174
|
'50': string;
|
package/dist/cjs/colors.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/colors.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO
|
|
1
|
+
{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/colors.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;CAmBnB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;CAsBrB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;CAgBhB,CAAC;AAEF,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;CAgBf,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;CAgBjB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;CAgBhB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;CAelB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYhB,CAAC;AAGF,eAAO,MAAM,KAAK;;;;;;;;;;;;CAYjB,CAAC;AAGF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;CAkBlB,CAAC;AAGF,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYlB,CAAC"}
|
package/dist/cjs/colors.js
CHANGED
|
@@ -5,7 +5,8 @@ exports.akinon = exports.orange = exports.azure = exports.pink = exports.purple
|
|
|
5
5
|
exports.neutral = {
|
|
6
6
|
'50': '#ffffff',
|
|
7
7
|
'75': '#fbfcfd',
|
|
8
|
-
'
|
|
8
|
+
'80': '#fafafa',
|
|
9
|
+
'100': '#f5f6f6',
|
|
9
10
|
'150': '#f1f3f9',
|
|
10
11
|
'200': '#e5e5e5',
|
|
11
12
|
'250': '#d6e1e3',
|
|
@@ -14,6 +15,7 @@ exports.neutral = {
|
|
|
14
15
|
'375': '#bfbfbf',
|
|
15
16
|
'400': '#a3a3a3',
|
|
16
17
|
'500': '#737373',
|
|
18
|
+
'550': '#626262',
|
|
17
19
|
'600': '#525252',
|
|
18
20
|
'700': '#404040',
|
|
19
21
|
'800': '#262626',
|
|
@@ -21,9 +23,11 @@ exports.neutral = {
|
|
|
21
23
|
'950': '#0a0a0a'
|
|
22
24
|
};
|
|
23
25
|
exports.ebonyClay = {
|
|
26
|
+
'25': '#6c7ebe',
|
|
24
27
|
'50': '#677084',
|
|
25
28
|
'100': '#5c6880',
|
|
26
29
|
'150': '#58669a',
|
|
30
|
+
'175': '#495679',
|
|
27
31
|
'200': '#515c7c',
|
|
28
32
|
'300': '#465178',
|
|
29
33
|
'350': '#43464f',
|
|
@@ -36,18 +40,24 @@ exports.ebonyClay = {
|
|
|
36
40
|
'600': '#232b3b', // applied from design: header input bg
|
|
37
41
|
'700': '#1d2331',
|
|
38
42
|
'800': '#171d27',
|
|
43
|
+
'850': '#131826',
|
|
39
44
|
'900': '#11171e',
|
|
40
|
-
'950': '#0c111a'
|
|
45
|
+
'950': '#0c111a',
|
|
46
|
+
'951': '#000000bf'
|
|
41
47
|
};
|
|
42
48
|
exports.gray = {
|
|
43
49
|
'100': '#f5f5f5',
|
|
50
|
+
'150': '#e9f0f7',
|
|
44
51
|
'200': '#e5e5e5',
|
|
52
|
+
'250': '#d4d6f0',
|
|
45
53
|
'300': '#d4d4d4',
|
|
46
54
|
'400': '#a3a3a3',
|
|
47
55
|
'500': '#788195', // applied from design: header text placeholder
|
|
48
56
|
'600': '#525252',
|
|
49
57
|
'700': '#404040',
|
|
58
|
+
'750': '#292b2c',
|
|
50
59
|
'800': '#262626',
|
|
60
|
+
'850': '#30363e',
|
|
51
61
|
'900': '#3b404c', // applied from design: layout border
|
|
52
62
|
'925': '#36373b',
|
|
53
63
|
'950': '#171717'
|
|
@@ -58,12 +68,16 @@ exports.red = {
|
|
|
58
68
|
'200': '#fce0cf',
|
|
59
69
|
'300': '#fac7b1',
|
|
60
70
|
'400': '#f58d7a',
|
|
71
|
+
'425': '#ff5163',
|
|
72
|
+
'450': '#f05050',
|
|
61
73
|
'500': '#ef4444',
|
|
62
74
|
'600': '#d93636',
|
|
63
75
|
'700': '#b32525',
|
|
64
76
|
'800': '#8f1818',
|
|
65
77
|
'900': '#6b0e0e',
|
|
66
|
-
'950': '#450606'
|
|
78
|
+
'950': '#450606',
|
|
79
|
+
'951': '#e33030',
|
|
80
|
+
'952': '#f6b5b5'
|
|
67
81
|
};
|
|
68
82
|
exports.green = {
|
|
69
83
|
'50': '#fafcf2',
|
|
@@ -76,7 +90,11 @@ exports.green = {
|
|
|
76
90
|
'700': '#529e13',
|
|
77
91
|
'800': '#3d800d',
|
|
78
92
|
'900': '#275e07',
|
|
79
|
-
'950': '#163d03'
|
|
93
|
+
'950': '#163d03',
|
|
94
|
+
'951': '#67b50c',
|
|
95
|
+
'952': '#71d200',
|
|
96
|
+
'953': '#e3f6cc',
|
|
97
|
+
'954': '#7bd500'
|
|
80
98
|
};
|
|
81
99
|
exports.blue = {
|
|
82
100
|
'50': '#f5fcff',
|
|
@@ -89,7 +107,11 @@ exports.blue = {
|
|
|
89
107
|
'700': '#2153b8',
|
|
90
108
|
'800': '#153b94',
|
|
91
109
|
'900': '#0c286e',
|
|
92
|
-
'950': '#051647'
|
|
110
|
+
'950': '#051647',
|
|
111
|
+
'951': '#126a6f',
|
|
112
|
+
'952': '#75e2e7',
|
|
113
|
+
'953': '#c6f0f2',
|
|
114
|
+
'954': '#363d51'
|
|
93
115
|
};
|
|
94
116
|
exports.purple = {
|
|
95
117
|
'50': '#fbf7fc',
|
|
@@ -102,7 +124,10 @@ exports.purple = {
|
|
|
102
124
|
'700': '#72467b',
|
|
103
125
|
'800': '#633e6a',
|
|
104
126
|
'900': '#543659',
|
|
105
|
-
'950': '#341b37'
|
|
127
|
+
'950': '#341b37',
|
|
128
|
+
'951': '#7667b6',
|
|
129
|
+
'952': '#9387c7',
|
|
130
|
+
'953': '#eae7f4'
|
|
106
131
|
};
|
|
107
132
|
exports.pink = {
|
|
108
133
|
'50': '#fff7fd',
|
|
@@ -126,7 +151,6 @@ exports.azure = {
|
|
|
126
151
|
'400': '#599cff',
|
|
127
152
|
'500': '#4482ff', // applied from design: primary button color
|
|
128
153
|
'600': '#1b55f5',
|
|
129
|
-
'750': '#1890ff',
|
|
130
154
|
'700': '#1440e1',
|
|
131
155
|
'800': '#1734b6',
|
|
132
156
|
'900': '#19318f',
|
|
@@ -139,12 +163,18 @@ exports.orange = {
|
|
|
139
163
|
'200': '#ffebbf',
|
|
140
164
|
'300': '#fcd997',
|
|
141
165
|
'400': '#fcb44e',
|
|
166
|
+
'425': '#ffaa49',
|
|
167
|
+
'450': '#ce8d0b',
|
|
142
168
|
'500': '#f98003',
|
|
143
169
|
'600': '#e06e02',
|
|
144
170
|
'700': '#ba5202',
|
|
145
171
|
'800': '#963d02',
|
|
146
172
|
'900': '#702900',
|
|
147
|
-
'950': '#471700'
|
|
173
|
+
'950': '#471700',
|
|
174
|
+
'951': '#ff7041',
|
|
175
|
+
'952': '#ff7041',
|
|
176
|
+
'953': '#fce0ce',
|
|
177
|
+
'954': '#ffc76b'
|
|
148
178
|
};
|
|
149
179
|
// Akinon brand color and shades.
|
|
150
180
|
exports.akinon = {
|
package/dist/cjs/index.d.ts
CHANGED
package/dist/cjs/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}
|
package/dist/cjs/index.js
CHANGED
package/dist/cjs/theme.d.ts
CHANGED
|
@@ -34,7 +34,7 @@ export declare const useToken: typeof antdTheme.useToken;
|
|
|
34
34
|
* --color-{object_key}-{object_key}: {color_value};
|
|
35
35
|
*/
|
|
36
36
|
export declare const getCssVariables: () => {
|
|
37
|
-
[key: string]: string;
|
|
37
|
+
[key: string]: string | number;
|
|
38
38
|
};
|
|
39
39
|
export {};
|
|
40
40
|
//# sourceMappingURL=theme.d.ts.map
|
package/dist/cjs/theme.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AAqCvD,eAAO,MAAM,QAAQ,KAAK,CAAC;AAE3B,KAAK,SAAS,GACV,QAAQ,GACR,OAAO,GACP,MAAM,GACN,QAAQ,GACR,KAAK,GACL,OAAO,GACP,MAAM,GACN,QAAQ,GACR,MAAM,GACN,WAAW,GACX,SAAS,CAAC;AAEd,KAAK,KAAK,GAAG;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,MAAM,GAAG,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;AAevC,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,EAAE,kBAkWnB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,EAAE,OAAO,SAAS,CAAC,QAA6B,CAAC;AAEtE;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe;;CA2B3B,CAAC"}
|
package/dist/cjs/theme.js
CHANGED
|
@@ -52,6 +52,91 @@ exports.theme = {
|
|
|
52
52
|
fontSize: exports.fontSize * 0.875
|
|
53
53
|
},
|
|
54
54
|
components: {
|
|
55
|
+
Button: {
|
|
56
|
+
// type: primary
|
|
57
|
+
colorPrimary: colors.azure['500'],
|
|
58
|
+
colorPrimaryHover: colors.azure['600'],
|
|
59
|
+
colorPrimaryActive: colors.azure['700'],
|
|
60
|
+
colorPrimaryText: colors.neutral['50'],
|
|
61
|
+
primaryShadow: 'unset',
|
|
62
|
+
// type: default (secondary)
|
|
63
|
+
defaultBg: colors.neutral['50'],
|
|
64
|
+
defaultColor: colors.azure['500'],
|
|
65
|
+
defaultHoverBg: colors.neutral['100'],
|
|
66
|
+
defaultHoverColor: colors.azure['500'],
|
|
67
|
+
defaultActiveBg: colors.neutral['50'],
|
|
68
|
+
defaultActiveColor: colors.azure['500'],
|
|
69
|
+
defaultBorderColor: colors.azure['500'],
|
|
70
|
+
defaultShadow: 'unset',
|
|
71
|
+
defaultBgSm: colors.gray['750'],
|
|
72
|
+
defaultBgSmHover: colors.gray['800'],
|
|
73
|
+
// prop: danger
|
|
74
|
+
colorError: colors.red['450'],
|
|
75
|
+
colorErrorHover: colors.red['500'],
|
|
76
|
+
colorErrorActive: colors.red['600'],
|
|
77
|
+
colorErrorBorder: colors.red['500'],
|
|
78
|
+
dangerShadow: 'unset',
|
|
79
|
+
colorErrorBgSM: colors.red['425'],
|
|
80
|
+
colorErrorBgSMHover: colors.red['450'],
|
|
81
|
+
colorErrorSMHover: colors.neutral['50'],
|
|
82
|
+
// type: success
|
|
83
|
+
colorSuccessBg: colors.green['500'],
|
|
84
|
+
colorSuccessBorder: colors.green['500'],
|
|
85
|
+
colorSuccessHover: colors.green['600'],
|
|
86
|
+
colorSuccessActive: colors.green['700'],
|
|
87
|
+
// type: warning
|
|
88
|
+
colorWarningBg: colors.neutral['50'],
|
|
89
|
+
colorWarningBorder: colors.neutral['50'],
|
|
90
|
+
colorWarningHover: colors.neutral['100'],
|
|
91
|
+
colorWarningActive: colors.neutral['50'],
|
|
92
|
+
colorWarningText: colors.orange['450'],
|
|
93
|
+
// prop: disabled
|
|
94
|
+
colorBgContainerDisabled: colors.neutral['100'],
|
|
95
|
+
colorTextDisabled: colors.neutral['350'],
|
|
96
|
+
borderColorDisabled: colors.neutral['350'],
|
|
97
|
+
// prop: ghost
|
|
98
|
+
defaultGhostBorderColor: 'transparent',
|
|
99
|
+
defaultGhostColor: colors.azure['500'],
|
|
100
|
+
// all buttons
|
|
101
|
+
contentFontSizeSM: exports.fontSize * 0.75,
|
|
102
|
+
borderRadiusSM: 11,
|
|
103
|
+
paddingBlockSM: 1,
|
|
104
|
+
paddingInlineSM: 20,
|
|
105
|
+
colorText: colors.neutral['50'],
|
|
106
|
+
colorTextHover: colors.neutral['50'],
|
|
107
|
+
contentLineHeightSM: 1,
|
|
108
|
+
controlHeight: 40,
|
|
109
|
+
borderRadius: 5,
|
|
110
|
+
paddingBlock: 10,
|
|
111
|
+
paddingInline: 45,
|
|
112
|
+
contentLineHeight: 1,
|
|
113
|
+
fontWeight: 600
|
|
114
|
+
},
|
|
115
|
+
Checkbox: {
|
|
116
|
+
colorPrimary: colors.ebonyClay['25'],
|
|
117
|
+
colorBgContainer: colors.gray['150'],
|
|
118
|
+
colorText: colors.neutral['350'],
|
|
119
|
+
colorChecked: colors.neutral['50'],
|
|
120
|
+
controlInteractiveSize: 20
|
|
121
|
+
},
|
|
122
|
+
Badge: {
|
|
123
|
+
colorText: colors.neutral['50']
|
|
124
|
+
},
|
|
125
|
+
Radio: {
|
|
126
|
+
radioSize: 14,
|
|
127
|
+
dotSize: 5,
|
|
128
|
+
colorPrimary: colors.azure['500'],
|
|
129
|
+
colorBgContainer: colors.gray['150'],
|
|
130
|
+
colorText: colors.neutral['350'],
|
|
131
|
+
colorChecked: colors.neutral['50'],
|
|
132
|
+
colorBorder: colors.neutral['550'],
|
|
133
|
+
buttonBg: colors.ebonyClay['600'],
|
|
134
|
+
buttonColor: colors.neutral['50'],
|
|
135
|
+
buttonSolidCheckedBg: colors.ebonyClay['600'],
|
|
136
|
+
buttonSolidCheckedColor: colors.neutral['50'],
|
|
137
|
+
buttonSolidCheckedBorder: colors.azure['500'],
|
|
138
|
+
borderRadiusSM: 100
|
|
139
|
+
},
|
|
55
140
|
Layout: {
|
|
56
141
|
headerBg: colors.ebonyClay['500'],
|
|
57
142
|
siderBg: colors.ebonyClay['500']
|
|
@@ -72,13 +157,82 @@ exports.theme = {
|
|
|
72
157
|
},
|
|
73
158
|
Breadcrumb: {
|
|
74
159
|
fontSize: exports.fontSize * 0.625,
|
|
75
|
-
|
|
160
|
+
itemColor: colors.azure['500'],
|
|
161
|
+
lastItemColor: colors.gray['500'],
|
|
162
|
+
paddingBottom: exports.fontSize * 0.5,
|
|
163
|
+
borderBottom: '1px solid var(--color-gray-900)',
|
|
164
|
+
paddingLeft: 20,
|
|
165
|
+
paddingRight: 20,
|
|
166
|
+
marginLeft: 8,
|
|
167
|
+
marginRight: 8,
|
|
168
|
+
fontWeight: 600,
|
|
169
|
+
lineHeight: 1.5,
|
|
170
|
+
separatorColor: colors.azure['500'],
|
|
171
|
+
letterSpacing: exports.fontSize * 0.03,
|
|
172
|
+
marginInline: 0,
|
|
173
|
+
height: 'auto'
|
|
174
|
+
},
|
|
175
|
+
Tag: {
|
|
176
|
+
defaultColorSuccess: colors.green['951'],
|
|
177
|
+
defaultBorderColorSuccess: colors.green['952'],
|
|
178
|
+
defaultBgSuccess: colors.green['953'],
|
|
179
|
+
defaultColorWaiting1: colors.orange['951'],
|
|
180
|
+
defaultBorderColorWaiting1: colors.orange['952'],
|
|
181
|
+
defaultBgWaiting1: colors.orange['953'],
|
|
182
|
+
defaultColorWaiting2: colors.blue['951'],
|
|
183
|
+
defaultBorderColorWaiting2: colors.blue['952'],
|
|
184
|
+
defaultBgWaiting2: colors.blue['953'],
|
|
185
|
+
defaultColorWaiting3: colors.purple['951'],
|
|
186
|
+
defaultBorderColorWaiting3: colors.purple['952'],
|
|
187
|
+
defaultBgWaiting3: colors.purple['953'],
|
|
188
|
+
defaultColorFailed: colors.red['951'],
|
|
189
|
+
defaultBorderColorFailed: colors.red['450'],
|
|
190
|
+
defaultBgFailed: colors.red['952'],
|
|
191
|
+
borderRadius: 5,
|
|
192
|
+
fontSize: exports.fontSize * 0.8125,
|
|
193
|
+
paddingLeft: 15,
|
|
194
|
+
paddingRight: 15,
|
|
195
|
+
fontSizeClose: exports.fontSize * 0.6875,
|
|
196
|
+
fontWeight: 500
|
|
197
|
+
},
|
|
198
|
+
Tooltip: {
|
|
199
|
+
bgColor: colors.ebonyClay['951']
|
|
200
|
+
},
|
|
201
|
+
Flex: {},
|
|
202
|
+
Spin: {},
|
|
203
|
+
Alert: {
|
|
204
|
+
defaultColorSuccess: colors.green['951'],
|
|
205
|
+
defaultBorderColorSuccess: colors.green['952'],
|
|
206
|
+
defaultBgSuccess: colors.green['953'],
|
|
207
|
+
defaultColorWaiting1: colors.orange['951'],
|
|
208
|
+
defaultBorderColorWaiting1: colors.orange['952'],
|
|
209
|
+
defaultBgWaiting1: colors.orange['953'],
|
|
210
|
+
defaultColorWaiting2: colors.blue['951'],
|
|
211
|
+
defaultBorderColorWaiting2: colors.blue['952'],
|
|
212
|
+
defaultBgWaiting2: colors.blue['953'],
|
|
213
|
+
defaultColorWaiting3: colors.purple['951'],
|
|
214
|
+
defaultBorderColorWaiting3: colors.purple['952'],
|
|
215
|
+
defaultBgWaiting3: colors.purple['953'],
|
|
216
|
+
defaultColorFailed: colors.red['951'],
|
|
217
|
+
defaultBorderColorFailed: colors.red['450'],
|
|
218
|
+
defaultBgFailed: colors.red['952']
|
|
219
|
+
},
|
|
220
|
+
Grid: {
|
|
221
|
+
rowMaxWidth: 1368,
|
|
222
|
+
gutter: 24
|
|
76
223
|
},
|
|
77
224
|
Card: {
|
|
78
225
|
colorBgContainer: colors.ebonyClay['450'],
|
|
79
226
|
colorTextDescription: colors.neutral['100'],
|
|
80
227
|
headerFontSize: exports.fontSize * 1.25,
|
|
81
|
-
fontSize: exports.fontSize * 0.875
|
|
228
|
+
fontSize: exports.fontSize * 0.875,
|
|
229
|
+
borderRadiusLG: 10,
|
|
230
|
+
paddingLG: 40,
|
|
231
|
+
padding: 24,
|
|
232
|
+
headerHeight: exports.fontSize * 1.25,
|
|
233
|
+
lineHeight: 1,
|
|
234
|
+
colorBorderSecondary: colors.ebonyClay['550'],
|
|
235
|
+
lineWidth: 2
|
|
82
236
|
},
|
|
83
237
|
Collapse: {
|
|
84
238
|
headerPadding: '0 0 12px',
|
|
@@ -90,7 +244,22 @@ exports.theme = {
|
|
|
90
244
|
Form: {
|
|
91
245
|
itemMarginBottom: 16,
|
|
92
246
|
labelColor: colors.neutral['100'],
|
|
93
|
-
verticalLabelPadding:
|
|
247
|
+
verticalLabelPadding: '7px 0',
|
|
248
|
+
// TODO: contribute to antd to use normal and percentage
|
|
249
|
+
lineHeight: 'normal',
|
|
250
|
+
fontWeight: 600,
|
|
251
|
+
colorError: colors.red['425'],
|
|
252
|
+
verticalErrorPadding: '7px 0'
|
|
253
|
+
},
|
|
254
|
+
Pagination: {
|
|
255
|
+
colorText: colors.ebonyClay['950'],
|
|
256
|
+
itemInputBg: colors.neutral['75'],
|
|
257
|
+
colorBorder: colors.neutral['350'],
|
|
258
|
+
borderRadius: 4,
|
|
259
|
+
itemActiveBg: colors.blue['200'],
|
|
260
|
+
colorTextDisabled: colors.neutral['375'],
|
|
261
|
+
marginXS: 0,
|
|
262
|
+
itemSizeSM: 38
|
|
94
263
|
},
|
|
95
264
|
Select: {
|
|
96
265
|
colorTextDisabled: colors.ebonyClay['350'],
|
|
@@ -104,13 +273,104 @@ exports.theme = {
|
|
|
104
273
|
colorBgContainer: colors.ebonyClay['475'],
|
|
105
274
|
fontSizeLG: exports.fontSize * 0.875,
|
|
106
275
|
colorBorder: colors.ebonyClay['550'],
|
|
107
|
-
lineWidth: 2
|
|
276
|
+
lineWidth: 2,
|
|
277
|
+
activeShadow: 'unset',
|
|
278
|
+
errorActiveShadow: 'unset',
|
|
279
|
+
warningActiveShadow: 'unset',
|
|
280
|
+
fontWeight: 600,
|
|
281
|
+
colorBgContainerDisabled: colors.gray['850'],
|
|
282
|
+
colorTextDisabled: colors.ebonyClay['375']
|
|
108
283
|
},
|
|
109
284
|
InputNumber: {
|
|
110
285
|
colorBgContainer: colors.ebonyClay['475'],
|
|
111
286
|
fontSizeLG: exports.fontSize * 0.875,
|
|
112
287
|
colorBorder: colors.ebonyClay['550'],
|
|
113
288
|
lineWidth: 2
|
|
289
|
+
},
|
|
290
|
+
Modal: {
|
|
291
|
+
titleFontSize: exports.fontSize * 1.25,
|
|
292
|
+
padding: '20px 35px',
|
|
293
|
+
fontWeight: 500,
|
|
294
|
+
borderBottom: `1px solid ${colors.blue['954']}`,
|
|
295
|
+
footerPadding: '0 35px 20px 35px',
|
|
296
|
+
closeIconColor: colors.neutral['100'],
|
|
297
|
+
contentPadding: 0,
|
|
298
|
+
footerMarginTop: 0,
|
|
299
|
+
closeTop: 20,
|
|
300
|
+
closeRight: 27,
|
|
301
|
+
headerMarginBottom: 0,
|
|
302
|
+
badgeColorContent: '',
|
|
303
|
+
badgeColorTop: 27,
|
|
304
|
+
badgeColorLeft: 0,
|
|
305
|
+
badgeColorWidth: 4,
|
|
306
|
+
badgeColorHeight: 16,
|
|
307
|
+
badgeColorPosition: 'absolute',
|
|
308
|
+
badgeColorBackgroundColor: colors.red['425']
|
|
309
|
+
},
|
|
310
|
+
Progress: {
|
|
311
|
+
strokeColor: colors.green['100'],
|
|
312
|
+
trailColor: colors.ebonyClay['850'],
|
|
313
|
+
borderRadius: '0',
|
|
314
|
+
height: '18px !important',
|
|
315
|
+
successBgColor: 'repeating-linear-gradient(60deg, rgba(36, 180, 19, 1) 0, rgba(36, 180, 19, 1) 5px, rgba(72, 192, 62, 1) 5px, rgba(72, 192, 62, 1) 10px) !important'
|
|
316
|
+
},
|
|
317
|
+
Steps: {
|
|
318
|
+
zero: '0 !important',
|
|
319
|
+
auto: 'auto !important',
|
|
320
|
+
none: 'none !important',
|
|
321
|
+
full: '100% !important',
|
|
322
|
+
flex: 'flex !important',
|
|
323
|
+
rowGap: '10px',
|
|
324
|
+
iconWidthHeight: '38px !important',
|
|
325
|
+
iconSize: '18px !important',
|
|
326
|
+
paddingInlineEnd: '16px',
|
|
327
|
+
tailTop: '16px',
|
|
328
|
+
tailHeight: '3px',
|
|
329
|
+
titleFontSize: '14px !important',
|
|
330
|
+
iconColor: 'white',
|
|
331
|
+
tailColor: 'linear-gradient(to right, #343639 50%, transparent 50%) !important',
|
|
332
|
+
tailLastChildColor: 'linear-gradient(to right, #4482ff 50%, transparent 50%) !important',
|
|
333
|
+
tailFirstChildColor: 'linear-gradient(to right, transparent 50%, #4482ff 50%) !important',
|
|
334
|
+
tailProcessFirstChildColor: 'linear-gradient(to right, transparent 50%, #3b404c 50%) !important',
|
|
335
|
+
tailProcessColor: 'linear-gradient(to right, #4482ff 50%, #3b404c 50%) !important',
|
|
336
|
+
tailWaitLastChildColor: 'linear-gradient(to right, #3b404c 50%, transparent 50%) !important',
|
|
337
|
+
finishIconBgColor: `${colors.green['952']} !important`,
|
|
338
|
+
finishTailColor: `${colors.azure['500']} !important`,
|
|
339
|
+
processIconBgColor: `${colors.orange['425']} !important`,
|
|
340
|
+
waitIconBgColor: `${colors.neutral['50']} !important`,
|
|
341
|
+
waitIconColor: `${colors.ebonyClay['951']} !important`,
|
|
342
|
+
waitTitleColor: `${colors.neutral['50']} !important`,
|
|
343
|
+
waitTailColor: `${colors.gray['900']} !important`,
|
|
344
|
+
manyItemsTransform: 'rotate(-40deg)',
|
|
345
|
+
manyItemsWidth: '90px',
|
|
346
|
+
manyItemsHeight: '80px',
|
|
347
|
+
manyItemsWhiteSpace: 'break-spaces',
|
|
348
|
+
manyItemsMarginInlineStart: '40px',
|
|
349
|
+
manyItemsIconWidthHeight: '22px !important',
|
|
350
|
+
manyItemsTailHeight: '4px',
|
|
351
|
+
manyItemsTailBottom: '10px'
|
|
352
|
+
},
|
|
353
|
+
Switch: {
|
|
354
|
+
colorPrimary: colors.green['952'],
|
|
355
|
+
colorPrimaryHover: colors.green['951'],
|
|
356
|
+
colorPrimaryActive: colors.green['954'],
|
|
357
|
+
trackHeight: 26,
|
|
358
|
+
trackMinWidth: 57,
|
|
359
|
+
handleSize: 22,
|
|
360
|
+
colorTextQuaternary: colors.gray['250'],
|
|
361
|
+
colorTextTertiary: colors.gray['300'],
|
|
362
|
+
handleBg: colors.neutral['80'],
|
|
363
|
+
handleShadow: '1px 1px 2px 0 rgba(156, 169, 194, 0.5)',
|
|
364
|
+
fontSizeSM: exports.fontSize * 0.5625,
|
|
365
|
+
innerMinMargin: 0
|
|
366
|
+
},
|
|
367
|
+
Divider: {
|
|
368
|
+
colorSplit: colors.ebonyClay['175'],
|
|
369
|
+
colorText: colors.gray['500'],
|
|
370
|
+
colorTextHeading: colors.gray['500'],
|
|
371
|
+
fontWeight: 500,
|
|
372
|
+
textPaddingInline: 8,
|
|
373
|
+
margin: 48
|
|
114
374
|
}
|
|
115
375
|
}
|
|
116
376
|
};
|
|
@@ -131,8 +391,8 @@ exports.useToken = antd_1.theme.useToken;
|
|
|
131
391
|
* --color-{object_key}-{object_key}: {color_value};
|
|
132
392
|
*/
|
|
133
393
|
const getCssVariables = () => {
|
|
134
|
-
const { colors } = exports.theme;
|
|
135
|
-
|
|
394
|
+
const { colors, token } = exports.theme;
|
|
395
|
+
let prefix = '--color';
|
|
136
396
|
const result = {};
|
|
137
397
|
for (const [colorType, colorObject] of Object.entries(colors)) {
|
|
138
398
|
for (const [colorShade, colorValue] of Object.entries(colorObject)) {
|
|
@@ -140,6 +400,15 @@ const getCssVariables = () => {
|
|
|
140
400
|
result[variableName] = colorValue;
|
|
141
401
|
}
|
|
142
402
|
}
|
|
403
|
+
prefix = '--token';
|
|
404
|
+
if (token) {
|
|
405
|
+
for (const [key, value] of Object.entries(token)) {
|
|
406
|
+
const variableName = `${prefix}-${key}`;
|
|
407
|
+
if (typeof value === 'string' || typeof value === 'number') {
|
|
408
|
+
result[variableName] = value;
|
|
409
|
+
}
|
|
410
|
+
}
|
|
411
|
+
}
|
|
143
412
|
return result;
|
|
144
413
|
};
|
|
145
414
|
exports.getCssVariables = getCssVariables;
|
package/dist/esm/colors.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export declare const neutral: {
|
|
2
2
|
'50': string;
|
|
3
3
|
'75': string;
|
|
4
|
+
'80': string;
|
|
4
5
|
'100': string;
|
|
5
6
|
'150': string;
|
|
6
7
|
'200': string;
|
|
@@ -10,6 +11,7 @@ export declare const neutral: {
|
|
|
10
11
|
'375': string;
|
|
11
12
|
'400': string;
|
|
12
13
|
'500': string;
|
|
14
|
+
'550': string;
|
|
13
15
|
'600': string;
|
|
14
16
|
'700': string;
|
|
15
17
|
'800': string;
|
|
@@ -17,9 +19,11 @@ export declare const neutral: {
|
|
|
17
19
|
'950': string;
|
|
18
20
|
};
|
|
19
21
|
export declare const ebonyClay: {
|
|
22
|
+
'25': string;
|
|
20
23
|
'50': string;
|
|
21
24
|
'100': string;
|
|
22
25
|
'150': string;
|
|
26
|
+
'175': string;
|
|
23
27
|
'200': string;
|
|
24
28
|
'300': string;
|
|
25
29
|
'350': string;
|
|
@@ -32,18 +36,24 @@ export declare const ebonyClay: {
|
|
|
32
36
|
'600': string;
|
|
33
37
|
'700': string;
|
|
34
38
|
'800': string;
|
|
39
|
+
'850': string;
|
|
35
40
|
'900': string;
|
|
36
41
|
'950': string;
|
|
42
|
+
'951': string;
|
|
37
43
|
};
|
|
38
44
|
export declare const gray: {
|
|
39
45
|
'100': string;
|
|
46
|
+
'150': string;
|
|
40
47
|
'200': string;
|
|
48
|
+
'250': string;
|
|
41
49
|
'300': string;
|
|
42
50
|
'400': string;
|
|
43
51
|
'500': string;
|
|
44
52
|
'600': string;
|
|
45
53
|
'700': string;
|
|
54
|
+
'750': string;
|
|
46
55
|
'800': string;
|
|
56
|
+
'850': string;
|
|
47
57
|
'900': string;
|
|
48
58
|
'925': string;
|
|
49
59
|
'950': string;
|
|
@@ -54,12 +64,16 @@ export declare const red: {
|
|
|
54
64
|
'200': string;
|
|
55
65
|
'300': string;
|
|
56
66
|
'400': string;
|
|
67
|
+
'425': string;
|
|
68
|
+
'450': string;
|
|
57
69
|
'500': string;
|
|
58
70
|
'600': string;
|
|
59
71
|
'700': string;
|
|
60
72
|
'800': string;
|
|
61
73
|
'900': string;
|
|
62
74
|
'950': string;
|
|
75
|
+
'951': string;
|
|
76
|
+
'952': string;
|
|
63
77
|
};
|
|
64
78
|
export declare const green: {
|
|
65
79
|
'50': string;
|
|
@@ -73,6 +87,10 @@ export declare const green: {
|
|
|
73
87
|
'800': string;
|
|
74
88
|
'900': string;
|
|
75
89
|
'950': string;
|
|
90
|
+
'951': string;
|
|
91
|
+
'952': string;
|
|
92
|
+
'953': string;
|
|
93
|
+
'954': string;
|
|
76
94
|
};
|
|
77
95
|
export declare const blue: {
|
|
78
96
|
'50': string;
|
|
@@ -86,6 +104,10 @@ export declare const blue: {
|
|
|
86
104
|
'800': string;
|
|
87
105
|
'900': string;
|
|
88
106
|
'950': string;
|
|
107
|
+
'951': string;
|
|
108
|
+
'952': string;
|
|
109
|
+
'953': string;
|
|
110
|
+
'954': string;
|
|
89
111
|
};
|
|
90
112
|
export declare const purple: {
|
|
91
113
|
'50': string;
|
|
@@ -99,6 +121,9 @@ export declare const purple: {
|
|
|
99
121
|
'800': string;
|
|
100
122
|
'900': string;
|
|
101
123
|
'950': string;
|
|
124
|
+
'951': string;
|
|
125
|
+
'952': string;
|
|
126
|
+
'953': string;
|
|
102
127
|
};
|
|
103
128
|
export declare const pink: {
|
|
104
129
|
'50': string;
|
|
@@ -121,7 +146,6 @@ export declare const azure: {
|
|
|
121
146
|
'400': string;
|
|
122
147
|
'500': string;
|
|
123
148
|
'600': string;
|
|
124
|
-
'750': string;
|
|
125
149
|
'700': string;
|
|
126
150
|
'800': string;
|
|
127
151
|
'900': string;
|
|
@@ -133,12 +157,18 @@ export declare const orange: {
|
|
|
133
157
|
'200': string;
|
|
134
158
|
'300': string;
|
|
135
159
|
'400': string;
|
|
160
|
+
'425': string;
|
|
161
|
+
'450': string;
|
|
136
162
|
'500': string;
|
|
137
163
|
'600': string;
|
|
138
164
|
'700': string;
|
|
139
165
|
'800': string;
|
|
140
166
|
'900': string;
|
|
141
167
|
'950': string;
|
|
168
|
+
'951': string;
|
|
169
|
+
'952': string;
|
|
170
|
+
'953': string;
|
|
171
|
+
'954': string;
|
|
142
172
|
};
|
|
143
173
|
export declare const akinon: {
|
|
144
174
|
'50': string;
|
package/dist/esm/colors.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/colors.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO
|
|
1
|
+
{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/colors.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;CAmBnB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;CAsBrB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;CAgBhB,CAAC;AAEF,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;CAgBf,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;CAgBjB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;CAgBhB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;CAelB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYhB,CAAC;AAGF,eAAO,MAAM,KAAK;;;;;;;;;;;;CAYjB,CAAC;AAGF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;CAkBlB,CAAC;AAGF,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYlB,CAAC"}
|
package/dist/esm/colors.js
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
export const neutral = {
|
|
3
3
|
'50': '#ffffff',
|
|
4
4
|
'75': '#fbfcfd',
|
|
5
|
-
'
|
|
5
|
+
'80': '#fafafa',
|
|
6
|
+
'100': '#f5f6f6',
|
|
6
7
|
'150': '#f1f3f9',
|
|
7
8
|
'200': '#e5e5e5',
|
|
8
9
|
'250': '#d6e1e3',
|
|
@@ -11,6 +12,7 @@ export const neutral = {
|
|
|
11
12
|
'375': '#bfbfbf',
|
|
12
13
|
'400': '#a3a3a3',
|
|
13
14
|
'500': '#737373',
|
|
15
|
+
'550': '#626262',
|
|
14
16
|
'600': '#525252',
|
|
15
17
|
'700': '#404040',
|
|
16
18
|
'800': '#262626',
|
|
@@ -18,9 +20,11 @@ export const neutral = {
|
|
|
18
20
|
'950': '#0a0a0a'
|
|
19
21
|
};
|
|
20
22
|
export const ebonyClay = {
|
|
23
|
+
'25': '#6c7ebe',
|
|
21
24
|
'50': '#677084',
|
|
22
25
|
'100': '#5c6880',
|
|
23
26
|
'150': '#58669a',
|
|
27
|
+
'175': '#495679',
|
|
24
28
|
'200': '#515c7c',
|
|
25
29
|
'300': '#465178',
|
|
26
30
|
'350': '#43464f',
|
|
@@ -33,18 +37,24 @@ export const ebonyClay = {
|
|
|
33
37
|
'600': '#232b3b', // applied from design: header input bg
|
|
34
38
|
'700': '#1d2331',
|
|
35
39
|
'800': '#171d27',
|
|
40
|
+
'850': '#131826',
|
|
36
41
|
'900': '#11171e',
|
|
37
|
-
'950': '#0c111a'
|
|
42
|
+
'950': '#0c111a',
|
|
43
|
+
'951': '#000000bf'
|
|
38
44
|
};
|
|
39
45
|
export const gray = {
|
|
40
46
|
'100': '#f5f5f5',
|
|
47
|
+
'150': '#e9f0f7',
|
|
41
48
|
'200': '#e5e5e5',
|
|
49
|
+
'250': '#d4d6f0',
|
|
42
50
|
'300': '#d4d4d4',
|
|
43
51
|
'400': '#a3a3a3',
|
|
44
52
|
'500': '#788195', // applied from design: header text placeholder
|
|
45
53
|
'600': '#525252',
|
|
46
54
|
'700': '#404040',
|
|
55
|
+
'750': '#292b2c',
|
|
47
56
|
'800': '#262626',
|
|
57
|
+
'850': '#30363e',
|
|
48
58
|
'900': '#3b404c', // applied from design: layout border
|
|
49
59
|
'925': '#36373b',
|
|
50
60
|
'950': '#171717'
|
|
@@ -55,12 +65,16 @@ export const red = {
|
|
|
55
65
|
'200': '#fce0cf',
|
|
56
66
|
'300': '#fac7b1',
|
|
57
67
|
'400': '#f58d7a',
|
|
68
|
+
'425': '#ff5163',
|
|
69
|
+
'450': '#f05050',
|
|
58
70
|
'500': '#ef4444',
|
|
59
71
|
'600': '#d93636',
|
|
60
72
|
'700': '#b32525',
|
|
61
73
|
'800': '#8f1818',
|
|
62
74
|
'900': '#6b0e0e',
|
|
63
|
-
'950': '#450606'
|
|
75
|
+
'950': '#450606',
|
|
76
|
+
'951': '#e33030',
|
|
77
|
+
'952': '#f6b5b5'
|
|
64
78
|
};
|
|
65
79
|
export const green = {
|
|
66
80
|
'50': '#fafcf2',
|
|
@@ -73,7 +87,11 @@ export const green = {
|
|
|
73
87
|
'700': '#529e13',
|
|
74
88
|
'800': '#3d800d',
|
|
75
89
|
'900': '#275e07',
|
|
76
|
-
'950': '#163d03'
|
|
90
|
+
'950': '#163d03',
|
|
91
|
+
'951': '#67b50c',
|
|
92
|
+
'952': '#71d200',
|
|
93
|
+
'953': '#e3f6cc',
|
|
94
|
+
'954': '#7bd500'
|
|
77
95
|
};
|
|
78
96
|
export const blue = {
|
|
79
97
|
'50': '#f5fcff',
|
|
@@ -86,7 +104,11 @@ export const blue = {
|
|
|
86
104
|
'700': '#2153b8',
|
|
87
105
|
'800': '#153b94',
|
|
88
106
|
'900': '#0c286e',
|
|
89
|
-
'950': '#051647'
|
|
107
|
+
'950': '#051647',
|
|
108
|
+
'951': '#126a6f',
|
|
109
|
+
'952': '#75e2e7',
|
|
110
|
+
'953': '#c6f0f2',
|
|
111
|
+
'954': '#363d51'
|
|
90
112
|
};
|
|
91
113
|
export const purple = {
|
|
92
114
|
'50': '#fbf7fc',
|
|
@@ -99,7 +121,10 @@ export const purple = {
|
|
|
99
121
|
'700': '#72467b',
|
|
100
122
|
'800': '#633e6a',
|
|
101
123
|
'900': '#543659',
|
|
102
|
-
'950': '#341b37'
|
|
124
|
+
'950': '#341b37',
|
|
125
|
+
'951': '#7667b6',
|
|
126
|
+
'952': '#9387c7',
|
|
127
|
+
'953': '#eae7f4'
|
|
103
128
|
};
|
|
104
129
|
export const pink = {
|
|
105
130
|
'50': '#fff7fd',
|
|
@@ -123,7 +148,6 @@ export const azure = {
|
|
|
123
148
|
'400': '#599cff',
|
|
124
149
|
'500': '#4482ff', // applied from design: primary button color
|
|
125
150
|
'600': '#1b55f5',
|
|
126
|
-
'750': '#1890ff',
|
|
127
151
|
'700': '#1440e1',
|
|
128
152
|
'800': '#1734b6',
|
|
129
153
|
'900': '#19318f',
|
|
@@ -136,12 +160,18 @@ export const orange = {
|
|
|
136
160
|
'200': '#ffebbf',
|
|
137
161
|
'300': '#fcd997',
|
|
138
162
|
'400': '#fcb44e',
|
|
163
|
+
'425': '#ffaa49',
|
|
164
|
+
'450': '#ce8d0b',
|
|
139
165
|
'500': '#f98003',
|
|
140
166
|
'600': '#e06e02',
|
|
141
167
|
'700': '#ba5202',
|
|
142
168
|
'800': '#963d02',
|
|
143
169
|
'900': '#702900',
|
|
144
|
-
'950': '#471700'
|
|
170
|
+
'950': '#471700',
|
|
171
|
+
'951': '#ff7041',
|
|
172
|
+
'952': '#ff7041',
|
|
173
|
+
'953': '#fce0ce',
|
|
174
|
+
'954': '#ffc76b'
|
|
145
175
|
};
|
|
146
176
|
// Akinon brand color and shades.
|
|
147
177
|
export const akinon = {
|
package/dist/esm/index.d.ts
CHANGED
package/dist/esm/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}
|
package/dist/esm/index.js
CHANGED
package/dist/esm/theme.d.ts
CHANGED
|
@@ -34,7 +34,7 @@ export declare const useToken: typeof antdTheme.useToken;
|
|
|
34
34
|
* --color-{object_key}-{object_key}: {color_value};
|
|
35
35
|
*/
|
|
36
36
|
export declare const getCssVariables: () => {
|
|
37
|
-
[key: string]: string;
|
|
37
|
+
[key: string]: string | number;
|
|
38
38
|
};
|
|
39
39
|
export {};
|
|
40
40
|
//# sourceMappingURL=theme.d.ts.map
|
package/dist/esm/theme.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AAqCvD,eAAO,MAAM,QAAQ,KAAK,CAAC;AAE3B,KAAK,SAAS,GACV,QAAQ,GACR,OAAO,GACP,MAAM,GACN,QAAQ,GACR,KAAK,GACL,OAAO,GACP,MAAM,GACN,QAAQ,GACR,MAAM,GACN,WAAW,GACX,SAAS,CAAC;AAEd,KAAK,KAAK,GAAG;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,MAAM,GAAG,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;AAevC,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,EAAE,kBAkWnB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,EAAE,OAAO,SAAS,CAAC,QAA6B,CAAC;AAEtE;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe;;CA2B3B,CAAC"}
|
package/dist/esm/theme.js
CHANGED
|
@@ -49,6 +49,91 @@ export const theme = {
|
|
|
49
49
|
fontSize: fontSize * 0.875
|
|
50
50
|
},
|
|
51
51
|
components: {
|
|
52
|
+
Button: {
|
|
53
|
+
// type: primary
|
|
54
|
+
colorPrimary: colors.azure['500'],
|
|
55
|
+
colorPrimaryHover: colors.azure['600'],
|
|
56
|
+
colorPrimaryActive: colors.azure['700'],
|
|
57
|
+
colorPrimaryText: colors.neutral['50'],
|
|
58
|
+
primaryShadow: 'unset',
|
|
59
|
+
// type: default (secondary)
|
|
60
|
+
defaultBg: colors.neutral['50'],
|
|
61
|
+
defaultColor: colors.azure['500'],
|
|
62
|
+
defaultHoverBg: colors.neutral['100'],
|
|
63
|
+
defaultHoverColor: colors.azure['500'],
|
|
64
|
+
defaultActiveBg: colors.neutral['50'],
|
|
65
|
+
defaultActiveColor: colors.azure['500'],
|
|
66
|
+
defaultBorderColor: colors.azure['500'],
|
|
67
|
+
defaultShadow: 'unset',
|
|
68
|
+
defaultBgSm: colors.gray['750'],
|
|
69
|
+
defaultBgSmHover: colors.gray['800'],
|
|
70
|
+
// prop: danger
|
|
71
|
+
colorError: colors.red['450'],
|
|
72
|
+
colorErrorHover: colors.red['500'],
|
|
73
|
+
colorErrorActive: colors.red['600'],
|
|
74
|
+
colorErrorBorder: colors.red['500'],
|
|
75
|
+
dangerShadow: 'unset',
|
|
76
|
+
colorErrorBgSM: colors.red['425'],
|
|
77
|
+
colorErrorBgSMHover: colors.red['450'],
|
|
78
|
+
colorErrorSMHover: colors.neutral['50'],
|
|
79
|
+
// type: success
|
|
80
|
+
colorSuccessBg: colors.green['500'],
|
|
81
|
+
colorSuccessBorder: colors.green['500'],
|
|
82
|
+
colorSuccessHover: colors.green['600'],
|
|
83
|
+
colorSuccessActive: colors.green['700'],
|
|
84
|
+
// type: warning
|
|
85
|
+
colorWarningBg: colors.neutral['50'],
|
|
86
|
+
colorWarningBorder: colors.neutral['50'],
|
|
87
|
+
colorWarningHover: colors.neutral['100'],
|
|
88
|
+
colorWarningActive: colors.neutral['50'],
|
|
89
|
+
colorWarningText: colors.orange['450'],
|
|
90
|
+
// prop: disabled
|
|
91
|
+
colorBgContainerDisabled: colors.neutral['100'],
|
|
92
|
+
colorTextDisabled: colors.neutral['350'],
|
|
93
|
+
borderColorDisabled: colors.neutral['350'],
|
|
94
|
+
// prop: ghost
|
|
95
|
+
defaultGhostBorderColor: 'transparent',
|
|
96
|
+
defaultGhostColor: colors.azure['500'],
|
|
97
|
+
// all buttons
|
|
98
|
+
contentFontSizeSM: fontSize * 0.75,
|
|
99
|
+
borderRadiusSM: 11,
|
|
100
|
+
paddingBlockSM: 1,
|
|
101
|
+
paddingInlineSM: 20,
|
|
102
|
+
colorText: colors.neutral['50'],
|
|
103
|
+
colorTextHover: colors.neutral['50'],
|
|
104
|
+
contentLineHeightSM: 1,
|
|
105
|
+
controlHeight: 40,
|
|
106
|
+
borderRadius: 5,
|
|
107
|
+
paddingBlock: 10,
|
|
108
|
+
paddingInline: 45,
|
|
109
|
+
contentLineHeight: 1,
|
|
110
|
+
fontWeight: 600
|
|
111
|
+
},
|
|
112
|
+
Checkbox: {
|
|
113
|
+
colorPrimary: colors.ebonyClay['25'],
|
|
114
|
+
colorBgContainer: colors.gray['150'],
|
|
115
|
+
colorText: colors.neutral['350'],
|
|
116
|
+
colorChecked: colors.neutral['50'],
|
|
117
|
+
controlInteractiveSize: 20
|
|
118
|
+
},
|
|
119
|
+
Badge: {
|
|
120
|
+
colorText: colors.neutral['50']
|
|
121
|
+
},
|
|
122
|
+
Radio: {
|
|
123
|
+
radioSize: 14,
|
|
124
|
+
dotSize: 5,
|
|
125
|
+
colorPrimary: colors.azure['500'],
|
|
126
|
+
colorBgContainer: colors.gray['150'],
|
|
127
|
+
colorText: colors.neutral['350'],
|
|
128
|
+
colorChecked: colors.neutral['50'],
|
|
129
|
+
colorBorder: colors.neutral['550'],
|
|
130
|
+
buttonBg: colors.ebonyClay['600'],
|
|
131
|
+
buttonColor: colors.neutral['50'],
|
|
132
|
+
buttonSolidCheckedBg: colors.ebonyClay['600'],
|
|
133
|
+
buttonSolidCheckedColor: colors.neutral['50'],
|
|
134
|
+
buttonSolidCheckedBorder: colors.azure['500'],
|
|
135
|
+
borderRadiusSM: 100
|
|
136
|
+
},
|
|
52
137
|
Layout: {
|
|
53
138
|
headerBg: colors.ebonyClay['500'],
|
|
54
139
|
siderBg: colors.ebonyClay['500']
|
|
@@ -69,13 +154,82 @@ export const theme = {
|
|
|
69
154
|
},
|
|
70
155
|
Breadcrumb: {
|
|
71
156
|
fontSize: fontSize * 0.625,
|
|
72
|
-
|
|
157
|
+
itemColor: colors.azure['500'],
|
|
158
|
+
lastItemColor: colors.gray['500'],
|
|
159
|
+
paddingBottom: fontSize * 0.5,
|
|
160
|
+
borderBottom: '1px solid var(--color-gray-900)',
|
|
161
|
+
paddingLeft: 20,
|
|
162
|
+
paddingRight: 20,
|
|
163
|
+
marginLeft: 8,
|
|
164
|
+
marginRight: 8,
|
|
165
|
+
fontWeight: 600,
|
|
166
|
+
lineHeight: 1.5,
|
|
167
|
+
separatorColor: colors.azure['500'],
|
|
168
|
+
letterSpacing: fontSize * 0.03,
|
|
169
|
+
marginInline: 0,
|
|
170
|
+
height: 'auto'
|
|
171
|
+
},
|
|
172
|
+
Tag: {
|
|
173
|
+
defaultColorSuccess: colors.green['951'],
|
|
174
|
+
defaultBorderColorSuccess: colors.green['952'],
|
|
175
|
+
defaultBgSuccess: colors.green['953'],
|
|
176
|
+
defaultColorWaiting1: colors.orange['951'],
|
|
177
|
+
defaultBorderColorWaiting1: colors.orange['952'],
|
|
178
|
+
defaultBgWaiting1: colors.orange['953'],
|
|
179
|
+
defaultColorWaiting2: colors.blue['951'],
|
|
180
|
+
defaultBorderColorWaiting2: colors.blue['952'],
|
|
181
|
+
defaultBgWaiting2: colors.blue['953'],
|
|
182
|
+
defaultColorWaiting3: colors.purple['951'],
|
|
183
|
+
defaultBorderColorWaiting3: colors.purple['952'],
|
|
184
|
+
defaultBgWaiting3: colors.purple['953'],
|
|
185
|
+
defaultColorFailed: colors.red['951'],
|
|
186
|
+
defaultBorderColorFailed: colors.red['450'],
|
|
187
|
+
defaultBgFailed: colors.red['952'],
|
|
188
|
+
borderRadius: 5,
|
|
189
|
+
fontSize: fontSize * 0.8125,
|
|
190
|
+
paddingLeft: 15,
|
|
191
|
+
paddingRight: 15,
|
|
192
|
+
fontSizeClose: fontSize * 0.6875,
|
|
193
|
+
fontWeight: 500
|
|
194
|
+
},
|
|
195
|
+
Tooltip: {
|
|
196
|
+
bgColor: colors.ebonyClay['951']
|
|
197
|
+
},
|
|
198
|
+
Flex: {},
|
|
199
|
+
Spin: {},
|
|
200
|
+
Alert: {
|
|
201
|
+
defaultColorSuccess: colors.green['951'],
|
|
202
|
+
defaultBorderColorSuccess: colors.green['952'],
|
|
203
|
+
defaultBgSuccess: colors.green['953'],
|
|
204
|
+
defaultColorWaiting1: colors.orange['951'],
|
|
205
|
+
defaultBorderColorWaiting1: colors.orange['952'],
|
|
206
|
+
defaultBgWaiting1: colors.orange['953'],
|
|
207
|
+
defaultColorWaiting2: colors.blue['951'],
|
|
208
|
+
defaultBorderColorWaiting2: colors.blue['952'],
|
|
209
|
+
defaultBgWaiting2: colors.blue['953'],
|
|
210
|
+
defaultColorWaiting3: colors.purple['951'],
|
|
211
|
+
defaultBorderColorWaiting3: colors.purple['952'],
|
|
212
|
+
defaultBgWaiting3: colors.purple['953'],
|
|
213
|
+
defaultColorFailed: colors.red['951'],
|
|
214
|
+
defaultBorderColorFailed: colors.red['450'],
|
|
215
|
+
defaultBgFailed: colors.red['952']
|
|
216
|
+
},
|
|
217
|
+
Grid: {
|
|
218
|
+
rowMaxWidth: 1368,
|
|
219
|
+
gutter: 24
|
|
73
220
|
},
|
|
74
221
|
Card: {
|
|
75
222
|
colorBgContainer: colors.ebonyClay['450'],
|
|
76
223
|
colorTextDescription: colors.neutral['100'],
|
|
77
224
|
headerFontSize: fontSize * 1.25,
|
|
78
|
-
fontSize: fontSize * 0.875
|
|
225
|
+
fontSize: fontSize * 0.875,
|
|
226
|
+
borderRadiusLG: 10,
|
|
227
|
+
paddingLG: 40,
|
|
228
|
+
padding: 24,
|
|
229
|
+
headerHeight: fontSize * 1.25,
|
|
230
|
+
lineHeight: 1,
|
|
231
|
+
colorBorderSecondary: colors.ebonyClay['550'],
|
|
232
|
+
lineWidth: 2
|
|
79
233
|
},
|
|
80
234
|
Collapse: {
|
|
81
235
|
headerPadding: '0 0 12px',
|
|
@@ -87,7 +241,22 @@ export const theme = {
|
|
|
87
241
|
Form: {
|
|
88
242
|
itemMarginBottom: 16,
|
|
89
243
|
labelColor: colors.neutral['100'],
|
|
90
|
-
verticalLabelPadding:
|
|
244
|
+
verticalLabelPadding: '7px 0',
|
|
245
|
+
// TODO: contribute to antd to use normal and percentage
|
|
246
|
+
lineHeight: 'normal',
|
|
247
|
+
fontWeight: 600,
|
|
248
|
+
colorError: colors.red['425'],
|
|
249
|
+
verticalErrorPadding: '7px 0'
|
|
250
|
+
},
|
|
251
|
+
Pagination: {
|
|
252
|
+
colorText: colors.ebonyClay['950'],
|
|
253
|
+
itemInputBg: colors.neutral['75'],
|
|
254
|
+
colorBorder: colors.neutral['350'],
|
|
255
|
+
borderRadius: 4,
|
|
256
|
+
itemActiveBg: colors.blue['200'],
|
|
257
|
+
colorTextDisabled: colors.neutral['375'],
|
|
258
|
+
marginXS: 0,
|
|
259
|
+
itemSizeSM: 38
|
|
91
260
|
},
|
|
92
261
|
Select: {
|
|
93
262
|
colorTextDisabled: colors.ebonyClay['350'],
|
|
@@ -101,13 +270,104 @@ export const theme = {
|
|
|
101
270
|
colorBgContainer: colors.ebonyClay['475'],
|
|
102
271
|
fontSizeLG: fontSize * 0.875,
|
|
103
272
|
colorBorder: colors.ebonyClay['550'],
|
|
104
|
-
lineWidth: 2
|
|
273
|
+
lineWidth: 2,
|
|
274
|
+
activeShadow: 'unset',
|
|
275
|
+
errorActiveShadow: 'unset',
|
|
276
|
+
warningActiveShadow: 'unset',
|
|
277
|
+
fontWeight: 600,
|
|
278
|
+
colorBgContainerDisabled: colors.gray['850'],
|
|
279
|
+
colorTextDisabled: colors.ebonyClay['375']
|
|
105
280
|
},
|
|
106
281
|
InputNumber: {
|
|
107
282
|
colorBgContainer: colors.ebonyClay['475'],
|
|
108
283
|
fontSizeLG: fontSize * 0.875,
|
|
109
284
|
colorBorder: colors.ebonyClay['550'],
|
|
110
285
|
lineWidth: 2
|
|
286
|
+
},
|
|
287
|
+
Modal: {
|
|
288
|
+
titleFontSize: fontSize * 1.25,
|
|
289
|
+
padding: '20px 35px',
|
|
290
|
+
fontWeight: 500,
|
|
291
|
+
borderBottom: `1px solid ${colors.blue['954']}`,
|
|
292
|
+
footerPadding: '0 35px 20px 35px',
|
|
293
|
+
closeIconColor: colors.neutral['100'],
|
|
294
|
+
contentPadding: 0,
|
|
295
|
+
footerMarginTop: 0,
|
|
296
|
+
closeTop: 20,
|
|
297
|
+
closeRight: 27,
|
|
298
|
+
headerMarginBottom: 0,
|
|
299
|
+
badgeColorContent: '',
|
|
300
|
+
badgeColorTop: 27,
|
|
301
|
+
badgeColorLeft: 0,
|
|
302
|
+
badgeColorWidth: 4,
|
|
303
|
+
badgeColorHeight: 16,
|
|
304
|
+
badgeColorPosition: 'absolute',
|
|
305
|
+
badgeColorBackgroundColor: colors.red['425']
|
|
306
|
+
},
|
|
307
|
+
Progress: {
|
|
308
|
+
strokeColor: colors.green['100'],
|
|
309
|
+
trailColor: colors.ebonyClay['850'],
|
|
310
|
+
borderRadius: '0',
|
|
311
|
+
height: '18px !important',
|
|
312
|
+
successBgColor: 'repeating-linear-gradient(60deg, rgba(36, 180, 19, 1) 0, rgba(36, 180, 19, 1) 5px, rgba(72, 192, 62, 1) 5px, rgba(72, 192, 62, 1) 10px) !important'
|
|
313
|
+
},
|
|
314
|
+
Steps: {
|
|
315
|
+
zero: '0 !important',
|
|
316
|
+
auto: 'auto !important',
|
|
317
|
+
none: 'none !important',
|
|
318
|
+
full: '100% !important',
|
|
319
|
+
flex: 'flex !important',
|
|
320
|
+
rowGap: '10px',
|
|
321
|
+
iconWidthHeight: '38px !important',
|
|
322
|
+
iconSize: '18px !important',
|
|
323
|
+
paddingInlineEnd: '16px',
|
|
324
|
+
tailTop: '16px',
|
|
325
|
+
tailHeight: '3px',
|
|
326
|
+
titleFontSize: '14px !important',
|
|
327
|
+
iconColor: 'white',
|
|
328
|
+
tailColor: 'linear-gradient(to right, #343639 50%, transparent 50%) !important',
|
|
329
|
+
tailLastChildColor: 'linear-gradient(to right, #4482ff 50%, transparent 50%) !important',
|
|
330
|
+
tailFirstChildColor: 'linear-gradient(to right, transparent 50%, #4482ff 50%) !important',
|
|
331
|
+
tailProcessFirstChildColor: 'linear-gradient(to right, transparent 50%, #3b404c 50%) !important',
|
|
332
|
+
tailProcessColor: 'linear-gradient(to right, #4482ff 50%, #3b404c 50%) !important',
|
|
333
|
+
tailWaitLastChildColor: 'linear-gradient(to right, #3b404c 50%, transparent 50%) !important',
|
|
334
|
+
finishIconBgColor: `${colors.green['952']} !important`,
|
|
335
|
+
finishTailColor: `${colors.azure['500']} !important`,
|
|
336
|
+
processIconBgColor: `${colors.orange['425']} !important`,
|
|
337
|
+
waitIconBgColor: `${colors.neutral['50']} !important`,
|
|
338
|
+
waitIconColor: `${colors.ebonyClay['951']} !important`,
|
|
339
|
+
waitTitleColor: `${colors.neutral['50']} !important`,
|
|
340
|
+
waitTailColor: `${colors.gray['900']} !important`,
|
|
341
|
+
manyItemsTransform: 'rotate(-40deg)',
|
|
342
|
+
manyItemsWidth: '90px',
|
|
343
|
+
manyItemsHeight: '80px',
|
|
344
|
+
manyItemsWhiteSpace: 'break-spaces',
|
|
345
|
+
manyItemsMarginInlineStart: '40px',
|
|
346
|
+
manyItemsIconWidthHeight: '22px !important',
|
|
347
|
+
manyItemsTailHeight: '4px',
|
|
348
|
+
manyItemsTailBottom: '10px'
|
|
349
|
+
},
|
|
350
|
+
Switch: {
|
|
351
|
+
colorPrimary: colors.green['952'],
|
|
352
|
+
colorPrimaryHover: colors.green['951'],
|
|
353
|
+
colorPrimaryActive: colors.green['954'],
|
|
354
|
+
trackHeight: 26,
|
|
355
|
+
trackMinWidth: 57,
|
|
356
|
+
handleSize: 22,
|
|
357
|
+
colorTextQuaternary: colors.gray['250'],
|
|
358
|
+
colorTextTertiary: colors.gray['300'],
|
|
359
|
+
handleBg: colors.neutral['80'],
|
|
360
|
+
handleShadow: '1px 1px 2px 0 rgba(156, 169, 194, 0.5)',
|
|
361
|
+
fontSizeSM: fontSize * 0.5625,
|
|
362
|
+
innerMinMargin: 0
|
|
363
|
+
},
|
|
364
|
+
Divider: {
|
|
365
|
+
colorSplit: colors.ebonyClay['175'],
|
|
366
|
+
colorText: colors.gray['500'],
|
|
367
|
+
colorTextHeading: colors.gray['500'],
|
|
368
|
+
fontWeight: 500,
|
|
369
|
+
textPaddingInline: 8,
|
|
370
|
+
margin: 48
|
|
111
371
|
}
|
|
112
372
|
}
|
|
113
373
|
};
|
|
@@ -128,8 +388,8 @@ export const useToken = antdTheme.useToken;
|
|
|
128
388
|
* --color-{object_key}-{object_key}: {color_value};
|
|
129
389
|
*/
|
|
130
390
|
export const getCssVariables = () => {
|
|
131
|
-
const { colors } = theme;
|
|
132
|
-
|
|
391
|
+
const { colors, token } = theme;
|
|
392
|
+
let prefix = '--color';
|
|
133
393
|
const result = {};
|
|
134
394
|
for (const [colorType, colorObject] of Object.entries(colors)) {
|
|
135
395
|
for (const [colorShade, colorValue] of Object.entries(colorObject)) {
|
|
@@ -137,5 +397,14 @@ export const getCssVariables = () => {
|
|
|
137
397
|
result[variableName] = colorValue;
|
|
138
398
|
}
|
|
139
399
|
}
|
|
400
|
+
prefix = '--token';
|
|
401
|
+
if (token) {
|
|
402
|
+
for (const [key, value] of Object.entries(token)) {
|
|
403
|
+
const variableName = `${prefix}-${key}`;
|
|
404
|
+
if (typeof value === 'string' || typeof value === 'number') {
|
|
405
|
+
result[variableName] = value;
|
|
406
|
+
}
|
|
407
|
+
}
|
|
408
|
+
}
|
|
140
409
|
return result;
|
|
141
410
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@akinon/ui-theme",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Akinon UI's default theme values.",
|
|
6
6
|
"type": "module",
|
|
@@ -10,16 +10,14 @@
|
|
|
10
10
|
"dist"
|
|
11
11
|
],
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"antd": "5.
|
|
13
|
+
"antd": "5.17.0"
|
|
14
14
|
},
|
|
15
15
|
"devDependencies": {
|
|
16
16
|
"clean-package": "2.2.0",
|
|
17
17
|
"copyfiles": "^2.4.1",
|
|
18
18
|
"rimraf": "^5.0.5",
|
|
19
19
|
"typescript": "^5.2.2",
|
|
20
|
-
"@akinon/
|
|
21
|
-
"@akinon/typescript-config": "0.1.0",
|
|
22
|
-
"@akinon/vite-config": "0.3.0"
|
|
20
|
+
"@akinon/typescript-config": "0.3.0"
|
|
23
21
|
},
|
|
24
22
|
"peerDependencies": {
|
|
25
23
|
"react": ">=18",
|
|
@@ -41,10 +39,6 @@
|
|
|
41
39
|
"build:commonjs": "tsc --module commonjs --outDir dist/cjs",
|
|
42
40
|
"copy:files": "copyfiles -u 1 src/**/*.css dist/esm && copyfiles -u 1 src/**/*.css dist/cjs",
|
|
43
41
|
"clean": "rimraf dist/",
|
|
44
|
-
"lint": "eslint *.ts*",
|
|
45
|
-
"test": "vitest run",
|
|
46
|
-
"test:ui": "vitest --ui",
|
|
47
|
-
"test:watch": "vitest watch",
|
|
48
42
|
"typecheck": "tsc --noEmit"
|
|
49
43
|
}
|
|
50
44
|
}
|