@mc-markets/ui 1.0.67 → 1.0.68

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 (11) hide show
  1. package/dist/index.cjs.map +1 -1
  2. package/dist/index.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/packages/styles/components/button.scss +89 -87
  5. package/packages/styles/components/checkbox.scss +12 -8
  6. package/packages/styles/components/form.scss +18 -16
  7. package/packages/styles/components/override.scss +0 -234
  8. package/packages/styles/components/select.scss +45 -45
  9. package/packages/styles/components/table.scss +54 -52
  10. package/packages/styles/components/tabs.scss +6 -4
  11. package/packages/styles/index.scss +0 -2
package/packages/styles/components/button.scss CHANGED
@@ -1,102 +1,104 @@
1
- .el-button {
2
- --el-button-font-weight: 600;
3
- --el-button-border-color: var(--bg-quaternary);
4
- --el-button-bg-color: var(--bg-quaternary);
5
- --el-button-text-color: var(--text-primary);
6
- --el-button-disabled-text-color: var(--text-quaternary);
7
- --el-button-disabled-bg-color: color-mix(
8
- in srgb,
9
- var(--bg-tertiary-hover) 50%,
10
- transparent
11
- );
12
- --el-button-disabled-border-color: var(--el-button-disabled-bg-color);
13
- --el-button-divide-border-color: rgba(255, 255, 255, 0.5);
14
- --el-button-hover-text-color: var(--text-primary);
15
- --el-button-hover-bg-color: var(--bg-tertiary-hover);
16
- --el-button-hover-border-color: var(--bg-tertiary);
17
- --el-button-active-text-color: var(--text-primary);
18
- --el-button-active-border-color: var(--bg-tertiary);
19
- --el-button-active-bg-color: var(--bg-tertiary);
20
- --el-button-outline-color: var(--bg-tertiary);
21
- --el-button-hover-link-text-color: var(--text-brand);
22
- --el-button-active-color: var(--text-primary);
23
- height: 40px;
24
- padding: 8px 16px;
25
-
26
- &.is-plain {
1
+ .mc-ui-override {
2
+ .el-button {
3
+ --el-button-font-weight: 600;
4
+ --el-button-border-color: var(--bg-quaternary);
5
+ --el-button-bg-color: var(--bg-quaternary);
6
+ --el-button-text-color: var(--text-primary);
7
+ --el-button-disabled-text-color: var(--text-quaternary);
8
+ --el-button-disabled-bg-color: color-mix(
9
+ in srgb,
10
+ var(--bg-tertiary-hover) 50%,
11
+ transparent
12
+ );
13
+ --el-button-disabled-border-color: var(--el-button-disabled-bg-color);
14
+ --el-button-divide-border-color: rgba(255, 255, 255, 0.5);
27
15
  --el-button-hover-text-color: var(--text-primary);
28
- --el-button-hover-bg-color: var(--bg-brand-secondary);
29
- --el-button-hover-border-color: var(--border-brand-hover);
16
+ --el-button-hover-bg-color: var(--bg-tertiary-hover);
17
+ --el-button-hover-border-color: var(--bg-tertiary);
18
+ --el-button-active-text-color: var(--text-primary);
19
+ --el-button-active-border-color: var(--bg-tertiary);
20
+ --el-button-active-bg-color: var(--bg-tertiary);
21
+ --el-button-outline-color: var(--bg-tertiary);
22
+ --el-button-hover-link-text-color: var(--text-brand);
23
+ --el-button-active-color: var(--text-primary);
24
+ height: 40px;
25
+ padding: 8px 16px;
30
26
 
31
- border-color: var(--border-brand);
32
- background-color: transparent;
27
+ &.is-plain {
28
+ --el-button-hover-text-color: var(--text-primary);
29
+ --el-button-hover-bg-color: var(--bg-brand-secondary);
30
+ --el-button-hover-border-color: var(--border-brand-hover);
33
31
 
34
- &.is-disabled {
32
+ border-color: var(--border-brand);
35
33
  background-color: transparent;
36
- border-color: color-mix(in srgb, var(--bg-brand) 50%, transparent);
34
+
35
+ &.is-disabled {
36
+ background-color: transparent;
37
+ border-color: color-mix(in srgb, var(--bg-brand) 50%, transparent);
38
+ }
37
39
  }
38
- }
39
40
 
40
- &.el-button--large {
41
- height: 48px;
42
- padding: 12px 20px;
43
- }
44
- &.el-button--small {
45
- height: 32px;
46
- padding: 5px 12px;
47
- font-size: 14px;
48
- }
41
+ &.el-button--large {
42
+ height: 48px;
43
+ padding: 12px 20px;
44
+ }
45
+ &.el-button--small {
46
+ height: 32px;
47
+ padding: 5px 12px;
48
+ font-size: 14px;
49
+ }
49
50
 
50
- &.el-button--text {
51
- height: 20px;
52
- padding: 0;
53
- line-height: 20px;
54
- }
51
+ &.el-button--text {
52
+ height: 20px;
53
+ padding: 0;
54
+ line-height: 20px;
55
+ }
55
56
 
56
- &.el-button--primary {
57
- --el-button-text-color: var(--text-quaternary);
58
- --el-button-outline-color: var(--text-quaternary);
59
- --el-button-active-color: var(--bg-brand-hover);
60
- --el-button-hover-text-color: var(--text-quaternary);
61
- --el-button-hover-link-text-color: var(--text-quaternary);
62
- --el-button-hover-bg-color: var(--bg-brand-hover);
63
- --el-button-hover-border-color: var(--bg-brand-hover);
64
- --el-button-active-text-color: var(--text-quaternary);
65
- --el-button-active-bg-color: var(--bg-brand-hover);
66
- --el-button-active-border-color: var(--bg-brand-hover);
67
- --el-button-disabled-text-color: var(--text-quaternary);
68
- --el-button-disabled-bg-color: color-mix(
69
- in srgb,
70
- var(--bg-brand) 50%,
71
- transparent
72
- );
73
- --el-button-disabled-border-color: color-mix(
74
- in srgb,
75
- var(--bg-brand) 50%,
76
- transparent
77
- );
57
+ &.el-button--primary {
58
+ --el-button-text-color: var(--text-quaternary);
59
+ --el-button-outline-color: var(--text-quaternary);
60
+ --el-button-active-color: var(--bg-brand-hover);
61
+ --el-button-hover-text-color: var(--text-quaternary);
62
+ --el-button-hover-link-text-color: var(--text-quaternary);
63
+ --el-button-hover-bg-color: var(--bg-brand-hover);
64
+ --el-button-hover-border-color: var(--bg-brand-hover);
65
+ --el-button-active-text-color: var(--text-quaternary);
66
+ --el-button-active-bg-color: var(--bg-brand-hover);
67
+ --el-button-active-border-color: var(--bg-brand-hover);
68
+ --el-button-disabled-text-color: var(--text-quaternary);
69
+ --el-button-disabled-bg-color: color-mix(
70
+ in srgb,
71
+ var(--bg-brand) 50%,
72
+ transparent
73
+ );
74
+ --el-button-disabled-border-color: color-mix(
75
+ in srgb,
76
+ var(--bg-brand) 50%,
77
+ transparent
78
+ );
78
79
 
79
- background-color: var(--bg-brand);
80
- border-color: var(--bg-brand);
80
+ background-color: var(--bg-brand);
81
+ border-color: var(--bg-brand);
81
82
 
82
- &.is-disabled {
83
- --el-button-disabled-text-color: var(--text-quaternary);
84
- background-color: color-mix(in srgb, var(--bg-brand) 50%, transparent);
85
- border-color: transparent;
83
+ &.is-disabled {
84
+ --el-button-disabled-text-color: var(--text-quaternary);
85
+ background-color: color-mix(in srgb, var(--bg-brand) 50%, transparent);
86
+ border-color: transparent;
87
+ }
86
88
  }
87
- }
88
89
 
89
- &.is-circle {
90
- width: 40px;
91
- }
90
+ &.is-circle {
91
+ width: 40px;
92
+ }
92
93
 
93
- &:hover {
94
- color: var(--el-button-hover-text-color);
95
- border-color: var(--el-button-hover-border-color);
96
- background-color: var(--el-button-hover-bg-color);
97
- }
94
+ &:hover {
95
+ color: var(--el-button-hover-text-color);
96
+ border-color: var(--el-button-hover-border-color);
97
+ background-color: var(--el-button-hover-bg-color);
98
+ }
98
99
 
99
- [class*="el-icon"] + span {
100
- margin-left: 5px;
100
+ [class*="el-icon"] + span {
101
+ margin-left: 5px;
102
+ }
101
103
  }
102
- }
104
+ }
package/packages/styles/components/checkbox.scss CHANGED
@@ -1,10 +1,14 @@
1
- .el-checkbox {
2
- --el-checkbox-checked-icon-color: #000;
3
- --el-checkbox-input-height: 20px;
4
- --el-checkbox-input-width: 20px;
5
- --el-checkbox-input-border: 2px solid var(--icon-tertiary);
6
- }
1
+ .mc-ui-override {
2
+ .el-checkbox {
3
+ --el-checkbox-checked-icon-color: #000;
4
+ --el-checkbox-input-height: 20px;
5
+ --el-checkbox-input-width: 20px;
6
+ --el-checkbox-input-border: 2px solid var(--icon-tertiary);
7
+ }
7
8
 
8
- .el-checkbox .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
9
- top: 7px;
9
+ .el-checkbox
10
+ .el-checkbox__input.is-indeterminate
11
+ .el-checkbox__inner::before {
12
+ top: 7px;
13
+ }
10
14
  }
package/packages/styles/components/form.scss CHANGED
@@ -1,20 +1,22 @@
1
- .el-form {
2
- .el-form-item__label {
3
- height: var(--el-component-size);
4
- line-height: var(--el-component-size);
5
- color: var(--text-primary);
6
- }
1
+ .mc-ui-override {
2
+ .el-form {
3
+ .el-form-item__label {
4
+ height: var(--el-component-size);
5
+ line-height: var(--el-component-size);
6
+ color: var(--text-primary);
7
+ }
7
8
 
8
- .el-form-item--label-top .el-form-item__label {
9
- line-height: 20px;
10
- height: 20px;
11
- }
9
+ .el-form-item--label-top .el-form-item__label {
10
+ line-height: 20px;
11
+ height: 20px;
12
+ }
12
13
 
13
- .el-input__wrapper {
14
- padding: 1px 16px;
15
- }
14
+ .el-input__wrapper {
15
+ padding: 1px 16px;
16
+ }
16
17
 
17
- .el-form-item {
18
- margin-bottom: 20px;
18
+ .el-form-item {
19
+ margin-bottom: 20px;
20
+ }
19
21
  }
20
- }
22
+ }
package/packages/styles/components/override.scss CHANGED
@@ -1,234 +0,0 @@
1
- /**
2
- * Element Plus 样式强制覆盖文件
3
- * 通过 !important 和高权重选择器确保完全覆盖
4
- */
5
-
6
- // 全局覆盖包装器
7
- .mc-ui-override {
8
- // Button 组件完全覆盖
9
- .el-button {
10
- --el-button-font-weight: 600 !important;
11
- --el-button-border-color: var(--bg-quaternary) !important;
12
- --el-button-bg-color: var(--bg-quaternary) !important;
13
- --el-button-text-color: var(--text-primary) !important;
14
- height: 40px !important;
15
- padding: 8px 16px !important;
16
- border-radius: var(--border-radius-base, 8px) !important;
17
-
18
- &.el-button--large {
19
- height: 48px !important;
20
- padding: 12px 20px !important;
21
- }
22
-
23
- &.el-button--small {
24
- height: 32px !important;
25
- padding: 5px 12px !important;
26
- }
27
-
28
- &.el-button--primary {
29
- background-color: var(--bg-brand) !important;
30
- border-color: var(--bg-brand) !important;
31
- color: var(--text-quaternary) !important;
32
-
33
- &:hover {
34
- background-color: var(--bg-brand-hover) !important;
35
- border-color: var(--bg-brand-hover) !important;
36
- }
37
- }
38
- }
39
-
40
- // Input 组件完全覆盖
41
- .el-input {
42
- .el-input__wrapper {
43
- padding: 1px 16px !important;
44
- border-radius: var(--border-radius-base, 8px) !important;
45
- background-color: var(--bg-secondary, #fff) !important;
46
- border-color: var(--border-primary, #dcdfe6) !important;
47
-
48
- &:hover {
49
- border-color: var(--border-brand-hover) !important;
50
- }
51
-
52
- &.is-focus {
53
- border-color: var(--border-brand) !important;
54
- box-shadow: 0 0 0 2px var(--bg-brand-secondary) !important;
55
- }
56
- }
57
- }
58
-
59
- // Select 组件完全覆盖
60
- .el-select {
61
- .el-select__wrapper {
62
- padding: 4px 16px !important;
63
- min-height: var(--el-component-size) !important;
64
- border-radius: var(--border-radius-base, 8px) !important;
65
-
66
- &.is-disabled {
67
- background: var(--bg-tertiary-hover) !important;
68
- }
69
- }
70
-
71
- &.solid .el-select__wrapper {
72
- background: var(--bg-tertiary-hover) !important;
73
- border-color: var(--bg-tertiary-hover) !important;
74
- }
75
- }
76
-
77
- // Table 组件完全覆盖
78
- .el-table {
79
- --el-table-header-bg-color: var(--bg-quaternary) !important;
80
- --el-table-row-hover-bg-color: var(--bg-tertiary-hover) !important;
81
- --el-table-border-color: transparent !important;
82
- --el-table-header-text-color: var(--text-tertiary) !important;
83
- --el-table-tr-bg-color: transparent !important;
84
-
85
- border: none !important;
86
- border-radius: 8px !important;
87
-
88
- .el-table__cell {
89
- border: none !important;
90
- padding: 18px 0px !important;
91
- }
92
-
93
- thead .el-table__cell {
94
- padding: 8px 0px !important;
95
- font-weight: 500 !important;
96
- }
97
-
98
- .cell {
99
- padding: 0 16px !important;
100
- line-height: 20px !important;
101
- }
102
- }
103
-
104
- // Dialog 组件完全覆盖
105
- .el-dialog {
106
- border-radius: var(--border-radius-base, 8px) !important;
107
- background: var(--bg-primary, #fff) !important;
108
-
109
- .el-dialog__header {
110
- padding: 24px 24px 16px !important;
111
- border-bottom: 1px solid var(--border-secondary) !important;
112
- }
113
-
114
- .el-dialog__body {
115
- padding: 24px !important;
116
- }
117
-
118
- .el-dialog__footer {
119
- padding: 16px 24px 24px !important;
120
- border-top: 1px solid var(--border-secondary) !important;
121
- }
122
- }
123
-
124
- // Form 组件完全覆盖
125
- .el-form {
126
- .el-form-item {
127
- margin-bottom: 20px !important;
128
- }
129
-
130
- .el-form-item__label {
131
- color: var(--text-primary) !important;
132
- height: var(--el-component-size) !important;
133
- line-height: var(--el-component-size) !important;
134
- }
135
-
136
- &.el-form--label-top .el-form-item__label {
137
- height: 20px !important;
138
- line-height: 20px !important;
139
- }
140
- }
141
-
142
- // Pagination 组件完全覆盖
143
- .el-pagination {
144
- .el-pagination__item,
145
- .btn-prev,
146
- .btn-next {
147
- border-radius: var(--border-radius-base, 8px) !important;
148
- background: var(--bg-secondary, #fff) !important;
149
- border: 1px solid var(--border-primary) !important;
150
-
151
- &:hover {
152
- background: var(--bg-tertiary-hover) !important;
153
- border-color: var(--border-brand-hover) !important;
154
- }
155
-
156
- &.is-active {
157
- background: var(--bg-brand) !important;
158
- border-color: var(--bg-brand) !important;
159
- color: var(--text-quaternary) !important;
160
- }
161
- }
162
- }
163
-
164
- // Tabs 组件完全覆盖
165
- .el-tabs {
166
- .el-tabs__nav-wrap::after {
167
- display: none !important;
168
- }
169
-
170
- .el-tabs__item {
171
- padding: 12px 16px !important;
172
- color: var(--text-secondary) !important;
173
- border: none !important;
174
-
175
- &.is-active {
176
- color: var(--text-brand) !important;
177
- border-bottom: 2px solid var(--bg-brand) !important;
178
- }
179
-
180
- &:hover {
181
- color: var(--text-brand-hover) !important;
182
- }
183
- }
184
- }
185
- }
186
-
187
- // 全局强制覆盖（最高优先级）
188
- body .mc-ui-override {
189
- // 确保所有 Element Plus 组件都被覆盖
190
- [class*="el-"] {
191
- font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
192
- }
193
- }
194
-
195
- // 深度选择器覆盖（用于 Popper 等全局组件）
196
- :global(.el-popper) {
197
- border-radius: var(--border-radius-base, 8px) !important;
198
- border-color: var(--border-primary) !important;
199
- background: var(--bg-primary, #fff) !important;
200
- box-shadow: var(--box-shadow-light, 0 2px 12px 0 rgba(0, 0, 0, 0.1)) !important;
201
- }
202
-
203
- :global(.el-select-dropdown) {
204
- padding: 12px !important;
205
- border-radius: var(--border-radius-base, 8px) !important;
206
-
207
- .el-select-dropdown__item {
208
- padding: 0px 12px !important;
209
- height: 36px !important;
210
- line-height: 36px !important;
211
- border-radius: 6px !important;
212
- color: var(--text-primary) !important;
213
-
214
- &:hover,
215
- &.is-hovering {
216
- background: var(--bg-tertiary-hover, rgba(255, 255, 255, 0.06)) !important;
217
- }
218
- }
219
- }
220
-
221
- :global(.el-message) {
222
- border-radius: var(--border-radius-base, 8px) !important;
223
- background: var(--bg-primary, #fff) !important;
224
- border-color: var(--border-primary) !important;
225
- color: var(--text-primary) !important;
226
- box-shadow: var(--box-shadow-light) !important;
227
- }
228
-
229
- :global(.el-notification) {
230
- border-radius: var(--border-radius-base, 8px) !important;
231
- background: var(--bg-primary, #fff) !important;
232
- border-color: var(--border-primary) !important;
233
- box-shadow: var(--box-shadow-light) !important;
234
- }
package/packages/styles/components/select.scss CHANGED
@@ -1,59 +1,59 @@
1
- .el-select {
2
- &.solid {
3
- --el-border-color: var(--bg-tertiary-hover);
1
+ .mc-ui-override {
2
+ .el-select {
3
+ &.solid {
4
+ --el-border-color: var(--bg-tertiary-hover);
5
+
6
+ .el-select__wrapper {
7
+ background: var(--bg-tertiary-hover);
8
+ }
9
+ .el-select__caret {
10
+ color: var(--all-base-white);
11
+ }
12
+ }
13
+ }
4
14
 
5
- .el-select__wrapper {
15
+ .el-select__wrapper {
16
+ padding: 4px 16px;
17
+ min-height: var(--el-component-size);
18
+ &.is-disabled {
6
19
  background: var(--bg-tertiary-hover);
7
20
  }
8
- .el-select__caret {
9
- color: var(--all-base-white);
10
- }
11
21
  }
12
- }
13
22
 
14
- .el-select__wrapper {
15
- padding: 4px 16px;
16
- min-height: var(--el-component-size);
17
- &.is-disabled {
18
- background: var(--bg-tertiary-hover);
23
+ .el-select--small {
24
+ .el-select__wrapper {
25
+ padding: 8px 16px;
26
+ font-size: var(--font-size-text-sm);
27
+ min-height: var(--el-component-size-small);
28
+ }
19
29
  }
20
- }
21
-
22
30
 
23
- .el-select--small {
24
- .el-select__wrapper {
25
- padding: 8px 16px;
26
- font-size: var(--font-size-text-sm);
27
- min-height: var(--el-component-size-small);
31
+ // 下拉菜单样式 - 全局样式（仅在组件未定义时生效）
32
+ .el-select-dropdown {
33
+ padding: 12px;
28
34
  }
29
- }
30
35
 
36
+ .el-select-dropdown__list {
37
+ padding: 0;
38
+ }
31
39
 
32
- // 下拉菜单样式 - 全局样式（仅在组件未定义时生效）
33
- .el-select-dropdown{
34
- padding: 12px;
35
- }
40
+ .el-select-dropdown__item {
41
+ padding: 0px 12px;
42
+ height: 36px;
43
+ line-height: 36px;
44
+ border-radius: 6px;
45
+ font-size: var(--font-size-text-sm);
46
+ color: var(--text-primary);
36
47
 
37
- .el-select-dropdown__list {
38
- padding: 0;
39
- }
48
+ &:hover,
49
+ &.is-hovering {
50
+ background: var(--all-alphe-white-6, #ffffff0f);
51
+ }
52
+ }
40
53
 
41
- .el-select-dropdown__item{
42
- padding: 0px 12px;
43
- height: 36px;
44
- line-height: 36px;
45
- border-radius: 6px;
46
- font-size: var(--font-size-text-sm);
47
- color: var(--text-primary);
48
-
49
- &:hover,
50
- &.is-hovering {
51
- background: var(--all-alphe-white-6, #FFFFFF0F);
54
+ .el-select-dropdown__header {
55
+ border: none;
56
+ padding: 0px;
57
+ padding-bottom: 4px;
52
58
  }
53
59
  }
54
-
55
- .el-select-dropdown__header {
56
- border: none;
57
- padding: 0px;
58
- padding-bottom: 4px;
59
- }