Merge pull request #942 from zed-industries/style-status-bar

Update Zed styles

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",
@@ -332,7 +346,7 @@
     },
     "titlebar": {
       "avatar_width": 18,
-      "height": 32,
+      "height": 33,
       "background": "#26232a",
       "padding": {
         "left": 80
@@ -356,7 +370,8 @@
       "border": {
         "color": "#19171c",
         "width": 1,
-        "bottom": true
+        "bottom": true,
+        "overlay": true
       },
       "sign_in_prompt": {
         "border": {
@@ -411,7 +426,17 @@
       "outdated_warning": {
         "family": "Zed Sans",
         "color": "#a06e3b",
-        "size": 13,
+        "size": 12,
+        "background": "#a06e3b26",
+        "border": {
+          "color": "#a06e3b26",
+          "width": 1
+        },
+        "padding": {
+          "left": 6,
+          "right": 6
+        },
+        "corner_radius": 6,
         "margin": {
           "right": 6
         }
@@ -524,7 +549,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#26232a"
+        "background": "#26232a52"
       },
       "margin": {
         "left": -14
@@ -542,7 +567,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#26232a"
+        "background": "#26232a7a"
       }
     },
     "diagnostic_header": {
@@ -908,11 +933,13 @@
   },
   "project_panel": {
     "padding": {
+      "left": 12,
+      "right": 12,
       "top": 6,
-      "left": 12
+      "bottom": 6
     },
     "entry": {
-      "height": 22,
+      "height": 24,
       "icon_color": "#8b8792",
       "icon_size": 8,
       "icon_spacing": 8,
@@ -923,19 +950,19 @@
       }
     },
     "hovered_entry": {
-      "height": 22,
+      "height": 24,
       "background": "#58526052",
       "icon_color": "#8b8792",
       "icon_size": 8,
       "icon_spacing": 8,
       "text": {
         "family": "Zed Mono",
-        "color": "#8b8792",
+        "color": "#e2dfe7",
         "size": 14
       }
     },
     "selected_entry": {
-      "height": 22,
+      "height": 24,
       "icon_color": "#8b8792",
       "icon_size": 8,
       "icon_spacing": 8,
@@ -946,14 +973,14 @@
       }
     },
     "hovered_selected_entry": {
-      "height": 22,
+      "height": 24,
       "background": "#58526052",
       "icon_color": "#8b8792",
       "icon_size": 8,
       "icon_spacing": 8,
       "text": {
         "family": "Zed Mono",
-        "color": "#e2dfe7",
+        "color": "#efecf4",
         "size": 14
       }
     }
@@ -1309,26 +1336,25 @@
       "color": "#8b8792",
       "size": 14,
       "background": "#26232a",
-      "corner_radius": 4,
+      "corner_radius": 6,
       "border": {
         "color": "#26232a",
         "width": 1
       },
       "margin": {
-        "left": 2,
-        "right": 2
+        "right": 4
       },
       "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
+        "bottom": 2,
+        "left": 10,
+        "right": 10,
+        "top": 2
       },
       "active": {
         "family": "Zed Mono",
         "color": "#efecf4",
         "size": 14,
-        "background": "#655f6d",
+        "background": "#585260a3",
         "border": {
           "color": "#655f6d",
           "width": 1
@@ -1338,7 +1364,7 @@
         "family": "Zed Mono",
         "color": "#efecf4",
         "size": 14,
-        "background": "#655f6d",
+        "background": "#58526052",
         "border": {
           "color": "#655f6d",
           "width": 1
@@ -1369,7 +1395,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1402,7 +1428,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1419,8 +1445,8 @@
     },
     "option_button_group": {
       "padding": {
-        "left": 4,
-        "right": 4
+        "left": 12,
+        "right": 12
       }
     },
     "results_status": {

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",
@@ -332,7 +346,7 @@
     },
     "titlebar": {
       "avatar_width": 18,
-      "height": 32,
+      "height": 33,
       "background": "#e2dfe7",
       "padding": {
         "left": 80
@@ -356,7 +370,8 @@
       "border": {
         "color": "#efecf4",
         "width": 1,
-        "bottom": true
+        "bottom": true,
+        "overlay": true
       },
       "sign_in_prompt": {
         "border": {
@@ -411,7 +426,17 @@
       "outdated_warning": {
         "family": "Zed Sans",
         "color": "#a06e3b",
-        "size": 13,
+        "size": 12,
+        "background": "#a06e3b26",
+        "border": {
+          "color": "#a06e3b26",
+          "width": 1
+        },
+        "padding": {
+          "left": 6,
+          "right": 6
+        },
+        "corner_radius": 6,
         "margin": {
           "right": 6
         }
@@ -524,7 +549,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#e2dfe7"
+        "background": "#e2dfe71f"
       },
       "margin": {
         "left": -14
@@ -542,7 +567,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#e2dfe7"
+        "background": "#e2dfe72e"
       }
     },
     "diagnostic_header": {
@@ -908,11 +933,13 @@
   },
   "project_panel": {
     "padding": {
+      "left": 12,
+      "right": 12,
       "top": 6,
-      "left": 12
+      "bottom": 6
     },
     "entry": {
-      "height": 22,
+      "height": 24,
       "icon_color": "#585260",
       "icon_size": 8,
       "icon_spacing": 8,
@@ -923,19 +950,19 @@
       }
     },
     "hovered_entry": {
-      "height": 22,
+      "height": 24,
       "background": "#8b87921f",
       "icon_color": "#585260",
       "icon_size": 8,
       "icon_spacing": 8,
       "text": {
         "family": "Zed Mono",
-        "color": "#585260",
+        "color": "#26232a",
         "size": 14
       }
     },
     "selected_entry": {
-      "height": 22,
+      "height": 24,
       "icon_color": "#585260",
       "icon_size": 8,
       "icon_spacing": 8,
@@ -946,14 +973,14 @@
       }
     },
     "hovered_selected_entry": {
-      "height": 22,
+      "height": 24,
       "background": "#8b87921f",
       "icon_color": "#585260",
       "icon_size": 8,
       "icon_spacing": 8,
       "text": {
         "family": "Zed Mono",
-        "color": "#26232a",
+        "color": "#19171c",
         "size": 14
       }
     }
@@ -1309,26 +1336,25 @@
       "color": "#585260",
       "size": 14,
       "background": "#e2dfe7",
-      "corner_radius": 4,
+      "corner_radius": 6,
       "border": {
         "color": "#e2dfe7",
         "width": 1
       },
       "margin": {
-        "left": 2,
-        "right": 2
+        "right": 4
       },
       "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
+        "bottom": 2,
+        "left": 10,
+        "right": 10,
+        "top": 2
       },
       "active": {
         "family": "Zed Mono",
         "color": "#19171c",
         "size": 14,
-        "background": "#7e7887",
+        "background": "#8b87923d",
         "border": {
           "color": "#7e7887",
           "width": 1
@@ -1338,7 +1364,7 @@
         "family": "Zed Mono",
         "color": "#19171c",
         "size": 14,
-        "background": "#7e7887",
+        "background": "#8b87921f",
         "border": {
           "color": "#7e7887",
           "width": 1
@@ -1369,7 +1395,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1402,7 +1428,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1419,8 +1445,8 @@
     },
     "option_button_group": {
       "padding": {
-        "left": 4,
-        "right": 4
+        "left": 12,
+        "right": 12
       }
     },
     "results_status": {

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",
@@ -332,7 +346,7 @@
     },
     "titlebar": {
       "avatar_width": 18,
-      "height": 32,
+      "height": 33,
       "background": "#2b2b2b",
       "padding": {
         "left": 80
@@ -356,7 +370,8 @@
       "border": {
         "color": "#070707",
         "width": 1,
-        "bottom": true
+        "bottom": true,
+        "overlay": true
       },
       "sign_in_prompt": {
         "border": {
@@ -411,7 +426,17 @@
       "outdated_warning": {
         "family": "Zed Sans",
         "color": "#f7bb57",
-        "size": 13,
+        "size": 12,
+        "background": "#f6a72426",
+        "border": {
+          "color": "#f6a72426",
+          "width": 1
+        },
+        "padding": {
+          "left": 6,
+          "right": 6
+        },
+        "corner_radius": 6,
         "margin": {
           "right": 6
         }
@@ -908,34 +933,36 @@
   },
   "project_panel": {
     "padding": {
+      "left": 12,
+      "right": 12,
       "top": 6,
-      "left": 12
+      "bottom": 6
     },
     "entry": {
-      "height": 22,
+      "height": 24,
       "icon_color": "#555555",
       "icon_size": 8,
       "icon_spacing": 8,
       "text": {
         "family": "Zed Mono",
-        "color": "#9c9c9c",
+        "color": "#808080",
         "size": 14
       }
     },
     "hovered_entry": {
-      "height": 22,
+      "height": 24,
       "background": "#232323",
       "icon_color": "#555555",
       "icon_size": 8,
       "icon_spacing": 8,
       "text": {
         "family": "Zed Mono",
-        "color": "#9c9c9c",
+        "color": "#f1f1f1",
         "size": 14
       }
     },
     "selected_entry": {
-      "height": 22,
+      "height": 24,
       "icon_color": "#555555",
       "icon_size": 8,
       "icon_spacing": 8,
@@ -946,14 +973,14 @@
       }
     },
     "hovered_selected_entry": {
-      "height": 22,
+      "height": 24,
       "background": "#232323",
       "icon_color": "#555555",
       "icon_size": 8,
       "icon_spacing": 8,
       "text": {
         "family": "Zed Mono",
-        "color": "#f1f1f1",
+        "color": "#ffffff",
         "size": 14
       }
     }
@@ -1309,20 +1336,19 @@
       "color": "#9c9c9c",
       "size": 14,
       "background": "#0e0e0e",
-      "corner_radius": 4,
+      "corner_radius": 6,
       "border": {
         "color": "#232323",
         "width": 1
       },
       "margin": {
-        "left": 2,
-        "right": 2
+        "right": 4
       },
       "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
+        "bottom": 2,
+        "left": 10,
+        "right": 10,
+        "top": 2
       },
       "active": {
         "family": "Zed Mono",
@@ -1369,7 +1395,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1402,7 +1428,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1419,8 +1445,8 @@
     },
     "option_button_group": {
       "padding": {
-        "left": 4,
-        "right": 4
+        "left": 12,
+        "right": 12
       }
     },
     "results_status": {

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",
@@ -332,7 +346,7 @@
     },
     "titlebar": {
       "avatar_width": 18,
-      "height": 32,
+      "height": 33,
       "background": "#eaeaea",
       "padding": {
         "left": 80
@@ -356,7 +370,8 @@
       "border": {
         "color": "#d5d5d5",
         "width": 1,
-        "bottom": true
+        "bottom": true,
+        "overlay": true
       },
       "sign_in_prompt": {
         "border": {
@@ -411,7 +426,17 @@
       "outdated_warning": {
         "family": "Zed Sans",
         "color": "#d3a20b",
-        "size": 13,
+        "size": 12,
+        "background": "#f6a72426",
+        "border": {
+          "color": "#f6a72426",
+          "width": 1
+        },
+        "padding": {
+          "left": 6,
+          "right": 6
+        },
+        "corner_radius": 6,
         "margin": {
           "right": 6
         }
@@ -908,34 +933,36 @@
   },
   "project_panel": {
     "padding": {
+      "left": 12,
+      "right": 12,
       "top": 6,
-      "left": 12
+      "bottom": 6
     },
     "entry": {
-      "height": 22,
+      "height": 24,
       "icon_color": "#9c9c9c",
       "icon_size": 8,
       "icon_spacing": 8,
       "text": {
         "family": "Zed Mono",
-        "color": "#474747",
+        "color": "#636363",
         "size": 14
       }
     },
     "hovered_entry": {
-      "height": 22,
+      "height": 24,
       "background": "#eaeaea",
       "icon_color": "#9c9c9c",
       "icon_size": 8,
       "icon_spacing": 8,
       "text": {
         "family": "Zed Mono",
-        "color": "#474747",
+        "color": "#2b2b2b",
         "size": 14
       }
     },
     "selected_entry": {
-      "height": 22,
+      "height": 24,
       "icon_color": "#9c9c9c",
       "icon_size": 8,
       "icon_spacing": 8,
@@ -946,14 +973,14 @@
       }
     },
     "hovered_selected_entry": {
-      "height": 22,
+      "height": 24,
       "background": "#eaeaea",
       "icon_color": "#9c9c9c",
       "icon_size": 8,
       "icon_spacing": 8,
       "text": {
         "family": "Zed Mono",
-        "color": "#2b2b2b",
+        "color": "#000000",
         "size": 14
       }
     }
@@ -1309,20 +1336,19 @@
       "color": "#474747",
       "size": 14,
       "background": "#f1f1f1",
-      "corner_radius": 4,
+      "corner_radius": 6,
       "border": {
         "color": "#d5d5d5",
         "width": 1
       },
       "margin": {
-        "left": 2,
-        "right": 2
+        "right": 4
       },
       "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
+        "bottom": 2,
+        "left": 10,
+        "right": 10,
+        "top": 2
       },
       "active": {
         "family": "Zed Mono",
@@ -1369,7 +1395,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1402,7 +1428,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1419,8 +1445,8 @@
     },
     "option_button_group": {
       "padding": {
-        "left": 4,
-        "right": 4
+        "left": 12,
+        "right": 12
       }
     },
     "results_status": {

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",
@@ -332,7 +346,7 @@
     },
     "titlebar": {
       "avatar_width": 18,
-      "height": 32,
+      "height": 33,
       "background": "#073642",
       "padding": {
         "left": 80
@@ -356,7 +370,8 @@
       "border": {
         "color": "#002b36",
         "width": 1,
-        "bottom": true
+        "bottom": true,
+        "overlay": true
       },
       "sign_in_prompt": {
         "border": {
@@ -411,7 +426,17 @@
       "outdated_warning": {
         "family": "Zed Sans",
         "color": "#b58900",
-        "size": 13,
+        "size": 12,
+        "background": "#b5890026",
+        "border": {
+          "color": "#b5890026",
+          "width": 1
+        },
+        "padding": {
+          "left": 6,
+          "right": 6
+        },
+        "corner_radius": 6,
         "margin": {
           "right": 6
         }
@@ -524,7 +549,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#073642"
+        "background": "#07364252"
       },
       "margin": {
         "left": -14
@@ -542,7 +567,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#073642"
+        "background": "#0736427a"
       }
     },
     "diagnostic_header": {
@@ -908,11 +933,13 @@
   },
   "project_panel": {
     "padding": {
+      "left": 12,
+      "right": 12,
       "top": 6,
-      "left": 12
+      "bottom": 6
     },
     "entry": {
-      "height": 22,
+      "height": 24,
       "icon_color": "#93a1a1",
       "icon_size": 8,
       "icon_spacing": 8,
@@ -923,19 +950,19 @@
       }
     },
     "hovered_entry": {
-      "height": 22,
+      "height": 24,
       "background": "#586e7552",
       "icon_color": "#93a1a1",
       "icon_size": 8,
       "icon_spacing": 8,
       "text": {
         "family": "Zed Mono",
-        "color": "#93a1a1",
+        "color": "#eee8d5",
         "size": 14
       }
     },
     "selected_entry": {
-      "height": 22,
+      "height": 24,
       "icon_color": "#93a1a1",
       "icon_size": 8,
       "icon_spacing": 8,
@@ -946,14 +973,14 @@
       }
     },
     "hovered_selected_entry": {
-      "height": 22,
+      "height": 24,
       "background": "#586e7552",
       "icon_color": "#93a1a1",
       "icon_size": 8,
       "icon_spacing": 8,
       "text": {
         "family": "Zed Mono",
-        "color": "#eee8d5",
+        "color": "#fdf6e3",
         "size": 14
       }
     }
@@ -1309,26 +1336,25 @@
       "color": "#93a1a1",
       "size": 14,
       "background": "#073642",
-      "corner_radius": 4,
+      "corner_radius": 6,
       "border": {
         "color": "#073642",
         "width": 1
       },
       "margin": {
-        "left": 2,
-        "right": 2
+        "right": 4
       },
       "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
+        "bottom": 2,
+        "left": 10,
+        "right": 10,
+        "top": 2
       },
       "active": {
         "family": "Zed Mono",
         "color": "#fdf6e3",
         "size": 14,
-        "background": "#657b83",
+        "background": "#586e75a3",
         "border": {
           "color": "#657b83",
           "width": 1
@@ -1338,7 +1364,7 @@
         "family": "Zed Mono",
         "color": "#fdf6e3",
         "size": 14,
-        "background": "#657b83",
+        "background": "#586e7552",
         "border": {
           "color": "#657b83",
           "width": 1
@@ -1369,7 +1395,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1402,7 +1428,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1419,8 +1445,8 @@
     },
     "option_button_group": {
       "padding": {
-        "left": 4,
-        "right": 4
+        "left": 12,
+        "right": 12
       }
     },
     "results_status": {

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",
@@ -332,7 +346,7 @@
     },
     "titlebar": {
       "avatar_width": 18,
-      "height": 32,
+      "height": 33,
       "background": "#eee8d5",
       "padding": {
         "left": 80
@@ -356,7 +370,8 @@
       "border": {
         "color": "#fdf6e3",
         "width": 1,
-        "bottom": true
+        "bottom": true,
+        "overlay": true
       },
       "sign_in_prompt": {
         "border": {
@@ -411,7 +426,17 @@
       "outdated_warning": {
         "family": "Zed Sans",
         "color": "#b58900",
-        "size": 13,
+        "size": 12,
+        "background": "#b5890026",
+        "border": {
+          "color": "#b5890026",
+          "width": 1
+        },
+        "padding": {
+          "left": 6,
+          "right": 6
+        },
+        "corner_radius": 6,
         "margin": {
           "right": 6
         }
@@ -524,7 +549,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#eee8d5"
+        "background": "#eee8d51f"
       },
       "margin": {
         "left": -14
@@ -542,7 +567,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#eee8d5"
+        "background": "#eee8d52e"
       }
     },
     "diagnostic_header": {
@@ -908,11 +933,13 @@
   },
   "project_panel": {
     "padding": {
+      "left": 12,
+      "right": 12,
       "top": 6,
-      "left": 12
+      "bottom": 6
     },
     "entry": {
-      "height": 22,
+      "height": 24,
       "icon_color": "#586e75",
       "icon_size": 8,
       "icon_spacing": 8,
@@ -923,19 +950,19 @@
       }
     },
     "hovered_entry": {
-      "height": 22,
+      "height": 24,
       "background": "#93a1a11f",
       "icon_color": "#586e75",
       "icon_size": 8,
       "icon_spacing": 8,
       "text": {
         "family": "Zed Mono",
-        "color": "#586e75",
+        "color": "#073642",
         "size": 14
       }
     },
     "selected_entry": {
-      "height": 22,
+      "height": 24,
       "icon_color": "#586e75",
       "icon_size": 8,
       "icon_spacing": 8,
@@ -946,14 +973,14 @@
       }
     },
     "hovered_selected_entry": {
-      "height": 22,
+      "height": 24,
       "background": "#93a1a11f",
       "icon_color": "#586e75",
       "icon_size": 8,
       "icon_spacing": 8,
       "text": {
         "family": "Zed Mono",
-        "color": "#073642",
+        "color": "#002b36",
         "size": 14
       }
     }
@@ -1309,26 +1336,25 @@
       "color": "#586e75",
       "size": 14,
       "background": "#eee8d5",
-      "corner_radius": 4,
+      "corner_radius": 6,
       "border": {
         "color": "#eee8d5",
         "width": 1
       },
       "margin": {
-        "left": 2,
-        "right": 2
+        "right": 4
       },
       "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
+        "bottom": 2,
+        "left": 10,
+        "right": 10,
+        "top": 2
       },
       "active": {
         "family": "Zed Mono",
         "color": "#002b36",
         "size": 14,
-        "background": "#839496",
+        "background": "#93a1a13d",
         "border": {
           "color": "#839496",
           "width": 1
@@ -1338,7 +1364,7 @@
         "family": "Zed Mono",
         "color": "#002b36",
         "size": 14,
-        "background": "#839496",
+        "background": "#93a1a11f",
         "border": {
           "color": "#839496",
           "width": 1
@@ -1369,7 +1395,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1402,7 +1428,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1419,8 +1445,8 @@
     },
     "option_button_group": {
       "padding": {
-        "left": 4,
-        "right": 4
+        "left": 12,
+        "right": 12
       }
     },
     "results_status": {

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",
@@ -332,7 +346,7 @@
     },
     "titlebar": {
       "avatar_width": 18,
-      "height": 32,
+      "height": 33,
       "background": "#293256",
       "padding": {
         "left": 80
@@ -356,7 +370,8 @@
       "border": {
         "color": "#202746",
         "width": 1,
-        "bottom": true
+        "bottom": true,
+        "overlay": true
       },
       "sign_in_prompt": {
         "border": {
@@ -411,7 +426,17 @@
       "outdated_warning": {
         "family": "Zed Sans",
         "color": "#c08b30",
-        "size": 13,
+        "size": 12,
+        "background": "#c08b3026",
+        "border": {
+          "color": "#c08b3026",
+          "width": 1
+        },
+        "padding": {
+          "left": 6,
+          "right": 6
+        },
+        "corner_radius": 6,
         "margin": {
           "right": 6
         }
@@ -524,7 +549,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#293256"
+        "background": "#29325652"
       },
       "margin": {
         "left": -14
@@ -542,7 +567,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#293256"
+        "background": "#2932567a"
       }
     },
     "diagnostic_header": {
@@ -908,11 +933,13 @@
   },
   "project_panel": {
     "padding": {
+      "left": 12,
+      "right": 12,
       "top": 6,
-      "left": 12
+      "bottom": 6
     },
     "entry": {
-      "height": 22,
+      "height": 24,
       "icon_color": "#979db4",
       "icon_size": 8,
       "icon_spacing": 8,
@@ -923,19 +950,19 @@
       }
     },
     "hovered_entry": {
-      "height": 22,
+      "height": 24,
       "background": "#5e668752",
       "icon_color": "#979db4",
       "icon_size": 8,
       "icon_spacing": 8,
       "text": {
         "family": "Zed Mono",
-        "color": "#979db4",
+        "color": "#dfe2f1",
         "size": 14
       }
     },
     "selected_entry": {
-      "height": 22,
+      "height": 24,
       "icon_color": "#979db4",
       "icon_size": 8,
       "icon_spacing": 8,
@@ -946,14 +973,14 @@
       }
     },
     "hovered_selected_entry": {
-      "height": 22,
+      "height": 24,
       "background": "#5e668752",
       "icon_color": "#979db4",
       "icon_size": 8,
       "icon_spacing": 8,
       "text": {
         "family": "Zed Mono",
-        "color": "#dfe2f1",
+        "color": "#f5f7ff",
         "size": 14
       }
     }
@@ -1309,26 +1336,25 @@
       "color": "#979db4",
       "size": 14,
       "background": "#293256",
-      "corner_radius": 4,
+      "corner_radius": 6,
       "border": {
         "color": "#293256",
         "width": 1
       },
       "margin": {
-        "left": 2,
-        "right": 2
+        "right": 4
       },
       "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
+        "bottom": 2,
+        "left": 10,
+        "right": 10,
+        "top": 2
       },
       "active": {
         "family": "Zed Mono",
         "color": "#f5f7ff",
         "size": 14,
-        "background": "#6b7394",
+        "background": "#5e6687a3",
         "border": {
           "color": "#6b7394",
           "width": 1
@@ -1338,7 +1364,7 @@
         "family": "Zed Mono",
         "color": "#f5f7ff",
         "size": 14,
-        "background": "#6b7394",
+        "background": "#5e668752",
         "border": {
           "color": "#6b7394",
           "width": 1
@@ -1369,7 +1395,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1402,7 +1428,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1419,8 +1445,8 @@
     },
     "option_button_group": {
       "padding": {
-        "left": 4,
-        "right": 4
+        "left": 12,
+        "right": 12
       }
     },
     "results_status": {

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",
@@ -332,7 +346,7 @@
     },
     "titlebar": {
       "avatar_width": 18,
-      "height": 32,
+      "height": 33,
       "background": "#dfe2f1",
       "padding": {
         "left": 80
@@ -356,7 +370,8 @@
       "border": {
         "color": "#f5f7ff",
         "width": 1,
-        "bottom": true
+        "bottom": true,
+        "overlay": true
       },
       "sign_in_prompt": {
         "border": {
@@ -411,7 +426,17 @@
       "outdated_warning": {
         "family": "Zed Sans",
         "color": "#c08b30",
-        "size": 13,
+        "size": 12,
+        "background": "#c08b3026",
+        "border": {
+          "color": "#c08b3026",
+          "width": 1
+        },
+        "padding": {
+          "left": 6,
+          "right": 6
+        },
+        "corner_radius": 6,
         "margin": {
           "right": 6
         }
@@ -524,7 +549,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#dfe2f1"
+        "background": "#dfe2f11f"
       },
       "margin": {
         "left": -14
@@ -542,7 +567,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#dfe2f1"
+        "background": "#dfe2f12e"
       }
     },
     "diagnostic_header": {
@@ -908,11 +933,13 @@
   },
   "project_panel": {
     "padding": {
+      "left": 12,
+      "right": 12,
       "top": 6,
-      "left": 12
+      "bottom": 6
     },
     "entry": {
-      "height": 22,
+      "height": 24,
       "icon_color": "#5e6687",
       "icon_size": 8,
       "icon_spacing": 8,
@@ -923,19 +950,19 @@
       }
     },
     "hovered_entry": {
-      "height": 22,
+      "height": 24,
       "background": "#979db41f",
       "icon_color": "#5e6687",
       "icon_size": 8,
       "icon_spacing": 8,
       "text": {
         "family": "Zed Mono",
-        "color": "#5e6687",
+        "color": "#293256",
         "size": 14
       }
     },
     "selected_entry": {
-      "height": 22,
+      "height": 24,
       "icon_color": "#5e6687",
       "icon_size": 8,
       "icon_spacing": 8,
@@ -946,14 +973,14 @@
       }
     },
     "hovered_selected_entry": {
-      "height": 22,
+      "height": 24,
       "background": "#979db41f",
       "icon_color": "#5e6687",
       "icon_size": 8,
       "icon_spacing": 8,
       "text": {
         "family": "Zed Mono",
-        "color": "#293256",
+        "color": "#202746",
         "size": 14
       }
     }
@@ -1309,26 +1336,25 @@
       "color": "#5e6687",
       "size": 14,
       "background": "#dfe2f1",
-      "corner_radius": 4,
+      "corner_radius": 6,
       "border": {
         "color": "#dfe2f1",
         "width": 1
       },
       "margin": {
-        "left": 2,
-        "right": 2
+        "right": 4
       },
       "padding": {
-        "bottom": 3,
-        "left": 8,
-        "right": 8,
-        "top": 3
+        "bottom": 2,
+        "left": 10,
+        "right": 10,
+        "top": 2
       },
       "active": {
         "family": "Zed Mono",
         "color": "#202746",
         "size": 14,
-        "background": "#898ea4",
+        "background": "#979db43d",
         "border": {
           "color": "#898ea4",
           "width": 1
@@ -1338,7 +1364,7 @@
         "family": "Zed Mono",
         "color": "#202746",
         "size": 14,
-        "background": "#898ea4",
+        "background": "#979db41f",
         "border": {
           "color": "#898ea4",
           "width": 1
@@ -1369,7 +1395,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1402,7 +1428,7 @@
         "width": 1
       },
       "margin": {
-        "right": 6
+        "right": 12
       },
       "padding": {
         "top": 3,
@@ -1419,8 +1445,8 @@
     },
     "option_button_group": {
       "padding": {
-        "left": 4,
-        "right": 4
+        "left": 12,
+        "right": 12
       }
     },
     "results_status": {

styles/src/styleTree/projectPanel.ts

@@ -6,7 +6,7 @@ import { backgroundColor, iconColor, text, TextColor } from "./components";
 export default function projectPanel(theme: Theme) {
   function entry(theme: Theme, textColor: TextColor, background?: Color) {
     return {
-      height: 22,
+      height: 24,
       background,
       iconColor: iconColor(theme, "muted"),
       iconSize: 8,
@@ -17,21 +17,18 @@ export default function projectPanel(theme: Theme) {
 
   return {
     ...panel,
-    entry: entry(theme, "secondary"),
+    entry: entry(theme, "muted"),
     hoveredEntry: entry(
       theme,
-      "secondary",
+      "primary",
       backgroundColor(theme, 300, "hovered")
     ),
     selectedEntry: entry(theme, "primary"),
     hoveredSelectedEntry: entry(
       theme,
-      "primary",
+      "active",
       backgroundColor(theme, 300, "hovered")
     ),
-    padding: {
-      top: 6,
-      left: 12,
-    },
+    padding: { left: 12, right: 12, top: 6, bottom: 6 },
   };
 }

styles/src/styleTree/search.ts

@@ -2,6 +2,8 @@ import Theme from "../themes/theme";
 import { backgroundColor, border, player, text } from "./components";
 
 export default function search(theme: Theme) {
+
+  // Search input
   const editor = {
     background: backgroundColor(theme, 500),
     cornerRadius: 8,
@@ -12,7 +14,7 @@ export default function search(theme: Theme) {
     text: text(theme, "mono", "active"),
     border: border(theme, "secondary"),
     margin: {
-      right: 6,
+      right: 12,
     },
     padding: {
       top: 3,
@@ -29,17 +31,16 @@ export default function search(theme: Theme) {
     optionButton: {
       ...text(theme, "mono", "secondary"),
       background: backgroundColor(theme, "on500"),
-      cornerRadius: 4,
+      cornerRadius: 6,
       border: border(theme, "secondary"),
       margin: {
-        left: 2,
-        right: 2,
+        right: 4,
       },
       padding: {
-        bottom: 3,
-        left: 8,
-        right: 8,
-        top: 3,
+        bottom: 2,
+        left: 10,
+        right: 10,
+        top: 2,
       },
       active: {
         ...text(theme, "mono", "active"),
@@ -63,8 +64,8 @@ export default function search(theme: Theme) {
     },
     optionButtonGroup: {
       padding: {
-        left: 4,
-        right: 4,
+        left: 12,
+        right: 12,
       },
     },
     resultsStatus: {

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,105 +58,10 @@ 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,
+      height: 33,
       background: backgroundColor(theme, 100),
       padding: {
         left: 80,
@@ -173,7 +80,7 @@ export default function workspace(theme: Theme) {
         // TODO: The background for this ideally should be 
         // set with a token, not hardcoded in rust
       },
-      border: border(theme, "primary", { bottom: true }),
+      border: border(theme, "primary", { bottom: true, overlay: true }),
       signInPrompt: {
         border: border(theme, "primary"),
         cornerRadius: 6,
@@ -213,8 +120,14 @@ export default function workspace(theme: Theme) {
         }
       },
       outdatedWarning: {
-        ...text(theme, "sans", "warning"),
-        size: 13,
+        ...text(theme, "sans", "warning", { size: "xs" }),
+        background: backgroundColor(theme, "warning"),
+        border: border(theme, "warning"),
+        padding: {
+          left: 6,
+          right: 6,
+        },
+        cornerRadius: 6,
         margin: { right: 6 }
       },
     },

styles/src/themes/base16.ts

@@ -24,31 +24,31 @@ export function createTheme(name: string, isLight: boolean, neutral: ColorToken[
       base: neutral[1],
       hovered: withOpacity(neutral[2], blend),
       active: withOpacity(neutral[2], blend * 1.5),
-      focused: neutral[2],
+      focused: withOpacity(neutral[2], blend),
     },
     300: {
       base: neutral[1],
       hovered: withOpacity(neutral[2], blend),
       active: withOpacity(neutral[2], blend * 1.5),
-      focused: neutral[2],
+      focused: withOpacity(neutral[2], blend),
     },
     500: {
       base: neutral[0],
-      hovered: neutral[1],
-      active: neutral[1],
-      focused: neutral[1],
+      hovered: withOpacity(neutral[1], blend),
+      active: withOpacity(neutral[1], blend * 1.5),
+      focused: withOpacity(neutral[1], blend),
     },
     on300: {
       base: neutral[0],
-      hovered: neutral[1],
-      active: neutral[1],
-      focused: neutral[1],
+      hovered: withOpacity(neutral[1], blend),
+      active: withOpacity(neutral[1], blend * 2),
+      focused: withOpacity(neutral[1], blend),
     },
     on500: {
       base: neutral[1],
-      hovered: neutral[3],
-      active: neutral[3],
-      focused: neutral[3],
+      hovered: withOpacity(neutral[2], blend),
+      active: withOpacity(neutral[2], blend * 2),
+      focused: withOpacity(neutral[2], blend),
     },
     ok: {
       base: withOpacity(accent.green, 0.15),

styles/src/themes/dark.ts

@@ -1,4 +1,4 @@
-import { color, colors, fontWeights, NumberToken } from "../tokens";
+import { colors, fontWeights, NumberToken } from "../tokens";
 import { withOpacity } from "../utils/color";
 import Theme, { buildPlayer, Syntax } from "./theme";