@semi-bot/semi-theme-fn_photo 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.
Files changed (14) hide show
  1. package/README.md +24 -0
  2. package/package.json +14 -0
  3. package/raw.json +1362 -0
  4. package/scss/_font.scss +56 -0
  5. package/scss/_palette.scss +402 -0
  6. package/scss/animation.scss +39 -0
  7. package/scss/custom.scss +0 -0
  8. package/scss/global.scss +394 -0
  9. package/scss/index.scss +3 -0
  10. package/scss/local.scss +232 -0
  11. package/scss/mixin.scss +81 -0
  12. package/scss/variables.scss +75 -0
  13. package/semi.css +26349 -0
  14. package/semi.min.css +1 -0
package/scss/global.scss ADDED
@@ -0,0 +1,394 @@
1
+ @import './_palette.scss';
2
+
3
+ body, body[theme-mode="dark"] .semi-always-light, :host, :host .semi-always-light {
4
+ --semi-color-app: rgba(var(--semi-grey-1),1);
5
+ --semi-color-bg-0: rgba(var(--semi-grey-1),1);
6
+ --semi-color-bg-1: rgba(255,255,255,1);
7
+ --semi-color-bg-2: rgba(255,255,255,1);
8
+ --semi-color-bg-3: rgba(255,255,255,1);
9
+ --semi-color-bg-4: rgba(255,255,255,1);
10
+ --semi-color-info: rgba(var(--semi-brand-5), 1);
11
+ --semi-color-link: rgba(var(--semi-brand-5),1);
12
+ --semi-color-bg-anti: rgba(var(--semi-grey-9), 1);
13
+ --semi-color-nav-bg: rgba(var(--semi-grey-0), 1);
14
+ --semi-color-black: rgba(0,0,0,1);
15
+ --semi-color-data-0: rgba(0,102,255,1);
16
+ --semi-color-data-1: rgba(142,212,231,1);
17
+ --semi-color-data-2: rgba(245,135,0,1);
18
+ --semi-color-data-3: rgba(220,183,252,1);
19
+ --semi-color-data-4: rgba(74,156,251,1);
20
+ --semi-color-data-5: rgba(243,204,53,1);
21
+ --semi-color-data-6: rgba(254,128,144,1);
22
+ --semi-color-data-7: rgba(0,179,178,1);
23
+ --semi-color-data-8: rgba(0,135,83,1);
24
+ --semi-color-data-9: rgba(230,155,255,1);
25
+ --semi-color-fill-0: rgba(var(--semi-grey-9),0.04);
26
+ --semi-color-fill-1: rgba(var(--semi-grey-9),0.06);
27
+ --semi-color-fill-2: rgba(var(--semi-grey-9),0.12);
28
+ --semi-color-fill-3: rgba(var(--semi-grey-9),0.2);
29
+ --semi-color-text-0: rgba(var(--semi-grey-9), 1);
30
+ --semi-color-text-1: rgba(var(--semi-grey-9),0.75);
31
+ --semi-color-text-2: rgba(var(--semi-grey-9),0.5);
32
+ --semi-color-text-3: rgba(var(--semi-grey-9),0.25);
33
+ --semi-color-white: rgba(255,255,255,1);
34
+ --semi-color-app-name: rgba(var(--semi-blue-6),1);
35
+ --semi-color-bg-avatar: rgba(var(--semi-grey-5), 0.16);
36
+ --semi-color-data-10: rgba(48,167,206,1);
37
+ --semi-color-data-11: rgba(249, 192, 100, 1);
38
+ --semi-color-data-12: rgba(177, 113, 249, 1);
39
+ --semi-color-data-13: rgba(119, 182, 249, 1);
40
+ --semi-color-data-14: rgba(200, 143, 2, 1);
41
+ --semi-color-data-15: rgba(255, 170, 178, 1);
42
+ --semi-color-data-16: rgba(51, 176, 171, 1);
43
+ --semi-color-data-17: rgba(182, 215, 129, 1);
44
+ --semi-color-data-18: rgba(212,88,212,1);
45
+ --semi-color-data-19: rgba(188, 198, 255, 1);
46
+ --semi-color-data-20: rgba(121,137,255, 1);
47
+ --semi-color-app-name0: rgba(var(--semi-blue-6),1);
48
+ --semi-color-app-name1: rgba(var(--semi-blue-6),1);
49
+ --semi-color-border: rgba(var(--semi-grey-9),0.16);
50
+ --semi-color-danger: rgba(var(--semi-red-5),1);
51
+ --semi-color-shadow: rgba(var(--semi-grey-9), 0.05);
52
+ --semi-color-text-nav: rgba(var(--semi-grey-9),0.75);
53
+ --semi-color-app-header: rgba(var(--semi-grey-1),0);
54
+ --semi-color-bg-dropdown: rgba(255,255,255,1);
55
+ --semi-color-black-10: rgba(0,0,0,0.1);
56
+ --semi-color-black-20: rgba(0,0,0,0.2);
57
+ --semi-color-black-30: rgba(0,0,0,0.3);
58
+ --semi-color-black-40: rgba(0,0,0,0.4);
59
+ --semi-color-black-50: rgba(0,0,0,0.5);
60
+ --semi-color-black-60: rgba(0,0,0,0.6);
61
+ --semi-color-black-70: rgba(0,0,0,0.7);
62
+ --semi-color-black-80: rgba(0,0,0,0.8);
63
+ --semi-color-black-90: rgba(0,0,0,0.9);
64
+ --semi-color-text-anti: rgba(255,255,255,1);
65
+ --semi-color-white-10: rgba(255,255,255,0.1);
66
+ --semi-color-white-20: rgba(255,255,255,0.2);
67
+ --semi-color-white-30: rgba(255,255,255,0.3);
68
+ --semi-color-white-40: rgba(255,255,255,0.4);
69
+ --semi-color-white-50: rgba(255,255,255,0.5);
70
+ --semi-color-white-60: rgba(255,255,255,0.6);
71
+ --semi-color-white-70: rgba(255,255,255,0.7);
72
+ --semi-color-white-80: rgba(255,255,255,0.8);
73
+ --semi-color-white-90: rgba(255,255,255,0.9);
74
+ --semi-color-default: rgba(var(--semi-grey-0),1);
75
+ --semi-color-info-hover: rgba(var(--semi-brand-6), 1);
76
+ --semi-color-link-hover: rgba(var(--semi-brand-6), 1);
77
+ --semi-color-primary: rgba(var(--semi-brand-5),1);
78
+ --semi-color-success: rgba(var(--semi-green-5), 1);
79
+ --semi-color-tab-HoverBg: rgba(var(--semi-grey-5),0.16);
80
+ --semi-color-warning: rgba(var(--semi-amber-5), 1);
81
+ --semi-color-app-siderbar: rgba(var(--semi-grey-1),0);
82
+ --semi-color-card-border: rgba(var(--semi-grey-9),0.08);
83
+ --semi-color-info-active: rgba(var(--semi-brand-7), 1);
84
+ --semi-color-link-active: rgba(var(--semi-brand-7),1);
85
+ --semi-color-white-name: rgba(var(--semi-blue-6),1);
86
+ --semi-color-app-container: rgba(255,255,255,1);
87
+ --semi-color-bg-transparent: rgba(255,255,255,0);
88
+ --semi-color-card-HoverBg: rgba(var(--semi-grey-9),0.04);
89
+ --semi-color-divider-0: rgba(var(--semi-grey-9),0.2);
90
+ --semi-color-divider-1: rgba(var(--semi-grey-9),0.12);
91
+ --semi-color-divider-2: rgba(var(--semi-grey-9),0.06);
92
+ --semi-color-link-visited: rgba(var(--semi-brand-7),1);
93
+ --semi-color-photo-toast: rgba(0,0,0,0.9);
94
+ --semi-color-tab-DefaultBg: rgba(var(--semi-grey-5),0.05);
95
+ --semi-color-tertiary: rgba(var(--semi-grey-6), 1);
96
+ --semi-color-card-ActiveBg: rgba(var(--semi-brand-5),0.12);
97
+ --semi-color-focus-border: rgba(var(--semi-brand-5),1);
98
+ --semi-color-info-disabled: rgba(var(--semi-brand-1),0.16);
99
+ --semi-color-overlay-bg: rgba(0,0,0,0.7);
100
+ --semi-color-tab-DisabledBg: rgba(var(--semi-grey-5),0.16);
101
+ --semi-color-tab-SelectedBg: rgba(var(--semi-grey-9),1);
102
+ --semi-color-Scrollbar: rgba(var(--semi-grey-5),0.16);
103
+ --semi-color-border-hover: rgba(var(--semi-grey-9),0.2);
104
+ --semi-color-border-modal: rgba(var(--semi-grey-9),0.06);
105
+ --semi-color-card-DefaultBg: rgba(var(--semi-grey-9),0.02);
106
+ --semi-color-danger-hover: rgba(var(--semi-red-6), 1);
107
+ --semi-color-highlight: rgba(var(--semi-grey-9), 1);
108
+ --semi-color-input-HoverBg: rgba(255,255,255,1);
109
+ --semi-color-secondary: rgba(var(--semi-light-blue-5), 1);
110
+ --semi-color-table-FocusBg: rgba(var(--semi-brand-5),0.2);
111
+ --semi-color-table-HoverBg: rgba(var(--semi-grey-5),0.08);
112
+ --semi-color-border-active: rgba(var(--semi-grey-9),0.24);
113
+ --semi-color-border-select: rgba(var(--semi-grey-9),0.06);
114
+ --semi-color-danger-active: rgba(var(--semi-red-7), 1);
115
+ --semi-color-disabled-bg: rgba(var(--semi-grey-1),1);
116
+ --semi-color-input-ActiveBg: rgba(255,255,255,1);
117
+ --semi-color-table-ActiveBg: rgba(var(--semi-brand-5),0.12);
118
+ --semi-color-card-borderHover: rgba(var(--semi-grey-8),0.16);
119
+ --semi-color-default-hover: rgba(var(--semi-grey-1), 1);
120
+ --semi-color-input-DefaultBg: rgba(255,255,255,1);
121
+ --semi-color-photo-toastText: rgba(255,255,255,1);
122
+ --semi-color-primary-hover: rgba(var(--semi-brand-6), 1);
123
+ --semi-color-success-hover: rgba(var(--semi-green-6), 1);
124
+ --semi-color-warning-hover: rgba(var(--semi-amber-6), 1);
125
+ --semi-color-Component-bg: rgba(255,255,255,0.5);
126
+ --semi-color-card-borderActive: rgba(var(--semi-brand-5),1);
127
+ --semi-color-default-active: rgba(var(--semi-grey-2), 1);
128
+ --semi-color-disabled-fill: rgba(var(--semi-grey-9),0.04);
129
+ --semi-color-disabled-text: rgba(var(--semi-grey-9),0.25);
130
+ --semi-color-highlight-bg: rgba(var(--semi-yellow-5),1);
131
+ --semi-color-input-DisabledBg: rgba(var(--semi-grey-5),0.16);
132
+ --semi-color-primary-active: rgba(var(--semi-brand-7), 1);
133
+ --semi-color-success-active: rgba(var(--semi-green-7), 1);
134
+ --semi-color-warning-active: rgba(var(--semi-amber-7), 1);
135
+ --semi-color-tertiary-hover: rgba(var(--semi-grey-7), 1);
136
+ --semi-color-Component-card: rgba(255,255,255,0.9);
137
+ --semi-color-disabled-border: rgba(var(--semi-grey-9),0.16);
138
+ --semi-color-primary-disabled: rgba(var(--semi-grey-5),0.16);
139
+ --semi-color-success-disabled: rgba(var(--semi-green-1),0.16);
140
+ --semi-color-tertiary-active: rgba(var(--semi-grey-8), 1);
141
+ --semi-color-Scrollbar-hover: rgba(var(--semi-grey-5),0.32);
142
+ --semi-color-secondary-hover: rgba(var(--semi-light-blue-6), 1);
143
+ --semi-color-overlay-CustomAnti: rgba(255,255,255,0.7);
144
+ --semi-color-secondary-active: rgba(var(--semi-light-blue-7), 1);
145
+ --semi-color-info-light-hover: rgba(var(--semi-brand-2),0.3);
146
+ --semi-color-progress-defaultBg: rgba(var(--semi-grey-9),0.06);
147
+ --semi-color-fndesktop-navbarBg: rgba(134,164,179,0.05);
148
+ --semi-color-info-light-active: rgba(var(--semi-brand-2),0.4);
149
+ --semi-color-secondary-disabled: rgba(var(--semi-grey-5),0.16);
150
+ --semi-color-info-light-default: rgba(var(--semi-brand-2),0.2);
151
+ --semi-color-overlay-CustomPreview: rgba(0,0,0,0.9);
152
+ --semi-color-danger-light-hover: rgba(var(--semi-red-2),0.3);
153
+ --semi-color-danger-light-active: rgba(var(--semi-red-2),0.4);
154
+ --semi-color-fndesktop-navbarBorder: rgba(255,255,255,0.2);
155
+ --semi-color-danger-light-default: rgba(var(--semi-red-2),0.2);
156
+ --semi-color-primary-light-hover: rgba(var(--semi-brand-5),0.2);
157
+ --semi-color-success-light-hover: rgba(var(--semi-green-3),0.3);
158
+ --semi-color-warning-light-hover: rgba(var(--semi-orange-3),0.3);
159
+ --semi-color-primary-light-active: rgba(var(--semi-brand-5),0.3);
160
+ --semi-color-success-light-active: rgba(var(--semi-green-3),0.4);
161
+ --semi-color-warning-light-active: rgba(var(--semi-orange-3),0.4);
162
+ --semi-color-primary-light-default: rgba(var(--semi-brand-5),0.12);
163
+ --semi-color-success-light-default: rgba(var(--semi-green-3),0.2);
164
+ --semi-color-tertiary-light-hover: rgba(var(--semi-grey-5),0.3);
165
+ --semi-color-warning-light-default: rgba(var(--semi-orange-3),0.2);
166
+ --semi-color-tertiary-light-active: rgba(var(--semi-grey-5),0.4);
167
+ --semi-color-CheckboxPhoto-DefaultBg: rgba(255,255,255,0.2);
168
+ --semi-color-secondary-light-hover: rgba(var(--semi-light-blue-5),0.3);
169
+ --semi-color-tertiary-light-default: rgba(var(--semi-grey-5),0.2);
170
+ --semi-color-secondary-light-active: rgba(var(--semi-light-blue-5),0.4);
171
+ --semi-color-secondary-light-default: rgba(var(--semi-light-blue-5),0.2);
172
+ --semi-color-CheckboxPhoto-DefaultBorder: rgba(255,255,255,1);
173
+ --semi-color-CheckboxPhoto-DefaultBgHover: rgba(255,255,255,0.7);
174
+ --semi-color-CheckboxPhoto-DefaultBorderHover: rgba(255,255,255,0);
175
+ font-family: Montserrat, 'PingFang SC', Lantinghei SC, 'Microsoft YaHei', HanHei SC, 'Helvetica Neue', Open Sans, Hiragino Sans GB, 微软雅黑, STHelti, WenQuanYi Micro Hei, Arial, SimSun, sans-serif;
176
+ -webkit-font-smoothing: antialiased;;
177
+ --semi-shadow-elevated: 0px 10px 20px 0px rgba(0,0,0,0.08),0px 10px 40px 0px rgba(0,0,0,0.12);
178
+ --semi-shadow-0: none;
179
+ --semi-shadow-1: none;
180
+ --semi-shadow-2: 0px 2px 4px 0px rgba(0,0,0,0.14), 0px 0px 1px 0px rgba(0,0,0,0.16);
181
+ --semi-shadow-app: 0px 15px 20px 0px var(--semi-color-shadow),8px 8px 16px -6px rgba(3,3,3,0.08),1px 12px 42px -4px rgba(10,10,10,0.08);
182
+ --semi-shadow-knob: 0px 4px 6px 0px rgba(0,0,0,0.10), 0px 0px 1px 0px rgba(0,0,0,0.30);
183
+ --semi-shadow-text: 0px 0px 4px 0px rgba(0,0,0,0.5),0px 1px 6px 0px rgba(0,0,0,0.2);
184
+ --semi-shadow-dropdown: 0px 12px 42px -4px rgba(20,23,26,0.12),0px 8px 18px -6px rgba(20,23,26,0.2);
185
+ --semi-border-radius-full: 9999px;
186
+ --semi-border-radius-name: 8px;
187
+ --semi-border-radius-large: 12px;
188
+ --semi-border-radius-small: 3px;
189
+ --semi-border-radius-circle: 50%;
190
+ --semi-border-radius-medium: 6px;
191
+ --semi-border-radius-custom-app: 16px;
192
+ --semi-border-radius-extra-small: 3px;
193
+ --semi-border-radius-custom-content: 12px;
194
+ --semi-border-radius-custom-button-large: 12px;
195
+ --semi-border-radius-custom-button-small: 6px;
196
+ --semi-border-radius-custom-button-default: 8px;
197
+
198
+
199
+ }
200
+ body[theme-mode="dark"], body .semi-always-dark, :host([theme-mode="dark"]), :host .semi-always-dark {
201
+ --semi-color-app: rgba(var(--semi-grey-0),1);
202
+ --semi-color-bg-0: rgba(var(--semi-grey-0), 1);
203
+ --semi-color-bg-1: rgba(var(--semi-grey-1), 1);
204
+ --semi-color-bg-2: rgba(var(--semi-grey-1),1);
205
+ --semi-color-bg-3: rgba(var(--semi-grey-2),1);
206
+ --semi-color-bg-4: rgba(var(--semi-grey-3),1);
207
+ --semi-color-info: rgba(var(--semi-brand-4), 1);
208
+ --semi-color-link: rgba(var(--semi-brand-4),1);
209
+ --semi-color-bg-anti: rgba(255,255,255,1);
210
+ --semi-color-nav-bg: rgba(var(--semi-grey-2), 1);
211
+ --semi-color-black: rgba(0,0,0,1);
212
+ --semi-color-data-0: rgba(0,102,255,1);
213
+ --semi-color-data-1: rgba(142,212,231,1);
214
+ --semi-color-data-2: rgba(245,135,0,1);
215
+ --semi-color-data-3: rgba(220,183,252,1);
216
+ --semi-color-data-4: rgba(74,156,251,1);
217
+ --semi-color-data-5: rgba(243,204,53,1);
218
+ --semi-color-data-6: rgba(254,128,144,1);
219
+ --semi-color-data-7: rgba(0,179,178,1);
220
+ --semi-color-data-8: rgba(0,135,83,1);
221
+ --semi-color-data-9: rgba(233,165,229,1);
222
+ --semi-color-fill-0: rgba(255,255,255,0.04);
223
+ --semi-color-fill-1: rgba(255,255,255,0.06);
224
+ --semi-color-fill-2: rgba(255,255,255,0.12);
225
+ --semi-color-fill-3: rgba(255,255,255,0.2);
226
+ --semi-color-text-0: rgba(255,255,255,1);
227
+ --semi-color-text-1: rgba(var(--semi-neutral-9),0.8);
228
+ --semi-color-text-2: rgba(var(--semi-neutral-9),0.6);
229
+ --semi-color-text-3: rgba(var(--semi-neutral-9),0.35);
230
+ --semi-color-white: rgba(255,255,255,1);
231
+ --semi-color-bg-avatar: rgba(255,255,255,0.06);
232
+ --semi-color-data-10: rgba(48,167,206,1);
233
+ --semi-color-data-11: rgba(249,192,100,1);
234
+ --semi-color-data-12: rgba(177,113,249,1);
235
+ --semi-color-data-13: rgba(119,182,249,1);
236
+ --semi-color-data-14: rgba(200,143,2,1);
237
+ --semi-color-data-15: rgba(255,170,178,1);
238
+ --semi-color-data-16: rgba(51,176,171,1);
239
+ --semi-color-data-17: rgba(182,215,129,1);
240
+ --semi-color-data-18: rgba(212,88,212,1);
241
+ --semi-color-data-19: rgba(188,198,255,1);
242
+ --semi-color-data-20: rgba(121,137,255,1);
243
+ --semi-color-border: rgba(255,255,255,0.16);
244
+ --semi-color-danger: rgba(var(--semi-red-4),1);
245
+ --semi-color-shadow: rgba(var(--semi-grey-0), 0.8);
246
+ --semi-color-text-nav: rgba(var(--semi-neutral-9),0.8);
247
+ --semi-color-app-header: rgba(var(--semi-grey-0),0);
248
+ --semi-color-bg-dropdown: rgba(var(--semi-grey-2),1);
249
+ --semi-color-black-10: rgba(0,0,0,0.1);
250
+ --semi-color-black-20: rgba(0,0,0,0.2);
251
+ --semi-color-black-30: rgba(0,0,0,0.3);
252
+ --semi-color-black-40: rgba(0,0,0,0.4);
253
+ --semi-color-black-50: rgba(0,0,0,0.5);
254
+ --semi-color-black-60: rgba(0,0,0,0.6);
255
+ --semi-color-black-70: rgba(0,0,0,0.7);
256
+ --semi-color-black-80: rgba(0,0,0,0.8);
257
+ --semi-color-black-90: rgba(0,0,0,0.9);
258
+ --semi-color-text-anti: rgba(var(--semi-grey-0),1);
259
+ --semi-color-white-10: rgba(255,255,255,0.1);
260
+ --semi-color-white-20: rgba(255,255,255,0.2);
261
+ --semi-color-white-30: rgba(255,255,255,0.3);
262
+ --semi-color-white-40: rgba(255,255,255,0.4);
263
+ --semi-color-white-50: rgba(255,255,255,0.5);
264
+ --semi-color-white-60: rgba(255,255,255,0.6);
265
+ --semi-color-white-70: rgba(255,255,255,0.7);
266
+ --semi-color-white-80: rgba(255,255,255,0.8);
267
+ --semi-color-white-90: rgba(255,255,255,0.9);
268
+ --semi-color-default: rgba(var(--semi-grey-0), 1);
269
+ --semi-color-info-hover: rgba(var(--semi-brand-3), 1);
270
+ --semi-color-link-hover: rgba(var(--semi-brand-3),1);
271
+ --semi-color-primary: rgba(var(--semi-brand-4),1);
272
+ --semi-color-success: rgba(var(--semi-green-4),1);
273
+ --semi-color-tab-HoverBg: rgba(var(--semi-grey-2), 1);
274
+ --semi-color-warning: rgba(var(--semi-orange-4),1);
275
+ --semi-color-app-siderbar: rgba(var(--semi-grey-0),0);
276
+ --semi-color-card-border: rgba(255,255,255,0.08);
277
+ --semi-color-info-active: rgba(var(--semi-brand-2), 1);
278
+ --semi-color-link-active: rgba(var(--semi-brand-2),1);
279
+ --semi-color-app-container: rgba(var(--semi-grey-1),1);
280
+ --semi-color-bg-transparent: rgba(var(--semi-grey-0),0);
281
+ --semi-color-card-HoverBg: rgba(255,255,255,0.04);
282
+ --semi-color-divider-0: rgba(255,255,255,0.16);
283
+ --semi-color-divider-1: rgba(255,255,255,0.1);
284
+ --semi-color-divider-2: rgba(255,255,255,0.08);
285
+ --semi-color-link-visited: rgba(var(--semi-brand-2),1);
286
+ --semi-color-photo-toast: rgba(0,0,0,0.9);
287
+ --semi-color-tab-DefaultBg: rgba(var(--semi-grey-1),1);
288
+ --semi-color-tertiary: rgba(255,255,255,0.08);
289
+ --semi-color-card-ActiveBg: rgba(var(--semi-brand-4),0.12);
290
+ --semi-color-focus-border: rgba(var(--semi-brand-4),1);
291
+ --semi-color-info-disabled: rgba(var(--semi-brand-1),0.16);
292
+ --semi-color-overlay-bg: rgba(0,0,0,0.6);
293
+ --semi-color-shadow-anti: rgba(0,0,0,0.7);
294
+ --semi-color-tab-DisabledBg: rgba(var(--semi-grey-2), 1);
295
+ --semi-color-tab-SelectedBg: rgba(var(--semi-grey-9), 1);
296
+ --semi-color-Scrollbar: rgba(255,255,255,0.12);
297
+ --semi-color-border-hover: rgba(255,255,255,0.2);
298
+ --semi-color-border-modal: rgba(255,255,255,0.12);
299
+ --semi-color-card-DefaultBg: rgba(255,255,255,0.02);
300
+ --semi-color-danger-hover: rgba(var(--semi-red-3),1);
301
+ --semi-color-highlight: rgba(var(--semi-white),1);
302
+ --semi-color-input-HoverBg: rgba(var(--semi-grey-1), 1);
303
+ --semi-color-secondary: rgba(var(--semi-light-blue-5), 1);
304
+ --semi-color-table-FocusBg: rgba(var(--semi-brand-4),0.2);
305
+ --semi-color-table-HoverBg: rgba(var(--semi-grey-5),0.08);
306
+ --semi-color-border-active: rgba(255,255,255,0.24);
307
+ --semi-color-border-select: rgba(255,255,255,0.12);
308
+ --semi-color-danger-active: rgba(var(--semi-red-2),1);
309
+ --semi-color-disabled-bg: rgba(var(--semi-grey-2),1);
310
+ --semi-color-input-ActiveBg: rgba(var(--semi-grey-0),1);
311
+ --semi-color-table-ActiveBg: rgba(var(--semi-brand-4),0.12);
312
+ --semi-color-card-borderHover: rgba(255,255,255,0.22);
313
+ --semi-color-default-hover: rgba(var(--semi-grey-1), 1);
314
+ --semi-color-input-DefaultBg: rgba(var(--semi-grey-1), 1);
315
+ --semi-color-photo-toastText: rgba(255,255,255,1);
316
+ --semi-color-primary-hover: rgba(var(--semi-brand-3),1);
317
+ --semi-color-success-hover: rgba(var(--semi-green-3),1);
318
+ --semi-color-warning-hover: rgba(var(--semi-orange-3),1);
319
+ --semi-color-Component-bg: rgba(0,0,0,0.6);
320
+ --semi-color-card-borderActive: rgba(var(--semi-brand-4),1);
321
+ --semi-color-default-active: rgba(var(--semi-grey-2), 1);
322
+ --semi-color-disabled-fill: rgba(var(--semi-grey-8),0.04);
323
+ --semi-color-disabled-text: rgba(255,255,255,0.35);
324
+ --semi-color-highlight-bg: rgba(var(--semi-yellow-4),1);
325
+ --semi-color-input-DisabledBg: rgba(var(--semi-grey-2),1);
326
+ --semi-color-primary-active: rgba(var(--semi-brand-2),1);
327
+ --semi-color-success-active: rgba(var(--semi-green-2),1);
328
+ --semi-color-warning-active: rgba(var(--semi-orange-2),1);
329
+ --semi-color-tertiary-hover: rgba(255,255,255,0.16);
330
+ --semi-color-Component-card: rgba(12,13,13,0.6);
331
+ --semi-color-disabled-border: rgba(255,255,255,0.16);
332
+ --semi-color-primary-disabled: rgba(var(--semi-grey-5),0.16);
333
+ --semi-color-success-disabled: rgba(var(--semi-green-1),0.16);
334
+ --semi-color-tertiary-active: rgba(255,255,255,0.24);
335
+ --semi-color-Scrollbar-hover: rgba(255,255,255,0.2);
336
+ --semi-color-secondary-hover: rgba(var(--semi-light-blue-6), 1);
337
+ --semi-color-overlay-CustomAnti: rgba(0,0,0,0.6);
338
+ --semi-color-secondary-active: rgba(var(--semi-light-blue-7), 1);
339
+ --semi-color-info-light-hover: rgba(var(--semi-brand-1),1);
340
+ --semi-color-progress-defaultBg: rgba(255,255,255,0.12);
341
+ --semi-color-fndesktop-navbarBg: rgba(12,13,13,0.6);
342
+ --semi-color-info-light-active: rgba(var(--semi-brand-2),1);
343
+ --semi-color-secondary-disabled: rgba(var(--semi-grey-5),0.16);
344
+ --semi-color-info-light-default: rgba(var(--semi-brand-0),1);
345
+ --semi-color-overlay-CustomPreview: rgba(0,0,0,0.9);
346
+ --semi-color-danger-light-name: rgba(var(--semi-blue-6),1);
347
+ --semi-color-danger-light-hover: rgba(var(--semi-red-0),0.3);
348
+ --semi-color-danger-light-active: rgba(var(--semi-red-0),0.4);
349
+ --semi-color-fndesktop-navbarBorder: rgba(255,255,255,0.05);
350
+ --semi-color-danger-light-default: rgba(var(--semi-red-0),0.2);
351
+ --semi-color-primary-light-hover: rgba(var(--semi-brand-4),0.2);
352
+ --semi-color-success-light-hover: rgba(var(--semi-green-1),0.3);
353
+ --semi-color-warning-light-hover: rgba(var(--semi-amber-5), 0.3);
354
+ --semi-color-primary-light-active: rgba(var(--semi-brand-4),0.3);
355
+ --semi-color-success-light-active: rgba(var(--semi-green-5),0.4);
356
+ --semi-color-warning-light-active: rgba(var(--semi-amber-5), 0.4);
357
+ --semi-color-primary-light-default: rgba(var(--semi-brand-4),0.1);
358
+ --semi-color-success-light-default: rgba(var(--semi-green-5),0.2);
359
+ --semi-color-tertiary-light-hover: rgba(var(--semi-grey-5),0.16);
360
+ --semi-color-warning-light-default: rgba(var(--semi-amber-5), 0.2);
361
+ --semi-color-tertiary-light-active: rgba(var(--semi-grey-5),0.32);
362
+ --semi-color-CheckboxPhoto-DefaultBg: rgba(255,255,255,0.2);
363
+ --semi-color-secondary-light-hover: rgba(var(--semi-light-blue-1),1);
364
+ --semi-color-tertiary-light-default: rgba(var(--semi-grey-5),0.08);
365
+ --semi-color-secondary-light-active: rgba(var(--semi-light-blue-2),1);
366
+ --semi-color-secondary-light-default: rgba(var(--semi-light-blue-0),1);
367
+ --semi-color-CheckboxPhoto-DefaultBorder: rgba(255,255,255,0.7);
368
+ --semi-color-CheckboxPhoto-DefaultBgHover: rgba(255,255,255,0.7);
369
+ --semi-color-CheckboxPhoto-DefaultBorderHover: rgba(255,255,255,0);
370
+ font-family: Montserrat, 'PingFang SC', Lantinghei SC, 'Microsoft YaHei', HanHei SC, 'Helvetica Neue', Open Sans, Hiragino Sans GB, 微软雅黑, STHelti, WenQuanYi Micro Hei, Arial, SimSun, sans-serif;
371
+ -webkit-font-smoothing: antialiased;;
372
+ --semi-shadow-elevated: 0px 10px 20px 0px rgba(0,0,0,0.08),0px 10px 40px 0px rgba(0,0,0,0.12);
373
+ --semi-shadow-0: none;
374
+ --semi-shadow-1: none;
375
+ --semi-shadow-2: 0px 2px 4px 0px rgba(0,0,0,0.14), 0px 0px 1px 0px rgba(0,0,0,0.16);
376
+ --semi-shadow-app: 0px 15px 20px 0px var(--semi-color-shadow),8px 8px 16px -6px rgba(3,3,3,0.08),1px 12px 42px -4px rgba(10,10,10,0.08);
377
+ --semi-shadow-knob: 0px 4px 6px 0px rgba(0,0,0,0.10), 0px 0px 1px 0px rgba(0,0,0,0.30);
378
+ --semi-shadow-text: 0px 0px 4px 0px rgba(0,0,0,0.5),0px 1px 6px 0px rgba(0,0,0,0.2);
379
+ --semi-shadow-dropdown: 0px 12px 42px -4px rgba(20,23,26,0.12),0px 8px 18px -6px rgba(20,23,26,0.2);
380
+ --semi-border-radius-full: 9999px;
381
+ --semi-border-radius-name: 8px;
382
+ --semi-border-radius-large: 12px;
383
+ --semi-border-radius-small: 3px;
384
+ --semi-border-radius-circle: 50%;
385
+ --semi-border-radius-medium: 6px;
386
+ --semi-border-radius-custom-app: 16px;
387
+ --semi-border-radius-extra-small: 3px;
388
+ --semi-border-radius-custom-content: 12px;
389
+ --semi-border-radius-custom-button-large: 12px;
390
+ --semi-border-radius-custom-button-small: 6px;
391
+ --semi-border-radius-custom-button-default: 8px;
392
+
393
+
394
+ }
package/scss/index.scss ADDED
@@ -0,0 +1,3 @@
1
+ @import './_font.scss';
2
+ @import './mixin.scss';
3
+ @import './variables.scss';
package/scss/local.scss ADDED
@@ -0,0 +1,232 @@
1
+ $radius-tag: 4px;
2
+ $spacing-tag_large-paddingX: 8px;
3
+ $color-card-border: var(--semi-color-card-border);
4
+ $color-card-bg-default: var(--semi-color-card-DefaultBg);
5
+ $color-form_label_optional-text-default: var(--semi-color-text-3);
6
+ $radius-tabs_tab_card: 4px;
7
+ $radius-tabs_tab_button: 4px;
8
+ $color-badge_default-text-default: var(--semi-color-white);
9
+ $color-badge_primary_light-bg-default: var(--semi-color-primary-light-hover);
10
+ $color-badge_primary_solid-bg-default: var(--semi-color-danger);
11
+ $color-input_danger-bg-focus: var(--semi-color-danger-light-default);
12
+ $color-input_danger-bg-hover: var(--semi-color-danger-light-hover);
13
+ $color-input_danger-bg-active: var(--semi-color-danger-light-active);
14
+ $color-input_default-bg-focus: var(--semi-color-input-ActiveBg);
15
+ $color-input_default-bg-hover: var(--semi-color-input-HoverBg);
16
+ $color-input_warning-bg-focus: var(--semi-color-warning-light-default);
17
+ $color-input_warning-bg-hover: var(--semi-color-warning-light-hover);
18
+ $color-input_danger-bg-default: var(--semi-color-danger-light-default);
19
+ $color-input_default-bg-active: var(--semi-color-input-ActiveBg);
20
+ $color-input_warning-bg-active: var(--semi-color-warning-light-active);
21
+ $color-input_default-bg-default: var(--semi-color-input-DefaultBg);
22
+ $color-input_warning-bg-default: var(--semi-color-warning-light-default);
23
+ $color-input_danger-border-focus: var(--semi-color-danger);
24
+ $color-input_danger-border-hover: var(--semi-color-danger-light-hover);
25
+ $color-input_disabled-bg-default: var(--semi-color-disabled-bg);
26
+ $color-input_counter-text-default: var(--semi-color-text-3);
27
+ $color-input_default-border-focus: var(--semi-color-focus-border);
28
+ $color-input_default-border-hover: var(--semi-color-border-hover);
29
+ $color-input_warning-border-focus: var(--semi-color-warning);
30
+ $color-input_warning-border-hover: var(--semi-color-warning-light-hover);
31
+ $color-input_danger-border-default: var(--semi-color-danger-light-default);
32
+ $color-input_default-bg-focus-hover: var(--semi-color-input-HoverBg);
33
+ $color-input_default-border-default: var(--semi-color-border);
34
+ $color-input_warning-border-default: var(--semi-color-warning-light-default);
35
+ $color-inputNumber_button-bg-disabled: var(--semi-color-disabled-bg);
36
+ $color-input_placeholder-text-default: var(--semi-color-text-3);
37
+ $height-input_large: 40px;
38
+ $height-input_small: 24px;
39
+ $height-input_default: 34px;
40
+ $height-input_wrapper_small: 28px;
41
+ $height-input_wrapper_default: 36px;
42
+ $radius-input_wrapper: 6px;
43
+ $font-modal_header-fontSize: $font-size-regular;
44
+ $color-modal_content-border: var(--semi-color-border-modal);
45
+ $color-radio_default-bg-default: var(--semi-color-bg-1);
46
+ $color-radio_checked-bg-disabled: var(--semi-color-disabled-bg);
47
+ $color-radio_disabled-bg-default: var(--semi-color-disabled-bg);
48
+ $color-radio_default-border-default: var(--semi-color-text-3);
49
+ $color-radio_checked-border-disabled: var(--semi-color-disabled-border);
50
+ $color-radio_default-border-disabled: var(--semi-color-disabled-border);
51
+ $color-radio_addon_buttonRadio-bg-checked: var(--semi-color-primary);
52
+ $color-radio_addon_buttonRadio-text-checked: var(--semi-color-white);
53
+ $color-table-border-default: var(--semi-color-divider-2);
54
+ $color-table_th-border-default: var(--semi-color-divider-1);
55
+ $color-table_shadow-border-default: var(--semi-color-divider-1);
56
+ $width-table_header_border: 1px;
57
+ $color-banner_warning-border-default: var(--semi-color-warning);
58
+ $color-button_light-bg-hover: var(--semi-color-fill-2);
59
+ $color-button_light-bg-active: var(--semi-color-fill-3);
60
+ $color-button_light-bg-default: var(--semi-color-fill-1);
61
+ $color-button_primary-bg-hover: var(--semi-color-primary-hover);
62
+ $color-button_tertiary-bg-hover: var(--semi-color-tertiary-hover);
63
+ $color-button_light-border-hover: var(--semi-color-bg-transparent);
64
+ $color-button_primary-bg-default: var(--semi-color-primary);
65
+ $color-button_secondary-bg-hover: var(--semi-color-secondary-hover);
66
+ $color-button_light-border-active: var(--semi-color-bg-transparent);
67
+ $color-button_secondary-bg-active: var(--semi-color-fill-1);
68
+ $color-button_tertiary-bg-default: var(--semi-color-tertiary);
69
+ $color-button_secondary-bg-default: var(--semi-color-secondary);
70
+ $color-button_tertiary-text-default: var(--semi-color-white);
71
+ $color-button_primary-border-default: var(--semi-color-bg-transparent);
72
+ $color-button_secondary-text-default: var(--semi-color-white);
73
+ $color-button_secondary-border-default: var(--semi-color-bg-transparent);
74
+ $color-button_tertiary_solid-text-default: var(--semi-color-text-1);
75
+ $width-button-border: 0px;
76
+ $width-button-outline: 1px;
77
+ $width-button_light-border: 1px;
78
+ $width-button_iconOnl_large: 54px;
79
+ $width-button_iconOnly_small: 28px;
80
+ $width-button_iconOnly_default: 36px;
81
+ $width-button_borderless-border: 1px;
82
+ $height-button_xl: 54px;
83
+ $height-button_large: 54px;
84
+ $height-button_small: 28px;
85
+ $height-button_default: 36px;
86
+ $height-button_iconOnly_large: 54px;
87
+ $height-button_iconOnly_small: 28px;
88
+ $height-button_iconOnly_default: 36px;
89
+ $radius-button: 8px;
90
+ $radius-button_splitButtonGroup_first_topLeft: 8px;
91
+ $radius-button_splitButtonGroup_last_topRight: 8px;
92
+ $radius-button_splitButtonGroup_first_bottomLeft: 8px;
93
+ $radius-button_splitButtonGroup_last_bottomRight: 8px;
94
+ $spacing-button_large-paddingTop: 14px;
95
+ $spacing-button_small-paddingTop: 0px;
96
+ $spacing-button_large-paddingLeft: 20px;
97
+ $spacing-button_small-paddingLeft: 12px;
98
+ $spacing-button_default-paddingTop: 0px;
99
+ $spacing-button_large-paddingRight: 20px;
100
+ $spacing-button_small-paddingRight: 12px;
101
+ $spacing-button_default-paddingLeft: 16px;
102
+ $spacing-button_large-paddingBottom: 14px;
103
+ $spacing-button_small-paddingBottom: 0px;
104
+ $spacing-button_default-paddingRight: 16px;
105
+ $color-rating-bg-default: var(--semi-color-fill-2);
106
+ $color-rating-icon-default: var(--semi-color-highlight-bg);
107
+ $color-select-bg-focus: var(--semi-color-input-ActiveBg);
108
+ $color-select-bg-hover: var(--semi-color-input-HoverBg);
109
+ $color-select-bg-active: var(--semi-color-input-ActiveBg);
110
+ $color-select-bg-default: var(--semi-color-input-DefaultBg);
111
+ $color-select-border-focus: var(--semi-color-focus-border);
112
+ $color-select-border-hover: var(--semi-color-border-hover);
113
+ $color-select-border-active: var(--semi-color-focus-border);
114
+ $color-select-border-default: var(--semi-color-border);
115
+ $color-select_danger-bg-focus: var(--semi-color-danger-light-default);
116
+ $color-select_danger-bg-hover: var(--semi-color-danger-light-hover);
117
+ $color-select_option-bg-hover: var(--semi-color-fill-0);
118
+ $color-select_danger-bg-active: var(--semi-color-danger-light-active);
119
+ $color-select_option-bg-active: var(--semi-color-fill-1);
120
+ $color-select_warning-bg-focus: var(--semi-color-warning-light-default);
121
+ $color-select_warning-bg-hover: var(--semi-color-warning-light-hover);
122
+ $color-select_danger-bg-default: var(--semi-color-danger-light-default);
123
+ $color-select_input_disabled-bg: var(--semi-color-disabled-bg);
124
+ $color-select_warning-bg-active: var(--semi-color-warning-light-active);
125
+ $color-select_warning-bg-default: var(--semi-color-warning-light-default);
126
+ $color-select_danger-border-focus: var(--semi-color-danger);
127
+ $color-select_danger-border-hover: var(--semi-color-danger-light-hover);
128
+ $color-select_danger-border-active: var(--semi-color-danger-light-active);
129
+ $color-select_warning-border-hover: var(--semi-color-warning-light-hover);
130
+ $color-select_danger-border-default: var(--semi-color-danger-light-default);
131
+ $color-select_warning-border-active: var(--semi-color-warning-light-active);
132
+ $color-select_input_placeholder-text: var(--semi-color-text-2);
133
+ $color-select_warning-border-default: var(--semi-color-warning-light-default);
134
+ $color-select_input_disabled-border-focus: var(--semi-color-disabled-border);
135
+ $height-select_small: 28px;
136
+ $height-select_default: 36px;
137
+ $radius-select: 6px;
138
+ $radius-select_option: 4px;
139
+ $color-slider_rail-bg-default: var(--semi-color-fill-1);
140
+ $color-switch_checked-bg-hover: var(--semi-color-primary-hover);
141
+ $color-switch_checked-bg-active: var(--semi-color-primary-active);
142
+ $color-switch_checked-bg-default: var(--semi-color-primary);
143
+ $color-switch_default-bg-default: var(--semi-color-fill-2);
144
+ $color-switch_spin_checked-bg-default: var(--semi-color-primary-hover);
145
+ $color-switch_checked_disabled-bg-default: var(--semi-color-primary-disabled);
146
+ $color-upload_drag_area-bg: var(--semi-color-fill-0);
147
+ $color-upload_drag_area-bg-hover: var(--semi-color-primary-light-default);
148
+ $color-cascader_default-bg-hover: var(--semi-color-bg-transparent);
149
+ $color-cascader_default-bg-default: var(--semi-color-bg-transparent);
150
+ $color-cascader_default-border-hover: var(--semi-color-border-hover);
151
+ $color-cascader_default-border-default: var(--semi-color-border);
152
+ $height-cascader_default: 36px;
153
+ $radius-cascader: 8px;
154
+ $color-checkbox_checked-icon-hover: var(--semi-color-white);
155
+ $color-checkbox_default-bg-default: var(--semi-color-bg-transparent);
156
+ $color-checkbox_extra-text-default: var(--semi-color-text-1);
157
+ $color-checkbox_checked-bg-disabled: var(--semi-color-disabled-bg);
158
+ $color-checkbox_checked-icon-active: var(--semi-color-white);
159
+ $color-checkbox_checked-icon-default: var(--semi-color-white);
160
+ $color-checkbox_checked-icon-disabled: var(--semi-color-disabled-text);
161
+ $color-checkbox_default-border-default: var(--semi-color-text-3);
162
+ $color-checkbox_cardType_inner-bg-hover: var(--semi-color-white);
163
+ $color-checkbox_disabled-border-default: var(--semi-color-disabled-border);
164
+ $color-checkbox_cardType_inner-bg-active: var(--semi-color-white);
165
+ $radius-checkbox_inner: 4px;
166
+ $color-dropdown-bg-default: var(--semi-color-bg-dropdown);
167
+ $color-dropdown_seperator-bg-default: var(--semi-color-divider-1);
168
+ $color-dropdown_item_disabled-text-default: var(--semi-color-disabled-text);
169
+ $radius-dropdown: 8px;
170
+ $spacing-dropdown_menu-paddingX: 0px;
171
+ $spacing-dropdown_seperator-marginX: 0px;
172
+ $color-progress_default-bg: rgba(204,214,224,0.3);
173
+ $color-progress_track_inner-bg: var(--semi-color-primary);
174
+ $color-tagInput-border-hover: var(--semi-color-border-hover);
175
+ $color-tagInput-border-default: var(--semi-color-border);
176
+ $color-tagInput_danger-bg-focus: var(--semi-color-bg-transparent);
177
+ $color-tagInput_danger-bg-hover: var(--semi-color-bg-transparent);
178
+ $color-tagInput_default-bg-focus: var(--semi-color-input-ActiveBg);
179
+ $color-tagInput_default-bg-hover: var(--semi-color-fill-1);
180
+ $color-tagInput_warning-bg-focus: var(--semi-color-border-hover);
181
+ $color-tagInput_warning-bg-hover: var(--semi-color-bg-transparent);
182
+ $color-tagInput_danger-bg-default: var(--semi-color-bg-transparent);
183
+ $color-tagInput_default-bg-default: var(--semi-color-input-DefaultBg);
184
+ $color-tagInput_warning-bg-default: var(--semi-color-bg-transparent);
185
+ $color-tagInput_danger-border-hover: var(--semi-color-danger-hover);
186
+ $color-tagInput_warning-border-focus: var(--semi-color-warning);
187
+ $color-tagInput_warning-border-hover: var(--semi-color-warning-hover);
188
+ $color-tagInput_danger-border-default: var(--semi-color-danger);
189
+ $color-tagInput_warning-border-default: var(--semi-color-warning);
190
+ $height-tagInput-small: 28px;
191
+ $height-tagInput-default: 36px;
192
+ $height-tagInput_input_large: 28px;
193
+ $height-tagInput_input_default: 24px;
194
+ $radius-tagInput: 8px;
195
+ $color-datepicker_date-bg-hover: var(--semi-color-bg-0);
196
+ $color-datepicker_date-bg-default: var(--semi-color-bg-0);
197
+ $color-datepicker_range_input-bg-hover: var(--semi-color-bg-transparent);
198
+ $color-datepicker_range_trigger-border: var(--semi-color-border);
199
+ $color-datepicker_range_input-bg-default: var(--semi-color-bg-transparent);
200
+ $color-datepicker_range_input-border-active: var(--semi-color-bg-transparent);
201
+ $color-datepicker_range_trigger-border-focus: var(--semi-color-border-actvie);
202
+ $color-datepicker_range_trigger-border-hover: var(--semi-color-border-hover);
203
+ $color-datepicker_range_input_inputWrapper-bg-focus: var(--semi-color-bg-transparent);
204
+ $width-datepicker_range_trigger-border: 1px;
205
+ $height-datepicker_range_input-default: 36px;
206
+ $radius-datepicker_range_input: 8px;
207
+ $radius-datepicker_range_input_inputWrapper: 8px;
208
+ $color-navigation-bg-default: var(--semi-color-bg-0);
209
+ $color-navigation_itemL1-text-default: var(--semi-color-text-1);
210
+ $color-pagination_item-bg-hover: var(--semi-color-fill-0);
211
+ $color-pagination_item-bg-active: var(--semi-color-primary-hover);
212
+ $color-pagination_item-bg-selected: var(--semi-color-primary);
213
+ $color-pagination_item-text-active: rgba(255,255,255,1);
214
+ $color-pagination_item-border-active: var(--semi-color-border-hover);
215
+ $color-pagination_item-text-selected: var(--semi-color-white);
216
+ $color-pagination_item-border-default: var(--semi-color-border);
217
+ $color-pagination_item-border-disabled: var(--semi-color-border);
218
+ $color-pagination_item-border-selected: var(--semi-color-border-actvie);
219
+ $width-pagination_item_border: 1px;
220
+ $radius-pagination_item: 6px;
221
+ $radius-timePicker_input: 8px;
222
+ $color-treeSelect_default-bg-focus: var(--semi-color-bg-transparent);
223
+ $color-treeSelect_default-bg-hover: var(--semi-color-bg-transparent);
224
+ $color-treeSelect_default-bg-active: var(--semi-color-bg-transparent);
225
+ $color-treeSelect_default-bg-default: var(--semi-color-bg-transparent);
226
+ $color-treeSelect_default-border-hover: var(--semi-color-border-hover);
227
+ $color-treeSelect_default-border-default: var(--semi-color-border);
228
+ $height-treeSelect_small: 28px;
229
+ $height-treeSelect_default: 36px;
230
+ $radius-treeSelect: 8px;
231
+ $height-inputNumber_button_default: 36px;
232
+ $radius-inputNumber: 4px;