style: improve design styles (#3374)

* style: improve design styles * chore: update style --------- Co-authored-by: wangxiaojuan <wangxiaojuan19@163.com>
opensumi · Mar 4, 2024 · 65b42c3 · 65b42c3
1 parent ccd710f
commit 65b42c3
Show file tree

Hide file tree

Showing 10 changed files with 214 additions and 99 deletions.
diff --git a/packages/design/src/browser/override/override.module.less b/packages/design/src/browser/override/override.module.less
@@ -6,10 +6,10 @@
   padding: 0 8px;
   margin-right: 0 !important;
 
-  &::after {
+  &::before {
     content: '';
     position: absolute;
-    right: 0;
+    left: 0;
     top: 12px;
     display: inline-block;
     width: 1px;
@@ -32,10 +32,10 @@
   }
 
   &.active {
-    background-color: var(--panel-background);
+    background-color: var(--tab-activeBackground);
     color: var(--tab-activeForeground);
 
-    &::after {
+    &::before {
       content: none;
     }
 

diff --git a/packages/design/src/browser/style/design.module.less b/packages/design/src/browser/style/design.module.less
@@ -71,8 +71,8 @@
       align-items: center;
       background-color: transparent;
 
-      &:last-child {
-        > div::after {
+      &:first-child {
+        > div::before {
           content: none;
         }
       }
@@ -119,6 +119,25 @@
           display: block;
         }
       }
+
+      &.design-kt_editor_tab_current_prev {
+        background-color: var(--panel-background);
+        div[class*='design-editor_tab_block_container__'] {
+          border-radius: 0 0 12px 0;
+          background-color: var(--editorGroupHeader-tabsBackground);
+        }
+      }
+
+      &.design-kt_editor_tab_current_next {
+        background-color: var(--panel-background);
+        div[class*='design-editor_tab_block_container__'] {
+          background-color: var(--editorGroupHeader-tabsBackground);
+          border-radius: 0 0 0 12px;
+          &::before {
+            content: none;
+          }
+        }
+      }
     }
 
     .design-kt_editor_tab_dirty {
@@ -132,6 +151,32 @@
         }
       }
     }
+    &.design-kt_editor_tabs_current_last {
+      .design-kt_editor_tab_current {
+        padding-right: 12px !important;
+        &::before {
+          content: '';
+          position: absolute;
+          left: auto;
+          right: 0;
+          top: 0;
+          width: 12px;
+          height: 100%;
+          background-color: var(--editorGroupHeader-tabsBackground);
+          border-radius: 0 0 0 12px;
+        }
+        &::after {
+          content: '';
+          position: absolute;
+          left: auto;
+          top: 0;
+          right: 0;
+          width: 12px;
+          height: 100%;
+          background-color: var(--panel-background);
+        }
+      }
+    }
   }
 
   .design-kt_editor_tabs {
@@ -323,7 +368,6 @@ div[class*='design-editor_tab_block_container__'] {
 
   :global(.kt-select-value-small) {
     height: 24px;
-    border: 0 none;
     border-radius: 4px;
   }
 
@@ -340,7 +384,6 @@ div[class*='design-editor_tab_block_container__'] {
       border-radius: 4px;
       width: 240px;
       max-width: 240px;
-      border: 0 none;
     }
   }
 
@@ -353,7 +396,6 @@ div[class*='design-editor_tab_block_container__'] {
       border-radius: 4px;
       width: 240px;
       max-width: 240px;
-      border: 0 none;
 
       :global(.kt-icon) {
         color: var(--design-input-color);
@@ -372,10 +414,13 @@ div[class*='design-editor_tab_block_container__'] {
   .design-item_container {
     border: 0 none;
 
-    &::after {
+    &:first-child::before {
+      display: none;
+    }
+    &::before {
       content: '';
       position: absolute;
-      right: 0;
+      left: 0;
       top: 12px;
       display: inline-block;
       width: 1px;
@@ -426,7 +471,8 @@ div[class*='design-editor_tab_block_container__'] {
     }
   }
 
-  .design-tab_item_selected {
+  .design-tab_item_selected,
+  .design-tab_item_selected + div {
     &::before,
     &::after {
       display: none;
@@ -471,6 +517,7 @@ div[class*='design-editor_tab_block_container__'] {
   }
 
   .design-kt_split_panel {
+    padding-bottom: 8px;
     &::-webkit-scrollbar {
       width: 4px;
     }
@@ -486,6 +533,16 @@ div[class*='design-editor_tab_block_container__'] {
     }
   }
 
+  .design-scmMenu {
+    button {
+      border-radius: 4px !important;
+    }
+  }
+
+  .design-section_badge {
+    border-radius: 4px !important;
+  }
+
   .design-titleActions {
     > span {
       display: flex;
@@ -635,3 +692,11 @@ div[class*='design-editor_tab_block_container__'] {
     border-radius: 8px;
   }
 }
+
+/* 左侧面板滚动条 */
+.design-kt_split_panel_body {
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+}
diff --git a/packages/design/src/browser/style/global.less b/packages/design/src/browser/style/global.less
@@ -106,6 +106,10 @@ html {
     width: 4px !important;
   }
 
+  .find-widget {
+    border-radius: 6px;
+  }
+
   .minimap {
     left: auto !important;
     right: 4px !important;
@@ -158,12 +162,14 @@ html {
   }
 }
 
-.kt-modal-content {
+// 对话框
+.kt-modal-content,
+.ant-modal-content {
   border-radius: 8px;
   background-color: transparent;
 }
-
-.kt-overlay .kt-modal-body {
+.kt-overlay .kt-modal-body,
+.ant-modal-body {
   border-radius: 8px;
   border: 0 none !important;
   box-shadow: 0px 9px 28px 8px var(--design-boxShadow-color1), 0px 3px 6px -4px var(--design-boxShadow-color2),
@@ -178,12 +184,21 @@ html {
   border-radius: 8px;
 }
 
+// 全局按钮、下拉框、输入框设置调整
+.input-box .validate-message.popup {
+  padding: 8px;
+}
+.input-box .validate-message.popup.validate-warning {
+  border-radius: 6px;
+}
+
 .kt-input {
   border-radius: 6px;
 }
 
 .default-button-size,
-.kt-button {
+.kt-button,
+.ant-btn {
   border-radius: 4px;
 }
 

diff --git a/packages/design/src/browser/theme/default-theme.ts b/packages/design/src/browser/theme/default-theme.ts
@@ -567,6 +567,7 @@ export default {
     'inputValidation.warningBackground': '#332510',
     'inputValidation.warningBorder': '#DBA936',
     'inputValidation.warningText': '#DBA936',
+    'inputValidation.warningForeground': '#d7dbde',
     'keybinding.background': '#5F656B33',
     'kt.accentForeground': '#FFFFFF',
     'kt.actionbar.disableForeground': '#5F656B',
@@ -670,13 +671,13 @@ export default {
     'kt.secondaryButton.hoverBorder': '#3895EB',
     'kt.secondaryButton.hoverForeground': '#3895EB',
     'kt.secondaryButton.background': '#00000000',
-    'kt.select.background': '#ffffff0f',
+    'kt.select.background': '#ffffff14',
     'kt.select.border': '#00000000',
     'kt.select.disableBackground': '#5F656B40',
     'kt.select.disableForeground': '#5F656B',
     'kt.select.foreground': '#D7DBDE',
     'kt.select.placeholderForeground': '#5F656B',
-    'kt.selectDropdown.background': '#35393D',
+    'kt.selectDropdown.background': '#222830',
     'kt.selectDropdown.foreground': '#D7DBDE',
     'kt.selectDropdown.hoverBackground': '#ffffff14',
     'kt.selectDropdown.selectionBackground': '#ffffff14',
@@ -756,7 +757,7 @@ export default {
     'statusBarItem.activeBackground': '#FFFFFF40',
     'statusBarItem.hoverBackground': '#FFFFFF03',
     'statusBarItem.remoteBackground': '#6329B4',
-    'tab.activeBackground': '#ffffff0f',
+    'tab.activeBackground': '#151b21',
     'tab.activeForeground': '#FFFFFF',
     'tab.border': '#e9e9e914',
     'tab.inactiveBackground': '#00000000',
@@ -782,6 +783,7 @@ export default {
     'editor.background': '#00000026',
     'quickInput.background': '#222830',
     'list.focusBackground': '#ffffff1f',
+    'textLink.foreground': '#3c8dff',
   },
   semanticHighlighting: true,
   semanticTokenColors: {

diff --git a/packages/design/src/browser/theme/light-theme.ts b/packages/design/src/browser/theme/light-theme.ts
@@ -583,9 +583,10 @@ export default {
     'inputValidation.errorBorder': '#D21F28',
     'inputValidation.errorForeground': '#D7DBDE',
     'inputValidation.errorText': '#D21F28',
-    'inputValidation.warningBackground': '#332510',
+    'inputValidation.warningBackground': '#fff',
     'inputValidation.warningBorder': '#DBA936',
     'inputValidation.warningText': '#DBA936',
+    'inputValidation.warningForeground': '#151b21',
     'keybinding.background': '#5F656B33',
     'kt.accentForeground': '#FFFFFF',
     'kt.actionbar.disableForeground': '#5F656B',
@@ -776,7 +777,7 @@ export default {
     'statusBarItem.activeBackground': '#FFFFFF40',
     'statusBarItem.hoverBackground': '#FFFFFF03',
     'statusBarItem.remoteBackground': '#6329B4',
-    'tab.activeBackground': '#ffffff0f',
+    'tab.activeBackground': '#ffffff',
     'tab.activeForeground': '#151b21',
     'tab.border': '#e9e9e914',
     'tab.inactiveBackground': '#00000000',
@@ -802,6 +803,7 @@ export default {
     'editor.background': '#F1F2F3',
     'quickInput.background': '#fff',
     'list.focusBackground': '#151b5814',
+    'textLink.foreground': '#3c8dff',
   },
   semanticHighlighting: true,
   semanticTokenColors: {

diff --git a/packages/editor/src/browser/editor.module.less b/packages/editor/src/browser/editor.module.less
@@ -160,6 +160,9 @@
       flex-wrap: wrap;
       width: 100%;
       background: var(--editorGroupHeader-tabsBackground);
+      &.kt_editor_tabs_current_last {
+        display: flex;
+      }
       &::before {
         content: '';
         height: 1px;
@@ -315,6 +318,15 @@
           }
         }
       }
+      &.kt_editor_tab_current_prev {
+        display: flex;
+      }
+      &.kt_editor_tab_current_next {
+        display: flex;
+      }
+      &.kt_editor_tab_dirty {
+        display: flex;
+      }
       &.kt_on_drag_over {
         background-color: var(--editorGroup-dropBackground);
       }