@veltra/desktop 1.7.3 → 1.7.4

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 (27) hide show
  1. package/dist/components/auto-complete/style2.css +7 -6
  2. package/dist/components/breadcrumb/style2.css +1 -1
  3. package/dist/components/card/style2.css +2 -2
  4. package/dist/components/condition-editor/style2.css +4 -4
  5. package/dist/components/contextmenu/style2.css +7 -7
  6. package/dist/components/dual-nav/style2.css +1 -1
  7. package/dist/components/expression-editor/style2.css +1 -1
  8. package/dist/components/number-range-input/style2.css +1 -1
  9. package/dist/components/progress-nodes/style2.css +2 -2
  10. package/dist/components/rich-text-editor/style2.css +12 -12
  11. package/dist/components/select/style2.css +4 -4
  12. package/dist/components/tabs/style2.css +1 -1
  13. package/dist/components/tree/style2.css +1 -1
  14. package/package.json +6 -6
  15. package/src/components/auto-complete/style.scss +31 -6
  16. package/src/components/breadcrumb/style.scss +1 -1
  17. package/src/components/card/style.scss +2 -2
  18. package/src/components/condition-editor/style.scss +4 -4
  19. package/src/components/contextmenu/style.scss +25 -5
  20. package/src/components/dual-nav/style.scss +1 -1
  21. package/src/components/expression-editor/style.scss +1 -1
  22. package/src/components/number-range-input/style.scss +1 -1
  23. package/src/components/progress-nodes/style.scss +3 -3
  24. package/src/components/rich-text-editor/style.scss +12 -12
  25. package/src/components/select/style.scss +20 -4
  26. package/src/components/tabs/style.scss +1 -1
  27. package/src/components/tree/style.scss +1 -1
package/dist/components/auto-complete/style2.css CHANGED
@@ -36,21 +36,22 @@
36
36
  cursor: pointer;
37
37
  margin: 2px 0;
38
38
  user-select: none;
39
+ color: var(--u-text-color-main);
39
40
  overflow: hidden;
40
41
  text-overflow: ellipsis;
41
42
  white-space: nowrap;
42
43
  }
43
44
  .u-auto-complete__option:hover {
44
- background-color: var(--u-nav-hover-bg);
45
- color: var(--u-nav-hover-color);
45
+ background-color: var(--u-auto-complete-option-hover-bg, var(--u-bg-color-hover));
46
+ color: var(--u-auto-complete-option-hover-color, var(--u-text-color-title));
46
47
  }
47
48
  .u-auto-complete__option.is-active {
48
- background-color: var(--u-nav-hover-bg);
49
- color: var(--u-nav-hover-color);
49
+ background-color: var(--u-auto-complete-option-hover-bg, var(--u-bg-color-hover));
50
+ color: var(--u-auto-complete-option-hover-color, var(--u-text-color-title));
50
51
  }
51
52
  .u-auto-complete__option.is-selected {
52
- background-color: var(--u-nav-active-bg);
53
- color: var(--u-nav-active-color);
53
+ background-color: var(--u-auto-complete-option-selected-bg, var(--u-color-primary-light-9));
54
+ color: var(--u-auto-complete-option-selected-color, var(--u-color-primary));
54
55
  }
55
56
  .u-auto-complete__ripple {
56
57
  background-color: var(--u-color-primary-light-7);
package/dist/components/breadcrumb/style2.css CHANGED
@@ -35,7 +35,7 @@
35
35
  .u-breadcrumb__separator {
36
36
  display: flex;
37
37
  align-items: center;
38
- margin: 0 var(--u-gap-base);
38
+ margin: 0 var(--u-gap-default);
39
39
  color: var(--u-text-color-placeholder);
40
40
  user-select: none;
41
41
  }
package/dist/components/card/style2.css CHANGED
@@ -82,7 +82,7 @@
82
82
  font-weight: bold;
83
83
  }
84
84
  .u-card__header {
85
- background-color: var(--u-header-bg-transparent);
85
+ background-color: var(--u-card-header-bg, transparent);
86
86
  color: var(--u-text-color-title);
87
87
  }
