-
-
Notifications
You must be signed in to change notification settings - Fork 56
/
element-preset.js
110 lines (104 loc) 路 3.5 KB
/
element-preset.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
const palettes = {
base: ['primary', 'success', 'warning', 'danger', 'error', 'info'],
hasLight9: ['primary'],
hasLight2: ['success', 'warning', 'danger', 'error', 'info'], // danger === error
};
const hasLight9 = function (group) {
const colors = {};
group.forEach((name) => {
colors[`el-${name}-light`] = {};
for (let index = 9; index > 0; index--) {
colors[`el-${name}-light`][
index * 100
] = `var(--el-color-${name}-light-${index})`;
}
});
return colors;
};
const hasLight2 = function (group) {
const colors = {};
group.forEach((name) => {
colors[`el-${name}-light`] = `var(--el-color-${name}-light)`;
colors[`el-${name}-lighter`] = `var(--el-color-${name}-lighter)`;
});
return colors;
};
const baseColor = function (group) {
const colors = {};
group.forEach((name) => {
colors[`el-${name}`] = `var(--el-color-${name})`;
});
return colors;
};
const getColors = function (palettes) {
const colors = {};
for (const key in palettes) {
const group = palettes[key];
if (key === 'base') {
Object.assign(colors, baseColor(group));
} else if (key === 'hasLight9') {
Object.assign(colors, hasLight9(group));
} else if (key === 'hasLight2') {
Object.assign(colors, hasLight2(group));
}
}
// console.log(colors);
return colors;
};
module.exports = {
theme: {
extend: {
colors: getColors(palettes),
},
},
};
// --el-color-white: #ffffff;
// --el-color-black: #000000;
// --el-color-primary: #409eff;
// --el-color-primary-light-1: #53a8ff;
// --el-color-primary-light-2: #66b1ff;
// --el-color-primary-light-3: #79bbff;
// --el-color-primary-light-4: #8cc5ff;
// --el-color-primary-light-5: #a0cfff;
// --el-color-primary-light-6: #b3d8ff;
// --el-color-primary-light-7: #c6e2ff;
// --el-color-primary-light-8: #d9ecff;
// --el-color-primary-light-9: #ecf5ff;
// --el-color-success: #67c23a;
// --el-color-success-light: #e1f3d8;
// --el-color-success-lighter: #f0f9eb;
// --el-color-warning: #e6a23c;
// --el-color-warning-light: #faecd8;
// --el-color-warning-lighter: #fdf6ec;
// --el-color-danger: #f56c6c;
// --el-color-danger-light: #fde2e2;
// --el-color-danger-lighter: #fef0f0;
// --el-color-error: #f56c6c;
// --el-color-error-light: #fde2e2;
// --el-color-error-lighter: #fef0f0;
// --el-color-info: #909399;
// --el-color-info-light: #e9e9eb;
// --el-color-info-lighter: #f4f4f5;
// --el-text-color-primary: #303133;
// --el-text-color-regular: #606266;
// --el-text-color-secondary: #909399;
// --el-text-color-placeholder: #c0c4cc;
// --el-border-color-base: #dcdfe6;
// --el-border-color-light: #e4e7ed;
// --el-border-color-lighter: #ebeef5;
// --el-border-color-extra-light: #f2f6fc;
// --el-background-color-base: #f5f7fa;
// --el-border-width-base: 1px;
// --el-border-style-base: solid;
// --el-border-color-hover: var(--el-text-color-placeholder);
// --el-border-base: var(--el-border-width-base) var(--el-border-style-base) var(--el-border-color-base);
// --el-border-radius-base: 4px;
// --el-border-radius-small: 2px;
// --el-border-radius-round: 20px;
// --el-border-radius-circle: 100%;
// --el-box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12),0 0 6px rgba(0, 0, 0, 0.04);
// --el-box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
// --el-svg-monochrome-grey: #dcdde0;
// --el-fill-base: var(--el-color-white);
// --el-font-size-extra-large: 20px;
// --el-font-size-large: 18px;