@opensumi/ide-design 2.27.3-rc-1711449811.0 → 2.27.3-rc-1711676863.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 (7) hide show
  1. package/lib/browser/override/override.module.less +2 -2
  2. package/lib/browser/style/design.module.less +35 -37
  3. package/lib/browser/style/global.less +32 -16
  4. package/package.json +6 -6
  5. package/src/browser/override/override.module.less +2 -2
  6. package/src/browser/style/design.module.less +35 -37
  7. package/src/browser/style/global.less +32 -16
package/lib/browser/override/override.module.less CHANGED
@@ -27,7 +27,7 @@
27
27
  background-size: 14px;
28
28
  background-position: 2px;
29
29
  filter: grayscale(1);
30
- color: var(--design-icon-color);
30
+ color: var(--design-icon-foreground);
31
31
  }
32
32
  }
33
33
 
@@ -81,7 +81,7 @@
81
81
  align-items: center;
82
82
 
83
83
  :global(.kt-icon) {
84
- color: var(--design-text-color-normal);
84
+ color: var(--design-text-foreground);
85
85
  }
86
86
  }
87
87
 
package/lib/browser/style/design.module.less CHANGED
@@ -18,8 +18,8 @@
18
18
  .design-quickopen_list {
19
19
  border-radius: 0 0 8px 8px !important;
20
20
  border: 0 none !important;
21
- box-shadow: 0px 9px 28px 8px var(--design-boxShadow-color1), 0px 3px 6px -4px var(--design-boxShadow-color2),
22
- 0px 6px 16px 0px var(--design-boxShadow-color3) !important;
21
+ box-shadow: 0px 9px 28px 8px var(--design-boxShadow-primary), 0px 3px 6px -4px var(--design-boxShadow-secondary),
22
+ 0px 6px 16px 0px var(--design-boxShadow-tertiary) !important;
23
23
  }
24
24
  }
25
25
 
@@ -27,15 +27,15 @@
27
27
  border-radius: 8px;
28
28
  background-color: var(--kt-modal-background);
29
29
  border: 0 none !important;
30
- box-shadow: 0px 9px 28px 8px var(--design-boxShadow-color1), 0px 3px 6px -4px var(--design-boxShadow-color2),
31
- 0px 6px 16px 0px var(--design-boxShadow-color3) !important;
30
+ box-shadow: 0px 9px 28px 8px var(--design-boxShadow-primary), 0px 3px 6px -4px var(--design-boxShadow-secondary),
31
+ 0px 6px 16px 0px var(--design-boxShadow-tertiary) !important;
32
32
  }
33
33
 
34
34
  .design-navigation_menu {
35
35
  border-radius: 8px;
36
36
  border: 0 none !important;
37
- box-shadow: 0px 9px 28px 8px var(--design-boxShadow-color1), 0px 3px 6px -4px var(--design-boxShadow-color2),
38
- 0px 6px 16px 0px var(--design-boxShadow-color3) !important;
37
+ box-shadow: 0px 9px 28px 8px var(--design-boxShadow-primary), 0px 3px 6px -4px var(--design-boxShadow-secondary),
38
+ 0px 6px 16px 0px var(--design-boxShadow-tertiary) !important;
39
39
 
40
40
  .design-navigation_menu_item {
41
41
  :global(.kaitian-icon) {
@@ -47,9 +47,10 @@
47
47
  .design-kt_workbench_editor {
48
48
  height: 100%;
49
49
  width: 100%;
50
- background-color: var(--design-container-background);
50
+ background: none;
51
51
  border-top-left-radius: 12px;
52
52
  border-top-right-radius: 12px;
53
+ border-top: none;
53
54
  overflow: hidden;
54
55
  }
55
56
 
@@ -91,11 +92,11 @@
91
92
  width: 22px;
92
93
  height: 22px;
93
94
  border-radius: 4px;
94
- color: var(--design-text-color-normal);
95
+ color: var(--design-text-foreground);
95
96
 
96
97
  &:hover {
97
- background-color: var(--design-block-background-common);
98
- color: var(--design-text-color-hover);
98
+ background-color: var(--design-block-hoverBackground);
99
+ color: var(--design-text-hoverForeground);
99
100
  }
100
101
  }
101
102
 
@@ -200,11 +201,11 @@
200
201
  height: 22px;
201
202
  line-height: 22px;
202
203
  font-size: 14px;
203
- color: var(--design-text-color-normal);
204
+ color: var(--design-text-foreground);
204
205
  margin-left: 2px;
205
206
 
206
207
  &:not(.disabled):hover {
207
- color: var(--design-text-color-hover);
208
+ color: var(--design-text-hoverForeground);
208
209
  opacity: 1;
209
210
  }
210
211
  }
@@ -222,16 +223,16 @@
222
223
  &:hover {
223
224
  border-radius: 4px;
224
225
  background-color: var(--kt-icon-hoverBackground);
225
- color: var(--design-text-color-hover);
226
+ color: var(--design-text-hoverForeground);
226
227
  }
227
228
  }
