diff --git a/crates/zed/assets/themes/dark.json b/crates/zed/assets/themes/dark.json
index 1334a65727..1c277935cf 100644
--- a/crates/zed/assets/themes/dark.json
+++ b/crates/zed/assets/themes/dark.json
@@ -51,7 +51,7 @@
     "empty": {
       "text": {
         "family": "Zed Sans",
-        "color": "#636363",
+        "color": "#808080",
         "size": 14
       },
       "padding": {
@@ -66,20 +66,20 @@
       "corner_radius": 6,
       "placeholder_text": {
         "family": "Zed Sans",
-        "color": "#2b2b2b",
+        "color": "#474747",
         "size": 14
       },
       "selection": {
         "cursor": "#2472f2",
-        "selection": "#103063"
+        "selection": "#2472f24d"
       },
       "text": {
         "family": "Zed Mono",
         "color": "#f1f1f1",
-        "size": 16
+        "size": 14
       },
       "border": {
-        "color": "#151515",
+        "color": "#232323",
         "width": 1
       },
       "padding": {
@@ -209,7 +209,7 @@
       }
     },
     "pane_divider": {
-      "color": "#070707",
+      "color": "#232323",
       "width": 1
     },
     "status_bar": {
@@ -221,17 +221,17 @@
       },
       "cursor_position": {
         "family": "Zed Sans",
-        "color": "#636363",
+        "color": "#808080",
         "size": 14
       },
       "diagnostic_message": {
         "family": "Zed Sans",
-        "color": "#636363",
+        "color": "#808080",
         "size": 14
       },
       "lsp_message": {
         "family": "Zed Sans",
-        "color": "#636363",
+        "color": "#808080",
         "size": 14
       }
     },
@@ -240,7 +240,7 @@
       "height": 32,
       "background": "#2b2b2b",
       "share_icon_color": "#9c9c9c",
