Fix tiptap styling

src/app.css

@@ -40,15 +40,14 @@
 
 :root {
   font-family: Lato;
-}
-
-[data-theme] {
   --base-100: oklch(var(--b1));
   --base-200: oklch(var(--b2));
   --base-300: oklch(var(--b3));
   --base-content: oklch(var(--bc));
   --primary: oklch(var(--p));
+  --primary-content: oklch(var(--pc));
   --secondary: oklch(var(--s));
+  --secondary-content: oklch(var(--sc));
 }
 
 .bg-alt,
@@ -239,3 +238,19 @@ emoji-picker {
   --input-font-color: var(--base-content);
   --outline-color: var(--base-100);
 }
+
+/* tiptap */
+
+.tiptap {
+  --tiptap-object-bg: var(--base-100);
+  --tiptap-object-fg: var(--base-content);
+  --tiptap-active-bg: var(--primary);
+  --tiptap-active-fg: var(--primary-content);
+}
+
+.tiptap-suggestions {
+  --tiptap-object-bg: var(--base-100);
+  --tiptap-object-fg: var(--base-content);
+  --tiptap-active-bg: var(--base-300);
+  --tiptap-active-fg: var(--base-content);
+}

src/app/components/ProfileMultiSelect.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type {SvelteComponent} from "svelte"
+  import {derived} from "svelte/store"
   import {type Instance} from "tippy.js"
   import {append, remove, uniq} from "@welshman/lib"
   import {profileSearch} from "@welshman/app"
@@ -20,6 +21,8 @@
   let popover: Instance
   let instance: SvelteComponent
 
+  const search = derived(profileSearch, $profileSearch => $profileSearch.searchValues)
+
   const selectPubkey = (pubkey: string) => {
     term = ""
     popover.hide()
@@ -76,8 +79,8 @@
     component={Suggestions}
     props={{
       term,
+      search,
       select: selectPubkey,
-      search: profileSearch,
       component: ProfileSuggestion,
       class: "rounded-box",
       style: `left: 4px; width: ${input?.clientWidth + 12}px`,