diff --git a/crates/zed/assets/themes/dark.json b/crates/zed/assets/themes/dark.json index 65bf78b140..fd11fc6c3a 100644 --- a/crates/zed/assets/themes/dark.json +++ b/crates/zed/assets/themes/dark.json @@ -1,6 +1,6 @@ { "selector": { - "background": "#e6e6e6", + "background": "#000000", "corner_radius": 6, "padding": 8, "item": { @@ -13,12 +13,12 @@ "corner_radius": 6, "text": { "family": "Zed Sans", - "color": "#595959", + "color": "#9c9c9c", "size": 14 }, "highlight_text": { "family": "Zed Sans", - "color": "#2db4f3", + "color": "#90df17", "weight": "bold", "size": 14 } @@ -33,25 +33,25 @@ "corner_radius": 6, "text": { "family": "Zed Sans", - "color": "#262626", + "color": "#d5d5d5", "size": 14 }, "highlight_text": { "family": "Zed Sans", - "color": "#2db4f3", + "color": "#90df17", "weight": "bold", "size": 14 }, - "background": "#e6e6e6" + "background": "#000000" }, "border": { - "color": "#d9d9d9", + "color": "#0e0e0e", "width": 1 }, "empty": { "text": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#636363", "size": 14 }, "padding": { @@ -62,11 +62,11 @@ } }, "input_editor": { - "background": "#cccccc", + "background": "#1c1c1c", "corner_radius": 6, "placeholder_text": { "family": "Zed Sans", - "color": "#bfbfbf", + "color": "#2b2b2b", "size": 14 }, "selection": { @@ -75,11 +75,11 @@ }, "text": { "family": "Zed Mono", - "color": "#262626", + "color": "#d5d5d5", "size": 16 }, "border": { - "color": "#d9d9d9", + "color": "#0e0e0e", "width": 1 }, "padding": { @@ -103,24 +103,25 @@ } }, "workspace": { - "background": "#e6e6e6", + "background": "#1c1c1c", "leader_border_opacity": 0.7, "leader_border_width": 2, "tab": { - "height": 34, - "icon_close": "#808080", - "icon_close_active": "#0d0d0d", - "icon_conflict": "#f8c570", - "icon_dirty": "#6099f7", + "height": 32, + "background": "#1c1c1c", + "icon_close": "#717171", + "icon_close_active": "#f1f1f1", + "icon_conflict": "#f7b241", + "icon_dirty": "#4287f6", "icon_width": 8, "spacing": 10, "text": { "family": "Zed Mono", - "color": "#595959", - "size": 16 + "color": "#9c9c9c", + "size": 14 }, "border": { - "color": "#d9d9d9", + "color": "#0e0e0e", "width": 1, "left": true, "bottom": true, @@ -132,20 +133,21 @@ } }, "active_tab": { - "height": 34, - "icon_close": "#808080", - "icon_close_active": "#0d0d0d", - "icon_conflict": "#f8c570", - "icon_dirty": "#6099f7", + "height": 32, + "background": "#000000", + "icon_close": "#717171", + "icon_close_active": "#f1f1f1", + "icon_conflict": "#f7b241", + "icon_dirty": "#4287f6", "icon_width": 8, "spacing": 10, "text": { "family": "Zed Mono", - "color": "#262626", - "size": 16 + "color": "#ffffff", + "size": 14 }, "border": { - "color": "#d9d9d9", + "color": "#0e0e0e", "width": 1, "left": true, "bottom": false, @@ -154,28 +156,28 @@ "padding": { "left": 12, "right": 12 - }, - "background": "#cccccc" + } }, "left_sidebar": { "width": 30, + "background": "#1c1c1c", "border": { - "color": "#d9d9d9", + "color": "#0e0e0e", "width": 1, "right": true }, "item": { "height": 32, - "icon_color": "#808080", + "icon_color": "#717171", "icon_size": 18 }, "active_item": { "height": 32, - "icon_color": "#4d4d4d", + "icon_color": "#f1f1f1", "icon_size": 18 }, "resize_handle": { - "background": "#d9d9d9", + "background": "#0e0e0e", "padding": { "left": 1 } @@ -183,30 +185,31 @@ }, "right_sidebar": { "width": 30, + "background": "#1c1c1c", "border": { - "color": "#d9d9d9", + "color": "#0e0e0e", "width": 1, "left": true }, "item": { "height": 32, - "icon_color": "#808080", + "icon_color": "#717171", "icon_size": 18 }, "active_item": { "height": 32, - "icon_color": "#4d4d4d", + "icon_color": "#f1f1f1", "icon_size": 18 }, "resize_handle": { - "background": "#d9d9d9", + "background": "#0e0e0e", "padding": { "left": 1 } } }, "pane_divider": { - "color": "#d9d9d9", + "color": "#0e0e0e", "width": 1 }, "status_bar": { @@ -218,28 +221,29 @@ }, "cursor_position": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#636363", "size": 14 }, "diagnostic_message": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#636363", "size": 14 }, "lsp_message": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#636363", "size": 14 } }, "titlebar": { "avatar_width": 18, "height": 32, - "share_icon_color": "#808080", - "share_icon_active_color": "#0d0d0d", + "background": "#393939", + "share_icon_color": "#717171", + "share_icon_active_color": "#f1f1f1", "title": { "family": "Zed Sans", - "color": "#262626", + "color": "#d5d5d5", "size": 14 }, "avatar": { @@ -254,13 +258,13 @@ "width": 12 }, "border": { - "color": "#d9d9d9", + "color": "#0e0e0e", "width": 1, "bottom": true }, "sign_in_prompt": { "family": "Zed Sans", - "color": "#595959", + "color": "#9c9c9c", "size": 13, "underline": true, "padding": { @@ -269,15 +273,15 @@ }, "hovered_sign_in_prompt": { "family": "Zed Mono", - "color": "#000000", - "size": 16, + "color": "#ffffff", + "size": 13, "underline": true, "padding": { "right": 8 } }, "offline_icon": { - "color": "#999999", + "color": "#717171", "width": 16, "padding": { "right": 4 @@ -285,15 +289,15 @@ }, "outdated_warning": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#f8c570", "size": 13 } }, "toolbar": { "height": 34, - "background": "#cccccc", + "background": "#000000", "border": { - "color": "#d9d9d9", + "color": "#2b2b2b", "width": 1, "bottom": true }, @@ -307,7 +311,7 @@ }, "breadcrumbs": { "family": "Zed Mono", - "color": "#595959", + "color": "#9c9c9c", "size": 16, "padding": { "left": 6 @@ -321,20 +325,20 @@ } }, "editor": { - "text_color": "#595959", - "background": "#cccccc", - "active_line_background": "#000000", - "code_actions_indicator": "#808080", + "text_color": "#9c9c9c", + "background": "#000000", + "active_line_background": "#ffffff", + "code_actions_indicator": "#717171", "diff_background_deleted": "#f78c8c", "diff_background_inserted": "#22c55e", - "document_highlight_read_background": "#e6e6e6", - "document_highlight_write_background": "#e6e6e6", + "document_highlight_read_background": "#000000", + "document_highlight_write_background": "#000000", "error_color": "#f78c8c", - "gutter_background": "#cccccc", + "gutter_background": "#000000", "gutter_padding_factor": 2.5, - "highlighted_line_background": "#000000", - "line_number": "#000000", - "line_number_active": "#000000", + "highlighted_line_background": "#ffffff", + "line_number": "#ffffff", + "line_number_active": "#ffffff", "rename_fade": 0.6, "unnecessary_code_fade": 0.5, "selection": { @@ -372,11 +376,11 @@ } ], "autocomplete": { - "background": "#bfbfbf", + "background": "#000000", "corner_radius": 6, "padding": 6, "border": { - "color": "#b3b3b3", + "color": "#393939", "width": 1 }, "item": { @@ -396,7 +400,7 @@ "right": 6, "top": 2 }, - "background": "#bfbfbf" + "background": "#000000" }, "margin": { "left": -14 @@ -413,22 +417,22 @@ "right": 6, "top": 2 }, - "background": "#bfbfbf" + "background": "#000000" } }, "diagnostic_header": { - "background": "#e6e6e6", + "background": "#1c1c1c", "icon_width_factor": 1.5, "text_scale_factor": 0.857, "border": { - "color": "#b3b3b3", + "color": "#393939", "width": 1, "bottom": true, "top": true }, "code": { "family": "Zed Mono", - "color": "#8c8c8c", + "color": "#636363", "size": 14, "margin": { "left": 10 @@ -437,28 +441,28 @@ "message": { "highlight_text": { "family": "Zed Sans", - "color": "#262626", + "color": "#d5d5d5", "size": 14, "weight": "bold" }, "text": { "family": "Zed Sans", - "color": "#595959", + "color": "#9c9c9c", "size": 14 } } }, "diagnostic_path_header": { - "background": "#000000", + "background": "#ffffff", "text_scale_factor": 0.857, "filename": { "family": "Zed Mono", - "color": "#262626", + "color": "#d5d5d5", "size": 14 }, "path": { "family": "Zed Mono", - "color": "#8c8c8c", + "color": "#636363", "size": 14, "margin": { "left": 12 @@ -469,7 +473,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#d9d9d9", + "color": "#0e0e0e", "width": 1, "top": true } @@ -492,7 +496,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#d9d9d9", + "color": "#0e0e0e", "width": 1, "top": true } @@ -515,7 +519,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#d9d9d9", + "color": "#0e0e0e", "width": 1, "top": true } @@ -538,7 +542,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#d9d9d9", + "color": "#0e0e0e", "width": 1, "top": true } @@ -561,7 +565,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#d9d9d9", + "color": "#0e0e0e", "width": 1, "top": true } @@ -569,12 +573,12 @@ "message": { "text": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#636363", "size": 14 }, "highlight_text": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#636363", "size": 14, "weight": "bold" } @@ -584,7 +588,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#d9d9d9", + "color": "#0e0e0e", "width": 1, "top": true } @@ -592,12 +596,12 @@ "message": { "text": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#636363", "size": 14 }, "highlight_text": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#636363", "size": 14, "weight": "bold" } @@ -607,7 +611,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#d9d9d9", + "color": "#0e0e0e", "width": 1, "top": true } @@ -615,12 +619,12 @@ "message": { "text": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#636363", "size": 14 }, "highlight_text": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#636363", "size": 14, "weight": "bold" } @@ -630,7 +634,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#d9d9d9", + "color": "#0e0e0e", "width": 1, "top": true } @@ -638,12 +642,12 @@ "message": { "text": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#636363", "size": 14 }, "highlight_text": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#636363", "size": 14, "weight": "bold" } @@ -652,18 +656,18 @@ "syntax": {} }, "project_diagnostics": { - "background": "#cccccc", + "background": "#1c1c1c", "tab_icon_spacing": 4, "tab_icon_width": 13, "tab_summary_spacing": 10, "empty_message": { "family": "Zed Sans", - "color": "#262626", + "color": "#d5d5d5", "size": 14 }, "status_bar_item": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#636363", "size": 14, "margin": { "right": 10 @@ -672,52 +676,53 @@ }, "project_panel": { "padding": { - "top": 6 + "top": 6, + "left": 12 }, "entry": { "height": 22, - "icon_color": "#999999", + "icon_color": "#555555", "icon_size": 8, "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#595959", - "size": 16 + "color": "#9c9c9c", + "size": 14 } }, "hovered_entry": { "height": 22, - "background": "#cccccc", - "icon_color": "#999999", + "background": "#1c1c1c", + "icon_color": "#555555", "icon_size": 8, "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#595959", - "size": 16 + "color": "#9c9c9c", + "size": 14 } }, "selected_entry": { "height": 22, - "icon_color": "#999999", + "icon_color": "#555555", "icon_size": 8, "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#262626", - "size": 16 + "color": "#d5d5d5", + "size": 14 } }, "hovered_selected_entry": { "height": 22, - "background": "#cccccc", - "icon_color": "#999999", + "background": "#1c1c1c", + "icon_color": "#555555", "icon_size": 8, "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#262626", - "size": 16 + "color": "#d5d5d5", + "size": 14 } } }, @@ -730,13 +735,13 @@ }, "channel_name": { "family": "Zed Sans", - "color": "#262626", + "color": "#d5d5d5", "weight": "bold", "size": 14 }, "channel_name_hash": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#636363", "size": 14, "padding": { "right": 8 @@ -746,7 +751,7 @@ "header": { "name": { "family": "Zed Sans", - "color": "#262626", + "color": "#d5d5d5", "size": 14 }, "padding": { @@ -755,7 +760,7 @@ }, "hash": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#636363", "size": 14, "margin": { "right": 8 @@ -766,13 +771,13 @@ "item": { "name": { "family": "Zed Sans", - "color": "#595959", + "color": "#9c9c9c", "size": 14 }, "padding": 4, "hash": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#636363", "size": 14, "margin": { "right": 8 @@ -783,31 +788,31 @@ "hovered_item": { "name": { "family": "Zed Sans", - "color": "#595959", + "color": "#9c9c9c", "size": 14 }, "padding": 4, "hash": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#636363", "size": 14, "margin": { "right": 8 } }, - "background": "#cccccc", + "background": "#1c1c1c", "corner_radius": 6 }, "active_item": { "name": { "family": "Zed Sans", - "color": "#262626", + "color": "#d5d5d5", "size": 14 }, "padding": 4, "hash": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#636363", "size": 14, "margin": { "right": 8 @@ -818,27 +823,27 @@ "hovered_active_item": { "name": { "family": "Zed Sans", - "color": "#262626", + "color": "#d5d5d5", "size": 14 }, "padding": 4, "hash": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#636363", "size": 14, "margin": { "right": 8 } }, - "background": "#cccccc", + "background": "#1c1c1c", "corner_radius": 6 }, "menu": { - "background": "#e6e6e6", + "background": "#000000", "corner_radius": 6, "padding": 4, "border": { - "color": "#d9d9d9", + "color": "#0e0e0e", "width": 1 }, "shadow": { @@ -853,25 +858,25 @@ }, "sign_in_prompt": { "family": "Zed Sans", - "color": "#595959", + "color": "#9c9c9c", "underline": true, "size": 14 }, "hovered_sign_in_prompt": { "family": "Zed Sans", - "color": "#262626", + "color": "#d5d5d5", "underline": true, "size": 14 }, "message": { "body": { "family": "Zed Sans", - "color": "#595959", + "color": "#9c9c9c", "size": 14 }, "timestamp": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#636363", "size": 14 }, "padding": { @@ -879,7 +884,7 @@ }, "sender": { "family": "Zed Sans", - "color": "#262626", + "color": "#d5d5d5", "weight": "bold", "size": 14, "margin": { @@ -890,12 +895,12 @@ "pending_message": { "body": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#636363", "size": 14 }, "timestamp": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#636363", "size": 14 }, "padding": { @@ -903,7 +908,7 @@ }, "sender": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#636363", "weight": "bold", "size": 14, "margin": { @@ -912,24 +917,24 @@ } }, "input_editor": { - "background": "#cccccc", + "background": "#000000", "corner_radius": 6, "text": { "family": "Zed Mono", - "color": "#262626", + "color": "#d5d5d5", "size": 16 }, "placeholder_text": { "family": "Zed Mono", - "color": "#8c8c8c", - "size": 16 + "color": "#2b2b2b", + "size": 14 }, "selection": { "cursor": "#4287f6", "selection": "#4287f6" }, "border": { - "color": "#d9d9d9", + "color": "#393939", "width": 1 }, "padding": { @@ -948,7 +953,7 @@ "right": 12 }, "host_row_height": 28, - "tree_branch_color": "#bfbfbf", + "tree_branch_color": "#2b2b2b", "tree_branch_width": 1, "host_avatar": { "corner_radius": 10, @@ -956,7 +961,7 @@ }, "host_username": { "family": "Zed Mono", - "color": "#8c8c8c", + "color": "#636363", "size": 16, "padding": { "left": 8 @@ -971,7 +976,7 @@ }, "name": { "family": "Zed Mono", - "color": "#595959", + "color": "#9c9c9c", "size": 16, "margin": { "right": 6 @@ -990,7 +995,7 @@ }, "name": { "family": "Zed Mono", - "color": "#262626", + "color": "#d5d5d5", "size": 16, "margin": { "right": 6 @@ -1009,7 +1014,7 @@ }, "name": { "family": "Zed Mono", - "color": "#262626", + "color": "#d5d5d5", "size": 16, "margin": { "right": 6 @@ -1018,7 +1023,7 @@ "padding": { "left": 8 }, - "background": "#000000", + "background": "#ffffff", "corner_radius": 6 }, "unshared_project": { @@ -1030,7 +1035,7 @@ }, "name": { "family": "Zed Mono", - "color": "#595959", + "color": "#9c9c9c", "size": 16, "margin": { "right": 6 @@ -1049,7 +1054,7 @@ }, "name": { "family": "Zed Mono", - "color": "#595959", + "color": "#9c9c9c", "size": 16, "margin": { "right": 6 @@ -1058,22 +1063,22 @@ "padding": { "left": 8 }, - "background": "#000000", + "background": "#ffffff", "corner_radius": 6 } }, "search": { - "match_background": "#000000", + "match_background": "#ffffff", "tab_icon_spacing": 4, "tab_icon_width": 14, "active_hovered_option_button": { "family": "Zed Mono", - "color": "#595959", + "color": "#9c9c9c", "size": 16, - "background": "#bfbfbf", + "background": "#393939", "corner_radius": 6, "border": { - "color": "#d9d9d9", + "color": "#0e0e0e", "width": 1 }, "margin": { @@ -1089,12 +1094,12 @@ }, "active_option_button": { "family": "Zed Mono", - "color": "#595959", + "color": "#9c9c9c", "size": 16, - "background": "#bfbfbf", + "background": "#393939", "corner_radius": 6, "border": { - "color": "#d9d9d9", + "color": "#0e0e0e", "width": 1 }, "margin": { @@ -1109,13 +1114,13 @@ } }, "editor": { - "background": "#e6e6e6", + "background": "#000000", "corner_radius": 6, "min_width": 200, "max_width": 500, "placeholder_text": { "family": "Zed Mono", - "color": "#bfbfbf", + "color": "#2b2b2b", "size": 16 }, "selection": { @@ -1124,11 +1129,11 @@ }, "text": { "family": "Zed Mono", - "color": "#262626", + "color": "#d5d5d5", "size": 16 }, "border": { - "color": "#d9d9d9", + "color": "#0e0e0e", "width": 1 }, "margin": { @@ -1143,12 +1148,12 @@ }, "hovered_option_button": { "family": "Zed Mono", - "color": "#595959", + "color": "#9c9c9c", "size": 16, - "background": "#bfbfbf", + "background": "#393939", "corner_radius": 6, "border": { - "color": "#d9d9d9", + "color": "#0e0e0e", "width": 1 }, "margin": { @@ -1163,13 +1168,13 @@ } }, "invalid_editor": { - "background": "#e6e6e6", + "background": "#000000", "corner_radius": 6, "min_width": 200, "max_width": 500, "placeholder_text": { "family": "Zed Mono", - "color": "#bfbfbf", + "color": "#2b2b2b", "size": 16 }, "selection": { @@ -1178,11 +1183,11 @@ }, "text": { "family": "Zed Mono", - "color": "#262626", + "color": "#d5d5d5", "size": 16 }, "border": { - "color": "#ffffff", + "color": "#f47171", "width": 1 }, "margin": { @@ -1197,18 +1202,18 @@ }, "match_index": { "family": "Zed Mono", - "color": "#8c8c8c", + "color": "#636363", "size": 16, "padding": 6 }, "option_button": { "family": "Zed Mono", - "color": "#595959", + "color": "#9c9c9c", "size": 16, - "background": "#cccccc", + "background": "#1c1c1c", "corner_radius": 6, "border": { - "color": "#d9d9d9", + "color": "#0e0e0e", "width": 1 }, "margin": { @@ -1230,13 +1235,13 @@ }, "results_status": { "family": "Zed Mono", - "color": "#262626", + "color": "#d5d5d5", "size": 18 } }, "breadcrumbs": { "family": "Zed Sans", - "color": "#262626", + "color": "#d5d5d5", "size": 14, "padding": { "left": 6 diff --git a/crates/zed/assets/themes/light.json b/crates/zed/assets/themes/light.json index 65bf78b140..219f958e87 100644 --- a/crates/zed/assets/themes/light.json +++ b/crates/zed/assets/themes/light.json @@ -1,6 +1,6 @@ { "selector": { - "background": "#e6e6e6", + "background": "#ffffff", "corner_radius": 6, "padding": 8, "item": { @@ -13,12 +13,12 @@ "corner_radius": 6, "text": { "family": "Zed Sans", - "color": "#595959", + "color": "#393939", "size": 14 }, "highlight_text": { "family": "Zed Sans", - "color": "#2db4f3", + "color": "#4287f6", "weight": "bold", "size": 14 } @@ -33,25 +33,25 @@ "corner_radius": 6, "text": { "family": "Zed Sans", - "color": "#262626", + "color": "#1c1c1c", "size": 14 }, "highlight_text": { "family": "Zed Sans", - "color": "#2db4f3", + "color": "#4287f6", "weight": "bold", "size": 14 }, - "background": "#e6e6e6" + "background": "#e3e3e3" }, "border": { - "color": "#d9d9d9", + "color": "#c6c6c6", "width": 1 }, "empty": { "text": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#555555", "size": 14 }, "padding": { @@ -62,24 +62,24 @@ } }, "input_editor": { - "background": "#cccccc", + "background": "#f1f1f1", "corner_radius": 6, "placeholder_text": { "family": "Zed Sans", - "color": "#bfbfbf", + "color": "#717171", "size": 14 }, "selection": { - "cursor": "#4287f6", - "selection": "#4287f6" + "cursor": "#6099f7", + "selection": "#d0e2fd" }, "text": { "family": "Zed Mono", - "color": "#262626", + "color": "#1c1c1c", "size": 16 }, "border": { - "color": "#d9d9d9", + "color": "#c6c6c6", "width": 1 }, "padding": { @@ -95,7 +95,7 @@ }, "shadow": { "blur": 16, - "color": "#00000052", + "color": "#0000001f", "offset": [ 0, 2 @@ -103,24 +103,25 @@ } }, "workspace": { - "background": "#e6e6e6", + "background": "#f1f1f1", "leader_border_opacity": 0.7, "leader_border_width": 2, "tab": { - "height": 34, - "icon_close": "#808080", - "icon_close_active": "#0d0d0d", - "icon_conflict": "#f8c570", - "icon_dirty": "#6099f7", + "height": 32, + "background": "#f1f1f1", + "icon_close": "#717171", + "icon_close_active": "#000000", + "icon_conflict": "#f6bc09", + "icon_dirty": "#4287f6", "icon_width": 8, "spacing": 10, "text": { "family": "Zed Mono", - "color": "#595959", - "size": 16 + "color": "#393939", + "size": 14 }, "border": { - "color": "#d9d9d9", + "color": "#c6c6c6", "width": 1, "left": true, "bottom": true, @@ -132,20 +133,21 @@ } }, "active_tab": { - "height": 34, - "icon_close": "#808080", - "icon_close_active": "#0d0d0d", - "icon_conflict": "#f8c570", - "icon_dirty": "#6099f7", + "height": 32, + "background": "#ffffff", + "icon_close": "#717171", + "icon_close_active": "#000000", + "icon_conflict": "#f6bc09", + "icon_dirty": "#4287f6", "icon_width": 8, "spacing": 10, "text": { "family": "Zed Mono", - "color": "#262626", - "size": 16 + "color": "#000000", + "size": 14 }, "border": { - "color": "#d9d9d9", + "color": "#c6c6c6", "width": 1, "left": true, "bottom": false, @@ -154,28 +156,28 @@ "padding": { "left": 12, "right": 12 - }, - "background": "#cccccc" + } }, "left_sidebar": { "width": 30, + "background": "#f1f1f1", "border": { - "color": "#d9d9d9", + "color": "#c6c6c6", "width": 1, "right": true }, "item": { "height": 32, - "icon_color": "#808080", + "icon_color": "#717171", "icon_size": 18 }, "active_item": { "height": 32, - "icon_color": "#4d4d4d", + "icon_color": "#000000", "icon_size": 18 }, "resize_handle": { - "background": "#d9d9d9", + "background": "#c6c6c6", "padding": { "left": 1 } @@ -183,30 +185,31 @@ }, "right_sidebar": { "width": 30, + "background": "#f1f1f1", "border": { - "color": "#d9d9d9", + "color": "#c6c6c6", "width": 1, "left": true }, "item": { "height": 32, - "icon_color": "#808080", + "icon_color": "#717171", "icon_size": 18 }, "active_item": { "height": 32, - "icon_color": "#4d4d4d", + "icon_color": "#000000", "icon_size": 18 }, "resize_handle": { - "background": "#d9d9d9", + "background": "#c6c6c6", "padding": { "left": 1 } } }, "pane_divider": { - "color": "#d9d9d9", + "color": "#c6c6c6", "width": 1 }, "status_bar": { @@ -218,28 +221,29 @@ }, "cursor_position": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#555555", "size": 14 }, "diagnostic_message": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#555555", "size": 14 }, "lsp_message": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#555555", "size": 14 } }, "titlebar": { "avatar_width": 18, "height": 32, - "share_icon_color": "#808080", - "share_icon_active_color": "#0d0d0d", + "background": "#e3e3e3", + "share_icon_color": "#717171", + "share_icon_active_color": "#000000", "title": { "family": "Zed Sans", - "color": "#262626", + "color": "#1c1c1c", "size": 14 }, "avatar": { @@ -254,13 +258,13 @@ "width": 12 }, "border": { - "color": "#d9d9d9", + "color": "#c6c6c6", "width": 1, "bottom": true }, "sign_in_prompt": { "family": "Zed Sans", - "color": "#595959", + "color": "#393939", "size": 13, "underline": true, "padding": { @@ -270,14 +274,14 @@ "hovered_sign_in_prompt": { "family": "Zed Mono", "color": "#000000", - "size": 16, + "size": 13, "underline": true, "padding": { "right": 8 } }, "offline_icon": { - "color": "#999999", + "color": "#717171", "width": 16, "padding": { "right": 4 @@ -285,15 +289,15 @@ }, "outdated_warning": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#b48d14", "size": 13 } }, "toolbar": { "height": 34, - "background": "#cccccc", + "background": "#ffffff", "border": { - "color": "#d9d9d9", + "color": "#f1f1f1", "width": 1, "bottom": true }, @@ -307,7 +311,7 @@ }, "breadcrumbs": { "family": "Zed Mono", - "color": "#595959", + "color": "#393939", "size": 16, "padding": { "left": 6 @@ -315,68 +319,68 @@ }, "disconnected_overlay": { "family": "Zed Sans", - "color": "#ffffff", + "color": "#000000", "size": 14, "background": "#000000aa" } }, "editor": { - "text_color": "#595959", - "background": "#cccccc", - "active_line_background": "#000000", - "code_actions_indicator": "#808080", - "diff_background_deleted": "#f78c8c", - "diff_background_inserted": "#22c55e", - "document_highlight_read_background": "#e6e6e6", - "document_highlight_write_background": "#e6e6e6", - "error_color": "#f78c8c", - "gutter_background": "#cccccc", + "text_color": "#393939", + "background": "#ffffff", + "active_line_background": "#ffffff", + "code_actions_indicator": "#717171", + "diff_background_deleted": "#fdd4d4", + "diff_background_inserted": "#befad2", + "document_highlight_read_background": "#e3e3e3", + "document_highlight_write_background": "#e3e3e3", + "error_color": "#d11c1c", + "gutter_background": "#ffffff", "gutter_padding_factor": 2.5, - "highlighted_line_background": "#000000", - "line_number": "#000000", - "line_number_active": "#000000", + "highlighted_line_background": "#ffffff", + "line_number": "#ffffff", + "line_number_active": "#ffffff", "rename_fade": 0.6, "unnecessary_code_fade": 0.5, "selection": { - "cursor": "#4287f6", - "selection": "#4287f6" + "cursor": "#6099f7", + "selection": "#d0e2fd" }, "guest_selections": [ { "cursor": "#777af4", - "selection": "#777af4" + "selection": "#d4d5fd" }, { "cursor": "#23d464", - "selection": "#23d464" + "selection": "#befad2" }, { "cursor": "#f98a3d", - "selection": "#f98a3d" + "selection": "#fde0cd" }, { "cursor": "#b671f8", - "selection": "#b671f8" + "selection": "#e9d4fd" }, { "cursor": "#16ddc7", - "selection": "#16ddc7" + "selection": "#b4faf2" }, { "cursor": "#f58ac0", - "selection": "#f58ac0" + "selection": "#fcd4e8" }, { "cursor": "#f6bc09", - "selection": "#f6bc09" + "selection": "#fceabc" } ], "autocomplete": { - "background": "#bfbfbf", + "background": "#ffffff", "corner_radius": 6, "padding": 6, "border": { - "color": "#b3b3b3", + "color": "#e3e3e3", "width": 1 }, "item": { @@ -396,7 +400,7 @@ "right": 6, "top": 2 }, - "background": "#bfbfbf" + "background": "#f1f1f1" }, "margin": { "left": -14 @@ -413,22 +417,22 @@ "right": 6, "top": 2 }, - "background": "#bfbfbf" + "background": "#e3e3e3" } }, "diagnostic_header": { - "background": "#e6e6e6", + "background": "#f1f1f1", "icon_width_factor": 1.5, "text_scale_factor": 0.857, "border": { - "color": "#b3b3b3", + "color": "#e3e3e3", "width": 1, "bottom": true, "top": true }, "code": { "family": "Zed Mono", - "color": "#8c8c8c", + "color": "#555555", "size": 14, "margin": { "left": 10 @@ -437,28 +441,28 @@ "message": { "highlight_text": { "family": "Zed Sans", - "color": "#262626", + "color": "#1c1c1c", "size": 14, "weight": "bold" }, "text": { "family": "Zed Sans", - "color": "#595959", + "color": "#393939", "size": 14 } } }, "diagnostic_path_header": { - "background": "#000000", + "background": "#ffffff", "text_scale_factor": 0.857, "filename": { "family": "Zed Mono", - "color": "#262626", + "color": "#1c1c1c", "size": 14 }, "path": { "family": "Zed Mono", - "color": "#8c8c8c", + "color": "#555555", "size": 14, "margin": { "left": 12 @@ -469,7 +473,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#d9d9d9", + "color": "#c6c6c6", "width": 1, "top": true } @@ -477,12 +481,12 @@ "message": { "text": { "family": "Zed Sans", - "color": "#f78c8c", + "color": "#d11c1c", "size": 14 }, "highlight_text": { "family": "Zed Sans", - "color": "#f78c8c", + "color": "#d11c1c", "size": 14, "weight": "bold" } @@ -492,7 +496,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#d9d9d9", + "color": "#c6c6c6", "width": 1, "top": true } @@ -500,12 +504,12 @@ "message": { "text": { "family": "Zed Sans", - "color": "#f8c570", + "color": "#b48d14", "size": 14 }, "highlight_text": { "family": "Zed Sans", - "color": "#f8c570", + "color": "#b48d14", "size": 14, "weight": "bold" } @@ -515,7 +519,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#d9d9d9", + "color": "#c6c6c6", "width": 1, "top": true } @@ -523,12 +527,12 @@ "message": { "text": { "family": "Zed Sans", - "color": "#6099f7", + "color": "#1762db", "size": 14 }, "highlight_text": { "family": "Zed Sans", - "color": "#6099f7", + "color": "#1762db", "size": 14, "weight": "bold" } @@ -538,7 +542,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#d9d9d9", + "color": "#c6c6c6", "width": 1, "top": true } @@ -546,12 +550,12 @@ "message": { "text": { "family": "Zed Sans", - "color": "#6099f7", + "color": "#1762db", "size": 14 }, "highlight_text": { "family": "Zed Sans", - "color": "#6099f7", + "color": "#1762db", "size": 14, "weight": "bold" } @@ -561,7 +565,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#d9d9d9", + "color": "#c6c6c6", "width": 1, "top": true } @@ -569,12 +573,12 @@ "message": { "text": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#555555", "size": 14 }, "highlight_text": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#555555", "size": 14, "weight": "bold" } @@ -584,7 +588,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#d9d9d9", + "color": "#c6c6c6", "width": 1, "top": true } @@ -592,12 +596,12 @@ "message": { "text": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#555555", "size": 14 }, "highlight_text": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#555555", "size": 14, "weight": "bold" } @@ -607,7 +611,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#d9d9d9", + "color": "#c6c6c6", "width": 1, "top": true } @@ -615,12 +619,12 @@ "message": { "text": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#555555", "size": 14 }, "highlight_text": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#555555", "size": 14, "weight": "bold" } @@ -630,7 +634,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#d9d9d9", + "color": "#c6c6c6", "width": 1, "top": true } @@ -638,12 +642,12 @@ "message": { "text": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#555555", "size": 14 }, "highlight_text": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#555555", "size": 14, "weight": "bold" } @@ -652,18 +656,18 @@ "syntax": {} }, "project_diagnostics": { - "background": "#cccccc", + "background": "#f1f1f1", "tab_icon_spacing": 4, "tab_icon_width": 13, "tab_summary_spacing": 10, "empty_message": { "family": "Zed Sans", - "color": "#262626", + "color": "#1c1c1c", "size": 14 }, "status_bar_item": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#555555", "size": 14, "margin": { "right": 10 @@ -672,52 +676,53 @@ }, "project_panel": { "padding": { - "top": 6 + "top": 6, + "left": 12 }, "entry": { "height": 22, - "icon_color": "#999999", + "icon_color": "#555555", "icon_size": 8, "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#595959", - "size": 16 + "color": "#393939", + "size": 14 } }, "hovered_entry": { "height": 22, - "background": "#cccccc", - "icon_color": "#999999", + "background": "#e3e3e3", + "icon_color": "#555555", "icon_size": 8, "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#595959", - "size": 16 + "color": "#393939", + "size": 14 } }, "selected_entry": { "height": 22, - "icon_color": "#999999", + "icon_color": "#555555", "icon_size": 8, "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#262626", - "size": 16 + "color": "#1c1c1c", + "size": 14 } }, "hovered_selected_entry": { "height": 22, - "background": "#cccccc", - "icon_color": "#999999", + "background": "#e3e3e3", + "icon_color": "#555555", "icon_size": 8, "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#262626", - "size": 16 + "color": "#1c1c1c", + "size": 14 } } }, @@ -730,13 +735,13 @@ }, "channel_name": { "family": "Zed Sans", - "color": "#262626", + "color": "#1c1c1c", "weight": "bold", "size": 14 }, "channel_name_hash": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#555555", "size": 14, "padding": { "right": 8 @@ -746,7 +751,7 @@ "header": { "name": { "family": "Zed Sans", - "color": "#262626", + "color": "#1c1c1c", "size": 14 }, "padding": { @@ -755,7 +760,7 @@ }, "hash": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#555555", "size": 14, "margin": { "right": 8 @@ -766,13 +771,13 @@ "item": { "name": { "family": "Zed Sans", - "color": "#595959", + "color": "#393939", "size": 14 }, "padding": 4, "hash": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#555555", "size": 14, "margin": { "right": 8 @@ -783,31 +788,31 @@ "hovered_item": { "name": { "family": "Zed Sans", - "color": "#595959", + "color": "#393939", "size": 14 }, "padding": 4, "hash": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#555555", "size": 14, "margin": { "right": 8 } }, - "background": "#cccccc", + "background": "#e3e3e3", "corner_radius": 6 }, "active_item": { "name": { "family": "Zed Sans", - "color": "#262626", + "color": "#1c1c1c", "size": 14 }, "padding": 4, "hash": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#555555", "size": 14, "margin": { "right": 8 @@ -818,32 +823,32 @@ "hovered_active_item": { "name": { "family": "Zed Sans", - "color": "#262626", + "color": "#1c1c1c", "size": 14 }, "padding": 4, "hash": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#555555", "size": 14, "margin": { "right": 8 } }, - "background": "#cccccc", + "background": "#e3e3e3", "corner_radius": 6 }, "menu": { - "background": "#e6e6e6", + "background": "#ffffff", "corner_radius": 6, "padding": 4, "border": { - "color": "#d9d9d9", + "color": "#c6c6c6", "width": 1 }, "shadow": { "blur": 16, - "color": "#00000052", + "color": "#0000001f", "offset": [ 0, 2 @@ -853,25 +858,25 @@ }, "sign_in_prompt": { "family": "Zed Sans", - "color": "#595959", + "color": "#393939", "underline": true, "size": 14 }, "hovered_sign_in_prompt": { "family": "Zed Sans", - "color": "#262626", + "color": "#1c1c1c", "underline": true, "size": 14 }, "message": { "body": { "family": "Zed Sans", - "color": "#595959", + "color": "#393939", "size": 14 }, "timestamp": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#555555", "size": 14 }, "padding": { @@ -879,7 +884,7 @@ }, "sender": { "family": "Zed Sans", - "color": "#262626", + "color": "#1c1c1c", "weight": "bold", "size": 14, "margin": { @@ -890,12 +895,12 @@ "pending_message": { "body": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#555555", "size": 14 }, "timestamp": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#555555", "size": 14 }, "padding": { @@ -903,7 +908,7 @@ }, "sender": { "family": "Zed Sans", - "color": "#8c8c8c", + "color": "#555555", "weight": "bold", "size": 14, "margin": { @@ -912,24 +917,24 @@ } }, "input_editor": { - "background": "#cccccc", + "background": "#ffffff", "corner_radius": 6, "text": { "family": "Zed Mono", - "color": "#262626", + "color": "#1c1c1c", "size": 16 }, "placeholder_text": { "family": "Zed Mono", - "color": "#8c8c8c", - "size": 16 + "color": "#717171", + "size": 14 }, "selection": { - "cursor": "#4287f6", - "selection": "#4287f6" + "cursor": "#6099f7", + "selection": "#d0e2fd" }, "border": { - "color": "#d9d9d9", + "color": "#e3e3e3", "width": 1 }, "padding": { @@ -948,7 +953,7 @@ "right": 12 }, "host_row_height": 28, - "tree_branch_color": "#bfbfbf", + "tree_branch_color": "#f1f1f1", "tree_branch_width": 1, "host_avatar": { "corner_radius": 10, @@ -956,7 +961,7 @@ }, "host_username": { "family": "Zed Mono", - "color": "#8c8c8c", + "color": "#555555", "size": 16, "padding": { "left": 8 @@ -971,7 +976,7 @@ }, "name": { "family": "Zed Mono", - "color": "#595959", + "color": "#393939", "size": 16, "margin": { "right": 6 @@ -990,7 +995,7 @@ }, "name": { "family": "Zed Mono", - "color": "#262626", + "color": "#1c1c1c", "size": 16, "margin": { "right": 6 @@ -1009,7 +1014,7 @@ }, "name": { "family": "Zed Mono", - "color": "#262626", + "color": "#1c1c1c", "size": 16, "margin": { "right": 6 @@ -1018,7 +1023,7 @@ "padding": { "left": 8 }, - "background": "#000000", + "background": "#ffffff", "corner_radius": 6 }, "unshared_project": { @@ -1030,7 +1035,7 @@ }, "name": { "family": "Zed Mono", - "color": "#595959", + "color": "#393939", "size": 16, "margin": { "right": 6 @@ -1049,7 +1054,7 @@ }, "name": { "family": "Zed Mono", - "color": "#595959", + "color": "#393939", "size": 16, "margin": { "right": 6 @@ -1058,22 +1063,22 @@ "padding": { "left": 8 }, - "background": "#000000", + "background": "#ffffff", "corner_radius": 6 } }, "search": { - "match_background": "#000000", + "match_background": "#ffffff", "tab_icon_spacing": 4, "tab_icon_width": 14, "active_hovered_option_button": { "family": "Zed Mono", - "color": "#595959", + "color": "#393939", "size": 16, - "background": "#bfbfbf", + "background": "#e3e3e3", "corner_radius": 6, "border": { - "color": "#d9d9d9", + "color": "#c6c6c6", "width": 1 }, "margin": { @@ -1089,12 +1094,12 @@ }, "active_option_button": { "family": "Zed Mono", - "color": "#595959", + "color": "#393939", "size": 16, - "background": "#bfbfbf", + "background": "#e3e3e3", "corner_radius": 6, "border": { - "color": "#d9d9d9", + "color": "#c6c6c6", "width": 1 }, "margin": { @@ -1109,26 +1114,26 @@ } }, "editor": { - "background": "#e6e6e6", + "background": "#ffffff", "corner_radius": 6, "min_width": 200, "max_width": 500, "placeholder_text": { "family": "Zed Mono", - "color": "#bfbfbf", + "color": "#717171", "size": 16 }, "selection": { - "cursor": "#4287f6", - "selection": "#4287f6" + "cursor": "#6099f7", + "selection": "#d0e2fd" }, "text": { "family": "Zed Mono", - "color": "#262626", + "color": "#1c1c1c", "size": 16 }, "border": { - "color": "#d9d9d9", + "color": "#c6c6c6", "width": 1 }, "margin": { @@ -1143,12 +1148,12 @@ }, "hovered_option_button": { "family": "Zed Mono", - "color": "#595959", + "color": "#393939", "size": 16, - "background": "#bfbfbf", + "background": "#e3e3e3", "corner_radius": 6, "border": { - "color": "#d9d9d9", + "color": "#c6c6c6", "width": 1 }, "margin": { @@ -1163,26 +1168,26 @@ } }, "invalid_editor": { - "background": "#e6e6e6", + "background": "#ffffff", "corner_radius": 6, "min_width": 200, "max_width": 500, "placeholder_text": { "family": "Zed Mono", - "color": "#bfbfbf", + "color": "#717171", "size": 16 }, "selection": { - "cursor": "#4287f6", - "selection": "#4287f6" + "cursor": "#6099f7", + "selection": "#d0e2fd" }, "text": { "family": "Zed Mono", - "color": "#262626", + "color": "#1c1c1c", "size": 16 }, "border": { - "color": "#ffffff", + "color": "#fbbdbd", "width": 1 }, "margin": { @@ -1197,18 +1202,18 @@ }, "match_index": { "family": "Zed Mono", - "color": "#8c8c8c", + "color": "#555555", "size": 16, "padding": 6 }, "option_button": { "family": "Zed Mono", - "color": "#595959", + "color": "#393939", "size": 16, - "background": "#cccccc", + "background": "#f1f1f1", "corner_radius": 6, "border": { - "color": "#d9d9d9", + "color": "#c6c6c6", "width": 1 }, "margin": { @@ -1230,13 +1235,13 @@ }, "results_status": { "family": "Zed Mono", - "color": "#262626", + "color": "#1c1c1c", "size": 18 } }, "breadcrumbs": { "family": "Zed Sans", - "color": "#262626", + "color": "#1c1c1c", "size": 14, "padding": { "left": 6 diff --git a/styles/buildThemes.ts b/styles/buildThemes.ts index d67860cee6..9128eff45d 100644 --- a/styles/buildThemes.ts +++ b/styles/buildThemes.ts @@ -1,8 +1,8 @@ import * as fs from "fs"; import * as path from "path"; +import app from "./styleTree/app"; import dark from "./themes/dark"; import light from "./themes/light"; -import app from "./styleTree/app"; import decamelizeTree from "./utils/decamelizeTree"; const themes = [dark, light]; diff --git a/styles/styleTree/chatPanel.ts b/styles/styleTree/chatPanel.ts index ea9a8ffe22..69b5f3baa0 100644 --- a/styles/styleTree/chatPanel.ts +++ b/styles/styleTree/chatPanel.ts @@ -31,7 +31,7 @@ export default function chatPanel(theme: Theme) { const message = { body: text(theme, "sans", "secondary"), - timestamp: text(theme, "sans", "muted"), + timestamp: text(theme, "sans", "muted", { size: "sm" }), padding: { bottom: 6, }, @@ -91,12 +91,12 @@ export default function chatPanel(theme: Theme) { }, }, inputEditor: { - background: backgroundColor(theme, 300), + background: backgroundColor(theme, 500), cornerRadius: 6, text: text(theme, "mono", "primary"), - placeholderText: text(theme, "mono", "muted"), + placeholderText: text(theme, "mono", "placeholder", { size: "sm" }), selection: player(theme, 1).selection, - border: border(theme, "primary"), + border: border(theme, "secondary"), padding: { bottom: 7, left: 8, diff --git a/styles/styleTree/editor.ts b/styles/styleTree/editor.ts index ebc53b4058..eb379ce520 100644 --- a/styles/styleTree/editor.ts +++ b/styles/styleTree/editor.ts @@ -5,7 +5,7 @@ import { iconColor, player, text, - TextColor, + TextColor } from "./components"; export default function editor(theme: Theme) { @@ -39,7 +39,7 @@ export default function editor(theme: Theme) { return { textColor: theme.textColor.secondary.value, - background: backgroundColor(theme, 300), + background: backgroundColor(theme, 500), activeLineBackground: theme.editor.line.active.value, codeActionsIndicator: iconColor(theme, "secondary"), diffBackgroundDeleted: backgroundColor(theme, "error"), @@ -47,7 +47,7 @@ export default function editor(theme: Theme) { documentHighlightReadBackground: theme.editor.highlight.occurrence.value, documentHighlightWriteBackground: theme.editor.highlight.occurrence.value, errorColor: theme.textColor.error.value, - gutterBackground: backgroundColor(theme, 300), + gutterBackground: backgroundColor(theme, 500), gutterPaddingFactor: 2.5, highlightedLineBackground: theme.editor.line.highlighted.value, lineNumber: theme.editor.gutter.primary.value, @@ -65,14 +65,14 @@ export default function editor(theme: Theme) { player(theme, 8).selection, ], autocomplete: { - background: backgroundColor(theme, 100), + background: backgroundColor(theme, 500), cornerRadius: 6, padding: 6, border: border(theme, "secondary"), item: autocompleteItem, hoveredItem: { ...autocompleteItem, - background: backgroundColor(theme, 100, "hovered"), + background: backgroundColor(theme, 500, "hovered"), }, margin: { left: -14, @@ -83,11 +83,11 @@ export default function editor(theme: Theme) { }, selectedItem: { ...autocompleteItem, - background: backgroundColor(theme, 100, "active"), + background: backgroundColor(theme, 500, "active"), }, }, diagnosticHeader: { - background: theme.editor.background.value, + background: backgroundColor(theme, 300), iconWidthFactor: 1.5, textScaleFactor: 0.857, // NateQ: Will we need dynamic sizing for text? If so let's create tokens for these. border: border(theme, "secondary", { diff --git a/styles/styleTree/projectPanel.ts b/styles/styleTree/projectPanel.ts index cd6fb49b3a..e27cd94414 100644 --- a/styles/styleTree/projectPanel.ts +++ b/styles/styleTree/projectPanel.ts @@ -1,7 +1,7 @@ -import { panel } from "./app"; -import { backgroundColor, iconColor, text, TextColor } from "./components"; import Theme from "../themes/theme"; import { Color } from "../utils/color"; +import { panel } from "./app"; +import { backgroundColor, iconColor, text, TextColor } from "./components"; export default function projectPanel(theme: Theme) { function entry(theme: Theme, textColor: TextColor, background?: Color) { @@ -11,7 +11,7 @@ export default function projectPanel(theme: Theme) { iconColor: iconColor(theme, "muted"), iconSize: 8, iconSpacing: 8, - text: text(theme, "mono", textColor), + text: text(theme, "mono", textColor, { size: "sm" }), }; } @@ -31,6 +31,7 @@ export default function projectPanel(theme: Theme) { ), padding: { top: 6, + left: 12, }, }; } diff --git a/styles/styleTree/workspace.ts b/styles/styleTree/workspace.ts index 7e71eaad2a..a734528d74 100644 --- a/styles/styleTree/workspace.ts +++ b/styles/styleTree/workspace.ts @@ -12,14 +12,15 @@ export default function workspace(theme: Theme) { }; const tab = { - height: 34, + height: 32, + background: backgroundColor(theme, 300), iconClose: iconColor(theme, "secondary"), iconCloseActive: iconColor(theme, "active"), iconConflict: iconColor(theme, "warning"), iconDirty: iconColor(theme, "info"), iconWidth: 8, spacing: 10, - text: text(theme, "mono", "secondary"), + text: text(theme, "mono", "secondary", { size: "sm" }), border: border(theme, "primary", { left: true, bottom: true, @@ -33,8 +34,8 @@ export default function workspace(theme: Theme) { const activeTab = { ...tab, - background: backgroundColor(theme, 300), - text: text(theme, "mono", "primary"), + background: backgroundColor(theme, 500), + text: text(theme, "mono", "active", { size: "sm" }), border: { ...tab.border, bottom: false, @@ -48,11 +49,12 @@ export default function workspace(theme: Theme) { }; const sidebar = { width: 30, + background: backgroundColor(theme, 300), border: border(theme, "primary", { right: true }), item: sidebarItem, activeItem: { ...sidebarItem, - iconColor: iconColor(theme, "primary"), + iconColor: iconColor(theme, "active"), }, resizeHandle: { background: border(theme, "primary").color, @@ -63,7 +65,7 @@ export default function workspace(theme: Theme) { }; return { - background: backgroundColor(theme, 500), + background: backgroundColor(theme, 300), leaderBorderOpacity: 0.7, leaderBorderWidth: 2.0, tab, @@ -94,6 +96,7 @@ export default function workspace(theme: Theme) { titlebar: { avatarWidth: 18, height: 32, + background: backgroundColor(theme, 100), shareIconColor: iconColor(theme, "secondary"), shareIconActiveColor: iconColor(theme, "active"), title: text(theme, "sans", "primary"), @@ -107,29 +110,32 @@ export default function workspace(theme: Theme) { avatarRibbon: { height: 3, width: 12, + // TODO: The background for this ideally should be + // set with a token, not hardcoded in rust }, border: border(theme, "primary", { bottom: true }), signInPrompt, hoveredSignInPrompt: { ...signInPrompt, ...text(theme, "mono", "active"), + size: 13, }, offlineIcon: { - color: iconColor(theme, "muted"), + color: iconColor(theme, "secondary"), width: 16, padding: { right: 4, }, }, outdatedWarning: { - ...text(theme, "sans", "muted"), + ...text(theme, "sans", "warning"), size: 13, }, }, toolbar: { height: 34, - background: backgroundColor(theme, 300), - border: border(theme, "primary", { bottom: true }), + background: backgroundColor(theme, 500), + border: border(theme, "muted", { bottom: true }), itemSpacing: 8, padding: { left: 16, right: 8, top: 4, bottom: 4 }, }, @@ -138,8 +144,7 @@ export default function workspace(theme: Theme) { padding: { left: 6 }, }, disconnectedOverlay: { - ...text(theme, "sans", "primary"), - color: "#ffffff", + ...text(theme, "sans", "active"), background: "#000000aa", }, }; diff --git a/styles/themes/dark.ts b/styles/themes/dark.ts index 2cadf24601..f8e0c0fcb6 100644 --- a/styles/themes/dark.ts +++ b/styles/themes/dark.ts @@ -3,10 +3,10 @@ import Theme, { Syntax } from "./theme"; const backgroundColor = { 100: { - base: colors.neutral[750], - hovered: colors.neutral[750], - active: colors.neutral[750], - focused: colors.neutral[750], + base: colors.neutral[700], + hovered: colors.neutral[700], + active: colors.neutral[700], + focused: colors.neutral[700], }, 300: { base: colors.neutral[800], @@ -52,10 +52,10 @@ const borderColor = { muted: colors.neutral[750], focused: colors.neutral[100], active: colors.neutral[500], - ok: colors.neutral[1000], - error: colors.neutral[1000], - warning: colors.neutral[1000], - info: colors.neutral[1000], + ok: colors.green[500], + error: colors.red[500], + warning: colors.amber[500], + info: colors.blue[500], }; const textColor = { @@ -65,7 +65,7 @@ const textColor = { placeholder: colors.neutral[750], active: colors.neutral[0], //TODO: (design) define feature and it's correct value - feature: colors.sky[500], + feature: colors.lime[400], ok: colors.green[600], error: colors.red[400], warning: colors.amber[300], @@ -81,9 +81,9 @@ const iconColor = { //TODO: (design) define feature and it's correct value feature: colors.sky[500], ok: colors.green[600], - error: colors.red[400], - warning: colors.amber[300], - info: colors.blue[500], + error: colors.red[500], + warning: colors.amber[400], + info: colors.blue[600], }; const player = { diff --git a/styles/themes/light.ts b/styles/themes/light.ts index acb704de74..c543c78a30 100644 --- a/styles/themes/light.ts +++ b/styles/themes/light.ts @@ -5,73 +5,72 @@ import Theme, { Syntax } from "./theme"; const backgroundColor = { 100: { - base: colors.neutral[750], - hovered: colors.neutral[750], - active: colors.neutral[750], - focused: colors.neutral[750], + base: colors.neutral[100], + hovered: colors.neutral[150], + active: colors.neutral[200], + focused: colors.neutral[150], }, 300: { - base: colors.neutral[800], - hovered: colors.neutral[800], - active: colors.neutral[800], - focused: colors.neutral[800], + base: colors.neutral[50], + hovered: colors.neutral[100], + active: colors.neutral[150], + focused: colors.neutral[100], }, 500: { - base: colors.neutral[900], - hovered: colors.neutral[900], - active: colors.neutral[900], - focused: colors.neutral[900], + base: colors.neutral[0], + hovered: colors.neutral[50], + active: colors.neutral[100], + focused: colors.neutral[50], }, ok: { - base: colors.green[600], - hovered: colors.green[600], - active: colors.green[600], - focused: colors.green[600], + base: colors.green[100], + hovered: colors.green[100], + active: colors.green[100], + focused: colors.green[100], }, error: { - base: colors.red[400], - hovered: colors.red[400], - active: colors.red[400], - focused: colors.red[400], + base: colors.red[100], + hovered: colors.red[100], + active: colors.red[100], + focused: colors.red[100], }, warning: { - base: colors.amber[300], - hovered: colors.amber[300], - active: colors.amber[300], - focused: colors.amber[300], + base: colors.yellow[100], + hovered: colors.yellow[100], + active: colors.yellow[100], + focused: colors.yellow[100], }, info: { - base: colors.blue[500], - hovered: colors.blue[500], - active: colors.blue[500], - focused: colors.blue[500], + base: colors.blue[100], + hovered: colors.blue[100], + active: colors.blue[100], + focused: colors.blue[100], }, }; const borderColor = { - primary: colors.neutral[850], - secondary: colors.neutral[700], - muted: colors.neutral[750], + primary: colors.neutral[200], + secondary: colors.neutral[100], + muted: colors.neutral[50], focused: colors.neutral[100], - active: colors.neutral[500], - ok: colors.neutral[1000], - error: colors.neutral[1000], - warning: colors.neutral[1000], - info: colors.neutral[1000], + active: colors.neutral[250], + ok: colors.green[200], + error: colors.red[200], + warning: colors.yellow[200], + info: colors.blue[200], }; const textColor = { - primary: colors.neutral[150], - 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.sky[500], - ok: colors.green[600], - error: colors.red[400], - warning: colors.amber[300], - info: colors.blue[500], + primary: colors.neutral[800], + secondary: colors.neutral[700], + muted: colors.neutral[600], + placeholder: colors.neutral[500], + active: colors.neutral[900], + feature: colors.blue[600], + ok: colors.green[800], + error: colors.red[800], + warning: colors.yellow[800], + info: colors.blue[800], }; const iconColor = { @@ -79,63 +78,62 @@ const iconColor = { secondary: colors.neutral[500], muted: colors.neutral[600], placeholder: colors.neutral[700], - active: colors.neutral[50], - //TODO: (design) define feature and it's correct value - feature: colors.sky[500], + active: colors.neutral[900], + feature: colors.sky[600], ok: colors.green[600], - error: colors.red[400], - warning: colors.amber[300], - info: colors.blue[500], + error: colors.red[600], + warning: colors.yellow[400], + info: colors.blue[600], }; const player = { 1: { - baseColor: colors.blue[600], - cursorColor: colors.blue[600], - selectionColor: colors.blue[600], - borderColor: colors.blue[600], + baseColor: colors.blue[600], + cursorColor: colors.blue[500], + selectionColor: colors.blue[100], + borderColor: colors.blue[500], }, 2: { - baseColor: colors.indigo[500], - cursorColor: colors.indigo[500], - selectionColor: colors.indigo[500], - borderColor: colors.indigo[500], + baseColor: colors.indigo[500], + cursorColor: colors.indigo[500], + selectionColor: colors.indigo[100], + borderColor: colors.indigo[500], }, 3: { - baseColor: colors.green[500], - cursorColor: colors.green[500], - selectionColor: colors.green[500], - borderColor: colors.green[500], + baseColor: colors.green[500], + cursorColor: colors.green[500], + selectionColor: colors.green[100], + borderColor: colors.green[500], }, 4: { - baseColor: colors.orange[500], - cursorColor: colors.orange[500], - selectionColor: colors.orange[500], - borderColor: colors.orange[500], + baseColor: colors.orange[500], + cursorColor: colors.orange[500], + selectionColor: colors.orange[100], + borderColor: colors.orange[500], }, 5: { - baseColor: colors.purple[500], - cursorColor: colors.purple[500], - selectionColor: colors.purple[500], - borderColor: colors.purple[500], + baseColor: colors.purple[500], + cursorColor: colors.purple[500], + selectionColor: colors.purple[100], + borderColor: colors.purple[500], }, 6: { - baseColor: colors.teal[400], - cursorColor: colors.teal[400], - selectionColor: colors.teal[400], - borderColor: colors.teal[400], + baseColor: colors.teal[400], + cursorColor: colors.teal[400], + selectionColor: colors.teal[100], + borderColor: colors.teal[400], }, 7: { - baseColor: colors.pink[400], - cursorColor: colors.pink[400], - selectionColor: colors.pink[400], - borderColor: colors.pink[400], + baseColor: colors.pink[400], + cursorColor: colors.pink[400], + selectionColor: colors.pink[100], + borderColor: colors.pink[400], }, 8: { - baseColor: colors.yellow[400], - cursorColor: colors.yellow[400], - selectionColor: colors.yellow[400], - borderColor: colors.yellow[400], + baseColor: colors.yellow[400], + cursorColor: colors.yellow[400], + selectionColor: colors.yellow[100], + borderColor: colors.yellow[400], }, }; @@ -145,118 +143,118 @@ const editor = { indent_guide: borderColor.muted, indent_guide_active: borderColor.secondary, line: { - active: colors.neutral[0], - highlighted: colors.neutral[0], - inserted: backgroundColor.ok.active, - deleted: backgroundColor.error.active, - modified: backgroundColor.info.active, + active: colors.neutral[0], + highlighted: colors.neutral[0], + inserted: backgroundColor.ok.active, + deleted: backgroundColor.error.active, + modified: backgroundColor.info.active, }, highlight: { - selection: player[1].selectionColor, - occurrence: backgroundColor[500].active, - activeOccurrence: colors.neutral[0], - matchingBracket: colors.neutral[0], - match: colors.neutral[0], - activeMatch: colors.neutral[0], - related: colors.neutral[0], + selection: player[1].selectionColor, + occurrence: backgroundColor[500].active, + activeOccurrence: colors.neutral[0], + matchingBracket: colors.neutral[0], + match: colors.neutral[0], + activeMatch: colors.neutral[0], + related: colors.neutral[0], }, gutter: { - primary: colors.neutral[0], - active: colors.neutral[0], + primary: colors.neutral[0], + active: colors.neutral[0], }, }; const syntax: Syntax = { primary: { - color: textColor.primary, - weight: fontWeights.normal, + color: textColor.primary, + weight: fontWeights.normal, }, comment: { - color: colors.lime[200], - weight: fontWeights.normal, + color: colors.lime[200], + weight: fontWeights.normal, }, punctuation: { - color: textColor.primary, - weight: fontWeights.normal, + color: textColor.primary, + weight: fontWeights.normal, }, constant: { - color: colors.neutral[150], - weight: fontWeights.normal, + color: colors.neutral[150], + weight: fontWeights.normal, }, keyword: { - color: colors.sky[400], - weight: fontWeights.normal, + color: colors.sky[400], + weight: fontWeights.normal, }, function: { - color: colors.yellow[200], - weight: fontWeights.normal, + color: colors.yellow[200], + weight: fontWeights.normal, }, type: { - color: colors.teal[300], - weight: fontWeights.normal, + color: colors.teal[300], + weight: fontWeights.normal, }, variant: { - color: colors.teal[300], - weight: fontWeights.normal, + color: colors.teal[300], + weight: fontWeights.normal, }, property: { - color: colors.sky[300], - weight: fontWeights.normal, + color: colors.sky[300], + weight: fontWeights.normal, }, enum: { - color: colors.sky[400], - weight: fontWeights.normal, + color: colors.sky[400], + weight: fontWeights.normal, }, operator: { - color: colors.sky[400], - weight: fontWeights.normal, + color: colors.sky[400], + weight: fontWeights.normal, }, string: { - color: colors.orange[300], - weight: fontWeights.normal, + color: colors.orange[300], + weight: fontWeights.normal, }, number: { - color: colors.neutral[150], - weight: fontWeights.normal, + color: colors.neutral[150], + weight: fontWeights.normal, }, boolean: { - color: colors.neutral[150], - weight: fontWeights.normal, + color: colors.neutral[150], + weight: fontWeights.normal, }, predictive: { - color: textColor.muted, - weight: fontWeights.normal, + color: textColor.muted, + weight: fontWeights.normal, }, title: { - color: colors.sky[500], - weight: fontWeights.bold, + color: colors.sky[500], + weight: fontWeights.bold, }, emphasis: { - color: textColor.active, - weight: fontWeights.normal, + color: textColor.active, + weight: fontWeights.normal, }, emphasisStrong: { - color: textColor.active, - weight: fontWeights.bold, + color: textColor.active, + weight: fontWeights.bold, }, linkUrl: { - color: colors.lime[500], - weight: fontWeights.normal, - // TODO: add underline + color: colors.lime[500], + weight: fontWeights.normal, + // TODO: add underline }, linkText: { - color: colors.orange[500], - weight: fontWeights.normal, - // TODO: add italic + color: colors.orange[500], + weight: fontWeights.normal, + // TODO: add italic }, listMarker: { - color: colors.sky[400], - weight: fontWeights.normal, - } + color: colors.sky[400], + weight: fontWeights.normal, + }, }; const shadowAlpha: NumberToken = { - value: 0.32, + value: 0.12, type: "number", }; diff --git a/styles/themes/theme.ts b/styles/themes/theme.ts index f95d58e494..7f8305c1d5 100644 --- a/styles/themes/theme.ts +++ b/styles/themes/theme.ts @@ -1,4 +1,4 @@ -import { FontWeightToken, ColorToken, NumberToken } from "../tokens"; +import { ColorToken, FontWeightToken, NumberToken } from "../tokens"; export interface SyntaxHighlightStyle { color: ColorToken; diff --git a/styles/tokens.ts b/styles/tokens.ts index 1e0df5032d..63c19a9d64 100644 --- a/styles/tokens.ts +++ b/styles/tokens.ts @@ -72,7 +72,7 @@ export interface ColorToken { step?: number, } export const colors = { - neutral: colorRamp(["black", "white"], { steps: 21, increment: 50 }), + neutral: colorRamp(["white", "black"], { steps: 19, increment: 50 }), rose: colorRamp("#F43F5EFF"), red: colorRamp("#EF4444FF"), orange: colorRamp("#F97316FF"),