-      "share_icon_active_color": "#ffffff",
+      "share_icon_active_color": "#1096d3",
       "title": {
         "family": "Zed Sans",
         "color": "#f1f1f1",
@@ -297,7 +297,7 @@
       "height": 34,
       "background": "#000000",
       "border": {
-        "color": "#151515",
+        "color": "#232323",
         "width": 1,
         "bottom": true
       },
@@ -312,7 +312,7 @@
     "breadcrumbs": {
       "family": "Zed Mono",
       "color": "#9c9c9c",
-      "size": 16,
+      "size": 14,
       "padding": {
         "left": 6
       }
@@ -331,48 +331,48 @@
     "code_actions_indicator": "#9c9c9c",
     "diff_background_deleted": "#f15656",
     "diff_background_inserted": "#1b9447",
-    "document_highlight_read_background": "#2b2b2b",
-    "document_highlight_write_background": "#2b2b2b",
+    "document_highlight_read_background": "#14a89829",
+    "document_highlight_write_background": "#14a89852",
     "error_color": "#f15656",
     "gutter_background": "#000000",
     "gutter_padding_factor": 3.5,
     "highlighted_line_background": "#070707",
-    "line_number": "#636363",
+    "line_number": "#808080",
     "line_number_active": "#ffffff",
     "rename_fade": 0.6,
     "unnecessary_code_fade": 0.5,
     "selection": {
       "cursor": "#2472f2",
-      "selection": "#103063"
+      "selection": "#2472f24d"
     },
     "guest_selections": [
       {
         "cursor": "#79ba16",
-        "selection": "#38530f"
+        "selection": "#79ba164d"
       },
       {
         "cursor": "#484bed",
-        "selection": "#121269"
+        "selection": "#484bed4d"
       },
       {
         "cursor": "#ee670a",
-        "selection": "#5d2f0e"
+        "selection": "#ee670a4d"
       },
       {
         "cursor": "#993bf3",
-        "selection": "#3e1169"
+        "selection": "#993bf34d"
       },
       {
         "cursor": "#16d6c1",
-        "selection": "#0e4f48"
+        "selection": "#16d6c14d"
       },
       {
         "cursor": "#ef59a3",
-        "selection": "#fbc6e1"
+        "selection": "#ef59a34d"
       },
       {
         "cursor": "#f7bf17",
-        "selection": "#fce9b7"
+        "selection": "#f7bf174d"
       }
     ],
     "autocomplete": {
@@ -380,7 +380,7 @@
       "corner_radius": 6,
       "padding": 6,
       "border": {
-        "color": "#151515",
+        "color": "#232323",
         "width": 1
       },
       "item": {
@@ -425,14 +425,14 @@
       "icon_width_factor": 1.5,
       "text_scale_factor": 0.857,
       "border": {
-        "color": "#151515",
+        "color": "#232323",
         "width": 1,
         "bottom": true,
         "top": true
       },
       "code": {
         "family": "Zed Mono",
-        "color": "#636363",
+        "color": "#808080",
         "size": 14,
         "margin": {
           "left": 10
@@ -462,7 +462,7 @@
       },
       "path": {
         "family": "Zed Mono",
-        "color": "#636363",
+        "color": "#808080",
         "size": 14,
         "margin": {
           "left": 12
@@ -573,12 +573,12 @@
       "message": {
         "text": {
           "family": "Zed Sans",
-          "color": "#636363",
+          "color": "#808080",
           "size": 14
         },
         "highlight_text": {
           "family": "Zed Sans",
-          "color": "#636363",
+          "color": "#808080",
           "size": 14,
           "weight": "bold"
         }
@@ -596,12 +596,12 @@
       "message": {
         "text": {
           "family": "Zed Sans",
-          "color": "#636363",
+          "color": "#808080",
           "size": 14
         },
         "highlight_text": {
           "family": "Zed Sans",
-          "color": "#636363",
+          "color": "#808080",
           "size": 14,
           "weight": "bold"
         }
@@ -619,12 +619,12 @@
       "message": {
         "text": {
           "family": "Zed Sans",
-          "color": "#636363",
+          "color": "#808080",
           "size": 14
         },
         "highlight_text": {
           "family": "Zed Sans",
-          "color": "#636363",
+          "color": "#808080",
           "size": 14,
           "weight": "bold"
         }
@@ -642,12 +642,12 @@
       "message": {
         "text": {
           "family": "Zed Sans",
-          "color": "#636363",
+          "color": "#808080",
           "size": 14
         },
         "highlight_text": {
           "family": "Zed Sans",
-          "color": "#636363",
+          "color": "#808080",
           "size": 14,
           "weight": "bold"
         }
@@ -680,7 +680,7 @@
         "color": "#ee670a",
         "italic": true
       },
-      "list_marker": "#20b0f2"
+      "list_marker": "#c6c6c6"
     }
   },
   "project_diagnostics": {
@@ -690,11 +690,11 @@
     "empty_message": {
       "family": "Zed Sans",
       "color": "#f1f1f1",
-      "size": 14
+      "size": 18
     },
     "status_bar_item": {
       "family": "Zed Sans",
-      "color": "#636363",
+      "color": "#808080",
       "size": 14,
       "margin": {
         "right": 10
@@ -768,7 +768,7 @@
     },
     "channel_name_hash": {
       "family": "Zed Sans",
-      "color": "#636363",
+      "color": "#808080",
       "size": 14,
       "padding": {
         "right": 8
@@ -787,7 +787,7 @@
         },
         "hash": {
           "family": "Zed Sans",
-          "color": "#636363",
+          "color": "#808080",
           "size": 14,
           "margin": {
             "right": 8
@@ -804,7 +804,7 @@
         "padding": 4,
         "hash": {
           "family": "Zed Sans",
-          "color": "#636363",
+          "color": "#808080",
           "size": 14,
           "margin": {
             "right": 8
@@ -821,7 +821,7 @@
         "padding": 4,
         "hash": {
           "family": "Zed Sans",
-          "color": "#636363",
+          "color": "#808080",
           "size": 14,
           "margin": {
             "right": 8
@@ -839,7 +839,7 @@
         "padding": 4,
         "hash": {
           "family": "Zed Sans",
-          "color": "#636363",
+          "color": "#808080",
           "size": 14,
           "margin": {
             "right": 8
@@ -856,7 +856,7 @@
         "padding": 4,
         "hash": {
           "family": "Zed Sans",
-          "color": "#636363",
+          "color": "#808080",
           "size": 14,
           "margin": {
             "right": 8
@@ -903,7 +903,7 @@
       },
       "timestamp": {
         "family": "Zed Sans",
-        "color": "#636363",
+        "color": "#808080",
         "size": 14
       },
       "padding": {
@@ -922,12 +922,12 @@
     "pending_message": {
       "body": {
         "family": "Zed Sans",
-        "color": "#636363",
+        "color": "#808080",
         "size": 14
       },
       "timestamp": {
         "family": "Zed Sans",
-        "color": "#636363",
+        "color": "#808080",
         "size": 14
       },
       "padding": {
@@ -935,7 +935,7 @@
       },
       "sender": {
         "family": "Zed Sans",
-        "color": "#636363",
+        "color": "#808080",
         "weight": "bold",
         "size": 14,
         "margin": {
@@ -949,19 +949,19 @@
       "text": {
         "family": "Zed Mono",
         "color": "#f1f1f1",
-        "size": 16
+        "size": 14
       },
       "placeholder_text": {
         "family": "Zed Mono",
-        "color": "#2b2b2b",
+        "color": "#474747",
         "size": 14
       },
       "selection": {
         "cursor": "#2472f2",
-        "selection": "#103063"
+        "selection": "#2472f24d"
       },
       "border": {
-        "color": "#151515",
+        "color": "#232323",
         "width": 1
       },
       "padding": {
@@ -980,7 +980,7 @@
       "right": 12
     },
     "host_row_height": 28,
-    "tree_branch_color": "#232323",
+    "tree_branch_color": "#404040",
     "tree_branch_width": 1,
     "host_avatar": {
       "corner_radius": 10,
@@ -988,8 +988,8 @@
     },
     "host_username": {
       "family": "Zed Mono",
-      "color": "#636363",
-      "size": 16,
+      "color": "#f1f1f1",
+      "size": 14,
       "padding": {
         "left": 8
       }
@@ -1003,8 +1003,8 @@
       },
       "name": {
         "family": "Zed Mono",
-        "color": "#9c9c9c",
-        "size": 16,
+        "color": "#474747",
+        "size": 14,
         "margin": {
           "right": 6
         }
@@ -1022,15 +1022,17 @@
       },
       "name": {
         "family": "Zed Mono",
-        "color": "#f1f1f1",
-        "size": 16,
+        "color": "#9c9c9c",
+        "size": 14,
         "margin": {
           "right": 6
         }
       },
       "padding": {
         "left": 8
-      }
+      },
+      "background": "#1c1c1c",
+      "corner_radius": 6
     },
     "hovered_shared_project": {
       "guest_avatar_spacing": 4,
@@ -1041,8 +1043,8 @@
       },
       "name": {
         "family": "Zed Mono",
-        "color": "#f1f1f1",
-        "size": 16,
+        "color": "#9c9c9c",
+        "size": 14,
         "margin": {
           "right": 6
         }
@@ -1050,7 +1052,7 @@
       "padding": {
         "left": 8
       },
-      "background": "#0e0e0e",
+      "background": "#232323",
       "corner_radius": 6
     },
     "unshared_project": {
@@ -1062,8 +1064,8 @@
       },
       "name": {
         "family": "Zed Mono",
-        "color": "#9c9c9c",
-        "size": 16,
+        "color": "#474747",
+        "size": 14,
         "margin": {
           "right": 6
         }
@@ -1081,8 +1083,8 @@
       },
       "name": {
         "family": "Zed Mono",
-        "color": "#9c9c9c",
-        "size": 16,
+        "color": "#474747",
+        "size": 14,
         "margin": {
           "right": 6
         }
@@ -1090,18 +1092,17 @@
       "padding": {
         "left": 8
       },
-      "background": "#0e0e0e",
       "corner_radius": 6
     }
   },
   "search": {
-    "match_background": "#0a2633",
+    "match_background": "#1096d329",
     "tab_icon_spacing": 4,
     "tab_icon_width": 14,
     "active_hovered_option_button": {
       "family": "Zed Mono",
       "color": "#9c9c9c",
-      "size": 16,
+      "size": 14,
       "background": "#2b2b2b",
       "corner_radius": 6,
       "border": {
@@ -1122,7 +1123,7 @@
     "active_option_button": {
       "family": "Zed Mono",
       "color": "#9c9c9c",
-      "size": 16,
+      "size": 14,
       "background": "#2b2b2b",
       "corner_radius": 6,
       "border": {
@@ -1147,20 +1148,20 @@
       "max_width": 500,
       "placeholder_text": {
         "family": "Zed Mono",
-        "color": "#2b2b2b",
-        "size": 16
+        "color": "#474747",
+        "size": 14
       },
       "selection": {
         "cursor": "#2472f2",
-        "selection": "#103063"
+        "selection": "#2472f24d"
       },
       "text": {
         "family": "Zed Mono",
         "color": "#f1f1f1",
-        "size": 16
+        "size": 14
       },
       "border": {
-        "color": "#070707",
+        "color": "#232323",
         "width": 1
       },
       "margin": {
@@ -1176,7 +1177,7 @@
     "hovered_option_button": {
       "family": "Zed Mono",
       "color": "#9c9c9c",
-      "size": 16,
+      "size": 14,
       "background": "#2b2b2b",
       "corner_radius": 6,
       "border": {
@@ -1201,17 +1202,17 @@
       "max_width": 500,
       "placeholder_text": {
         "family": "Zed Mono",
-        "color": "#2b2b2b",
-        "size": 16
+        "color": "#474747",
+        "size": 14
       },
       "selection": {
         "cursor": "#2472f2",
-        "selection": "#103063"
+        "selection": "#2472f24d"
       },
       "text": {
         "family": "Zed Mono",
         "color": "#f1f1f1",
-        "size": 16
+        "size": 14
       },
       "border": {
         "color": "#eb2d2d",
@@ -1229,14 +1230,14 @@
     },
     "match_index": {
       "family": "Zed Mono",
-      "color": "#636363",
-      "size": 16,
+      "color": "#808080",
+      "size": 14,
       "padding": 6
     },
     "option_button": {
       "family": "Zed Mono",
       "color": "#9c9c9c",
-      "size": 16,
+      "size": 14,
       "background": "#1c1c1c",
       "corner_radius": 6,
       "border": {
diff --git a/crates/zed/assets/themes/light.json b/crates/zed/assets/themes/light.json
index 283b3b10b3..7871e34853 100644
--- a/crates/zed/assets/themes/light.json
+++ b/crates/zed/assets/themes/light.json
@@ -71,12 +71,12 @@
       },
       "selection": {
         "cursor": "#2472f2",
-        "selection": "#c5dafc"
+        "selection": "#2472f24d"
       },
       "text": {
         "family": "Zed Mono",
         "color": "#2b2b2b",
-        "size": 16
+        "size": 14
       },
       "border": {
         "color": "#e3e3e3",
@@ -209,7 +209,7 @@
       }
     },
     "pane_divider": {
-      "color": "#c6c6c6",
+      "color": "#e3e3e3",
       "width": 1
     },
     "status_bar": {
@@ -240,7 +240,7 @@
       "height": 32,
       "background": "#e3e3e3",
       "share_icon_color": "#717171",
-      "share_icon_active_color": "#000000",
+      "share_icon_active_color": "#1179a8",
       "title": {
         "family": "Zed Sans",
         "color": "#2b2b2b",
@@ -312,7 +312,7 @@
     "breadcrumbs": {
       "family": "Zed Mono",
       "color": "#555555",
-      "size": 16,
+      "size": 14,
       "padding": {
         "left": 6
       }
@@ -331,8 +331,8 @@
     "code_actions_indicator": "#717171",
     "diff_background_deleted": "#fcc6c6",
     "diff_background_inserted": "#b7f9ce",
-    "document_highlight_read_background": "#f1f1f1",
-    "document_highlight_write_background": "#f1f1f1",
+    "document_highlight_read_background": "#14a89829",
+    "document_highlight_write_background": "#14a89852",
     "error_color": "#eb2d2d",
     "gutter_background": "#ffffff",
     "gutter_padding_factor": 3.5,
@@ -343,36 +343,36 @@
     "unnecessary_code_fade": 0.5,
     "selection": {
       "cursor": "#2472f2",
-      "selection": "#c5dafc"
+      "selection": "#2472f24d"
     },
     "guest_selections": [
       {
         "cursor": "#79ba16",
-        "selection": "#dffab5"
+        "selection": "#79ba164d"
       },
       {
         "cursor": "#484bed",
-        "selection": "#cdcdfc"
+        "selection": "#484bed4d"
       },
       {
         "cursor": "#ee670a",
-        "selection": "#fcd6bd"
+        "selection": "#ee670a4d"
       },
       {
         "cursor": "#993bf3",
-        "selection": "#e4cbfc"
+        "selection": "#993bf34d"
       },
       {
         "cursor": "#16d6c1",
-        "selection": "#b1faf2"
+        "selection": "#16d6c14d"
       },
       {
         "cursor": "#ef59a3",
-        "selection": "#fbc6e1"
+        "selection": "#ef59a34d"
       },
       {
         "cursor": "#f7bf17",
-        "selection": "#fce9b7"
+        "selection": "#f7bf174d"
       }
     ],
     "autocomplete": {
@@ -680,7 +680,7 @@
         "color": "#ee670a",
         "italic": true
       },
-      "list_marker": "#20b0f2"
+      "list_marker": "#393939"
     }
   },
   "project_diagnostics": {
@@ -690,7 +690,7 @@
     "empty_message": {
       "family": "Zed Sans",
       "color": "#2b2b2b",
-      "size": 14
+      "size": 18
     },
     "status_bar_item": {
       "family": "Zed Sans",
@@ -949,7 +949,7 @@
       "text": {
         "family": "Zed Mono",
         "color": "#2b2b2b",
-        "size": 16
+        "size": 14
       },
       "placeholder_text": {
         "family": "Zed Mono",
@@ -958,7 +958,7 @@
       },
       "selection": {
         "cursor": "#2472f2",
-        "selection": "#c5dafc"
+        "selection": "#2472f24d"
       },
       "border": {
         "color": "#e3e3e3",
@@ -988,8 +988,8 @@
     },
     "host_username": {
       "family": "Zed Mono",
-      "color": "#808080",
-      "size": 16,
+      "color": "#2b2b2b",
+      "size": 14,
       "padding": {
         "left": 8
       }
@@ -1003,8 +1003,8 @@
       },
       "name": {
         "family": "Zed Mono",
-        "color": "#555555",
-        "size": 16,
+        "color": "#aaaaaa",
+        "size": 14,
         "margin": {
           "right": 6
         }
@@ -1022,15 +1022,17 @@
       },
       "name": {
         "family": "Zed Mono",
-        "color": "#2b2b2b",
-        "size": 16,
+        "color": "#555555",
+        "size": 14,
         "margin": {
           "right": 6
         }
       },
       "padding": {
         "left": 8
-      }
+      },
+      "background": "#f1f1f1",
+      "corner_radius": 6
     },
     "hovered_shared_project": {
       "guest_avatar_spacing": 4,
@@ -1041,8 +1043,8 @@
       },
       "name": {
         "family": "Zed Mono",
-        "color": "#2b2b2b",
-        "size": 16,
+        "color": "#555555",
+        "size": 14,
         "margin": {
           "right": 6
         }
@@ -1050,7 +1052,7 @@
       "padding": {
         "left": 8
       },
-      "background": "#f1f1f1",
+      "background": "#e3e3e3",
       "corner_radius": 6
     },
     "unshared_project": {
@@ -1062,8 +1064,8 @@
       },
       "name": {
         "family": "Zed Mono",
-        "color": "#555555",
-        "size": 16,
+        "color": "#aaaaaa",
+        "size": 14,
         "margin": {
           "right": 6
         }
@@ -1081,8 +1083,8 @@
       },
       "name": {
         "family": "Zed Mono",
-        "color": "#555555",
-        "size": 16,
+        "color": "#aaaaaa",
+        "size": 14,
         "margin": {
           "right": 6
         }
@@ -1090,18 +1092,17 @@
       "padding": {
         "left": 8
       },
-      "background": "#f1f1f1",
       "corner_radius": 6
     }
   },
   "search": {
-    "match_background": "#ffffff",
+    "match_background": "#1096d329",
     "tab_icon_spacing": 4,
     "tab_icon_width": 14,
     "active_hovered_option_button": {
       "family": "Zed Mono",
       "color": "#555555",
-      "size": 16,
+      "size": 14,
       "background": "#e3e3e3",
       "corner_radius": 6,
       "border": {
@@ -1122,7 +1123,7 @@
     "active_option_button": {
       "family": "Zed Mono",
       "color": "#555555",
-      "size": 16,
+      "size": 14,
       "background": "#e3e3e3",
       "corner_radius": 6,
       "border": {
@@ -1148,19 +1149,19 @@
       "placeholder_text": {
         "family": "Zed Mono",
         "color": "#aaaaaa",
-        "size": 16
+        "size": 14
       },
       "selection": {
         "cursor": "#2472f2",
-        "selection": "#c5dafc"
+        "selection": "#2472f24d"
       },
       "text": {
         "family": "Zed Mono",
         "color": "#2b2b2b",
-        "size": 16
+        "size": 14
       },
       "border": {
-        "color": "#c6c6c6",
+        "color": "#e3e3e3",
         "width": 1
       },
       "margin": {
@@ -1176,7 +1177,7 @@
     "hovered_option_button": {
       "family": "Zed Mono",
       "color": "#555555",
-      "size": 16,
+      "size": 14,
       "background": "#e3e3e3",
       "corner_radius": 6,
       "border": {
@@ -1202,16 +1203,16 @@
       "placeholder_text": {
         "family": "Zed Mono",
         "color": "#aaaaaa",
-        "size": 16
+        "size": 14
       },
       "selection": {
         "cursor": "#2472f2",
-        "selection": "#c5dafc"
+        "selection": "#2472f24d"
       },
       "text": {
         "family": "Zed Mono",
         "color": "#2b2b2b",
-        "size": 16
+        "size": 14
       },
       "border": {
         "color": "#f9a0a0",
@@ -1230,13 +1231,13 @@
     "match_index": {
       "family": "Zed Mono",
       "color": "#808080",
-      "size": 16,
+      "size": 14,
       "padding": 6
     },
     "option_button": {
       "family": "Zed Mono",
       "color": "#555555",
-      "size": 16,
+      "size": 14,
       "background": "#f1f1f1",
       "corner_radius": 6,
       "border": {
diff --git a/styles/nodemon.json b/styles/nodemon.json
index 24022a55ad..ae631a5ec4 100644
--- a/styles/nodemon.json
+++ b/styles/nodemon.json
@@ -1,6 +1,8 @@
 {
-  "watch": ["./**/*"],
-  "ext": "ts",
-  "ignore": [],
-  "exec": "ts-node buildThemes.ts"
+    "watch": [
+        "./**/*"
+    ],
+    "ext": "ts",
+    "ignore": [],
+    "exec": "ts-node src/buildThemes.ts"
 }
\ No newline at end of file
diff --git a/styles/src/styleTree/components.ts b/styles/src/styleTree/components.ts
index 155d36d312..08a8aa0854 100644
--- a/styles/src/styleTree/components.ts
+++ b/styles/src/styleTree/components.ts
@@ -1,16 +1,9 @@
 import chroma from "chroma-js";
-import Theme, { BackgroundColor } from "../themes/theme";
-import { fontFamilies, fontSizes, FontFamily, FontWeight, FontSize } from "../tokens";
+import Theme, { BackgroundColorSet } from "../themes/theme";
+import { fontFamilies, fontSizes, FontWeight } from "../tokens";
 import { Color } from "../utils/color";
 
 export type TextColor = keyof Theme["textColor"];
-export interface Text {
-    family: FontFamily,
-    color: Color,
-    size: FontSize,
-    weight?: FontWeight,
-    underline?: boolean,
-}
 export function text(
     theme: Theme,
     fontFamily: keyof typeof fontFamilies,
@@ -20,18 +13,20 @@ export function text(
         weight?: FontWeight;
         underline?: boolean;
     }
-): Text {
-    let extraProperties = {
-        ...properties,
-        size: fontSizes[properties.size || "sm"].value,
-    };
+) {
+    let size = fontSizes[properties?.size || "sm"].value;
     return {
         family: fontFamilies[fontFamily].value,
         color: theme.textColor[color].value,
-        ...extraProperties,
+        ...properties,
+        size,
     };
 }
+export function textColor(theme: Theme, color: TextColor) {
+    return theme.textColor[color].value;
+}
 
+export type BorderColor = keyof Theme["borderColor"];
 export interface BorderOptions {
     width?: number;
     top?: boolean;
@@ -42,7 +37,7 @@ export interface BorderOptions {
 }
 export function border(
     theme: Theme,
-    color: keyof Theme["borderColor"],
+    color: BorderColor,
     options?: BorderOptions
 ) {
     return {
@@ -51,25 +46,25 @@ export function border(
         ...options,
     };
 }
-
-export function borderColor(theme: Theme, color: keyof Theme["borderColor"]) {
+export function borderColor(theme: Theme, color: BorderColor) {
     return theme.borderColor[color].value;
 }
 
-export function iconColor(theme: Theme, color: keyof Theme["iconColor"]) {
+export type IconColor = keyof Theme["iconColor"];
+export function iconColor(theme: Theme, color: IconColor) {
     return theme.iconColor[color].value;
 }
 
+export type PlayerIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 export interface Player {
     selection: {
         cursor: Color;
         selection: Color;
     };
 }
-
 export function player(
     theme: Theme,
-    playerNumber: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
+    playerNumber: PlayerIndex,
 ): Player {
     return {
         selection: {
@@ -79,10 +74,12 @@ export function player(
     };
 }
 
+export type BackgroundColor = keyof Theme["backgroundColor"];
+export type BackgroundState = keyof BackgroundColorSet;
 export function backgroundColor(
     theme: Theme,
-    name: keyof Theme["backgroundColor"],
-    state?: keyof BackgroundColor
+    name: BackgroundColor,
+    state?: BackgroundState,
 ): Color {
     return theme.backgroundColor[name][state || "base"].value;
 }
diff --git a/styles/src/styleTree/contactsPanel.ts b/styles/src/styleTree/contactsPanel.ts
index 9b88a35f13..6d43275647 100644
--- a/styles/src/styleTree/contactsPanel.ts
+++ b/styles/src/styleTree/contactsPanel.ts
@@ -1,6 +1,6 @@
 import Theme from "../themes/theme";
 import { panel } from "./app";
-import { borderColor, text } from "./components";
+import { backgroundColor, borderColor, text } from "./components";
 
 export default function(theme: Theme) {
     const project = {
@@ -11,7 +11,7 @@ export default function(theme: Theme) {
             width: 14,
         },
         name: {
-            ...text(theme, "mono", "secondary"),
+            ...text(theme, "mono", "placeholder", { size: "sm" }),
             margin: {
                 right: 6,
             },
@@ -23,9 +23,11 @@ export default function(theme: Theme) {
 
     const sharedProject = {
         ...project,
+        background: backgroundColor(theme, 300),
+        cornerRadius: 6,
         name: {
             ...project.name,
-            ...text(theme, "mono", "primary"),
+            ...text(theme, "mono", "secondary", { size: "sm" }),
         },
     };
 
@@ -39,7 +41,7 @@ export default function(theme: Theme) {
             width: 18,
         },
         hostUsername: {
-            ...text(theme, "mono", "muted"),
+            ...text(theme, "mono", "primary", { size: "sm" }),
             padding: {
                 left: 8,
             },
@@ -48,13 +50,12 @@ export default function(theme: Theme) {
         sharedProject,
         hoveredSharedProject: {
             ...sharedProject,
-            background: theme.editor.line.active.value,
+            background: backgroundColor(theme, 300, "hovered"),
             cornerRadius: 6,
         },
         unsharedProject: project,
         hoveredUnsharedProject: {
             ...project,
-            background: theme.editor.line.active.value,
             cornerRadius: 6,
         },
     }
diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts
index 7a3d374e5a..7e08569acd 100644
--- a/styles/src/styleTree/search.ts
+++ b/styles/src/styleTree/search.ts
@@ -27,7 +27,7 @@ export default function search(theme: Theme) {
         placeholderText: text(theme, "mono", "placeholder"),
         selection: player(theme, 1).selection,
         text: text(theme, "mono", "primary"),
-        border: border(theme, "primary"),
+        border: border(theme, "secondary"),
         margin: {
             right: 5,
         },
diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts
index d21bed24aa..a65356c636 100644
--- a/styles/src/styleTree/workspace.ts
+++ b/styles/src/styleTree/workspace.ts
@@ -79,7 +79,7 @@ export default function workspace(theme: Theme) {
             border: border(theme, "primary", { left: true }),
         },
         paneDivider: {
-            color: border(theme, "primary").color,
+            color: border(theme, "secondary").color,
             width: 1,
         },
         status_bar: {
@@ -98,7 +98,7 @@ export default function workspace(theme: Theme) {
             height: 32,
             background: backgroundColor(theme, 100),
             shareIconColor: iconColor(theme, "secondary"),
-            shareIconActiveColor: iconColor(theme, "active"),
+            shareIconActiveColor: iconColor(theme, "feature"),
             title: text(theme, "sans", "primary"),
             avatar: {
                 cornerRadius: 10,
diff --git a/styles/src/themes/dark.ts b/styles/src/themes/dark.ts
index c1d68232b1..b9893430d3 100644
--- a/styles/src/themes/dark.ts
+++ b/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";
 
@@ -49,8 +49,8 @@ const backgroundColor = {
 
 const borderColor = {
     primary: colors.neutral[875],
-    secondary: colors.neutral[825],
-    muted: colors.neutral[775],
+    secondary: colors.neutral[775],
+    muted: colors.neutral[675],
     focused: colors.neutral[500],
     active: colors.neutral[900],
     ok: colors.green[500],
@@ -62,8 +62,8 @@ const borderColor = {
 const textColor = {
     primary: colors.neutral[50],
     secondary: colors.neutral[350],
-    muted: colors.neutral[550],
-    placeholder: colors.neutral[750],
+    muted: colors.neutral[450],
+    placeholder: colors.neutral[650],
     active: colors.neutral[0],
     //TODO: (design) define feature and it's correct value
     feature: colors.sky[500],
diff --git a/styles/src/themes/theme.ts b/styles/src/themes/theme.ts
index 94a508529d..d7ba990e73 100644
--- a/styles/src/themes/theme.ts
+++ b/styles/src/themes/theme.ts
@@ -1,5 +1,5 @@
 import { ColorToken, FontWeightToken, NumberToken } from "../tokens";
-import { Color, withOpacity } from "../utils/color";
+import { withOpacity } from "../utils/color";
 
 export interface SyntaxHighlightStyle {
     color: ColorToken;
@@ -21,12 +21,12 @@ export function buildPlayer(
     return {
         baseColor: color,
         cursorColor: withOpacity(color, cursorOpacity || 1.0),
-        selectionColor: withOpacity(color, selectionOpacity || 0.1),
+        selectionColor: withOpacity(color, selectionOpacity || 0.3),
         borderColor: withOpacity(color, borderOpacity || 0.8),
     }
 }
 
-export interface BackgroundColor {
+export interface BackgroundColorSet {
     base: ColorToken;
     hovered: ColorToken;
     active: ColorToken;
@@ -55,19 +55,18 @@ export interface Syntax {
     emphasisStrong: SyntaxHighlightStyle;
     linkUrl: SyntaxHighlightStyle;
     linkText: SyntaxHighlightStyle;
-    listMarker: SyntaxHighlightStyle;
 };
 
 export default interface Theme {
     name: string;
     backgroundColor: {
-        100: BackgroundColor;
-        300: BackgroundColor;
-        500: BackgroundColor;
-        ok: BackgroundColor;
-        error: BackgroundColor;
-        warning: BackgroundColor;
-        info: BackgroundColor;
+        100: BackgroundColorSet;
+        300: BackgroundColorSet;
+        500: BackgroundColorSet;
+        ok: BackgroundColorSet;
+        error: BackgroundColorSet;
+        warning: BackgroundColorSet;
+        info: BackgroundColorSet;
     };
     borderColor: {
         primary: ColorToken;