Update base16 theme occurrence style

Nate Butler created 3 years ago

- Update base16 theme occurrence style to be visible
- Update match styles to use the blend scaling value
  - This makes it so matches are less loud in light themes

Change summary

assets/themes/cave-dark.json         | 46 ++++++++++++++--------------
assets/themes/cave-light.json        |  6 +-
assets/themes/solarized-dark.json    | 46 ++++++++++++++--------------
assets/themes/solarized-light.json   |  6 +-
assets/themes/sulphurpool-dark.json  | 46 ++++++++++++++--------------
assets/themes/sulphurpool-light.json |  6 +-
styles/src/themes/base16.ts          | 10 +++---
7 files changed, 83 insertions(+), 83 deletions(-)

Detailed changes

assets/themes/cave-dark.json

@@ -23,7 +23,7 @@
         "size": 14
       },
       "active": {
-        "background": "#5852607a",
+        "background": "#5852605c",
         "text": {
           "family": "Zed Sans",
           "color": "#e2dfe7",
@@ -31,7 +31,7 @@
         }
       },
       "hover": {
-        "background": "#58526052"
+        "background": "#5852603d"
       }
     },
     "border": {
@@ -81,7 +81,7 @@
     },
     "shadow": {
       "blur": 16,
-      "color": "#00000052",
+      "color": "#0000003d",
       "offset": [
         0,
         2
@@ -215,7 +215,7 @@
             "size": 14
           },
           "icon_color": "#e2dfe7",
-          "background": "#58526052"
+          "background": "#5852603d"
         }
       },
       "diagnostic_message": {
@@ -288,7 +288,7 @@
               "left": 7,
               "right": 7
             },
-            "background": "#58526052"
+            "background": "#5852603d"
           },
           "container_warning": {
             "corner_radius": 6,
@@ -335,11 +335,11 @@
           "icon_color": "#8b8792",
           "hover": {
             "icon_color": "#e2dfe7",
-            "background": "#58526052"
+            "background": "#5852603d"
           },
           "active": {
             "icon_color": "#efecf4",
-            "background": "#5852607a"
+            "background": "#5852605c"
           }
         }
       }
@@ -411,15 +411,15 @@
         },
         "color": "#8b8792",
         "hover": {
-          "background": "#58526052",
+          "background": "#5852603d",
           "color": "#8b8792"
         },
         "active": {
-          "background": "#5852607a",
+          "background": "#5852605c",
           "color": "#efecf4"
         },
         "active_hover": {
-          "background": "#58526052",
+          "background": "#5852603d",
           "color": "#efecf4"
         }
       },
@@ -480,8 +480,8 @@
     "code_actions_indicator": "#8b8792",
     "diff_background_deleted": "#be467826",
     "diff_background_inserted": "#2a929226",
-    "document_highlight_read_background": "#19171c1f",
-    "document_highlight_write_background": "#19171c29",
+    "document_highlight_read_background": "#efecf41f",
+    "document_highlight_write_background": "#efecf43d",
     "error_color": "#be4678",
     "gutter_background": "#19171c",
     "gutter_padding_factor": 3.5,
@@ -549,7 +549,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#26232a52"
+        "background": "#26232a3d"
       },
       "margin": {
         "left": -14
@@ -567,7 +567,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#26232a7a"
+        "background": "#26232a5c"
       }
     },
     "diagnostic_header": {
@@ -951,7 +951,7 @@
     },
     "hovered_entry": {
       "height": 24,
-      "background": "#58526052",
+      "background": "#5852603d",
       "icon_color": "#8b8792",
       "icon_size": 8,
       "icon_spacing": 8,
@@ -974,7 +974,7 @@
     },
     "hovered_selected_entry": {
       "height": 24,
-      "background": "#58526052",
+      "background": "#5852603d",
       "icon_color": "#8b8792",
       "icon_size": 8,
       "icon_spacing": 8,
@@ -1059,7 +1059,7 @@
             "right": 8
           }
         },
-        "background": "#58526052",
+        "background": "#5852603d",
         "corner_radius": 6
       },
       "active_item": {
@@ -1094,7 +1094,7 @@
             "right": 8
           }
         },
