Statusbar style tweaks

Nate Butler created 3 years ago

Change summary

assets/themes/cave-dark.json         | 33 ++++++++++++-------------
assets/themes/cave-light.json        | 33 ++++++++++++-------------
assets/themes/dark.json              | 37 ++++++++++++++---------------
assets/themes/light.json             | 37 ++++++++++++++---------------
assets/themes/solarized-dark.json    | 33 ++++++++++++-------------
assets/themes/solarized-light.json   | 33 ++++++++++++-------------
assets/themes/sulphurpool-dark.json  | 33 ++++++++++++-------------
assets/themes/sulphurpool-light.json | 33 ++++++++++++-------------
styles/src/styleTree/workspace.ts    | 20 +++++++++------
9 files changed, 144 insertions(+), 148 deletions(-)

Detailed changes

assets/themes/cave-dark.json

@@ -172,9 +172,11 @@
       "width": 1
     },
     "status_bar": {
-      "height": 24,
-      "item_spacing": 12,
+      "height": 30,
+      "item_spacing": 8,
       "padding": {
+        "top": 1,
+        "bottom": 1,
         "left": 6,
         "right": 6
       },
@@ -235,7 +237,9 @@
           "family": "Zed Sans",
           "color": "#e2dfe7",
           "size": 14,
-          "hover": {}
+          "hover": {
+            "background": "#58526052"
+          }
         },
         "summary_warning": {
           "corner_radius": 6,
@@ -294,15 +298,17 @@
         "group_left": {},
         "group_right": {},
         "item": {
-          "icon_size": 18,
+          "icon_size": 14,
           "padding": {
-            "left": 5,
-            "right": 5
+            "top": 3,
+            "bottom": 3,
+            "left": 6,
+            "right": 6
           },
-          "corner_radius": 5,
+          "corner_radius": 6,
           "icon_color": "#8b8792",
           "hover": {
-            "icon_color": "#8b8792",
+            "icon_color": "#e2dfe7",
             "background": "#58526052"
           },
           "active": {
@@ -874,21 +880,14 @@
     }
   },
   "project_diagnostics": {
+    "background": "#19171c",
     "tab_icon_spacing": 4,
     "tab_icon_width": 13,
     "tab_summary_spacing": 10,
     "empty_message": {
-      "family": "Zed Sans",
-      "color": "#e2dfe7",
-      "size": 18
-    },
-    "status_bar_item": {
       "family": "Zed Sans",
       "color": "#8b8792",
-      "size": 14,
-      "margin": {
-        "right": 10
-      }
+      "size": 16
     }
   },
   "command_palette": {

assets/themes/cave-light.json

@@ -172,9 +172,11 @@
       "width": 1
     },
     "status_bar": {
-      "height": 24,
-      "item_spacing": 12,
+      "height": 30,
+      "item_spacing": 8,
       "padding": {
+        "top": 1,
+        "bottom": 1,
         "left": 6,
         "right": 6
       },
@@ -235,7 +237,9 @@
           "family": "Zed Sans",
           "color": "#26232a",
           "size": 14,
-          "hover": {}
+          "hover": {
+            "background": "#8b87921f"
+          }
         },
         "summary_warning": {
           "corner_radius": 6,
@@ -294,15 +298,17 @@
         "group_left": {},
         "group_right": {},
         "item": {
-          "icon_size": 18,
+          "icon_size": 14,
           "padding": {
-            "left": 5,
-            "right": 5
+            "top": 3,
+            "bottom": 3,
+            "left": 6,
+            "right": 6
           },
-          "corner_radius": 5,
+          "corner_radius": 6,
           "icon_color": "#585260",
           "hover": {
-            "icon_color": "#585260",
+            "icon_color": "#26232a",
             "background": "#8b87921f"
           },
           "active": {
@@ -874,21 +880,14 @@
     }
   },
   "project_diagnostics": {
+    "background": "#efecf4",
     "tab_icon_spacing": 4,
     "tab_icon_width": 13,
     "tab_summary_spacing": 10,
     "empty_message": {
-      "family": "Zed Sans",
-      "color": "#26232a",
-      "size": 18
-    },
-    "status_bar_item": {
       "family": "Zed Sans",
       "color": "#585260",
-      "size": 14,
-      "margin": {
-        "right": 10
-      }
+      "size": 16
     }
   },
   "command_palette": {

assets/themes/dark.json

@@ -172,9 +172,11 @@
       "width": 1
     },
     "status_bar": {
-      "height": 24,
-      "item_spacing": 12,
+      "height": 30,
+      "item_spacing": 8,
       "padding": {
+        "top": 1,
+        "bottom": 1,
         "left": 6,
         "right": 6
       },
@@ -235,7 +237,9 @@
           "family": "Zed Sans",
           "color": "#f1f1f1",
           "size": 14,
-          "hover": {}
+          "hover": {
+            "background": "#232323"
+          }
         },
         "summary_warning": {
           "corner_radius": 6,
@@ -294,15 +298,17 @@
         "group_left": {},
         "group_right": {},
         "item": {
-          "icon_size": 18,
+          "icon_size": 14,
           "padding": {
-            "left": 5,
-            "right": 5
+            "top": 3,
+            "bottom": 3,
+            "left": 6,
+            "right": 6
           },
-          "corner_radius": 5,
-          "icon_color": "#555555",
+          "corner_radius": 6,
+          "icon_color": "#9c9c9c",
           "hover": {
-            "icon_color": "#9c9c9c",
+            "icon_color": "#c6c6c6",
             "background": "#232323"
           },
           "active": {
@@ -874,21 +880,14 @@
     }
   },
   "project_diagnostics": {
+    "background": "#000000",
     "tab_icon_spacing": 4,
     "tab_icon_width": 13,
     "tab_summary_spacing": 10,
     "empty_message": {
       "family": "Zed Sans",
-      "color": "#f1f1f1",
-      "size": 18
-    },
-    "status_bar_item": {
-      "family": "Zed Sans",
-      "color": "#808080",
-      "size": 14,
-      "margin": {
-        "right": 10
-      }
+      "color": "#9c9c9c",
+      "size": 16
     }
   },
   "command_palette": {

assets/themes/light.json

@@ -172,9 +172,11 @@
       "width": 1
     },
     "status_bar": {
-      "height": 24,
-      "item_spacing": 12,
+      "height": 30,
+      "item_spacing": 8,
       "padding": {
+        "top": 1,
+        "bottom": 1,
         "left": 6,
         "right": 6
       },
@@ -235,7 +237,9 @@
           "family": "Zed Sans",
           "color": "#2b2b2b",
           "size": 14,
-          "hover": {}
+          "hover": {
+            "background": "#eaeaea"
+          }
         },
         "summary_warning": {
           "corner_radius": 6,
@@ -294,15 +298,17 @@
         "group_left": {},
         "group_right": {},
         "item": {
-          "icon_size": 18,
+          "icon_size": 14,
           "padding": {
-            "left": 5,
-            "right": 5
+            "top": 3,
+            "bottom": 3,
+            "left": 6,
+            "right": 6
           },
-          "corner_radius": 5,
-          "icon_color": "#9c9c9c",
+          "corner_radius": 6,
+          "icon_color": "#717171",
           "hover": {
-            "icon_color": "#717171",
+            "icon_color": "#393939",
             "background": "#eaeaea"
           },
           "active": {
@@ -874,21 +880,14 @@
     }
   },
   "project_diagnostics": {
+    "background": "#ffffff",
     "tab_icon_spacing": 4,
     "tab_icon_width": 13,
     "tab_summary_spacing": 10,
     "empty_message": {
       "family": "Zed Sans",
-      "color": "#2b2b2b",
-      "size": 18
-    },
-    "status_bar_item": {
-      "family": "Zed Sans",
-      "color": "#636363",
-      "size": 14,
-      "margin": {
-        "right": 10
-      }
+      "color": "#474747",
+      "size": 16
     }
   },
   "command_palette": {

assets/themes/solarized-dark.json

@@ -172,9 +172,11 @@
       "width": 1
     },
     "status_bar": {
-      "height": 24,
-      "item_spacing": 12,
+      "height": 30,
+      "item_spacing": 8,
       "padding": {
+        "top": 1,
+        "bottom": 1,
         "left": 6,
         "right": 6
       },
@@ -235,7 +237,9 @@
           "family": "Zed Sans",
           "color": "#eee8d5",
           "size": 14,
-          "hover": {}
+          "hover": {
+            "background": "#586e7552"
+          }
         },
         "summary_warning": {
           "corner_radius": 6,
@@ -294,15 +298,17 @@
         "group_left": {},
         "group_right": {},
         "item": {
-          "icon_size": 18,
+          "icon_size": 14,
           "padding": {
-            "left": 5,
-            "right": 5
+            "top": 3,
+            "bottom": 3,
+            "left": 6,
+            "right": 6
           },
-          "corner_radius": 5,
+          "corner_radius": 6,
           "icon_color": "#93a1a1",
           "hover": {
-            "icon_color": "#93a1a1",
+            "icon_color": "#eee8d5",
             "background": "#586e7552"
           },
           "active": {
@@ -874,21 +880,14 @@
     }
   },
   "project_diagnostics": {
+    "background": "#002b36",
     "tab_icon_spacing": 4,
     "tab_icon_width": 13,
     "tab_summary_spacing": 10,
     "empty_message": {
-      "family": "Zed Sans",
-      "color": "#eee8d5",
-      "size": 18
-    },
-    "status_bar_item": {
       "family": "Zed Sans",
       "color": "#93a1a1",
-      "size": 14,
-      "margin": {
-        "right": 10
-      }
+      "size": 16
     }
   },
   "command_palette": {

assets/themes/solarized-light.json

@@ -172,9 +172,11 @@
       "width": 1
     },
     "status_bar": {
-      "height": 24,
-      "item_spacing": 12,
+      "height": 30,
+      "item_spacing": 8,
       "padding": {
+        "top": 1,
+        "bottom": 1,
         "left": 6,
         "right": 6
       },
@@ -235,7 +237,9 @@
           "family": "Zed Sans",
           "color": "#073642",
           "size": 14,
-          "hover": {}
+          "hover": {
+            "background": "#93a1a11f"
+          }
         },
         "summary_warning": {
           "corner_radius": 6,
@@ -294,15 +298,17 @@
         "group_left": {},
         "group_right": {},
         "item": {
-          "icon_size": 18,
+          "icon_size": 14,
           "padding": {
-            "left": 5,
-            "right": 5
+            "top": 3,
+            "bottom": 3,
+            "left": 6,
+            "right": 6
           },
-          "corner_radius": 5,
+          "corner_radius": 6,
           "icon_color": "#586e75",
           "hover": {
-            "icon_color": "#586e75",
+            "icon_color": "#073642",
             "background": "#93a1a11f"
           },
           "active": {
@@ -874,21 +880,14 @@
     }
   },
   "project_diagnostics": {
+    "background": "#fdf6e3",
     "tab_icon_spacing": 4,
     "tab_icon_width": 13,
     "tab_summary_spacing": 10,
     "empty_message": {
-      "family": "Zed Sans",
-      "color": "#073642",
-      "size": 18
-    },
-    "status_bar_item": {
       "family": "Zed Sans",
       "color": "#586e75",
-      "size": 14,
-      "margin": {
-        "right": 10
-      }
+      "size": 16
     }
   },
   "command_palette": {

assets/themes/sulphurpool-dark.json

@@ -172,9 +172,11 @@
       "width": 1
     },
     "status_bar": {
-      "height": 24,
-      "item_spacing": 12,
+      "height": 30,
+      "item_spacing": 8,
       "padding": {
+        "top": 1,
+        "bottom": 1,
         "left": 6,
         "right": 6
       },
@@ -235,7 +237,9 @@
           "family": "Zed Sans",
           "color": "#dfe2f1",
           "size": 14,
-          "hover": {}
+          "hover": {
+            "background": "#5e668752"
+          }
         },
         "summary_warning": {
           "corner_radius": 6,
@@ -294,15 +298,17 @@
         "group_left": {},
         "group_right": {},
         "item": {
-          "icon_size": 18,
+          "icon_size": 14,
           "padding": {
-            "left": 5,
-            "right": 5
+            "top": 3,
+            "bottom": 3,
+            "left": 6,
+            "right": 6
           },
-          "corner_radius": 5,
+          "corner_radius": 6,
           "icon_color": "#979db4",
           "hover": {
-            "icon_color": "#979db4",
+            "icon_color": "#dfe2f1",
             "background": "#5e668752"
           },
           "active": {
@@ -874,21 +880,14 @@
     }
   },
   "project_diagnostics": {
+    "background": "#202746",
     "tab_icon_spacing": 4,
     "tab_icon_width": 13,
     "tab_summary_spacing": 10,
     "empty_message": {
-      "family": "Zed Sans",
-      "color": "#dfe2f1",
-      "size": 18
-    },
-    "status_bar_item": {
       "family": "Zed Sans",
       "color": "#979db4",
-      "size": 14,
-      "margin": {
-        "right": 10
-      }
+      "size": 16
     }
   },
   "command_palette": {

assets/themes/sulphurpool-light.json

@@ -172,9 +172,11 @@
       "width": 1
     },
     "status_bar": {
-      "height": 24,
-      "item_spacing": 12,
+      "height": 30,
+      "item_spacing": 8,
       "padding": {
+        "top": 1,
+        "bottom": 1,
         "left": 6,
         "right": 6
       },
@@ -235,7 +237,9 @@
           "family": "Zed Sans",
           "color": "#293256",
           "size": 14,
-          "hover": {}
+          "hover": {
+            "background": "#979db41f"
+          }
         },
         "summary_warning": {
           "corner_radius": 6,
@@ -294,15 +298,17 @@
         "group_left": {},
         "group_right": {},
         "item": {
-          "icon_size": 18,
+          "icon_size": 14,
           "padding": {
-            "left": 5,
-            "right": 5
+            "top": 3,
+            "bottom": 3,
+            "left": 6,
+            "right": 6
           },
-          "corner_radius": 5,
+          "corner_radius": 6,
           "icon_color": "#5e6687",
           "hover": {
-            "icon_color": "#5e6687",
+            "icon_color": "#293256",
             "background": "#979db41f"
           },
           "active": {
@@ -874,21 +880,14 @@
     }
   },
   "project_diagnostics": {
+    "background": "#f5f7ff",
     "tab_icon_spacing": 4,
     "tab_icon_width": 13,
     "tab_summary_spacing": 10,
     "empty_message": {
-      "family": "Zed Sans",
-      "color": "#293256",
-      "size": 18
-    },
-    "status_bar_item": {
       "family": "Zed Sans",
       "color": "#5e6687",
-      "size": 14,
-      "margin": {
-        "right": 10
-      }
+      "size": 16
     }
   },
   "command_palette": {

styles/src/styleTree/workspace.ts

@@ -81,9 +81,11 @@ export default function workspace(theme: Theme) {
       width: 1,
     },
     statusBar: {
-      height: 24,
-      itemSpacing: 12,
+      height: 30,
+      itemSpacing: 8,
       padding: {
+        top: 1,
+        bottom: 1,
         left: 6,
         right: 6,
       },
@@ -109,7 +111,9 @@ export default function workspace(theme: Theme) {
         height: 16,
         summaryOk: {
           ...diagnosticSummary,
-          hover: {}
+          hover: {
+            background: backgroundColor(theme, 300, "hovered"),
+          }
         },
         summaryWarning: {
           ...diagnosticSummary,
@@ -142,12 +146,12 @@ export default function workspace(theme: Theme) {
         groupLeft: {},
         groupRight: {},
         item: {
-          iconSize: 18,
-          padding: { left: 5, right: 5 },
-          cornerRadius: 5,
-          iconColor: iconColor(theme, "muted"),
+          iconSize: 14,
+          padding: { top: 3, bottom: 3, left: 6, right: 6 },
+          cornerRadius: 6,
+          iconColor: iconColor(theme, "secondary"),
           hover: {
-            iconColor: iconColor(theme, "secondary"),
+            iconColor: iconColor(theme, "primary"),
             background: backgroundColor(theme, 300, "hovered"),
           },
           active: {