Detailed changes
@@ -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": {
@@ -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,
@@ -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];
@@ -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,
@@ -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", {
@@ -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,
},
};
}
@@ -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",
},
};
@@ -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 = {
@@ -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",
};
@@ -1,4 +1,4 @@
-import { FontWeightToken, ColorToken, NumberToken } from "../tokens";
+import { ColorToken, FontWeightToken, NumberToken } from "../tokens";
export interface SyntaxHighlightStyle {
color: ColorToken;
@@ -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"),