Add new claymorphic component library

src/app/components/ChatItem.svelte

@@ -1,3 +1,9 @@
+<style>
+  .chat-item:hover {
+    background-color: var(--cl-bg-alt);
+  }
+</style>
+
 <script lang="ts">
   import {onMount} from "svelte"
   import {page} from "$app/stores"
@@ -5,7 +11,7 @@
   import type {TrustedEvent} from "@welshman/util"
   import {pubkey, loadMessagingRelayList} from "@welshman/app"
   import {fade} from "@lib/transition"
-  import Button from "@lib/components/Button.svelte"
+  import Button from "@lib/components2/Button.svelte"
   import ProfileName from "@app/components/ProfileName.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import ProfileCircles from "@app/components/ProfileCircles.svelte"
@@ -35,8 +41,8 @@
 
 <Button class="flex flex-col justify-start gap-1 w-full" onclick={openChat}>
   <div
-    class="cursor-pointer border-t border-solid border-base-100 px-3 py-2 transition-colors hover:bg-base-100 {props.class}"
-    class:bg-base-100={active}>
+    class="chat-item cursor-pointer cl-border-t px-3 py-2 transition-colors {props.class}"
+    class:cl-surface-alt={active}>
     <div class="flex flex-col justify-start gap-1">
       <div class="flex items-center justify-between gap-2">
         <div class="flex min-w-0 items-center gap-2">
@@ -56,18 +62,22 @@
           {/if}
         </div>
         {#if !active && $notifications.has(path)}
-          <div class="h-2 w-2 rounded-full bg-primary" transition:fade></div>
+          <div
+            class="h-2 w-2 rounded-full"
+            style="background-color: var(--cl-primary);"
+            transition:fade>
+          </div>
         {/if}
       </div>
       <p class="overflow-hidden text-ellipsis whitespace-nowrap text-sm">
-        <span class="opacity-70">
+        <span class="cl-text-muted">
           {#if props.messages[0].pubkey === $pubkey}
             You:
           {/if}
         </span>
         {props.messages[0].content}
       </p>
-      <p class="text-xs opacity-70">
+      <p class="text-xs cl-text-muted">
         {formatTimestamp(props.messages[0].created_at)}
       </p>
     </div>