88
88
  .u-card__cover {
@@ -101,7 +101,7 @@
101
101
  transform: translateY(-50%);
102
102
  }
103
103
  .u-card__action {
104
- background-color: var(--u-action-bg-transparent);
104
+ background-color: var(--u-card-action-bg, transparent);
105
105
  }
106
106
  .u-card__action .u-button + .u-button {
107
107
  margin-left: var(--u-gap-default);
package/dist/components/condition-editor/style2.css CHANGED
@@ -82,14 +82,14 @@
82
82
  background-color: var(--u-color-primary-light-9);
83
83
  }
84
84
  .u-condition-editor__connector--and:hover {
85
- background-color: var(--u-color-primary-light-8);
85
+ background-color: var(--u-color-primary-light-7);
86
86
  }
87
87
  .u-condition-editor__connector--or {
88
- color: var(--u-color-warning-dark-2);
88
+ color: var(--u-color-warning-dark-1);
89
89
  background-color: var(--u-color-warning-light-9);
90
90
  }
91
91
  .u-condition-editor__connector--or:hover {
92
- background-color: var(--u-color-warning-light-8);
92
+ background-color: var(--u-color-warning-light-7);
93
93
  }
94
94
  .u-condition-editor__connector:focus-visible {
95
95
  box-shadow: var(--u-focus-ring);
@@ -210,7 +210,7 @@
210
210
  transition: background-color 0.15s ease, border-color 0.15s ease;
211
211
  }
212
212
  .u-condition-editor__value-chip:hover {
213
- background-color: var(--u-color-primary-light-8);
213
+ background-color: var(--u-color-primary-light-7);
214
214
  border-color: var(--u-color-primary-light-5);
215
215
  }
216
216
  .u-condition-editor__value-chip:focus-visible {
package/dist/components/contextmenu/style2.css CHANGED
@@ -92,12 +92,12 @@
92
92
  flex-wrap: nowrap;
93
93
  }
94
94
  .u-contextmenu__item:not(.is-disabled):not(.is-loading) > .u-contextmenu__item-content:hover {
95
- background-color: var(--u-nav-hover-bg);
96
- color: var(--u-nav-hover-color);
95
+ background-color: var(--u-contextmenu-item-hover-bg, var(--u-bg-color-hover));
96
+ color: var(--u-contextmenu-item-hover-color, var(--u-text-color-title));
97
97
  }
98
98
  .u-contextmenu .u-contextmenu__item.is-open:not(.is-disabled) > .u-contextmenu__item-content {
99
- background-color: var(--u-nav-hover-bg);
100
- color: var(--u-nav-hover-color);
99
+ background-color: var(--u-contextmenu-item-hover-bg, var(--u-bg-color-hover));
100
+ color: var(--u-contextmenu-item-hover-color, var(--u-text-color-title));
101
101
  }
102
102
  .u-contextmenu__icon-place {
103
103
  width: 1em;
@@ -146,7 +146,7 @@
146
146
  }
147
147
  .u-contextmenu--small__item-content {
148
148
  padding: 0 var(--u-gap-small);
149
- min-height: calc(var(--u-nav-height-small) - 8px);
149
+ min-height: var(--u-contextmenu-item-height-small, calc(var(--u-form-component-height-small) - 4px));
150
150
  border-radius: calc(var(--u-radius-small) + 1px);
151
151
  }
152
152
  .u-contextmenu--default {
@@ -154,7 +154,7 @@
154
154
  }
155
155
  .u-contextmenu--default__item-content {
156
156
  padding: 0 var(--u-gap-default);
157
- min-height: calc(var(--u-nav-height-default) - 8px);
157
+ min-height: var(--u-contextmenu-item-height-default, calc(var(--u-form-component-height-default) - 4px));
158
158
  border-radius: calc(var(--u-radius-default) + 1px);
159
159
  }
160
160
  .u-contextmenu--large {
@@ -162,6 +162,6 @@
162
162
  }
