window.nostr.js 0.1.4 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "window.nostr.js",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "type": "module",
   "main": "dist/window.nostr.js",
   "devDependencies": {

package/src/App.svelte

@@ -25,14 +25,23 @@
   import Spinner from './Spinner.svelte'
 
   const mobileMode = mediaQueryStore('only screen and (max-width: 640px)')
+  const localStorageKeys = {
+    ORIGIN: 'wnj:origin',
+    CLIENT_SECRET: 'wnj:clientSecret',
+    Y_POS: 'wnj:ypos',
+    CALLBACK_TOKEN: 'wnj:callbackToken',
+    BUNKER_POINTER: 'wnj:bunkerPointer'
+  }
 
   let myself: HTMLDivElement
   export let accent: string
   export let position: 'top' | 'bottom' = 'top'
   $: origin = $mobileMode
     ? 'bottom'
-    : (localStorage.getItem('wnj:origin') as 'top' | 'bottom' | null) ||
-      position
+    : (localStorage.getItem(localStorageKeys.ORIGIN) as
+        | 'top'
+        | 'bottom'
+        | null) || position
 
   const win = window as any
   const pool = new SimplePool()
@@ -42,12 +51,15 @@
   let nameInputValue: string
   let chosenProvider: BunkerProfile | undefined
   let clientSecret: Uint8Array
-  const local = localStorage.getItem('wnj:clientSecret')
+  const local = localStorage.getItem(localStorageKeys.CLIENT_SECRET)
   if (local) {
     clientSecret = hexToBytes(local)
   } else {
     clientSecret = generateSecretKey()
-    localStorage.setItem('wnj:clientSecret', bytesToHex(clientSecret))
+    localStorage.setItem(
+      localStorageKeys.CLIENT_SECRET,
+      bytesToHex(clientSecret)
+    )
   }
 
   let state: 'opened' | 'closed' | 'justopened' | 'justclosed' = 'closed'
@@ -57,9 +69,13 @@
   let bunker: Promise<BunkerSigner>
   let connecting: boolean
   let connected: boolean
+  let showAuth: string | null = null
+  let showLogin: string | null = null
   let takingTooLong = false
   let creating: boolean
+  let awaitingCreation: boolean
   let errorMessage: string
+  let showInfo = false
   let identity: null | {
     pubkey: string
     npub: string
@@ -78,7 +94,7 @@
   export let right = 20
   $: ypos = $mobileMode
     ? BASE_YPOS
-    : parseInt(localStorage.getItem('wnj:ypos') || '0') || BASE_YPOS
+    : parseInt(localStorage.getItem(localStorageKeys.Y_POS) || '0') || BASE_YPOS
   let dragStarted = false
   let hasMoved = false
   let insidePosition: number
@@ -88,10 +104,10 @@
   $: opened = state === 'justopened' || state === 'opened'
 
   $: movingStyle = hasMoved
-    ? 'tw-cursor-grabbing tw-outline-dashed tw-outline-' +
+    ? 'cursor-grabbing outline-dashed outline-' +
       accent +
-      '-500 tw-outline-1 tw-outline-offset-4'
-    : 'tw-outline-none'
+      '-500 outline-1 outline-offset-4'
+    : 'outline-none'
 
   $: bunkerInputValueIsGood =
     bunkerInputValue &&
@@ -101,10 +117,18 @@
   const bunkerSignerParams: BunkerSignerParams = {
     pool,
     onauth(url: string) {
-      window.open(url, 'window.nostr', `width=600,height=800,popup=yes`)
+      if (creating) {
+        showAuth = url
+      } else {
+        showLogin = url
+      }
     }
   }
 
+  function openAuthURLPopup(url: string | null): Window | null {
+    return window.open(url!, 'window.nostr', `width=600,height=800,popup=yes`)
+  }
+
   const delayedUpdateState = debounce(() => {
     switch (state) {
       case 'justopened':
@@ -182,13 +206,14 @@
   }
 
   onMount(() => {
-    let data = localStorage.getItem('wnj:bunkerPointer')
-    if (data) {
-      bunkerPointer = JSON.parse(data)
-      // we have a pointer, which means we can get the public key right away
-      // but we will only try to connect when any other method is called on window.nostr
-
-      identify()
+    if (!bunkerPointer) {
+      let data = localStorage.getItem(localStorageKeys.BUNKER_POINTER)
+      if (data) {
+        bunkerPointer = JSON.parse(data)
+        // we have a pointer, which means we can get the public key right away
+        // but we will only try to connect when any other method is called on window.nostr
+        identify()
+      }
     }
 
     if (win.nostr && !win.nostr.isWnj) {
@@ -234,6 +259,18 @@
   function handleCloseModal(ev: MouseEvent) {
     close()
     creating = false
+    showAuth = null
+    showLogin = null
+    ev.stopPropagation()
+  }
+
+  function handleShowInfo(ev: MouseEvent) {
+    showInfo = true
+    ev.stopPropagation()
+  }
+
+  function handleCloseInfo(ev: MouseEvent) {
+    showInfo = false
     ev.stopPropagation()
   }
 
@@ -269,7 +306,7 @@
 
   async function handleDisconnect(ev: MouseEvent) {
     ev.preventDefault()
-    localStorage.removeItem('wnj:bunkerPointer')
+    localStorage.removeItem(localStorageKeys.BUNKER_POINTER)
     reset()
   }
 
@@ -294,12 +331,14 @@
     ev.preventDefault()
     if (!chosenProvider) return
 
+    awaitingCreation = true
     let bunker = await createAccount(
       chosenProvider,
       bunkerSignerParams,
       nameInput.value,
       chosenProvider.domain
     )
+    awaitingCreation = false
 
     open()
     creating = false
@@ -338,7 +377,10 @@
     try {
       await b.connect()
       connected = true
-      localStorage.setItem('wnj:bunkerPointer', JSON.stringify(bunkerPointer))
+      localStorage.setItem(
+        localStorageKeys.BUNKER_POINTER,
+        JSON.stringify(bunkerPointer)
+      )
       close()
       resolveBunker(b)
     } catch (err: any) {
@@ -348,11 +390,13 @@
       clearTimeout(connectionTimeout)
       connecting = false
       takingTooLong = false
+      showAuth = null
+      showLogin = null
     }
   }
 
-  function identify() {
-    let pubkey = bunkerPointer.pubkey
+  function identify(onFirstMetadata: (() => void) | null = null) {
+    let pubkey = bunkerPointer!.pubkey
 
     identity = {
       pubkey: pubkey,
@@ -375,6 +419,8 @@
             identity!.event = evt
             identity!.name = name
             identity!.picture = picture
+            onFirstMetadata?.()
+            onFirstMetadata = null
           } catch (err) {
             /***/
           }
@@ -436,8 +482,8 @@
         ypos = BASE_YPOS
       }
 
-      localStorage.setItem('wnj:origin', origin)
-      localStorage.setItem('wnj:ypos', ypos.toString())
+      localStorage.setItem(localStorageKeys.ORIGIN, origin)
+      localStorage.setItem(localStorageKeys.Y_POS, ypos.toString())
     }
   }
 </script>
@@ -450,8 +496,8 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class="tw-text-white tw-font-sans draggable tw-animate-fadein"
-  class:tw-cursor-pointer={!identity && !opened}
+  class="draggable animate-fadein font-sans text-white"
+  class:cursor-pointer={!identity && !opened}
   style="position: fixed; {opened && $mobileMode
     ? 'width: 100%;'
     : ''}; right: {opened && $mobileMode
@@ -465,23 +511,23 @@
   <!-- Close status ################### -->
   {#if !opened}
     <div
-      class="tw-px-4 tw-py-2 tw-bg-{accent}-700 hover:tw-bg-{accent}-800 tw-rounded tw-shadow-[0_0px_10px_0px_rgba(0,0,0,0.3)] tw-transition-all tw-duration-200 {movingStyle}"
+      class="rounded px-4 py-2 shadow-[0_0px_10px_0px_rgba(0,0,0,0.3)] transition-all duration-200 bg-{accent}-700 hover:bg-{accent}-800 {movingStyle}"
     >
       <!-- Connecting view ################### -->
       {#if connecting}
-        <div class="tw-flex tw-items-center">
+        <div class="flex items-center">
           Connecting to bunker
           <Spinner />
         </div>
       {:else if !identity}
         Connect with Nostr
       {:else}
-        <div class="tw-flex tw-items-center">
+        <div class="flex items-center">
           {#if identity.picture}
             <img
               src={identity.picture}
               alt=""
-              class="tw-w-5 tw-h-5 tw-rounded-full tw-mr-2"
+              class="mr-2 h-5 w-5 rounded-full"
             />
           {:else}
             ☉
@@ -495,84 +541,148 @@
     <!-- Open status ################### -->
   {:else}
     <div
-      class="sm:tw-w-80 tw-px-6 tw-py-8 tw-bg-{accent}-700 tw-rounded-md tw-shadow-[0_0px_30px_0px_rgba(0,0,0,0.6)] tw-transition-all tw-animate-show {movingStyle}"
+      class="animate-show rounded-md bg-gradient-to-b px-8 py-8 shadow-[0_0px_30px_0px_rgba(0,0,0,0.6)] transition-all sm:w-96 from-{accent}-900 to-{accent}-700 {movingStyle}"
     >
       <button
-        on:click={handleCloseModal}
-        class="tw-absolute tw-top-0 tw-right-0.5 tw-bg-transparent tw-border-none tw-cursor-pointer tw-text-{accent}-950 tw-text-3xl"
+        on:click={showInfo ? handleCloseInfo : handleCloseModal}
+        class="absolute right-2 top-0 cursor-pointer bg-transparent text-3xl text-{accent}-600"
         >⤫</button
       >
-      <!-- Create account view ################### -->
-      {#if creating}
-        <div class="tw-text-lg tw-text-center">Create a Nostr account</div>
-        <form class="tw-mt-4 tw-mb-1" on:submit={handleCreate}>
-          <div class="tw-flex items-center">
+
+      {#if !showInfo && !showAuth && !showLogin}
+        <button
+          on:click={handleShowInfo}
+          class="absolute bottom-1 right-3 cursor-pointer bg-transparent text-xl text-{accent}-600"
+          >?</button
+        >
+      {/if}
+
+      {#if showAuth}
+        <div class="m-auto w-full">
+          <div class="text-center text-lg">Create a Nostr account</div>
+          <div class="mt-4 text-center text-sm leading-4">
+            Now you a new window will bring you to <strong>{new URL(showAuth).host}</strong> where the account creation will take place. If nothing happens check that if your browser is blocking popups, pleaase.<br/>
+            After that you will be returned to this page.
+          </div>
+          <button
+            class="mt-4 block w-full cursor-pointer rounded border-0 px-2 py-1 text-lg text-white disabled:cursor-default disabled:bg-neutral-400 disabled:text-neutral-200 bg-{accent}-900 hover:bg-{accent}-950"
+            on:click={() => openAuthURLPopup(showAuth)}>
+            Start account creation »
+          </button>
+        </div>
+
+      {:else if showLogin}
+        <div class="m-auto w-full">
+          <div class="text-center text-lg">Login into a Nostr account</div>
+          <div class="mt-4 text-center text-sm leading-4">
+            Now you a new window will bring you to <strong>{new URL(showLogin).host}</strong> where you can login and approve the permissions. If nothing happens check that if your browser is blocking popups, pleaase.<br/>
+            After that you will be returned to this page.
+          </div>
+          <button
+            class="mt-4 block w-full cursor-pointer rounded border-0 px-2 py-1 text-lg text-white disabled:cursor-default disabled:bg-neutral-400 disabled:text-neutral-200 bg-{accent}-900 hover:bg-{accent}-950"
+            on:click={() => openAuthURLPopup(showLogin)}>
+            Login now »
+          </button>
+        </div>
+
+        <!-- Show info ################### -->
+      {:else if showInfo}
+        <div class="text-center text-lg">What is that?</div>
+        <div class="text-base leading-5">
+          <p class="mb mt-4">
+            This widget is created with <i>window.nostr.js</i>, a small script
+            you can drop in any page that already uses NIP-07 and make it also
+            work with NIP-46 automatically when the user doesn't have an
+            extension installed.
+            <br />
+            It adds a small floating button on the side of the window that users
+            can use to create Nostr accuonts or connect to their NIP-46 bunkers.
+          </p>
+          <p class="mt-4">
+            This tool is opensource, get the code from the <a
+              target="_blank"
+              class="underline"
+              href="https://github.com/fiatjaf/window.nostr.js"
+              >project's page</a
+            >.
+          </p>
+          <p class="mt-4">
+            You don't know what Nostr is?
+            <a target="_blank" class="underline" href="https://www.nostr.com"
+              >Learn more</a
+            >.
+          </p>
+        </div>
+
+        <!-- Create account view ################### -->
+      {:else if creating}
+        <div class="text-center text-lg">Create a Nostr account</div>
+        <form class="mb-1 mt-4" on:submit={handleCreate}>
+          <div class="flex flex-row">
             <!-- svelte-ignore a11y-autofocus -->
             <input
-              class="tw-box-border tw-w-40 tw-px-2 tw-py-1 tw-rounded tw-text-lg tw-border-none tw-outline-none"
+              class="box-border w-40 rounded px-2 py-1 text-lg text-neutral-800 outline-none"
               placeholder="bob"
               bind:this={nameInput}
               bind:value={nameInputValue}
               on:input={checkNameInput}
               autofocus
+              autocapitalize="none"
             />
-            <div class="tw-mx-2 tw-text-2xl">@</div>
+            <div class="mx-2 text-2xl">@</div>
             <select
-              class="tw-w-full tw-box-border tw-px-2 tw-py-1 tw-rounded tw-text-lg tw-border-none tw-outline-none"
+              class="box-border w-full rounded px-2 py-1 text-lg text-neutral-800 outline-none"
               bind:value={chosenProvider}
             >
               {#each providers as prov}
                 <option
                   label={prov.domain}
                   value={prov}
-                  class="tw-px-2 tw-py-1 tw-text-lg"
+                  class="px-2 py-1 text-lg"
                 />
               {/each}
             </select>
           </div>
-          <div class="tw-text-sm tw-text-center tw-mt-4 tw-leading-4">
-            A window from the selected provider will pop up to finalize the
-            creation; if it doesn't display check if the browser is blocking it
-          </div>
           <button
-            class="tw-block tw-w-full tw-mt-4 tw-px-2 tw-py-1 tw-text-lg tw-rounded tw-border-0 tw-bg-{accent}-900 hover:tw-bg-{accent}-950 tw-hover:bg-indigo-900 tw-cursor-pointer tw-text-white disabled:tw-bg-neutral-400 disabled:tw-text-neutral-200 disabled:tw-cursor-default"
-            disabled={!chosenProvider || !nameInputValue}
+            class="mt-4 block w-full cursor-pointer rounded border-0 px-2 py-1 text-lg text-white disabled:cursor-default disabled:bg-neutral-400 disabled:text-neutral-200 bg-{accent}-900 hover:bg-{accent}-950"
+            disabled={!chosenProvider || !nameInputValue || awaitingCreation}
           >
-            Create »
+            Continue »
           </button>
         </form>
-        <div class="tw-mt-6 tw-text-center tw-text-sm tw-leading-3">
+        <div class="mt-6 text-center text-sm leading-3">
           Do you already have a Nostr address?<br />
           <button
-            class="tw-border-0 tw-bg-transparent tw-text-white tw-cursor-pointer tw-underline tw-text-sm"
+            class="cursor-pointer border-0 bg-transparent text-sm text-white underline"
             on:click={handleOpenLogin}>Login now</button
           >
         </div>
 
         <!-- Login view ################### -->
       {:else if !identity}
-        <div class="tw-text-lg tw-text-center">
+        <div class="text-center text-lg">
           How do you want to connect to Nostr?
         </div>
-        <form class="flex tw-mt-4 tw-mb-1" on:submit={handleConnect}>
+        <form class="mb-1 mt-4 flex flex-col" on:submit={handleConnect}>
           <!-- svelte-ignore a11y-autofocus -->
           <input
-            class="tw-box-border tw-w-full tw-px-2 tw-py-1 tw-rounded tw-text-lg tw-border-none tw-outline-none"
+            class="box-border w-full rounded px-2 py-1 text-lg text-neutral-800 outline-none"
             placeholder="user@provider or bunker://..."
             bind:this={bunkerInput}
             bind:value={bunkerInputValue}
             autofocus
             disabled={connecting}
+            autocapitalize="none"
           />
           {#if errorMessage}
             <div
-              class="tw-my-2 tw-p-2 tw-text-sm tw-leading-4 tw-text-red-400 tw-bg-yellow-100 tw-rounded"
+              class="my-2 rounded bg-yellow-100 p-2 text-center text-sm leading-4 text-red-400"
             >
               {errorMessage}
             </div>
           {/if}
           <button
-            class="tw-flex tw-w-full tw-mt-4 tw-px-2 tw-py-1 tw-text-lg tw-rounded tw-border-0 tw-bg-{accent}-900 hover:tw-bg-{accent}-950 tw-hover:bg-indigo-900 tw-cursor-pointer tw-text-white disabled:tw-bg-neutral-400 disabled:tw-text-neutral-200 disabled:tw-cursor-default tw-items-center tw-justify-center"
+            class="mt-4 flex w-full cursor-pointer items-center justify-center rounded border-0 px-2 py-1 text-lg text-white disabled:cursor-default disabled:bg-neutral-400 disabled:text-neutral-200 bg-{accent}-900 hover:bg-{accent}-950"
             disabled={!bunkerInputValueIsGood || connecting}
           >
             {#if connecting}
@@ -583,62 +693,60 @@
             {/if}
           </button>
           {#if connecting && takingTooLong}
-            <div class="tw-mt-6 tw-text-center tw-text-sm tw-leading-3">
+            <div class="mt-6 text-center text-sm leading-3">
               Waiting too much?
               <button
-                class="tw-border-0 tw-bg-transparent tw-text-white tw-cursor-pointer tw-underline tw-text-sm"
+                class="cursor-pointer border-0 bg-transparent text-sm text-white underline"
                 on:click={handleAbortConnection}>Cancel the connection</button
               >
             </div>
           {/if}
         </form>
         {#if !connecting}
-          <div class="tw-mt-6 tw-text-center tw-text-sm tw-leading-3">
+          <div class="mt-6 text-center text-sm leading-3">
             Do you need a Nostr account?<br />
             <button
-              class="tw-border-0 tw-bg-transparent tw-text-white tw-cursor-pointer tw-underline tw-text-sm"
+              class="cursor-pointer border-0 bg-transparent text-sm text-white underline"
               on:click={handleOpenCreate}>Sign up now</button
             >
           </div>
         {/if}
 
         <!-- Connected view ################### -->
-      {:else if identity}
-        <div class="tw-text-center">
-          <div class="tw-text-sm tw-mb-4">You are connected to Nostr as</div>
+      {:else}
+        <div class="text-center">
+          <div class="mb-4 text-sm">You are connected to Nostr as</div>
           <a
             target="_blank"
             href={'https://nosta.me/' + identity.npub}
-            class="tw-text-white tw-no-underline tw-group"
+            class="group text-white no-underline"
           >
             {#if identity.picture || identity.name}
-              <div
-                class="tw-flex tw-items-center tw-justify-center tw-gap-2 tw-mb-2"
-              >
+              <div class="mb-2 flex items-center justify-center gap-2">
                 {#if identity.picture}
                   <img
                     src={identity.picture}
                     alt=""
-                    class="tw-w-10 tw-h-10 tw-rounded-full tw-border-solid tw-border-2 tw-border-transparent group-hover:tw-border-{accent}-100"
+                    class="h-10 w-10 rounded-full border-2 border-solid border-transparent group-hover:border-{accent}-100"
                   />
                 {/if}
                 {#if identity.name}
                   <div
-                    class="tw-text-3xl group-hover:tw-underline tw-decoration-2 tw-underline-offset-4"
+                    class="text-3xl decoration-2 underline-offset-4 group-hover:underline"
                   >
                     {identity.name}
                   </div>
                 {/if}
               </div>
             {/if}
-            <div class="tw-block tw-break-all">{identity.npub}</div>
+            <div class="block break-all">{identity.npub}</div>
           </a>
         </div>
         <button
-          class="tw-block tw-w-full tw-my-2 tw-mt-6 tw-px-2 tw-py-1 tw-text-lg tw-rounded tw-border-0 tw-bg-{accent}-900 hover:tw-bg-{accent}-950 tw-hover:bg-indigo-900 tw-cursor-pointer tw-text-white"
+          class="my-2 mt-6 block w-full cursor-pointer rounded border-0 px-2 py-1 text-lg text-white bg-{accent}-900 hover:bg-{accent}-950"
           on:click={handleDisconnect}>Disconnect</button
         >
-        <div class="tw-block tw-break-all tw-mt-6 tw-text-center tw-text-sm">
+        <div class="mt-6 block break-all text-center text-sm">
           This webpage is using the public key:<br />
           {getPublicKey(clientSecret)}
         </div>
@@ -646,13 +754,3 @@
     </div>
   {/if}
 </div>
-
-<!-- hack to preload tailwind colors:
-tw-bg-cyan-700 tw-bg-cyan-800 tw-bg-cyan-900 tw-bg-cyan-950 tw-text-cyan-950 tw-outline-cyan-500
-tw-bg-green-700 tw-bg-green-800 tw-bg-green-900 tw-bg-green-950 tw-text-green-950 tw-outline-green-500
-tw-bg-purple-700 tw-bg-purple-800 tw-bg-purple-900 tw-bg-purple-950 tw-text-purple-950 tw-outline-purple-500
-tw-bg-red-700 tw-bg-red-800 tw-bg-red-900 tw-bg-red-950 tw-text-red-950 tw-outline-red-500
-tw-bg-orange-700 tw-bg-orange-800 tw-bg-orange-900 tw-bg-orange-950 tw-text-orange-950 tw-outline-orange-500
-tw-bg-neutral-700 tw-bg-neutral-800 tw-bg-neutral-900 tw-bg-neutral-950 tw-text-neutral-950 tw-outline-neutral-500
-tw-bg-stone-700 tw-bg-stone-800 tw-bg-stone-900 tw-bg-stone-950 tw-text-stone-950 tw-outline-stone-500
--->

package/src/Spinner.svelte

@@ -1,11 +1,11 @@
 <svg
-  class="tw-animate-spin tw-ml-2 tw-h-5 tw-w-5 tw-text-white"
+  class="ml-2 h-5 w-5 animate-spin text-white"
   xmlns="http://www.w3.org/2000/svg"
   fill="none"
   viewBox="0 0 24 24"
 >
   <circle
-    class="tw-opacity-25"
+    class="opacity-25"
     cx="12"
     cy="12"
     r="10"
@@ -13,7 +13,7 @@
     stroke-width="4"
   ></circle>
   <path
-    class="tw-opacity-75"
+    class="opacity-75"
     fill="currentColor"
     d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
   ></path>

package/src/app.css

@@ -1,2 +1,3 @@
+@tailwind base;
 @tailwind components;
 @tailwind utilities;

package/tailwind.config.js

@@ -21,5 +21,14 @@ export default {
     }
   },
   plugins: [],
-  prefix: 'tw-'
+  prefix: '',
+  safelist: [
+    'bg-cyan-700', 'hover:bg-cyan-700', 'bg-cyan-800', 'hover:bg-cyan-800', 'bg-cyan-900', 'hover:bg-cyan-900', 'bg-cyan-950', 'hover:bg-cyan-950', 'text-cyan-600', 'outline-cyan-500', 'from-cyan-900', 'to-cyan-700',
+    'bg-green-700', 'hover:bg-green-700', 'bg-green-800', 'hover:bg-green-800', 'bg-green-900', 'hover:bg-green-900', 'bg-green-950', 'hover:bg-green-950', 'text-green-600', 'outline-green-500', 'from-green-900', 'to-green-700',
+    'bg-purple-700', 'hover:bg-purple-700', 'bg-purple-800', 'hover:bg-purple-800', 'bg-purple-900', 'hover:bg-purple-900', 'bg-purple-950', 'hover:bg-purple-950', 'text-purple-600', 'outline-purple-500', 'from-purple-900', 'to-purple-700',
+    'bg-red-700', 'hover:bg-red-700', 'bg-red-800', 'hover:bg-red-800', 'bg-red-900', 'hover:bg-red-900', 'bg-red-950', 'hover:bg-red-950', 'text-red-600', 'outline-red-500', 'from-red-900', 'to-red-700',
+    'bg-orange-700', 'hover:bg-orange-700', 'bg-orange-800', 'hover:bg-orange-800', 'bg-orange-900', 'hover:bg-orange-900', 'bg-orange-950', 'hover:bg-orange-950', 'text-orange-600', 'outline-orange-500', 'from-orange-900', 'to-orange-700',
+    'bg-neutral-700', 'hover:bg-neutral-700', 'bg-neutral-800', 'hover:bg-neutral-800', 'bg-neutral-900', 'hover:bg-neutral-900', 'bg-neutral-950', 'hover:bg-neutral-950', 'text-neutral-600', 'outline-neutral-500', 'from-neutral-900', 'to-neutral-700',
+    'bg-stone-700', 'hover:bg-stone-700', 'bg-stone-800', 'hover:bg-stone-800', 'bg-stone-900', 'hover:bg-stone-900', 'bg-stone-950', 'hover:bg-stone-950', 'text-stone-600', 'outline-stone-500', 'from-stone-900', 'to-stone-700',
+  ]
 }