@henriquepetrelli/hp-design-system 1.1.2 → 1.1.4

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

@@ -1290,7 +1290,7 @@
   const ToggleSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-14c54b46"]]);
 
   const _hoisted_1$4 = { class: "theme-switcher-container" };
-  const _hoisted_2$4 = ["id", "checked", "aria-checked"];
+  const _hoisted_2$4 = ["id", "aria-checked"];
   const _hoisted_3$4 = ["for", "onKeydown"];
 
 
@@ -1328,6 +1328,37 @@
 
   const isDarkMode = vue.ref(false);
 
+  // Função para pegar variáveis CSS do projeto
+  const getCSSVariable = (name, fallback) => {
+    return (
+      getComputedStyle(document.documentElement).getPropertyValue(name).trim() ||
+      fallback
+    )
+  };
+
+  // Computed para cores do switcher
+  const computedLightBackgroundColor = vue.computed(() => {
+    return (
+      props.lightBackgroundColor ||
+      getCSSVariable('--color-background', '#96dcee')
+    )
+  });
+
+  const computedLightBorderColor = vue.computed(() => {
+    return props.lightBorderColor || getCSSVariable('--color-primary', '#72cce3')
+  });
+
+  const computedDarkBackgroundColor = vue.computed(() => {
+    return (
+      props.darkBackgroundColor || getCSSVariable('--color-background', '#1261a0')
+    )
+  });
+
+  const computedDarkBorderColor = vue.computed(() => {
+    return props.darkBorderColor || getCSSVariable('--color-primary', '#072f5f')
+  });
+
+  // Alterna tema baseado no valor atual de isDarkMode
   const toggleTheme = () => {
     if (isDarkMode.value) {
       document.documentElement.classList.remove('light');
@@ -1340,11 +1371,13 @@
     }
   };
 
+  // Alterna tema via teclado
   const handleKeydown = () => {
     isDarkMode.value = !isDarkMode.value;
     toggleTheme();
   };
 
+  // Inicializa o tema baseado no localStorage ou preferência do sistema
   vue.onMounted(() => {
     const savedTheme =
       localStorage.getItem('theme') ||
@@ -1358,22 +1391,6 @@
       document.documentElement.classList.add('light');
     }
   });
-
-  const computedLightBorderColor = vue.computed(() => {
-    return props.lightBorderColor || '#72cce3'
-  });
-
-  const computedLightBackgroundColor = vue.computed(() => {
-    return props.lightBackgroundColor || '#96dcee'
-  });
-
-  const computedDarkBorderColor = vue.computed(() => {
-    return props.darkBorderColor || '#072f5f'
-  });
-
-  const computedDarkBackgroundColor = vue.computed(() => {
-    return props.darkBackgroundColor || '#1261a0'
-  });
 
   return (_ctx, _cache) => {
     return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
@@ -1382,7 +1399,6 @@
         id: __props.id,
         class: "toggle--checkbox",
         "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((isDarkMode).value = $event)),
-        checked: __props.modelValue,
         onChange: toggleTheme,
         role: "switch",
         "aria-checked": isDarkMode.value,
@@ -1414,7 +1430,7 @@
   }
 
   };
-  const ThemeSwitcher = /*#__PURE__*/_export_sfc(_sfc_main$4, [['__scopeId',"data-v-08fdca46"]]);
+  const ThemeSwitcher = /*#__PURE__*/_export_sfc(_sfc_main$4, [['__scopeId',"data-v-d1afbbb3"]]);
 
   const _hoisted_1$3 = { class: "input__fieldset" };
   const _hoisted_2$3 = {