163
163
  .u-contextmenu--large__item-content {
164
164
  padding: 0 var(--u-gap-large);
165
- min-height: calc(var(--u-nav-height-large) - 8px);
165
+ min-height: var(--u-contextmenu-item-height-large, calc(var(--u-form-component-height-large) - 4px));
166
166
  border-radius: calc(var(--u-radius-large) + 1px);
167
167
  }
package/dist/components/dual-nav/style2.css CHANGED
@@ -75,7 +75,7 @@
75
75
  }
76
76
  .u-dual-nav__panel-title {
77
77
  margin: 0;
78
- font-size: var(--u-font-size-default);
78
+ font-size: var(--u-font-size-title-default);
79
79
  font-weight: 600;
80
80
  line-height: 1.4;
81
81
  color: var(--u-nav-strong-color);
package/dist/components/expression-editor/style2.css CHANGED
@@ -90,7 +90,7 @@
90
90
  }
91
91
  .u-expression-editor__chip:hover {
92
92
  color: var(--u-expression-editor-chip-color, var(--u-color-primary));
93
- background-color: var(--u-expression-editor-chip-bg, var(--u-color-primary-light-8));
93
+ background-color: var(--u-expression-editor-chip-bg, var(--u-color-primary-light-7));
94
94
  box-shadow: 0 1px 4px var(--u-shadow-color);
95
95
  }
96
96
  .u-expression-editor__chip:hover .u-expression-editor__chip-close {
package/dist/components/number-range-input/style2.css CHANGED
@@ -23,6 +23,6 @@
23
23
  }
24
24
  .u-number-range-input__separator {
25
25
  flex-shrink: 0;
26
- color: var(--u-text-color-secondary);
26
+ color: var(--u-text-color-second);
27
27
  line-height: 1;
28
28
  }
package/dist/components/progress-nodes/style2.css CHANGED
@@ -42,13 +42,13 @@
42
42
  color: inherit;
43
43
  flex: 0 0 auto;
44
44
  transition: background-color 0.2s, color 0.2s;
45
- border-radius: var(--u-radius-base);
45
+ border-radius: var(--u-radius-default);
46
46
  }
47
47
  .u-progress-nodes__item:hover .u-progress-nodes__dot {
48
48
  border-color: var(--u-text-color-second);
49
49
  }
50
50
  .u-progress-nodes__item:hover .u-progress-nodes__label {
51
- color: var(--u-text-color-primary);
51
+ color: var(--u-color-primary);
52
52
  }
53
53
  .u-progress-nodes__node {
54
54
  position: relative;
package/dist/components/rich-text-editor/style2.css CHANGED
@@ -19,7 +19,7 @@
19
19
  width: 100%;
20
20
  border: 1px solid var(--u-border-muted-color);
21
21
  border-radius: var(--u-radius-default);
22
- background-color: var(--u-color-bg);
22
+ background-color: var(--u-bg-color-top);
23
23
  transition: border-color 0.25s ease;
24
24
  display: flex;
25
25
  flex-direction: column;
@@ -48,7 +48,7 @@
48
48
  gap: 2px;
49
49
  padding: 6px 8px;
50
50
  border-bottom: 1px solid var(--u-border-color);
51
- background-color: var(--u-color-bg-muted);
51
+ background-color: var(--u-bg-color-middle);
52
52
  }
53
53
  .u-rich-text-editor__toolbar-btn {
54
54
  display: inline-flex;
@@ -59,16 +59,16 @@
59
59
  border: none;
60
60
  border-radius: 4px;
61
61
  background: transparent;
62
- color: var(--u-text-color);
62
+ color: var(--u-text-color-main);
63
63
  cursor: pointer;
64
64
  transition: all 0.15s ease;
65
65
  padding: 0;
66
66
  }
67
67
  .u-rich-text-editor__toolbar-btn:not(.is-disabled):hover {
68
- background-color: var(--u-color-hover);
68
+ background-color: var(--u-bg-color-hover);
69
69
  }
70
70
  .u-rich-text-editor__toolbar-btn.is-active {
71
- background-color: var(--u-color-primary-light);
71
+ background-color: var(--u-color-primary-light-9);
72
72
  color: var(--u-color-primary);
73
73
  }
