feat: overhaul search highlights 🎨

The highlights now use a shade of cyan instead of boring gray.
robertrossmann · Apr 17, 2020 · 5aebbbc · 5aebbbc
1 parent 8c03efc
commit 5aebbbc
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
diff --git a/packages/generators/mkui.mjs b/packages/generators/mkui.mjs
@@ -201,7 +201,7 @@ function mkui({ ui, code }) {
      * The Minimap shows a minified version of the current file.
      */
     'minimap.background': ui.background.panel.hex(),
-    'minimap.findMatchHighlight': `${ui.highlight.word.current.hex()}44`,
+    'minimap.findMatchHighlight': `${ui.highlight.word.matches.hex()}44`,
     'minimap.selectionHighlight': `${ui.text.primary.hex()}AA`,
     'minimap.errorHighlight': ui.problems.error.hex(),
     'minimap.warningHighlight': ui.problems.warning.hex(),
@@ -250,16 +250,16 @@ function mkui({ ui, code }) {
      * Editor Colours
      */
     'editor.background': ui.background.code.hex(),
-    'editor.findMatchBackground': `${ui.highlight.word.current.hex()}11`,
-    'editor.findMatchBorder': `${ui.highlight.word.current.hex()}44`,
-    'editor.findMatchHighlightBackground': `${ui.highlight.word.current.hex()}33`,
+    'editor.findMatchBackground': `${ui.highlight.word.matches.hex()}44`,
+    'editor.findMatchBorder': `${ui.highlight.word.matches.hex()}AA`,
+    'editor.findMatchHighlightBackground': `${ui.highlight.word.matches.hex()}33`,
     'editor.findRangeHighlightBackground': `${ui.scm.added.hex()}22`,
     'editor.foreground': ui.text.primary.hex(),
     'editor.hoverHighlightBackground': `${ui.highlight.hover.hex()}11`,
     'editor.lineHighlightBackground': `${ui.highlight.line.hex()}09`,
     'editor.selectionBackground': `${ui.highlight.selection.hex()}22`,
     'editor.selectionHighlightBackground': `${ui.highlight.selection.hex()}11`,
-    'editor.wordHighlightBackground': `${ui.highlight.word.current.hex()}11`,
+    'editor.wordHighlightBackground': `${ui.highlight.word.highlight.hex()}11`,
     'editor.wordHighlightStrongBackground': `${ui.highlight.word.source.hex()}33`,
     'editor.wordHighlightStrongBorder': `${ui.highlight.word.source.hex()}AA`,
     'editorCursor.foreground': ui.text.primary.hex(),
@@ -288,9 +288,9 @@ function mkui({ ui, code }) {
     // Overview Ruler
     'editorOverviewRuler.border': ui.border.hex(),
     'editorOverviewRuler.bracketMatchForeground': ui.text.primary.hex(),
-    'editorOverviewRuler.findMatchForeground': `${ui.highlight.word.current.hex()}66`,
-    'editorOverviewRuler.wordHighlightForeground': `${ui.highlight.word.current.hex()}66`,
-    'editorOverviewRuler.wordHighlightStrongForeground': ui.highlight.word.source.hex(),
+    'editorOverviewRuler.findMatchForeground': `${ui.highlight.word.matches.hex()}AA`,
+    'editorOverviewRuler.wordHighlightForeground': `${ui.highlight.word.matches.hex()}99`,
+    'editorOverviewRuler.wordHighlightStrongForeground': ui.highlight.word.matches.hex(),
     'editorOverviewRuler.modifiedForeground': ui.scm.modified.hex(),
     'editorOverviewRuler.addedForeground': ui.scm.added.hex(),
     'editorOverviewRuler.deletedForeground': ui.scm.deleted.hex(),
@@ -358,11 +358,10 @@ function mkui({ ui, code }) {
     'peekViewResult.fileForeground': ui.text.primary.hex(),
     'peekViewTitleLabel.foreground': ui.text.primary.hex(),
     'peekViewEditorGutter.background': ui.background.panel.hex(),
-    'peekViewEditor.matchHighlightBackground': `${ui.highlight.word.current.hex()}11`,
-    'peekViewEditor.matchHighlightBorder': `${ui.highlight.word.current.hex()}44`,
+    'peekViewEditor.matchHighlightBackground': `${ui.highlight.word.matches.hex()}22`,
     'peekViewResult.background': ui.background.panel.hex(),
     'peekViewResult.lineForeground': ui.text.primary.hex(),
-    'peekViewResult.matchHighlightBackground': `${ui.highlight.word.current.hex()}44`,
+    'peekViewResult.matchHighlightBackground': `${ui.highlight.word.matches.hex()}99`,
     'peekViewResult.selectionBackground': `${ui.accent.hex()}99`,
     'peekViewResult.selectionForeground': ui.text.primary.hex(),
     'peekViewTitle.background': ui.background.panel.hex(),

diff --git a/src/themes/bright/ui.mjs b/src/themes/bright/ui.mjs
@@ -39,7 +39,8 @@ const scm = {
 const highlight = {
   line: text.primary,
   word: {
-    current: text.primary,
+    highlight: text.primary,
+    matches: normal.cyan,
     source: accent,
   },
   selection: text.primary,

diff --git a/src/themes/dark/ui.mjs b/src/themes/dark/ui.mjs
@@ -39,7 +39,8 @@ const scm = {
 const highlight = {
   line: text.primary,
   word: {
-    current: text.primary,
+    highlight: text.primary,
+    matches: normal.cyan,
     source: accent,
   },
   selection: text.primary,