@semi-bot/semi-theme-tt4d 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 +1203 -0
  4. package/scss/_font.scss +64 -0
  5. package/scss/_palette.scss +352 -0
  6. package/scss/animation.scss +39 -0
  7. package/scss/custom.scss +0 -0
  8. package/scss/global.scss +249 -0
  9. package/scss/index.scss +3 -0
  10. package/scss/local.scss +78 -0
  11. package/scss/mixin.scss +72 -0
  12. package/scss/variables.scss +75 -0
  13. package/semi.css +24811 -0
  14. package/semi.min.css +1 -0
package/scss/global.scss ADDED
@@ -0,0 +1,249 @@
1
+ @import './_palette.scss';
2
+
3
+ body, body[theme-mode="dark"] .semi-always-light {
4
+ --semi-color-bg-0: rgba(var(--semi-white),1);
5
+ --semi-color-bg-1: rgba(var(--semi-white), 1);
6
+ --semi-color-bg-2: rgba(var(--semi-white), 1);
7
+ --semi-color-bg-3: rgba(var(--semi-white), 1);
8
+ --semi-color-bg-4: rgba(var(--semi-white), 1);
9
+ --semi-color-info: rgba(var(--semi-blue-5), 1);
10
+ --semi-color-link: rgba(var(--semi-blue-5),1);
11
+ --semi-color-nav-bg: rgba(var(--semi-white),1);
12
+ --semi-color-black: rgba(var(--semi-black), 1);
13
+ --semi-color-data-0: rgba(0,117,219,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(87,105,255,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-grey-9),0.05);
24
+ --semi-color-fill-1: rgba(var(--semi-grey-9),0.09);
25
+ --semi-color-fill-2: rgba(var(--semi-grey-9),0.13);
26
+ --semi-color-text-0: rgba(var(--semi-grey-9),1);
27
+ --semi-color-text-1: rgba(var(--semi-grey-9),0.65);
28
+ --semi-color-text-2: rgba(var(--semi-grey-9),0.48);
29
+ --semi-color-text-3: rgba(var(--semi-grey-9),0.35);
30
+ --semi-color-white: rgba(var(--semi-white), 1);
31
+ --semi-color-bg-0-grey: rgba(var(--semi-grey-0),1);
32
+ --semi-color-data-10: rgba(48,167,206,1);
33
+ --semi-color-data-11: rgba(249,192,100,1);
34
+ --semi-color-data-12: rgba(177,113,249,1);
35
+ --semi-color-data-13: rgba(93,173,233,1);
36
+ --semi-color-data-14: rgba(198,164,0,1);
37
+ --semi-color-data-15: rgba(255,170,178,1);
38
+ --semi-color-data-16: rgba(51,176,171,1);
39
+ --semi-color-data-17: rgba(182,215,129,1);
40
+ --semi-color-data-18: rgba(212,88,212,1);
41
+ --semi-color-data-19: rgba(188,198,255,1);
42
+ --semi-color-border: rgba(var(--semi-grey-9),0.1);
43
+ --semi-color-danger: rgba(var(--semi-red-5),1);
44
+ --semi-color-shadow: rgba(var(--semi-black), 0.04);
45
+ --semi-color-default: rgba(var(--semi-grey-0),1);
46
+ --semi-color-info-hover: rgba(var(--semi-blue-6), 1);
47
+ --semi-color-link-hover: rgba(var(--semi-blue-6), 1);
48
+ --semi-color-primary: rgba(var(--semi-brand-5),1);
49
+ --semi-color-success: rgba(var(--semi-light-green-5), 1);
50
+ --semi-color-warning: rgba(var(--semi-orange-5),1);
51
+ --semi-color-info-active: rgba(var(--semi-blue-7), 1);
52
+ --semi-color-link-active: rgba(var(--semi-blue-7), 1);
53
+ --semi-color-link-visited: rgba(var(--semi-blue-5), 1);
54
+ --semi-color-tertiary: rgba(var(--semi-grey-5), 1);
55
+ --semi-color-focus-border: rgba(var(--semi-grey-9),1);
56
+ --semi-color-info-disabled: rgba(var(--semi-blue-2), 1);
57
+ --semi-color-overlay-bg: rgba(22, 22, 26, 0.6);
58
+ --semi-color-select-fill: rgba(var(--semi-grey-9),0.09);
59
+ --semi-color-danger-hover: rgba(var(--semi-red-6),1);
60
+ --semi-color-highlight: rgba(var(--semi-black),1);
61
+ --semi-color-secondary: rgba(var(--semi-grey-9),1);
62
+ --semi-color-danger-active: rgba(var(--semi-red-7),1);
63
+ --semi-color-disabled-bg: rgba(var(--semi-grey-1),1);
64
+ --semi-color-default-hover: rgba(var(--semi-grey-1), 1);
65
+ --semi-color-primary-hover: rgba(var(--semi-brand-6), 1);
66
+ --semi-color-success-hover: rgba(var(--semi-light-green-6), 1);
67
+ --semi-color-warning-hover: rgba(var(--semi-orange-6), 1);
68
+ --semi-color-default-active: rgba(var(--semi-grey-2), 1);
69
+ --semi-color-disabled-fill: rgba(var(--semi-grey-8),0.04);
70
+ --semi-color-disabled-text: rgba(var(--semi-grey-9),0.35);
71
+ --semi-color-highlight-bg: rgba(var(--semi-yellow-4), 1);
72
+ --semi-color-primary-active: rgba(var(--semi-brand-7), 1);
73
+ --semi-color-success-active: rgba(var(--semi-light-green-7), 1);
74
+ --semi-color-warning-active: rgba(var(--semi-orange-7), 1);
75
+ --semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1);
76
+ --semi-color-disabled-border: rgba(var(--semi-grey-1), 1);
77
+ --semi-color-primary-disabled: rgba(var(--semi-brand-2), 1);
78
+ --semi-color-sequence-blue-0: rgba(231,244,251,1);
79
+ --semi-color-sequence-blue-1: rgba(198,228,248,1);
80
+ --semi-color-sequence-blue-2: rgba(144,201,241,1);
81
+ --semi-color-sequence-blue-3: rgba(144,201,241,1);
82
+ --semi-color-sequence-blue-4: rgba(93,173,233,1);
83
+ --semi-color-sequence-blue-5: rgba(45,145,226,1);
84
+ --semi-color-sequence-blue-7: rgba(0,95,183,1);
85
+ --semi-color-sequence-blue-8: rgba(0,74,148,1);
86
+ --semi-color-sequence-blue-9: rgba(0,36,76,1);
87
+ --semi-color-success-disabled: rgba(var(--semi-light-green-2), 1);
88
+ --semi-color-tertiary-active: rgba(var(--semi-grey-7), 1);
89
+ --semi-color-secondary-hover: rgba(var(--semi-grey-8),1);
90
+ --semi-color-sequence-blue-10: rgba(0,25,56,1);
91
+ --semi-color-secondary-active: rgba(var(--semi-grey-7),1);
92
+ --semi-color-info-light-hover: rgba(var(--semi-blue-1), 1);
93
+ --semi-color-info-light-active: rgba(var(--semi-blue-2),1);
94
+ --semi-color-secondary-disabled: rgba(var(--semi-grey-2), 1);
95
+ --semi-color-info-light-default: rgba(var(--semi-blue-0), 1);
96
+ --semi-color-danger-light-hover: rgba(var(--semi-red-1), 1);
97
+ --semi-color-danger-light-active: rgba(var(--semi-red-2), 1);
98
+ --semi-color-UIShapeSecondary: rgba(var(--semi-light-blue-5),1);
99
+ --semi-color-danger-light-default: rgba(var(--semi-red-0), 1);
100
+ --semi-color-primary-light-hover: rgba(var(--semi-brand-1), 1);
101
+ --semi-color-success-light-hover: rgba(var(--semi-light-green-1), 1);
102
+ --semi-color-warning-light-hover: rgba(var(--semi-orange-1), 1);
103
+ --semi-color-primary-light-active: rgba(var(--semi-brand-2), 1);
104
+ --semi-color-success-light-active: rgba(var(--semi-light-green-2), 1);
105
+ --semi-color-warning-light-active: rgba(var(--semi-orange-2), 1);
106
+ --semi-color-primary-light-default: rgba(var(--semi-brand-0), 1);
107
+ --semi-color-success-light-default: rgba(var(--semi-light-green-0), 1);
108
+ --semi-color-tertiary-light-hover: rgba(var(--semi-grey-1), 1);
109
+ --semi-color-warning-light-default: rgba(var(--semi-orange-0), 1);
110
+ --semi-color-tertiary-light-active: rgba(var(--semi-grey-2),1);
111
+ --semi-color-secondary-light-hover: rgba(var(--semi-grey-1), 1);
112
+ --semi-color-tertiary-light-default: rgba(var(--semi-grey-0),1);
113
+ --semi-color-secondary-light-active: rgba(var(--semi-grey-2), 1);
114
+ --semi-color-UIShapeSecondary-hover: rgba(var(--semi-light-blue-6),1);
115
+ --semi-color-secondary-light-default: rgba(var(--semi-grey-0), 1);
116
+ --semi-color-UIShapeSecondary-active: rgba(var(--semi-light-blue-7),1);
117
+ --semi-color-UIShapeSecondary-disabled: rgba(var(--semi-light-blue-2), 1);
118
+ font-family: TikTokFont,'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI','PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue',Helvetica, Arial, sans-serif;
119
+ -webkit-font-smoothing: antialiased;;
120
+ --semi-shadow-elevated: 0px 0px 1px 0px rgba(0,0,0,0.30), 0px 4px 14px 0px rgba(0,0,0,0.10);
121
+ --semi-shadow-0: none;
122
+ --semi-shadow-1: 0px 2px 4px 0px rgba(0,0,0,0.10), 0px 0px 1px 0px rgba(0,0,0,0.30);
123
+ --semi-shadow-2: 0px 4px 14px 0px rgba(0,0,0,0.10), 0px 0px 1px 0px rgba(0,0,0,0.30);
124
+ --semi-shadow-knob: 0px 2px 4px 0px rgba(0,0,0,0.10), 0px 0px 1px 0px rgba(0,0,0,0.30);
125
+ --semi-border-radius-full: 9999px;
126
+ --semi-border-radius-large: 16px;
127
+ --semi-border-radius-small: 4px;
128
+ --semi-border-radius-circle: 50%;
129
+ --semi-border-radius-medium: 8px;
130
+ --semi-border-radius-extra-small: 4px;
131
+
132
+
133
+ }
134
+ body[theme-mode="dark"], body .semi-always-dark {
135
+ --semi-color-bg-0: rgba(22, 22, 26, 1);
136
+ --semi-color-bg-1: rgba(35, 36, 41, 1);
137
+ --semi-color-bg-2: rgba(53, 54, 60, 1);
138
+ --semi-color-bg-3: rgba(67, 68, 74, 1);
139
+ --semi-color-bg-4: rgba(79, 81, 89, 1);
140
+ --semi-color-info: rgba(var(--semi-blue-5), 1);
141
+ --semi-color-link: rgba(var(--semi-blue-5), 1);
142
+ --semi-color-nav-bg: rgba(35, 36, 41, 1);
143
+ --semi-color-black: rgba(var(--semi-black), 1);
144
+ --semi-color-data-0: rgba(94, 109, 194, 1);
145
+ --semi-color-data-1: rgba(8, 104, 120, 1);
146
+ --semi-color-data-2: rgba(250, 173, 63, 1);
147
+ --semi-color-data-3: rgba(76, 43, 156, 1);
148
+ --semi-color-data-4: rgba(16, 125, 248, 1);
149
+ --semi-color-data-5: rgba(248, 202, 16, 1);
150
+ --semi-color-data-6: rgba(195, 30, 87, 1);
151
+ --semi-color-data-7: rgba(5, 119, 115, 1);
152
+ --semi-color-data-8: rgba(154, 207, 13, 1);
153
+ --semi-color-data-9: rgba(117, 29, 138, 1);
154
+ --semi-color-fill-0: rgba(var(--semi-white), 0.05);
155
+ --semi-color-fill-1: rgba(var(--semi-white), 0.09);
156
+ --semi-color-fill-2: rgba(var(--semi-white), 0.13);
157
+ --semi-color-text-0: rgba(var(--semi-grey-9), 1);
158
+ --semi-color-text-1: rgba(var(--semi-grey-9), 0.8);
159
+ --semi-color-text-2: rgba(var(--semi-grey-9), 0.6);
160
+ --semi-color-text-3: rgba(var(--semi-grey-9), 0.35);
161
+ --semi-color-white: rgba(255,255,255,1);
162
+ --semi-color-bg-0-grey: rgba(var(--semi-grey-0),1);
163
+ --semi-color-data-10: rgba(16, 162, 180, 1);
164
+ --semi-color-data-11: rgba(208, 110, 11, 1);
165
+ --semi-color-data-12: rgba(113, 66, 197, 1);
166
+ --semi-color-data-13: rgba(7, 100, 212, 1);
167
+ --semi-color-data-14: rgba(251, 232, 110, 1);
168
+ --semi-color-data-15: rgba(160, 19, 73, 1);
169
+ --semi-color-data-16: rgba(11, 179, 167, 1);
170
+ --semi-color-data-17: rgba(98, 138, 6, 1);
171
+ --semi-color-data-18: rgba(162, 48, 179, 1);
172
+ --semi-color-data-19: rgba(40, 51, 138, 1);
173
+ --semi-color-border: rgba(var(--semi-white),0.08);
174
+ --semi-color-danger: rgba(var(--semi-red-5), 1);
175
+ --semi-color-shadow: rgba(var(--semi-black), 0.04);
176
+ --semi-color-default: rgba(var(--semi-grey-0), 1);
177
+ --semi-color-info-hover: rgba(var(--semi-blue-6), 1);
178
+ --semi-color-link-hover: rgba(var(--semi-blue-6), 1);
179
+ --semi-color-primary: rgba(var(--semi-brand-5),1);
180
+ --semi-color-success: rgba(var(--semi-green-5), 1);
181
+ --semi-color-warning: rgba(var(--semi-orange-5), 1);
182
+ --semi-color-info-active: rgba(var(--semi-blue-7), 1);
183
+ --semi-color-link-active: rgba(var(--semi-blue-7), 1);
184
+ --semi-color-link-visited: rgba(var(--semi-blue-5), 1);
185
+ --semi-color-tertiary: rgba(var(--semi-grey-5), 1);
186
+ --semi-color-focus-border: rgba(var(--semi-brand-5), 1);
187
+ --semi-color-info-disabled: rgba(var(--semi-blue-2), 1);
188
+ --semi-color-overlay-bg: rgba(22, 22, 26, 0.6);
189
+ --semi-color-danger-hover: rgba(var(--semi-red-6), 1);
190
+ --semi-color-highlight: rgba(var(--semi-white), 1);
191
+ --semi-color-secondary: rgba(var(--semi-blue-5), 1);
192
+ --semi-color-danger-active: rgba(var(--semi-red-7), 1);
193
+ --semi-color-disabled-bg: rgba(var(--semi-grey-1), 1);
194
+ --semi-color-default-hover: rgba(var(--semi-grey-1), 1);
195
+ --semi-color-primary-hover: rgba(var(--semi-brand-6), 1);
196
+ --semi-color-success-hover: rgba(var(--semi-green-6), 1);
197
+ --semi-color-warning-hover: rgba(var(--semi-orange-6), 1);
198
+ --semi-color-default-active: rgba(var(--semi-grey-2), 1);
199
+ --semi-color-disabled-fill: rgba(var(--semi-grey-8), 0.04);
200
+ --semi-color-disabled-text: rgba(var(--semi-grey-9), 0.35);
201
+ --semi-color-highlight-bg: rgba(var(--semi-yellow-2), 1);
202
+ --semi-color-primary-active: rgba(var(--semi-brand-7), 1);
203
+ --semi-color-success-active: rgba(var(--semi-green-7), 1);
204
+ --semi-color-warning-active: rgba(var(--semi-orange-7), 1);
205
+ --semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1);
206
+ --semi-color-disabled-border: rgba(var(--semi-grey-1), 1);
207
+ --semi-color-primary-disabled: rgba(var(--semi-brand-2), 1);
208
+ --semi-color-success-disabled: rgba(var(--semi-green-2), 1);
209
+ --semi-color-tertiary-active: rgba(var(--semi-grey-7), 1);
210
+ --semi-color-secondary-hover: rgba(var(--semi-blue-6), 1);
211
+ --semi-color-secondary-active: rgba(var(--semi-blue-7), 1);
212
+ --semi-color-info-light-hover: rgba(var(--semi-blue-5), 0.3);
213
+ --semi-color-info-light-active: rgba(var(--semi-blue-5), 0.4);
214
+ --semi-color-secondary-disabled: rgba(var(--semi-blue-2), 1);
215
+ --semi-color-info-light-default: rgba(var(--semi-blue-5), 0.2);
216
+ --semi-color-danger-light-hover: rgba(var(--semi-red-5), 0.3);
217
+ --semi-color-danger-light-active: rgba(var(--semi-red-5), 0.4);
218
+ --semi-color-danger-light-default: rgba(var(--semi-red-5), 0.2);
219
+ --semi-color-primary-light-hover: rgba(var(--semi-brand-5), 0.3);
220
+ --semi-color-success-light-hover: rgba(var(--semi-green-5), 0.3);
221
+ --semi-color-warning-light-hover: rgba(var(--semi-orange-5), 0.3);
222
+ --semi-color-primary-light-active: rgba(var(--semi-brand-5), 0.4);
223
+ --semi-color-success-light-active: rgba(var(--semi-green-5), 0.4);
224
+ --semi-color-warning-light-active: rgba(var(--semi-orange-5), 0.4);
225
+ --semi-color-primary-light-default: rgba(var(--semi-brand-5), 0.2);
226
+ --semi-color-success-light-default: rgba(var(--semi-green-5), 0.2);
227
+ --semi-color-tertiary-light-hover: rgba(var(--semi-grey-5), 0.3);
228
+ --semi-color-warning-light-default: rgba(var(--semi-orange-5), 0.2);
229
+ --semi-color-tertiary-light-active: rgba(var(--semi-grey-5), 0.4);
230
+ --semi-color-secondary-light-hover: rgba(var(--semi-blue-5), 0.3);
231
+ --semi-color-tertiary-light-default: rgba(var(--semi-grey-5), 0.2);
232
+ --semi-color-secondary-light-active: rgba(var(--semi-blue-5), 0.4);
233
+ --semi-color-secondary-light-default: rgba(var(--semi-blue-5), 0.2);
234
+ font-family: TikTokFont,'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI','PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue',Helvetica, Arial, sans-serif;
235
+ -webkit-font-smoothing: antialiased;;
236
+ --semi-shadow-elevated: 0px 0px 1px 0px rgba(0,0,0,0.30), 0px 4px 14px 0px rgba(0,0,0,0.10);
237
+ --semi-shadow-0: none;
238
+ --semi-shadow-1: 0px 2px 4px 0px rgba(0,0,0,0.10), 0px 0px 1px 0px rgba(0,0,0,0.30);
239
+ --semi-shadow-2: 0px 4px 14px 0px rgba(0,0,0,0.10), 0px 0px 1px 0px rgba(0,0,0,0.30);
240
+ --semi-shadow-knob: 0px 2px 4px 0px rgba(0,0,0,0.10), 0px 0px 1px 0px rgba(0,0,0,0.30);
241
+ --semi-border-radius-full: 9999px;
242
+ --semi-border-radius-large: 16px;
243
+ --semi-border-radius-small: 4px;
244
+ --semi-border-radius-circle: 50%;
245
+ --semi-border-radius-medium: 8px;
246
+ --semi-border-radius-extra-small: 4px;
247
+
248
+
249
+ }
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,78 @@
1
+ $font-weight-bold: 500; // 字重 - meidum;
2
+ $font-weight-light: 200; // 字重 - light;
3
+ $font-weight-regular: 400; // 字重 - regular;
4
+ $font-weight-extrabold: 700; // 字重 - bold;
5
+ $color-spin-bg: var(--semi-color-secondary);
6
+ $color-tabs_tab-pane_arrow-text-hover: var(--semi-color-secondary);
7
+ $color-tabs_tab_selected-icon-default: var(--semi-color-secondary);
8
+ $color-tabs_tab-pane_arrow-text-active: var(--semi-color-secondary);
9
+ $color-tabs_tab-pane_arrow-text-default: var(--semi-color-secondary);
10
+ $color-tabs_tab_button_selected-bg-default: var(--semi-color-secondary-light-default);
11
+ $color-tabs_tab_button_selected-text-default: var(--semi-color-secondary);
12
+ $color-tabs_tab_line_indicator_selected-icon-default: var(--semi-color-secondary);
13
+ $color-input-icon-hover: var(--semi-color-secondary-hover);
14
+ $color-input-icon-active: var(--semi-color-secondary-active);
15
+ $color-textarea-icon-hover: var(--semi-color-secondary-hover);
16
+ $color-textarea-icon-active: var(--semi-color-secondary-active);
17
+ $font-modal_header-fontWeight: $font-weight-extrabold;
18
+ $color-radio_primary-outline-focus: var(--semi-color-secondary-light-active);
19
+ $color-radio_addon_buttonRadio-text-checked: var(--semi-color-secondary);
20
+ $color-steps_item_finish-icon: var(--semi-color-success);
21
+ $color-steps_main-text-default: var(--semi-color-text-0);
22
+ $color-steps_item_done_after-bg: var(--semi-color-secondary);
23
+ $color-steps_primary-bg-default: var(--semi-color-secondary);
24
+ $color-steps_process-bg-default: var(--semi-color-secondary-light-default);
25
+ $color-steps_primary-icon-default: var(--semi-color-secondary);
26
+ $color-steps_item_process_left-icon: var(--semi-color-secondary);
27
+ $color-steps_item_done_icon_after-bg: var(--semi-color-secondary);
28
+ $color-steps_item_left_number_icon-bg: var(--semi-color-secondary);
29
+ $radius-table_base: var(--semi-border-radius-medium);
30
+ $color-anchor_slide_primary-bg-active: var(--semi-color-secondary);
31
+ $radius-avatar_large: var(--semi-border-radius-medium);
32
+ $radius-avatar_small: var(--semi-border-radius-small);
33
+ $radius-avatar_medium: var(--semi-border-radius-small);
34
+ $radius-avatar_default: var(--semi-border-radius-small);
35
+ $radius-avatar_extra_large: var(--semi-border-radius-large);
36
+ $radius-avatar_extra_small: var(--semi-border-radius-small);
37
+ $radius-avatar_extra_extra_small: var(--semi-border-radius-small);
38
+ $font-typography_title1-fontWeight: 700;
39
+ $font-typography_title2-fontWeight: 700;
40
+ $font-typography_title3-fontWeight: 700;
41
+ $font-typography_title4-bold-fontWeight: 700;
42
+ $font-typography_title5-bold-fontWeight: 700;
43
+ $font-typography_title6-bold-fontWeight: 700;
44
+ $font-typography_title4-medium-fontWeight: 500;
45
+ $font-typography_title5-medium-fontWeight: 500;
46
+ $font-typography_title6-medium-fontWeight: 500;
47
+ $font-typography_title4-regular-fontWeight: 400;
48
+ $font-typography_title5-regular-fontWeight: 400;
49
+ $font-typography_title6-regular-fontWeight: 400;
50
+ $color-select-option-bg-selected: var(--semi-color-select-fill);
51
+ $color-select_clearBtn-text-hover: var(--semi-color-secondary-hover);
52
+ $color-slider_handle-border-focus: var(--semi-color-primary);
53
+ $color-tooltip-bg-default: rgba(var(--semi-grey-6), 1);
54
+ $color-tooltip-icon-default: rgba(var(--semi-grey-6), 1);
55
+ $color-tooltip_arrow-icon-default: rgba(var(--semi-grey-6), 1);
56
+ $radius-tooltip: var(--semi-border-radius-small);
57
+ $color-cascader-icon-hover: var(--semi-color-secondary-hover);
58
+ $color-cascader-icon-active: var(--semi-color-secondary-active);
59
+ $color-cascader_option-bg-selected: var(--semi-color-select-fill);
60
+ $radius-dropdown: var(--semi-border-radius-small);
61
+ $radius-skeleton_li: var(--semi-border-radius-medium);
62
+ $radius-skeleton_item: var(--semi-border-radius-medium);
63
+ $color-tagInput-icon-hover: var(--semi-color-secondary-hover);
64
+ $radius-transfer: var(--semi-border-radius-small);
65
+ $font-sideSheet_title-fontWeight: $font-weight-extrabold;
66
+ $color-datepicker_range_input-text-default: var(--semi-color-text-2);
67
+ $color-datepicker_date_hoverday_range-bg-default: var(--semi-color-select-fill);
68
+ $color-datepicker_range_input_clearbtn-icon-hover: var(--semi-color-secondary-hover);
69
+ $color-datepicker_date_hoverday_around_single_selected-bg-default: var(--semi-color-select-fill);
70
+ $color-pagination_item-text-hover: var(--semi-color-text-1);
71
+ $color-pagination_item-bg-selected: var(--semi-color-select-fill);
72
+ $color-pagination_item-text-active: var(--semi-color-text-1);
73
+ $color-pagination_item-text-default: var(--semi-color-text-1);
74
+ $color-pagination_item-text-selected: var(--semi-color-secondary);
75
+ $font-popconfirm_header_title-fontWeight: $font-weight-extrabold;
76
+ $color-scrollList_selected_item-bg: var(--semi-color-select-fill);
77
+ $radius-timePicker_range_panel: var(--semi-border-radius-small);
78
+ $color-tree_option-bg-active: var(--semi-color-select-fill);
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: 0px 2px 4px 0px rgba(0,0,0,0.10), 0px 0px 1px 0px rgba(0,0,0,0.30);
6
+ };
7
+ @mixin shadow-2 {
8
+ box-shadow: 0px 4px 14px 0px rgba(0,0,0,0.10), 0px 0px 1px 0px rgba(0,0,0,0.30);
9
+ };
10
+ @mixin shadow-knob {
11
+ box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.10), 0px 0px 1px 0px rgba(0,0,0,0.30);
12
+ };
13
+ @mixin shadow-elevated {
14
+ box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.30), 0px 4px 14px 0px rgba(0,0,0,0.10);
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
+ }
package/scss/variables.scss ADDED
@@ -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: TikTokFont,'Inter', -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: 18px; // 五级标题字号
64
+ $font-size-header-4: 24px; // 四级标题字号
65
+ $font-size-header-3: 32px; // 三级标题字号
66
+ $font-size-header-2: 48px; // 二级标题字号
67
+ $font-size-header-1: 56px; // 一级标题字号
68
+
69
+
70
+ $font-weight-light: 200; // 字重 - 轻
71
+ $font-weight-regular: 400; // 字重 - 常规
72
+ $font-weight-bold: 600; // 字重 - 加粗
73
+
74
+
75
+