-        "background": "#58526052",
+        "background": "#5852603d",
         "corner_radius": 6
       },
       "menu": {
@@ -1107,7 +1107,7 @@
         },
         "shadow": {
           "blur": 16,
-          "color": "#00000052",
+          "color": "#0000003d",
           "offset": [
             0,
             2
@@ -1284,7 +1284,7 @@
       "padding": {
         "left": 8
       },
-      "background": "#58526052",
+      "background": "#5852603d",
       "corner_radius": 6
     },
     "unshared_project": {
@@ -1328,7 +1328,7 @@
     }
   },
   "search": {
-    "match_background": "#955ae780",
+    "match_background": "#955ae77a",
     "tab_icon_spacing": 8,
     "tab_icon_width": 14,
     "option_button": {
@@ -1354,7 +1354,7 @@
         "family": "Zed Mono",
         "color": "#efecf4",
         "size": 14,
-        "background": "#585260a3",
+        "background": "#5852607a",
         "border": {
           "color": "#655f6d",
           "width": 1
@@ -1364,7 +1364,7 @@
         "family": "Zed Mono",
         "color": "#efecf4",
         "size": 14,
-        "background": "#58526052",
+        "background": "#5852603d",
         "border": {
           "color": "#655f6d",
           "width": 1

assets/themes/cave-light.json

@@ -480,8 +480,8 @@
     "code_actions_indicator": "#585260",
     "diff_background_deleted": "#be467826",
     "diff_background_inserted": "#2a929226",
-    "document_highlight_read_background": "#efecf41f",
-    "document_highlight_write_background": "#efecf429",
+    "document_highlight_read_background": "#19171c0f",
+    "document_highlight_write_background": "#19171c1f",
     "error_color": "#be4678",
     "gutter_background": "#efecf4",
     "gutter_padding_factor": 3.5,
@@ -1328,7 +1328,7 @@
     }
   },
   "search": {
-    "match_background": "#955ae780",
+    "match_background": "#955ae73d",
     "tab_icon_spacing": 8,
     "tab_icon_width": 14,
     "option_button": {

assets/themes/solarized-dark.json

@@ -23,7 +23,7 @@
         "size": 14
       },
       "active": {
-        "background": "#586e757a",
+        "background": "#586e755c",
         "text": {
           "family": "Zed Sans",
           "color": "#eee8d5",
@@ -31,7 +31,7 @@
         }
       },
       "hover": {
-        "background": "#586e7552"
+        "background": "#586e753d"
       }
     },
     "border": {
@@ -81,7 +81,7 @@
     },
     "shadow": {
       "blur": 16,
-      "color": "#00000052",
+      "color": "#0000003d",
       "offset": [
         0,
         2
@@ -215,7 +215,7 @@
             "size": 14
           },
           "icon_color": "#eee8d5",
-          "background": "#586e7552"
+          "background": "#586e753d"
         }
       },
       "diagnostic_message": {
@@ -288,7 +288,7 @@
               "left": 7,
               "right": 7
             },
-            "background": "#586e7552"
+            "background": "#586e753d"
           },
           "container_warning": {
             "corner_radius": 6,
@@ -335,11 +335,11 @@
           "icon_color": "#93a1a1",
           "hover": {
             "icon_color": "#eee8d5",
-            "background": "#586e7552"
+            "background": "#586e753d"
           },
           "active": {
             "icon_color": "#fdf6e3",
-            "background": "#586e757a"
+            "background": "#586e755c"
           }
         }
       }
@@ -411,15 +411,15 @@
         },
         "color": "#93a1a1",
         "hover": {
-          "background": "#586e7552",
+          "background": "#586e753d",
           "color": "#93a1a1"
         },
         "active": {
-          "background": "#586e757a",
+          "background": "#586e755c",
           "color": "#fdf6e3"
         },
         "active_hover": {
-          "background": "#586e7552",
+          "background": "#586e753d",
           "color": "#fdf6e3"
         }
       },
@@ -480,8 +480,8 @@
     "code_actions_indicator": "#93a1a1",
     "diff_background_deleted": "#dc322f26",
     "diff_background_inserted": "#85990026",
-    "document_highlight_read_background": "#002b361f",
-    "document_highlight_write_background": "#002b3629",
+    "document_highlight_read_background": "#fdf6e31f",
+    "document_highlight_write_background": "#fdf6e33d",
     "error_color": "#dc322f",
     "gutter_background": "#002b36",
     "gutter_padding_factor": 3.5,
@@ -549,7 +549,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#07364252"
+        "background": "#0736423d"
       },
       "margin": {
         "left": -14
@@ -567,7 +567,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#0736427a"
+        "background": "#0736425c"
       }
     },
     "diagnostic_header": {
@@ -951,7 +951,7 @@
     },
     "hovered_entry": {
       "height": 24,
-      "background": "#586e7552",
+      "background": "#586e753d",
       "icon_color": "#93a1a1",
       "icon_size": 8,
       "icon_spacing": 8,
@@ -974,7 +974,7 @@
     },
     "hovered_selected_entry": {
       "height": 24,
-      "background": "#586e7552",
+      "background": "#586e753d",
       "icon_color": "#93a1a1",
       "icon_size": 8,
       "icon_spacing": 8,
@@ -1059,7 +1059,7 @@
             "right": 8
           }
         },
