Update status bar style

Nate Butler created

Change summary

assets/themes/cave-dark.json         |  32 ++++++--
assets/themes/cave-light.json        |  32 ++++++--
assets/themes/dark.json              |  32 ++++++--
assets/themes/light.json             |  32 ++++++--
assets/themes/solarized-dark.json    |  32 ++++++--
assets/themes/solarized-light.json   |  32 ++++++--
assets/themes/sulphurpool-dark.json  |  32 ++++++--
assets/themes/sulphurpool-light.json |  32 ++++++--
styles/src/styleTree/statusBar.ts    | 106 ++++++++++++++++++++++++++++++
styles/src/styleTree/workspace.ts    |  99 ---------------------------
10 files changed, 293 insertions(+), 168 deletions(-)

Detailed changes

assets/themes/cave-dark.json 🔗 

@@ -192,14 +192,16 @@
         "size": 14
       },
       "lsp_status": {
-        "icon_spacing": 4,
-        "icon_width": 14,
-        "height": 18,
         "corner_radius": 6,
         "padding": {
+          "top": 1,
+          "bottom": 1,
           "left": 6,
           "right": 6
         },
+        "icon_spacing": 4,
+        "icon_width": 14,
+        "height": 18,
         "message": {
           "family": "Zed Sans",
           "color": "#8b8792",
@@ -242,13 +244,17 @@
         "container_ok": {
           "corner_radius": 6,
           "padding": {
-            "left": 6,
-            "right": 6
+            "top": 3,
+            "bottom": 3,
+            "left": 7,
+            "right": 7
           }
         },
         "container_warning": {
           "corner_radius": 6,
           "padding": {
+            "top": 1,
+            "bottom": 1,
             "left": 6,
             "right": 6
           },
@@ -261,6 +267,8 @@
         "container_error": {
           "corner_radius": 6,
           "padding": {
+            "top": 1,
+            "bottom": 1,
             "left": 6,
             "right": 6
           },
@@ -275,14 +283,18 @@
           "container_ok": {
             "corner_radius": 6,
             "padding": {
-              "left": 6,
-              "right": 6
+              "top": 3,
+              "bottom": 3,
+              "left": 7,
+              "right": 7
             },
             "background": "#58526052"
           },
           "container_warning": {
             "corner_radius": 6,
             "padding": {
+              "top": 1,
+              "bottom": 1,
               "left": 6,
               "right": 6
             },
@@ -295,6 +307,8 @@
           "container_error": {
             "corner_radius": 6,
             "padding": {
+              "top": 1,
+              "bottom": 1,
               "left": 6,
               "right": 6
             },
@@ -310,14 +324,14 @@
         "group_left": {},
         "group_right": {},
         "item": {
-          "icon_size": 14,
+          "corner_radius": 6,
           "padding": {
             "top": 3,
             "bottom": 3,
             "left": 6,
             "right": 6
           },
-          "corner_radius": 6,
+          "icon_size": 14,
           "icon_color": "#8b8792",
           "hover": {
             "icon_color": "#e2dfe7",

assets/themes/cave-light.json 🔗 

@@ -192,14 +192,16 @@
         "size": 14
       },
       "lsp_status": {
-        "icon_spacing": 4,
-        "icon_width": 14,
-        "height": 18,
         "corner_radius": 6,
         "padding": {
+          "top": 1,
+          "bottom": 1,
           "left": 6,
           "right": 6
         },
+        "icon_spacing": 4,
+        "icon_width": 14,
+        "height": 18,
         "message": {
           "family": "Zed Sans",
           "color": "#585260",
@@ -242,13 +244,17 @@
         "container_ok": {
           "corner_radius": 6,
           "padding": {
-            "left": 6,
-            "right": 6
+            "top": 3,
+            "bottom": 3,
+            "left": 7,
+            "right": 7
           }
         },
         "container_warning": {
           "corner_radius": 6,
           "padding": {
+            "top": 1,
+            "bottom": 1,
             "left": 6,
             "right": 6
           },
@@ -261,6 +267,8 @@
         "container_error": {
           "corner_radius": 6,
           "padding": {
+            "top": 1,
+            "bottom": 1,
             "left": 6,
             "right": 6
           },
@@ -275,14 +283,18 @@
           "container_ok": {
             "corner_radius": 6,
             "padding": {
-              "left": 6,
-              "right": 6
+              "top": 3,
+              "bottom": 3,
+              "left": 7,
+              "right": 7
             },
             "background": "#8b87921f"
           },
           "container_warning": {
             "corner_radius": 6,
             "padding": {
+              "top": 1,
+              "bottom": 1,
               "left": 6,
               "right": 6
             },
@@ -295,6 +307,8 @@
           "container_error": {
             "corner_radius": 6,
             "padding": {
+              "top": 1,
+              "bottom": 1,
               "left": 6,
               "right": 6
             },
@@ -310,14 +324,14 @@
         "group_left": {},
         "group_right": {},
         "item": {
-          "icon_size": 14,
+          "corner_radius": 6,
           "padding": {
             "top": 3,
             "bottom": 3,
             "left": 6,
             "right": 6
           },
-          "corner_radius": 6,
+          "icon_size": 14,
           "icon_color": "#585260",
           "hover": {
             "icon_color": "#26232a",

assets/themes/dark.json 🔗 

@@ -192,14 +192,16 @@
         "size": 14
       },
       "lsp_status": {
-        "icon_spacing": 4,
-        "icon_width": 14,
-        "height": 18,
         "corner_radius": 6,
         "padding": {
+          "top": 1,
+          "bottom": 1,
           "left": 6,
           "right": 6
         },
+        "icon_spacing": 4,
+        "icon_width": 14,
+        "height": 18,
         "message": {
           "family": "Zed Sans",
           "color": "#808080",
@@ -242,13 +244,17 @@
         "container_ok": {
           "corner_radius": 6,
           "padding": {
-            "left": 6,
-            "right": 6
+            "top": 3,
+            "bottom": 3,
+            "left": 7,
+            "right": 7
           }
         },
         "container_warning": {
           "corner_radius": 6,
           "padding": {
+            "top": 1,
+            "bottom": 1,
             "left": 6,
             "right": 6
           },
@@ -261,6 +267,8 @@
         "container_error": {
           "corner_radius": 6,
           "padding": {
+            "top": 1,
+            "bottom": 1,
             "left": 6,
             "right": 6
           },
@@ -275,14 +283,18 @@
           "container_ok": {
             "corner_radius": 6,
             "padding": {
-              "left": 6,
-              "right": 6
+              "top": 3,
+              "bottom": 3,
+              "left": 7,
+              "right": 7
             },
             "background": "#232323"
           },
           "container_warning": {
             "corner_radius": 6,
             "padding": {
+              "top": 1,
+              "bottom": 1,
               "left": 6,
               "right": 6
             },
@@ -295,6 +307,8 @@
           "container_error": {
             "corner_radius": 6,
             "padding": {
+              "top": 1,
+              "bottom": 1,
               "left": 6,
               "right": 6
             },
@@ -310,14 +324,14 @@
         "group_left": {},
         "group_right": {},
         "item": {
-          "icon_size": 14,
+          "corner_radius": 6,
           "padding": {
             "top": 3,
             "bottom": 3,
             "left": 6,
             "right": 6
           },
-          "corner_radius": 6,
+          "icon_size": 14,
           "icon_color": "#9c9c9c",
           "hover": {
             "icon_color": "#c6c6c6",

assets/themes/light.json 🔗 

@@ -192,14 +192,16 @@
         "size": 14
       },
       "lsp_status": {
-        "icon_spacing": 4,
-        "icon_width": 14,
-        "height": 18,
         "corner_radius": 6,
         "padding": {
+          "top": 1,
+          "bottom": 1,
           "left": 6,
           "right": 6
         },
+        "icon_spacing": 4,
+        "icon_width": 14,
+        "height": 18,
         "message": {
           "family": "Zed Sans",
           "color": "#636363",
@@ -242,13 +244,17 @@
         "container_ok": {
           "corner_radius": 6,
           "padding": {
-            "left": 6,
-            "right": 6
+            "top": 3,
+            "bottom": 3,
+            "left": 7,
+            "right": 7
           }
         },
         "container_warning": {
           "corner_radius": 6,
           "padding": {
+            "top": 1,
+            "bottom": 1,
             "left": 6,
             "right": 6
           },
@@ -261,6 +267,8 @@
         "container_error": {
           "corner_radius": 6,
           "padding": {
+            "top": 1,
+            "bottom": 1,
             "left": 6,
             "right": 6
           },
@@ -275,14 +283,18 @@
           "container_ok": {
             "corner_radius": 6,
             "padding": {
-              "left": 6,
-              "right": 6
+              "top": 3,
+              "bottom": 3,
+              "left": 7,
+              "right": 7
             },
             "background": "#eaeaea"
           },
           "container_warning": {
             "corner_radius": 6,
             "padding": {
+              "top": 1,
+              "bottom": 1,
               "left": 6,
               "right": 6
             },
@@ -295,6 +307,8 @@
           "container_error": {
             "corner_radius": 6,
             "padding": {
+              "top": 1,
+              "bottom": 1,
               "left": 6,
               "right": 6
             },
@@ -310,14 +324,14 @@
         "group_left": {},
         "group_right": {},
         "item": {
-          "icon_size": 14,
+          "corner_radius": 6,
           "padding": {
             "top": 3,
             "bottom": 3,
             "left": 6,
             "right": 6
           },
-          "corner_radius": 6,
+          "icon_size": 14,
           "icon_color": "#717171",
           "hover": {
             "icon_color": "#393939",

assets/themes/solarized-dark.json 🔗 

@@ -192,14 +192,16 @@
         "size": 14
       },
       "lsp_status": {
-        "icon_spacing": 4,
-        "icon_width": 14,
-        "height": 18,
         "corner_radius": 6,
         "padding": {
+          "top": 1,
+          "bottom": 1,
           "left": 6,
           "right": 6
         },
+        "icon_spacing": 4,
+        "icon_width": 14,
+        "height": 18,
         "message": {
           "family": "Zed Sans",
           "color": "#93a1a1",
@@ -242,13 +244,17 @@
         "container_ok": {
           "corner_radius": 6,
           "padding": {
-            "left": 6,
-            "right": 6
+            "top": 3,
+            "bottom": 3,
+            "left": 7,
+            "right": 7
           }
         },
         "container_warning": {
           "corner_radius": 6,
           "padding": {
+            "top": 1,
+            "bottom": 1,
             "left": 6,
             "right": 6
           },
@@ -261,6 +267,8 @@
         "container_error": {
           "corner_radius": 6,
           "padding": {
+            "top": 1,
+            "bottom": 1,
             "left": 6,
             "right": 6
           },
@@ -275,14 +283,18 @@
           "container_ok": {
             "corner_radius": 6,
             "padding": {
-              "left": 6,
-              "right": 6
+              "top": 3,
+              "bottom": 3,
+              "left": 7,
+              "right": 7
             },
             "background": "#586e7552"
           },
           "container_warning": {
             "corner_radius": 6,
             "padding": {
+              "top": 1,
+              "bottom": 1,
               "left": 6,
               "right": 6
             },
@@ -295,6 +307,8 @@
           "container_error": {
             "corner_radius": 6,
             "padding": {
+              "top": 1,
+              "bottom": 1,
               "left": 6,
               "right": 6
             },
@@ -310,14 +324,14 @@
         "group_left": {},
         "group_right": {},
         "item": {
-          "icon_size": 14,
+          "corner_radius": 6,
           "padding": {
             "top": 3,
             "bottom": 3,
             "left": 6,
             "right": 6
           },
-          "corner_radius": 6,
+          "icon_size": 14,
           "icon_color": "#93a1a1",
           "hover": {
             "icon_color": "#eee8d5",

assets/themes/solarized-light.json 🔗 

@@ -192,14 +192,16 @@
         "size": 14
       },
       "lsp_status": {
-        "icon_spacing": 4,
-        "icon_width": 14,
-        "height": 18,
         "corner_radius": 6,
         "padding": {
+          "top": 1,
+          "bottom": 1,
           "left": 6,
           "right": 6
         },
+        "icon_spacing": 4,
+        "icon_width": 14,
+        "height": 18,
         "message": {
           "family": "Zed Sans",
           "color": "#586e75",
@@ -242,13 +244,17 @@
         "container_ok": {
           "corner_radius": 6,
           "padding": {
-            "left": 6,
-            "right": 6
+            "top": 3,
+            "bottom": 3,
+            "left": 7,
+            "right": 7
           }
         },
         "container_warning": {
           "corner_radius": 6,
           "padding": {
+            "top": 1,
+            "bottom": 1,
             "left": 6,
             "right": 6
           },
@@ -261,6 +267,8 @@
         "container_error": {
           "corner_radius": 6,
           "padding": {
+            "top": 1,
+            "bottom": 1,
             "left": 6,
             "right": 6
           },
@@ -275,14 +283,18 @@
           "container_ok": {
             "corner_radius": 6,
             "padding": {
-              "left": 6,
-              "right": 6
+              "top": 3,
+              "bottom": 3,
+              "left": 7,
+              "right": 7
             },
             "background": "#93a1a11f"
           },
           "container_warning": {
             "corner_radius": 6,
             "padding": {
+              "top": 1,
+              "bottom": 1,
               "left": 6,
               "right": 6
             },
@@ -295,6 +307,8 @@
           "container_error": {
             "corner_radius": 6,
             "padding": {
+              "top": 1,
+              "bottom": 1,
               "left": 6,
               "right": 6
             },
@@ -310,14 +324,14 @@
         "group_left": {},
         "group_right": {},
         "item": {
-          "icon_size": 14,
+          "corner_radius": 6,
           "padding": {
             "top": 3,
             "bottom": 3,
             "left": 6,
             "right": 6
           },
-          "corner_radius": 6,
+          "icon_size": 14,
           "icon_color": "#586e75",
           "hover": {
             "icon_color": "#073642",

assets/themes/sulphurpool-dark.json 🔗 

@@ -192,14 +192,16 @@
         "size": 14
       },
       "lsp_status": {
-        "icon_spacing": 4,
-        "icon_width": 14,
-        "height": 18,
         "corner_radius": 6,
         "padding": {
+          "top": 1,
+          "bottom": 1,
           "left": 6,
           "right": 6
         },
+        "icon_spacing": 4,
+        "icon_width": 14,
+        "height": 18,
         "message": {
           "family": "Zed Sans",
           "color": "#979db4",
@@ -242,13 +244,17 @@
         "container_ok": {
           "corner_radius": 6,
           "padding": {
-            "left": 6,
-            "right": 6
+            "top": 3,
+            "bottom": 3,
+            "left": 7,
+            "right": 7
           }
         },
         "container_warning": {
           "corner_radius": 6,
           "padding": {
+            "top": 1,
+            "bottom": 1,
             "left": 6,
             "right": 6
           },
@@ -261,6 +267,8 @@
         "container_error": {
           "corner_radius": 6,
           "padding": {
+            "top": 1,
+            "bottom": 1,
             "left": 6,
             "right": 6
           },
@@ -275,14 +283,18 @@
           "container_ok": {
             "corner_radius": 6,
             "padding": {
-              "left": 6,
-              "right": 6
+              "top": 3,
+              "bottom": 3,
+              "left": 7,
+              "right": 7
             },
             "background": "#5e668752"
           },
           "container_warning": {
             "corner_radius": 6,
             "padding": {
+              "top": 1,
+              "bottom": 1,
               "left": 6,
               "right": 6
             },
@@ -295,6 +307,8 @@
           "container_error": {
             "corner_radius": 6,
             "padding": {
+              "top": 1,
+              "bottom": 1,
               "left": 6,
               "right": 6
             },
@@ -310,14 +324,14 @@
         "group_left": {},
         "group_right": {},
         "item": {
-          "icon_size": 14,
+          "corner_radius": 6,
           "padding": {
             "top": 3,
             "bottom": 3,
             "left": 6,
             "right": 6
           },
-          "corner_radius": 6,
+          "icon_size": 14,
           "icon_color": "#979db4",
           "hover": {
             "icon_color": "#dfe2f1",

assets/themes/sulphurpool-light.json 🔗 

@@ -192,14 +192,16 @@
         "size": 14
       },
       "lsp_status": {
-        "icon_spacing": 4,
-        "icon_width": 14,
-        "height": 18,
         "corner_radius": 6,
         "padding": {
+          "top": 1,
+          "bottom": 1,
           "left": 6,
           "right": 6
         },
+        "icon_spacing": 4,
+        "icon_width": 14,
+        "height": 18,
         "message": {
           "family": "Zed Sans",
           "color": "#5e6687",
@@ -242,13 +244,17 @@
         "container_ok": {
           "corner_radius": 6,
           "padding": {
-            "left": 6,
-            "right": 6
+            "top": 3,
+            "bottom": 3,
+            "left": 7,
+            "right": 7
           }
         },
         "container_warning": {
           "corner_radius": 6,
           "padding": {
+            "top": 1,
+            "bottom": 1,
             "left": 6,
             "right": 6
           },
@@ -261,6 +267,8 @@
         "container_error": {
           "corner_radius": 6,
           "padding": {
+            "top": 1,
+            "bottom": 1,
             "left": 6,
             "right": 6
           },
@@ -275,14 +283,18 @@
           "container_ok": {
             "corner_radius": 6,
             "padding": {
-              "left": 6,
-              "right": 6
+              "top": 3,
+              "bottom": 3,
+              "left": 7,
+              "right": 7
             },
             "background": "#979db41f"
           },
           "container_warning": {
             "corner_radius": 6,
             "padding": {
+              "top": 1,
+              "bottom": 1,
               "left": 6,
               "right": 6
             },
@@ -295,6 +307,8 @@
           "container_error": {
             "corner_radius": 6,
             "padding": {
+              "top": 1,
+              "bottom": 1,
               "left": 6,
               "right": 6
             },
@@ -310,14 +324,14 @@
         "group_left": {},
         "group_right": {},
         "item": {
-          "icon_size": 14,
+          "corner_radius": 6,
           "padding": {
             "top": 3,
             "bottom": 3,
             "left": 6,
             "right": 6
           },
-          "corner_radius": 6,
+          "icon_size": 14,
           "icon_color": "#5e6687",
           "hover": {
             "icon_color": "#293256",

styles/src/styleTree/statusBar.ts 🔗 

@@ -0,0 +1,106 @@
+import Theme from "../themes/theme";
+import { backgroundColor, border, iconColor, text } from "./components";
+
+export default function statusBar(theme: Theme) {
+
+  const statusContainer = {
+    cornerRadius: 6,
+    padding: { top: 3, bottom: 3, left: 6, right: 6 }
+  }
+
+  const diagnosticStatusContainer = {
+    cornerRadius: 6,
+    padding: { top: 1, bottom: 1, left: 6, right: 6 }
+  }
+
+  return {
+    height: 30,
+    itemSpacing: 8,
+    padding: {
+      top: 1,
+      bottom: 1,
+      left: 6,
+      right: 6,
+    },
+    border: border(theme, "primary", { top: true, overlay: true }),
+    cursorPosition: text(theme, "sans", "muted"),
+    autoUpdateProgressMessage: text(theme, "sans", "muted"),
+    autoUpdateDoneMessage: text(theme, "sans", "muted"),
+    lspStatus: {
+      ...diagnosticStatusContainer,
+      iconSpacing: 4,
+      iconWidth: 14,
+      height: 18,
+      message: text(theme, "sans", "muted"),
+      iconColor: iconColor(theme, "muted"),
+      hover: {
+        message: text(theme, "sans", "primary"),
+        iconColor: iconColor(theme, "primary"),
+        background: backgroundColor(theme, 300, "hovered"),
+      }
+    },
+    diagnosticMessage: {
+      ...text(theme, "sans", "muted"),
+      hover: text(theme, "sans", "secondary"),
+    },
+    diagnosticSummary: {
+      height: 16,
+      iconWidth: 14,
+      iconSpacing: 2,
+      summarySpacing: 6,
+      text: text(theme, "sans", "primary", { size: "sm" }),
+      iconColorOk: iconColor(theme, "secondary"),
+      iconColorWarning: iconColor(theme, "warning"),
+      iconColorError: iconColor(theme, "error"),
+      containerOk: {
+        cornerRadius: 6,
+        padding: { top: 3, bottom: 3, left: 7, right: 7 },
+      },
+      containerWarning: {
+        ...diagnosticStatusContainer,
+        background: backgroundColor(theme, "warning"),
+        border: border(theme, "warning"),
+      },
+      containerError: {
+        ...diagnosticStatusContainer,
+        background: backgroundColor(theme, "error"),
+        border: border(theme, "error"),
+      },
+      hover: {
+        iconColorOk: iconColor(theme, "primary"),
+        containerOk: {
+          cornerRadius: 6,
+          padding: { top: 3, bottom: 3, left: 7, right: 7 },
+          background: backgroundColor(theme, 300, "hovered"),
+        },
+        containerWarning: {
+          ...diagnosticStatusContainer,
+          background: backgroundColor(theme, "warning", "hovered"),
+          border: border(theme, "warning"),
+        },
+        containerError: {
+          ...diagnosticStatusContainer,
+          background: backgroundColor(theme, "error", "hovered"),
+          border: border(theme, "error"),
+        }
+      },
+    },
+    sidebarButtons: {
+      groupLeft: {},
+      groupRight: {},
+      item: {
+        ...statusContainer,
+        iconSize: 14,
+        iconColor: iconColor(theme, "secondary"),
+        hover: {
+          iconColor: iconColor(theme, "primary"),
+          background: backgroundColor(theme, 300, "hovered"),
+        },
+        active: {
+          iconColor: iconColor(theme, "active"),
+          background: backgroundColor(theme, 300, "active"),
+        }
+      }
+    }
+  }
+}

styles/src/styleTree/workspace.ts 🔗 

@@ -1,7 +1,9 @@
 import Theme from "../themes/theme";
 import { backgroundColor, border, iconColor, text } from "./components";
+import statusBar from "./statusBar";
 
 export default function workspace(theme: Theme) {
+
   const tab = {
     height: 32,
     background: backgroundColor(theme, 300),
@@ -56,102 +58,7 @@ export default function workspace(theme: Theme) {
       color: border(theme, "secondary").color,
       width: 1,
     },
-    statusBar: {
-      height: 30,
-      itemSpacing: 8,
-      padding: {
-        top: 1,
-        bottom: 1,
-        left: 6,
-        right: 6,
-      },
-      border: border(theme, "primary", { top: true, overlay: true }),
-      cursorPosition: text(theme, "sans", "muted"),
-      autoUpdateProgressMessage: text(theme, "sans", "muted"),
-      autoUpdateDoneMessage: text(theme, "sans", "muted"),
-      lspStatus: {
-        iconSpacing: 4,
-        iconWidth: 14,
-        height: 18,
-        cornerRadius: 6,
-        padding: { left: 6, right: 6 },
-        message: text(theme, "sans", "muted"),
-        iconColor: iconColor(theme, "muted"),
-        hover: {
-          message: text(theme, "sans", "primary"),
-          iconColor: iconColor(theme, "primary"),
-          background: backgroundColor(theme, 300, "hovered"),
-        }
-      },
-      diagnosticMessage: {
-        ...text(theme, "sans", "muted"),
-        hover: text(theme, "sans", "secondary"),
-      },
-      diagnosticSummary: {
-        height: 16,
-        iconWidth: 14,
-        iconSpacing: 2,
-        summarySpacing: 6,
-        text: text(theme, "sans", "primary", { size: "sm" }),
-        iconColorOk: iconColor(theme, "secondary"),
-        iconColorWarning: iconColor(theme, "warning"),
-        iconColorError: iconColor(theme, "error"),
-        containerOk: {
-          cornerRadius: 6,
-          padding: { left: 6, right: 6 },
-        },
-        containerWarning: {
-          cornerRadius: 6,
-          padding: { left: 6, right: 6 },
-          background: backgroundColor(theme, "warning"),
-          border: border(theme, "warning"),
-        },
-        containerError: {
-          cornerRadius: 6,
-          padding: { left: 6, right: 6 },
-          background: backgroundColor(theme, "error"),
-          border: border(theme, "error"),
-        },
-        hover: {
-          iconColorOk: iconColor(theme, "primary"),
-          containerOk: {
-            cornerRadius: 6,
-            padding: { left: 6, right: 6 },
-            background: backgroundColor(theme, 300, "hovered"),
-          },
-          containerWarning: {
-            cornerRadius: 6,
-            padding: { left: 6, right: 6 },
-            background: backgroundColor(theme, "warning", "hovered"),
-            border: border(theme, "warning"),
-          },
-          containerError: {
-            cornerRadius: 6,
-            padding: { left: 6, right: 6 },
-            background: backgroundColor(theme, "error", "hovered"),
-            border: border(theme, "error"),
-          }
-        },
-      },
-      sidebarButtons: {
-        groupLeft: {},
-        groupRight: {},
-        item: {
-          iconSize: 14,
-          padding: { top: 3, bottom: 3, left: 6, right: 6 },
-          cornerRadius: 6,
-          iconColor: iconColor(theme, "secondary"),
-          hover: {
-            iconColor: iconColor(theme, "primary"),
-            background: backgroundColor(theme, 300, "hovered"),
-          },
-          active: {
-            iconColor: iconColor(theme, "active"),
-            background: backgroundColor(theme, 300, "active"),
-          }
-        },
-      },
-    },
+    statusBar: statusBar(theme),
     titlebar: {
       avatarWidth: 18,
       height: 32,