Merge pull request #48 from ampled/fix/text-search-highlight-fg-color

Text highlighting: customization and plain theme readability

Author: ampled

src/lib/Wrapper.svelte

@@ -233,8 +233,8 @@
 </div>
 
 <style>
-  @import './themes.css';
   @import './vars.css';
+  @import './themes.css';
 
   @keyframes markback {
     from {

src/lib/components/Highlight.svelte

@@ -85,17 +85,29 @@
 <style>
   .highlight {
     &.chunk {
+      outline: var(--_text-search-highlight-outline);
+      border-top: var(--_text-search-highlight-border-top);
+      border-right: var(--_text-search-highlight-border-right);
+      border-bottom: var(--_text-search-highlight-border-bottom);
+      border-left: var(--_text-search-highlight-border-left);
       background-color: var(--_text-search-highlight-color);
-      color: var(--_background-color);
+      color: var(--_text-search-highlight-fg-color);
+      text-decoration: var(--_text-search-highlight-decoration);
     }
 
     &.alt-soft {
       text-decoration-color: var(--_text-search-highlight-color);
     }
 
     &.alt-full {
+      outline: var(--_text-search-highlight-outline);
+      border-top: var(--_text-search-highlight-border-top);
+      border-right: var(--_text-search-highlight-border-right);
+      border-bottom: var(--_text-search-highlight-border-bottom);
+      border-left: var(--_text-search-highlight-border-left);
       background-color: var(--_text-search-highlight-color);
-      color: var(--_background-color) !important;
+      color: var(--_text-search-highlight-fg-color) !important;
+      text-decoration: var(--_text-search-highlight-decoration);
     }
   }
 

src/lib/themes.css

@@ -52,6 +52,10 @@
   --base0D: color-mix(in srgb, currentColor, cyan 30%);
   --base0E: color-mix(in srgb, currentColor, rgb(255, 0, 255) 40%);
   --base0F: currentColor;
+  --_text-search-highlight-color: var(--text-search-highlight-color, yellow);
+  --_text-search-highlight-fg-color: var(--text-search-highlight-fg-color, black);
+  --_text-search-highlight-outline: var(--text-search-highlight-outline, 1px solid black);
+  --_text-search-highlight-decoration: var(--text-search-highlight-decoration, underline black);
 }
 
 .stereo {

src/lib/vars.css

@@ -18,7 +18,6 @@
 
   --_hover-color: var(--hover-color, var(--base01));
   --_text-selection-background: var(--text-selection-background, var(--base02));
-  --_text-search-highlight-color: var(--text-search-highlight-color, var(--base0A));
   --_length-color: var(--length-color, var(--base03));
   --_bullet-color: var(--bullet-color, var(--base03));
   --_comment-color: var(--comment-color, var(--base03));
@@ -102,4 +101,14 @@
 
   /* easing */
   --_back-out: cubic-bezier(0.18, 0.89, 0.47, 1.55);
+
+  /** search */
+  --_text-search-highlight-color: var(var(--text-search-highlight-color, var(--base0A)));
+  --_text-search-highlight-fg-color: var(--text-search-highlight-fg-color, var(--base01));
+  --_text-search-highlight-border-top: var(--text-search-highlight-border-top, none);
+  --_text-search-highlight-border-bottom: var(--text-search-highlight-border-bottom, none);
+  --_text-search-highlight-border-left: var(--text-search-highlight-border-left, none);
+  --_text-search-highlight-border-right: var(--text-search-highlight-border-right, none);
+  --_text-search-highlight-outline: var(--text-search-highlight-outline, none);
+  --_text-search-highlight-decoration: var(--text-search-highlight-decoration, none);
 }

src/routes/(app)/testing/plain/+page.svelte

@@ -2,12 +2,35 @@
   import AllTypes from '$doclib/examples/AllTypes.svelte'
 
   let color = $state('#ffffff')
+
+  let overrides = $state({
+    background: '#000000',
+    fg: '#FFFFFF',
+  })
+
   // let backgroundColor = $state('transparent')
 </script>
 
-<input type="color" bind:value={color} />
+<div class="flex">
+  <label>
+    text color
+    <input type="color" bind:value={color} />
+  </label>
+  <label>
+    bg
+    <input type="color" bind:value={overrides.background} />
+  </label>
+  <label>
+    fg
+    <input type="color" bind:value={overrides.fg} />
+  </label>
+</div>
 <!-- <input type="color" bind:value={backgroundColor} /> -->
 
 <div style="color: {color};padding: 2em;">
   <AllTypes theme="plain" />
 </div>
+
+--text-search-highlight-color="hotpink" --text-search-highlight-fg-color="black"
+--text-search-highlight-decoration="underline dotted black" --text-search-highlight-border="1px
+dotted green"

src/routes/(app)/theming/vars/vars-defaults.ts

@@ -29,6 +29,13 @@ export default [
   ['--hover-color', '--base01'],
   ['--text-selection-background', '--base02'],
   ['--text-search-highlight-color', '--base0A'],
+  ['--text-search-highlight-fg-color', '--base01'],
+  ['--text-search-highlight-border-top', 'none'],
+  ['--text-search-highlight-border-bottom', 'none'],
+  ['--text-search-highlight-border-left', 'none'],
+  ['--text-search-highlight-border-right', 'none'],
+  ['--text-search-highlight-outline', 'none'],
+  ['--text-search-highlight-decoration', 'none'],
   ['--indent-color', '--base03'],
   ['--indent', '0.75em'],
   ['--indent-compact', '0.5em'],