-        "background": "#586e7552",
+        "background": "#586e753d",
         "corner_radius": 6
       },
       "active_item": {
@@ -1094,7 +1094,7 @@
             "right": 8
           }
         },
-        "background": "#586e7552",
+        "background": "#586e753d",
         "corner_radius": 6
       },
       "menu": {
@@ -1107,7 +1107,7 @@
         },
         "shadow": {
           "blur": 16,
-          "color": "#00000052",
+          "color": "#0000003d",
           "offset": [
             0,
             2
@@ -1284,7 +1284,7 @@
       "padding": {
         "left": 8
       },
-      "background": "#586e7552",
+      "background": "#586e753d",
       "corner_radius": 6
     },
     "unshared_project": {
@@ -1328,7 +1328,7 @@
     }
   },
   "search": {
-    "match_background": "#6c71c480",
+    "match_background": "#6c71c47a",
     "tab_icon_spacing": 8,
     "tab_icon_width": 14,
     "option_button": {
@@ -1354,7 +1354,7 @@
         "family": "Zed Mono",
         "color": "#fdf6e3",
         "size": 14,
-        "background": "#586e75a3",
+        "background": "#586e757a",
         "border": {
           "color": "#657b83",
           "width": 1
@@ -1364,7 +1364,7 @@
         "family": "Zed Mono",
         "color": "#fdf6e3",
         "size": 14,
-        "background": "#586e7552",
+        "background": "#586e753d",
         "border": {
           "color": "#657b83",
           "width": 1

assets/themes/solarized-light.json

@@ -480,8 +480,8 @@
     "code_actions_indicator": "#586e75",
     "diff_background_deleted": "#dc322f26",
     "diff_background_inserted": "#85990026",
-    "document_highlight_read_background": "#fdf6e31f",
-    "document_highlight_write_background": "#fdf6e329",
+    "document_highlight_read_background": "#002b360f",
+    "document_highlight_write_background": "#002b361f",
     "error_color": "#dc322f",
     "gutter_background": "#fdf6e3",
     "gutter_padding_factor": 3.5,
@@ -1328,7 +1328,7 @@
     }
   },
   "search": {
-    "match_background": "#6c71c480",
+    "match_background": "#6c71c43d",
     "tab_icon_spacing": 8,
     "tab_icon_width": 14,
     "option_button": {

assets/themes/sulphurpool-dark.json

@@ -23,7 +23,7 @@
         "size": 14
       },
       "active": {
-        "background": "#5e66877a",
+        "background": "#5e66875c",
         "text": {
           "family": "Zed Sans",
           "color": "#dfe2f1",
@@ -31,7 +31,7 @@
         }
       },
       "hover": {
-        "background": "#5e668752"
+        "background": "#5e66873d"
       }
     },
     "border": {
@@ -81,7 +81,7 @@
     },
     "shadow": {
       "blur": 16,
-      "color": "#00000052",
+      "color": "#0000003d",
       "offset": [
         0,
         2
@@ -215,7 +215,7 @@
             "size": 14
           },
           "icon_color": "#dfe2f1",
-          "background": "#5e668752"
+          "background": "#5e66873d"
         }
       },
       "diagnostic_message": {
@@ -288,7 +288,7 @@
               "left": 7,
               "right": 7
             },
-            "background": "#5e668752"
+            "background": "#5e66873d"
           },
           "container_warning": {
             "corner_radius": 6,
@@ -335,11 +335,11 @@
           "icon_color": "#979db4",
           "hover": {
             "icon_color": "#dfe2f1",
-            "background": "#5e668752"
+            "background": "#5e66873d"
           },
           "active": {
             "icon_color": "#f5f7ff",
-            "background": "#5e66877a"
+            "background": "#5e66875c"
           }
         }
       }
@@ -411,15 +411,15 @@
         },
         "color": "#979db4",
         "hover": {
-          "background": "#5e668752",
+          "background": "#5e66873d",
           "color": "#979db4"
         },
         "active": {
-          "background": "#5e66877a",
+          "background": "#5e66875c",
           "color": "#f5f7ff"
         },
         "active_hover": {
-          "background": "#5e668752",
+          "background": "#5e66873d",
           "color": "#f5f7ff"
         }
       },
@@ -480,8 +480,8 @@
     "code_actions_indicator": "#979db4",
     "diff_background_deleted": "#c9492226",
     "diff_background_inserted": "#ac973926",
