fix: optimize the Color Theme (#395)

* fix: set the sidebar width as 230px

* feat: add polyfill function for the colorTheme

* feat: add default panel title color

* fix: optimize the splitPane and scrollable styles

* feat: add background color for the minimap

* fix: optimize the colorTheme

* test: update the Workbench snapshot

* refactor: optimize the perfectColors function

Author: wewoor

src/extensions/theme-monokai/themes/monokai-color-theme.json

@@ -16,6 +16,7 @@
         "editor.selectionHighlightBackground": "#575b6180",
         "editor.selectionBackground": "#878b9180",
         "minimap.selectionHighlight": "#878b9180",
+        "minimap.background": "#272822",
         "editor.wordHighlightBackground": "#4a4a7680",
         "editor.wordHighlightStrongBackground": "#6a6a9680",
         "editor.lineHighlightBackground": "#3e3d32",

src/model/workbench/layout.ts

@@ -31,7 +31,7 @@ export class LayoutModel implements ILayout {
     public sidebar: ISidebarViewState;
     public menuBar: ViewVisibility;
     constructor(
-        splitPanePos: string[] = ['300px', 'auto'],
+        splitPanePos: string[] = ['230px', 'auto'],
         horizontalSplitPanePos = ['70%', 'auto'],
         activityBar = { hidden: false },
         panel = { hidden: false, panelMaximized: false },

src/services/theme/colorRegistry.ts

@@ -69,6 +69,8 @@ const defaultVS = {
 
     'panel.background': Color.white,
     'panel.border': 'rgba(128, 128, 128, 0.35)',
+    'panelTitle.activeForeground': 'rgb(66, 66, 66)',
+    'panelTitle.activeBorder': 'rgb(66, 66, 66)',
 
     'activityBar.background': 'rgb(51, 51, 51)',
     'activityBar.activeBorder': '#fff',
@@ -143,6 +145,8 @@ const defaultDark = {
 
     'panel.background': 'rgb(30, 30, 30)',
     'panel.border': '#3C3C3C',
+    'panelTitle.activeBorder': 'rgb(231, 231, 231)',
+    'panelTitle.activeForeground': 'rgb(231, 231, 231)',
 
     'activityBar.background': 'rgb(51, 51, 51)',
     'activityBar.activeBorder': '#fff',
@@ -204,6 +208,8 @@ const defaultHc = {
     'menu.separatorBackground': '#6FC3DF',
 
     'panel.border': '#6FC3DF',
+    'panelTitle.activeBorder': 'rgb(231, 231, 231)',
+    'panelTitle.activeForeground': 'rgb(231, 231, 231)',
 
     'activityBar.background': 'rgb(51, 51, 51)',
     'activityBar.activeBorder': '#fff',

src/services/theme/helper.ts

@@ -1,4 +1,5 @@
-import { IColorTheme } from 'mo/model/colorTheme';
+import { cloneDeep } from 'lodash';
+import { IColors, IColorTheme } from 'mo/model/colorTheme';
 import { getBuiltInColors } from 'mo/services/theme/colorRegistry';
 import { editor as MonacoEditor } from 'monaco-editor';
 
@@ -27,11 +28,35 @@ export function convertToCSSVars(colors: object) {
     `;
 }
 
+/**
+ * Perfect the Color Theme,
+ * because some theme extensions not assign the fully,
+ * this function automatic helps to polyfill the color theme
+ * @param colors
+ * @returns colors
+ */
+function perfectColors(colors: IColors): IColors {
+    const nextColors = cloneDeep(colors);
+    const inheritMap = [
+        ['minimap.background', 'editor.background'],
+        ['minimapSlider.background', 'scrollbarSlider.background'],
+        ['minimapSlider.hoverBackground', 'scrollbarSlider.hoverBackground'],
+        ['minimapSlider.activeBackground', 'scrollbarSlider.activeBackground'],
+    ];
+
+    inheritMap.forEach(([inheritSourceColor, inheritTargetColor]) => {
+        if (nextColors[inheritTargetColor]) {
+            nextColors[inheritSourceColor] = nextColors[inheritTargetColor];
+        }
+    });
+    return nextColors;
+}
+
 export function getThemeData(
     theme: IColorTheme
 ): MonacoEditor.IStandaloneThemeData {
     const builtInColors = getBuiltInColors(theme);
-    const colors = Object.assign({}, builtInColors, theme.colors);
+    const colors = perfectColors(Object.assign(builtInColors, theme.colors));
 
     const convertColors = {};
     for (const colorId in colors) {

src/style/theme/menubar.scss

@@ -3,8 +3,7 @@
 // =============== MenuBar =============== //
 #{$menuBar} {
     background-color: var(--activityBar-background);
-    border-color: var(--activityBar-border);
-    color: var(--activityBar-foreground);
+    color: var(--activityBar-inactiveForeground);
 
     #{$menu} {
         &__item {

src/style/theme/panel.scss

@@ -6,10 +6,8 @@
     border-color: var(--panel-border);
 
     &__header {
-        #{$tab}__item {
-            color: var(--panelTitle-inactiveForeground);
-
-            &--active {
+        #{$tabs} {
+            #{$tab}__item--active {
                 border-color: var(--panelTitle-activeBorder);
                 color: var(--panelTitle-activeForeground);
 

src/workbench/__tests__/__snapshots__/workbench.test.tsx.snap

@@ -69,7 +69,7 @@ exports[`Test Workbench Component Match The WorkbenchView snapshot 1`] = `
           data-type="SplitPane"
         >
           <div
-            style="display: -webkit-box,-moz-box,-ms-flexbox,-webkit-flex,flex; outline: none; min-width: 170px; max-width: calc(80% - 1px*0.8); flex-grow: 0; width: 300px;"
+            style="display: -webkit-box,-moz-box,-ms-flexbox,-webkit-flex,flex; outline: none; min-width: 170px; max-width: calc(80% - 1px*0.8); flex-grow: 0; width: 230px;"
           >
             <div
               class="mo-sidebar"

src/workbench/activityBar/style.scss

@@ -30,7 +30,6 @@
         display: flex;
         height: 48px;
         justify-content: center;
-        margin-bottom: 4px;
         position: relative;
         transition: transform 50ms ease;
         width: 48px;
@@ -67,6 +66,6 @@
         left: 0;
         position: absolute;
         top: 0;
-        width: 1px;
+        width: 2px;
     }
 }

src/workbench/menuBar/style.scss

@@ -13,4 +13,8 @@
         left: 0;
         top: 0;
     }
+
+    &__action {
+        font-size: 16px;
+    }
 }

src/workbench/panel/style.scss

@@ -32,6 +32,7 @@ $icon-size: 35px;
         #{$tab}__item {
             background: inherit;
             border: 0;
+            color: var(--panelTitle-inactiveForeground);
             font-size: 11px;
             padding: 0 10px;
             text-transform: uppercase;

src/workbench/style.scss

@@ -24,50 +24,19 @@
     left: 0;
     width: auto;
 
-    /* stylelint-disable */
-    .Resizer {
-        background-clip: padding;
-        background-clip: padding;
-        background-clip: padding-box;
-        box-sizing: border-box;
-        box-sizing: border-box;
-        box-sizing: border-box;
-        opacity: 0.2;
-        z-index: 1;
+    // For SplitPane resizer
+    div[data-type='Resizer'] {
+        background: none;
     }
 
-    .Resizer:hover {
-        transition: all 2s ease;
-        transition: all 2s ease;
-    }
-
-    .Resizer.horizontal {
-        border-bottom: 5px solid transparent;
-        border-top: 5px solid transparent;
-        cursor: row-resize;
-        height: 11px;
-        margin: -5px 0;
-        width: 100%;
-    }
-
-    .Resizer.horizontal:hover {
-        border-bottom: 5px solid transparent;
-        border-top: 5px solid transparent;
-    }
-
-    .Resizer.vertical {
-        border-left: 5px solid transparent;
-        border-right: 5px solid transparent;
-        cursor: col-resize;
-        margin: 0 -5px;
-        width: 11px;
-    }
-
-    .Resizer.disabled {
-        cursor: not-allowed;
-    }
-
-    .Resizer.disabled:hover {
-        border-color: transparent;
+    .monaco-scrollable-element {
+        /* stylelint-disable-next-line*/
+        & > .scrollbar > .slider {
+            background: var(--scrollbarSlider-activeBackground);
+            /* stylelint-disable-next-line*/
+            &:hover {
+                background: var(--scrollbarSlider-hoverBackground);
+            }
+        }
     }
 }