From dd340627d1c7b07db22fba844705e9b6ea0b1b45 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Thu, 28 Sep 2023 16:53:47 +0200
Subject: [PATCH] Don't change opacity of gradient in opacity-slider as value
 change and value itself may contain alpha

---
 .../lib/uui-color-picker.element.ts           | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/uui-color-picker/lib/uui-color-picker.element.ts b/packages/uui-color-picker/lib/uui-color-picker.element.ts
index c6f0e9ad2..fc4bbe371 100644
--- a/packages/uui-color-picker/lib/uui-color-picker.element.ts
+++ b/packages/uui-color-picker/lib/uui-color-picker.element.ts
@@ -560,6 +560,23 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
     return this.uppercase ? string.toUpperCase() : string.toLowerCase();
   }
 
+  /** Generates a hex string from HSL values. Hue must be 0-360. All other arguments must be 0-100. */
+  private getHexString(
+    hue: number,
+    saturation: number,
+    lightness: number,
+    alpha = 100
+  ) {
+    const color = colord(
+      `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha / 100})`
+    );
+    if (!color.isValid()) {
+      return '';
+    }
+
+    return color.toHex();
+  }
+
   private _syncValues() {
     this.inputValue = this.getFormattedValue(this.format);
     this.value = this.inputValue;
@@ -595,7 +612,7 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
                     class="opacity-slider"
                     .value=${Math.round(this.alpha)}
                     type="opacity"
-                    .color=${this.value}
+                    .color=${this.getHexString(this.hue, this.saturation, this.lightness)}
                     @change=${this.handleAlphaChange}>
                   </uui-color-slider>
                 `