@semi-bot/semi-theme-arcoblue 1.0.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/README.md +24 -0
- package/package.json +14 -0
- package/raw.json +1028 -0
- package/scss/_font.scss +64 -0
- package/scss/_palette.scss +375 -0
- package/scss/animation.scss +85 -0
- package/scss/custom.scss +0 -0
- package/scss/global.scss +238 -0
- package/scss/index.scss +3 -0
- package/scss/local.scss +70 -0
- package/scss/mixin.scss +72 -0
- package/scss/variables.scss +75 -0
- package/semi.css +26308 -0
- package/semi.min.css +1 -0
package/scss/global.scss
ADDED
|
@@ -0,0 +1,238 @@
|
|
|
1
|
+
@import './_palette.scss';
|
|
2
|
+
|
|
3
|
+
body, body[theme-mode="dark"] .semi-always-light, :host, :host .semi-always-light {
|
|
4
|
+
--semi-color-bg-0: var(--semi-color-white);
|
|
5
|
+
--semi-color-bg-1: var(--semi-color-white);
|
|
6
|
+
--semi-color-bg-2: var(--semi-color-white);
|
|
7
|
+
--semi-color-bg-3: var(--semi-color-white);
|
|
8
|
+
--semi-color-bg-4: var(--semi-color-white);
|
|
9
|
+
--semi-color-info: rgba(var(--semi-blue-5), 1);
|
|
10
|
+
--semi-color-link: rgb(var(--semi-blue-5));
|
|
11
|
+
--semi-color-nav-bg: var(--semi-color-bg-1);
|
|
12
|
+
--semi-color-black: rgba(var(--semi-black),1);
|
|
13
|
+
--semi-color-data-0: rgba(87, 105, 255, 1);
|
|
14
|
+
--semi-color-data-1: rgba(142, 212, 231, 1);
|
|
15
|
+
--semi-color-data-2: rgba(245, 135, 0, 1);
|
|
16
|
+
--semi-color-data-3: rgba(220, 183, 252, 1);
|
|
17
|
+
--semi-color-data-4: rgba(74, 156, 247, 1);
|
|
18
|
+
--semi-color-data-5: rgba(243, 204, 53, 1);
|
|
19
|
+
--semi-color-data-6: rgba(254, 128, 144, 1);
|
|
20
|
+
--semi-color-data-7: rgba(139, 215, 210, 1);
|
|
21
|
+
--semi-color-data-8: rgba(131, 176, 35, 1);
|
|
22
|
+
--semi-color-data-9: rgba(233, 165, 229, 1);
|
|
23
|
+
--semi-color-fill-0: rgba(var(--semi-neutral-8),0.05);
|
|
24
|
+
--semi-color-fill-1: rgba(var(--semi-neutral-8),0.09);
|
|
25
|
+
--semi-color-fill-2: rgba(var(--semi-neutral-8),0.13);
|
|
26
|
+
--semi-color-text-0: rgba(var(--semi-neutral-9),1);
|
|
27
|
+
--semi-color-text-1: rgba(var(--semi-neutral-9),0.8);
|
|
28
|
+
--semi-color-text-2: rgba(var(--semi-neutral-9),0.6);
|
|
29
|
+
--semi-color-text-3: rgba(var(--semi-neutral-9),0.35);
|
|
30
|
+
--semi-color-white: rgba(var(--semi-white),1);
|
|
31
|
+
--semi-color-data-10: rgba(48, 167, 206, 1);
|
|
32
|
+
--semi-color-data-11: rgba(249, 192, 100, 1);
|
|
33
|
+
--semi-color-data-12: rgba(177, 113, 249, 1);
|
|
34
|
+
--semi-color-data-13: rgba(119, 182, 249, 1);
|
|
35
|
+
--semi-color-data-14: rgba(200, 143, 2, 1);
|
|
36
|
+
--semi-color-data-15: rgba(255, 170, 178, 1);
|
|
37
|
+
--semi-color-data-16: rgba(51, 176, 171, 1);
|
|
38
|
+
--semi-color-data-17: rgba(182, 215, 129, 1);
|
|
39
|
+
--semi-color-data-18: rgba(212, 88, 212, 1);
|
|
40
|
+
--semi-color-data-19: rgba(188, 198, 255, 1);
|
|
41
|
+
--semi-color-overlay-bg: rgba(22, 22, 26, 0.6);
|
|
42
|
+
--semi-color-border: rgba(var(--semi-neutral-1),1);
|
|
43
|
+
--semi-color-danger: rgba(var(--semi-red-5),1);
|
|
44
|
+
--semi-color-shadow: rgba(0,0,0,0.04);
|
|
45
|
+
--semi-color-border-1: rgba(var(--semi-neutral-2),1);
|
|
46
|
+
--semi-color-border-2: rgba(var(--semi-neutral-3),1);
|
|
47
|
+
--semi-color-border-3: rgba(var(--semi-neutral-5),1);
|
|
48
|
+
--semi-color-default: rgba(var(--semi-neutral-0),1);
|
|
49
|
+
--semi-color-info-hover: rgba(var(--semi-blue-6), 1);
|
|
50
|
+
--semi-color-link-hover: rgb(var(--semi-blue-4));
|
|
51
|
+
--semi-color-primary: rgba(var(--semi-arcoblue-5), 1);
|
|
52
|
+
--semi-color-success: rgba(var(--semi-green-5),1);
|
|
53
|
+
--semi-color-warning: rgba(var(--semi-orange-5),1);
|
|
54
|
+
--semi-color-info-active: rgba(var(--semi-blue-7), 1);
|
|
55
|
+
--semi-color-link-active: rgb(var(--semi-blue-6));
|
|
56
|
+
--semi-color-link-visited: rgb(var(--semi-blue-3));
|
|
57
|
+
--semi-color-tertiary: rgba(var(--semi-neutral-5),1);
|
|
58
|
+
--semi-color-focus-border: rgb(var(--semi-blue-5));
|
|
59
|
+
--semi-color-info-disabled: rgba(var(--semi-blue-2), 1);
|
|
60
|
+
--semi-color-danger-hover: rgba(var(--semi-red-6),1);
|
|
61
|
+
--semi-color-highlight: rgba(var(--semi-black), 1);
|
|
62
|
+
--semi-color-secondary: rgba(var(--semi-grey-2),1);
|
|
63
|
+
--semi-color-danger-active: rgba(var(--semi-red-7),1);
|
|
64
|
+
--semi-color-disabled-bg: rgb(var(--semi-neutral-4));
|
|
65
|
+
--semi-color-default-hover: rgba(var(--semi-neutral-1),1);
|
|
66
|
+
--semi-color-primary-hover: rgba(var(--semi-arcoblue-4), 1);
|
|
67
|
+
--semi-color-success-hover: rgba(var(--semi-green-6),1);
|
|
68
|
+
--semi-color-warning-hover: rgba(var(--semi-orange-6),1);
|
|
69
|
+
--semi-color-default-active: rgba(var(--semi-neutral-2),1);
|
|
70
|
+
--semi-color-disabled-fill: rgb(var(--semi-neutral-1));
|
|
71
|
+
--semi-color-disabled-text: rgba(var(--semi-neutral-9),0.35);
|
|
72
|
+
--semi-color-highlight-bg: rgba(var(--semi-yellow-4), 1);
|
|
73
|
+
--semi-color-primary-active: rgba(var(--semi-arcoblue-6), 1);
|
|
74
|
+
--semi-color-success-active: rgba(var(--semi-green-7),1);
|
|
75
|
+
--semi-color-warning-active: rgba(var(--semi-orange-7),1);
|
|
76
|
+
--semi-color-tertiary-hover: rgba(var(--semi-neutral-6),1);
|
|
77
|
+
--semi-color-disabled-border: rgb(var(--semi-neutral-3));
|
|
78
|
+
--semi-color-primary-disabled: rgba(var(--semi-arcoblue-2), 1);
|
|
79
|
+
--semi-color-success-disabled: rgba(var(--semi-green-2),1);
|
|
80
|
+
--semi-color-tertiary-active: rgba(var(--semi-neutral-7),1);
|
|
81
|
+
--semi-color-secondary-hover: rgba(var(--semi-grey-3),1);
|
|
82
|
+
--semi-color-secondary-active: rgba(var(--semi-grey-4),1);
|
|
83
|
+
--semi-color-info-light-hover: rgba(var(--semi-blue-1), 1);
|
|
84
|
+
--semi-color-info-light-active: rgba(var(--semi-blue-2), 1);
|
|
85
|
+
--semi-color-secondary-disabled: rgba(var(--semi-grey-1),1);
|
|
86
|
+
--semi-color-info-light-default: rgba(var(--semi-blue-0), 1);
|
|
87
|
+
--semi-color-danger-light-hover: rgba(var(--semi-red-1),1);
|
|
88
|
+
--semi-color-danger-light-active: rgba(var(--semi-red-2),1);
|
|
89
|
+
--semi-color-danger-light-default: rgba(var(--semi-red-0),1);
|
|
90
|
+
--semi-color-primary-light-hover: rgba(var(--semi-blue-1),1);
|
|
91
|
+
--semi-color-success-light-hover: rgba(var(--semi-green-1),1);
|
|
92
|
+
--semi-color-warning-light-hover: rgba(var(--semi-orange-1),1);
|
|
93
|
+
--semi-color-primary-light-active: rgba(var(--semi-blue-2),1);
|
|
94
|
+
--semi-color-success-light-active: rgba(var(--semi-green-2),1);
|
|
95
|
+
--semi-color-warning-light-active: rgba(var(--semi-orange-3),1);
|
|
96
|
+
--semi-color-primary-light-default: rgba(var(--semi-blue-0),1);
|
|
97
|
+
--semi-color-success-light-default: rgba(var(--semi-green-0),1);
|
|
98
|
+
--semi-color-tertiary-light-hover: rgba(var(--semi-neutral-1),1);
|
|
99
|
+
--semi-color-warning-light-default: rgba(var(--semi-orange-0),1);
|
|
100
|
+
--semi-color-tertiary-light-active: rgba(var(--semi-neutral-2),1);
|
|
101
|
+
--semi-color-secondary-light-hover: rgba(var(--semi-yellow-1),1);
|
|
102
|
+
--semi-color-tertiary-light-default: rgba(var(--semi-neutral-0),1);
|
|
103
|
+
--semi-color-secondary-light-active: rgba(var(--semi-yellow-2),1);
|
|
104
|
+
--semi-color-secondary-light-default: rgba(var(--semi-yellow-0),1);
|
|
105
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
106
|
+
-webkit-font-smoothing: antialiased;;
|
|
107
|
+
--semi-shadow-elevated: 0px 0px 1px rgba(0,0,0,0.3),0px 4px 14px rgba(0,0,0,0.1);
|
|
108
|
+
--semi-shadow-0: none;
|
|
109
|
+
--semi-shadow-1: none;
|
|
110
|
+
--semi-shadow-2: 0px 2px 4px rgba(0,0,0,0.14),0px 0px 1px rgba(0,0,0,0.16);
|
|
111
|
+
--semi-shadow-knob: 0 4px 6px rgba(0,0,0,0.1),0 0 1px rgba(0,0,0,0.3);
|
|
112
|
+
--semi-border-radius-large: 8px;
|
|
113
|
+
--semi-border-radius-small: 4px;
|
|
114
|
+
--semi-border-radius-circle: 99999px;
|
|
115
|
+
--semi-border-radius-medium: 6px;
|
|
116
|
+
--semi-border-radius-extra-small: 2px;
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
}
|
|
120
|
+
body[theme-mode="dark"], body .semi-always-dark, :host([theme-mode="dark"]), :host .semi-always-dark {
|
|
121
|
+
--semi-color-bg-0: rgb(22,22,26);
|
|
122
|
+
--semi-color-bg-1: rgb(35,36,41);
|
|
123
|
+
--semi-color-bg-2: rgb(53,54,60);
|
|
124
|
+
--semi-color-bg-3: rgb(67,68,74);
|
|
125
|
+
--semi-color-bg-4: rgb(79,81,89);
|
|
126
|
+
--semi-color-info: rgba(var(--semi-blue-5), 1);
|
|
127
|
+
--semi-color-link: var(--semi-color-primary);
|
|
128
|
+
--semi-color-nav-bg: var(--semi-color-bg-1);
|
|
129
|
+
--semi-color-black: rgba(var(--semi-black),1);
|
|
130
|
+
--semi-color-data-0: rgba(94, 109, 194, 1);
|
|
131
|
+
--semi-color-data-1: rgba(8, 104, 120, 1);
|
|
132
|
+
--semi-color-data-2: rgba(250, 173, 63, 1);
|
|
133
|
+
--semi-color-data-3: rgba(76, 43, 156, 1);
|
|
134
|
+
--semi-color-data-4: rgba(16, 125, 248, 1);
|
|
135
|
+
--semi-color-data-5: rgba(248, 202, 16, 1);
|
|
136
|
+
--semi-color-data-6: rgba(195, 30, 87, 1);
|
|
137
|
+
--semi-color-data-7: rgba(5, 119, 115, 1);
|
|
138
|
+
--semi-color-data-8: rgba(154, 207, 13, 1);
|
|
139
|
+
--semi-color-data-9: rgba(117, 29, 138, 1);
|
|
140
|
+
--semi-color-fill-0: rgba(var(--semi-neutral-8),0.05);
|
|
141
|
+
--semi-color-fill-1: rgba(var(--semi-neutral-8),0.09);
|
|
142
|
+
--semi-color-fill-2: rgba(var(--semi-neutral-8),0.13);
|
|
143
|
+
--semi-color-text-0: rgba(var(--semi-neutral-9),1);
|
|
144
|
+
--semi-color-text-1: rgba(var(--semi-neutral-9),0.8);
|
|
145
|
+
--semi-color-text-2: rgba(var(--semi-neutral-9),0.6);
|
|
146
|
+
--semi-color-text-3: rgba(var(--semi-neutral-9),0.35);
|
|
147
|
+
--semi-color-white: #E4E7F5;
|
|
148
|
+
--semi-color-data-10: rgba(16, 162, 180, 1);
|
|
149
|
+
--semi-color-data-11: rgba(208, 110, 11, 1);
|
|
150
|
+
--semi-color-data-12: rgba(113, 66, 197, 1);
|
|
151
|
+
--semi-color-data-13: rgba(7, 100, 212, 1);
|
|
152
|
+
--semi-color-data-14: rgba(251, 232, 110, 1);
|
|
153
|
+
--semi-color-data-15: rgba(160, 19, 73, 1);
|
|
154
|
+
--semi-color-data-16: rgba(11, 179, 167, 1);
|
|
155
|
+
--semi-color-data-17: rgba(98, 138, 6, 1);
|
|
156
|
+
--semi-color-data-18: rgba(162, 48, 179, 1);
|
|
157
|
+
--semi-color-data-19: rgba(40, 51, 138, 1);
|
|
158
|
+
--semi-color-overlay-bg: rgba(22, 22, 26, 0.6);
|
|
159
|
+
--semi-color-border: rgba(var(--semi-neutral-1),1);
|
|
160
|
+
--semi-color-danger: rgba(var(--semi-red-5),1);
|
|
161
|
+
--semi-color-shadow: rgba(0,0,0,0.04);
|
|
162
|
+
--semi-color-border-1: rgba(var(--semi-neutral-2),1);
|
|
163
|
+
--semi-color-border-2: rgba(var(--semi-neutral-3),1);
|
|
164
|
+
--semi-color-border-3: rgba(var(--semi-neutral-5),1);
|
|
165
|
+
--semi-color-default: rgba(var(--semi-neutral-0),1);
|
|
166
|
+
--semi-color-info-hover: rgba(var(--semi-blue-6), 1);
|
|
167
|
+
--semi-color-link-hover: var(--semi-color-primary-hover);
|
|
168
|
+
--semi-color-primary: rgba(var(--semi-blue-5),1);
|
|
169
|
+
--semi-color-success: rgba(var(--semi-green-5),1);
|
|
170
|
+
--semi-color-warning: rgba(var(--semi-orange-5),1);
|
|
171
|
+
--semi-color-info-active: rgba(var(--semi-blue-7), 1);
|
|
172
|
+
--semi-color-link-active: var(--semi-color-primary-active);
|
|
173
|
+
--semi-color-link-visited: var(--semi-color-primary);
|
|
174
|
+
--semi-color-tertiary: rgba(var(--semi-neutral-5),1);
|
|
175
|
+
--semi-color-focus-border: rgba(var(--semi-brand-5), 1);
|
|
176
|
+
--semi-color-info-disabled: rgba(var(--semi-blue-2), 1);
|
|
177
|
+
--semi-color-danger-hover: rgba(var(--semi-red-6),1);
|
|
178
|
+
--semi-color-highlight: rgba(var(--semi-white), 1);
|
|
179
|
+
--semi-color-secondary: rgba(var(--semi-yellow-5),1);
|
|
180
|
+
--semi-color-danger-active: rgba(var(--semi-red-7),1);
|
|
181
|
+
--semi-color-disabled-bg: rgba(var(--semi-neutral-2),1);
|
|
182
|
+
--semi-color-default-hover: rgba(var(--semi-neutral-1),1);
|
|
183
|
+
--semi-color-primary-hover: rgba(var(--semi-blue-4),1);
|
|
184
|
+
--semi-color-success-hover: rgba(var(--semi-green-6),1);
|
|
185
|
+
--semi-color-warning-hover: rgba(var(--semi-orange-6),1);
|
|
186
|
+
--semi-color-default-active: rgba(var(--semi-neutral-2),1);
|
|
187
|
+
--semi-color-disabled-fill: rgba(var(--semi-neutral-8),0.04);
|
|
188
|
+
--semi-color-disabled-text: rgba(var(--semi-neutral-9),0.35);
|
|
189
|
+
--semi-color-highlight-bg: rgba(var(--semi-yellow-2), 1);
|
|
190
|
+
--semi-color-primary-active: rgba(var(--semi-blue-6),1);
|
|
191
|
+
--semi-color-success-active: rgba(var(--semi-green-7),1);
|
|
192
|
+
--semi-color-warning-active: rgba(var(--semi-orange-7),1);
|
|
193
|
+
--semi-color-tertiary-hover: rgba(var(--semi-neutral-6),1);
|
|
194
|
+
--semi-color-disabled-border: rgba(var(--semi-neutral-9),0.04);
|
|
195
|
+
--semi-color-primary-disabled: rgba(var(--semi-blue-2),1);
|
|
196
|
+
--semi-color-success-disabled: rgba(var(--semi-green-2),1);
|
|
197
|
+
--semi-color-tertiary-active: rgba(var(--semi-neutral-7),1);
|
|
198
|
+
--semi-color-secondary-hover: rgba(var(--semi-yellow-6),1);
|
|
199
|
+
--semi-color-secondary-active: rgba(var(--semi-yellow-7),1);
|
|
200
|
+
--semi-color-info-light-hover: rgba(var(--semi-blue-5), 0.3);
|
|
201
|
+
--semi-color-info-light-active: rgba(var(--semi-blue-5), 0.4);
|
|
202
|
+
--semi-color-secondary-disabled: rgba(var(--semi-yellow-2),1);
|
|
203
|
+
--semi-color-info-light-default: rgba(var(--semi-blue-5), 0.2);
|
|
204
|
+
--semi-color-danger-light-focus: rgba(var(--semi-red-6),0.65);
|
|
205
|
+
--semi-color-danger-light-hover: rgba(var(--semi-red-6),0.35);
|
|
206
|
+
--semi-color-danger-light-active: rgba(var(--semi-red-6),0.5);
|
|
207
|
+
--semi-color-danger-light-default: rgba(var(--semi-red-6),0.2);
|
|
208
|
+
--semi-color-primary-light-hover: rgba(var(--semi-blue-1),1);
|
|
209
|
+
--semi-color-success-light-hover: rgba(var(--semi-green-1),1);
|
|
210
|
+
--semi-color-warning-light-focus: rgba(var(--semi-orange-6),0.65);
|
|
211
|
+
--semi-color-warning-light-hover: rgba(var(--semi-orange-6),0.35);
|
|
212
|
+
--semi-color-primary-light-active: rgba(var(--semi-blue-2),1);
|
|
213
|
+
--semi-color-success-light-active: rgba(var(--semi-green-2),1);
|
|
214
|
+
--semi-color-warning-light-active: rgba(var(--semi-orange-6),5);
|
|
215
|
+
--semi-color-primary-light-default: rgba(var(--semi-blue-0),1);
|
|
216
|
+
--semi-color-success-light-default: rgba(var(--semi-green-0),1);
|
|
217
|
+
--semi-color-tertiary-light-hover: rgba(var(--semi-neutral-1),1);
|
|
218
|
+
--semi-color-warning-light-default: rgba(var(--semi-orange-6),0.2);
|
|
219
|
+
--semi-color-tertiary-light-active: rgba(var(--semi-neutral-2),1);
|
|
220
|
+
--semi-color-secondary-light-hover: rgba(var(--semi-yellow-1),1);
|
|
221
|
+
--semi-color-tertiary-light-default: rgba(var(--semi-neutral-0),1);
|
|
222
|
+
--semi-color-secondary-light-active: rgba(var(--semi-yellow-2),1);
|
|
223
|
+
--semi-color-secondary-light-default: rgba(var(--semi-yellow-0),1);
|
|
224
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
225
|
+
-webkit-font-smoothing: antialiased;;
|
|
226
|
+
--semi-shadow-elevated: 0px 0px 1px rgba(0,0,0,0.3),0px 4px 14px rgba(0,0,0,0.1);
|
|
227
|
+
--semi-shadow-0: none;
|
|
228
|
+
--semi-shadow-1: none;
|
|
229
|
+
--semi-shadow-2: 0px 2px 4px rgba(0,0,0,0.14),0px 0px 1px rgba(0,0,0,0.16);
|
|
230
|
+
--semi-shadow-knob: 0 4px 6px rgba(0,0,0,0.1),0 0 1px rgba(0,0,0,0.3);
|
|
231
|
+
--semi-border-radius-large: 8px;
|
|
232
|
+
--semi-border-radius-small: 4px;
|
|
233
|
+
--semi-border-radius-circle: 99999px;
|
|
234
|
+
--semi-border-radius-medium: 6px;
|
|
235
|
+
--semi-border-radius-extra-small: 2px;
|
|
236
|
+
|
|
237
|
+
|
|
238
|
+
}
|
package/scss/index.scss
ADDED
package/scss/local.scss
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
$font-form_label-fontWeight: $font-weight-regular;
|
|
2
|
+
$color-form_label_extra-text-default: var(--semi-color-text-2);
|
|
3
|
+
$spacing-form_label-marginBottom: 8px;
|
|
4
|
+
$color-tabs_tab_card-bg-focus: transparent;
|
|
5
|
+
$color-tabs_tab_card-bg-hover: transparent;
|
|
6
|
+
$color-tabs_tab_card-bg-active: transparent;
|
|
7
|
+
$color-tabs_tab_button-bg-hover: transparent;
|
|
8
|
+
$color-tabs_tab_button-bg-active: transparent;
|
|
9
|
+
$color-tabs_tab_button-text-default: var(--semi-color-text-0);
|
|
10
|
+
$color-tabs_tab_line_default-text-hover: var(--semi-color-primary-hover);
|
|
11
|
+
$color-tabs_tab_line_default-border-hover: transparent;
|
|
12
|
+
$color-tabs_tab_line_default-icon-default: var(--semi-color-text-0);
|
|
13
|
+
$color-tabs_tab_line_default-text-default: var(--semi-color-text-0);
|
|
14
|
+
$color-tabs_tab_line_selected-text-default: var(--semi-color-primary);
|
|
15
|
+
$color-tabs_tab_button_default-icon-default: var(--semi-color-text-0);
|
|
16
|
+
$color-tabs_tab_button_default-text-default: var(--semi-color-text-0);
|
|
17
|
+
$color-tabs_tab_card_default-border-default: var(--semi-color-border-2);
|
|
18
|
+
$color-tabs_tab_line_default-border-default: var(--semi-color-border-2);
|
|
19
|
+
$color-input_danger-bg-focus: var(--semi-color-bg-0);
|
|
20
|
+
$color-input_danger-bg-hover: var(--semi-color-bg-0);
|
|
21
|
+
$color-input_default-bg-focus: var(--semi-color-bg-0);
|
|
22
|
+
$color-input_default-bg-hover: var(--semi-color-bg-0);
|
|
23
|
+
$color-input_warning-bg-focus: var(--semi-color-bg-0);
|
|
24
|
+
$color-input_warning-bg-hover: var(--semi-color-bg-0);
|
|
25
|
+
$color-input_danger-bg-default: var(--semi-color-bg-0);
|
|
26
|
+
$color-input_default-bg-active: var(--semi-color-bg-0);
|
|
27
|
+
$color-input_default-bg-default: var(--semi-color-bg-0);
|
|
28
|
+
$color-input_warning-bg-default: var(--semi-color-bg-0);
|
|
29
|
+
$color-input_danger-border-hover: var(--semi-color-danger);
|
|
30
|
+
$color-input_default-border-hover: var(--semi-color-focus-border);
|
|
31
|
+
$color-input_warning-border-hover: var(--semi-color-warning);
|
|
32
|
+
$color-input_danger-border-default: var(--semi-color-danger);
|
|
33
|
+
$color-input_default-border-default: var(--semi-color-border-2);
|
|
34
|
+
$color-input_warning-border-default: var(--semi-color-warning);
|
|
35
|
+
$spacing-modal_content_withicon-marginLeft: 0px;
|
|
36
|
+
$font-radio_buttonRadio-hover-fontWeight: $font-weight-regular;
|
|
37
|
+
$font-radio_buttonRadio-default-fontWeight: $font-weight-regular;
|
|
38
|
+
$color-radio_default-bg-hover: var(--semi-color-bg-0);
|
|
39
|
+
$color-radio_checked-bg-disabled: var(--semi-color-disabled-bg);
|
|
40
|
+
$color-radio_buttonRadio-bg-default: var(--semi-color-bg-0);
|
|
41
|
+
$color-radio_default-border-default: var(--semi-color-border-3);
|
|
42
|
+
$color-radio_disabled-border-default: var(--semi-color-border-3);
|
|
43
|
+
$color-table-border-default: var(--semi-color-border-2);
|
|
44
|
+
$color-table_th-border-default: var(--semi-color-border-2);
|
|
45
|
+
$width-table_header_border: 1px;
|
|
46
|
+
$spacing-table_th-paddingTop: 12px;
|
|
47
|
+
$spacing-table_th-paddingBottom: 12px;
|
|
48
|
+
$font-select_keyword-fontWeight: 500;
|
|
49
|
+
$color-select-bg-hover: var(--semi-color-bg-0);
|
|
50
|
+
$color-select-bg-active: var(--semi-color-bg-0);
|
|
51
|
+
$color-select-bg-default: var(--semi-color-bg-0);
|
|
52
|
+
$color-select-border-hover: var(--semi-color-primary);
|
|
53
|
+
$color-select-border-default: var(--semi-color-border-2);
|
|
54
|
+
$color-select_option-icon-active: var(--semi-color-primary);
|
|
55
|
+
$spacing-select_option-paddingLeft: 12px;
|
|
56
|
+
$spacing-select_option-paddingRight: 12px;
|
|
57
|
+
$color-switch_checked-bg-foucs: var(--semi-color-primary-active);
|
|
58
|
+
$color-switch_checked-bg-hover: var(--semi-color-primary-hover);
|
|
59
|
+
$color-switch_checked-bg-default: var(--semi-color-primary);
|
|
60
|
+
$color-switch_checked_disabled-bg-default: var(--semi-color-primary-disabled);
|
|
61
|
+
$color-cascader_option-bg-hover: var(--semi-color-fill-1);
|
|
62
|
+
$color-cascader_option-bg-selected: var(--semi-color-fill-1);
|
|
63
|
+
$spacing-cacader_option_list-paddingX: 4px;
|
|
64
|
+
$spacing-cascader_selection_tag-marginX: 4px;
|
|
65
|
+
$spacing-cascader_selection_tag-marginY: 4px;
|
|
66
|
+
$spacing-collapse_header-marginX: 0;
|
|
67
|
+
$spacing-collapse_header-marginY: 0;
|
|
68
|
+
$spacing-collapse_header-padding: 0;
|
|
69
|
+
$spacing-dropdown_menu-paddingX: 4px;
|
|
70
|
+
$color-pagination_item-bg-active: var(--semi-color-primary-light-default);
|
package/scss/mixin.scss
ADDED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
@mixin shadow-0 {
|
|
2
|
+
box-shadow: none;
|
|
3
|
+
};
|
|
4
|
+
@mixin shadow-1 {
|
|
5
|
+
box-shadow: none;
|
|
6
|
+
};
|
|
7
|
+
@mixin shadow-2 {
|
|
8
|
+
box-shadow: 0px 2px 4px rgba(0,0,0,0.14),0px 0px 1px rgba(0,0,0,0.16);
|
|
9
|
+
};
|
|
10
|
+
@mixin shadow-knob {
|
|
11
|
+
box-shadow: 0 4px 6px rgba(0,0,0,0.1),0 0 1px rgba(0,0,0,0.3);
|
|
12
|
+
};
|
|
13
|
+
@mixin shadow-elevated {
|
|
14
|
+
box-shadow: 0px 0px 1px rgba(0,0,0,0.3),0px 4px 14px rgba(0,0,0,0.1);
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
@mixin box-sizing() {
|
|
18
|
+
box-sizing: border-box;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@mixin all-center {
|
|
22
|
+
display: flex;
|
|
23
|
+
justify-content: center;
|
|
24
|
+
align-items: center;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@mixin ver-center {
|
|
28
|
+
display: flex;
|
|
29
|
+
align-items: center;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@mixin hor-center {
|
|
33
|
+
display: flex;
|
|
34
|
+
justify-content: center;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@mixin text-overflow-hidden {
|
|
38
|
+
overflow: hidden;
|
|
39
|
+
text-overflow: ellipsis;
|
|
40
|
+
white-space: nowrap;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@mixin no-scrollbar {
|
|
44
|
+
&::-webkit-scrollbar {
|
|
45
|
+
// width: 8px;
|
|
46
|
+
display: none;
|
|
47
|
+
}
|
|
48
|
+
&::-webkit-scrollbar-thumb {
|
|
49
|
+
background-color: transparent;
|
|
50
|
+
// background-color: $grey-2;
|
|
51
|
+
}
|
|
52
|
+
&::-webkit-scrollbar-track {
|
|
53
|
+
opacity: 0;
|
|
54
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
55
|
+
background-color: transparent;
|
|
56
|
+
// background-color: $grey-0;
|
|
57
|
+
}
|
|
58
|
+
&:hover {
|
|
59
|
+
&::-webkit-scrollbar {
|
|
60
|
+
display: block;
|
|
61
|
+
width: 8px;
|
|
62
|
+
// width: 12px;
|
|
63
|
+
}
|
|
64
|
+
&::-webkit-scrollbar-thumb {
|
|
65
|
+
border-radius: 10px;
|
|
66
|
+
background-color: var(--semi-gray-3);
|
|
67
|
+
}
|
|
68
|
+
&::-webkit-scrollbar-track {
|
|
69
|
+
// background-color: rgba(0, 0, 0, 0.05);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
|
|
2
|
+
$prefix: 'semi';
|
|
3
|
+
|
|
4
|
+
/* sizing */
|
|
5
|
+
$height-control-small: 24px; // 表单项高度 - 小尺寸
|
|
6
|
+
$height-control-default: 32px; // 表单项高度 - 默认尺寸
|
|
7
|
+
$height-control-large: 40px; // 表单项高度 - 大尺寸
|
|
8
|
+
$border-thickness: 0; // 描边宽度 - 零
|
|
9
|
+
$border-thickness-control: 1px; // 描边宽度 - 默认状态（checkbox 等）
|
|
10
|
+
$border-thickness-control-focus: 1px; // 描边宽度 - focus 状态（checkbox 等）
|
|
11
|
+
|
|
12
|
+
$width-icon-extra-small: 8px; // 图标尺寸 - 超小
|
|
13
|
+
$width-icon-small: 12px; // 图标尺寸 - 小
|
|
14
|
+
$width-icon-medium: 16px; // 图标尺寸 - 中
|
|
15
|
+
$width-icon-large: 20px; // 图标尺寸 - 大
|
|
16
|
+
$width-icon-extra-large: 24px; // 图标尺寸 - 超大
|
|
17
|
+
|
|
18
|
+
/* spacing */
|
|
19
|
+
$spacing-none: 0; // 间距 - 零
|
|
20
|
+
$spacing-super-tight: 2px; // 间距 - 极紧凑尺寸内/外边距
|
|
21
|
+
$spacing-extra-tight: 4px; // 间距 - 超紧凑尺寸内/外边距
|
|
22
|
+
$spacing-tight: 8px; // 间距 - 紧凑尺寸内/外边距
|
|
23
|
+
$spacing-base-tight: 12px; // 间距 - 默认（偏紧凑）尺寸内/外边距
|
|
24
|
+
$spacing-base: 16px; // 间距 - 默认尺寸内/外边距
|
|
25
|
+
$spacing-base-loose: 20px; // 间距 - 默认（偏宽松）尺寸内/外边距
|
|
26
|
+
$spacing-loose: 24px; // 间距 - 宽松尺寸内/外边距
|
|
27
|
+
$spacing-extra-loose: 32px; // 间距 - 超宽松尺寸内/外边距
|
|
28
|
+
$spacing-super-loose: 40px; // 间距 - 极宽松尺寸内/外边距
|
|
29
|
+
|
|
30
|
+
// z-index
|
|
31
|
+
$z-portal: 1; // 抽象插槽，适用于未经特殊定制的所有组件
|
|
32
|
+
$z-affix: 10; // 固定位置的页面元素 z-index
|
|
33
|
+
$z-backtop: 10; // 返回顶部 z-index
|
|
34
|
+
$z-badge: 10; // badge z-index
|
|
35
|
+
$z-modal: 1000; // modal z-index
|
|
36
|
+
$z-modal-mask: 1000; // modal 遮罩 z-index
|
|
37
|
+
|
|
38
|
+
$z-toast: 1010; // toast 组件 z-index
|
|
39
|
+
$z-notification: 1010; // notification 组件 z-index
|
|
40
|
+
$z-popover: 1030; // popover 组件 z-index
|
|
41
|
+
$z-dropdown: 1050; // dropdown 组件 z-index
|
|
42
|
+
$z-tooltip: 1060; // tooltip 组件 z-index
|
|
43
|
+
$z-image_preview: 1070; // Image 组件预览层z-index
|
|
44
|
+
$z-image_preview_header: 1; // Image 组件预览层中 header 部分 z-index
|
|
45
|
+
// $z-avatar-default: 100;
|
|
46
|
+
$z-image_preview: 1070; // Image 组件预览层z-index
|
|
47
|
+
$z-image_preview_header: 1; // Image 组件预览层中 header 部分 z-index
|
|
48
|
+
|
|
49
|
+
// 正在拖拽中的元素的 z-index，需要高于所有的弹出层组件 z-index
|
|
50
|
+
$z-transfer_right_item_drag_item_move: 2000; // 穿梭框右侧面板中正在拖拽元素的z-index
|
|
51
|
+
$z-tagInput_drag_item_move: 2000; // 标签输入框中正在拖拽元素的z-index
|
|
52
|
+
$z-resizable_handler: 2000; // 伸缩框组件中handler的z-index
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
// font
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
$font-family-regular: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; // semi 预置字体回退
|
|
59
|
+
$font-size-small: 12px; // 小文本字号
|
|
60
|
+
$font-size-regular: 14px; // 常规文本字号
|
|
61
|
+
|
|
62
|
+
$font-size-header-6: 16px; // 六级标题字号
|
|
63
|
+
$font-size-header-5: 16px; // 五级标题字号
|
|
64
|
+
$font-size-header-4: 18px; // 四级标题字号
|
|
65
|
+
$font-size-header-3: 20px; // 三级标题字号
|
|
66
|
+
$font-size-header-2: 24px; // 二级标题字号
|
|
67
|
+
$font-size-header-1: 30px; // 一级标题字号
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
$font-weight-light: 200; // 字重 - 轻
|
|
71
|
+
$font-weight-regular: 400; // 字重 - 常规
|
|
72
|
+
$font-weight-bold: 600; // 字重 - 加粗
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
|