Merge pull request #9 from argentlabs/fix/tailwind-css

fix: add prefix to tailwind css classes to avoid conflicts with dapps
argentlabs · Oct 10, 2023 · 464edfe · 464edfe
2 parents ec79c40 + fd829c7
commit 464edfe
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 25 deletions.
diff --git a/src/modal/ConnectorButton.svelte b/src/modal/ConnectorButton.svelte
@@ -14,11 +14,15 @@
     href={wallet.download}
     target="_blank"
     rel="noopener noreferrer"
-    class="rounded-md focus:outline-none focus:ring-2 focus:ring-neutral-200 dark:focus:ring-neutral-700 transition-colors"
+    class={`starknetkit-rounded-md focus:starknetkit-outline-none  focus:starknetkit-ring-2 
+    focus:starknetkit-ring-neutral-200  dark:focus:starknetkit-ring-neutral-700 starknetkit-transition-colors`}
   >
     <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
     <li
-      class="flex flex-row-reverse justify-between items-center p-3 rounded-md cursor-pointer shadow-list-item dark:shadow-none dark:bg-neutral-800 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-700"
+      class={`starknetkit-flex starknetkit-flex-row-reverse starknetkit-justify-between starknetkit-items-center 
+              starknetkit-p-3 starknetkit-rounded-md starknetkit-cursor-pointer starknetkit-shadow-list-item 
+              dark:starknetkit-shadow-none dark:starknetkit-bg-neutral-800 dark:starknetkit-text-white 
+            hover:starknetkit-bg-neutral-100 dark:hover:starknetkit-bg-neutral-700`}
       on:click={() => {
         cb(null)
       }}
@@ -29,16 +33,26 @@
       }}
     >
       <span class="w-8 h-8" />
-      <p class="font-semibold text-base">
+      <p class="starknetkit-font-semibold starknetkit-text-base starknetkit-p">
         Install {wallet.name}
       </p>
-      <img alt={wallet.name} src={wallet.icon} class="w-8 h-8 rounded-full" />
+      <img
+        alt={wallet.name}
+        src={wallet.icon}
+        class="starknetkit-w-8 starknetkit-h-8 starknetkit-rounded-full"
+      />
     </li>
   </a>
 {:else}
   <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
   <li
-    class="flex flex-row-reverse justify-between items-center p-3 rounded-md cursor-pointer shadow-list-item dark:shadow-none dark:bg-neutral-800 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-200 dark:focus:ring-neutral-700 transition-colors"
+    class={`starknetkit-flex starknetkit-flex-row-reverse starknetkit-justify-between starknetkit-items-center 
+            starknetkit-p-3 starknetkit-rounded-md starknetkit-cursor-pointer starknetkit-shadow-list-item 
+            dark:starknetkit-shadow-none dark:starknetkit-bg-neutral-800 dark:starknetkit-text-white 
+          hover:starknetkit-bg-neutral-100 dark:hover:starknetkit-bg-neutral-700 
+          focus:starknetkit-outline-none focus:starknetkit-ring-2 
+        focus:starknetkit-ring-neutral-200 dark:focus:starknetkit-ring-neutral-700 
+          starknetkit-transition-colors`}
     role="button"
     tabindex="0"
     on:click={async () => {
@@ -51,16 +65,22 @@
     }}
   >
     <span class="w-8 h-8" />
-    <div class="flex flex-col justify-center items-center">
-      <p class="font-semibold text-base">{wallet.title ?? wallet.name}</p>
-      <p class="l2" style="text-align: center;">{wallet.subtitle ?? ""}</p>
+    <div
+      class="starknetkit-flex starknetkit-flex-col starknetkit-justify-center starknetkit-items-center"
+    >
+      <p class="starknetkit-font-semibold starknetkit-text-base starknetkit-p">
+        {wallet.title ?? wallet.name}
+      </p>
+      <p class="starknetkit-l2 starknetkit-p" style="text-align: center;">
+        {wallet.subtitle ?? ""}
+      </p>
     </div>
 
     {#if loadingItem === wallet?.id}
       <div role="status">
         <svg
           aria-hidden="true"
-          class="w-8 h-8 text-neutral-300 animate-spin dark:text-neutral-600 fill-neutral-600 dark:fill-neutral-300"
+          class="starknetkit-w-8 starknetkit-h-8 starknetkit-text-neutral-300 starknetkit-animate-spin dark:starknetkit-text-neutral-600 starknetkit-fill-neutral-600 dark:starknetkit-fill-neutral-300"
           viewBox="0 0 100 101"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -74,12 +94,16 @@
             fill="currentFill"
           />
         </svg>
-        <span class="sr-only">Loading...</span>
+        <span class="starknetkit-sr-only">Loading...</span>
       </div>
     {:else if isSvg}
       <div style="position: relative;">{@html wallet.icon}</div>
     {:else}
-      <img alt={wallet?.name} src={wallet?.icon} class="w-8 h-8 rounded" />
+      <img
+        alt={wallet?.name}
+        src={wallet?.icon}
+        class="starknetkit-w-8 starknetkit-h-8 starknetkit-rounded"
+      />
     {/if}
   </li>
 {/if}
diff --git a/src/modal/Modal.svelte b/src/modal/Modal.svelte
@@ -46,7 +46,7 @@
       (theme === null &&
         window.matchMedia("(prefers-color-scheme: dark)").matches)
     ) {
-      darkModeControlClass = "dark"
+      darkModeControlClass = "starknetkit-dark"
     } else {
       darkModeControlClass = ""
     }
