Update search match highlight and occurrence style

Nate Butler created 3 years ago

Change summary

styles/src/styleTree/editor.ts | 8 ++++----
styles/src/styleTree/search.ts | 6 ++++--
2 files changed, 8 insertions(+), 6 deletions(-)

Detailed changes

styles/src/styleTree/editor.ts

@@ -152,10 +152,10 @@ export default function editor(colorScheme: ColorScheme) {
       widthEm: 0.16,
       cornerRadius: 0.05,
     },
-    documentHighlightReadBackground: colorScheme.ramps
-      .neutral(0.5)
-      .alpha(0.2)
-      .hex(), // TODO: This was blend
+    /** Highlights matching occurences of what is under the cursor
+     * as well as matched brackets
+     */
+    documentHighlightReadBackground: withOpacity(foreground(layer, "accent"), 0.1),
     documentHighlightWriteBackground: colorScheme.ramps
       .neutral(0.5)
       .alpha(0.4)

styles/src/styleTree/search.ts

@@ -1,5 +1,6 @@
 import { ColorScheme } from "../themes/common/colorScheme";
-import { background, border, text } from "./components";
+import { withOpacity } from "../utils/color";
+import { background, border, foreground, text } from "./components";
 
 export default function search(colorScheme: ColorScheme) {
   let layer = colorScheme.highest;
@@ -26,7 +27,8 @@ export default function search(colorScheme: ColorScheme) {
   };
 
   return {
-    matchBackground: background(layer), // theme.editor.highlight.match,
+    // TODO: Add an activeMatchBackground on the rust side to differenciate between active and inactive
+    matchBackground: withOpacity(foreground(layer, "accent"), 0.4),
     tabIconSpacing: 8,
     tabIconWidth: 14,
     optionButton: {