Refined dark theme styles

Nate Butler created 3 years ago

Change summary

crates/zed/assets/themes/dark.json  | 166 +++++++++++++++---------------
crates/zed/assets/themes/light.json |  14 +-
styles/buildThemes.ts               |   3 
styles/styleTree/selectorModal.ts   |   8 
styles/styleTree/workspace.ts       |   4 
styles/themes/dark.ts               |  38 +++---
styles/tokens.ts                    |   2 
styles/utils/color.ts               |   2 
8 files changed, 120 insertions(+), 117 deletions(-)

Detailed changes

crates/zed/assets/themes/dark.json

@@ -1,6 +1,6 @@
 {
   "selector": {
-    "background": "#000000",
+    "background": "#1c1c1c",
     "corner_radius": 6,
     "padding": 8,
     "item": {
@@ -18,7 +18,7 @@
       },
       "highlight_text": {
         "family": "Zed Sans",
-        "color": "#72ad19",
+        "color": "#1684b6",
         "weight": "bold",
         "size": 14
       }
@@ -33,19 +33,19 @@
       "corner_radius": 6,
       "text": {
         "family": "Zed Sans",
-        "color": "#e3e3e3",
+        "color": "#f1f1f1",
         "size": 14
       },
       "highlight_text": {
         "family": "Zed Sans",
-        "color": "#72ad19",
+        "color": "#1684b6",
         "weight": "bold",
         "size": 14
       },
-      "background": "#1c1c1c"
+      "background": "#2b2b2b"
     },
     "border": {
-      "color": "#0e0e0e",
+      "color": "#070707",
       "width": 1
     },
     "empty": {
@@ -62,7 +62,7 @@
       }
     },
     "input_editor": {
-      "background": "#1c1c1c",
+      "background": "#000000",
       "corner_radius": 6,
       "placeholder_text": {
         "family": "Zed Sans",
@@ -75,11 +75,11 @@
       },
       "text": {
         "family": "Zed Mono",
-        "color": "#e3e3e3",
+        "color": "#f1f1f1",
         "size": 16
       },
       "border": {
-        "color": "#0e0e0e",
+        "color": "#151515",
         "width": 1
       },
       "padding": {
@@ -109,8 +109,8 @@
     "tab": {
       "height": 32,
       "background": "#1c1c1c",
-      "icon_close": "#717171",
-      "icon_close_active": "#f1f1f1",
+      "icon_close": "#555555",
+      "icon_close_active": "#ffffff",
       "icon_conflict": "#c38214",
       "icon_dirty": "#195cc8",
       "icon_width": 8,
@@ -121,7 +121,7 @@
         "size": 14
       },
       "border": {
-        "color": "#0e0e0e",
+        "color": "#070707",
         "width": 1,
         "left": true,
         "bottom": true,
@@ -135,8 +135,8 @@
     "active_tab": {
       "height": 32,
       "background": "#000000",
-      "icon_close": "#717171",
-      "icon_close_active": "#f1f1f1",
+      "icon_close": "#555555",
+      "icon_close_active": "#ffffff",
       "icon_conflict": "#c38214",
       "icon_dirty": "#195cc8",
       "icon_width": 8,
@@ -147,7 +147,7 @@
         "size": 14
       },
       "border": {
-        "color": "#0e0e0e",
+        "color": "#070707",
         "width": 1,
         "left": true,
         "bottom": false,
@@ -162,22 +162,22 @@
       "width": 30,
       "background": "#1c1c1c",
       "border": {
-        "color": "#0e0e0e",
+        "color": "#070707",
         "width": 1,
         "right": true
       },
       "item": {
         "height": 32,
-        "icon_color": "#717171",
+        "icon_color": "#9c9c9c",
         "icon_size": 18
       },
       "active_item": {
         "height": 32,
-        "icon_color": "#f1f1f1",
+        "icon_color": "#ffffff",
         "icon_size": 18
       },
       "resize_handle": {
-        "background": "#0e0e0e",
+        "background": "#070707",
         "padding": {
           "left": 1
         }
@@ -187,29 +187,29 @@
       "width": 30,
       "background": "#1c1c1c",
       "border": {
-        "color": "#0e0e0e",
+        "color": "#070707",
         "width": 1,
         "left": true
       },
       "item": {
         "height": 32,
-        "icon_color": "#717171",
+        "icon_color": "#9c9c9c",
         "icon_size": 18
       },
       "active_item": {
         "height": 32,
-        "icon_color": "#f1f1f1",
+        "icon_color": "#ffffff",
         "icon_size": 18
       },
       "resize_handle": {
-        "background": "#0e0e0e",
+        "background": "#070707",
         "padding": {
           "left": 1
         }
       }
     },
     "pane_divider": {
-      "color": "#0e0e0e",
+      "color": "#070707",
       "width": 1
     },
     "status_bar": {
@@ -238,12 +238,12 @@
     "titlebar": {
       "avatar_width": 18,
       "height": 32,
-      "background": "#393939",
-      "share_icon_color": "#717171",
-      "share_icon_active_color": "#f1f1f1",
+      "background": "#2b2b2b",
+      "share_icon_color": "#9c9c9c",
+      "share_icon_active_color": "#ffffff",
       "title": {
         "family": "Zed Sans",
-        "color": "#e3e3e3",
+        "color": "#f1f1f1",
         "size": 14
       },
       "avatar": {
@@ -258,7 +258,7 @@
         "width": 12
       },
       "border": {
-        "color": "#0e0e0e",
+        "color": "#070707",
         "width": 1,
         "bottom": true
       },
@@ -281,7 +281,7 @@
         }
       },
       "offline_icon": {
-        "color": "#717171",
+        "color": "#9c9c9c",
         "width": 16,
         "padding": {
           "right": 4
@@ -297,7 +297,7 @@
       "height": 34,
       "background": "#000000",
       "border": {
-        "color": "#2b2b2b",
+        "color": "#070707",
         "width": 1,
         "bottom": true
       },
@@ -325,10 +325,10 @@
     }
   },
   "editor": {
-    "text_color": "#e3e3e3",
+    "text_color": "#f1f1f1",
     "background": "#000000",
-    "active_line_background": "#1c1c1c",
-    "code_actions_indicator": "#717171",
+    "active_line_background": "#0e0e0e",
+    "code_actions_indicator": "#9c9c9c",
     "diff_background_deleted": "#d71c1c",
     "diff_background_inserted": "#1ea34f",
     "document_highlight_read_background": "#1e22db",
@@ -336,7 +336,7 @@
     "error_color": "#d71c1c",
     "gutter_background": "#000000",
     "gutter_padding_factor": 2.5,
-    "highlighted_line_background": "#0e0e0e",
+    "highlighted_line_background": "#070707",
     "line_number": "#636363",
     "line_number_active": "#ffffff",
     "rename_fade": 0.6,
@@ -380,7 +380,7 @@
       "corner_radius": 6,
       "padding": 6,
       "border": {
-        "color": "#393939",
+        "color": "#151515",
         "width": 1
       },
       "item": {
@@ -400,7 +400,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#0e0e0e"
+        "background": "#070707"
       },
       "margin": {
         "left": -14
@@ -417,7 +417,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#1c1c1c"
+        "background": "#0e0e0e"
       }
     },
     "diagnostic_header": {
@@ -425,7 +425,7 @@
       "icon_width_factor": 1.5,
       "text_scale_factor": 0.857,
       "border": {
-        "color": "#393939",
+        "color": "#151515",
         "width": 1,
         "bottom": true,
         "top": true
@@ -441,7 +441,7 @@
       "message": {
         "highlight_text": {
           "family": "Zed Sans",
-          "color": "#e3e3e3",
+          "color": "#f1f1f1",
           "size": 14,
           "weight": "bold"
         },
@@ -453,11 +453,11 @@
       }
     },
     "diagnostic_path_header": {
-      "background": "#1c1c1c",
+      "background": "#0e0e0e",
       "text_scale_factor": 0.857,
       "filename": {
         "family": "Zed Mono",
-        "color": "#e3e3e3",
+        "color": "#f1f1f1",
         "size": 14
       },
       "path": {
@@ -473,7 +473,7 @@
       "text_scale_factor": 0.857,
       "header": {
         "border": {
-          "color": "#0e0e0e",
+          "color": "#070707",
           "width": 1,
           "top": true
         }
@@ -496,7 +496,7 @@
       "text_scale_factor": 0.857,
       "header": {
         "border": {
-          "color": "#0e0e0e",
+          "color": "#070707",
           "width": 1,
           "top": true
         }
@@ -519,7 +519,7 @@
       "text_scale_factor": 0.857,
       "header": {
         "border": {
-          "color": "#0e0e0e",
+          "color": "#070707",
           "width": 1,
           "top": true
         }
@@ -542,7 +542,7 @@
       "text_scale_factor": 0.857,
       "header": {
         "border": {
-          "color": "#0e0e0e",
+          "color": "#070707",
           "width": 1,
           "top": true
         }
@@ -565,7 +565,7 @@
       "text_scale_factor": 0.857,
       "header": {
         "border": {
-          "color": "#0e0e0e",
+          "color": "#070707",
           "width": 1,
           "top": true
         }
@@ -588,7 +588,7 @@
       "text_scale_factor": 0.857,
       "header": {
         "border": {
-          "color": "#0e0e0e",
+          "color": "#070707",
           "width": 1,
           "top": true
         }
@@ -611,7 +611,7 @@
       "text_scale_factor": 0.857,
       "header": {
         "border": {
-          "color": "#0e0e0e",
+          "color": "#070707",
           "width": 1,
           "top": true
         }
@@ -634,7 +634,7 @@
       "text_scale_factor": 0.857,
       "header": {
         "border": {
-          "color": "#0e0e0e",
+          "color": "#070707",
           "width": 1,
           "top": true
         }
@@ -661,7 +661,7 @@
     "tab_summary_spacing": 10,
     "empty_message": {
       "family": "Zed Sans",
-      "color": "#e3e3e3",
+      "color": "#f1f1f1",
       "size": 14
     },
     "status_bar_item": {
@@ -691,7 +691,7 @@
     },
     "hovered_entry": {
       "height": 22,
-      "background": "#1c1c1c",
+      "background": "#232323",
       "icon_color": "#555555",
       "icon_size": 8,
       "icon_spacing": 8,
@@ -708,19 +708,19 @@
       "icon_spacing": 8,
       "text": {
         "family": "Zed Mono",
-        "color": "#e3e3e3",
+        "color": "#f1f1f1",
         "size": 14
       }
     },
     "hovered_selected_entry": {
       "height": 22,
-      "background": "#1c1c1c",
+      "background": "#232323",
       "icon_color": "#555555",
       "icon_size": 8,
       "icon_spacing": 8,
       "text": {
         "family": "Zed Mono",
-        "color": "#e3e3e3",
+        "color": "#f1f1f1",
         "size": 14
       }
     }
@@ -734,7 +734,7 @@
     },
     "channel_name": {
       "family": "Zed Sans",
-      "color": "#e3e3e3",
+      "color": "#f1f1f1",
       "weight": "bold",
       "size": 14
     },
@@ -750,7 +750,7 @@
       "header": {
         "name": {
           "family": "Zed Sans",
-          "color": "#e3e3e3",
+          "color": "#f1f1f1",
           "size": 14
         },
         "padding": {
@@ -799,13 +799,13 @@
             "right": 8
           }
         },
-        "background": "#1c1c1c",
+        "background": "#232323",
         "corner_radius": 6
       },
       "active_item": {
         "name": {
           "family": "Zed Sans",
-          "color": "#e3e3e3",
+          "color": "#f1f1f1",
           "size": 14
         },
         "padding": 4,
@@ -822,7 +822,7 @@
       "hovered_active_item": {
         "name": {
           "family": "Zed Sans",
-          "color": "#e3e3e3",
+          "color": "#f1f1f1",
           "size": 14
         },
         "padding": 4,
@@ -834,7 +834,7 @@
             "right": 8
           }
         },
-        "background": "#1c1c1c",
+        "background": "#232323",
         "corner_radius": 6
       },
       "menu": {
@@ -842,7 +842,7 @@
         "corner_radius": 6,
         "padding": 4,
         "border": {
-          "color": "#0e0e0e",
+          "color": "#070707",
           "width": 1
         },
         "shadow": {
@@ -863,7 +863,7 @@
     },
     "hovered_sign_in_prompt": {
       "family": "Zed Sans",
-      "color": "#e3e3e3",
+      "color": "#f1f1f1",
       "underline": true,
       "size": 14
     },
@@ -883,7 +883,7 @@
       },
       "sender": {
         "family": "Zed Sans",
-        "color": "#e3e3e3",
+        "color": "#f1f1f1",
         "weight": "bold",
         "size": 14,
         "margin": {
@@ -920,7 +920,7 @@
       "corner_radius": 6,
       "text": {
         "family": "Zed Mono",
-        "color": "#e3e3e3",
+        "color": "#f1f1f1",
         "size": 16
       },
       "placeholder_text": {
@@ -933,7 +933,7 @@
         "selection": "#307af3"
       },
       "border": {
-        "color": "#393939",
+        "color": "#151515",
         "width": 1
       },
       "padding": {
@@ -952,7 +952,7 @@
       "right": 12
     },
     "host_row_height": 28,
-    "tree_branch_color": "#2b2b2b",
+    "tree_branch_color": "#232323",
     "tree_branch_width": 1,
     "host_avatar": {
       "corner_radius": 10,
@@ -994,7 +994,7 @@
       },
       "name": {
         "family": "Zed Mono",
-        "color": "#e3e3e3",
+        "color": "#f1f1f1",
         "size": 16,
         "margin": {
           "right": 6
@@ -1013,7 +1013,7 @@
       },
       "name": {
         "family": "Zed Mono",
-        "color": "#e3e3e3",
+        "color": "#f1f1f1",
         "size": 16,
         "margin": {
           "right": 6
@@ -1022,7 +1022,7 @@
       "padding": {
         "left": 8
       },
-      "background": "#1c1c1c",
+      "background": "#0e0e0e",
       "corner_radius": 6
     },
     "unshared_project": {
@@ -1062,7 +1062,7 @@
       "padding": {
         "left": 8
       },
-      "background": "#1c1c1c",
+      "background": "#0e0e0e",
       "corner_radius": 6
     }
   },
@@ -1074,10 +1074,10 @@
       "family": "Zed Mono",
       "color": "#9c9c9c",
       "size": 16,
-      "background": "#393939",
+      "background": "#2b2b2b",
       "corner_radius": 6,
       "border": {
-        "color": "#0e0e0e",
+        "color": "#070707",
         "width": 1
       },
       "margin": {
@@ -1095,10 +1095,10 @@
       "family": "Zed Mono",
       "color": "#9c9c9c",
       "size": 16,
-      "background": "#393939",
+      "background": "#2b2b2b",
       "corner_radius": 6,
       "border": {
-        "color": "#0e0e0e",
+        "color": "#070707",
         "width": 1
       },
       "margin": {
@@ -1128,11 +1128,11 @@
       },
       "text": {
         "family": "Zed Mono",
-        "color": "#e3e3e3",
+        "color": "#f1f1f1",
         "size": 16
       },
       "border": {
-        "color": "#0e0e0e",
+        "color": "#070707",
         "width": 1
       },
       "margin": {
@@ -1149,10 +1149,10 @@
       "family": "Zed Mono",
       "color": "#9c9c9c",
       "size": 16,
-      "background": "#393939",
+      "background": "#2b2b2b",
       "corner_radius": 6,
       "border": {
-        "color": "#0e0e0e",
+        "color": "#070707",
         "width": 1
       },
       "margin": {
@@ -1182,7 +1182,7 @@
       },
       "text": {
         "family": "Zed Mono",
-        "color": "#e3e3e3",
+        "color": "#f1f1f1",
         "size": 16
       },
       "border": {
@@ -1212,7 +1212,7 @@
       "background": "#1c1c1c",
       "corner_radius": 6,
       "border": {
-        "color": "#0e0e0e",
+        "color": "#070707",
         "width": 1
       },
       "margin": {
@@ -1234,13 +1234,13 @@
     },
     "results_status": {
       "family": "Zed Mono",
-      "color": "#e3e3e3",
+      "color": "#f1f1f1",
       "size": 18
     }
   },
   "breadcrumbs": {
     "family": "Zed Sans",
-    "color": "#e3e3e3",
+    "color": "#f1f1f1",
     "size": 14,
     "padding": {
       "left": 6

crates/zed/assets/themes/light.json

@@ -1,6 +1,6 @@
 {
   "selector": {
-    "background": "#ffffff",
+    "background": "#f1f1f1",
     "corner_radius": 6,
     "padding": 8,
     "item": {
@@ -42,7 +42,7 @@
         "weight": "bold",
         "size": 14
       },
-      "background": "#e3e3e3"
+      "background": "#d5d5d5"
     },
     "border": {
       "color": "#c6c6c6",
@@ -62,7 +62,7 @@
       }
     },
     "input_editor": {
-      "background": "#f1f1f1",
+      "background": "#ffffff",
       "corner_radius": 6,
       "placeholder_text": {
         "family": "Zed Sans",
@@ -79,7 +79,7 @@
         "size": 16
       },
       "border": {
-        "color": "#c6c6c6",
+        "color": "#e3e3e3",
         "width": 1
       },
       "padding": {
@@ -109,7 +109,7 @@
     "tab": {
       "height": 32,
       "background": "#f1f1f1",
-      "icon_close": "#717171",
+      "icon_close": "#555555",
       "icon_close_active": "#000000",
       "icon_conflict": "#bc9212",
       "icon_dirty": "#195cc8",
@@ -135,7 +135,7 @@
     "active_tab": {
       "height": 32,
       "background": "#ffffff",
-      "icon_close": "#717171",
+      "icon_close": "#555555",
       "icon_close_active": "#000000",
       "icon_conflict": "#bc9212",
       "icon_dirty": "#195cc8",
@@ -297,7 +297,7 @@
       "height": 34,
       "background": "#ffffff",
       "border": {
-        "color": "#f1f1f1",
+        "color": "#c6c6c6",
         "width": 1,
         "bottom": true
       },

styles/buildThemes.ts

@@ -3,6 +3,7 @@ import * as path from "path";
 import app from "./styleTree/app";
 import dark from "./themes/dark";
 import light from "./themes/light";
+import { colors } from "./tokens";
 import decamelizeTree from "./utils/decamelizeTree";
 
 const themes = [dark, light];
@@ -14,4 +15,6 @@ for (let theme of themes) {
     );
     fs.writeFileSync(outPath, styleTreeJSON);
     console.log(`Generated ${outPath}`);
+
+    console.log(JSON.stringify(colors.indigo, null, 2));
 }

styles/styleTree/selectorModal.ts

@@ -16,12 +16,12 @@ export default function selectorModal(theme: Theme): Object {
 
   const activeItem = {
     ...item,
-    background: backgroundColor(theme, 500, "active"),
+    background: backgroundColor(theme, 300, "active"),
     text: text(theme, "sans", "primary"),
   };
 
   return {
-    background: backgroundColor(theme, 500),
+    background: backgroundColor(theme, 300),
     cornerRadius: 6,
     padding: 8,
     item,
@@ -37,12 +37,12 @@ export default function selectorModal(theme: Theme): Object {
       },
     },
     inputEditor: {
-      background: backgroundColor(theme, 300),
+      background: backgroundColor(theme, 500),
       corner_radius: 6,
       placeholderText: text(theme, "sans", "placeholder"),
       selection: player(theme, 1).selection,
       text: text(theme, "mono", "primary"),
-      border: border(theme, "primary"),
+      border: border(theme, "secondary"),
       padding: {
         bottom: 7,
         left: 16,

styles/styleTree/workspace.ts

@@ -14,7 +14,7 @@ export default function workspace(theme: Theme) {
   const tab = {
     height: 32,
     background: backgroundColor(theme, 300),
-    iconClose: iconColor(theme, "secondary"),
+    iconClose: iconColor(theme, "muted"),
     iconCloseActive: iconColor(theme, "active"),
     iconConflict: iconColor(theme, "warning"),
     iconDirty: iconColor(theme, "info"),
@@ -135,7 +135,7 @@ export default function workspace(theme: Theme) {
     toolbar: {
       height: 34,
       background: backgroundColor(theme, 500),
-      border: border(theme, "muted", { bottom: true }),
+      border: border(theme, "primary", { bottom: true }),
       itemSpacing: 8,
       padding: { left: 16, right: 8, top: 4, bottom: 4 },
     },

styles/themes/dark.ts

@@ -3,22 +3,22 @@ import Theme, { Syntax } from "./theme";
 
 const backgroundColor = {
     100: {
-        base: colors.neutral[700],
-        hovered: colors.neutral[700],
+        base: colors.neutral[750],
+        hovered: colors.neutral[725],
         active: colors.neutral[700],
-        focused: colors.neutral[700],
+        focused: colors.neutral[675],
     },
     300: {
         base: colors.neutral[800],
-        hovered: colors.neutral[800],
-        active: colors.neutral[800],
-        focused: colors.neutral[800],
+        hovered: colors.neutral[775],
+        active: colors.neutral[750],
+        focused: colors.neutral[725],
     },
     500: {
         base: colors.neutral[900],
-        hovered: colors.neutral[850],
-        active: colors.neutral[800],
-        focused: colors.neutral[850],
+        hovered: colors.neutral[875],
+        active: colors.neutral[850],
+        focused: colors.neutral[825],
     },
     ok: {
         base: colors.green[600],
@@ -47,11 +47,11 @@ const backgroundColor = {
 };
 
 const borderColor = {
-    primary: colors.neutral[850],
-    secondary: colors.neutral[700],
-    muted: colors.neutral[750],
-    focused: colors.neutral[100],
-    active: colors.neutral[500],
+    primary: colors.neutral[875],
+    secondary: colors.neutral[825],
+    muted: colors.neutral[775],
+    focused: colors.neutral[500],
+    active: colors.neutral[900],
     ok: colors.green[500],
     error: colors.red[500],
     warning: colors.amber[500],
@@ -59,13 +59,13 @@ const borderColor = {
 };
 
 const textColor = {
-    primary: colors.neutral[100],
+    primary: colors.neutral[50],
     secondary: colors.neutral[350],
     muted: colors.neutral[550],
     placeholder: colors.neutral[750],
     active: colors.neutral[0],
     //TODO: (design) define feature and it's correct value
-    feature: colors.lime[400],
+    feature: colors.sky[500],
     ok: colors.green[600],
     error: colors.red[400],
     warning: colors.amber[300],
@@ -73,11 +73,11 @@ const textColor = {
 };
 
 const iconColor = {
-    primary: colors.neutral[300],
-    secondary: colors.neutral[500],
+    primary: colors.neutral[200],
+    secondary: colors.neutral[350],
     muted: colors.neutral[600],
     placeholder: colors.neutral[700],
-    active: colors.neutral[50],
+    active: colors.neutral[0],
     //TODO: (design) define feature and it's correct value
     feature: colors.sky[500],
     ok: colors.green[600],

styles/tokens.ts

@@ -72,7 +72,7 @@ export interface ColorToken {
   step?: number,
 }
 export const colors = {
-  neutral: colorRamp(["white", "black"], { steps: 19, increment: 50 }),
+  neutral: colorRamp(["white", "black"], { steps: 37, increment: 25 }), // (900/25) + 1
   rose: colorRamp("#F43F5EFF"),
   red: colorRamp("#EF4444FF"),
   orange: colorRamp("#F97316FF"),

styles/utils/color.ts

@@ -8,7 +8,7 @@ export type ColorRamp = {
 
 export function colorRamp(
   color: Color | [Color, Color],
-  options?: { steps?: number; increment?: number }
+  options?: { steps?: number; increment?: number; }
 ): ColorRamp {
   let scale: Scale;
   if (Array.isArray(color)) {