From 772ad197c4309b0042eb82e914ceb85c35885083 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Wed, 8 Nov 2023 13:34:53 +0100
Subject: [PATCH] add var() modifier to access css custom prop

---
 .../core/modal/common/icon-picker/icon-picker-modal.element.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts
index 626b69aad6..de5bccd8e4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/icon-picker/icon-picker-modal.element.ts
@@ -89,7 +89,7 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 							// TODO: Missing translation for the color aliases.
 							this._colorList.map(
 							(color) => html`
-								<uui-color-swatch label="${color.alias}" title="${color.alias}" value=${color.alias} style="--uui-swatch-color: ${color.varName}"></uui-color-swatch>
+								<uui-color-swatch label="${color.alias}" title="${color.alias}" value=${color.alias} style="--uui-swatch-color: var(${color.varName})"></uui-color-swatch>
 							`,
 						)}
 					</uui-color-swatches>