From 2a2c4071f46f521ce03cbb55c2086f787e73ab52 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Tue, 5 Apr 2022 18:49:17 -0400 Subject: [PATCH] Update light syntax theme and highlights, player selections --- crates/zed/assets/themes/dark.json | 24 ++-- crates/zed/assets/themes/light.json | 176 ++++++++++++++-------------- styles/src/themes/light.ts | 60 +++++----- styles/src/themes/theme.ts | 2 +- 4 files changed, 131 insertions(+), 131 deletions(-) diff --git a/crates/zed/assets/themes/dark.json b/crates/zed/assets/themes/dark.json index 92351e53ed..bab53fbbe1 100644 --- a/crates/zed/assets/themes/dark.json +++ b/crates/zed/assets/themes/dark.json @@ -71,7 +71,7 @@ }, "selection": { "cursor": "#2472f2", - "selection": "#2472f24d" + "selection": "#2472f23d" }, "text": { "family": "Zed Mono", @@ -343,36 +343,36 @@ "unnecessary_code_fade": 0.5, "selection": { "cursor": "#2472f2", - "selection": "#2472f24d" + "selection": "#2472f23d" }, "guest_selections": [ { "cursor": "#79ba16", - "selection": "#79ba164d" + "selection": "#79ba163d" }, { "cursor": "#d430e0", - "selection": "#d430e04d" + "selection": "#d430e03d" }, { "cursor": "#ee670a", - "selection": "#ee670a4d" + "selection": "#ee670a3d" }, { "cursor": "#993bf3", - "selection": "#993bf34d" + "selection": "#993bf33d" }, { "cursor": "#16d6c1", - "selection": "#16d6c14d" + "selection": "#16d6c13d" }, { "cursor": "#ef59a3", - "selection": "#ef59a34d" + "selection": "#ef59a33d" }, { "cursor": "#f7bf17", - "selection": "#f7bf174d" + "selection": "#f7bf173d" } ], "autocomplete": { @@ -958,7 +958,7 @@ }, "selection": { "cursor": "#2472f2", - "selection": "#2472f24d" + "selection": "#2472f23d" }, "border": { "color": "#232323", @@ -1153,7 +1153,7 @@ }, "selection": { "cursor": "#2472f2", - "selection": "#2472f24d" + "selection": "#2472f23d" }, "text": { "family": "Zed Mono", @@ -1207,7 +1207,7 @@ }, "selection": { "cursor": "#2472f2", - "selection": "#2472f24d" + "selection": "#2472f23d" }, "text": { "family": "Zed Mono", diff --git a/crates/zed/assets/themes/light.json b/crates/zed/assets/themes/light.json index 3a527fc7cd..9b56b2a1e6 100644 --- a/crates/zed/assets/themes/light.json +++ b/crates/zed/assets/themes/light.json @@ -13,12 +13,12 @@ "corner_radius": 6, "text": { "family": "Zed Sans", - "color": "#555555", + "color": "#474747", "size": 14 }, "highlight_text": { "family": "Zed Sans", - "color": "#2472f2", + "color": "#484bed", "weight": "bold", "size": 14 } @@ -38,7 +38,7 @@ }, "highlight_text": { "family": "Zed Sans", - "color": "#2472f2", + "color": "#484bed", "weight": "bold", "size": 14 }, @@ -51,7 +51,7 @@ "empty": { "text": { "family": "Zed Sans", - "color": "#808080", + "color": "#636363", "size": 14 }, "padding": { @@ -66,12 +66,12 @@ "corner_radius": 6, "placeholder_text": { "family": "Zed Sans", - "color": "#aaaaaa", + "color": "#808080", "size": 14 }, "selection": { "cursor": "#2472f2", - "selection": "#2472f24d" + "selection": "#2472f23d" }, "text": { "family": "Zed Mono", @@ -117,7 +117,7 @@ "spacing": 10, "text": { "family": "Zed Mono", - "color": "#555555", + "color": "#474747", "size": 14 }, "border": { @@ -221,17 +221,17 @@ }, "cursor_position": { "family": "Zed Sans", - "color": "#808080", + "color": "#636363", "size": 14 }, "diagnostic_message": { "family": "Zed Sans", - "color": "#808080", + "color": "#636363", "size": 14 }, "lsp_message": { "family": "Zed Sans", - "color": "#808080", + "color": "#636363", "size": 14 } }, @@ -240,7 +240,7 @@ "height": 32, "background": "#e3e3e3", "share_icon_color": "#555555", - "share_icon_active_color": "#1179a8", + "share_icon_active_color": "#484bed", "title": { "family": "Zed Sans", "color": "#2b2b2b", @@ -264,7 +264,7 @@ }, "sign_in_prompt": { "family": "Zed Sans", - "color": "#555555", + "color": "#474747", "size": 13, "underline": true, "padding": { @@ -311,7 +311,7 @@ }, "breadcrumbs": { "family": "Zed Mono", - "color": "#555555", + "color": "#474747", "size": 14, "padding": { "left": 6 @@ -325,14 +325,14 @@ } }, "editor": { - "text_color": "#2b2b2b", + "text_color": "#1c1c1c", "background": "#ffffff", "active_line_background": "#f1f1f1", "code_actions_indicator": "#555555", "diff_background_deleted": "#fcc6c6", "diff_background_inserted": "#b7f9ce", - "document_highlight_read_background": "#14a89829", - "document_highlight_write_background": "#14a89852", + "document_highlight_read_background": "#de900c0f", + "document_highlight_write_background": "#de900c42", "error_color": "#eb2d2d", "gutter_background": "#ffffff", "gutter_padding_factor": 3.5, @@ -343,36 +343,36 @@ "unnecessary_code_fade": 0.5, "selection": { "cursor": "#2472f2", - "selection": "#2472f24d" + "selection": "#2472f23d" }, "guest_selections": [ { - "cursor": "#79ba16", - "selection": "#79ba164d" + "cursor": "#12d796", + "selection": "#12d7963d" }, { - "cursor": "#d430e0", - "selection": "#d430e04d" + "cursor": "#de57e8", + "selection": "#de57e83d" }, { - "cursor": "#ee670a", - "selection": "#ee670a4d" + "cursor": "#f9812e", + "selection": "#f9812e3d" }, { - "cursor": "#993bf3", - "selection": "#993bf34d" + "cursor": "#b066f8", + "selection": "#b066f83d" }, { "cursor": "#16d6c1", - "selection": "#16d6c14d" + "selection": "#16d6c13d" }, { "cursor": "#ef59a3", - "selection": "#ef59a34d" + "selection": "#ef59a33d" }, { "cursor": "#f7bf17", - "selection": "#f7bf174d" + "selection": "#f7bf173d" } ], "autocomplete": { @@ -406,7 +406,7 @@ "left": -14 }, "match_highlight": { - "color": "#103063", + "color": "#1819a1", "weight": "normal" }, "selected_item": { @@ -432,7 +432,7 @@ }, "code": { "family": "Zed Mono", - "color": "#808080", + "color": "#636363", "size": 14, "margin": { "left": 10 @@ -447,7 +447,7 @@ }, "text": { "family": "Zed Sans", - "color": "#555555", + "color": "#474747", "size": 14 } } @@ -462,7 +462,7 @@ }, "path": { "family": "Zed Mono", - "color": "#808080", + "color": "#636363", "size": 14, "margin": { "left": 12 @@ -573,12 +573,12 @@ "message": { "text": { "family": "Zed Sans", - "color": "#808080", + "color": "#636363", "size": 14 }, "highlight_text": { "family": "Zed Sans", - "color": "#808080", + "color": "#636363", "size": 14, "weight": "bold" } @@ -596,12 +596,12 @@ "message": { "text": { "family": "Zed Sans", - "color": "#808080", + "color": "#636363", "size": 14 }, "highlight_text": { "family": "Zed Sans", - "color": "#808080", + "color": "#636363", "size": 14, "weight": "bold" } @@ -619,12 +619,12 @@ "message": { "text": { "family": "Zed Sans", - "color": "#808080", + "color": "#636363", "size": 14 }, "highlight_text": { "family": "Zed Sans", - "color": "#808080", + "color": "#636363", "size": 14, "weight": "bold" } @@ -642,45 +642,45 @@ "message": { "text": { "family": "Zed Sans", - "color": "#808080", + "color": "#636363", "size": 14 }, "highlight_text": { "family": "Zed Sans", - "color": "#808080", + "color": "#636363", "size": 14, "weight": "bold" } } }, "syntax": { - "keyword": "#103063", - "function": "#1b9447", - "string": "#bb550e", - "type": "#138a7d", - "number": "#14a898", - "comment": "#555555", - "property": "#134697", - "variant": "#1179a8", - "constant": "#393939", + "keyword": "#1819a1", + "function": "#f9812e", + "string": "#eb2d2d", + "type": "#de900c", + "number": "#484bed", + "comment": "#717171", + "property": "#118a62", + "variant": "#1096d3", + "constant": "#1c1c1c", "title": { "color": "#1096d3", "weight": "bold" }, - "emphasis": "#2472f2", + "emphasis": "#484bed", "emphasis_strong": { - "color": "#2472f2", + "color": "#484bed", "weight": "bold" }, "link_uri": { - "color": "#14a898", + "color": "#79ba16", "underline": true }, "link_text": { - "color": "#ee670a", + "color": "#eb2d2d", "italic": true }, - "list_marker": "#393939" + "list_marker": "#555555" } }, "project_diagnostics": { @@ -694,7 +694,7 @@ }, "status_bar_item": { "family": "Zed Sans", - "color": "#808080", + "color": "#636363", "size": 14, "margin": { "right": 10 @@ -713,7 +713,7 @@ "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#555555", + "color": "#474747", "size": 14 } }, @@ -725,7 +725,7 @@ "icon_spacing": 8, "text": { "family": "Zed Mono", - "color": "#555555", + "color": "#474747", "size": 14 } }, @@ -768,7 +768,7 @@ }, "channel_name_hash": { "family": "Zed Sans", - "color": "#808080", + "color": "#636363", "size": 14, "padding": { "right": 8 @@ -787,7 +787,7 @@ }, "hash": { "family": "Zed Sans", - "color": "#808080", + "color": "#636363", "size": 14, "margin": { "right": 8 @@ -798,13 +798,13 @@ "item": { "name": { "family": "Zed Sans", - "color": "#555555", + "color": "#474747", "size": 14 }, "padding": 4, "hash": { "family": "Zed Sans", - "color": "#808080", + "color": "#636363", "size": 14, "margin": { "right": 8 @@ -815,13 +815,13 @@ "hovered_item": { "name": { "family": "Zed Sans", - "color": "#555555", + "color": "#474747", "size": 14 }, "padding": 4, "hash": { "family": "Zed Sans", - "color": "#808080", + "color": "#636363", "size": 14, "margin": { "right": 8 @@ -839,7 +839,7 @@ "padding": 4, "hash": { "family": "Zed Sans", - "color": "#808080", + "color": "#636363", "size": 14, "margin": { "right": 8 @@ -856,7 +856,7 @@ "padding": 4, "hash": { "family": "Zed Sans", - "color": "#808080", + "color": "#636363", "size": 14, "margin": { "right": 8 @@ -885,7 +885,7 @@ }, "sign_in_prompt": { "family": "Zed Sans", - "color": "#555555", + "color": "#474747", "underline": true, "size": 14 }, @@ -898,12 +898,12 @@ "message": { "body": { "family": "Zed Sans", - "color": "#555555", + "color": "#474747", "size": 14 }, "timestamp": { "family": "Zed Sans", - "color": "#808080", + "color": "#636363", "size": 14 }, "padding": { @@ -922,12 +922,12 @@ "pending_message": { "body": { "family": "Zed Sans", - "color": "#808080", + "color": "#636363", "size": 14 }, "timestamp": { "family": "Zed Sans", - "color": "#808080", + "color": "#636363", "size": 14 }, "padding": { @@ -935,7 +935,7 @@ }, "sender": { "family": "Zed Sans", - "color": "#808080", + "color": "#636363", "weight": "bold", "size": 14, "margin": { @@ -953,12 +953,12 @@ }, "placeholder_text": { "family": "Zed Mono", - "color": "#aaaaaa", + "color": "#808080", "size": 14 }, "selection": { "cursor": "#2472f2", - "selection": "#2472f24d" + "selection": "#2472f23d" }, "border": { "color": "#e3e3e3", @@ -1003,7 +1003,7 @@ }, "name": { "family": "Zed Mono", - "color": "#aaaaaa", + "color": "#808080", "size": 14, "margin": { "right": 6 @@ -1022,7 +1022,7 @@ }, "name": { "family": "Zed Mono", - "color": "#555555", + "color": "#474747", "size": 14, "margin": { "right": 6 @@ -1043,7 +1043,7 @@ }, "name": { "family": "Zed Mono", - "color": "#555555", + "color": "#474747", "size": 14, "margin": { "right": 6 @@ -1064,7 +1064,7 @@ }, "name": { "family": "Zed Mono", - "color": "#aaaaaa", + "color": "#808080", "size": 14, "margin": { "right": 6 @@ -1083,7 +1083,7 @@ }, "name": { "family": "Zed Mono", - "color": "#aaaaaa", + "color": "#808080", "size": 14, "margin": { "right": 6 @@ -1096,12 +1096,12 @@ } }, "search": { - "match_background": "#1096d329", + "match_background": "#993bf31f", "tab_icon_spacing": 4, "tab_icon_width": 14, "active_hovered_option_button": { "family": "Zed Mono", - "color": "#555555", + "color": "#474747", "size": 14, "background": "#e3e3e3", "corner_radius": 6, @@ -1122,7 +1122,7 @@ }, "active_option_button": { "family": "Zed Mono", - "color": "#555555", + "color": "#474747", "size": 14, "background": "#e3e3e3", "corner_radius": 6, @@ -1148,12 +1148,12 @@ "max_width": 500, "placeholder_text": { "family": "Zed Mono", - "color": "#aaaaaa", + "color": "#808080", "size": 14 }, "selection": { "cursor": "#2472f2", - "selection": "#2472f24d" + "selection": "#2472f23d" }, "text": { "family": "Zed Mono", @@ -1176,7 +1176,7 @@ }, "hovered_option_button": { "family": "Zed Mono", - "color": "#555555", + "color": "#474747", "size": 14, "background": "#e3e3e3", "corner_radius": 6, @@ -1202,12 +1202,12 @@ "max_width": 500, "placeholder_text": { "family": "Zed Mono", - "color": "#aaaaaa", + "color": "#808080", "size": 14 }, "selection": { "cursor": "#2472f2", - "selection": "#2472f24d" + "selection": "#2472f23d" }, "text": { "family": "Zed Mono", @@ -1230,13 +1230,13 @@ }, "match_index": { "family": "Zed Mono", - "color": "#808080", + "color": "#636363", "size": 14, "padding": 6 }, "option_button": { "family": "Zed Mono", - "color": "#555555", + "color": "#474747", "size": 14, "background": "#f1f1f1", "corner_radius": 6, diff --git a/styles/src/themes/light.ts b/styles/src/themes/light.ts index 1462640171..e16bf5ee04 100644 --- a/styles/src/themes/light.ts +++ b/styles/src/themes/light.ts @@ -61,11 +61,11 @@ const borderColor = { const textColor = { primary: colors.neutral[750], - secondary: colors.neutral[600], - muted: colors.neutral[450], - placeholder: colors.neutral[300], + secondary: colors.neutral[650], + muted: colors.neutral[550], + placeholder: colors.neutral[450], active: colors.neutral[900], - feature: colors.blue[500], + feature: colors.indigo[500], ok: colors.green[500], error: colors.red[500], warning: colors.yellow[500], @@ -78,7 +78,7 @@ const iconColor = { muted: colors.neutral[500], placeholder: colors.neutral[300], active: colors.neutral[900], - feature: colors.sky[600], + feature: colors.indigo[500], ok: colors.green[600], error: colors.red[600], warning: colors.yellow[400], @@ -87,10 +87,10 @@ const iconColor = { const player = { 1: buildPlayer(colors.blue[500]), - 2: buildPlayer(colors.lime[500]), - 3: buildPlayer(colors.fuschia[500]), - 4: buildPlayer(colors.orange[500]), - 5: buildPlayer(colors.purple[500]), + 2: buildPlayer(colors.emerald[400]), + 3: buildPlayer(colors.fuschia[400]), + 4: buildPlayer(colors.orange[400]), + 5: buildPlayer(colors.purple[400]), 6: buildPlayer(colors.teal[400]), 7: buildPlayer(colors.pink[400]), 8: buildPlayer(colors.yellow[400]), @@ -110,11 +110,11 @@ const editor = { }, highlight: { selection: player[1].selectionColor, - occurrence: withOpacity(colors.teal[500], 0.16), - activeOccurrence: withOpacity(colors.teal[500], 0.32), + occurrence: withOpacity(colors.amber[500], 0.06), + activeOccurrence: withOpacity(colors.amber[500], 0.26), matchingBracket: colors.neutral[0], - match: withOpacity(colors.sky[500], 0.16), - activeMatch: withOpacity(colors.sky[800], 0.32), + match: withOpacity(colors.purple[500], 0.12), + activeMatch: withOpacity(colors.purple[400], 0.36), related: colors.neutral[0], }, gutter: { @@ -125,63 +125,63 @@ const editor = { const syntax: Syntax = { primary: { - color: colors.neutral[750], + color: colors.neutral[800], weight: fontWeights.normal, }, comment: { - color: colors.neutral[600], + color: colors.neutral[500], weight: fontWeights.normal, }, punctuation: { - color: colors.neutral[700], + color: colors.neutral[600], weight: fontWeights.normal, }, constant: { - color: colors.neutral[700], + color: colors.neutral[800], weight: fontWeights.normal, }, keyword: { - color: colors.blue[800], + color: colors.indigo[700], weight: fontWeights.normal, }, function: { - color: colors.green[600], + color: colors.orange[400], weight: fontWeights.normal, }, type: { - color: colors.teal[600], + color: colors.amber[500], weight: fontWeights.normal, }, variant: { - color: colors.sky[600], + color: colors.sky[500], weight: fontWeights.normal, }, property: { - color: colors.blue[700], + color: colors.emerald[600], weight: fontWeights.normal, }, enum: { - color: colors.orange[600], + color: colors.red[500], weight: fontWeights.normal, }, operator: { - color: colors.orange[600], + color: colors.red[500], weight: fontWeights.normal, }, string: { - color: colors.orange[600], + color: colors.red[500], weight: fontWeights.normal, }, number: { - color: colors.teal[500], + color: colors.indigo[500], weight: fontWeights.normal, }, boolean: { - color: colors.amber[600], + color: colors.red[500], weight: fontWeights.normal, }, predictive: { - color: textColor.muted, + color: textColor.placeholder, weight: fontWeights.normal, }, title: { @@ -197,12 +197,12 @@ const syntax: Syntax = { weight: fontWeights.bold, }, linkUrl: { - color: colors.teal[500], + color: colors.lime[500], weight: fontWeights.normal, // TODO: add underline }, linkText: { - color: colors.orange[500], + color: colors.red[500], weight: fontWeights.normal, // TODO: add italic }, diff --git a/styles/src/themes/theme.ts b/styles/src/themes/theme.ts index d7ba990e73..64c6391dab 100644 --- a/styles/src/themes/theme.ts +++ b/styles/src/themes/theme.ts @@ -21,7 +21,7 @@ export function buildPlayer( return { baseColor: color, cursorColor: withOpacity(color, cursorOpacity || 1.0), - selectionColor: withOpacity(color, selectionOpacity || 0.3), + selectionColor: withOpacity(color, selectionOpacity || 0.24), borderColor: withOpacity(color, borderOpacity || 0.8), } }