Update theme feature colors

Nate Butler and gibusu created 3 years ago

- border focus color
- Text feature color
- Match & active match highlight color

Matches should be more legible now in both themes. `activeMatch` is still not hooked up on the rust side, so it won't take any effect yet.

Co-Authored-By: gibusu <[e-mail]>

Change summary

assets/themes/dark.json    | 12 ++++++------
assets/themes/light.json   | 12 ++++++------
styles/src/themes/dark.ts  |  8 ++++----
styles/src/themes/light.ts |  8 ++++----
4 files changed, 20 insertions(+), 20 deletions(-)

Detailed changes

assets/themes/dark.json

@@ -18,7 +18,7 @@
       },
       "highlight_text": {
         "family": "Zed Sans",
-        "color": "#1096d3",
+        "color": "#96e818",
         "weight": "bold",
         "size": 14
       }
@@ -38,7 +38,7 @@
       },
       "highlight_text": {
         "family": "Zed Sans",
-        "color": "#1096d3",
+        "color": "#96e818",
         "weight": "bold",
         "size": 14
       },
@@ -413,7 +413,7 @@
       },
       "match_highlight": {
         "family": "Zed Mono",
-        "color": "#1096d3",
+        "color": "#96e818",
         "size": 14
       },
       "selected_item": {
@@ -674,9 +674,9 @@
         "color": "#de900c",
         "weight": "bold"
       },
-      "emphasis": "#1096d3",
+      "emphasis": "#96e818",
       "emphasis_strong": {
-        "color": "#1096d3",
+        "color": "#96e818",
         "weight": "bold"
       },
       "link_uri": {
@@ -1103,7 +1103,7 @@
     }
   },
   "search": {
-    "match_background": "#1096d329",
+    "match_background": "#3f15a380",
     "tab_icon_spacing": 4,
     "tab_icon_width": 14,
     "active_hovered_option_button": {

assets/themes/light.json

@@ -18,7 +18,7 @@
       },
       "highlight_text": {
         "family": "Zed Sans",
-        "color": "#1b1edc",
+        "color": "#484bed",
         "weight": "bold",
         "size": 14
       }
@@ -38,7 +38,7 @@
       },
       "highlight_text": {
         "family": "Zed Sans",
-        "color": "#1b1edc",
+        "color": "#484bed",
         "weight": "bold",
         "size": 14
       },
@@ -413,7 +413,7 @@
       },
       "match_highlight": {
         "family": "Zed Mono",
-        "color": "#1b1edc",
+        "color": "#484bed",
         "size": 14
       },
       "selected_item": {
@@ -674,9 +674,9 @@
         "color": "#1096d3",
         "weight": "bold"
       },
-      "emphasis": "#1b1edc",
+      "emphasis": "#484bed",
       "emphasis_strong": {
-        "color": "#1b1edc",
+        "color": "#484bed",
         "weight": "bold"
       },
       "link_uri": {
@@ -1103,7 +1103,7 @@
     }
   },
   "search": {
-    "match_background": "#eb2d2d33",
+    "match_background": "#fce9b7",
     "tab_icon_spacing": 4,
     "tab_icon_width": 14,
     "active_hovered_option_button": {

styles/src/themes/dark.ts

@@ -51,7 +51,7 @@ const borderColor = {
   primary: colors.neutral[875],
   secondary: colors.neutral[775],
   muted: colors.neutral[675],
-  focused: colors.neutral[500],
+  focused: colors.indigo[500],
   active: colors.neutral[900],
   ok: colors.green[500],
   error: colors.red[500],
@@ -66,7 +66,7 @@ const textColor = {
   placeholder: colors.neutral[650],
   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],
@@ -114,8 +114,8 @@ const editor = {
     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),
+    match: withOpacity(colors.violet[700], 0.5),
+    activeMatch: withOpacity(colors.violet[600], 0.7),
     related: backgroundColor[500].focused,
   },
   gutter: {

styles/src/themes/light.ts

@@ -51,7 +51,7 @@ const borderColor = {
   primary: colors.neutral[150],
   secondary: colors.neutral[150],
   muted: colors.neutral[100],
-  focused: colors.neutral[100],
+  focused: colors.indigo[500],
   active: colors.neutral[250],
   ok: colors.green[200],
   error: colors.red[200],
@@ -65,7 +65,7 @@ const textColor = {
   muted: colors.neutral[550],
   placeholder: colors.neutral[450],
   active: colors.neutral[900],
-  feature: colors.indigo[600],
+  feature: colors.indigo[500],
   ok: colors.green[500],
   error: colors.red[500],
   warning: colors.yellow[500],
@@ -112,8 +112,8 @@ const editor = {
     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
     matchingBracket: colors.neutral[0],
-    match: withOpacity(colors.red[500], 0.2),
-    activeMatch: withOpacity(colors.indigo[400], 0.36), // TODO: This is not hooked up to occurences on the rust side
+    match: colors.yellow[100],
+    activeMatch: colors.yellow[200], // TODO: This is not hooked up to occurences on the rust side
     related: colors.neutral[0],
   },
   gutter: {