@henriquepetrelli/hp-design-system 1.1.2 → 1.1.3

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

@@ -1328,7 +1328,36 @@
 
   const isDarkMode = vue.ref(false);
 
+  const getCSSVariable = (name, fallback) => {
+    return (
+      getComputedStyle(document.documentElement).getPropertyValue(name).trim() ||
+      fallback
+    )
+  };
+
+  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')
+  });
+
   const toggleTheme = () => {
+    isDarkMode.value = !isDarkMode.value;
     if (isDarkMode.value) {
       document.documentElement.classList.remove('light');
       document.documentElement.classList.add('dark');
@@ -1341,7 +1370,6 @@
   };
 
   const handleKeydown = () => {
-    isDarkMode.value = !isDarkMode.value;
     toggleTheme();
   };
 
@@ -1358,22 +1386,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, [
@@ -1414,7 +1426,7 @@
   }
 
   };
-  const ThemeSwitcher = /*#__PURE__*/_export_sfc(_sfc_main$4, [['__scopeId',"data-v-08fdca46"]]);
+  const ThemeSwitcher = /*#__PURE__*/_export_sfc(_sfc_main$4, [['__scopeId',"data-v-74ce4ef8"]]);
 
   const _hoisted_1$3 = { class: "input__fieldset" };
   const _hoisted_2$3 = {