@henriquepetrelli/hp-design-system 1.1.2 → 1.1.3

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

@@ -1324,7 +1324,36 @@ const props = __props;
 
 const isDarkMode = ref(false);
 
+const getCSSVariable = (name, fallback) => {
+  return (
+    getComputedStyle(document.documentElement).getPropertyValue(name).trim() ||
+    fallback
+  )
+};
+
+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')
+});
+
 const toggleTheme = () => {
+  isDarkMode.value = !isDarkMode.value;
   if (isDarkMode.value) {
     document.documentElement.classList.remove('light');
     document.documentElement.classList.add('dark');
@@ -1337,7 +1366,6 @@ const toggleTheme = () => {
 };
 
 const handleKeydown = () => {
-  isDarkMode.value = !isDarkMode.value;
   toggleTheme();
 };
 
@@ -1354,22 +1382,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, [
@@ -1410,7 +1422,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-74ce4ef8"]]);
 
 const _hoisted_1$3 = { class: "input__fieldset" };
 const _hoisted_2$3 = {