Add new claymorphic component library

src/app/components/ChatComposeParent.svelte

@@ -3,8 +3,8 @@
   import {displayProfileByPubkey} from "@welshman/app"
   import {slide} from "@lib/transition"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
-  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
+  import Icon from "@lib/components2/Icon.svelte"
+  import Button from "@lib/components2/Button.svelte"
   import NoteContentMinimal from "@app/components/NoteContentMinimal.svelte"
 
   const {
@@ -19,9 +19,10 @@
 </script>
 
 <div
-  class="relative border-l-2 border-solid border-primary bg-base-300 px-2 py-1 pr-8"
+  class="relative border-l-2 border-solid px-2 py-1 pr-8 cl-surface-alt"
+  style="border-left-color: var(--cl-primary);"
   transition:slide>
-  <p class="text-xs text-primary">{verb} @{displayProfileByPubkey(event.pubkey)}</p>
+  <p class="text-xs cl-text-primary">{verb} @{displayProfileByPubkey(event.pubkey)}</p>
   {#key event.id}
     <NoteContentMinimal trimParent {event} />
   {/key}