228
229
 
229
230
  button.design-btnAction {
230
231
  border-radius: 4px;
231
- color: var(--design-text-color-normal);
232
+ color: var(--design-text-foreground);
232
233
 
233
234
  &:hover {
234
- color: var(--design-text-color-hover);
235
+ color: var(--design-text-hoverForeground);
235
236
  background-color: var(--kt-icon-hoverBackground);
236
237
  }
237
238
 
@@ -261,7 +262,7 @@
261
262
  border-bottom: 0 none;
262
263
 
263
264
  span.design-navigation-part {
264
- color: var(--design-text-color-other);
265
+ color: var(--design-text-placeholderForeground);
265
266
 
266
267
  > span:first-child {
267
268
  padding-right: 0;
@@ -276,7 +277,7 @@
276
277
  }
277
278
 
278
279
  span.design-navigation_icon {
279
- color: var(--design-text-color-normal);
280
+ color: var(--design-text-foreground);
280
281
  }
281
282
  }
282
283
 
@@ -296,10 +297,10 @@ div[class*='design-editor_tab_block_container__'] {
296
297
  }
297
298
 
298
299
  .design-close_tab {
299
- color: var(--design-icon-color);
300
+ color: var(--design-icon-foreground);
300
301
 
301
302
  &:hover {
302
- color: var(--design-text-color-normal);
303
+ color: var(--design-text-foreground);
303
304
  }
304
305
  }
305
306
  }
@@ -353,10 +354,10 @@ div[class*='design-editor_tab_block_container__'] {
353
354
  font-size: 14px;
354
355
  width: 22px;
355
356
  height: 22px;
356
- color: var(--design-text-color-normal);
357
+ color: var(--design-text-foreground);
357
358
 
358
359
  &:not(.disabled):hover {
359
- color: var(--design-text-color-hover);
360
+ color: var(--design-text-hoverForeground);
360
361
  }
361
362
  }
362
363
 
@@ -367,7 +368,7 @@ div[class*='design-editor_tab_block_container__'] {
367
368
  &:hover {
368
369
  border-radius: 4px;
369
370
  background-color: var(--kt-icon-hoverBackground);
370
- color: var(--design-text-color-hover);
371
+ color: var(--design-text-hoverForeground);
371
372
  }
372
373
  }
373
374
  }
@@ -404,7 +405,7 @@ div[class*='design-editor_tab_block_container__'] {
404
405
  max-width: 240px;
405
406
 
406
407
  :global(.kt-icon) {
407
- color: var(--design-input-color);
408
+ color: var(--design-input-foreground);
408
409
  }
409
410
  }
410
411
  }
@@ -442,7 +443,7 @@ div[class*='design-editor_tab_block_container__'] {
442
443
 
443
444
  .design-tab_close_icon {
444
445
  opacity: 1;
445
- color: var(--design-text-color-normal);
446
+ color: var(--design-text-foreground);
446
447
  display: flex;
447
448
  width: 22px;
448
449
  height: 22px;
@@ -454,7 +455,7 @@ div[class*='design-editor_tab_block_container__'] {
454
455
  }
455
456
 
456
457
  &:hover {
457
- color: var(--design-text-color-hover);
458
+ color: var(--design-text-hoverForeground);
458
459
  }
459
460
  }
460
461
  }
@@ -472,7 +473,7 @@ div[class*='design-editor_tab_block_container__'] {
472
473
  font-size: 16px;
473
474
 
474
475
  &:hover {
475
- color: var(--design-text-color-hover);
476
+ color: var(--design-text-hoverForeground);
476
477
  background-color: var(--kt-icon-hoverBackground);
477
478
  }
478
479
  }
