@henriquepetrelli/hp-design-system 1.1.13 → 1.1.15

package/dist/hp-design-system.umd.js

@@ -365,7 +365,10 @@
   })(ButtonIconSize || {});
 
   const convertHexToRgb = (color) => {
-    if (color.startsWith("var(--")) return "120, 120, 120";
+    if (!color) return "";
+    if (color.startsWith("var(")) {
+      return color;
+    }
     if (color.startsWith("#")) {
       const hex = color.replace("#", "");
       const r = parseInt(hex.substring(0, 2), 16);
@@ -373,10 +376,10 @@
       const b = parseInt(hex.substring(4, 6), 16);
       return `${r}, ${g}, ${b}`;
     }
-    if (color.includes("rgb(")) {
+    if (color.startsWith("rgb")) {
       return color.replace(/rgba?\(|\s|\)/g, "").split(",").slice(0, 3).join(", ");
     }
-    return "0, 0, 0";
+    return "";
   };
 
   const _hoisted_1$c = ["aria-label", "tabindex", "aria-disabled", "disabled"];
@@ -431,7 +434,7 @@
       };
       const computedIconColor = vue.computed(() => {
         if (props.backgroundColor || props.hasBackground)
-          return props.iconColor || "#fff";
+          return props.iconColor || "#000000";
         else return props.iconColor || "var(--color-primary)";
       });
       const computedBackgroundColor = vue.computed(() => {
@@ -465,7 +468,7 @@
           }, null, 8, ["name", "size", "color"])) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$b), {
             key: 1,
             type: "circle1",
-            color: computedIconColor.value || "var(--color-primary)",
+            color: computedIconColor.value || "#000",
             secondaryColor: computedBackgroundColor.value,
             size: __props.size,
             speed: 0.8
@@ -475,7 +478,7 @@
     }
   });
 
-  const HpButtonIcon = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-32ab443d"]]);
+  const HpButtonIcon = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-8cf8a123"]]);
 
   var ButtonLetterSize = /* @__PURE__ */ ((ButtonLetterSize2) => {
     ButtonLetterSize2["SMALL"] = "sm";
@@ -484,7 +487,7 @@
     return ButtonLetterSize2;
   })(ButtonLetterSize || {});
 
-  const _hoisted_1$b = ["aria-label", "tabindex", "aria-disabled", "disabled"];
+  const _hoisted_1$b = ["aria-label", "aria-disabled", "disabled", "tabindex"];
   const _hoisted_2$b = { key: 0 };
   const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     __name: "ButtonLetter",
@@ -519,7 +522,7 @@
       },
       isLoading: {
         type: Boolean,
-        defualt: false
+        default: false
       },
       size: {
         type: String,
@@ -531,25 +534,32 @@
       const props = __props;
       const emit = __emit;
       const handleClick = (event) => {
-        if (!props.disabled) {
+        if (!props.disabled && !props.isLoading) {
           emit("action:click", event);
         }
       };
       const computedLetterColor = vue.computed(() => {
-        if (props.backgroundColor || props.hasBackground)
-          return props.letterColor || "#fff";
-        else return props.letterColor || "var(--color-primary)";
+        if (props.hasBackground || props.backgroundColor) {
+          return props.letterColor || "#000000";
+        }
+        return props.letterColor || "var(--color-primary)";
       });
       const computedBackgroundColor = vue.computed(() => {
         if (props.backgroundColor) return props.backgroundColor;
         if (props.hasBackground) return "var(--color-primary)";
         return "transparent";
       });
+      const letterColorRgb = vue.computed(() => {
+        const color = computedLetterColor.value;
+        return color ? convertHexToRgb(color) : "";
+      });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("button", {
           onClick: handleClick,
           "aria-label": __props.label,
-          tabindex: __props.tabindex,
+          "aria-disabled": __props.disabled || __props.isLoading,
+          disabled: __props.disabled || __props.isLoading,
+          tabindex: __props.disabled ? -1 : 0,
           class: vue.normalizeClass(["button-letter", {
             "button-letter--sm": __props.size === vue.unref(ButtonLetterSize).SMALL,
             "button-letter--lg": __props.size === vue.unref(ButtonLetterSize).LARGE,
@@ -558,10 +568,9 @@
           }]),
           style: vue.normalizeStyle({
             "--background-color": computedBackgroundColor.value,
-            "--letter-color": vue.unref(convertHexToRgb)(computedLetterColor.value)
-          }),
-          "aria-disabled": __props.disabled || __props.isLoading,
-          disabled: __props.disabled || __props.isLoading
+            "--letter-color-rgb": letterColorRgb.value,
+            color: computedLetterColor.value
+          })
         }, [
           !__props.isLoading ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$b, vue.toDisplayString(__props.letter), 1)) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$b), {
             key: 1,
@@ -576,7 +585,7 @@
     }
   });
 
-  const ButtonLetter = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-4df7cc96"]]);
+  const ButtonLetter = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-13b75270"]]);
 
   var AlertType = /* @__PURE__ */ ((AlertType2) => {
     AlertType2["WARNING"] = "warning";
@@ -1418,7 +1427,7 @@
 
   const emit = __emit;
 
-  const isDarkMode = vue.ref(false);
+  const isDarkMode = vue.ref(localStorage.getItem('theme') === 'dark');
 
   const applyTheme = (isDark) => {
     document.documentElement.classList.toggle('dark', isDark);
@@ -1437,13 +1446,6 @@
   };
 
   vue.onMounted(() => {
-    const savedTheme =
-      localStorage.getItem('theme') ||
-      (window.matchMedia('(prefers-color-scheme: dark)').matches
-        ? 'dark'
-        : 'light');
-
-    isDarkMode.value = savedTheme === 'dark';
     applyTheme(isDarkMode.value);
   });
 
@@ -1509,7 +1511,7 @@
   }
 
   };
-  const ThemeSwitcher = /*#__PURE__*/_export_sfc(_sfc_main$4, [['__scopeId',"data-v-699fb0fe"]]);
+  const ThemeSwitcher = /*#__PURE__*/_export_sfc(_sfc_main$4, [['__scopeId',"data-v-e4250caa"]]);
 
   const _hoisted_1$3 = { class: "input__fieldset" };
   const _hoisted_2$3 = {