@henriquepetrelli/hp-design-system 1.1.2 → 1.1.4

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

@@ -1286,7 +1286,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 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"];
 
 
@@ -1324,6 +1324,37 @@ const props = __props;
 
 const isDarkMode = 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 = computed(() => {
+  return (
+    props.lightBackgroundColor ||
+    getCSSVariable('--color-background', '#96dcee')
+  )
+});
+
+const computedLightBorderColor = computed(() => {
+  return props.lightBorderColor || getCSSVariable('--color-primary', '#72cce3')
+});
+
+const computedDarkBackgroundColor = computed(() => {
+  return (
+    props.darkBackgroundColor || getCSSVariable('--color-background', '#1261a0')
+  )
+});
+
+const computedDarkBorderColor = 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');
@@ -1336,11 +1367,13 @@ const toggleTheme = () => {
   }
 };
 
+// Alterna tema via teclado
 const handleKeydown = () => {
   isDarkMode.value = !isDarkMode.value;
   toggleTheme();
 };
 
+// Inicializa o tema baseado no localStorage ou preferência do sistema
 onMounted(() => {
   const savedTheme =
     localStorage.getItem('theme') ||
@@ -1354,22 +1387,6 @@ onMounted(() => {
     document.documentElement.classList.add('light');
   }
 });
-
-const computedLightBorderColor = computed(() => {
-  return props.lightBorderColor || '#72cce3'
-});
-
-const computedLightBackgroundColor = computed(() => {
-  return props.lightBackgroundColor || '#96dcee'
-});
-
-const computedDarkBorderColor = computed(() => {
-  return props.darkBorderColor || '#072f5f'
-});
-
-const computedDarkBackgroundColor = computed(() => {
-  return props.darkBackgroundColor || '#1261a0'
-});
 
 return (_ctx, _cache) => {
   return (openBlock(), createElementBlock("div", _hoisted_1$4, [
@@ -1378,7 +1395,6 @@ return (_ctx, _cache) => {
       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,
@@ -1410,7 +1426,7 @@ return (_ctx, _cache) => {
 }
 
 };
-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 = {