@lukso/web-components 1.33.1 → 1.34.0

package/dist/components/lukso-card/index.cjs

@@ -99,9 +99,9 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
     })}
           class="min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative bg-neutral-90"
         >
-          <div
-            class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-20/10 absolute"
-          ></div>
+          ${this.backgroundUrl ? shared_tailwindElement_index.x` <div
+                class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-20/10 absolute"
+              ></div>` : ""}
           <div>
             <slot name="header"></slot>
           </div>
@@ -149,9 +149,9 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
     })}
           class="min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative bg-neutral-90"
         >
-          <div
-            class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-10/10 absolute"
-          ></div>
+          ${this.backgroundUrl ? shared_tailwindElement_index.x`<div
+                class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-10/10 absolute"
+              ></div>` : ""}
           <div>
             <slot name="header"></slot>
           </div>
@@ -169,8 +169,7 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
               class="overflow-hidden w-[153px] h-[70px] -top-[70px] relative mx-auto flex items-end justify-center -mb-2"
             >
               <div
-                class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]
-              shadow-neutral-above-shadow-1xl"
+                class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]"
               ></div>
             </div>
             <slot name="content"></slot>
@@ -186,7 +185,7 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
     return shared_tailwindElement_index.x`
       <div
         data-testid="card"
-        class="h-[240px] flex bg-neutral-90 ${index.customClassMap({
+        class="h-[240px] flex bg-neutral-100 ${index.customClassMap({
       [this.mediumStyles]: !this.customClass && this.size === "medium",
       [this.smallStyles]: !this.customClass && this.size === "small",
       [this.smallHoverStyles]: this.isHoverable && this.size === "small",
@@ -202,7 +201,9 @@ exports.LuksoCard = class LuksoCard extends shared_tailwindElement_index.Tailwin
     })}
           class="h-full w-full -mb-6 bg-center bg-cover rounded-24 relative"
         >
-          <div class="h-full w-full rounded-24 bg-neutral-20/10 absolute"></div>
+          ${this.backgroundUrl ? shared_tailwindElement_index.x`<div
+                class="h-full w-full rounded-24 bg-neutral-20/10 absolute"
+              ></div>` : null}
           <div
             class="h-full w-full flex flex-col items-center justify-center  absolute"
           >

package/dist/components/lukso-card/index.js

@@ -95,9 +95,9 @@ let LuksoCard = class extends TailwindStyledElement(style) {
     })}
           class="min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative bg-neutral-90"
         >
-          <div
-            class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-20/10 absolute"
-          ></div>
+          ${this.backgroundUrl ? x` <div
+                class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-20/10 absolute"
+              ></div>` : ""}
           <div>
             <slot name="header"></slot>
           </div>
@@ -145,9 +145,9 @@ let LuksoCard = class extends TailwindStyledElement(style) {
     })}
           class="min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative bg-neutral-90"
         >
-          <div
-            class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-10/10 absolute"
-          ></div>
+          ${this.backgroundUrl ? x`<div
+                class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-10/10 absolute"
+              ></div>` : ""}
           <div>
             <slot name="header"></slot>
           </div>
@@ -165,8 +165,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
               class="overflow-hidden w-[153px] h-[70px] -top-[70px] relative mx-auto flex items-end justify-center -mb-2"
             >
               <div
-                class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]
-              shadow-neutral-above-shadow-1xl"
+                class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]"
               ></div>
             </div>
             <slot name="content"></slot>
@@ -182,7 +181,7 @@ let LuksoCard = class extends TailwindStyledElement(style) {
     return x`
       <div
         data-testid="card"
-        class="h-[240px] flex bg-neutral-90 ${customClassMap({
+        class="h-[240px] flex bg-neutral-100 ${customClassMap({
       [this.mediumStyles]: !this.customClass && this.size === "medium",
       [this.smallStyles]: !this.customClass && this.size === "small",
       [this.smallHoverStyles]: this.isHoverable && this.size === "small",
@@ -198,7 +197,9 @@ let LuksoCard = class extends TailwindStyledElement(style) {
     })}
           class="h-full w-full -mb-6 bg-center bg-cover rounded-24 relative"
         >
-          <div class="h-full w-full rounded-24 bg-neutral-20/10 absolute"></div>
+          ${this.backgroundUrl ? x`<div
+                class="h-full w-full rounded-24 bg-neutral-20/10 absolute"
+              ></div>` : null}
           <div
             class="h-full w-full flex flex-col items-center justify-center  absolute"
           >

package/dist/components/lukso-profile/index.cjs

@@ -487,7 +487,7 @@ exports.LuksoProfile = class LuksoProfile extends shared_tailwindElement_index.T
         profileImageSize: 96
       }
     };
