Update projectBrowser styles

Nate Butler created 3 years ago

Change summary

assets/themes/cave-dark.json         | 16 +++++++++-------
assets/themes/cave-light.json        | 16 +++++++++-------
assets/themes/dark.json              | 18 ++++++++++--------
assets/themes/light.json             | 18 ++++++++++--------
assets/themes/solarized-dark.json    | 16 +++++++++-------
assets/themes/solarized-light.json   | 16 +++++++++-------
assets/themes/sulphurpool-dark.json  | 16 +++++++++-------
assets/themes/sulphurpool-light.json | 16 +++++++++-------
styles/src/styleTree/projectPanel.ts | 13 +++++--------
9 files changed, 79 insertions(+), 66 deletions(-)

Detailed changes

assets/themes/cave-dark.json

@@ -933,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,
@@ -948,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,
@@ -971,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
       }
     }

assets/themes/cave-light.json

@@ -933,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,
@@ -948,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,
@@ -971,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
       }
     }

assets/themes/dark.json

@@ -933,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,
@@ -971,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
       }
     }

assets/themes/light.json

@@ -933,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,
@@ -971,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
       }
     }

assets/themes/solarized-dark.json

@@ -933,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,
@@ -948,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,
@@ -971,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
       }
     }

assets/themes/solarized-light.json

@@ -933,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,
@@ -948,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,
@@ -971,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
       }
     }

assets/themes/sulphurpool-dark.json

@@ -933,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,
@@ -948,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,
@@ -971,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
       }
     }

assets/themes/sulphurpool-light.json

@@ -933,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,
@@ -948,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,
@@ -971,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
       }
     }

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 },
   };
 }