enr 0.2.3-alpha.3 → 1.0.1
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/README.md +13 -9
- package/client.mjs +1 -1
- package/client.mjs.map +1 -1
- package/layoutUtil.mjs +1 -1
- package/layoutUtil.mjs.map +1 -1
- package/package.json +7 -5
- package/server.mjs +1 -1
- package/server.mjs.map +1 -1
- package/styles/common.css +1 -1
- package/styles/common.scss +24 -343
- package/styles/flex.scss +38 -0
- package/styles/header.scss +54 -0
- package/styles/image.scss +10 -0
- package/styles/input.scss +131 -0
- package/styles/loading-keyframes.scss +242 -0
- package/styles/reset.css +1 -0
- package/styles/reset.scss +5 -8
- package/styles/root-normal-dark.scss +85 -0
- package/styles/root-normal-light.scss +83 -0
- package/styles/root-weird-dark.scss +1 -0
- package/styles/root.scss +297 -57
- package/styles/text.scss +111 -0
- package/styles/vars-color.scss +251 -245
- package/styles/vars-size.scss +6 -2
- package/type/components/ThemeContext/index.d.ts +15 -1
- package/type/components/ThemeContext/types.d.ts +3 -1
- package/type/components/layout/types.d.ts +3 -1
- package/type/components/shared/EnLayoutContent/index.d.ts +1 -1
- package/type/customHooks/use-xcn/index.d.ts +1 -1
- package/type/index.server.d.ts +1 -1
- package/type/utilities/cookie.d.ts +2 -1
- package/styles/mixin-color-dark.scss +0 -150
- package/styles/mixin-color-light.scss +0 -148
package/styles/vars-color.scss
CHANGED
|
@@ -12,41 +12,57 @@
|
|
|
12
12
|
// },'');
|
|
13
13
|
// }
|
|
14
14
|
|
|
15
|
-
$en-color-
|
|
16
|
-
$en-color-
|
|
17
|
-
$en-color-
|
|
18
|
-
$en-color-
|
|
19
|
-
$en-color-
|
|
20
|
-
$en-color-
|
|
21
|
-
$en-color-
|
|
22
|
-
$en-color-
|
|
23
|
-
$en-color-
|
|
24
|
-
$en-color-
|
|
25
|
-
$en-color-
|
|
26
|
-
$en-color-
|
|
27
|
-
$en-color-
|
|
28
|
-
$en-color-
|
|
29
|
-
$en-color-
|
|
30
|
-
$en-color-
|
|
31
|
-
$en-color-
|
|
32
|
-
$en-color-
|
|
33
|
-
$en-color-
|
|
34
|
-
$en-color-
|
|
35
|
-
$en-color-
|
|
36
|
-
$en-color-
|
|
37
|
-
$en-color-
|
|
38
|
-
$en-color-
|
|
39
|
-
$en-color-
|
|
40
|
-
$en-color-
|
|
41
|
-
$en-color-
|
|
42
|
-
$en-color-
|
|
15
|
+
$en-color-darkness-10: #fefefe;
|
|
16
|
+
$en-color-darkness-10-rgb: 251, 251, 251;
|
|
17
|
+
$en-color-darkness-15: #efefef;
|
|
18
|
+
$en-color-darkness-15-rgb: 235, 235, 235;
|
|
19
|
+
$en-color-darkness-20: #e0e0e0;
|
|
20
|
+
$en-color-darkness-20-rgb: 219, 219, 219;
|
|
21
|
+
$en-color-darkness-25: #d3d3d3;
|
|
22
|
+
$en-color-darkness-25-rgb: 203, 203, 203;
|
|
23
|
+
$en-color-darkness-30: #c3c3c3;
|
|
24
|
+
$en-color-darkness-30-rgb: 188, 188, 188;
|
|
25
|
+
$en-color-darkness-35: #b3b3b3;
|
|
26
|
+
$en-color-darkness-35-rgb: 172, 172, 172;
|
|
27
|
+
$en-color-darkness-40: #a3a3a3;
|
|
28
|
+
$en-color-darkness-40-rgb: 156, 156, 156;
|
|
29
|
+
$en-color-darkness-45: #939393;
|
|
30
|
+
$en-color-darkness-45-rgb: 141, 141, 141;
|
|
31
|
+
$en-color-darkness-50: #838383;
|
|
32
|
+
$en-color-darkness-50-rgb: 125, 125, 125;
|
|
33
|
+
$en-color-darkness-55: #737373;
|
|
34
|
+
$en-color-darkness-55-rgb: 110, 110, 110;
|
|
35
|
+
$en-color-darkness-60: #636363;
|
|
36
|
+
$en-color-darkness-60-rgb: 94, 94, 94;
|
|
37
|
+
$en-color-darkness-65: #535353;
|
|
38
|
+
$en-color-darkness-65-rgb: 79, 79, 79;
|
|
39
|
+
$en-color-darkness-70: #434343;
|
|
40
|
+
$en-color-darkness-70-rgb: 64, 64, 64;
|
|
41
|
+
$en-color-darkness-75: #333333;
|
|
42
|
+
$en-color-darkness-75-rgb: 49, 49, 49;
|
|
43
|
+
$en-color-darkness-80: #232323;
|
|
44
|
+
$en-color-darkness-80-rgb: 34, 34, 34;
|
|
45
|
+
$en-color-darkness-85: #131313;
|
|
46
|
+
$en-color-darkness-85-rgb: 19, 19, 19;
|
|
47
|
+
$en-color-darkness-90: #030303;
|
|
48
|
+
$en-color-darkness-90-rgb: 3, 3, 3;
|
|
43
49
|
// 纯色
|
|
44
50
|
$en-color-blue: #0085f2;
|
|
45
51
|
$en-color-blue-rgb: 0, 133, 242;
|
|
52
|
+
$en-color-cyan: #36cfc9;
|
|
53
|
+
$en-color-cyan-rgb: 54, 207, 201;
|
|
54
|
+
$en-color-lime: #bae637;
|
|
55
|
+
$en-color-lime-rgb: 186, 230, 55;
|
|
46
56
|
$en-color-green: #009a46;
|
|
47
57
|
$en-color-green-rgb: 0, 154, 70;
|
|
48
58
|
$en-color-yellow: #928700;
|
|
49
59
|
$en-color-yellow-rgb: 146, 135, 0;
|
|
60
|
+
$en-color-volcano: #ff7a45;
|
|
61
|
+
$en-color-volcano-rgb: 255, 122, 69;
|
|
62
|
+
$en-color-gold: #ffc53d;
|
|
63
|
+
$en-color-gold-rgb: 255, 197, 61;
|
|
64
|
+
$en-color-orange: #ffa940;
|
|
65
|
+
$en-color-orange-rgb: 255, 169, 64;
|
|
50
66
|
$en-color-red: #d30038;
|
|
51
67
|
$en-color-red-rgb: 211, 0, 56;
|
|
52
68
|
$en-color-violet: #9b65ff;
|
|
@@ -59,231 +75,221 @@ $en-color-black: #000000;
|
|
|
59
75
|
$en-color-black-rgb: 0, 0, 0;
|
|
60
76
|
$en-color-white: #ffffff;
|
|
61
77
|
$en-color-white-rgb: 255, 255, 255;
|
|
78
|
+
// mac 关闭按钮的色
|
|
79
|
+
$en-color-close-button: rgb(252, 71, 70);
|
|
80
|
+
$en-color-close-button-rgb: 252, 71, 70;
|
|
81
|
+
// mac 关闭最小化的色
|
|
82
|
+
$en-color-mini-size-button: rgb(245, 191, 79);
|
|
83
|
+
$en-color-mini-size-button-rgb: 245, 191, 79;
|
|
84
|
+
// mac 关闭最大化的色
|
|
85
|
+
$en-color-full-size-button: rgb(99, 200, 86);
|
|
86
|
+
$en-color-full-size-button-rgb: 99, 200, 86;
|
|
62
87
|
|
|
63
|
-
$en-color-
|
|
64
|
-
$en-color-
|
|
65
|
-
$en-color-
|
|
66
|
-
$en-color-
|
|
67
|
-
$en-color-
|
|
68
|
-
$en-color-
|
|
69
|
-
$en-color-
|
|
70
|
-
$en-color-
|
|
71
|
-
$en-color-
|
|
72
|
-
$en-color-
|
|
73
|
-
$en-color-
|
|
74
|
-
$en-color-
|
|
75
|
-
$en-color-
|
|
76
|
-
$en-color-
|
|
77
|
-
$en-color-
|
|
78
|
-
$en-color-
|
|
79
|
-
$en-color-
|
|
80
|
-
$en-color-
|
|
88
|
+
$en-color-blue-10: #dce2f2;
|
|
89
|
+
$en-color-blue-10-rgb: 220, 226, 242;
|
|
90
|
+
$en-color-blue-20: #c1cff1;
|
|
91
|
+
$en-color-blue-20-rgb: 193, 207, 241;
|
|
92
|
+
$en-color-blue-30: #8cb4ff;
|
|
93
|
+
$en-color-blue-30-rgb: 140, 180, 255;
|
|
94
|
+
$en-color-blue-40: #5e9eff;
|
|
95
|
+
$en-color-blue-40-rgb: 94, 158, 255;
|
|
96
|
+
$en-color-blue-50: #0085f2;
|
|
97
|
+
$en-color-blue-50-rgb: 0, 133, 242;
|
|
98
|
+
$en-color-blue-60: #0069c2;
|
|
99
|
+
$en-color-blue-60-rgb: 0, 105, 194;
|
|
100
|
+
$en-color-blue-70: #004d92;
|
|
101
|
+
$en-color-blue-70-rgb: 0, 77, 146;
|
|
102
|
+
$en-color-blue-80: #003465;
|
|
103
|
+
$en-color-blue-80-rgb: 0, 52, 101;
|
|
104
|
+
$en-color-blue-90: #001b3a;
|
|
105
|
+
$en-color-blue-90-rgb: 0, 27, 58;
|
|
81
106
|
|
|
82
|
-
$en-color-
|
|
83
|
-
$en-color-
|
|
84
|
-
$en-color-
|
|
85
|
-
$en-color-
|
|
86
|
-
$en-color-
|
|
87
|
-
$en-color-
|
|
88
|
-
$en-color-
|
|
89
|
-
$en-color-
|
|
90
|
-
$en-color-
|
|
91
|
-
$en-color-
|
|
92
|
-
$en-color-
|
|
93
|
-
$en-color-
|
|
94
|
-
$en-color-
|
|
95
|
-
$en-color-
|
|
96
|
-
$en-color-
|
|
97
|
-
$en-color-
|
|
98
|
-
$en-color-
|
|
99
|
-
$en-color-
|
|
107
|
+
$en-color-cyan-10: #e6fffb;
|
|
108
|
+
$en-color-cyan-10-rgb: 230, 255, 251;
|
|
109
|
+
$en-color-cyan-20: #b5f5ec;
|
|
110
|
+
$en-color-cyan-20-rgb: 181, 245, 236;
|
|
111
|
+
$en-color-cyan-30: #87e8de;
|
|
112
|
+
$en-color-cyan-30-rgb: 135, 232, 222;
|
|
113
|
+
$en-color-cyan-40: #5cdbd3;
|
|
114
|
+
$en-color-cyan-40-rgb: 92, 219, 211;
|
|
115
|
+
$en-color-cyan-50: #13c2c2;
|
|
116
|
+
$en-color-cyan-50-rgb: 19, 194, 194;
|
|
117
|
+
$en-color-cyan-60: #08979c;
|
|
118
|
+
$en-color-cyan-60-rgb: 8, 151, 156;
|
|
119
|
+
$en-color-cyan-70: #006d75;
|
|
120
|
+
$en-color-cyan-70-rgb: 0, 109, 117;
|
|
121
|
+
$en-color-cyan-80: #00474f;
|
|
122
|
+
$en-color-cyan-80-rgb: 0, 71, 79;
|
|
123
|
+
$en-color-cyan-90: #002329;
|
|
124
|
+
$en-color-cyan-90-rgb: 0, 35, 41;
|
|
100
125
|
|
|
101
|
-
$en-color-
|
|
102
|
-
$en-color-
|
|
103
|
-
$en-color-
|
|
104
|
-
$en-color-
|
|
105
|
-
$en-color-
|
|
106
|
-
$en-color-
|
|
107
|
-
$en-color-
|
|
108
|
-
$en-color-
|
|
109
|
-
$en-color-
|
|
110
|
-
$en-color-
|
|
111
|
-
$en-color-
|
|
112
|
-
$en-color-
|
|
113
|
-
$en-color-
|
|
114
|
-
$en-color-
|
|
115
|
-
$en-color-
|
|
116
|
-
$en-color-
|
|
117
|
-
$en-color-
|
|
118
|
-
$en-color-
|
|
126
|
+
$en-color-lime-10: #fcffe6;
|
|
127
|
+
$en-color-lime-10-rgb: 252, 255, 230;
|
|
128
|
+
$en-color-lime-20: #f4ffb8;
|
|
129
|
+
$en-color-lime-20-rgb: 244, 255, 184;
|
|
130
|
+
$en-color-lime-30: #eaff8f;
|
|
131
|
+
$en-color-lime-30-rgb: 234, 255, 143;
|
|
132
|
+
$en-color-lime-40: #d3f261;
|
|
133
|
+
$en-color-lime-40-rgb: 211, 242, 97;
|
|
134
|
+
$en-color-lime-50: #a0d911;
|
|
135
|
+
$en-color-lime-50-rgb: 160, 217, 17;
|
|
136
|
+
$en-color-lime-60: #7cb305;
|
|
137
|
+
$en-color-lime-60-rgb: 124, 179, 5;
|
|
138
|
+
$en-color-lime-70: #5b8c00;
|
|
139
|
+
$en-color-lime-70-rgb: 91, 140, 0;
|
|
140
|
+
$en-color-lime-80: #3f6600;
|
|
141
|
+
$en-color-lime-80-rgb: 63, 102, 0;
|
|
142
|
+
$en-color-lime-90: #254000;
|
|
143
|
+
$en-color-lime-90-rgb: 37, 64, 0;
|
|
119
144
|
|
|
120
|
-
$en-color-
|
|
121
|
-
$en-color-
|
|
122
|
-
$en-color-
|
|
123
|
-
$en-color-
|
|
124
|
-
$en-color-
|
|
125
|
-
$en-color-
|
|
126
|
-
$en-color-
|
|
127
|
-
$en-color-
|
|
128
|
-
$en-color-
|
|
129
|
-
$en-color-
|
|
130
|
-
$en-color-
|
|
131
|
-
$en-color-
|
|
132
|
-
$en-color-
|
|
133
|
-
$en-color-
|
|
134
|
-
$en-color-
|
|
135
|
-
$en-color-
|
|
136
|
-
$en-color-
|
|
137
|
-
$en-color-
|
|
145
|
+
$en-color-green-10: #a9f3ba;
|
|
146
|
+
$en-color-green-10-rgb: 169, 243, 186;
|
|
147
|
+
$en-color-green-20: #73e693;
|
|
148
|
+
$en-color-green-20-rgb: 115, 230, 147;
|
|
149
|
+
$en-color-green-30: #00d061;
|
|
150
|
+
$en-color-green-30-rgb: 0, 208, 97;
|
|
151
|
+
$en-color-green-40: #00b755;
|
|
152
|
+
$en-color-green-40-rgb: 0, 183, 85;
|
|
153
|
+
$en-color-green-50: #009a46;
|
|
154
|
+
$en-color-green-50-rgb: 0, 154, 70;
|
|
155
|
+
$en-color-green-60: #007936;
|
|
156
|
+
$en-color-green-60-rgb: 0, 121, 54;
|
|
157
|
+
$en-color-green-70: #005a26;
|
|
158
|
+
$en-color-green-70-rgb: 0, 90, 38;
|
|
159
|
+
$en-color-green-80: #003d18;
|
|
160
|
+
$en-color-green-80-rgb: 0, 61, 24;
|
|
161
|
+
$en-color-green-90: #00210a;
|
|
162
|
+
$en-color-green-90-rgb: 0, 33, 10;
|
|
138
163
|
|
|
139
|
-
$en-color-
|
|
140
|
-
$en-color-
|
|
141
|
-
$en-color-
|
|
142
|
-
$en-color-
|
|
143
|
-
$en-color-
|
|
144
|
-
$en-color-
|
|
145
|
-
$en-color-
|
|
146
|
-
$en-color-
|
|
147
|
-
$en-color-
|
|
148
|
-
$en-color-
|
|
149
|
-
$en-color-
|
|
150
|
-
$en-color-
|
|
151
|
-
$en-color-
|
|
152
|
-
$en-color-
|
|
153
|
-
$en-color-
|
|
154
|
-
$en-color-
|
|
155
|
-
$en-color-
|
|
156
|
-
$en-color-
|
|
164
|
+
$en-color-orange-10: #fff7e6;
|
|
165
|
+
$en-color-orange-10-rgb: 255, 247, 230;
|
|
166
|
+
$en-color-orange-20: #ffe7ba;
|
|
167
|
+
$en-color-orange-20-rgb: 255, 231, 186;
|
|
168
|
+
$en-color-orange-30: #ffd591;
|
|
169
|
+
$en-color-orange-30-rgb: 255, 213, 145;
|
|
170
|
+
$en-color-orange-40: #ffc069;
|
|
171
|
+
$en-color-orange-40-rgb: 255, 192, 105;
|
|
172
|
+
$en-color-orange-50: #fa8c16;
|
|
173
|
+
$en-color-orange-50-rgb: 250, 140, 22;
|
|
174
|
+
$en-color-orange-60: #fa8c16;
|
|
175
|
+
$en-color-orange-60-rgb: 250, 140, 22;
|
|
176
|
+
$en-color-orange-70: #ad4e00;
|
|
177
|
+
$en-color-orange-70-rgb: 173, 78, 0;
|
|
178
|
+
$en-color-orange-80: #873800;
|
|
179
|
+
$en-color-orange-80-rgb: 135, 56, 0;
|
|
180
|
+
$en-color-orange-90: #612500;
|
|
181
|
+
$en-color-orange-90-rgb: 97, 37, 0;
|
|
157
182
|
|
|
158
|
-
$en-color-
|
|
159
|
-
$en-color-
|
|
160
|
-
$en-color-
|
|
161
|
-
$en-color-
|
|
162
|
-
$en-color-
|
|
163
|
-
$en-color-
|
|
164
|
-
$en-color-
|
|
165
|
-
$en-color-
|
|
166
|
-
$en-color-
|
|
167
|
-
$en-color-
|
|
168
|
-
$en-color-
|
|
169
|
-
$en-color-
|
|
170
|
-
$en-color-
|
|
171
|
-
$en-color-
|
|
172
|
-
$en-color-
|
|
173
|
-
$en-color-
|
|
174
|
-
$en-color-
|
|
175
|
-
$en-color-
|
|
183
|
+
$en-color-gold-10: #fff7e6;
|
|
184
|
+
$en-color-gold-10-rgb: 255, 247, 230;
|
|
185
|
+
$en-color-gold-20: #ffe7ba;
|
|
186
|
+
$en-color-gold-20-rgb: 255, 231, 186;
|
|
187
|
+
$en-color-gold-30: #ffd591;
|
|
188
|
+
$en-color-gold-30-rgb: 255, 213, 145;
|
|
189
|
+
$en-color-gold-40: #ffc069;
|
|
190
|
+
$en-color-gold-40-rgb: 255, 192, 105;
|
|
191
|
+
$en-color-gold-50: #fa8c16;
|
|
192
|
+
$en-color-gold-50-rgb: 250, 140, 22;
|
|
193
|
+
$en-color-gold-60: #fa8c16;
|
|
194
|
+
$en-color-gold-60-rgb: 250, 140, 22;
|
|
195
|
+
$en-color-gold-70: #ad4e00;
|
|
196
|
+
$en-color-gold-70-rgb: 173, 78, 0;
|
|
197
|
+
$en-color-gold-80: #873800;
|
|
198
|
+
$en-color-gold-80-rgb: 135, 56, 0;
|
|
199
|
+
$en-color-gold-90: #612500;
|
|
200
|
+
$en-color-gold-90-rgb: 97, 37, 0;
|
|
176
201
|
|
|
177
|
-
$en-color-
|
|
178
|
-
$en-color-
|
|
179
|
-
$en-color-
|
|
180
|
-
$en-color-
|
|
181
|
-
$en-color-
|
|
182
|
-
$en-color-
|
|
183
|
-
$en-color-
|
|
184
|
-
$en-color-
|
|
185
|
-
$en-color-
|
|
186
|
-
$en-color-
|
|
187
|
-
$en-color-
|
|
188
|
-
$en-color-
|
|
189
|
-
$en-color-
|
|
190
|
-
$en-color-
|
|
191
|
-
$en-color-
|
|
192
|
-
$en-color-
|
|
193
|
-
$en-color-
|
|
194
|
-
$en-color-
|
|
202
|
+
$en-color-yellow-10: #f0e498;
|
|
203
|
+
$en-color-yellow-10-rgb: 240, 228, 152;
|
|
204
|
+
$en-color-yellow-20: #dfd172;
|
|
205
|
+
$en-color-yellow-20-rgb: 223, 209, 114;
|
|
206
|
+
$en-color-yellow-30: #c7b700;
|
|
207
|
+
$en-color-yellow-30-rgb: 199, 183, 0;
|
|
208
|
+
$en-color-yellow-40: #afa100;
|
|
209
|
+
$en-color-yellow-40-rgb: 175, 161, 0;
|
|
210
|
+
$en-color-yellow-50: #938700;
|
|
211
|
+
$en-color-yellow-50-rgb: 147, 135, 0;
|
|
212
|
+
$en-color-yellow-60: #746a00;
|
|
213
|
+
$en-color-yellow-60-rgb: 116, 106, 0;
|
|
214
|
+
$en-color-yellow-70: #564e00;
|
|
215
|
+
$en-color-yellow-70-rgb: 86, 78, 0;
|
|
216
|
+
$en-color-yellow-80: #3a3500;
|
|
217
|
+
$en-color-yellow-80-rgb: 58, 53, 0;
|
|
218
|
+
$en-color-yellow-90: #1f1c00;
|
|
219
|
+
$en-color-yellow-90-rgb: 31, 28, 0;
|
|
195
220
|
|
|
196
|
-
$en-color-
|
|
197
|
-
$en-color-
|
|
198
|
-
$en-color-
|
|
199
|
-
$en-color-
|
|
200
|
-
$en-color-
|
|
201
|
-
$en-color-
|
|
202
|
-
$en-color-
|
|
203
|
-
$en-color-
|
|
204
|
-
$en-color-
|
|
205
|
-
$en-color-
|
|
206
|
-
$en-color-
|
|
207
|
-
$en-color-
|
|
208
|
-
$en-color-
|
|
209
|
-
$en-color-
|
|
210
|
-
$en-color-
|
|
211
|
-
$en-color-
|
|
212
|
-
$en-color-
|
|
213
|
-
$en-color-
|
|
221
|
+
$en-color-volcano-10: #fff2e8;
|
|
222
|
+
$en-color-volcano-10-rgb: 255, 242, 232;
|
|
223
|
+
$en-color-volcano-20: #ffd8bf;
|
|
224
|
+
$en-color-volcano-20-rgb: 255, 216, 191;
|
|
225
|
+
$en-color-volcano-30: #ffbb96;
|
|
226
|
+
$en-color-volcano-30-rgb: 255, 187, 150;
|
|
227
|
+
$en-color-volcano-40: #ff9c6e;
|
|
228
|
+
$en-color-volcano-40-rgb: 255, 156, 110;
|
|
229
|
+
$en-color-volcano-50: #fa541c;
|
|
230
|
+
$en-color-volcano-50-rgb: 250, 84, 28;
|
|
231
|
+
$en-color-volcano-60: #d4380d;
|
|
232
|
+
$en-color-volcano-60-rgb: 212, 56, 13;
|
|
233
|
+
$en-color-volcano-70: #ad2102;
|
|
234
|
+
$en-color-volcano-70-rgb: 173, 33, 2;
|
|
235
|
+
$en-color-volcano-80: #871400;
|
|
236
|
+
$en-color-volcano-80-rgb: 135, 20, 0;
|
|
237
|
+
$en-color-volcano-90: #610b00;
|
|
238
|
+
$en-color-volcano-90-rgb: 97, 11, 0;
|
|
214
239
|
|
|
215
|
-
$en-color-
|
|
216
|
-
$en-color-
|
|
217
|
-
$en-color-
|
|
218
|
-
$en-color-
|
|
219
|
-
$en-color-
|
|
220
|
-
$en-color-
|
|
221
|
-
$en-color-
|
|
222
|
-
$en-color-
|
|
223
|
-
$en-color-
|
|
224
|
-
$en-color-
|
|
225
|
-
$en-color-
|
|
226
|
-
$en-color-
|
|
227
|
-
$en-color-
|
|
228
|
-
$en-color-
|
|
229
|
-
$en-color-
|
|
230
|
-
$en-color-
|
|
231
|
-
$en-color-
|
|
232
|
-
$en-color-
|
|
240
|
+
$en-color-red-10: #ffd9dc;
|
|
241
|
+
$en-color-red-10-rgb: 255, 217, 220;
|
|
242
|
+
$en-color-red-20: #ffc0c4;
|
|
243
|
+
$en-color-red-20-rgb: 255, 192, 196;
|
|
244
|
+
$en-color-red-30: #ff97a0;
|
|
245
|
+
$en-color-red-30-rgb: 255, 151, 160;
|
|
246
|
+
$en-color-red-40: #ff707f;
|
|
247
|
+
$en-color-red-40-rgb: 255, 112, 127;
|
|
248
|
+
$en-color-red-50: #ff2a51;
|
|
249
|
+
$en-color-red-50-rgb: 255, 42, 81;
|
|
250
|
+
$en-color-red-60: #d30038;
|
|
251
|
+
$en-color-red-60-rgb: 211, 0, 56;
|
|
252
|
+
$en-color-red-70: #9e0027;
|
|
253
|
+
$en-color-red-70-rgb: 158, 0, 39;
|
|
254
|
+
$en-color-red-80: #6f0019;
|
|
255
|
+
$en-color-red-80-rgb: 111, 0, 25;
|
|
256
|
+
$en-color-red-90: #40000a;
|
|
257
|
+
$en-color-red-90-rgb: 64, 0, 10;
|
|
233
258
|
|
|
234
|
-
$en-color-
|
|
235
|
-
$en-color-
|
|
236
|
-
$en-color-
|
|
237
|
-
$en-color-
|
|
238
|
-
$en-color-
|
|
239
|
-
$en-color-
|
|
240
|
-
$en-color-
|
|
241
|
-
$en-color-
|
|
242
|
-
$en-color-
|
|
243
|
-
$en-color-
|
|
244
|
-
$en-color-
|
|
245
|
-
$en-color-
|
|
246
|
-
$en-color-
|
|
247
|
-
$en-color-
|
|
248
|
-
$en-color-
|
|
249
|
-
$en-color-
|
|
250
|
-
$en-color-
|
|
251
|
-
$en-color-
|
|
259
|
+
$en-color-violet-10: #e6deff;
|
|
260
|
+
$en-color-violet-10-rgb: 230, 222, 255;
|
|
261
|
+
$en-color-violet-20: #d4c5ff;
|
|
262
|
+
$en-color-violet-20-rgb: 212, 197, 255;
|
|
263
|
+
$en-color-violet-30: #bea5ff;
|
|
264
|
+
$en-color-violet-30-rgb: 190, 165, 255;
|
|
265
|
+
$en-color-violet-40: #ae8aff;
|
|
266
|
+
$en-color-violet-40-rgb: 174, 138, 255;
|
|
267
|
+
$en-color-violet-50: #9b65ff;
|
|
268
|
+
$en-color-violet-50-rgb: 155, 101, 255;
|
|
269
|
+
$en-color-violet-60: #872bff;
|
|
270
|
+
$en-color-violet-60-rgb: 135, 43, 255;
|
|
271
|
+
$en-color-violet-70: #6800cf;
|
|
272
|
+
$en-color-violet-70-rgb: 104, 0, 207;
|
|
273
|
+
$en-color-violet-80: #480091;
|
|
274
|
+
$en-color-violet-80-rgb: 72, 0, 145;
|
|
275
|
+
$en-color-violet-90: #280056;
|
|
276
|
+
$en-color-violet-90-rgb: 40, 0, 86;
|
|
252
277
|
|
|
253
|
-
$en-color-
|
|
254
|
-
$en-color-
|
|
255
|
-
$en-color-
|
|
256
|
-
$en-color-
|
|
257
|
-
$en-color-
|
|
258
|
-
$en-color-
|
|
259
|
-
$en-color-
|
|
260
|
-
$en-color-
|
|
261
|
-
$en-color-
|
|
262
|
-
$en-color-
|
|
263
|
-
$en-color-
|
|
264
|
-
$en-color-
|
|
265
|
-
$en-color-
|
|
266
|
-
$en-color-
|
|
267
|
-
$en-color-
|
|
268
|
-
$en-color-
|
|
269
|
-
$en-color-
|
|
270
|
-
$en-color-
|
|
271
|
-
|
|
272
|
-
$en-color-dark-pink-10: $en-color-light-pink-10;
|
|
273
|
-
$en-color-dark-pink-10-rgb: $en-color-light-pink-10-rgb;
|
|
274
|
-
$en-color-dark-pink-20: $en-color-light-pink-20;
|
|
275
|
-
$en-color-dark-pink-20-rgb: $en-color-light-pink-20-rgb;
|
|
276
|
-
$en-color-dark-pink-30: $en-color-light-pink-30;
|
|
277
|
-
$en-color-dark-pink-30-rgb: $en-color-light-pink-30-rgb;
|
|
278
|
-
$en-color-dark-pink-40: $en-color-light-pink-40;
|
|
279
|
-
$en-color-dark-pink-40-rgb: $en-color-light-pink-40-rgb;
|
|
280
|
-
$en-color-dark-pink-50: $en-color-light-pink-50;
|
|
281
|
-
$en-color-dark-pink-50-rgb: $en-color-light-pink-50-rgb;
|
|
282
|
-
$en-color-dark-pink-60: $en-color-light-pink-60;
|
|
283
|
-
$en-color-dark-pink-60-rgb: $en-color-light-pink-60-rgb;
|
|
284
|
-
$en-color-dark-pink-70: $en-color-light-pink-70;
|
|
285
|
-
$en-color-dark-pink-70-rgb: $en-color-light-pink-70-rgb;
|
|
286
|
-
$en-color-dark-pink-80: $en-color-light-pink-80;
|
|
287
|
-
$en-color-dark-pink-80-rgb: $en-color-light-pink-80-rgb;
|
|
288
|
-
$en-color-dark-pink-90: $en-color-light-pink-90;
|
|
289
|
-
$en-color-dark-pink-90-rgb: $en-color-light-pink-90-rgb;
|
|
278
|
+
$en-color-pink-10: #ffd9df;
|
|
279
|
+
$en-color-pink-10-rgb: 255, 217, 223;
|
|
280
|
+
$en-color-pink-20: #ffbbc8;
|
|
281
|
+
$en-color-pink-20-rgb: 255, 187, 200;
|
|
282
|
+
$en-color-pink-30: #ff93aa;
|
|
283
|
+
$en-color-pink-30-rgb: 255, 147, 170;
|
|
284
|
+
$en-color-pink-40: #ff6d91;
|
|
285
|
+
$en-color-pink-40-rgb: 255, 109, 145;
|
|
286
|
+
$en-color-pink-50: #ff1f72;
|
|
287
|
+
$en-color-pink-50-rgb: 255, 31, 114;
|
|
288
|
+
$en-color-pink-60: #d00058;
|
|
289
|
+
$en-color-pink-60-rgb: 208, 0, 88;
|
|
290
|
+
$en-color-pink-70: #9e0041;
|
|
291
|
+
$en-color-pink-70-rgb: 158, 0, 65;
|
|
292
|
+
$en-color-pink-80: #6d002b;
|
|
293
|
+
$en-color-pink-80-rgb: 109, 0, 43;
|
|
294
|
+
$en-color-pink-90: #3f0015;
|
|
295
|
+
$en-color-pink-90-rgb: 63, 0, 21;
|
package/styles/vars-size.scss
CHANGED
|
@@ -5,7 +5,21 @@
|
|
|
5
5
|
* 请在项目根参看详细许可证明
|
|
6
6
|
*/
|
|
7
7
|
import { ThemeColorModeProviderProps, ThemeContextType } from './types';
|
|
8
|
-
/**
|
|
8
|
+
/**
|
|
9
|
+
* 使用主题颜色模式
|
|
10
|
+
*
|
|
11
|
+
* ```ts
|
|
12
|
+
* interface ThemeContextType {
|
|
13
|
+
* autoColorMode: boolean;
|
|
14
|
+
* colorMode: ColorMode;
|
|
15
|
+
* colorModeClassName: string;
|
|
16
|
+
* toggleColorMode: () => ColorMode;
|
|
17
|
+
* setColorMode: (newColorMode: ColorMode) => ColorMode;
|
|
18
|
+
* // 清理主题设置，让主题跟随系统
|
|
19
|
+
* clearColorMode: () => void;
|
|
20
|
+
* }
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
9
23
|
export declare function useColorMode(): ThemeContextType;
|
|
10
24
|
/** */
|
|
11
25
|
export declare function ThemeColorModeProvider({ children, initialTheme }: ThemeColorModeProviderProps): import("react").JSX.Element;
|
|
@@ -12,6 +12,8 @@ export type ThemeContextType = {
|
|
|
12
12
|
autoColorMode: boolean;
|
|
13
13
|
/** 获取颜色模式 */
|
|
14
14
|
colorMode: ColorMode;
|
|
15
|
+
/** 展示的当前颜色模型样式类 */
|
|
16
|
+
colorModeClassName: string;
|
|
15
17
|
/** 切换颜色模式 */
|
|
16
18
|
toggleColorMode: () => ColorMode;
|
|
17
19
|
/** 设置颜色模式（仅允许设置为 'dark'、或 `light`） */
|
|
@@ -20,7 +22,7 @@ export type ThemeContextType = {
|
|
|
20
22
|
clearColorMode: () => void;
|
|
21
23
|
};
|
|
22
24
|
export type ThemeColorModeProviderProps = {
|
|
23
|
-
children
|
|
25
|
+
children?: React.ReactNode;
|
|
24
26
|
/** 初始化默认的主题值 */
|
|
25
27
|
initialTheme: ColorMode;
|
|
26
28
|
};
|
|
@@ -95,5 +95,7 @@ export interface LayoutTheme {
|
|
|
95
95
|
/** 底部的高 */
|
|
96
96
|
footerHeight: string | number;
|
|
97
97
|
}
|
|
98
|
+
/** 布局侧栏的状态 */
|
|
99
|
+
export type EnLayoutSideState = 'side-right-full' | 'simple' | 'side-right' | 'side-full';
|
|
98
100
|
/** 可使用的样式类型 */
|
|
99
|
-
export type EnLayoutContentType = 'simple' | 'only-footer' | 'only-header' | 'no-
|
|
101
|
+
export type EnLayoutContentType = 'simple' | 'only-footer' | 'only-header' | 'no-side' | 'simple-all' | 'side-right-all' | 'simple-no-footer' | 'side-right-no-footer' | 'side-full-all' | 'side-right-full-all' | 'side-full-no-footer' | 'side-right-full-no-footer' | 'simple-no-header' | 'side-right-no-header' | 'side-full-no-header' | 'side-right-full-no-header' | 'simple-only-side' | 'side-full-only-side' | 'side-right-only-side' | 'side-right-full-only-side';
|
|
@@ -8,7 +8,7 @@ import { EnLayoutContentProps } from './types';
|
|
|
8
8
|
/** 创建带样式的组件 */
|
|
9
9
|
export declare const LayoutContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
|
|
10
10
|
/** 带样式的组件 */
|
|
11
|
-
export declare const LayoutFooterContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<
|
|
11
|
+
export declare const LayoutFooterContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
|
|
12
12
|
/** 带样式的头部 */
|
|
13
13
|
export declare const LayoutHeaderContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
|
|
14
14
|
/** 带样式的组件 */
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
/** 其实这并不是一个自定义钩子 */
|
|
8
8
|
import { EnTypeofClassNameItem, EnXcn } from 'xcn';
|
|
9
|
-
type EnClassName = 'en-light' | 'en-dark' | 'en-flex' | 'en-flex-row' | 'en-flex-row-reverse' | 'en-flex-column' | 'en-flex-column-reverse' | 'en-flex-wrap' | 'en-full-container' | 'en-inline-block' | 'en-padding-horizontal-4' | 'en-padding-horizontal-8' | 'en-padding-horizontal-12' | 'en-padding-horizontal-16' | 'en-padding-horizontal-20' | 'en-padding-horizontal-24' | 'en-padding-horizontal-28' | 'en-padding-horizontal-32' | 'en-padding-horizontal-36' | 'en-padding-horizontal-40' | 'en-padding-vertical-4' | 'en-padding-vertical-8' | 'en-padding-vertical-12' | 'en-padding-vertical-16' | 'en-padding-vertical-20' | 'en-padding-vertical-24' | 'en-padding-vertical-28' | 'en-padding-vertical-32' | 'en-padding-vertical-36' | 'en-padding-vertical-40' | 'en-padding-4' | 'en-padding-8' | 'en-padding-12' | 'en-padding-16' | 'en-padding-20' | 'en-padding-24' | 'en-padding-28' | 'en-padding-32' | 'en-padding-36' | 'en-padding-40' | 'en-margin-horizontal-4' | 'en-margin-horizontal-8' | 'en-margin-horizontal-12' | 'en-margin-horizontal-16' | 'en-margin-horizontal-20' | 'en-margin-horizontal-24' | 'en-margin-horizontal-28' | 'en-margin-horizontal-32' | 'en-margin-horizontal-36' | 'en-margin-horizontal-40' | 'en-margin-vertical-4' | 'en-margin-vertical-8' | 'en-margin-vertical-12' | 'en-margin-vertical-16' | 'en-margin-vertical-20' | 'en-margin-vertical-24' | 'en-margin-vertical-28' | 'en-margin-vertical-32' | 'en-margin-vertical-36' | 'en-margin-vertical-40' | 'en-margin-4' | 'en-margin-8' | 'en-margin-12' | 'en-margin-16' | 'en-margin-20' | 'en-margin-24' | 'en-margin-28' | 'en-margin-32' | 'en-margin-36' | 'en-margin-40' | 'en-box-shadow-light-red-10' | 'en-box-shadow-light-red-20' | 'en-box-shadow-light-red-30' | 'en-box-shadow-light-red-40' | 'en-box-shadow-light-red-50' | 'en-box-shadow-light-red-60' | 'en-box-shadow-light-red-70' | 'en-box-shadow-light-red-80' | 'en-box-shadow-light-red-90' | 'en-border-radius-4' | 'en-border-radius-8' | 'en-border-radius-12' | 'en-border-radius-16' | 'en-border-radius-20' | 'en-border-radius-24' | 'en-border-radius-28' | 'en-border-radius-32' | 'en-border-radius-36' | 'en-border-radius-40' | 'en-radius-4' | 'en-radius-8' | 'en-radius-12' | 'en-radius-16' | 'en-radius-20' | 'en-radius-24' | 'en-radius-28' | 'en-radius-32' | 'en-radius-36' | 'en-radius-40' | 'en-center' | 'en-dust' | 'en-text-in-one-line' | 'en-text-in-one-line-hide' | 'en-text-in-two-line' | 'en-color-text' | 'en-bg-red' | 'en-float-left' | 'en-float' | 'en-float-right' | 'en-clear-float' | 'en-clear' | 'en-loading' | 'en-text-center' | 'en-text-right' | '
|
|
9
|
+
type EnClassName = 'en-light' | 'en-dark' | 'en-style' | 'en-weird-dark' | 'en-h1' | 'en-h2' | 'en-h3' | 'en-h4' | 'en-h5' | 'en-h6' | 'en-flex' | 'en-flex-row' | 'en-flex-row-reverse' | 'en-flex-column' | 'en-flex-column-reverse' | 'en-flex-wrap' | 'en-full-container' | 'en-inline-block' | 'en-padding-horizontal-4' | 'en-padding-horizontal-8' | 'en-padding-horizontal-12' | 'en-padding-horizontal-16' | 'en-padding-horizontal-20' | 'en-padding-horizontal-24' | 'en-padding-horizontal-28' | 'en-padding-horizontal-32' | 'en-padding-horizontal-36' | 'en-padding-horizontal-40' | 'en-padding-vertical-4' | 'en-padding-vertical-8' | 'en-padding-vertical-12' | 'en-padding-vertical-16' | 'en-padding-vertical-20' | 'en-padding-vertical-24' | 'en-padding-vertical-28' | 'en-padding-vertical-32' | 'en-padding-vertical-36' | 'en-padding-vertical-40' | 'en-padding-4' | 'en-padding-8' | 'en-padding-12' | 'en-padding-16' | 'en-padding-20' | 'en-padding-24' | 'en-padding-28' | 'en-padding-32' | 'en-padding-36' | 'en-padding-40' | 'en-margin-horizontal-4' | 'en-margin-horizontal-8' | 'en-margin-horizontal-12' | 'en-margin-horizontal-16' | 'en-margin-horizontal-20' | 'en-margin-horizontal-24' | 'en-margin-horizontal-28' | 'en-margin-horizontal-32' | 'en-margin-horizontal-36' | 'en-margin-horizontal-40' | 'en-margin-vertical-4' | 'en-margin-vertical-8' | 'en-margin-vertical-12' | 'en-margin-vertical-16' | 'en-margin-vertical-20' | 'en-margin-vertical-24' | 'en-margin-vertical-28' | 'en-margin-vertical-32' | 'en-margin-vertical-36' | 'en-margin-vertical-40' | 'en-margin-4' | 'en-margin-8' | 'en-margin-12' | 'en-margin-16' | 'en-margin-20' | 'en-margin-24' | 'en-margin-28' | 'en-margin-32' | 'en-margin-36' | 'en-margin-40' | 'en-box-shadow-light-red-10' | 'en-box-shadow-light-red-20' | 'en-box-shadow-light-red-30' | 'en-box-shadow-light-red-40' | 'en-box-shadow-light-red-50' | 'en-box-shadow-light-red-60' | 'en-box-shadow-light-red-70' | 'en-box-shadow-light-red-80' | 'en-box-shadow-light-red-90' | 'en-border-radius-4' | 'en-border-radius-8' | 'en-border-radius-12' | 'en-border-radius-16' | 'en-border-radius-20' | 'en-border-radius-24' | 'en-border-radius-28' | 'en-border-radius-32' | 'en-border-radius-36' | 'en-border-radius-40' | 'en-radius-4' | 'en-radius-8' | 'en-radius-12' | 'en-radius-16' | 'en-radius-20' | 'en-radius-24' | 'en-radius-28' | 'en-radius-32' | 'en-radius-36' | 'en-radius-40' | 'en-center' | 'en-dust' | 'en-text-in-one-line' | 'en-text-in-one-line-hide' | 'en-text-in-two-line' | 'en-color-text' | 'en-bg-red' | 'en-float-left' | 'en-float' | 'en-float-right' | 'en-clear-float' | 'en-clear' | 'en-loading' | 'en-text-center' | 'en-text-right' | 'en-text-small' | 'en-text-decoration-none' | 'en-text-decoration-style-solid' | 'en-text-decoration-style-double' | 'en-text-decoration-style-dotted' | 'en-text-decoration-style-dashed' | 'en-text-decoration-style-wavy' | 'en-text-decoration-line-none' | 'en-text-decoration-line-underline' | 'en-text-decoration-line-overline' | 'en-text-decoration-line-line-through' | 'en-text-decoration-line-underline-line-through' | 'en-text-decoration-line-overline-line-through' | 'en-text-decoration-line-overline-underline' | 'en-text-decoration-line-all' | 'en-img' | 'en-input-type-text-primary' | 'en-input-type-text-revers' | 'en-input-type-image-primary' | 'en-input-type-radio-primary' | 'en-input-focus-visible-none' | 'en-relative' | 'en-user-select-text' | 'en-user-select-none' | 'en-user-select-all' | 'en-cursor-pointer';
|
|
10
10
|
/** 在 xcn 中使用 enr 样式类 */
|
|
11
11
|
export declare function _en<T extends EnClassName[]>(...classNameList: T): EnXcn<{
|
|
12
12
|
[K in keyof T]: EnTypeofClassNameItem<T[K]>;
|