-    this.defaultProfileUrl = "/assets/images/profile-default.png";
+    this.defaultProfileUrl = "/assets/images/profile-default.svg";
   }
   profileImageSize() {
     return this.sizes[this.size].profileImageSize;

package/dist/components/lukso-profile/index.js

@@ -483,7 +483,7 @@ let LuksoProfile = class extends TailwindElement {
         profileImageSize: 96
       }
     };
-    this.defaultProfileUrl = "/assets/images/profile-default.png";
+    this.defaultProfileUrl = "/assets/images/profile-default.svg";
   }
   profileImageSize() {
     return this.sizes[this.size].profileImageSize;

package/dist/components/lukso-username/index.cjs

@@ -51,10 +51,10 @@ exports.LuksoUsername = class LuksoUsername extends shared_tailwindElement_index
    */
   addressBytesTemplate() {
     return shared_tailwindElement_index.x`<div
-      class="inline-block text-neutral-60 "
-      style=${styleMap.o({
-      color: `var(--${this.addressColor})`
-    })}
+      class="inline-block ${index.customClassMap({
+      ["text-" + this.addressColor]: this.addressColor !== "",
+      ["text-neutral-60"]: this.addressColor === ""
+    })}"
     >
       #${this.address.slice(2, 6)}
     </div>`;
@@ -67,12 +67,12 @@ exports.LuksoUsername = class LuksoUsername extends shared_tailwindElement_index
     return shared_tailwindElement_index.x`<div
       class="inline-block whitespace-nowrap overflow-hidden text-ellipsis ${index.customClassMap(
       {
-        ["text-transparent bg-clip-text bg-gradient-to-r from-gradient-1-start to-gradient-1-end"]: this.nameColor === ""
+        ["text-transparent bg-clip-text bg-gradient-to-r from-gradient-1-start to-gradient-1-end"]: this.nameColor === "",
+        ["text-" + this.nameColor]: this.nameColor !== ""
       }
     )}"
       style=${styleMap.o({
-      maxWidth: `${this.maxWidth - this.bytesWidth}px`,
-      color: `var(--${this.nameColor})`
+      maxWidth: `${this.maxWidth - this.bytesWidth}px`
     })}
     >
       @${this.name}

package/dist/components/lukso-username/index.js

@@ -47,10 +47,10 @@ let LuksoUsername = class extends TailwindElement {
    */
   addressBytesTemplate() {
     return x`<div
-      class="inline-block text-neutral-60 "
-      style=${o({
-      color: `var(--${this.addressColor})`
-    })}
+      class="inline-block ${customClassMap({
+      ["text-" + this.addressColor]: this.addressColor !== "",
+      ["text-neutral-60"]: this.addressColor === ""
+    })}"
     >
       #${this.address.slice(2, 6)}
     </div>`;
@@ -63,12 +63,12 @@ let LuksoUsername = class extends TailwindElement {
     return x`<div
       class="inline-block whitespace-nowrap overflow-hidden text-ellipsis ${customClassMap(
       {
-        ["text-transparent bg-clip-text bg-gradient-to-r from-gradient-1-start to-gradient-1-end"]: this.nameColor === ""
+        ["text-transparent bg-clip-text bg-gradient-to-r from-gradient-1-start to-gradient-1-end"]: this.nameColor === "",
+        ["text-" + this.nameColor]: this.nameColor !== ""
       }
     )}"
       style=${o({
-      maxWidth: `${this.maxWidth - this.bytesWidth}px`,
-      color: `var(--${this.nameColor})`
+      maxWidth: `${this.maxWidth - this.bytesWidth}px`
     })}
     >
       @${this.name}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukso/web-components",
-  "version": "1.33.1",
+  "version": "1.34.0",
   "type": "module",
   "files": [
     "dist",

package/tools/assets/images/profile-default.svg

@@ -0,0 +1,19 @@
+<svg width="84" height="84" viewBox="0 0 84 84" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="2" width="80" height="80" rx="40" fill="white"/>
+<circle cx="42" cy="42" r="41" fill="#DEE7ED" stroke="white" stroke-width="2"/>
+<g filter="url(#filter0_d_882_6671)">
+<path d="M60 57.2937C59.0794 51.5075 54.1055 47.0752 48.0653 47.0752H35.9347C29.8903 47.0752 24.9206 51.5075 24 57.2937" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="42.4524" cy="32.4524" r="7.45238" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<filter id="filter0_d_882_6671" x="3.25" y="4.25" width="77.5" height="73.7939" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="10"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.529848 0 0 0 0 0.679631 0 0 0 0 0.796129 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_882_6671"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_882_6671" result="shape"/>
+</filter>
+</defs>
+</svg>