@semi-bot/semi-theme-eaglex 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 +1518 -0
  4. package/scss/_font.scss +64 -0
  5. package/scss/_palette.scss +382 -0
  6. package/scss/animation.scss +39 -0
  7. package/scss/custom.scss +0 -0
  8. package/scss/global.scss +233 -0
  9. package/scss/index.scss +3 -0
  10. package/scss/local.scss +363 -0
  11. package/scss/mixin.scss +72 -0
  12. package/scss/variables.scss +75 -0
  13. package/semi.css +27046 -0
  14. package/semi.min.css +1 -0
package/scss/global.scss ADDED
@@ -0,0 +1,233 @@
1
+ @import './_palette.scss';
2
+
3
+ body, body[theme-mode="dark"] .semi-always-light, :host, :host .semi-always-light {
4
+ --semi-color-bg-0: rgba(var(--semi-grey-1),1);
5
+ --semi-color-bg-1: rgba(var(--semi-white),1);
6
+ --semi-color-bg-2: rgba(var(--semi-grey-0),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-yellow-5),1);
10
+ --semi-color-link: rgba(var(--semi-brand-7),1);
11
+ --semi-color-nav-bg: rgba(var(--semi-white),0.8);
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-grey-8),0.05);
24
+ --semi-color-fill-1: rgba(var(--semi-grey-8),0.09);
25
+ --semi-color-fill-2: rgba(var(--semi-grey-8),0.13);
26
+ --semi-color-text-0: rgba(var(--semi-grey-9), 1);
27
+ --semi-color-text-1: rgba(var(--semi-grey-9), 0.8);
28
+ --semi-color-text-2: rgba(var(--semi-grey-9), 0.6);
29
+ --semi-color-text-3: rgba(var(--semi-grey-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-border: rgba(var(--semi-grey-9), 0.08);
42
+ --semi-color-danger: rgba(var(--semi-red-5), 1);
43
+ --semi-color-shadow: rgba(var(--semi-black),0.04);
44
+ --semi-color-default: rgba(var(--semi-grey-0), 1);
45
+ --semi-color-info-hover: rgba(var(--semi-yellow-6),1);
46
+ --semi-color-link-hover: rgba(var(--semi-brand-6),1);
47
+ --semi-color-overlay: rgba(var(--semi-black),0.8);
48
+ --semi-color-primary: rgba(var(--semi-lime-5), 1);
49
+ --semi-color-success: rgba(var(--semi-green-5), 1);
50
+ --semi-color-warning: rgba(var(--semi-orange-5), 1);
51
+ --semi-color-info-active: rgba(var(--semi-yellow-7),1);
52
+ --semi-color-link-active: rgba(var(--semi-brand-5),1);
53
+ --semi-color-link-visited: rgba(var(--semi-brand-2),1);
54
+ --semi-color-tertiary: rgba(var(--semi-grey-5), 1);
55
+ --semi-color-focus-border: rgba(var(--semi-amber-5), 1);
56
+ --semi-color-info-disabled: rgba(var(--semi-yellow-2),1);
57
+ --semi-color-overlay-bg: rgba(var(--semi-black),0.8);
58
+ --semi-color-danger-hover: rgba(var(--semi-red-6), 1);
59
+ --semi-color-highlight: rgba(var(--semi-black), 1);
60
+ --semi-color-secondary: rgba(var(--semi-violet-5),1);
61
+ --semi-color-danger-active: rgba(var(--semi-red-7), 1);
62
+ --semi-color-disabled-bg: rgba(var(--semi-grey-1), 1);
63
+ --semi-color-default-hover: rgba(var(--semi-grey-1), 1);
64
+ --semi-color-primary-hover: rgba(var(--semi-lime-6), 1);
65
+ --semi-color-success-hover: rgba(var(--semi-green-6), 1);
66
+ --semi-color-warning-hover: rgba(var(--semi-orange-6), 1);
67
+ --semi-color-default-active: rgba(var(--semi-grey-2), 1);
68
+ --semi-color-disabled-fill: rgba(var(--semi-grey-8), 0.04);
69
+ --semi-color-disabled-text: rgba(var(--semi-grey-9), 0.35);
70
+ --semi-color-highlight-bg: rgba(var(--semi-yellow-4), 1);
71
+ --semi-color-primary-active: rgba(var(--semi-lime-7), 1);
72
+ --semi-color-success-active: rgba(var(--semi-green-7), 1);
73
+ --semi-color-warning-active: rgba(var(--semi-orange-7), 1);
74
+ --semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1);
75
+ --semi-color-disabled-border: rgba(var(--semi-grey-1), 1);
76
+ --semi-color-primary-disabled: rgba(var(--semi-lime-2), 1);
77
+ --semi-color-success-disabled: rgba(var(--semi-green-2), 1);
78
+ --semi-color-tertiary-active: rgba(var(--semi-grey-7), 1);
79
+ --semi-color-secondary-hover: rgba(var(--semi-violet-6),1);
80
+ --semi-color-secondary-active: rgba(var(--semi-violet-7),1);
81
+ --semi-color-info-light-hover: rgba(var(--semi-yellow-1),1);
82
+ --semi-color-info-light-active: rgba(var(--semi-yellow-2),1);
83
+ --semi-color-secondary-disabled: rgba(var(--semi-violet-2),1);
84
+ --semi-color-info-light-default: rgba(var(--semi-yellow-0),1);
85
+ --semi-color-danger-light-hover: rgba(var(--semi-red-1), 1);
86
+ --semi-color-danger-light-active: rgba(var(--semi-red-2), 1);
87
+ --semi-color-danger-light-default: rgba(var(--semi-red-0), 1);
88
+ --semi-color-primary-light-hover: rgba(var(--semi-lime-1), 1);
89
+ --semi-color-success-light-hover: rgba(var(--semi-green-1), 1);
90
+ --semi-color-warning-light-hover: rgba(var(--semi-orange-1), 1);
91
+ --semi-color-primary-light-active: rgba(var(--semi-lime-2), 1);
92
+ --semi-color-success-light-active: rgba(var(--semi-green-2), 1);
93
+ --semi-color-warning-light-active: rgba(var(--semi-orange-2), 1);
94
+ --semi-color-primary-light-default: rgba(var(--semi-lime-0), 1);
95
+ --semi-color-success-light-default: rgba(var(--semi-green-0), 1);
96
+ --semi-color-tertiary-light-hover: rgba(var(--semi-grey-1), 1);
97
+ --semi-color-warning-light-default: rgba(var(--semi-orange-0), 1);
98
+ --semi-color-tertiary-light-active: rgba(var(--semi-grey-2), 1);
99
+ --semi-color-secondary-light-hover: rgba(var(--semi-violet-1),1);
100
+ --semi-color-tertiary-light-default: rgba(var(--semi-grey-0), 1);
101
+ --semi-color-secondary-light-active: rgba(var(--semi-violet-2),1);
102
+ --semi-color-secondary-light-default: rgba(var(--semi-violet-0),1);
103
+ font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
104
+ -webkit-font-smoothing: antialiased;;
105
+ --semi-shadow-elevated: 0px 0px 1px 0px rgba(0,0,0,0.30), 0px 4px 14px 0px rgba(0,0,0,0.10);
106
+ --semi-shadow-0: none;
107
+ --semi-shadow-1: none;
108
+ --semi-shadow-2: 0px 2px 4px 0px rgba(0,0,0,0.14), 0px 0px 1px 0px rgba(0,0,0,0.16);
109
+ --semi-shadow-knob: 0px 4px 6px 0px rgba(0,0,0,0.10), 0px 0px 1px 0px rgba(0,0,0,0.30);
110
+ --semi-border-radius-full: 9999px;
111
+ --semi-border-radius-large: 12px;
112
+ --semi-border-radius-small: 8px;
113
+ --semi-border-radius-circle: 50%;
114
+ --semi-border-radius-medium: 6px;
115
+ --semi-border-radius-extra-small: 3px;
116
+
117
+
118
+ }
119
+ body[theme-mode="dark"], body .semi-always-dark, :host([theme-mode="dark"]), :host .semi-always-dark {
120
+ --semi-color-bg-0: rgba(2,3,3,1);
121
+ --semi-color-bg-1: rgba(0,0,0,1);
122
+ --semi-color-bg-2: rgba(19,19,19,1);
123
+ --semi-color-bg-3: rgba(41,41,41,1);
124
+ --semi-color-bg-4: rgba(22,23,26,1);
125
+ --semi-color-info: rgba(var(--semi-yellow-5),1);
126
+ --semi-color-link: rgba(var(--semi-brand-4),1);
127
+ --semi-color-nav-bg: rgba(var(--semi-back-1),1);
128
+ --semi-color-black: rgba(var(--semi-black), 1);
129
+ --semi-color-data-0: rgba(94, 109, 194, 1);
130
+ --semi-color-data-1: rgba(8, 104, 120, 1);
131
+ --semi-color-data-2: rgba(250, 173, 63, 1);
132
+ --semi-color-data-3: rgba(76, 43, 156, 1);
133
+ --semi-color-data-4: rgba(16, 125, 248, 1);
134
+ --semi-color-data-5: rgba(248, 202, 16, 1);
135
+ --semi-color-data-6: rgba(195, 30, 87, 1);
136
+ --semi-color-data-7: rgba(5, 119, 115, 1);
137
+ --semi-color-data-8: rgba(154, 207, 13, 1);
138
+ --semi-color-data-9: rgba(117, 29, 138, 1);
139
+ --semi-color-fill-0: rgba(var(--semi-white),0.09);
140
+ --semi-color-fill-1: rgba(var(--semi-white),0.13);
141
+ --semi-color-fill-2: rgba(var(--semi-white),0.17);
142
+ --semi-color-text-0: rgba(var(--semi-grey-9), 1);
143
+ --semi-color-text-1: rgba(var(--semi-grey-9), 0.8);
144
+ --semi-color-text-2: rgba(var(--semi-grey-9), 0.6);
145
+ --semi-color-text-3: rgba(var(--semi-grey-9), 0.35);
146
+ --semi-color-white: rgba(228, 231, 245, 1);
147
+ --semi-color-data-10: rgba(16, 162, 180, 1);
148
+ --semi-color-data-11: rgba(208, 110, 11, 1);
149
+ --semi-color-data-12: rgba(113, 66, 197, 1);
150
+ --semi-color-data-13: rgba(7, 100, 212, 1);
151
+ --semi-color-data-14: rgba(251, 232, 110, 1);
152
+ --semi-color-data-15: rgba(160, 19, 73, 1);
153
+ --semi-color-data-16: rgba(11, 179, 167, 1);
154
+ --semi-color-data-17: rgba(98, 138, 6, 1);
155
+ --semi-color-data-18: rgba(162, 48, 179, 1);
156
+ --semi-color-data-19: rgba(40, 51, 138, 1);
157
+ --semi-color-border: rgba(var(--semi-white),0.08);
158
+ --semi-color-danger: rgba(var(--semi-red-5), 1);
159
+ --semi-color-shadow: rgba(var(--semi-black),0.04);
160
+ --semi-color-default: rgba(var(--semi-grey-0), 1);
161
+ --semi-color-info-hover: rgba(var(--semi-yellow-6),1);
162
+ --semi-color-link-hover: rgba(var(--semi-brand-6),1);
163
+ --semi-color-primary: rgba(var(--semi-amber-5),1);
164
+ --semi-color-success: rgba(var(--semi-green-5),1);
165
+ --semi-color-warning: rgba(var(--semi-orange-5), 1);
166
+ --semi-color-info-active: rgba(var(--semi-yellow-7),1);
167
+ --semi-color-link-active: rgba(var(--semi-brand-7),1);
168
+ --semi-color-link-visited: rgba(var(--semi-brand-5),1);
169
+ --semi-color-tertiary: rgba(var(--semi-grey-5), 1);
170
+ --semi-color-focus-border: rgba(var(--semi-amber-5), 1);
171
+ --semi-color-info-disabled: rgba(var(--semi-yellow-5),1);
172
+ --semi-color-overlay-bg: rgba(var(--semi-black),0.7);
173
+ --semi-color-danger-hover: rgba(var(--semi-red-6), 1);
174
+ --semi-color-highlight: rgba(var(--semi-white), 1);
175
+ --semi-color-secondary: rgba(var(--semi-violet-5),1);
176
+ --semi-color-danger-active: rgba(var(--semi-red-7), 1);
177
+ --semi-color-disabled-bg: rgba(var(--semi-grey-1), 1);
178
+ --semi-color-default-hover: rgba(var(--semi-grey-1), 1);
179
+ --semi-color-primary-hover: rgba(var(--semi-amber-6), 1);
180
+ --semi-color-success-hover: rgba(var(--semi-green-6), 1);
181
+ --semi-color-warning-hover: rgba(var(--semi-orange-6), 1);
182
+ --semi-color-default-active: rgba(var(--semi-grey-2), 1);
183
+ --semi-color-disabled-fill: rgba(var(--semi-grey-8), 0.04);
184
+ --semi-color-disabled-text: rgba(var(--semi-grey-9), 0.35);
185
+ --semi-color-highlight-bg: rgba(var(--semi-yellow-2), 1);
186
+ --semi-color-primary-active: rgba(var(--semi-amber-7), 1);
187
+ --semi-color-success-active: rgba(var(--semi-green-7), 1);
188
+ --semi-color-warning-active: rgba(var(--semi-orange-7), 1);
189
+ --semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1);
190
+ --semi-color-disabled-border: rgba(var(--semi-grey-1), 1);
191
+ --semi-color-primary-disabled: rgba(var(--semi-amber-2), 1);
192
+ --semi-color-success-disabled: rgba(var(--semi-green-2), 1);
193
+ --semi-color-tertiary-active: rgba(var(--semi-grey-7), 1);
194
+ --semi-color-secondary-hover: rgba(var(--semi-violet-6),1);
195
+ --semi-color-secondary-active: rgba(var(--semi-violet-7),1);
196
+ --semi-color-info-light-hover: rgba(var(--semi-yellow-4),0.5);
197
+ --semi-color-info-light-active: rgba(var(--semi-yellow-4),0.4);
198
+ --semi-color-secondary-disabled: rgba(var(--semi-violet-2),1);
199
+ --semi-color-info-light-default: rgba(var(--semi-yellow-4),0.2);
200
+ --semi-color-danger-light-hover: rgba(var(--semi-red-5),0.3);
201
+ --semi-color-danger-light-active: rgba(var(--semi-red-5),0.4);
202
+ --semi-color-danger-light-default: rgba(var(--semi-red-5),0.2);
203
+ --semi-color-primary-light-hover: rgba(var(--semi-amber-5),0.3);
204
+ --semi-color-success-light-hover: rgba(var(--semi-green-5),0.3);
205
+ --semi-color-warning-light-hover: rgba(var(--semi-orange-4),0.3);
206
+ --semi-color-primary-light-active: rgba(var(--semi-amber-5),0.4);
207
+ --semi-color-success-light-active: rgba(var(--semi-green-5),0.4);
208
+ --semi-color-warning-light-active: rgba(var(--semi-orange-4),0.4);
209
+ --semi-color-primary-light-default: rgba(var(--semi-amber-5),0.2);
210
+ --semi-color-success-light-default: rgba(var(--semi-green-5),0.2);
211
+ --semi-color-tertiary-light-hover: rgba(var(--semi-grey-5), 0.3);
212
+ --semi-color-warning-light-default: rgba(var(--semi-orange-4),0.2);
213
+ --semi-color-tertiary-light-active: rgba(var(--semi-grey-5), 0.4);
214
+ --semi-color-secondary-light-hover: rgba(var(--semi-violet-5),0.3);
215
+ --semi-color-tertiary-light-default: rgba(var(--semi-grey-5), 0.2);
216
+ --semi-color-secondary-light-active: rgba(var(--semi-violet-5),0.4);
217
+ --semi-color-secondary-light-default: rgba(var(--semi-violet-5),0.2);
218
+ font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
219
+ -webkit-font-smoothing: antialiased;;
220
+ --semi-shadow-elevated: 0px 0px 1px 0px rgba(0,0,0,0.30), 0px 4px 14px 0px rgba(0,0,0,0.10);
221
+ --semi-shadow-0: none;
222
+ --semi-shadow-1: none;
223
+ --semi-shadow-2: 0px 2px 4px 0px rgba(0,0,0,0.14), 0px 0px 1px 0px rgba(0,0,0,0.16);
224
+ --semi-shadow-knob: 0px 4px 6px 0px rgba(0,0,0,0.10), 0px 0px 1px 0px rgba(0,0,0,0.30);
225
+ --semi-border-radius-full: 9999px;
226
+ --semi-border-radius-large: 12px;
227
+ --semi-border-radius-small: 8px;
228
+ --semi-border-radius-circle: 50%;
229
+ --semi-border-radius-medium: 6px;
230
+ --semi-border-radius-extra-small: 3px;
231
+
232
+
233
+ }
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,363 @@
1
+ $width-tag-outline: 1px;
2
+ $height-tag_large: 32px;
3
+ $height-tag_small: 24px;
4
+ $radius-tag: 4px;
5
+ $color-card-bg-default: var(--semi-color-bg-1);
6
+ $radius-card: 8px;
7
+ $spacing-card-margin: 16px;
8
+ $spacing-card-padding: 16px;
9
+ $spacing-form_label-marginBottom: 8px;
10
+ $spacing-form_label_extra-marginLeft: 4px;
11
+ $color-spin-bg: var(--semi-color-primary);
12
+ $width-spin_middle: 24px;
13
+ $color-tabs_tab-pane_arrow-text-hover: var(--semi-color-text-1);
14
+ $color-tabs_tab_selected-icon-default: var(--semi-color-text-0);
15
+ $color-tabs_tab-pane_arrow-text-default: var(--semi-color-text-0);
16
+ $color-tabs_tab_button_selected-text-default: var(--semi-color-text-0);
17
+ $color-tabs_tab_line_indicator_selected-icon-default: var(--semi-color-text-0);
18
+ $width-tabs_bar_line_tab-border: 2px;
19
+ $radius-tabs_tab_button: 4px;
20
+ $radius-tree_checkbox_addon: 4px;
21
+ $color-badge_default-bg-default: var(--semi-color-secondary-light-hover);
22
+ $color-badge_primary_inverted-text-default: var(--semi-color-secondary-active);
23
+ $radius-badge_dot: 8px;
24
+ $color-input-icon-default: var(--semi-color-text-2);
25
+ $color-input_default-bg-hover: var(--semi-color-fill-0);
26
+ $color-input_default-bg-active: var(--semi-color-fill-1);
27
+ $color-input_default-border-focus: var(--semi-color-primary);
28
+ $color-input_default-border-hover: var(--semi-color-primary-hover);
29
+ $color-input_default-text-default: var(--semi-color-text-0);
30
+ $color-input_warning-border-default: var(--semi-color-warning-light-default);
31
+ $height-input_large: 48px;
32
+ $height-input_small: 28px;
33
+ $height-input_default: 40px;
34
+ $height-input_wrapper_large: 48px;
35
+ $height-input_wrapper_small: 32px;
36
+ $height-input_wrapper_default: 40px;
37
+ $height-inputNumber_button_default: 40px;
38
+ $radius-inputNumber: 6px;
39
+ $radius-input_wrapper: 8px;
40
+ $color-modal-bg: var(--semi-color-bg-4);
41
+ $width-modal_large: 680px;
42
+ $width-modal_small: 400px;
43
+ $width-modal_medium: 480px;
44
+ $width-modal_content: 100%;
45
+ $width-modal_content-border: 0px;
46
+ $radius-modal_footer: 1px;
47
+ $radius-modal_content: 16px;
48
+ $spacing-modal_content-paddingX: 24px;
49
+ $semi-radio-addon-buttonRadio-large: 48px;
50
+ $color-radio_card-bg-default: var(--semi-color-fill-0);
51
+ $color-radio_primary-bg-hover: var(--semi-color-text-0);
52
+ $color-radio_primary-bg-active: var(--semi-color-text-0);
53
+ $color-radio_primary-bg-default: var(--semi-color-text-0);
54
+ $color-radio_checked-border-hover: var(--semi-color-text-0);
55
+ $color-radio_default-border-hover: var(--semi-color-border);
56
+ $color-radio_primary-text-default: var(--semi-color-bg-1);
57
+ $color-radio_checked-border-active: var(--semi-color-text-0);
58
+ $color-radio_primary-outline-focus: var(--semi-color-text-0);
59
+ $color-radio_default-border-default: var(--semi-color-border);
60
+ $color-radio_primary-border-default: var(--semi-color-text-0);
61
+ $color-radio_buttonRadio-text-default: var(--semi-color-text-3);
62
+ $color-radio_cardRadioGroup-bg-checked: var(--semi-color-fill-0);
63
+ $color-radio_addon_buttonRadio-bg-hover: var(--semi-color-fill-0);
64
+ $color-radio_addon_buttonRadio-bg-checked: var(--semi-color-bg-3);
65
+ $color-radio_cardRadioGroup_border-active: var(--semi-color-border);
66
+ $color-radio_addon_buttonRadio-text-checked: var(--semi-color-text-0);
67
+ $color-radio_cardRadioGroup_checked_border-hover: var(--semi-color-border);
68
+ $color-radio_cardRadioGroup_checked_border-active: var(--semi-color-text-2);
69
+ $width-radio-outline: 2px;
70
+ $height-radio_inner_min: 24px;
71
+ $radius-radio_buttonRadio: 8px;
72
+ $radius-radio_cardRadioGroup: 8px;
73
+ $radius-radio_addon_buttonRadio: 8px;
74
+ $spacing-radio_addon-paddingLeft: 8px;
75
+ $spacing-radio_buttonRadioGroup-paddingRight: 4px;
76
+ $spacing-radio_addon_buttonRadio_large-paddingX: 12px;
77
+ $spacing-radio_addon_buttonRadio_middle-paddingX: 12px;
78
+ $color-steps_item_finish-icon: var(--semi-color-primary);
79
+ $color-steps_item_title-text-hover: var(--semi-color-text-2);
80
+ $color-steps_item_process_left-icon: var(--semi-color-black);
81
+ $color-steps_item_wait_left_icon-icon: var(--semi-color-text-3);
82
+ $color-steps_item_description-text-hover: var(--semi-color-text-2);
83
+ $color-steps_item_process_left_number-icon: var(--semi-color-black);
84
+ $color-steps_item_wait_left_number_icon-bg-hover: var(--semi-color-tertiary-light-hover);
85
+ $color-steps_item_wait_left_number_icon-icon-hover: var(--semi-color-text-2);
86
+ $color-table_resizer-bg-default: var(--semi-color-fill-0);
87
+ $color-table_sorter_on-text-default: var(--semi-color-text-0);
88
+ $width-table_base_border: 0px;
89
+ $width-table_header_border: 0px;
90
+ $width-table_cell_fixed_left_last: 0.5px;
91
+ $width-table_react_resizable_handle: 8px;
92
+ $color-toast_success-icon: var(--semi-color-primary);
93
+ $color-toast_success_light-bg: var(--semi-color-primary-light-default);
94
+ $color-toast_success_light-border: var(--semi-color-primary);
95
+ $radius-toast_content: 8px;
96
+ $spacing-toast_content-margin: 16px;
97
+ $spacing-toast_content-paddingX: 16px;
98
+ $spacing-toast_content_close_btn-marginTop: -6px;
99
+ $color-anchor_title-text-default: var(--semi-color-text-2);
100
+ $color-anchor_slide_primary-bg-active: var(--semi-color-text-0);
101
+ $color-anchor_slide_default-bg-default: var(--semi-color-fill-0);
102
+ $width-anchor_slide_default: 2px;
103
+ $width-anchor-outline_border_radius: 4px;
104
+ $height-anchor_slide_default: 24px;
105
+ $radius-anchor_slide: 1px;
106
+ $spacing-anchor_slide_small-Y: 8px;
107
+ $spacing-anchor_slide_default-Y: 4px;
108
+ $spacing-anchor_link_title-paddingTop: 4px;
109
+ $width-avatar-outline: 1px;
110
+ $width-avatar_extra_extra_small: 16px;
111
+ $radius-avatar: 8px;
112
+ $color-banner_success-bg-default: var(--semi-color-primary-light-default);
113
+ $color-banner_success-text-default: var(--semi-color-primary);
114
+ $color-banner_success-border-default: var(--semi-color-primary);
115
+ $radius-banner: 8px;
116
+ $spacing-banner_closeBtn-marginLeft: 16px;
117
+ $spacing-banner_title_description-marginTop: 4px;
118
+ $color-button_light-bg-hover: var(--semi-color-fill-0);
119
+ $color-button_light-bg-active: var(--semi-color-fill-0);
120
+ $color-button_light-bg-default: rgba(245,250,252,0);
121
+ $color-button_primary-bg-hover: var(--semi-color-primary-hover);
122
+ $color-button_disabled-bg-hover: var(--semi-color-disabled-fill);
123
+ $color-button_light-border-hover: var(--semi-color-border);
124
+ $color-button_secondary-bg-hover: var(--semi-color-fill-1);
125
+ $color-button_disabled-bg-default: var(--semi-color-disabled-bg);
126
+ $color-button_light-border-active: var(--semi-color-border);
127
+ $color-button_secondary-bg-active: var(--semi-color-fill-1);
128
+ $color-button_light-border-default: var(--semi-color-border);
129
+ $color-button_primary-text-default: var(--semi-color-black);
130
+ $color-button_secondary-bg-default: var(--semi-color-fill-0);
131
+ $color-button_secondary-text-default: var(--semi-color-text-0);
132
+ $color-button_secondary-border-default: var(--semi-color-fill-0);
133
+ $color-button_tertiary_solid-text-default: var(--semi-color-text-0);
134
+ $color-button_primary_borderless-text-default: var(--semi-color-text-0);
135
+ $color-button_secondary_borderless-text-default: var(--semi-color-primary-active);
136
+ $width-button_light-border: 1px;
137
+ $height-button_large: 48px;
138
+ $height-button_small: 32px;
139
+ $height-button_default: 40px;
140
+ $radius-button: 8px;
141
+ $radius-button_group: 8px;
142
+ $color-rating-icon-default: var(--semi-color-info);
143
+ $color-select-bg-active: var(--semi-color-fill-1);
144
+ $color-select-border-focus: var(--semi-color-primary);
145
+ $color-select-border-active: var(--semi-color-primary);
146
+ $color-select_default-border-focus: var(--semi-color-primary);
147
+ $width-select_arrow: 24px;
148
+ $height-select_default: 40px;
149
+ $radius-select: 8px;
150
+ $radius-select_option: 8px;
151
+ $spacing-select_option-paddingTop: 12px;
152
+ $spacing-select_option-paddingLeft: 16px;
153
+ $spacing-select_option-paddingRight: 8px;
154
+ $spacing-select_option-paddingBottom: 12px;
155
+ $spacing-select_option_list-paddingTop: 8px;
156
+ $spacing-select_option_list-paddingLeft: 4px;
157
+ $spacing-select_option_tick-marginRight: 8px;
158
+ $spacing-select_option_list-paddingRight: 4px;
159
+ $spacing-select_option_list-paddingBottom: 8px;
160
+ $color-slider_dot-border: var(--semi-color-border);
161
+ $color-slider_handle-focus: var(--semi-color-link-active);
162
+ $color-slider_dot-bg-default: var(--semi-color-white);
163
+ $color-slider_handle-bg-default: var(--semi-color-white);
164
+ $width-slider_dot: 12px;
165
+ $width-slider_handle: 16px;
166
+ $width-slider_handle-focus: 2px;
167
+ $height-slider_wrapper: 32px;
168
+ $radius-slider_rail: 4px;
169
+ $radius-slider_track: 4px;
170
+ $spacing-slider_dot-top: 6px;
171
+ $spacing-slider-paddingX: 8px;
172
+ $spacing-slider_rail-top: 10px;
173
+ $spacing-slider_marks-top: 17px;
174
+ $spacing-slider_track-top: 10px;
175
+ $spacing-slider_boundary-top: 30px;
176
+ $spacing-slider_rail-padding: 0px;
177
+ $spacing-slider_handle-marginTop: 4px;
178
+ $color-switch_checked-bg-hover: var(--semi-color-primary-hover);
179
+ $color-switch_checked-bg-active: var(--semi-color-primary-active);
180
+ $color-switch_checked-bg-default: var(--semi-color-primary);
181
+ $color-switch_primary-outline-focus: var(--semi-color-primary-light-active);
182
+ $width-switch_small: 32px;
183
+ $width-switch_knob_large_small: 16px;
184
+ $width-switch_knob_small_active: 16px;
185
+ $height-switch_large: 32px;
186
+ $height-switch_small: 20px;
187
+ $radius-switch_small: 20px;
188
+ $spacing-switch_knob_small-padding: 1px;
189
+ $spacing-switch_unchecked_small-translateX: 1px;
190
+ $color-upload_drag_area-bg: var(--semi-color-fill-0);
191
+ $color-upload_drag_area_icon: var(--semi-color-text-0);
192
+ $color-upload_pic_add-bg-active: var(--semi-color-fill-1);
193
+ $color-upload_drag_area-border-hover: var(--semi-color-primary-hover);
194
+ $width-upload_drag_area-border: 1px;
195
+ $width-upload_picture_add-border: 1px;
196
+ $radius-upload_drag_area: 8px;
197
+ $radius-upload_picture_add: 8px;
198
+ $radius-upload_picture_file_card_img: 8px;
199
+ $color-popover-bg-default: var(--semi-color-bg-4);
200
+ $color-tooltip_arrow-icon-defaul: var(--semi-color-bg-);
201
+ $radius-popover: 8px;
202
+ $color-tooltip-bg-default: var(--semi-color-tertiary-active);
203
+ $color-tooltip_arrow-icon-default: var(--semi-color-tertiary-active);
204
+ $radius-tooltip: 8px;
205
+ $color-cascader-icon-default: var(--semi-color-text-0);
206
+ $color-cascader_select_highlight: var(--semi-color-text-0);
207
+ $color-cascader_default-bg-default: var(--semi-color-fill-0);
208
+ $color-cascader_option-bg-selected: var(--semi-color-fill-0);
209
+ $color-cascader_option-icon-default: var(--semi-color-text-1);
210
+ $color-cascader_default-border-focus: var(--semi-color-primary);
211
+ $color-cascader_input_disabled-bg-default: var(--semi-color-disabled-fill);
212
+ $color-cascader_option_list-border-default: var(--semi-color-border);
213
+ $width-cascader-border: 0px;
214
+ $width-cascader_focus-border: 0.5px;
215
+ $width-cascader_hover-border: 0.5px;
216
+ $width-cascader_option_list-border: 0.5px;
217
+ $height-cascader_default: 48px;
218
+ $radius-cascader: 8px;
219
+ $color-checkbox_checked-bg-hover: var(--semi-color-text-1);
220
+ $color-checkbox_checked-bg-active: var(--semi-color-text-0);
221
+ $color-checkbox_checked-bg-default: var(--semi-color-text-0);
222
+ $color-checkbox_checked-icon-hover: var(--semi-color-bg-4);
223
+ $color-checkbox_cardType_checked-bg: var(--semi-color-fill-0);
224
+ $color-checkbox_checked-border-hover: var(--semi-color-border);
225
+ $color-checkbox_checked-icon-default: var(--semi-color-bg-4);
226
+ $color-checkbox_default-border-hover: var(--semi-color-border);
227
+ $color-checkbox_checked-border-active: var(--semi-color-border);
228
+ $color-checkbox_primary-outline-focus: var(--semi-color-fill-0);
229
+ $color-checkbox_checked-border-default: var(--semi-color-border);
230
+ $color-checkbox_default-border-default: var(--semi-color-border);
231
+ $color-checkbox_cardType_checked_border-hover: var(--semi-color-border);
232
+ $color-checkbox_cardType_checked_border-active: var(--semi-color-border);
233
+ $color-checkbox_cardType_checked_border-default: var(--semi-color-fill-0);
234
+ $radius-checkbox_inner: 2px;
235
+ $radius-checkbox_cardType: 8px;
236
+ $width-collapse_item-border: 0.5px;
237
+ $radius-collapse_header: 8px;
238
+ $spacing-collapse_header-marginX: 0px;
239
+ $spacing-collapse_content-paddingLeft: 8px;
240
+ $color-dropdown-bg-default: var(--semi-color-bg-4);
241
+ $color-dropdown_item_disabled-bg-default: var(--semi-color-disabled-fill);
242
+ $color-dropdown_item_primary-text-default: var(--semi-color-text-0);
243
+ $radius-dropdown: 8px;
244
+ $spacing-dropdown_menu-paddingX: 4px;
245
+ $color-progress_track_inner-bg: var(--semi-color-primary);
246
+ $radius-progress_track: 8px;
247
+ $radius-progress_track_inner: 8px;
248
+ $radius-skeleton_li: 8px;
249
+ $radius-skeleton_item: 8px;
250
+ $height-tagInput-large: 48px;
251
+ $height-tagInput-small: 32px;
252
+ $height-tagInput-default: 40px;
253
+ $height-tagInput_input_large: 24px;
254
+ $height-tagInput_input_default: 24px;
255
+ $radius-tagInput: 8px;
256
+ $spacing-tagInput_large-Y: 4px;
257
+ $color-timeline_tail-border: var(--semi-color-border);
258
+ $color-timeline_dot_info-bg-default: var(--semi-color-tertiary-light-active);
259
+ $width-timeline_dot: 8px;
260
+ $width-timeline_tail-border: 1px;
261
+ $spacing-timeline_head-top: 6px;
262
+ $spacing-timeline_content-marginLeft: 24px;
263
+ $color-transfer_header-text: var(--semi-color-text-0);
264
+ $width-transfer-border: 0.5px;
265
+ $width-transfer-minWidth: 400px;
266
+ $width-transfer_left-border: 0.5px;
267
+ $radius-transfer: 8px;
268
+ $color-sideSheet_mask-bg: var(--semi-color-nav-bg);
269
+ $spacing-sideSheet_header-paddingBottom: 24px;
270
+ $animation_delay-sideSheet_mask-hide: var(--semi-transition_delay-fastest);
271
+ $animation_delay-sideSheet_mask-show: 0ms;
272
+ $animation_delay-sideSheet_inner-hide: 0ms;
273
+ $animation_delay-sideSheet_inner-show: 0ms;
274
+ $animation_duration-sideSheet_mask-hide: 180ms;
275
+ $animation_duration-sideSheet_mask-show: 180ms;
276
+ $animation_function-sideSheet_mask-hide: cubic-bezier(0.25, 0.46, 0.45, 0.94);
277
+ $animation_function-sideSheet_mask-show: cubic-bezier(0.25, 0.46, 0.45, 0.94);
278
+ $animation_duration-sideSheet_inner-hide: 180ms;
279
+ $animation_duration-sideSheet_inner-show: 180ms;
280
+ $animation_function-sideSheet_inner-hide: cubic-bezier(0.25, 0.46, 0.45, 0.94);
281
+ $animation_function-sideSheet_inner-show: cubic-bezier(0.25, 0.46, 0.45, 0.94);
282
+ $color-breadcrumb_default-text-hover: var(--semi-color-text-0);
283
+ $color-breadcrumb_default-text-active: var(--semi-color-text-1);
284
+ $spacing-breadcrumb_item-marginRight: 8px;
285
+ $spacing-breadcrumb_item_wrap-marginY: 8px;
286
+ $spacing-breadcrumb_item_wrap-marginRight: 8px;
287
+ $color-datepicker_navIcon-text-default: var(--semi-color-text-3);
288
+ $color-datepicker_date_today-text-default: var(--semi-color-primary-active);
289
+ $color-datepicker_date_selected-text-default: var(--semi-color-black);
290
+ $width-datepicker_day: 36px;
291
+ $width-datepicker_nav: 48px;
292
+ $width-datepicker-border: 0.5px;
293
+ $width-datepicker_day_main-borderRadius: 4px;
294
+ $color-navigation-bg-default: var(--semi-color-bg-1);
295
+ $color-navigation_outline-focus: var(--semi-color-primary-light-default);
296
+ $color-navigation_footer_icon-default: var(--semi-color-text-2);
297
+ $color-navigation_itemL1_icon-default: var(--semi-color-text-0);
298
+ $color-navigation_itemL1_disabled-bg-default: var(--semi-color-disabled-bg);
299
+ $color-navigation_itemL1_selected_icon-default: var(--semi-color-text-0);
300
+ $color-navigation_itemL1_selected_disabled-bg-default: var(--semi-color-disabled-bg);
301
+ $color-navigation_itemL1_selected_disabled-text-default: var(--semi-color-disabled-text);
302
+ $width-navigation_border: 0.5px;
303
+ $width-navigation_header_logo: 36px;
304
+ $width-navigation_icon_text_between: 8px;
305
+ $width-navigation_item-borderRadius: 8px;
306
+ $width-navigation_icon_left-minWidth: 24px;
307
+ $height-navigation_item_base: 48px;
308
+ $height-navigation_header_logo: 36px;
309
+ $spacing-navigation-paddingX: 12px;
310
+ $spacing-navigation_sub-padding: 0px;
311
+ $spacing-navigation_item-paddingX: 12px;
312
+ $spacing-navigation_footer-paddingX: 24px;
313
+ $spacing-navigation_sub_wrap-padding: 0px;
314
+ $spacing-navigation_header-paddingTop: 16px;
315
+ $spacing-navigation_item-marginBottom: 8px;
316
+ $spacing-navigation_collapsed-paddingX: 8px;
317
+ $spacing-navigation_header-paddingBottom: 16px;
318
+ $spacing-navigation_sub_title-marginBottom: 0px;
319
+ $spacing-navigation_list_wrapper-paddingTop: 12px;
320
+ $spacing-navigation_sub_item_first_child-marginTop: 8px;
321
+ $spacing-navigation_vertical_nav_header-paddingLeft: 0px;
322
+ $spacing-navigation_vertical_nav_item_last-marginBottom: 0px;
323
+ $color-pagination_item-bg-hover: var(--semi-color-fill-1);
324
+ $color-pagination_item-text-hover: var(--semi-color-text-0);
325
+ $color-pagination_item-bg-disabled: var(--semi-color-disabled-fill);
326
+ $color-pagination_item-bg-selected: var(--semi-color-primary);
327
+ $color-pagination_item-icon-default: var(--semi-color-text-3);
328
+ $color-pagination_item-text-default: var(--semi-color-text-1);
329
+ $color-pagination_item-icon-disabled: var(--semi-color-disabled-border);
330
+ $color-pagination_item-text-selected: var(--semi-color-black);
331
+ $width-pagination_item-minWidth: 32px;
332
+ $height-pagination_item: 28px;
333
+ $radius-pagination_item: 4px;
334
+ $spacing-pagination-padding: 3px;
335
+ $spacing-pagination_item-marginLeft: 8px;
336
+ $spacing-pagination_item-marginRight: 8px;
337
+ $spacing-popconfirm_footer-marginTop: 24px;
338
+ $spacing-popconfirm_inner_close_btn-top: -16px;
339
+ $spacing-popconfirm_inner_close_btn-right: -16px;
340
+ $color-scrollList_item-bg-active: var(--semi-color-fill-2);
341
+ $color-scrollList_item-text-hover: var(--semi-color-fill-0);
342
+ $width-scrollList_footer-border: 0.5px;
343
+ $width-scrollList_item_wheel_selector-border: 0.5px;
344
+ $radius-scrollList: 8px;
345
+ $color-timePicker_range_panel-border: var(--semi-color-border);
346
+ $width-timePicker_range_panel-border: 0.5px;
347
+ $width-timePicker_range_panel_scrolllist_body-border: 0.5px;
348
+ $radius-timePicker_input: 8px;
349
+ $radius-timePicker_range_panel: 8px;
350
+ $spacing-timePicker_range_panel_scrolllist_header_body-padding: 0px;
351
+ $color-treeSelect_inputTrigger-bg-default: var(--semi-color-fill-0);
352
+ $height-treeSelect_default: 40px;
353
+ $radius-treeSelect: 8px;
354
+ $color-inputNumber_button-bg-default: var(--semi-color-fill-0);
355
+ $spacing-descriptions_item-paddingBottom: 16px;
356
+ $spacing-descriptions_item_double-padding: 4px;
357
+ $spacing-descriptions_value_plain-paddingLeft: 8px;
358
+ $spacing-descriptions_item_medium-paddingRight: 24px;
359
+ $spacing-descriptions_key_medium-paddingBottom: 4px;
360
+ $color-notification_success-icon: var(--semi-color-primary);
361
+ $color-notification_success_light-bg: var(--semi-color-primary-light-default);
362
+ $color-notification_success_light-border: var(--semi-color-primary);
363
+ $radius-notification_notice: 8px;
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 0px rgba(0,0,0,0.14), 0px 0px 1px 0px rgba(0,0,0,0.16);
9
+ };
10
+ @mixin shadow-knob {
11
+ box-shadow: 0px 4px 6px 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
+ }