From d0829d52d77a5db762157fd1c9998349d964058f Mon Sep 17 00:00:00 2001
From: Jacob Welander Jensen <64834767+Welander1994@users.noreply.github.com>
Date: Mon, 31 Mar 2025 14:19:06 +0200
Subject: [PATCH 1/4] add new check on alpha to check if undefined

---
 packages/uui-color-picker/lib/uui-color-picker.element.ts | 4 ++--
 packages/uui-color-picker/lib/uui-color-picker.story.ts   | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

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 f97716da4..e9629792f 100644
--- a/packages/uui-color-picker/lib/uui-color-picker.element.ts
+++ b/packages/uui-color-picker/lib/uui-color-picker.element.ts
@@ -375,11 +375,12 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
     const colord = new Colord(colorString);
 
     const { h, s, l, a } = colord.toHsl();
+    console.log(colord.rgba, this.opacity);
 
     this.hue = h;
     this.saturation = s;
     this.lightness = l;
-    this.alpha = this.opacity ? a * 100 : 100;
+    this.alpha = this.opacity != undefined ? a * 100 : 100;
 
     const hslaColor = colorString as HslaColor;
 
@@ -395,7 +396,6 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
     this.dispatchEvent(
       new UUIColorPickerChangeEvent(UUIColorPickerChangeEvent.CHANGE),
     );
-
     return true;
   }
 
diff --git a/packages/uui-color-picker/lib/uui-color-picker.story.ts b/packages/uui-color-picker/lib/uui-color-picker.story.ts
index 50964b038..48336f6b5 100644
--- a/packages/uui-color-picker/lib/uui-color-picker.story.ts
+++ b/packages/uui-color-picker/lib/uui-color-picker.story.ts
@@ -73,6 +73,7 @@ export const Inline: Story = {
 export const Opacity: Story = {
   args: {
     opacity: true,
+    value: undefined,
     inline: true,
   },
 };

From 6b70978bfd62a2e293adfef52ca2663b2b9032e4 Mon Sep 17 00:00:00 2001
From: Jacob Welander Jensen <64834767+Welander1994@users.noreply.github.com>
Date: Tue, 1 Apr 2025 10:54:09 +0200
Subject: [PATCH 2/4] cleanup removing console.logs

---
 packages/uui-color-picker/lib/uui-color-picker.element.ts | 1 -
 1 file changed, 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 e9629792f..4de94086e 100644
--- a/packages/uui-color-picker/lib/uui-color-picker.element.ts
+++ b/packages/uui-color-picker/lib/uui-color-picker.element.ts
@@ -375,7 +375,6 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
     const colord = new Colord(colorString);
 
     const { h, s, l, a } = colord.toHsl();
-    console.log(colord.rgba, this.opacity);
 
     this.hue = h;
     this.saturation = s;

From 40c0f0b6b9a0242c80a50084878319f21e418c2c Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Tue, 6 May 2025 08:59:42 +0200
Subject: [PATCH 3/4] revert change with check on opacity

---
 packages/uui-color-picker/lib/uui-color-picker.element.ts | 2 +-
 1 file changed, 1 insertion(+), 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 2f1617da5..ea8ace198 100644
--- a/packages/uui-color-picker/lib/uui-color-picker.element.ts
+++ b/packages/uui-color-picker/lib/uui-color-picker.element.ts
@@ -379,7 +379,7 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
     this.hue = h;
     this.saturation = s;
     this.lightness = l;
-    this.alpha = this.opacity != undefined ? a * 100 : 100;
+    this.alpha = this.opacity ? a * 100 : 100; // Convert to 0-100 range, and set alpha to 100 if opacity is disabled
 
     const hslaColor = colorString as HslaColor;
 

From 4e65c55a90490fb89cf403b08d21bde117ed0641 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Tue, 6 May 2025 09:00:17 +0200
Subject: [PATCH 4/4] fix: set 'alpha' to default to 100 (visible) if there is
 no color selected as this improves the UX

---
 packages/uui-color-picker/lib/uui-color-picker.element.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 ea8ace198..5fdfd0c6d 100644
--- a/packages/uui-color-picker/lib/uui-color-picker.element.ts
+++ b/packages/uui-color-picker/lib/uui-color-picker.element.ts
@@ -74,7 +74,7 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
   @state() private hue = 0;
   @state() private saturation = 0;
   @state() private lightness = 0;
-  @state() private alpha = 0;
+  @state() private alpha = 100;
   @state() private _colord: Colord = colord('hsl(0, 0%, 0%)');
 
   /**
@@ -361,7 +361,7 @@ export class UUIColorPickerElement extends LabelMixin('label', LitElement) {
     if (colorString === this.value) return;
 
     if (!colorString) {
-      this.alpha = 0;
+      this.alpha = 100;
       this.inputValue = '';
       this._value = colorString;