74
74
  .u-rich-text-editor__toolbar-btn.is-disabled {
@@ -103,7 +103,7 @@
103
103
  border: 1px solid var(--u-border-muted-color);
104
104
  border-radius: 4px;
105
105
  background-color: transparent;
106
- color: var(--u-text-color);
106
+ color: var(--u-text-color-main);
107
107
  font-size: 13px;
108
108
  cursor: pointer;
109
109
  outline: none;
@@ -133,7 +133,7 @@
133
133
  outline: none;
134
134
  font-size: 14px;
135
135
  line-height: 1.6;
136
- color: var(--u-text-color);
136
+ color: var(--u-text-color-main);
137
137
  word-break: break-word;
138
138
  }
139
139
  .u-rich-text-editor__editable:focus {
@@ -223,7 +223,7 @@
223
223
  font-weight: 600;
224
224
  line-height: 1.4;
225
225
  margin: 10px 0 4px 0;
226
- color: var(--u-text-color-secondary);
226
+ color: var(--u-text-color-second);
227
227
  }
228
228
  .u-rte-h6:first-child {
229
229
  margin-top: 0;
@@ -248,7 +248,7 @@
248
248
  .u-rte-code {
249
249
  font-family: "Menlo", "Consolas", "Monaco", monospace;
250
250
  font-size: 0.9em;
251
- background-color: var(--u-color-bg-muted);
251
+ background-color: var(--u-bg-color-middle);
252
252
  padding: 2px 6px;
253
253
  border-radius: 3px;
254
254
  border: 1px solid var(--u-border-color);
@@ -277,8 +277,8 @@
277
277
  margin: 8px 0;
278
278
  padding: 8px 16px;
279
279
  border-left: 3px solid var(--u-color-primary);
280
- background-color: var(--u-color-bg-muted);
281
- color: var(--u-text-color-secondary);
280
+ background-color: var(--u-bg-color-middle);
281
+ color: var(--u-text-color-second);
282
282
  font-style: italic;
283
283
  }
284
284
 
@@ -286,7 +286,7 @@
286
286
  font-family: "Menlo", "Consolas", "Monaco", monospace;
287
287
  font-size: 13px;
288
288
  line-height: 1.6;
289
- background-color: var(--u-color-bg-muted);
289
+ background-color: var(--u-bg-color-middle);
290
290
  border: 1px solid var(--u-border-color);
291
291
  border-radius: 6px;
292
292
  padding: 12px 16px;
package/dist/components/select/style2.css CHANGED
@@ -63,13 +63,13 @@
63
63
  white-space: nowrap;
64
64
  }
65
65
  .u-select__option:hover {
66
- background-color: var(--u-nav-hover-bg);
67
- color: var(--u-nav-hover-color);
66
+ background-color: var(--u-select-option-hover-bg, var(--u-bg-color-hover));
67
+ color: var(--u-select-option-hover-color, var(--u-text-color-title));
68
68
  }
69
69
  .u-select__option.is-selected {
70
70
  position: relative;
71
- background-color: var(--u-nav-active-bg);
72
- color: var(--u-nav-active-color);
71
+ background-color: var(--u-select-option-selected-bg, var(--u-color-primary-light-9));
72
+ color: var(--u-select-option-selected-color, var(--u-color-primary));
73
73
  font-weight: 600;
74
74
  }
