feat: improve status bar colours 🎨

robertrossmann · Dec 11, 2023 · bf4f1b2 · bf4f1b2
1 parent 93864e1
commit bf4f1b2
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 42 deletions.
diff --git a/src/generators/mkui.ts b/src/generators/mkui.ts
@@ -490,30 +490,36 @@ function mkui({ ui, code }: mkuiParams): UIColourPalette {
     /**
      * Status Bar Colours
      */
+    'statusBar.foreground': ui.background.panel.isDark()
+      ? ui.text.secondary.lighten(0.4).hex()
+      : ui.text.secondary.darken(0.2).hex(),
     'statusBar.background': ui.background.panel.hex(),
     'statusBar.border': ui.border.hex(),
-    'statusBar.debuggingBackground': ui.debug.indicator.alpha(ch(0x99)).hexa(),
+    'statusBar.debuggingBackground': ui.debug.indicator.hex(),
     'statusBar.debuggingForeground': ui.text.complimentary.hex(),
     'statusBar.debuggingBorder': ui.border.hex(),
-    'statusBar.focusBorder': ui.accent.alpha(ch(0x66)).hexa(),
-    'statusBar.foreground': ui.background.panel.isDark()
-      ? ui.text.secondary.lighten(0.4).hex()
-      : ui.text.secondary.darken(0.2).hex(),
     'statusBar.noFolderBackground': ui.background.panel.hex(),
-    'statusBarItem.hoverBackground': ui.background.hover.alpha(ch(0x66)).hexa(),
+    'statusBar.focusBorder': ui.accent.alpha(ch(0x66)).hexa(),
+    'statusBarItem.focusBorder': ui.accent.alpha(ch(0x66)).hexa(),
+    'statusBarItem.activeBackground': ui.background.panel.hex(),
+    'statusBarItem.hoverForeground': ui.text.primary.hex(),
+    'statusBarItem.hoverBackground': '#0000',
     'statusBarItem.remoteBackground': ui.button.secondary.hex(),
     'statusBarItem.remoteForeground': ui.text.complimentary.hex(),
-    // 'statusBar.noFolderForeground': '#FF0000',
-    // 'statusBar.noFolderBorder': '#FF0000',
-    'statusBarItem.activeBackground': ui.background.hover.alpha(ch(0xbb)).hexa(),
-    'statusBarItem.errorBackground': ui.problems.error.alpha(ch(0x99)).hexa(),
+    'statusBarItem.remoteHoverBackground': '#0000',
+    'statusBarItem.errorBackground': ui.problems.error.hex(),
     'statusBarItem.errorForeground': ui.text.complimentary.hex(),
-    'statusBarItem.warningBackground': ui.problems.warning.alpha(ch(0x99)).hexa(),
+    'statusBarItem.errorHoverBackground': '#0000',
+    'statusBarItem.errorHoverForeground': ui.text.primary.hex(),
+    'statusBarItem.warningBackground': ui.problems.warning.hex(),
     'statusBarItem.warningForeground': ui.text.complimentary.hex(),
-    'statusBarItem.focusBorder': ui.accent.alpha(ch(0x66)).hexa(),
-    // 'statusBarItem.prominentForeground': '#FF0000',
-    // 'statusBarItem.prominentBackground': '#FF0000',
-    // 'statusBarItem.prominentHoverBackground': '#FF0000',
+    'statusBarItem.warningHoverBackground': '#0000',
+    'statusBarItem.warningHoverForeground': ui.text.primary.hex(),
+    'statusBarItem.compactHoverBackground': '#0000',
+    'statusBarItem.prominentBackground': ui.background.hover.hex(),
+    'statusBarItem.prominentForeground': ui.text.primary.hex(),
+    'statusBarItem.prominentHoverBackground': '#0000',
+    'statusBarItem.prominentHoverForeground': ui.text.primary.hex(),
 
     /**
      * Title Bar Colours

diff --git a/src/types/UIColourPalette.ts b/src/types/UIColourPalette.ts
@@ -1858,6 +1858,10 @@ interface UIColourPalette {
    * Standard Status Bar background color.
    */
   'statusBar.background'?: ColourLike
+  /**
+   * Status Bar foreground color.
+   */
+  'statusBar.foreground'?: ColourLike
   /**
    * Status Bar border color separating the Status Bar and editor.
    */
@@ -1866,22 +1870,18 @@ interface UIColourPalette {
    * Status Bar background color when a program is being debugged.
    */
   'statusBar.debuggingBackground'?: ColourLike
-  /**
-   * Status Bar border color separating the Status Bar and editor when a program is being debugged.
-   */
-  'statusBar.debuggingBorder'?: ColourLike
   /**
    * Status Bar foreground color when a program is being debugged.
    */
   'statusBar.debuggingForeground'?: ColourLike
   /**
-   * Status Bar foreground color.
+   * Status Bar border color separating the Status Bar and editor when a program is being debugged.
    */
-  'statusBar.foreground'?: ColourLike
+  'statusBar.debuggingBorder'?: ColourLike
   /**
-   * Status bar border color when focused on keyboard navigation. The status bar is shown in the bottom of the window.
+   * Status Bar foreground color when no folder is opened.
    */
-  'statusBar.focusBorder'?: ColourLike
+  'statusBar.noFolderForeground'?: ColourLike
   /**
    * Status Bar background color when no folder is opened.
    */
@@ -1890,41 +1890,31 @@ interface UIColourPalette {
    * Status Bar border color separating the Status Bar and editor when no folder is opened.
    */
   'statusBar.noFolderBorder'?: ColourLike
-  /**
-   * Status Bar foreground color when no folder is opened.
-   */
-  'statusBar.noFolderForeground'?: ColourLike
   /**
    * Status Bar item background color when clicking.
    */
   'statusBarItem.activeBackground'?: ColourLike
   /**
-   * Status bar error items background color. Error items stand out from other status bar entries to indicate error
-   * conditions.
-   */
-  'statusBarItem.errorBackground'?: ColourLike
-  /**
-   * Status bar error items foreground color. Error items stand out from other status bar entries to indicate error
-   * conditions.
-   */
-  'statusBarItem.errorForeground'?: ColourLike
-  /**
-   * Status bar item border color when focused on keyboard navigation. The status bar is shown in the bottom of the
-   * window.
+   * Status bar item foreground color when hovering. The status bar is shown in the bottom of the window.
    */
-  'statusBarItem.focusBorder'?: ColourLike
+  'statusBarItem.hoverForeground'?: ColourLike
   /**
    * Status Bar item background color when hovering.
    */
   'statusBarItem.hoverBackground'?: ColourLike
+  /**
+   * Status Bar prominent items foreground color.
+   */
+  'statusBarItem.prominentForeground'?: ColourLike
   /**
    * Status Bar prominent items background color.
    */
   'statusBarItem.prominentBackground'?: ColourLike
   /**
-   * Status Bar prominent items foreground color.
+   * Status bar prominent items foreground color when hovering. Prominent items stand out from other status bar entries
+   * to indicate importance. The status bar is shown in the bottom of the window.
    */
-  'statusBarItem.prominentForeground'?: ColourLike
+  'statusBarItem.prominentHoverForeground'?: ColourLike
   /**
    * Status Bar prominent items background color when hovering.
    */
@@ -1937,6 +1927,34 @@ interface UIColourPalette {
    * Foreground color for the remote indicator on the status bar.
    */
   'statusBarItem.remoteForeground'?: ColourLike
+  /**
+   * Background color for the remote indicator on the status bar when hovering.
+   */
+  'statusBarItem.remoteHoverBackground'?: ColourLike
+  /**
+   * Foreground color for the remote indicator on the status bar when hovering.
+   */
+  'statusBarItem.remoteHoverForeground'?: ColourLike
+  /**
+   * Status bar error items background color. Error items stand out from other status bar entries to indicate error
+   * conditions.
+   */
+  'statusBarItem.errorBackground'?: ColourLike
+  /**
+   * Status bar error items foreground color. Error items stand out from other status bar entries to indicate error
+   * conditions.
+   */
+  'statusBarItem.errorForeground'?: ColourLike
+  /**
+   * Status bar error items background color when hovering. Error items stand out from other status bar entries to
+   * indicate error conditions. The status bar is shown in the bottom of the window.
+   */
+  'statusBarItem.errorHoverBackground'?: ColourLike
+  /**
+   * Status bar error items foreground color when hovering. Error items stand out from other status bar entries to
+   * indicate error conditions. The status bar is shown in the bottom of the window.
+   */
+  'statusBarItem.errorHoverForeground'?: ColourLike
   /**
    * Status bar warning items background color. Warning items stand out from other status bar entries to indicate
    * warning conditions. The status bar is shown in the bottom of the window.
@@ -1947,6 +1965,46 @@ interface UIColourPalette {
    * warning conditions. The status bar is shown in the bottom of the window.
    */
   'statusBarItem.warningForeground'?: ColourLike
+  /**
+   * Status bar warning items background color when hovering. Warning items stand out from other status bar entries to
+   * indicate warning conditions. The status bar is shown in the bottom of the window.
+   */
+  'statusBarItem.warningHoverBackground'?: ColourLike
+  /**
+   * Status bar warning items foreground color when hovering. Warning items stand out from other status bar entries to
+   * indicate warning conditions. The status bar is shown in the bottom of the window.
+   */
+  'statusBarItem.warningHoverForeground'?: ColourLike
+  /**
+   * Status bar item background color when hovering an item that contains two hovers. The status bar is shown in the
+   * bottom of the window.
+   */
+  'statusBarItem.compactHoverBackground'?: ColourLike
+  /**
+   * Status bar item border color when focused on keyboard navigation. The status bar is shown in the bottom of the
+   * window.
+   */
+  'statusBarItem.focusBorder'?: ColourLike
+  /**
+   * Status bar border color when focused on keyboard navigation. The status bar is shown in the bottom of the window.
+   */
+  'statusBar.focusBorder'?: ColourLike
+  /**
+   * Status bar item background color when the workbench is offline.
+   */
+  'statusBarItem.offlineBackground'?: ColourLike
+  /**
+   * Status bar item foreground color when the workbench is offline.
+   */
+  'statusBarItem.offlineForeground'?: ColourLike
+  /**
+   * Status bar item foreground hover color when the workbench is offline.
+   */
+  'statusBarItem.offlineHoverForeground'?: ColourLike
+  /**
+   * Status bar item background hover color when the workbench is offline.
+   */
+  'statusBarItem.offlineHoverBackground'?: ColourLike
   /**
    * The foreground color for array symbols.
    */