-    "document_highlight_read_background": "#2027461f",
-    "document_highlight_write_background": "#20274629",
+    "document_highlight_read_background": "#f5f7ff1f",
+    "document_highlight_write_background": "#f5f7ff3d",
     "error_color": "#c94922",
     "gutter_background": "#202746",
     "gutter_padding_factor": 3.5,
@@ -549,7 +549,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#29325652"
+        "background": "#2932563d"
       },
       "margin": {
         "left": -14
@@ -567,7 +567,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#2932567a"
+        "background": "#2932565c"
       }
     },
     "diagnostic_header": {
@@ -951,7 +951,7 @@
     },
     "hovered_entry": {
       "height": 24,
-      "background": "#5e668752",
+      "background": "#5e66873d",
       "icon_color": "#979db4",
       "icon_size": 8,
       "icon_spacing": 8,
@@ -974,7 +974,7 @@
     },
     "hovered_selected_entry": {
       "height": 24,
-      "background": "#5e668752",
+      "background": "#5e66873d",
       "icon_color": "#979db4",
       "icon_size": 8,
       "icon_spacing": 8,
@@ -1059,7 +1059,7 @@
             "right": 8
           }
         },
-        "background": "#5e668752",
+        "background": "#5e66873d",
         "corner_radius": 6
       },
       "active_item": {
@@ -1094,7 +1094,7 @@
             "right": 8
           }
         },
-        "background": "#5e668752",
+        "background": "#5e66873d",
         "corner_radius": 6
       },
       "menu": {
@@ -1107,7 +1107,7 @@
         },
         "shadow": {
           "blur": 16,
-          "color": "#00000052",
+          "color": "#0000003d",
           "offset": [
             0,
             2
@@ -1284,7 +1284,7 @@
       "padding": {
         "left": 8
       },
-      "background": "#5e668752",
+      "background": "#5e66873d",
       "corner_radius": 6
     },
     "unshared_project": {
@@ -1328,7 +1328,7 @@
     }
   },
   "search": {
-    "match_background": "#6679cc80",
+    "match_background": "#6679cc7a",
     "tab_icon_spacing": 8,
     "tab_icon_width": 14,
     "option_button": {
@@ -1354,7 +1354,7 @@
         "family": "Zed Mono",
         "color": "#f5f7ff",
         "size": 14,
-        "background": "#5e6687a3",
+        "background": "#5e66877a",
         "border": {
           "color": "#6b7394",
           "width": 1
@@ -1364,7 +1364,7 @@
         "family": "Zed Mono",
         "color": "#f5f7ff",
         "size": 14,
-        "background": "#5e668752",
+        "background": "#5e66873d",
         "border": {
           "color": "#6b7394",
           "width": 1

assets/themes/sulphurpool-light.json

@@ -480,8 +480,8 @@
     "code_actions_indicator": "#5e6687",
     "diff_background_deleted": "#c9492226",
     "diff_background_inserted": "#ac973926",
-    "document_highlight_read_background": "#f5f7ff1f",
-    "document_highlight_write_background": "#f5f7ff29",
+    "document_highlight_read_background": "#2027460f",
+    "document_highlight_write_background": "#2027461f",
     "error_color": "#c94922",
     "gutter_background": "#f5f7ff",
     "gutter_padding_factor": 3.5,
@@ -1328,7 +1328,7 @@
     }
   },
   "search": {
-    "match_background": "#6679cc80",
+    "match_background": "#6679cc3d",
     "tab_icon_spacing": 8,
     "tab_icon_width": 14,
     "option_button": {

styles/src/themes/base16.ts

@@ -17,7 +17,7 @@ export function createTheme(name: string, isLight: boolean, neutral: ColorToken[
   if (isLight) {
     neutral = [...neutral].reverse();
   }
-  let blend = isLight ? 0.12 : 0.32;
+  let blend = isLight ? 0.12 : 0.24;
 
   const backgroundColor = {
     100: {
@@ -125,11 +125,11 @@ export function createTheme(name: string, isLight: boolean, neutral: ColorToken[
     },
     highlight: {
       selection: player[1].selectionColor,
-      occurrence: withOpacity(neutral[0], 0.12),
-      activeOccurrence: withOpacity(neutral[0], 0.16),
+      occurrence: withOpacity(neutral[7], blend / 2),
+      activeOccurrence: withOpacity(neutral[7], blend),
       matchingBracket: backgroundColor[500].active,
-      match: withOpacity(accent.violet, 0.5),
-      activeMatch: withOpacity(accent.violet, 0.7),
+      match: withOpacity(accent.violet, blend * 2),
+      activeMatch: withOpacity(accent.violet, blend * 3),
       related: backgroundColor[500].focused,
     },
     gutter: {