75
75
  .u-select__option.is-selected::before {
package/dist/components/tabs/style2.css CHANGED
@@ -137,7 +137,7 @@
137
137
  padding: 0;
138
138
  border: none;
139
139
  background: transparent;
140
- color: var(--u-text-color-secondary);
140
+ color: var(--u-text-color-second);
141
141
  cursor: pointer;
142
142
  border-radius: var(--u-radius-default);
143
143
  font-size: 12px;
package/dist/components/tree/style2.css CHANGED
@@ -151,5 +151,5 @@
151
151
  .u-tree__empty {
152
152
  text-align: center;
153
153
  padding: var(--u-gap-default) 0;
154
- color: var(--u-text-color-secondary);
154
+ color: var(--u-text-color-second);
155
155
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@veltra/desktop",
3
- "version": "1.7.3",
3
+ "version": "1.7.4",
4
4
  "homepage": "https://github.com/cabinet-fe/ultra-ui#readme",
5
5
  "bugs": {
6
6
  "url": "https://github.com/cabinet-fe/ultra-ui/issues"
@@ -80,12 +80,12 @@
80
80
  "peerDependencies": {
81
81
  "@cat-kit/core": ">=1.2.1",
82
82
  "@cat-kit/fe": ">=1.2.1",
83
- "@veltra/compositions": "^1.7.3",
84
- "@veltra/directives": "^1.7.3",
83
+ "@veltra/compositions": "^1.7.4",
84
+ "@veltra/directives": "^1.7.4",
85
85
  "@veltra/icons": "^1.5.0",
86
- "@veltra/sheet-core": "^2.5.3",
87
- "@veltra/styles": "^1.7.3",
88
- "@veltra/utils": "^1.7.3",
86
+ "@veltra/sheet-core": "^2.5.4",
87
+ "@veltra/styles": "^1.7.4",
88
+ "@veltra/utils": "^1.7.4",
89
89
  "vue": ">=3.5.42"
90
90
  },
91
91
  "peerDependenciesMeta": {
package/src/components/auto-complete/style.scss CHANGED
@@ -29,21 +29,46 @@ $root-name: auto-complete;
29
29
  cursor: pointer;
30
30
  margin: 2px 0;
31
31
  user-select: none;
32
+ color: fn.use-var(text-color, main);
32
33
  @include m.ellipsis;
33
34
 
34
35
  &:hover {
35
- background-color: var(--u-nav-hover-bg);
36
- color: var(--u-nav-hover-color);
36
+ background-color: fn.component-var(
37
+ auto-complete,
38
+ option-hover-bg,
39
+ fn.use-var(bg-color, hover)
40
+ );
41
+ color: fn.component-var(
42
+ auto-complete,
43
+ option-hover-color,
44
+ fn.use-var(text-color, title)
45
+ );
37
46
  }
38
47
 
39
48
  @include m.is(active) {
40
- background-color: var(--u-nav-hover-bg);
41
- color: var(--u-nav-hover-color);
49
+ background-color: fn.component-var(
50
+ auto-complete,
51
+ option-hover-bg,
52
+ fn.use-var(bg-color, hover)
53
+ );
54
+ color: fn.component-var(
55
+ auto-complete,
56
+ option-hover-color,
57
+ fn.use-var(text-color, title)
58
+ );
42
59
  }
43
60
 
44
61
  @include m.is(selected) {
45
- background-color: var(--u-nav-active-bg);
46
- color: var(--u-nav-active-color);
62
+ background-color: fn.component-var(
63
+ auto-complete,
64
+ option-selected-bg,
65
+ fn.use-var(color, primary, light-9)
66
+ );
67
+ color: fn.component-var(
68
+ auto-complete,
69
+ option-selected-color,
70
+ fn.use-var(color, primary)
71
+ );
47
72
  }
48
73
  }
49
74
 
package/src/components/breadcrumb/style.scss CHANGED
@@ -25,7 +25,7 @@ $root-name: breadcrumb;
25
25
  @include m.e(separator) {
26
26
  display: flex;
27
27
  align-items: center;
28
- margin: 0 fn.use-var(gap, base);
28
+ margin: 0 fn.use-var(gap, default);
29
29
  color: fn.use-var(text-color, placeholder);
30
30
  user-select: none;
31
31
  }
package/src/components/card/style.scss CHANGED
@@ -39,7 +39,7 @@ $root-name: card;
39
39
  }
40
40
 
41
41
  @include m.e(header) {
42
- background-color: fn.use-var(header-bg, transparent);
42
+ background-color: fn.component-var(card, header-bg, transparent);
43
43
  color: fn.use-var(text-color, title);
44
44
  }
45
45
 
@@ -65,7 +65,7 @@ $root-name: card;
65
65
  }
66
66
 
67
67
  @include m.e(action) {
68
- background-color: fn.use-var(action-bg, transparent);
68
+ background-color: fn.component-var(card, action-bg, transparent);
69
69
 
70
70
  #{fn.bem(button)} + #{fn.bem(button)} {
71
71
  margin-left: fn.use-var(gap, default);
package/src/components/condition-editor/style.scss CHANGED
@@ -84,16 +84,16 @@ $connector-width: 56px;
84
84
  background-color: fn.use-var(color, primary, light-9);
85
85
 
86
86
  &:hover {
87
- background-color: fn.use-var(color, primary, light-8);
87
+ background-color: fn.use-var(color, primary, light-7);
88
88
  }
89
89
  }
90
90
 
91
91
  @include m.m(or) {
92
- color: fn.use-var(color, warning, dark-2);
92
+ color: fn.use-var(color, warning, dark-1);
93
93
  background-color: fn.use-var(color, warning, light-9);
94
94
 
95
95
  &:hover {
96
- background-color: fn.use-var(color, warning, light-8);
96
+ background-color: fn.use-var(color, warning, light-7);
97
97
  }
98
98
  }
99
99
 
@@ -243,7 +243,7 @@ $connector-width: 56px;
243
243
  border-color 0.15s ease;
244
244
 
245
245
  &:hover {
246
- background-color: fn.use-var(color, primary, light-8);
246
+ background-color: fn.use-var(color, primary, light-7);
247
247
  border-color: fn.use-var(color, primary, light-5);
248
248
  }
249
249
 
package/src/components/contextmenu/style.scss CHANGED
@@ -92,15 +92,31 @@ $arrow-size: 12px;
92
92
 
93
93
  #{$b}__item:not(.is-disabled):not(.is-loading) > & {
94
94
  &:hover {
95
- background-color: var(--u-nav-hover-bg);
96
- color: var(--u-nav-hover-color);
95
+ background-color: fn.component-var(
96
+ contextmenu,
97
+ item-hover-bg,
98
+ fn.use-var(bg-color, hover)
99
+ );
100
+ color: fn.component-var(
101
+ contextmenu,
102
+ item-hover-color,
103
+ fn.use-var(text-color, title)
104
+ );
97
105
  }
98
106
  }
