Skip to content

Commit 8128c0b

Browse files
RylanBotRylanBot
committed
refactor: automatically extract the color index for tokens from CSS
1 parent 79785e8 commit 8128c0b

File tree

8 files changed

+202
-196
lines changed

8 files changed

+202
-196
lines changed

‎packages/theme-generator/src/color-panel/built-in/color-map.js‎

Lines changed: 47 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,3 @@
1-
export const DEFAULT_BRAND = '#0052D9';
2-
const DEFAULT_GRAY = '#ddd';
3-
const DEFAULT_SUCCESS = '#2ba471';
4-
const DEFAULT_ERROR = '#d54941';
5-
const DEFAULT_WARNING = '#e37318';
6-
7-
export const DEFAULT_FUNCTION_COLORS = {
8-
gray: DEFAULT_GRAY,
9-
success: DEFAULT_SUCCESS,
10-
error: DEFAULT_ERROR,
11-
warning: DEFAULT_WARNING,
12-
};
13-
14-
/* ============================== */
15-
16-
export const DEFAULT_COLORS = [
17-
{
18-
name: '腾讯蓝',
19-
enName: 'Tencent Blue',
20-
value: DEFAULT_BRAND,
21-
},
22-
{
23-
name: '风信子蓝',
24-
enName: 'Hyacinth Blue',
25-
value: '#0894FA',
26-
},
27-
{
28-
name: '金花茶黄',
29-
enName: 'Petelotii Yellow',
30-
value: '#F3B814',
31-
},
32-
];
33-
34-
export const RECOMMEND_COLORS = [
35-
{
36-
name: '珙桐绿',
37-
enName: 'Davidia Green',
38-
value: '#45C58B',
39-
},
40-
{
41-
name: '鸢尾绿',
42-
enName: 'Viridiflora Green',
43-
value: '#0ED6CA',
44-
},
45-
{
46-
name: '花丹蓝',
47-
enName: 'Plumbago Blue',
48-
value: '#53B1FD',
49-
},
50-
{
51-
name: '百子莲紫',
52-
enName: 'Agapanthus Purple',
53-
value: '#7A5AF8',
54-
},
55-
{
56-
name: '玉兰粉',
57-
enName: 'Yulania Pink',
58-
value: '#EF45B3',
59-
},
60-
{
61-
name: '豆衫红',
62-
enName: 'Taxus Red',
63-
value: '#F54343',
64-
},
65-
{
66-
name: '蔷薇红',
67-
enName: 'Multiflora Red',
68-
value: '#FF5479',
69-
},
70-
{
71-
name: '万寿菊橙',
72-
enName: 'Marigold Orange',
73-
value: '#FD853A',
74-
},
75-
];
76-
77-
export const SCENE_COLORS = [
78-
{
79-
name: '微信绿',
80-
enName: 'WeChat Green',
81-
value: '#07C160',
82-
},
83-
{
84-
name: '腾云黑',
85-
enName: 'TCloud Black',
86-
value: '#262626',
87-
},
88-
{
89-
name: '文旅紫',
90-
enName: 'Tourism Purple',
91-
value: '#623BFF',
92-
},
93-
{
94-
name: '政务红',
95-
enName: 'Government Red',
96-
value: '#EE1C25',
97-
},
98-
];
99-
100-
/* ============================== */
101-
1021
/* `idx` 对应实际的颜色索引，例如 `--td-brand-color-light: var(--td-brand-1)` */
1032

