diff --git a/crates/zed/assets/themes/dark.json b/crates/zed/assets/themes/dark.json index bab53fbbe1..56cef12693 100644 --- a/crates/zed/assets/themes/dark.json +++ b/crates/zed/assets/themes/dark.json @@ -51,7 +51,7 @@ "empty": { "text": { "family": "Zed Sans", - "color": "#808080", + "color": "#474747", "size": 14 }, "padding": { @@ -272,7 +272,7 @@ } }, "hovered_sign_in_prompt": { - "family": "Zed Mono", + "family": "Zed Sans", "color": "#ffffff", "size": 13, "underline": true, @@ -327,17 +327,17 @@ "editor": { "text_color": "#d5d5d5", "background": "#000000", - "active_line_background": "#0e0e0e", - "code_actions_indicator": "#9c9c9c", + "active_line_background": "#ffffff12", + "code_actions_indicator": "#555555", "diff_background_deleted": "#f15656", "diff_background_inserted": "#1b9447", - "document_highlight_read_background": "#14a89829", - "document_highlight_write_background": "#14a89852", + "document_highlight_read_background": "#ffffff1f", + "document_highlight_write_background": "#ffffff29", "error_color": "#f15656", "gutter_background": "#000000", "gutter_padding_factor": 3.5, - "highlighted_line_background": "#070707", - "line_number": "#808080", + "highlighted_line_background": "#ffffff1f", + "line_number": "#474747", "line_number_active": "#ffffff", "rename_fade": 0.6, "unnecessary_code_fade": 0.5, @@ -400,14 +400,15 @@ "right": 6, "top": 2 }, - "background": "#070707" + "background": "#ffffff14" }, "margin": { "left": -14 }, "match_highlight": { - "color": "#4f8ff7", - "weight": "normal" + "family": "Zed Mono", + "color": "#1096d3", + "size": 14 }, "selected_item": { "corner_radius": 6, @@ -417,7 +418,7 @@ "right": 6, "top": 2 }, - "background": "#0e0e0e" + "background": "#ffffff1f" } }, "diagnostic_header": { @@ -453,7 +454,7 @@ } }, "diagnostic_path_header": { - "background": "#0e0e0e", + "background": "#ffffff12", "text_scale_factor": 0.857, "filename": { "family": "Zed Mono", diff --git a/crates/zed/assets/themes/light.json b/crates/zed/assets/themes/light.json index 9b56b2a1e6..d601ecbccc 100644 --- a/crates/zed/assets/themes/light.json +++ b/crates/zed/assets/themes/light.json @@ -1,6 +1,6 @@ { "selector": { - "background": "#f1f1f1", + "background": "#f8f8f8", "corner_radius": 6, "padding": 8, "item": { @@ -42,16 +42,16 @@ "weight": "bold", "size": 14 }, - "background": "#d5d5d5" + "background": "#dcdcdc" }, "border": { - "color": "#c6c6c6", + "color": "#d5d5d5", "width": 1 }, "empty": { "text": { "family": "Zed Sans", - "color": "#636363", + "color": "#808080", "size": 14 }, "padding": { @@ -79,7 +79,7 @@ "size": 14 }, "border": { - "color": "#e3e3e3", + "color": "#d5d5d5", "width": 1 }, "padding": { @@ -103,13 +103,13 @@ } }, "workspace": { - "background": "#f1f1f1", + "background": "#f8f8f8", "leader_border_opacity": 0.7, "leader_border_width": 2, "tab": { "height": 32, - "background": "#f1f1f1", - "icon_close": "#717171", + "background": "#f8f8f8", + "icon_close": "#9c9c9c", "icon_close_active": "#000000", "icon_conflict": "#f7bf17", "icon_dirty": "#135acd", @@ -121,7 +121,7 @@ "size": 14 }, "border": { - "color": "#c6c6c6", + "color": "#d5d5d5", "width": 1, "left": true, "bottom": true, @@ -135,7 +135,7 @@ "active_tab": { "height": 32, "background": "#ffffff", - "icon_close": "#717171", + "icon_close": "#9c9c9c", "icon_close_active": "#000000", "icon_conflict": "#f7bf17", "icon_dirty": "#135acd", @@ -147,7 +147,7 @@ "size": 14 }, "border": { - "color": "#c6c6c6", + "color": "#d5d5d5", "width": 1, "left": true, "bottom": false, @@ -160,15 +160,15 @@ }, "left_sidebar": { "width": 30, - "background": "#f1f1f1", + "background": "#f8f8f8", "border": { - "color": "#c6c6c6", + "color": "#d5d5d5", "width": 1, "right": true }, "item": { "height": 32, - "icon_color": "#555555", + "icon_color": "#717171", "icon_size": 18 }, "active_item": { @@ -177,7 +177,7 @@ "icon_size": 18 }, "resize_handle": { - "background": "#c6c6c6", + "background": "#d5d5d5", "padding": { "left": 1 } @@ -185,15 +185,15 @@ }, "right_sidebar": { "width": 30, - "background": "#f1f1f1", + "background": "#f8f8f8", "border": { - "color": "#c6c6c6", + "color": "#d5d5d5", "width": 1, "left": true }, "item": { "height": 32, - "icon_color": "#555555", + "icon_color": "#717171", "icon_size": 18 }, "active_item": { @@ -202,14 +202,14 @@ "icon_size": 18 }, "resize_handle": { - "background": "#c6c6c6", + "background": "#d5d5d5", "padding": { "left": 1 } } }, "pane_divider": { - "color": "#e3e3e3", + "color": "#d5d5d5", "width": 1 }, "status_bar": { @@ -238,8 +238,8 @@ "titlebar": { "avatar_width": 18, "height": 32, - "background": "#e3e3e3", - "share_icon_color": "#555555", + "background": "#eaeaea", + "share_icon_color": "#717171", "share_icon_active_color": "#484bed", "title": { "family": "Zed Sans", @@ -258,7 +258,7 @@ "width": 12 }, "border": { - "color": "#c6c6c6", + "color": "#d5d5d5", "width": 1, "bottom": true }, @@ -272,7 +272,7 @@ } }, "hovered_sign_in_prompt": { - "family": "Zed Mono", + "family": "Zed Sans", "color": "#000000", "size": 13, "underline": true, @@ -281,7 +281,7 @@ } }, "offline_icon": { - "color": "#555555", + "color": "#717171", "width": 16, "padding": { "right": 4 @@ -297,7 +297,7 @@ "height": 34, "background": "#ffffff", "border": { - "color": "#e3e3e3", + "color": "#d5d5d5", "width": 1, "bottom": true }, @@ -327,16 +327,16 @@ "editor": { "text_color": "#1c1c1c", "background": "#ffffff", - "active_line_background": "#f1f1f1", - "code_actions_indicator": "#555555", + "active_line_background": "#0000000f", + "code_actions_indicator": "#9c9c9c", "diff_background_deleted": "#fcc6c6", "diff_background_inserted": "#b7f9ce", - "document_highlight_read_background": "#de900c0f", - "document_highlight_write_background": "#de900c42", + "document_highlight_read_background": "#0000000f", + "document_highlight_write_background": "#00000029", "error_color": "#eb2d2d", "gutter_background": "#ffffff", "gutter_padding_factor": 3.5, - "highlighted_line_background": "#f1f1f1", + "highlighted_line_background": "#0000001f", "line_number": "#aaaaaa", "line_number_active": "#000000", "rename_fade": 0.6, @@ -380,7 +380,7 @@ "corner_radius": 6, "padding": 6, "border": { - "color": "#e3e3e3", + "color": "#d5d5d5", "width": 1 }, "item": { @@ -400,14 +400,15 @@ "right": 6, "top": 2 }, - "background": "#f8f8f8" + "background": "#00000008" }, "margin": { "left": -14 }, "match_highlight": { - "color": "#1819a1", - "weight": "normal" + "family": "Zed Mono", + "color": "#484bed", + "size": 14 }, "selected_item": { "corner_radius": 6, @@ -417,15 +418,15 @@ "right": 6, "top": 2 }, - "background": "#f1f1f1" + "background": "#0000000f" } }, "diagnostic_header": { - "background": "#f1f1f1", + "background": "#f8f8f8", "icon_width_factor": 1.5, "text_scale_factor": 0.857, "border": { - "color": "#e3e3e3", + "color": "#d5d5d5", "width": 1, "bottom": true, "top": true @@ -453,7 +454,7 @@ } }, "diagnostic_path_header": { - "background": "#f1f1f1", + "background": "#0000000f", "text_scale_factor": 0.857, "filename": { "family": "Zed Mono", @@ -473,7 +474,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#c6c6c6", + "color": "#d5d5d5", "width": 1, "top": true } @@ -496,7 +497,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#c6c6c6", + "color": "#d5d5d5", "width": 1, "top": true } @@ -519,7 +520,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#c6c6c6", + "color": "#d5d5d5", "width": 1, "top": true } @@ -542,7 +543,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#c6c6c6", + "color": "#d5d5d5", "width": 1, "top": true } @@ -565,7 +566,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#c6c6c6", + "color": "#d5d5d5", "width": 1, "top": true } @@ -588,7 +589,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#c6c6c6", + "color": "#d5d5d5", "width": 1, "top": true } @@ -611,7 +612,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#c6c6c6", + "color": "#d5d5d5", "width": 1, "top": true } @@ -634,7 +635,7 @@ "text_scale_factor": 0.857, "header": { "border": { - "color": "#c6c6c6", + "color": "#d5d5d5", "width": 1, "top": true } @@ -708,7 +709,7 @@ }, "entry": { "height": 22, - "icon_color": "#717171", + "icon_color": "#9c9c9c", "icon_size": 8, "icon_spacing": 8, "text": { @@ -719,8 +720,8 @@ }, "hovered_entry": { "height": 22, - "background": "#e3e3e3", - "icon_color": "#717171", + "background": "#eaeaea", + "icon_color": "#9c9c9c", "icon_size": 8, "icon_spacing": 8, "text": { @@ -731,7 +732,7 @@ }, "selected_entry": { "height": 22, - "icon_color": "#717171", + "icon_color": "#9c9c9c", "icon_size": 8, "icon_spacing": 8, "text": { @@ -742,8 +743,8 @@ }, "hovered_selected_entry": { "height": 22, - "background": "#e3e3e3", - "icon_color": "#717171", + "background": "#eaeaea", + "icon_color": "#9c9c9c", "icon_size": 8, "icon_spacing": 8, "text": { @@ -827,7 +828,7 @@ "right": 8 } }, - "background": "#e3e3e3", + "background": "#eaeaea", "corner_radius": 6 }, "active_item": { @@ -862,7 +863,7 @@ "right": 8 } }, - "background": "#e3e3e3", + "background": "#eaeaea", "corner_radius": 6 }, "menu": { @@ -870,7 +871,7 @@ "corner_radius": 6, "padding": 4, "border": { - "color": "#c6c6c6", + "color": "#d5d5d5", "width": 1 }, "shadow": { @@ -961,7 +962,7 @@ "selection": "#2472f23d" }, "border": { - "color": "#e3e3e3", + "color": "#d5d5d5", "width": 1 }, "padding": { @@ -980,7 +981,7 @@ "right": 12 }, "host_row_height": 28, - "tree_branch_color": "#f1f1f1", + "tree_branch_color": "#e3e3e3", "tree_branch_width": 1, "host_avatar": { "corner_radius": 10, @@ -1031,7 +1032,7 @@ "padding": { "left": 8 }, - "background": "#f1f1f1", + "background": "#f8f8f8", "corner_radius": 6 }, "hovered_shared_project": { @@ -1052,7 +1053,7 @@ "padding": { "left": 8 }, - "background": "#e3e3e3", + "background": "#eaeaea", "corner_radius": 6 }, "unshared_project": { @@ -1096,17 +1097,17 @@ } }, "search": { - "match_background": "#993bf31f", + "match_background": "#eb2d2d33", "tab_icon_spacing": 4, "tab_icon_width": 14, "active_hovered_option_button": { "family": "Zed Mono", "color": "#474747", "size": 14, - "background": "#e3e3e3", + "background": "#eaeaea", "corner_radius": 6, "border": { - "color": "#c6c6c6", + "color": "#d5d5d5", "width": 1 }, "margin": { @@ -1124,10 +1125,10 @@ "family": "Zed Mono", "color": "#474747", "size": 14, - "background": "#e3e3e3", + "background": "#eaeaea", "corner_radius": 6, "border": { - "color": "#c6c6c6", + "color": "#d5d5d5", "width": 1 }, "margin": { @@ -1161,7 +1162,7 @@ "size": 14 }, "border": { - "color": "#e3e3e3", + "color": "#d5d5d5", "width": 1 }, "margin": { @@ -1178,10 +1179,10 @@ "family": "Zed Mono", "color": "#474747", "size": 14, - "background": "#e3e3e3", + "background": "#eaeaea", "corner_radius": 6, "border": { - "color": "#c6c6c6", + "color": "#d5d5d5", "width": 1 }, "margin": { @@ -1238,10 +1239,10 @@ "family": "Zed Mono", "color": "#474747", "size": 14, - "background": "#f1f1f1", + "background": "#f8f8f8", "corner_radius": 6, "border": { - "color": "#c6c6c6", + "color": "#d5d5d5", "width": 1 }, "margin": { diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index 33bfbf0cc6..9fb96e09b7 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -42,7 +42,7 @@ export default function editor(theme: Theme) { textColor: theme.syntax.primary.color.value, background: backgroundColor(theme, 500), activeLineBackground: theme.editor.line.active.value, - codeActionsIndicator: iconColor(theme, "secondary"), + codeActionsIndicator: iconColor(theme, "muted"), diffBackgroundDeleted: backgroundColor(theme, "error"), diffBackgroundInserted: backgroundColor(theme, "ok"), documentHighlightReadBackground: theme.editor.highlight.occurrence.value, @@ -78,10 +78,7 @@ export default function editor(theme: Theme) { margin: { left: -14, }, - matchHighlight: { - color: theme.syntax.keyword.color.value, - weight: theme.syntax.keyword.weight.value, - }, + matchHighlight: text(theme, "mono", "feature"), selectedItem: { ...autocompleteItem, background: backgroundColor(theme, 500, "active"), diff --git a/styles/src/styleTree/selectorModal.ts b/styles/src/styleTree/selectorModal.ts index fdccae77a1..3e1925a179 100644 --- a/styles/src/styleTree/selectorModal.ts +++ b/styles/src/styleTree/selectorModal.ts @@ -28,7 +28,7 @@ export default function selectorModal(theme: Theme): Object { activeItem, border: border(theme, "primary"), empty: { - text: text(theme, "sans", "muted"), + text: text(theme, "sans", "placeholder"), padding: { bottom: 4, left: 16, diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index a65356c636..3a585458c3 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -117,7 +117,7 @@ export default function workspace(theme: Theme) { signInPrompt, hoveredSignInPrompt: { ...signInPrompt, - ...text(theme, "mono", "active"), + ...text(theme, "sans", "active"), size: 13, }, offlineIcon: { diff --git a/styles/src/themes/dark.ts b/styles/src/themes/dark.ts index 97e4acaf5e..7c7f7bf97e 100644 --- a/styles/src/themes/dark.ts +++ b/styles/src/themes/dark.ts @@ -6,19 +6,19 @@ const backgroundColor = { 100: { base: colors.neutral[750], hovered: colors.neutral[725], - active: colors.neutral[700], + active: colors.neutral[800], focused: colors.neutral[675], }, 300: { base: colors.neutral[800], hovered: colors.neutral[775], active: colors.neutral[750], - focused: colors.neutral[725], + focused: colors.neutral[775], }, 500: { base: colors.neutral[900], - hovered: colors.neutral[875], - active: colors.neutral[850], + hovered: withOpacity(colors.neutral[0], 0.08), + active: withOpacity(colors.neutral[0], 0.12), focused: colors.neutral[825], }, ok: { @@ -103,23 +103,23 @@ const editor = { indent_guide: borderColor.muted, indent_guide_active: borderColor.secondary, line: { - active: backgroundColor[500].active, - highlighted: backgroundColor[500].hovered, + active: withOpacity(colors.neutral[0], 0.07), + highlighted: withOpacity(colors.neutral[0], 0.12), inserted: backgroundColor.ok.active, deleted: backgroundColor.error.active, modified: backgroundColor.info.active, }, highlight: { selection: player[1].selectionColor, - occurrence: withOpacity(colors.teal[500], 0.16), - activeOccurrence: withOpacity(colors.teal[500], 0.32), + occurrence: withOpacity(colors.neutral[0], 0.12), + activeOccurrence: withOpacity(colors.neutral[0], 0.16), // TODO: This is not correctly hooked up to occurences on the rust side matchingBracket: backgroundColor[500].active, match: withOpacity(colors.sky[500], 0.16), activeMatch: withOpacity(colors.sky[800], 0.32), related: backgroundColor[500].focused, }, gutter: { - primary: textColor.muted, + primary: textColor.placeholder, active: textColor.active, }, }; diff --git a/styles/src/themes/light.ts b/styles/src/themes/light.ts index e16bf5ee04..2fded3ed90 100644 --- a/styles/src/themes/light.ts +++ b/styles/src/themes/light.ts @@ -4,22 +4,22 @@ import Theme, { buildPlayer, Syntax } from "./theme"; const backgroundColor = { 100: { - base: colors.neutral[100], - hovered: colors.neutral[150], - active: colors.neutral[200], - focused: colors.neutral[150], - }, - 300: { - base: colors.neutral[50], + base: colors.neutral[75], hovered: colors.neutral[100], active: colors.neutral[150], focused: colors.neutral[100], }, + 300: { + base: colors.neutral[25], + hovered: colors.neutral[75], + active: colors.neutral[125], + focused: colors.neutral[75], + }, 500: { base: colors.neutral[0], - hovered: colors.neutral[25], - active: colors.neutral[50], - focused: colors.neutral[75], + hovered: withOpacity(colors.neutral[900], 0.03), + active: withOpacity(colors.neutral[900], 0.06), + focused: colors.neutral[50], }, ok: { base: colors.green[100], @@ -48,9 +48,9 @@ const backgroundColor = { }; const borderColor = { - primary: colors.neutral[200], - secondary: colors.neutral[100], - muted: colors.neutral[50], + primary: colors.neutral[150], + secondary: colors.neutral[150], + muted: colors.neutral[100], focused: colors.neutral[100], active: colors.neutral[250], ok: colors.green[200], @@ -74,8 +74,8 @@ const textColor = { const iconColor = { primary: colors.neutral[700], - secondary: colors.neutral[600], - muted: colors.neutral[500], + secondary: colors.neutral[500], + muted: colors.neutral[350], placeholder: colors.neutral[300], active: colors.neutral[900], feature: colors.indigo[500], @@ -102,19 +102,19 @@ const editor = { indent_guide: borderColor.muted, indent_guide_active: borderColor.secondary, line: { - active: backgroundColor[500].active, - highlighted: backgroundColor[500].active, + active: withOpacity(colors.neutral[900], 0.06), + highlighted: withOpacity(colors.neutral[900], 0.12), inserted: backgroundColor.ok.active, deleted: backgroundColor.error.active, modified: backgroundColor.info.active, }, highlight: { selection: player[1].selectionColor, - occurrence: withOpacity(colors.amber[500], 0.06), - activeOccurrence: withOpacity(colors.amber[500], 0.26), + occurrence: withOpacity(colors.neutral[900], 0.06), + activeOccurrence: withOpacity(colors.neutral[900], 0.16), // TODO: This is not correctly hooked up to occurences on the rust side matchingBracket: colors.neutral[0], - match: withOpacity(colors.purple[500], 0.12), - activeMatch: withOpacity(colors.purple[400], 0.36), + match: withOpacity(colors.red[500], 0.2), + activeMatch: withOpacity(colors.indigo[400], 0.36), related: colors.neutral[0], }, gutter: {