From b23ff7c3adc037d512e9e7068c3e8413edb36a17 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Wed, 27 Apr 2022 13:23:58 -0400 Subject: [PATCH] Update semantic status colors in all themes - for `ok`, `error`, `warning` and `info`: - backgroundColor values were all placeholder. Add real values - Update border values to new style --- assets/themes/cave-dark.json | 6 ++-- assets/themes/cave-light.json | 6 ++-- assets/themes/dark.json | 6 ++-- assets/themes/light.json | 6 ++-- assets/themes/solarized-dark.json | 6 ++-- assets/themes/solarized-light.json | 6 ++-- assets/themes/sulphurpool-dark.json | 6 ++-- assets/themes/sulphurpool-light.json | 6 ++-- styles/src/themes/base16.ts | 40 ++++++++++++------------- styles/src/themes/dark.ts | 44 +++++++++++++--------------- styles/src/themes/light.ts | 44 ++++++++++++++-------------- 11 files changed, 87 insertions(+), 89 deletions(-) diff --git a/assets/themes/cave-dark.json b/assets/themes/cave-dark.json index 8fe36aac5d567dc7fd8994769bbb63d9af5f0779..2d6b93a177dd200b3485e7e3107eedca703f6350 100644 --- a/assets/themes/cave-dark.json +++ b/assets/themes/cave-dark.json @@ -402,8 +402,8 @@ "background": "#19171c", "active_line_background": "#efecf412", "code_actions_indicator": "#8b8792", - "diff_background_deleted": "#be4678", - "diff_background_inserted": "#2a9292", + "diff_background_deleted": "#be467826", + "diff_background_inserted": "#2a929226", "document_highlight_read_background": "#19171c1f", "document_highlight_write_background": "#19171c29", "error_color": "#be4678", @@ -1369,7 +1369,7 @@ "size": 14 }, "border": { - "color": "#be4678", + "color": "#be467826", "width": 1 }, "margin": { diff --git a/assets/themes/cave-light.json b/assets/themes/cave-light.json index cdd23be45f0f9c05701e819467ca44373a8aeedf..1784bb8b54b01d171e552a4a368dca5eb5a21f67 100644 --- a/assets/themes/cave-light.json +++ b/assets/themes/cave-light.json @@ -402,8 +402,8 @@ "background": "#efecf4", "active_line_background": "#19171c12", "code_actions_indicator": "#585260", - "diff_background_deleted": "#be4678", - "diff_background_inserted": "#2a9292", + "diff_background_deleted": "#be467826", + "diff_background_inserted": "#2a929226", "document_highlight_read_background": "#efecf41f", "document_highlight_write_background": "#efecf429", "error_color": "#be4678", @@ -1369,7 +1369,7 @@ "size": 14 }, "border": { - "color": "#be4678", + "color": "#be467826", "width": 1 }, "margin": { diff --git a/assets/themes/dark.json b/assets/themes/dark.json index 9a0d6762e2c35d462aea5cb06c1466fa28841c03..2b0d732958f2ba179a9c33812424f4772b9b05fb 100644 --- a/assets/themes/dark.json +++ b/assets/themes/dark.json @@ -402,8 +402,8 @@ "background": "#000000", "active_line_background": "#ffffff12", "code_actions_indicator": "#555555", - "diff_background_deleted": "#f15656", - "diff_background_inserted": "#1b9447", + "diff_background_deleted": "#c9181826", + "diff_background_inserted": "#1b944726", "document_highlight_read_background": "#ffffff1f", "document_highlight_write_background": "#ffffff29", "error_color": "#f15656", @@ -1369,7 +1369,7 @@ "size": 14 }, "border": { - "color": "#eb2d2d", + "color": "#eb2d2d26", "width": 1 }, "margin": { diff --git a/assets/themes/light.json b/assets/themes/light.json index 6997cd2e680c8f5ac1b80e8f7a27862c5b017c7b..ae6036ccfffcafa07d0ba4ef2a9e3083d2cf5472 100644 --- a/assets/themes/light.json +++ b/assets/themes/light.json @@ -402,8 +402,8 @@ "background": "#ffffff", "active_line_background": "#0000000f", "code_actions_indicator": "#9c9c9c", - "diff_background_deleted": "#fcc6c6", - "diff_background_inserted": "#b7f9ce", + "diff_background_deleted": "#c9181826", + "diff_background_inserted": "#1b944726", "document_highlight_read_background": "#0000000f", "document_highlight_write_background": "#00000029", "error_color": "#eb2d2d", @@ -1369,7 +1369,7 @@ "size": 14 }, "border": { - "color": "#f9a0a0", + "color": "#eb2d2d26", "width": 1 }, "margin": { diff --git a/assets/themes/solarized-dark.json b/assets/themes/solarized-dark.json index b63a0f487245735a748e3b5a03678e47db337fa8..dffea6b23160aa1c40ecba80155a9c2d5433f506 100644 --- a/assets/themes/solarized-dark.json +++ b/assets/themes/solarized-dark.json @@ -402,8 +402,8 @@ "background": "#002b36", "active_line_background": "#fdf6e312", "code_actions_indicator": "#93a1a1", - "diff_background_deleted": "#dc322f", - "diff_background_inserted": "#859900", + "diff_background_deleted": "#dc322f26", + "diff_background_inserted": "#85990026", "document_highlight_read_background": "#002b361f", "document_highlight_write_background": "#002b3629", "error_color": "#dc322f", @@ -1369,7 +1369,7 @@ "size": 14 }, "border": { - "color": "#dc322f", + "color": "#dc322f26", "width": 1 }, "margin": { diff --git a/assets/themes/solarized-light.json b/assets/themes/solarized-light.json index 2b0b1d5edd72482516b6d69558d0f53c551bb361..912f160a8341cc279e70146b2434316401d31841 100644 --- a/assets/themes/solarized-light.json +++ b/assets/themes/solarized-light.json @@ -402,8 +402,8 @@ "background": "#fdf6e3", "active_line_background": "#002b3612", "code_actions_indicator": "#586e75", - "diff_background_deleted": "#dc322f", - "diff_background_inserted": "#859900", + "diff_background_deleted": "#dc322f26", + "diff_background_inserted": "#85990026", "document_highlight_read_background": "#fdf6e31f", "document_highlight_write_background": "#fdf6e329", "error_color": "#dc322f", @@ -1369,7 +1369,7 @@ "size": 14 }, "border": { - "color": "#dc322f", + "color": "#dc322f26", "width": 1 }, "margin": { diff --git a/assets/themes/sulphurpool-dark.json b/assets/themes/sulphurpool-dark.json index 9ab07af2d1615bf937377cab7096b0a5144939fc..8fe68d052673c34a25b528b6c7814f07764a84ea 100644 --- a/assets/themes/sulphurpool-dark.json +++ b/assets/themes/sulphurpool-dark.json @@ -402,8 +402,8 @@ "background": "#202746", "active_line_background": "#f5f7ff12", "code_actions_indicator": "#979db4", - "diff_background_deleted": "#c94922", - "diff_background_inserted": "#ac9739", + "diff_background_deleted": "#c9492226", + "diff_background_inserted": "#ac973926", "document_highlight_read_background": "#2027461f", "document_highlight_write_background": "#20274629", "error_color": "#c94922", @@ -1369,7 +1369,7 @@ "size": 14 }, "border": { - "color": "#c94922", + "color": "#c9492226", "width": 1 }, "margin": { diff --git a/assets/themes/sulphurpool-light.json b/assets/themes/sulphurpool-light.json index 1a83d53fea1bb8f4dc811613b6360c338fc51726..eea0851ad54a1da78dcea2e1d1b98c4123ad18b1 100644 --- a/assets/themes/sulphurpool-light.json +++ b/assets/themes/sulphurpool-light.json @@ -402,8 +402,8 @@ "background": "#f5f7ff", "active_line_background": "#20274612", "code_actions_indicator": "#5e6687", - "diff_background_deleted": "#c94922", - "diff_background_inserted": "#ac9739", + "diff_background_deleted": "#c9492226", + "diff_background_inserted": "#ac973926", "document_highlight_read_background": "#f5f7ff1f", "document_highlight_write_background": "#f5f7ff29", "error_color": "#c94922", @@ -1369,7 +1369,7 @@ "size": 14 }, "border": { - "color": "#c94922", + "color": "#c9492226", "width": 1 }, "margin": { diff --git a/styles/src/themes/base16.ts b/styles/src/themes/base16.ts index a472837dbe07ac2a245708efc0cca523a79463c7..0744611fce3e020196235f0422aa609b38fd7e69 100644 --- a/styles/src/themes/base16.ts +++ b/styles/src/themes/base16.ts @@ -51,28 +51,28 @@ export function createTheme(name: string, isLight: boolean, neutral: ColorToken[ focused: neutral[3], }, ok: { - base: accent.green, - hovered: accent.green, - active: accent.green, - focused: accent.green, + base: withOpacity(accent.green, 0.15), + hovered: withOpacity(accent.green, 0.20), + active: withOpacity(accent.green, 0.25), + focused: withOpacity(accent.green, 0.20), }, error: { - base: accent.red, - hovered: accent.red, - active: accent.red, - focused: accent.red, + base: withOpacity(accent.red, 0.15), + hovered: withOpacity(accent.red, 0.20), + active: withOpacity(accent.red, 0.25), + focused: withOpacity(accent.red, 0.20), }, warning: { - base: accent.yellow, - hovered: accent.yellow, - active: accent.yellow, - focused: accent.yellow, + base: withOpacity(accent.yellow, 0.15), + hovered: withOpacity(accent.yellow, 0.20), + active: withOpacity(accent.yellow, 0.25), + focused: withOpacity(accent.yellow, 0.20), }, info: { - base: accent.blue, - hovered: accent.blue, - active: accent.blue, - focused: accent.blue, + base: withOpacity(accent.blue, 0.15), + hovered: withOpacity(accent.blue, 0.20), + active: withOpacity(accent.blue, 0.25), + focused: withOpacity(accent.blue, 0.20), }, }; @@ -82,10 +82,10 @@ export function createTheme(name: string, isLight: boolean, neutral: ColorToken[ muted: neutral[3], focused: neutral[3], active: neutral[3], - ok: accent.green, - error: accent.red, - warning: accent.yellow, - info: accent.blue, + ok: withOpacity(accent.green, 0.15), + error: withOpacity(accent.red, 0.15), + warning: withOpacity(accent.yellow, 0.15), + info: withOpacity(accent.blue, 0.15), }; const textColor = { diff --git a/styles/src/themes/dark.ts b/styles/src/themes/dark.ts index 564ac685ae83ab72bb52c3e9426f56d611e31952..ad2cf516563946970df43a806444c305becd17f6 100644 --- a/styles/src/themes/dark.ts +++ b/styles/src/themes/dark.ts @@ -34,28 +34,28 @@ const backgroundColor = { focused: colors.neutral[800], }, ok: { - base: colors.green[600], - hovered: colors.green[600], - active: colors.green[600], - focused: colors.green[600], + base: withOpacity(colors.green[600], 0.15), + hovered: withOpacity(colors.green[600], 0.20), + active: withOpacity(colors.green[600], 0.25), + focused: withOpacity(colors.green[600], 0.20), }, error: { - base: colors.red[400], - hovered: colors.red[400], - active: colors.red[400], - focused: colors.red[400], + base: withOpacity(colors.red[600], 0.15), + hovered: withOpacity(colors.red[600], 0.20), + active: withOpacity(colors.red[600], 0.25), + focused: withOpacity(colors.red[600], 0.20), }, warning: { - base: colors.amber[300], - hovered: colors.amber[300], - active: colors.amber[300], - focused: colors.amber[300], + base: withOpacity(colors.amber[400], 0.15), + hovered: withOpacity(colors.amber[400], 0.20), + active: withOpacity(colors.amber[400], 0.25), + focused: withOpacity(colors.amber[400], 0.20), }, info: { - base: colors.blue[500], - hovered: colors.blue[500], - active: colors.blue[500], - focused: colors.blue[500], + base: withOpacity(colors.blue[500], 0.15), + hovered: withOpacity(colors.blue[500], 0.20), + active: withOpacity(colors.blue[500], 0.25), + focused: withOpacity(colors.blue[500], 0.20), }, }; @@ -65,10 +65,10 @@ const borderColor = { muted: colors.neutral[675], focused: colors.indigo[500], active: colors.neutral[900], - ok: colors.green[500], - error: colors.red[500], - warning: colors.amber[500], - info: colors.blue[500], + ok: withOpacity(colors.green[600], 0.15), + error: withOpacity(colors.red[500], 0.15), + warning: withOpacity(colors.amber[400], 0.15), + info: withOpacity(colors.blue[500], 0.15), }; const textColor = { @@ -77,7 +77,6 @@ const textColor = { muted: colors.neutral[450], placeholder: colors.neutral[650], active: colors.neutral[0], - //TODO: (design) define feature and it's correct value feature: colors.blue[400], ok: colors.green[600], error: colors.red[400], @@ -91,7 +90,6 @@ const iconColor = { muted: colors.neutral[600], placeholder: colors.neutral[700], active: colors.neutral[0], - //TODO: (design) define feature and it's correct value feature: colors.blue[500], ok: colors.green[600], error: colors.red[500], @@ -124,7 +122,7 @@ const editor = { highlight: { selection: player[1].selectionColor, 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 + activeOccurrence: withOpacity(colors.neutral[0], 0.16), matchingBracket: backgroundColor[500].active, match: withOpacity(colors.violet[700], 0.5), activeMatch: withOpacity(colors.violet[600], 0.7), diff --git a/styles/src/themes/light.ts b/styles/src/themes/light.ts index 710754abc58a5c80f4d39330d6e1e1fcd57ead7a..c17aaf5807eca53f0a2dd51ee72a6a96900298fc 100644 --- a/styles/src/themes/light.ts +++ b/styles/src/themes/light.ts @@ -34,28 +34,28 @@ const backgroundColor = { focused: colors.neutral[25], }, ok: { - base: colors.green[100], - hovered: colors.green[100], - active: colors.green[100], - focused: colors.green[100], + base: withOpacity(colors.green[600], 0.15), + hovered: withOpacity(colors.green[600], 0.20), + active: withOpacity(colors.green[600], 0.25), + focused: withOpacity(colors.green[600], 0.20), }, error: { - base: colors.red[100], - hovered: colors.red[100], - active: colors.red[100], - focused: colors.red[100], + base: withOpacity(colors.red[600], 0.15), + hovered: withOpacity(colors.red[600], 0.20), + active: withOpacity(colors.red[600], 0.25), + focused: withOpacity(colors.red[600], 0.20), }, warning: { - base: colors.yellow[100], - hovered: colors.yellow[100], - active: colors.yellow[100], - focused: colors.yellow[100], + base: withOpacity(colors.amber[400], 0.15), + hovered: withOpacity(colors.amber[400], 0.20), + active: withOpacity(colors.amber[400], 0.25), + focused: withOpacity(colors.amber[400], 0.20), }, info: { - base: colors.blue[100], - hovered: colors.blue[100], - active: colors.blue[100], - focused: colors.blue[100], + base: withOpacity(colors.blue[500], 0.15), + hovered: withOpacity(colors.blue[500], 0.20), + active: withOpacity(colors.blue[500], 0.25), + focused: withOpacity(colors.blue[500], 0.20), }, }; @@ -65,10 +65,10 @@ const borderColor = { muted: colors.neutral[100], focused: colors.indigo[500], active: colors.neutral[250], - ok: colors.green[200], - error: colors.red[200], - warning: colors.yellow[200], - info: colors.blue[200], + ok: withOpacity(colors.green[600], 0.15), + error: withOpacity(colors.red[500], 0.15), + warning: withOpacity(colors.amber[400], 0.15), + info: withOpacity(colors.blue[500], 0.15), }; const textColor = { @@ -122,10 +122,10 @@ const editor = { highlight: { selection: player[1].selectionColor, occurrence: withOpacity(colors.neutral[900], 0.06), - activeOccurrence: withOpacity(colors.neutral[900], 0.16), // TODO: This is not hooked up to occurences on the rust side + activeOccurrence: withOpacity(colors.neutral[900], 0.16), matchingBracket: colors.neutral[0], match: colors.yellow[100], - activeMatch: colors.yellow[200], // TODO: This is not hooked up to occurences on the rust side + activeMatch: colors.yellow[200], related: colors.neutral[0], }, gutter: {