Update semantic status colors in all themes

Nate Butler created 3 years ago

- for `ok`, `error`, `warning` and `info`:
  - backgroundColor values were all placeholder. Add real values
  - Update border values to new style

Change summary

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(-)

Detailed changes

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": {

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": {

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": {

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": {

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": {

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": {

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": {

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": {

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 = {

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),

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: {