fix(useElementBackground): correct alpha in hex color

epicmaxco · Sep 28, 2023 · 001a809 · 001a809
1 parent 307f0be
commit 001a809
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/packages/ui/src/composables/useElementBackground.stories.ts b/packages/ui/src/composables/useElementBackground.stories.ts
@@ -63,6 +63,12 @@ export const WithTransition = () => ({
     }
   },
 
+  setup () {
+    return {
+      color: useElementBackground(useCurrentElement()),
+    }
+  },
+
   template: `
 <div :style="{ ...styles, transition: 'all 0.5s ease-in-out' }">
   <button @click="styles = { background: '#000', color: '#fff' }">Black</button>

diff --git a/packages/ui/src/composables/useElementBackground.ts b/packages/ui/src/composables/useElementBackground.ts
@@ -43,7 +43,7 @@ const toHex = (color: RGBAColorParsed): string => {
     (color[0] | 1 << 8).toString(16).slice(1) +
     (color[1] | 1 << 8).toString(16).slice(1) +
     (color[2] | 1 << 8).toString(16).slice(1) +
-    (color[3] | 1 << 8).toString(16).slice(1)
+    (color[3] * 255 | 1 << 8).toString(16).slice(1)
 }
 
 const getParentsWithBackground = (el: HTMLElement): HTMLElement[] => {

diff --git a/packages/ui/src/styles/index.scss b/packages/ui/src/styles/index.scss
@@ -2,3 +2,4 @@
 @import "global/index.scss";
 // Mixins, functions and variables
 @import "resources/index.scss";
+@import "essential.scss";