99
107
  }
100
108
 
101
109
  #{$b}__item.is-open:not(.is-disabled) > #{$b}__item-content {
102
- background-color: var(--u-nav-hover-bg);
103
- color: var(--u-nav-hover-color);
110
+ background-color: fn.component-var(
111
+ contextmenu,
112
+ item-hover-bg,
113
+ fn.use-var(bg-color, hover)
114
+ );
115
+ color: fn.component-var(
116
+ contextmenu,
117
+ item-hover-color,
118
+ fn.use-var(text-color, title)
119
+ );
104
120
  }
105
121
 
106
122
  @include m.e(icon-place) {
@@ -142,7 +158,11 @@ $arrow-size: 12px;
142
158
 
143
159
  @include m.e(item-content) {
144
160
  padding: 0 fn.use-var(gap, $size);
145
- min-height: calc(var(--u-nav-height-#{$size}) - 8px);
161
+ min-height: fn.component-var(
162
+ contextmenu,
163
+ item-height-#{$size},
164
+ calc(fn.use-var(form-component-height, $size) - 4px)
165
+ );
146
166
  border-radius: calc(fn.use-var(radius, $size) + 1px);
147
167
  }
148
168
  }
package/src/components/dual-nav/style.scss CHANGED
@@ -73,7 +73,7 @@ $root-name: dual-nav;
73
73
 
74
74
  @include m.e(panel-title) {
75
75
  margin: 0;
76
- font-size: fn.use-var(font-size, default);
76
+ font-size: fn.use-var(font-size-title, default);
77
77
  font-weight: 600;
78
78
  line-height: 1.4;
79
79
  color: var(--u-nav-strong-color);
package/src/components/expression-editor/style.scss CHANGED
@@ -102,7 +102,7 @@ $root-name: expression-editor;
102
102
  background-color: fn.component-var(
103
103
  expression-editor,
104
104
  chip-bg,
105
- fn.use-var(color, primary, light-8)
105
+ fn.use-var(color, primary, light-7)
106
106
  );
107
107
  box-shadow: 0 1px 4px fn.use-var(shadow, color);
108
108
 
package/src/components/number-range-input/style.scss CHANGED
@@ -9,7 +9,7 @@
9
9
 
10
10
  @include m.e(separator) {
11
11
  flex-shrink: 0;
12
- color: fn.use-var(text-color, secondary);
12
+ color: fn.use-var(text-color, second);
13
13
  line-height: 1;
14
14
  }
15
15
  }
package/src/components/progress-nodes/style.scss CHANGED
@@ -39,7 +39,7 @@ $root-name: progress-nodes;
39
39
  transition:
40
40
  background-color 0.2s,
41
41
  color 0.2s;
42
- border-radius: fn.use-var(radius, base);
42
+ border-radius: fn.use-var(radius, default);
43
43
 
44
44
  &:hover {
45
45
  @include m.bem($root-name, dot) {
@@ -47,7 +47,7 @@ $root-name: progress-nodes;
47
47
  }
48
48
 
49
49
  @include m.bem($root-name, label) {
50
- color: fn.use-var(text-color, primary);
50
+ color: fn.use-var(color, primary);
51
51
  }
52
52
  }
53
53
  }
@@ -64,7 +64,7 @@ $root-name: progress-nodes;
64
64
  @include m.e(link) {
65
65
  position: absolute;
66
66
  border-style: dashed;
67
- border-color: fn.use-var(text, color, placeholder);
67
+ border-color: fn.use-var(text-color, placeholder);
68
68
  }
69
69
 
70
70
  // 节点圆点
package/src/components/rich-text-editor/style.scss CHANGED
@@ -8,7 +8,7 @@ $root-name: rich-text-editor;
8
8
  width: 100%;
9
9
  border: 1px solid fn.use-var(border, muted-color);
10
10
  border-radius: fn.use-var(radius, default);
11
- background-color: fn.use-var(color, bg);
11
+ background-color: fn.use-var(bg-color, top);
12
12
  transition: border-color 0.25s ease;
13
13
  display: flex;
14
14
  flex-direction: column;
@@ -38,7 +38,7 @@ $root-name: rich-text-editor;
38
38
  gap: 2px;
39
39
  padding: 6px 8px;
40
40
  border-bottom: 1px solid fn.use-var(border-color);
41
- background-color: fn.use-var(color, bg, muted);
41
+ background-color: fn.use-var(bg-color, middle);
42
42
  }
