Add new claymorphic component library

src/app/components/LogIn.svelte

@@ -8,11 +8,13 @@
   import Cpu from "@assets/icons/cpu-bolt.svg?dataurl"
   import Compass from "@assets/icons/compass-big.svg?dataurl"
   import Key from "@assets/icons/key.svg?dataurl"
-  import Icon from "@lib/components/Icon.svelte"
-  import Link from "@lib/components/Link.svelte"
-  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components/ModalBody.svelte"
-  import Button from "@lib/components/Button.svelte"
+  import Icon from "@lib/components2/Icon.svelte"
+  import Link from "@lib/components2/Link.svelte"
+  import Modal from "@lib/components2/Modal.svelte"
+  import ModalBody from "@lib/components2/ModalBody.svelte"
+  import Button from "@lib/components2/Button.svelte"
+  import Heading from "@lib/components2/Heading.svelte"
+  import Text from "@lib/components2/Text.svelte"
   import SignUp from "@app/components/SignUp.svelte"
   import InfoNostr from "@app/components/InfoNostr.svelte"
   import LogInBunker from "@app/components/LogInBunker.svelte"
@@ -94,16 +96,17 @@
 
 <Modal>
   <ModalBody>
-    <h1 class="heading">Log in with Nostr</h1>
-    <p class="m-auto max-w-sm text-center">
+    <Heading level={1} class="text-center">Log in with Nostr</Heading>
+    <Text class="m-auto max-w-sm text-center">
       {PLATFORM_NAME} is built using the
-      <Button class="link" onclick={() => pushModal(InfoNostr)}>nostr protocol</Button>, which
-      allows you to own your social identity.
-    </p>
+      <Button variant="ghost" class="inline cl-link" onclick={() => pushModal(InfoNostr)}
+        >nostr protocol</Button
+      >, which allows you to own your social identity.
+    </Text>
     {#if getNip07()}
-      <Button {disabled} onclick={loginWithNip07} class="btn btn-primary">
+      <Button variant="primary" block {disabled} onclick={loginWithNip07}>
         {#if loading === "nip07"}
-          <span class="loading loading-spinner mr-3"></span>
+          <span class="cl-spinner mr-3"></span>
         {:else}
           <Icon icon={Widget} />
         {/if}
@@ -111,9 +114,9 @@
       </Button>
     {/if}
     {#each signers as app}
-      <Button {disabled} class="btn btn-primary" onclick={() => loginWithNip55(app)}>
+      <Button variant="primary" block {disabled} onclick={() => loginWithNip55(app)}>
         {#if loading === "nip55"}
-          <span class="loading loading-spinner mr-3"></span>
+          <span class="cl-spinner mr-3"></span>
         {:else}
           <img src={app.iconUrl} alt={app.name} width="20" height="20" />
         {/if}
@@ -121,26 +124,27 @@
       </Button>
     {/each}
     {#if hasPomade && !hasSigner}
-      <Button {disabled} onclick={loginWithEmail} class="btn btn-primary">
+      <Button variant="primary" block {disabled} onclick={loginWithEmail}>
         <Icon icon={Letter} />
         Log in with Email
       </Button>
     {/if}
     <Button
+      variant={hasSigner || hasPomade ? "secondary" : "primary"}
+      block
       onclick={loginWithBunker}
-      {disabled}
-      class="btn {hasSigner || hasPomade ? 'btn-neutral' : 'btn-primary'}">
+      {disabled}>
       <Icon icon={Cpu} />
       Log in with Remote Signer
     </Button>
     {#if hasPomade && hasSigner}
-      <Button {disabled} onclick={loginWithEmail} class="btn">
+      <Button variant="ghost" block {disabled} onclick={loginWithEmail}>
         <Icon icon={Letter} />
         Log in with Email
       </Button>
     {/if}
     {#if !hasSigner}
-      <Button {disabled} onclick={loginWithKey} class="btn btn-neutral">
+      <Button variant="secondary" block {disabled} onclick={loginWithKey}>
         <Icon icon={Key} />
         Log in with Key
       </Button>
@@ -150,14 +154,14 @@
         external
         {disabled}
         href="https://nostrapps.com#signers"
-        class="btn {hasSigner || hasPomade ? '' : 'btn-neutral'}">
+        class="btn-cl btn-cl-block {hasSigner || hasPomade ? 'btn-cl-ghost' : 'btn-cl-secondary'}">
         <Icon icon={Compass} />
         Browse Signer Apps
       </Link>
     {/if}
-    <div class="text-sm">
+    <Text size="sm">
       Need an account?
-      <Button class="link" onclick={signUp}>Register instead</Button>
-    </div>
+      <Button variant="ghost" class="inline cl-link" onclick={signUp}>Register instead</Button>
+    </Text>
   </ModalBody>
 </Modal>