From 70f70628252740a7afa0674163c4bf5c4d2ae70e Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Sun, 19 Oct 2025 13:47:56 +0200
Subject: [PATCH 1/8] Add brand color and used on Umbraco backoffice

---
 .../lib/uui-color-swatches.story.ts                  | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/uui-color-swatches/lib/uui-color-swatches.story.ts b/packages/uui-color-swatches/lib/uui-color-swatches.story.ts
index f83451968..a95247645 100644
--- a/packages/uui-color-swatches/lib/uui-color-swatches.story.ts
+++ b/packages/uui-color-swatches/lib/uui-color-swatches.story.ts
@@ -6,9 +6,15 @@ import { spread } from '../../../storyhelpers';
 import { repeat } from 'lit/directives/repeat.js';
 
 const swatches = [
-  { label: 'Blood Orange', value: '#d0021b' },
-  { label: 'Avocado', value: '#417505' },
-  { label: 'Tufts Blue', value: '#4a90e2' },
+  { label: 'Black', value: '#060606' },
+  { label: 'Sunglow', value: '#fad634' },
+  { label: 'Spanish Pink', value: '#f5c1bc' },
+  { label: 'Violet Blue', value: '#3544b1' },
+  { label: 'Malibu', value: '#3879ff' },
+  { label: 'Maroon Flush', value: '#d42054' },
+  { label: 'Jungle Green', value: '#2bc37c' },
+  { label: 'Chamoisee', value: '#9d8057' },
+  { label: 'Dusty Grey', value: '#9b9b9b' },
 ];
 
 const gradients = [

From d898eba90d43c82fe79f22b7b631d4774fee65bc Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Sun, 19 Oct 2025 13:56:51 +0200
Subject: [PATCH 2/8] Check contrast color for hex colors

---
 .../lib/uui-color-swatch.element.ts           | 54 +++++++++++++++++--
 1 file changed, 50 insertions(+), 4 deletions(-)

diff --git a/packages/uui-color-swatch/lib/uui-color-swatch.element.ts b/packages/uui-color-swatch/lib/uui-color-swatch.element.ts
index f14668652..b76c2e59c 100644
--- a/packages/uui-color-swatch/lib/uui-color-swatch.element.ts
+++ b/packages/uui-color-swatch/lib/uui-color-swatch.element.ts
@@ -1,7 +1,8 @@
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { ref } from 'lit/directives/ref.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { iconCheck } from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';
 import {
   ActiveMixin,
@@ -23,6 +24,9 @@ export class UUIColorSwatchElement extends LabelMixin(
   'label',
   SelectableMixin(ActiveMixin(LitElement)),
 ) {
+  @state()
+  private _contrast: 'dark' | 'light' | undefined = undefined;
+
   /**
    * Value of the swatch. This will become the color value if color is left undefined, see the property `color` for more details.
    */
@@ -90,6 +94,11 @@ export class UUIColorSwatchElement extends LabelMixin(
 
   firstUpdated() {
     this._setAriaAttributes();
+
+    const color = this.color ?? this.value;
+    if (color.startsWith('#')) {
+      this._contrast = this.#contrast(color) === 'light' ? 'light' : 'dark';
+    }
   }
 
   willUpdate(changedProperties: Map<string, any>) {
@@ -118,6 +127,27 @@ export class UUIColorSwatchElement extends LabelMixin(
     this.selectableTarget = button || this;
   }
 
+  #contrast(hex: string): string {
+    const rgb = this.#hexToRgb(hex);
+    const o = Math.round((rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000);
+
+    return o <= 180 ? 'dark' : 'light';
+  }
+
+  #hexToRgb(hex: string): number[] {
+    hex = hex.startsWith('#') ? hex.slice(1) : hex;
+    if (hex.length === 3) {
+      hex = Array.from(hex).reduce((str, x) => str + x + x, ''); // 123 -> 112233
+    }
+
+    const bigint = parseInt(hex, 16);
+    const r = (bigint >> 16) & 255;
+    const g = (bigint >> 8) & 255;
+    const b = bigint & 255;
+
+    return [r, g, b];
+  }
+
   render() {
     return html`
       <button
@@ -126,7 +156,12 @@ export class UUIColorSwatchElement extends LabelMixin(
         aria-label=${this.label}
         ?disabled="${this.disabled}"
         title="${this.label}">
-        <div class="color-swatch color-swatch--transparent-bg">
+        <div
+          class="color-swatch color-swatch--transparent-bg ${ifDefined(
+            this._contrast,
+          )
+            ? `color-swatch--${this._contrast}`
+            : ''}">
           <div
             class="color-swatch__color"
             style="background: var(--uui-swatch-color, ${this.color ??
@@ -251,8 +286,11 @@ export class UUIColorSwatchElement extends LabelMixin(
       }
 
       .color-swatch.color-swatch--transparent-bg {
-        background-image:
-          linear-gradient(45deg, var(--uui-palette-grey) 25%, transparent 25%),
+        background-image: linear-gradient(
+            45deg,
+            var(--uui-palette-grey) 25%,
+            transparent 25%
+          ),
           linear-gradient(45deg, transparent 75%, var(--uui-palette-grey) 75%),
           linear-gradient(45deg, transparent 75%, var(--uui-palette-grey) 75%),
           linear-gradient(45deg, var(--uui-palette-grey) 25%, transparent 25%);
@@ -286,6 +324,14 @@ export class UUIColorSwatchElement extends LabelMixin(
         opacity: 0;
       }
 
+      .color-swatch.color-swatch--light .color-swatch__check {
+        filter: invert(0) brightness(0);
+      }
+
+      .color-swatch.color-swatch--dark .color-swatch__check {
+        filter: invert(1) brightness(10);
+      }
+
       :host([selected]) .color-swatch__check {
         opacity: 1;
       }

From 1f126e0958d9aa8bbb73539d86bcc83bb66c5896 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Sun, 19 Oct 2025 14:26:33 +0200
Subject: [PATCH 3/8] Adjust preselected

---
 packages/uui-color-swatches/lib/uui-color-swatches.story.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/uui-color-swatches/lib/uui-color-swatches.story.ts b/packages/uui-color-swatches/lib/uui-color-swatches.story.ts
index a95247645..355906d99 100644
--- a/packages/uui-color-swatches/lib/uui-color-swatches.story.ts
+++ b/packages/uui-color-swatches/lib/uui-color-swatches.story.ts
@@ -99,7 +99,7 @@ export const Default: Story = {};
 
 export const Preselected: Story = {
   args: {
-    value: '#417505',
+    value: swatches[3].value,
   },
 };
 

From 1cca5545b782035a3424cd7301aeb3314ce9c49d Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Sun, 19 Oct 2025 14:37:55 +0200
Subject: [PATCH 4/8] Add example of transparent swatches

---
 .../lib/uui-color-swatches.story.ts           | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/packages/uui-color-swatches/lib/uui-color-swatches.story.ts b/packages/uui-color-swatches/lib/uui-color-swatches.story.ts
index 355906d99..dc31faf0b 100644
--- a/packages/uui-color-swatches/lib/uui-color-swatches.story.ts
+++ b/packages/uui-color-swatches/lib/uui-color-swatches.story.ts
@@ -17,6 +17,25 @@ const swatches = [
   { label: 'Dusty Grey', value: '#9b9b9b' },
 ];
 
+const swatchesTransparent = [
+  'rgba(208, 2, 27, 0.5)',
+  'rgba(245, 166, 35, 0.5)',
+  'rgba(248, 231, 28, 0.5)',
+  'rgba(139, 87, 42, 0.5)',
+  'rgba(126, 211, 33, 0.5)',
+  'rgba(65, 117, 5, 0.5)',
+  'rgba(189, 16, 224, 0.5)',
+  'rgba(144, 19, 254, 0.5)',
+  'rgba(74, 144, 226, 0.5)',
+  'rgba(80, 227, 194, 0.5)',
+  'rgba(184, 233, 134, 0.5)',
+  'rgba(0, 0, 0, 0.5)',
+  'rgba(68, 68, 68, 0.5)',
+  'rgba(136, 136, 136, 0.5)',
+  'rgba(204, 204, 204, 0.5)',
+  'rgba(255, 255, 255, 0.5)',
+];
+
 const gradients = [
   {
     label: 'Vital Ocean',
@@ -129,6 +148,12 @@ export const Gradient: Story = {
   },
 };
 
+export const Transparent: Story = {
+  args: {
+    swatches: swatchesTransparent,
+  },
+};
+
 export const NoSwatches: Story = {
   args: {
     swatches: [],

From a8c9b01887fe9046fcfeaf8152e3ef3e9a28e017 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Sun, 19 Oct 2025 15:06:42 +0200
Subject: [PATCH 5/8] Contrast for rgb color

---
 packages/uui-color-swatch/lib/uui-color-swatch.element.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/uui-color-swatch/lib/uui-color-swatch.element.ts b/packages/uui-color-swatch/lib/uui-color-swatch.element.ts
index b76c2e59c..6f7759dd5 100644
--- a/packages/uui-color-swatch/lib/uui-color-swatch.element.ts
+++ b/packages/uui-color-swatch/lib/uui-color-swatch.element.ts
@@ -98,6 +98,10 @@ export class UUIColorSwatchElement extends LabelMixin(
     const color = this.color ?? this.value;
     if (color.startsWith('#')) {
       this._contrast = this.#contrast(color) === 'light' ? 'light' : 'dark';
+    } else if (color.startsWith('rgb')) {
+      const [r, g, b] = color.match(/\d+/g)?.map(Number) ?? [0, 0, 0];
+      this._contrast =
+        this.#contrast(this.#rgbToHex(r, g, b)) === 'light' ? 'light' : 'dark';
     }
   }
 
@@ -148,6 +152,9 @@ export class UUIColorSwatchElement extends LabelMixin(
     return [r, g, b];
   }
 
+  #rgbToHex = (r: number, g: number, b: number, hash: '#' | '' = ''): string =>
+    hash + ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');
+
   render() {
     return html`
       <button

From 26ffd4bcfa5ac3ccf7cf6b31a3ea226a5d030a0c Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Sun, 19 Oct 2025 15:46:06 +0200
Subject: [PATCH 6/8] Constrast when alpha

---
 .../uui-color-swatch/lib/uui-color-swatch.element.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/uui-color-swatch/lib/uui-color-swatch.element.ts b/packages/uui-color-swatch/lib/uui-color-swatch.element.ts
index 6f7759dd5..1cefd5438 100644
--- a/packages/uui-color-swatch/lib/uui-color-swatch.element.ts
+++ b/packages/uui-color-swatch/lib/uui-color-swatch.element.ts
@@ -99,9 +99,15 @@ export class UUIColorSwatchElement extends LabelMixin(
     if (color.startsWith('#')) {
       this._contrast = this.#contrast(color) === 'light' ? 'light' : 'dark';
     } else if (color.startsWith('rgb')) {
-      const [r, g, b] = color.match(/\d+/g)?.map(Number) ?? [0, 0, 0];
-      this._contrast =
-        this.#contrast(this.#rgbToHex(r, g, b)) === 'light' ? 'light' : 'dark';
+      const [r, g, b, a] = color.match(/[.\d]+/g)?.map(Number) ?? [0, 0, 0];
+      if (a <= 0.5) {
+        this._contrast = 'light';
+      } else {
+        this._contrast =
+          this.#contrast(this.#rgbToHex(r, g, b)) === 'light'
+            ? 'light'
+            : 'dark';
+      }
     }
   }
 

From 866ce7a9319e3839d44718e2b93091694150a97a Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Sun, 19 Oct 2025 16:00:32 +0200
Subject: [PATCH 7/8] Enforce white/black checkmark

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

diff --git a/packages/uui-color-swatch/lib/uui-color-swatch.element.ts b/packages/uui-color-swatch/lib/uui-color-swatch.element.ts
index 1cefd5438..421e0cc94 100644
--- a/packages/uui-color-swatch/lib/uui-color-swatch.element.ts
+++ b/packages/uui-color-swatch/lib/uui-color-swatch.element.ts
@@ -338,11 +338,13 @@ export class UUIColorSwatchElement extends LabelMixin(
       }
 
       .color-swatch.color-swatch--light .color-swatch__check {
-        filter: invert(0) brightness(0);
+        color: #000 !important;
+        filter: none;
       }
 
       .color-swatch.color-swatch--dark .color-swatch__check {
-        filter: invert(1) brightness(10);
+        color: #fff !important;
+        filter: none;
       }
 
       :host([selected]) .color-swatch__check {

From 6aeec78d858a2216442bc7dda8b3afb9e9f196fe Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Sun, 19 Oct 2025 17:57:00 +0200
Subject: [PATCH 8/8] Add a bit margin to margin to make selection more visible

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

diff --git a/packages/uui-color-swatch/lib/uui-color-swatch.element.ts b/packages/uui-color-swatch/lib/uui-color-swatch.element.ts
index 421e0cc94..b0e81c1c6 100644
--- a/packages/uui-color-swatch/lib/uui-color-swatch.element.ts
+++ b/packages/uui-color-swatch/lib/uui-color-swatch.element.ts
@@ -250,6 +250,7 @@ export class UUIColorSwatchElement extends LabelMixin(
         margin: 0;
         text-align: left;
         border-radius: 3px;
+        border: 1px solid #ccc;
       }
 
       :host(:not([selectable])) #swatch:focus {
@@ -291,6 +292,7 @@ export class UUIColorSwatchElement extends LabelMixin(
         flex-direction: column;
         justify-content: center;
         align-items: center;
+        margin: 2px;
       }
 
       :host([show-label]) .color-swatch {