43
43
 
44
44
  @include m.e(toolbar-btn) {
@@ -50,19 +50,19 @@ $root-name: rich-text-editor;
50
50
  border: none;
51
51
  border-radius: 4px;
52
52
  background: transparent;
53
- color: fn.use-var(text-color);
53
+ color: fn.use-var(text-color, main);
54
54
  cursor: pointer;
55
55
  transition: all 0.15s ease;
56
56
  padding: 0;
57
57
 
58
58
  @include m.is-not(disabled) {
59
59
  &:hover {
60
- background-color: fn.use-var(color, hover);
60
+ background-color: fn.use-var(bg-color, hover);
61
61
  }
62
62
  }
63
63
 
64
64
  &.is-active {
65
- background-color: fn.use-var(color, primary, light);
65
+ background-color: fn.use-var(color, primary, light-9);
66
66
  color: fn.use-var(color, primary);
67
67
  }
68
68
 
@@ -104,7 +104,7 @@ $root-name: rich-text-editor;
104
104
  border: 1px solid fn.use-var(border, muted-color);
105
105
  border-radius: 4px;
106
106
  background-color: transparent;
107
- color: fn.use-var(text-color);
107
+ color: fn.use-var(text-color, main);
108
108
  font-size: 13px;
109
109
  cursor: pointer;
110
110
  outline: none;
@@ -146,7 +146,7 @@ $root-name: rich-text-editor;
146
146
  outline: none;
147
147
  font-size: 14px;
148
148
  line-height: 1.6;
149
- color: fn.use-var(text-color);
149
+ color: fn.use-var(text-color, main);
150
150
  word-break: break-word;
151
151
 
152
152
  &:focus {
@@ -259,7 +259,7 @@ $root-name: rich-text-editor;
259
259
  font-weight: 600;
260
260
  line-height: 1.4;
261
261
  margin: 10px 0 4px 0;
262
- color: fn.use-var(text-color, secondary);
262
+ color: fn.use-var(text-color, second);
263
263
 
264
264
  &:first-child {
265
265
  margin-top: 0;
@@ -286,7 +286,7 @@ $root-name: rich-text-editor;
286
286
  .u-rte-code {
287
287
  font-family: 'Menlo', 'Consolas', 'Monaco', monospace;
288
288
  font-size: 0.9em;
289
- background-color: fn.use-var(color, bg, muted);
289
+ background-color: fn.use-var(bg-color, middle);
290
290
  padding: 2px 6px;
291
291
  border-radius: 3px;
292
292
  border: 1px solid fn.use-var(border-color);
@@ -318,8 +318,8 @@ $root-name: rich-text-editor;
318
318
  margin: 8px 0;
319
319
  padding: 8px 16px;
320
320
  border-left: 3px solid fn.use-var(color, primary);
321
- background-color: fn.use-var(color, bg, muted);
322
- color: fn.use-var(text-color, secondary);
321
+ background-color: fn.use-var(bg-color, middle);
322
+ color: fn.use-var(text-color, second);
323
323
  font-style: italic;
324
324
  }
325
325
 
@@ -328,7 +328,7 @@ $root-name: rich-text-editor;
328
328
  font-family: 'Menlo', 'Consolas', 'Monaco', monospace;
329
329
  font-size: 13px;
330
330
  line-height: 1.6;
331
- background-color: fn.use-var(color, bg, muted);
331
+ background-color: fn.use-var(bg-color, middle);
332
332
  border: 1px solid fn.use-var(border-color);
333
333
  border-radius: 6px;
334
334
  padding: 12px 16px;
package/src/components/select/style.scss CHANGED
@@ -63,14 +63,30 @@ $root-name: select;
63
63
  @include m.ellipsis;
64
64
 
65
65
  &:hover {
66
- background-color: var(--u-nav-hover-bg);
67
- color: var(--u-nav-hover-color);
66
+ background-color: fn.component-var(
67
+ select,
68
+ option-hover-bg,
69
+ fn.use-var(bg-color, hover)
70
+ );
71
+ color: fn.component-var(
72
+ select,
73
+ option-hover-color,
74
+ fn.use-var(text-color, title)
75
+ );
68
76
  }
69
77
 
70
78
  @include m.is(selected) {
71
79
  position: relative;
72
- background-color: var(--u-nav-active-bg);
73
- color: var(--u-nav-active-color);
80
+ background-color: fn.component-var(
81
+ select,
82
+ option-selected-bg,
83
+ fn.use-var(color, primary, light-9)
84
+ );
85
+ color: fn.component-var(
86
+ select,
87
+ option-selected-color,
88
+ fn.use-var(color, primary)
89
+ );
74
90
  font-weight: 600;
75
91
 
76
92
  &::before {
package/src/components/tabs/style.scss CHANGED
@@ -159,7 +159,7 @@ $active-shadow: fn.use-var(shadow, sm);
159
159
  padding: 0;
160
160
  border: none;
161
161
  background: transparent;
162
- color: fn.use-var(text-color, secondary);
162
+ color: fn.use-var(text-color, second);
163
163
  cursor: pointer;
164
164
  border-radius: fn.use-var(radius, default);
165
165
  font-size: 12px;
package/src/components/tree/style.scss CHANGED
@@ -168,6 +168,6 @@ $indent-width: 20px;
168
168
  @include m.e(empty) {
169
169
  text-align: center;
170
170
  padding: fn.use-var(gap, default) 0;
171
- color: fn.use-var(text-color, secondary);
171
+ color: fn.use-var(text-color, second);
172
172
  }
173
173
  }