1043
export const BRAND_TOKEN_MAP = [
@@ -107,51 +6,51 @@ export const BRAND_TOKEN_MAP = [
1076
{ name: '--td-brand-color-disabled', idx: 3 },
1087
];
1098

110-
const GRAY_TOKEN_MAP = [
111-
{ name: '--td-bg-color-container-hover', idx: 1 },
112-
{ name: '--td-bg-color-secondarycontainer', idx: 1 },
113-
{ name: '--td-bg-color-secondarycontainer-hover', idx: 2 },
114-
{ name: '--td-bg-color-component-disabled', idx: 2 },
115-
{ name: '--td-bg-color-page', type: '', idx: 2 },
116-
{ name: '--td-bg-color-container-active', idx: 3 },
117-
{ name: '--td-bg-color-component', type: '', idx: 3 },
118-
{ name: '--td-component-stroke', type: '', idx: 3 },
119-
{ name: '--td-bg-color-secondarycontainer-active', idx: 4 },
120-
{ name: '--td-bg-color-component-hover', idx: 4 },
121-
{ name: '--td-component-border', idx: 4 },
122-
{ name: '--td-bg-color-component-active', idx: 6 },
123-
];
124-
125-
const SUCCESS_TOKEN_MAP = [
126-
{ name: '--td-success-color-light', idx: 1 },
127-
{ name: '--td-success-color-focus', idx: 2 },
128-
{ name: '--td-success-color-disabled', idx: 3 },
129-
{ name: '--td-success-color-hover', idx: 4 },
130-
{ name: '--td-success-color', idx: 5 },
131-
{ name: '--td-success-color-active', idx: 6 },
132-
];
133-
134-
const ERROR_TOKEN_MAP = [
135-
{ name: '--td-error-color-light', idx: 1 },
136-
{ name: '--td-error-color-focus', idx: 2 },
137-
{ name: '--td-error-color-disabled', type: 'disabled', idx: 3 },
138-
{ name: '--td-error-color-hover', type: 'hover', idx: 5 },
139-
{ name: '--td-error-color', type: 'main', idx: 6 },
140-
{ name: '--td-error-color-active', type: 'active', idx: 7 },
141-
];
142-
143-
const WARNING_TOKEN_MAP = [
144-
{ name: '--td-warning-color-light', idx: 1 },
145-
{ name: '--td-warning-color-focus', idx: 2 },
146-
{ name: '--td-warning-color-disabled', idx: 3 },
147-
{ name: '--td-warning-color-hover', idx: 4 },
148-
{ name: '--td-warning-color', idx: 5 },
149-
{ name: '--td-warning-color-active', idx: 6 },
150-
];
151-
152-
export const FUNCTION_TOKEN_MAPS = {
153-
gray: GRAY_TOKEN_MAP,
154-
success: SUCCESS_TOKEN_MAP,
155-
error: ERROR_TOKEN_MAP,
156-
warning: WARNING_TOKEN_MAP,
9+
export const GRAY_TOKENS = [
10+
'--td-bg-color-container-hover',
11+
'--td-bg-color-secondarycontainer',
12+
'--td-bg-color-secondarycontainer-hover',
13+
'--td-bg-color-component-disabled',
14+
'--td-bg-color-page',
15+
'--td-bg-color-container-active',
16+
'--td-bg-color-component',
17+
'--td-component-stroke',
18+
'--td-bg-color-secondarycontainer-active',
19+
'--td-bg-color-component-hover',
20+
'--td-component-border',
21+
'--td-bg-color-component-active',
22+
];
23+
24+
export const SUCCESS_TOKENS = [
25+
'--td-success-color-light',
26+
'--td-success-color-focus',
27+
'--td-success-color-disabled',
28+
'--td-success-color-hover',
29+
'--td-success-color',
30+
'--td-success-color-active',
31+
];
32+
33+
export const ERROR_TOKENS = [
34+
'--td-error-color-light',
35+
'--td-error-color-focus',
36+
'--td-error-color-disabled',
37+
'--td-error-color-hover',
38+
'--td-error-color',
39+
'--td-error-color-active',
40+
];
41+
42+
export const WARNING_TOKENS = [
43+
'--td-warning-color-light',
44+
'--td-warning-color-focus',
45+
'--td-warning-color-disabled',
46+
'--td-warning-color-hover',
47+
'--td-warning-color',
48+
'--td-warning-color-active',
49+
];
50+
51+
export const FUNCTION_TOKENS = {
52+
gray: GRAY_TOKENS,
53+
success: SUCCESS_TOKENS,
54+
error: ERROR_TOKENS,
55+
warning: WARNING_TOKENS,
15756
};

‎packages/theme-generator/src/color-panel/built-in/color-preset.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
export const DEFAULT_COLORS = [
2+
{
3+
name: '腾讯蓝',
4+
enName: 'Tencent Blue',
5+
value: '#0052D9',
6+
},
7+
{
8+
name: '风信子蓝',
9+
enName: 'Hyacinth Blue',
10+
value: '#0894FA',
11+
},
12+
{
13+
name: '金花茶黄',
14+
enName: 'Petelotii Yellow',
15+
value: '#F3B814',
16+
},
17+
];
18+
19+
export const RECOMMEND_COLORS = [
20+
{
21+
name: '珙桐绿',
22+
enName: 'Davidia Green',
23+
value: '#45C58B',
24+
},
25+
{
26+
name: '鸢尾绿',
27+
enName: 'Viridiflora Green',
28+
value: '#0ED6CA',
29+
},
30+
{
31+
name: '花丹蓝',
32+
enName: 'Plumbago Blue',
33+
value: '#53B1FD',
34+
},
35+
{
36+
name: '百子莲紫',
37+
enName: 'Agapanthus Purple',
38+
value: '#7A5AF8',
39+
},
40+
{
41+
name: '玉兰粉',
42+
enName: 'Yulania Pink',
43+
value: '#EF45B3',
44+
},
45+
{
46+
name: '豆衫红',
47+
enName: 'Taxus Red',
48+
value: '#F54343',
49+
},
50+
{
51+
name: '蔷薇红',
52+
enName: 'Multiflora Red',
53+
value: '#FF5479',
54+
},
55+
{
56+
name: '万寿菊橙',
57+
enName: 'Marigold Orange',
58+
value: '#FD853A',
59+
},
60+
];
61+
62+
export const SCENE_COLORS = [
63+
{
64+
name: '微信绿',
65+
enName: 'WeChat Green',
66+
value: '#07C160',
67+
},
68+
{
69+
name: '腾云黑',
70+
enName: 'TCloud Black',
71+
value: '#262626',
72+
},
73+
{
74+
name: '文旅紫',
75+
enName: 'Tourism Purple',
76+
value: '#623BFF',
77+
},
78+
{
79+
name: '政务红',
80+
enName: 'Government Red',
81+
value: '#EE1C25',
82+
},
83+
];
84+
85+
export const ALL_PRESET_COLORS = [...DEFAULT_COLORS, ...RECOMMEND_COLORS, ...SCENE_COLORS];

0 commit comments

Comments
 (0)