@@ -512,10 +513,6 @@ div[class*='design-editor_tab_block_container__'] {
512
513
  overflow: hidden;
513
514
  margin-right: 1px;
514
515
 
515
- .design-tab_bar {
516
- padding-top: 10px;
517
- }
518
-
519
516
  .design-tab_panel {
520
517
  border-right: none;
521
518
  }
@@ -569,14 +566,14 @@ div[class*='design-editor_tab_block_container__'] {
569
566
  justify-content: center;
570
567
  margin-left: 0;
571
568
  box-sizing: border-box;
572
- color: var(--design-text-color-normal);
569
+ color: var(--design-text-foreground);
573
570
 
574
571
  &::before {
575
572
  font-size: 14px;
576
573
  }
577
574
 
578
575
  &:hover {
579
- color: var(--design-text-color-hover);
576
+ color: var(--design-text-hoverForeground);
580
577
  background-color: var(--activityBar-activeBorder);
581
578
  border-radius: 4px;
582
579
  opacity: 1;
@@ -593,24 +590,24 @@ div[class*='design-editor_tab_block_container__'] {
593
590
  }
594
591
 
595
592
  .design-titlebar {
596
- color: var(--design-text-color-common);
593
+ color: var(--design-title-foreground);
597
594
 
598
595
  h1 {
599
- color: var(--design-text-color-common);
596
+ color: var(--design-title-foreground);
600
597
  }
601
598
  }
602
599
 
603
600
  .design-expansion_toggle {
604
- color: var(--design-text-color-other);
601
+ color: var(--design-text-placeholderForeground);
605
602
  }
606
603
 
607
604
  div[class*='mod_selected___'] {
608
605
  .design-opened_editor_node_overflow_wrap {
609
- color: var(--design-text-color-highlight) !important;
606
+ color: var(--design-text-highlightForeground) !important;
610
607
  }
611
608
 
612
609
  .design-expansion_toggle {
613
- color: var(--design-text-color-highlight) !important;
610
+ color: var(--design-text-highlightForeground) !important;
614
611
  }
615
612
  }
616
613
 
@@ -692,6 +689,7 @@ div[class*='design-editor_tab_block_container__'] {
692
689
 
693
690
  .design-left_tab_bar,
694
691
  .design-right_tab_bar {
692
+ padding-top: 10px;
695
693
  border-right: none;
696
694
  border-top: none;
697
695
  width: 48px;
package/lib/browser/style/global.less CHANGED
@@ -15,6 +15,22 @@
15
15
  border-top: 0;
16
16
  }
17
17
 
18
+ #top {
19
+ margin-bottom: 1px;
20
+ #opensumi-menubar {
21
+ border-radius: 12px;
22
+ overflow: hidden;
23
+ }
24
+ }
25
+
26
+ #statusbar {
27
+ margin-top: 1px;
28
+ #opensumi-statusbar {
29
+ border-radius: 12px;
30
+ overflow: hidden;
31
+ }
32
+ }
33
+
18
34
  .kt-menu {
19
35
  &::-webkit-scrollbar {
20
36
  width: 4px;
@@ -30,8 +46,8 @@
30
46
  backdrop-filter: saturate(150%) blur(20px) !important;
31
47
  -webkit-backdrop-filter: saturate(150%) blur(20px) !important;
32
48
  border: 0 none !important;
33
- box-shadow: 0px 9px 28px 8px var(--design-boxShadow-color1), 0px 3px 6px -4px var(--design-boxShadow-color2),
34
- 0px 6px 16px 0px var(--design-boxShadow-color3) !important;
49
+ box-shadow: 0px 9px 28px 8px var(--design-boxShadow-primary), 0px 3px 6px -4px var(--design-boxShadow-secondary),
50
+ 0px 6px 16px 0px var(--design-boxShadow-tertiary) !important;
35
51
  border-radius: 8px !important;
36
52
  margin-left: 2px;
37
53
 
@@ -46,8 +62,8 @@
46
62
  backdrop-filter: saturate(150%) blur(20px) !important;
47
63
  -webkit-backdrop-filter: saturate(150%) blur(20px) !important;
48
64
  border: 0 none !important;
49
- box-shadow: 0px 9px 28px 8px var(--design-boxShadow-color1), 0px 3px 6px -4px var(--design-boxShadow-color2),
50
- 0px 6px 16px 0px var(--design-boxShadow-color3) !important;
65
+ box-shadow: 0px 9px 28px 8px var(--design-boxShadow-primary), 0px 3px 6px -4px var(--design-boxShadow-secondary),
66
+ 0px 6px 16px 0px var(--design-boxShadow-tertiary) !important;
51
67
  border-radius: 8px !important;
52
68
  min-width: initial;
53
69
  padding: 4px 0 !important;
@@ -82,8 +98,8 @@
82
98
  }
83
99
 
84
100
  .kt-popover-content {
85
- box-shadow: 0px 9px 28px 8px var(--design-boxShadow-color1), 0px 3px 6px -4px var(--design-boxShadow-color2),
86
- 0px 6px 16px 0px var(--design-boxShadow-color3);
101
+ box-shadow: 0px 9px 28px 8px var(--design-boxShadow-primary), 0px 3px 6px -4px var(--design-boxShadow-secondary),
102
+ 0px 6px 16px 0px var(--design-boxShadow-tertiary);
87
103
  padding: 5px 8px;
88
104
  border-radius: 6px;
89
105
  line-height: 18px;
@@ -117,9 +133,9 @@ html {
117
133
 
118
134
  .monaco-hover {
119
135
  background-color: var(--kt-modal-background) !important;
120
- border: 0 none !important;
121
- box-shadow: 0px 9px 28px 8px var(--design-boxShadow-color1), 0px 3px 6px -4px var(--design-boxShadow-color2),
122
- 0px 6px 16px 0px var(--design-boxShadow-color3) !important;
136
+ border-color: transparent;
137
+ box-shadow: 0px 9px 28px 8px var(--design-boxShadow-primary), 0px 3px 6px -4px var(--design-boxShadow-secondary),
138
+ 0px 6px 16px 0px var(--design-boxShadow-tertiary) !important;
123
139
  border-radius: 8px !important;
124
140
  }
125
141
 
@@ -172,8 +188,8 @@ html {
172
188
  .ant-modal-body {
173
189
  border-radius: 8px;
174
190
  border: 0 none !important;
175
- box-shadow: 0px 9px 28px 8px var(--design-boxShadow-color1), 0px 3px 6px -4px var(--design-boxShadow-color2),
176
- 0px 6px 16px 0px var(--design-boxShadow-color3) !important;
191
+ box-shadow: 0px 9px 28px 8px var(--design-boxShadow-primary), 0px 3px 6px -4px var(--design-boxShadow-secondary),
192
+ 0px 6px 16px 0px var(--design-boxShadow-tertiary) !important;
177
193
  }
178
194
 
179
195
  .kt-dialog-buttonWrap button {
@@ -225,8 +241,8 @@ html {
225
241
 
226
242
  #opensumi-quickpick {
227
243
  border: 0 none !important;
228
- box-shadow: 0px 9px 28px 8px var(--design-boxShadow-color1), 0px 3px 6px -4px var(--design-boxShadow-color2),
229
- 0px 6px 16px 0px var(--design-boxShadow-color3) !important;
244
+ box-shadow: 0px 9px 28px 8px var(--design-boxShadow-primary), 0px 3px 6px -4px var(--design-boxShadow-secondary),
245
+ 0px 6px 16px 0px var(--design-boxShadow-tertiary) !important;
230
246
  border-radius: 8px 8px 0 0 !important;
231
247
  padding: 4px 0;
232
248
  }
@@ -243,14 +259,14 @@ html {
243
259
 
244
260
  .kt-select-container {
245
261
  .kt-select-value > span {
246
- color: var(--design-text-color-normal);
262
+ color: var(--design-text-foreground);
247
263
  }
248
264
 
249
265
  .kt-select-options {
250
266
  padding: 4px 0;
251
267
  border-radius: 8px;
252
- box-shadow: 0px 9px 28px 8px var(--design-boxShadow-color1), 0px 3px 6px -4px var(--design-boxShadow-color2),
253
- 0px 6px 16px 0px var(--design-boxShadow-color3);
268
+ box-shadow: 0px 9px 28px 8px var(--design-boxShadow-primary), 0px 3px 6px -4px var(--design-boxShadow-secondary),
269
+ 0px 6px 16px 0px var(--design-boxShadow-tertiary);
254
270
 
255
271
  > div {
256
272
  line-height: 26px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opensumi/ide-design",
3
- "version": "2.27.3-rc-1711449811.0",
3
+ "version": "2.27.3-rc-1711676863.0",
4
4
  "files": [
5
5
  "lib",
6
6
  "src"
@@ -19,12 +19,12 @@
19
19
  "url": "git@github.com:opensumi/core.git"
20
20
  },
21
21
  "dependencies": {
22
- "@opensumi/ide-core-common": "2.27.3-rc-1711449811.0",
23
- "@opensumi/ide-core-node": "2.27.3-rc-1711449811.0"
22
+ "@opensumi/ide-core-common": "2.27.3-rc-1711676863.0",
23
+ "@opensumi/ide-core-node": "2.27.3-rc-1711676863.0"
24
24
  },
25
25
  "devDependencies": {
26
- "@opensumi/ide-core-browser": "2.27.3-rc-1711449811.0",
27
- "@opensumi/ide-dev-tool": "2.27.3-rc-1711449811.0"
26
+ "@opensumi/ide-core-browser": "2.27.3-rc-1711676863.0",
27
+ "@opensumi/ide-dev-tool": "2.27.3-rc-1711676863.0"
28
28
  },
29
- "gitHead": "a752b644d9ae99c64f8b95b3b41fd6552b0629a1"
29
+ "gitHead": "a7da93b23f18afcecd8d41e83a9f304ed27f0818"
30
30
  }
package/src/browser/override/override.module.less CHANGED
@@ -27,7 +27,7 @@
27
27
  background-size: 14px;
28
28
  background-position: 2px;
29
29
  filter: grayscale(1);
30
- color: var(--design-icon-color);
30
+ color: var(--design-icon-foreground);
31
31
  }
32
32
  }
33
33
 
@@ -81,7 +81,7 @@
81
81
  align-items: center;
82
82
 
83
83
  :global(.kt-icon) {
84
- color: var(--design-text-color-normal);
84
+ color: var(--design-text-foreground);
85
85
  }
86
86
  }
87
87
 
package/src/browser/style/design.module.less CHANGED
@@ -18,8 +18,8 @@
18
18
  .design-quickopen_list {
19
19
  border-radius: 0 0 8px 8px !important;
20
20
  border: 0 none !important;
21
- box-shadow: 0px 9px 28px 8px var(--design-boxShadow-color1), 0px 3px 6px -4px var(--design-boxShadow-color2),
22
- 0px 6px 16px 0px var(--design-boxShadow-color3) !important;
21
+ box-shadow: 0px 9px 28px 8px var(--design-boxShadow-primary), 0px 3px 6px -4px var(--design-boxShadow-secondary),
22
+ 0px 6px 16px 0px var(--design-boxShadow-tertiary) !important;
23
23
  }
24
24
  }
25
25
 
@@ -27,15 +27,15 @@
27
27
  border-radius: 8px;
28
28
  background-color: var(--kt-modal-background);
29
29
  border: 0 none !important;
30
- box-shadow: 0px 9px 28px 8px var(--design-boxShadow-color1), 0px 3px 6px -4px var(--design-boxShadow-color2),
31
- 0px 6px 16px 0px var(--design-boxShadow-color3) !important;
30
+ box-shadow: 0px 9px 28px 8px var(--design-boxShadow-primary), 0px 3px 6px -4px var(--design-boxShadow-secondary),
31
+ 0px 6px 16px 0px var(--design-boxShadow-tertiary) !important;
32
32
  }
33
33
 
34
34
  .design-navigation_menu {
35
35
  border-radius: 8px;
36
36
  border: 0 none !important;
37
- box-shadow: 0px 9px 28px 8px var(--design-boxShadow-color1), 0px 3px 6px -4px var(--design-boxShadow-color2),
38
- 0px 6px 16px 0px var(--design-boxShadow-color3) !important;
37
+ box-shadow: 0px 9px 28px 8px var(--design-boxShadow-primary), 0px 3px 6px -4px var(--design-boxShadow-secondary),
38
+ 0px 6px 16px 0px var(--design-boxShadow-tertiary) !important;
39
39
 
40
40
  .design-navigation_menu_item {
41
41
  :global(.kaitian-icon) {
@@ -47,9 +47,10 @@
47
47
  .design-kt_workbench_editor {
48
48
  height: 100%;
49
49
  width: 100%;
50
- background-color: var(--design-container-background);
50
+ background: none;
51
51
  border-top-left-radius: 12px;
52
52
  border-top-right-radius: 12px;
53
+ border-top: none;
53
54
  overflow: hidden;
54
55
  }
55
56
 
@@ -91,11 +92,11 @@
91
92
  width: 22px;
92
93
  height: 22px;
93
94
  border-radius: 4px;
94
- color: var(--design-text-color-normal);
95
+ color: var(--design-text-foreground);
95
96
 
96
97
  &:hover {
97
- background-color: var(--design-block-background-common);
98
- color: var(--design-text-color-hover);
98
+ background-color: var(--design-block-hoverBackground);
99
+ color: var(--design-text-hoverForeground);
99
100
  }
100
101
  }
101
102
 
@@ -200,11 +201,11 @@
200
201
  height: 22px;
201
202
  line-height: 22px;
202
203
  font-size: 14px;
203
- color: var(--design-text-color-normal);
204
+ color: var(--design-text-foreground);
204
205
  margin-left: 2px;
205
206
 
206
207
  &:not(.disabled):hover {
207
- color: var(--design-text-color-hover);
208
+ color: var(--design-text-hoverForeground);
208
209
  opacity: 1;
209
210
  }
210
211
  }
@@ -222,16 +223,16 @@
222
223
  &:hover {
223
224
  border-radius: 4px;
224
225
  background-color: var(--kt-icon-hoverBackground);
225
- color: var(--design-text-color-hover);
226
+ color: var(--design-text-hoverForeground);
226
227
  }
227
228
  }
228
229
 
229
230
  button.design-btnAction {
230
231
  border-radius: 4px;
231
- color: var(--design-text-color-normal);
232
+ color: var(--design-text-foreground);
232
233
 
233
234
  &:hover {
234
- color: var(--design-text-color-hover);
235
+ color: var(--design-text-hoverForeground);
235
236
  background-color: var(--kt-icon-hoverBackground);
236
237
  }
237
238
 
@@ -261,7 +262,7 @@
261
262
  border-bottom: 0 none;
262
263
 
263
264
  span.design-navigation-part {
264
- color: var(--design-text-color-other);
265
+ color: var(--design-text-placeholderForeground);
265
266
 
266
267
  > span:first-child {
267
268
  padding-right: 0;
@@ -276,7 +277,7 @@
276
277
  }
277
278
 
278
279
  span.design-navigation_icon {
279
- color: var(--design-text-color-normal);
280
+ color: var(--design-text-foreground);
280
281
  }
281
282
  }
282
283
 
@@ -296,10 +297,10 @@ div[class*='design-editor_tab_block_container__'] {
296
297
  }
297
298
 
298
299
  .design-close_tab {
299
- color: var(--design-icon-color);
300
+ color: var(--design-icon-foreground);
300
301
 
301
302
  &:hover {
302
- color: var(--design-text-color-normal);
303
+ color: var(--design-text-foreground);
303
304
  }
304
305
  }
305
306
  }
@@ -353,10 +354,10 @@ div[class*='design-editor_tab_block_container__'] {
353
354
  font-size: 14px;
354
355
  width: 22px;
355
356
  height: 22px;
356
- color: var(--design-text-color-normal);
357
+ color: var(--design-text-foreground);
357
358
 
358
359
  &:not(.disabled):hover {
359
- color: var(--design-text-color-hover);
360
+ color: var(--design-text-hoverForeground);
360
361
  }
361
362
  }
362
363
 
@@ -367,7 +368,7 @@ div[class*='design-editor_tab_block_container__'] {
367
368
  &:hover {
368
369
  border-radius: 4px;
369
370
  background-color: var(--kt-icon-hoverBackground);
370
- color: var(--design-text-color-hover);
371
+ color: var(--design-text-hoverForeground);
371
372
  }
372
373
  }
373
374
  }
@@ -404,7 +405,7 @@ div[class*='design-editor_tab_block_container__'] {
404
405
  max-width: 240px;
405
406
 
406
407
  :global(.kt-icon) {
407
- color: var(--design-input-color);
408
+ color: var(--design-input-foreground);
408
409
  }
409
410
  }
410
411
  }
@@ -442,7 +443,7 @@ div[class*='design-editor_tab_block_container__'] {
442
443
 
443
444
  .design-tab_close_icon {
444
445
  opacity: 1;
445
- color: var(--design-text-color-normal);
446
+ color: var(--design-text-foreground);
446
447
  display: flex;
447
448
  width: 22px;
448
449
  height: 22px;
@@ -454,7 +455,7 @@ div[class*='design-editor_tab_block_container__'] {
454
455
  }
455
456
 
456
457
  &:hover {
457
- color: var(--design-text-color-hover);
458
+ color: var(--design-text-hoverForeground);
458
459
  }
459
460
  }
460
461
  }
@@ -472,7 +473,7 @@ div[class*='design-editor_tab_block_container__'] {
472
473
  font-size: 16px;
473
474
 
474
475
  &:hover {
475
- color: var(--design-text-color-hover);
476
+ color: var(--design-text-hoverForeground);
476
477
  background-color: var(--kt-icon-hoverBackground);
477
478
  }
478
479
  }
@@ -512,10 +513,6 @@ div[class*='design-editor_tab_block_container__'] {
512
513
  overflow: hidden;
513
514
  margin-right: 1px;
514
515
 
515
- .design-tab_bar {
516
- padding-top: 10px;
517
- }
518
-
519
516
  .design-tab_panel {
520
517
  border-right: none;
521
518
  }
@@ -569,14 +566,14 @@ div[class*='design-editor_tab_block_container__'] {
569
566
  justify-content: center;
570
567
  margin-left: 0;
571
568
  box-sizing: border-box;
572
- color: var(--design-text-color-normal);
569
+ color: var(--design-text-foreground);
573
570
 
574
571
  &::before {
575
572
  font-size: 14px;
576
573
  }
577
574
 
578
575
  &:hover {
579
- color: var(--design-text-color-hover);
576
+ color: var(--design-text-hoverForeground);
580
577
  background-color: var(--activityBar-activeBorder);
581
578
  border-radius: 4px;
582
579
  opacity: 1;
@@ -593,24 +590,24 @@ div[class*='design-editor_tab_block_container__'] {
593
590
  }
594
591
 
595
592
  .design-titlebar {
596
- color: var(--design-text-color-common);
593
+ color: var(--design-title-foreground);
597
594
 
598
595
  h1 {
599
- color: var(--design-text-color-common);
596
+ color: var(--design-title-foreground);
600
597
  }
601
598
  }
602
599
 
603
600
  .design-expansion_toggle {
604
- color: var(--design-text-color-other);
601
+ color: var(--design-text-placeholderForeground);
605
602
  }
606
603
 
607
604
  div[class*='mod_selected___'] {
608
605
  .design-opened_editor_node_overflow_wrap {
609
- color: var(--design-text-color-highlight) !important;
606
+ color: var(--design-text-highlightForeground) !important;
610
607
  }
611
608
 
612
609
  .design-expansion_toggle {
613
- color: var(--design-text-color-highlight) !important;
610
+ color: var(--design-text-highlightForeground) !important;
614
611
  }
615
612
  }
616
613
 
@@ -692,6 +689,7 @@ div[class*='design-editor_tab_block_container__'] {
692
689
 
693
690
  .design-left_tab_bar,
694
691
  .design-right_tab_bar {
692
+ padding-top: 10px;
695
693
  border-right: none;
696
694
  border-top: none;
697
695
  width: 48px;
package/src/browser/style/global.less CHANGED
@@ -15,6 +15,22 @@
15
15
  border-top: 0;
16
16
  }
17
17
 
18
+ #top {
19
+ margin-bottom: 1px;
20
+ #opensumi-menubar {
21
+ border-radius: 12px;
22
+ overflow: hidden;
23
+ }
24
+ }
25
+
26
+ #statusbar {
27
+ margin-top: 1px;
28
+ #opensumi-statusbar {
29
+ border-radius: 12px;
30
+ overflow: hidden;
31
+ }
32
+ }
33
+
18
34
  .kt-menu {
19
35
  &::-webkit-scrollbar {
20
36
  width: 4px;
@@ -30,8 +46,8 @@
30
46
  backdrop-filter: saturate(150%) blur(20px) !important;
31
47
  -webkit-backdrop-filter: saturate(150%) blur(20px) !important;
32
48
  border: 0 none !important;
33
- box-shadow: 0px 9px 28px 8px var(--design-boxShadow-color1), 0px 3px 6px -4px var(--design-boxShadow-color2),
34
- 0px 6px 16px 0px var(--design-boxShadow-color3) !important;
49
+ box-shadow: 0px 9px 28px 8px var(--design-boxShadow-primary), 0px 3px 6px -4px var(--design-boxShadow-secondary),
50
+ 0px 6px 16px 0px var(--design-boxShadow-tertiary) !important;
35
51
  border-radius: 8px !important;
36
52
  margin-left: 2px;
37
53
 
@@ -46,8 +62,8 @@
46
62
  backdrop-filter: saturate(150%) blur(20px) !important;
47
63
  -webkit-backdrop-filter: saturate(150%) blur(20px) !important;
48
64
  border: 0 none !important;
49
- box-shadow: 0px 9px 28px 8px var(--design-boxShadow-color1), 0px 3px 6px -4px var(--design-boxShadow-color2),
50
- 0px 6px 16px 0px var(--design-boxShadow-color3) !important;
65
+ box-shadow: 0px 9px 28px 8px var(--design-boxShadow-primary), 0px 3px 6px -4px var(--design-boxShadow-secondary),
66
+ 0px 6px 16px 0px var(--design-boxShadow-tertiary) !important;
51
67
  border-radius: 8px !important;
52
68
  min-width: initial;
53
69
  padding: 4px 0 !important;
@@ -82,8 +98,8 @@
82
98
  }
83
99
 
84
100
  .kt-popover-content {
85
- box-shadow: 0px 9px 28px 8px var(--design-boxShadow-color1), 0px 3px 6px -4px var(--design-boxShadow-color2),
86
- 0px 6px 16px 0px var(--design-boxShadow-color3);
101
+ box-shadow: 0px 9px 28px 8px var(--design-boxShadow-primary), 0px 3px 6px -4px var(--design-boxShadow-secondary),
102
+ 0px 6px 16px 0px var(--design-boxShadow-tertiary);
87
103
  padding: 5px 8px;
88
104
  border-radius: 6px;
89
105
  line-height: 18px;
@@ -117,9 +133,9 @@ html {
117
133
 
118
134
  .monaco-hover {
119
135
  background-color: var(--kt-modal-background) !important;
120
- border: 0 none !important;
121
- box-shadow: 0px 9px 28px 8px var(--design-boxShadow-color1), 0px 3px 6px -4px var(--design-boxShadow-color2),
122
- 0px 6px 16px 0px var(--design-boxShadow-color3) !important;
136
+ border-color: transparent;
137
+ box-shadow: 0px 9px 28px 8px var(--design-boxShadow-primary), 0px 3px 6px -4px var(--design-boxShadow-secondary),
138
+ 0px 6px 16px 0px var(--design-boxShadow-tertiary) !important;
123
139
  border-radius: 8px !important;
124
140
  }
125
141
 
@@ -172,8 +188,8 @@ html {
172
188
  .ant-modal-body {
173
189
  border-radius: 8px;
174
190
  border: 0 none !important;
175
- box-shadow: 0px 9px 28px 8px var(--design-boxShadow-color1), 0px 3px 6px -4px var(--design-boxShadow-color2),
176
- 0px 6px 16px 0px var(--design-boxShadow-color3) !important;
191
+ box-shadow: 0px 9px 28px 8px var(--design-boxShadow-primary), 0px 3px 6px -4px var(--design-boxShadow-secondary),
192
+ 0px 6px 16px 0px var(--design-boxShadow-tertiary) !important;
177
193
  }
178
194
 
179
195
  .kt-dialog-buttonWrap button {
@@ -225,8 +241,8 @@ html {
225
241
 
226
242
  #opensumi-quickpick {
227
243
  border: 0 none !important;
228
- box-shadow: 0px 9px 28px 8px var(--design-boxShadow-color1), 0px 3px 6px -4px var(--design-boxShadow-color2),
229
- 0px 6px 16px 0px var(--design-boxShadow-color3) !important;
244
+ box-shadow: 0px 9px 28px 8px var(--design-boxShadow-primary), 0px 3px 6px -4px var(--design-boxShadow-secondary),
245
+ 0px 6px 16px 0px var(--design-boxShadow-tertiary) !important;
230
246
  border-radius: 8px 8px 0 0 !important;
231
247
  padding: 4px 0;
232
248
  }
@@ -243,14 +259,14 @@ html {
243
259
 
244
260
  .kt-select-container {
245
261
  .kt-select-value > span {
246
- color: var(--design-text-color-normal);
262
+ color: var(--design-text-foreground);
247
263
  }
248
264
 
249
265
  .kt-select-options {
250
266
  padding: 4px 0;
251
267
  border-radius: 8px;
252
- box-shadow: 0px 9px 28px 8px var(--design-boxShadow-color1), 0px 3px 6px -4px var(--design-boxShadow-color2),
253
- 0px 6px 16px 0px var(--design-boxShadow-color3);
268
+ box-shadow: 0px 9px 28px 8px var(--design-boxShadow-primary), 0px 3px 6px -4px var(--design-boxShadow-secondary),
269
+ 0px 6px 16px 0px var(--design-boxShadow-tertiary);
254
270
 
255
271
  > div {
256
272
  line-height: 26px;