@@ -74,8 +74,8 @@
 {#if !isInAppBrowser && !emailOnly}
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
-    class={"backdrop-blur-sm fixed inset-0 flex items-center justify-center bg-black/25 z-[9999] " +
-      darkModeControlClass}
+    class={`starknetkit-font starknetkit-backdrop-blur-sm starknetkit-fixed starknetkit-inset-0 starknetkit-flex starknetkit-items-center 
+            starknetkit-justify-center starknetkit-bg-black/25 starknetkit-z-[9999] ${darkModeControlClass}`}
     on:click={() => cb(null)}
     on:keyup={(e) => {
       if (e.key === "Escape") {
@@ -86,21 +86,39 @@
     <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
     <main
       role="dialog"
-      class={`bg-slate-50 rounded-3xl shadow-modal dark:shadow-none w-full max-w-[380px] mx-6 p-6 pb-8 text-center z-50 dark:bg-neutral-900 text-neutral-900 dark:text-white`}
+      class={`starknetkit-rounded-3xl starknetkit-shadow-modal dark:shadow-none 
+              starknetkit-w-full starknetkit-max-w-[380px] starknetkit-z-50 
+              starknetkit-mx-6 starknetkit-p-6 starknetkit-pb-8 starknetkit-text-center 
+              starknetkit-bg-slate-50 dark:starknetkit-bg-neutral-900 
+            starknetkit-text-neutral-900 dark:starknetkit-text-white`}
       on:click={(e) => e.stopPropagation()}
       on:keyup={(e) => {
         e.stopPropagation()
       }}
     >
-      <header class="flex items-center justify-center flex-col mb-2 relative">
-        <h2 class="text-sm text-gray-400 font-semibold">Connect to</h2>
+      <header
+        class={`starknetkit-flex starknetkit-items-center starknetkit-justify-center starknetkit-flex-col starknetkit-mb-2 starknetkit-relative`}
+      >
+        <h2
+          class="starknetkit-text-sm starknetkit-text-gray-400 starknetkit-font-semibold"
+        >
+          Connect to
+        </h2>
         <h1
-          class="text-xl font-semibold mb-6 max-w-[240px] overflow-hidden whitespace-nowrap text-ellipsis"
+          class={`starknetkit-text-xl starknetkit-font-semibold starknetkit-mb-6 
+                  starknetkit-max-w-[240px] starknetkit-overflow-hidden 
+                  starknetkit-whitespace-nowrap starknetkit-text-ellipsis`}
         >
           {dappName}
         </h1>
         <span
-          class="absolute top-0 right-0 p-2 cursor-pointer rounded-full bg-neutral-100 text-neutral-400 dark:bg-neutral-800 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-200 dark:focus:ring-neutral-700 transition-colors"
+          class={`starknetkit-absolute starknetkit-top-0 starknetkit-right-0 starknetkit-p-2 starknetkit-cursor-pointer
+                  starknetkit-rounded-full starknetkit-bg-neutral-100 dark:starknetkit-bg-neutral-800
+                  starknetkit-text-neutral-400 dark:starknetkit-text-white
+                  hover:starknetkit-bg-neutral-100 dark:hover:starknetkit-bg-neutral-700
+                  focus:starknetkit-outline-none focus:starknetkit-ring-2
+                focus:starknetkit-ring-neutral-200 dark:focus:starknetkit-ring-neutral-700
+                  starknetkit-transition-colors`}
           role="button"
           tabindex="0"
           aria-label="Close"
@@ -126,7 +144,7 @@
         </span>
       </header>
 
-      <ul class="flex flex-col gap-3">
+      <ul class="starknetkit-flex starknetkit-flex-col starknetkit-gap-3">
         {#each modalWallets as wallet}
           <ConnectorButton {wallet} {loadingItem} {cb} />
         {/each}
@@ -142,7 +160,7 @@
 
   @import url("https://fonts.googleapis.com/css2?family=Barlow:wght@500;600&display=swap");
 
-  * {
+  .starknetkit-font {
     font-family: "Barlow", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
       Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
       sans-serif;
@@ -152,7 +170,7 @@
     font-feature-settings: "kern";
   }
 
-  .l2 {
+  .starknetkit-l2 {
     color: #8c8c8c;
     font-size: 12px;
     font-weight: 500;
@@ -161,7 +179,7 @@
     text-align: left;
   }
 
-  p {
+  .starknetkit-p {
     margin: 0;
   }
 </style>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -2,12 +2,13 @@
 module.exports = {
   content: ["./src/**/*.{svelte,ts}"],
   darkMode: "class",
+  prefix: "starknetkit-",
   theme: {
     extend: {
       boxShadow: {
         "list-item": "0px 2px 12px rgba(0, 0, 0, 0.12)",
-        "modal": "0px 4px 20px rgba(0, 0, 0, 0.5)"
-      }
+        modal: "0px 4px 20px rgba(0, 0, 0, 0.5)",
+      },
     },
   },
   plugins: [],