From 8c872eb2c18853598f1901227647999c333a1394 Mon Sep 17 00:00:00 2001
From: tsanislavgatev <tseko95@gmail.com>
Date: Mon, 27 Oct 2025 22:45:14 +0200
Subject: [PATCH] fix(ui5-color-palette-item): remove inline styles

---
 packages/main/src/ColorPaletteItem.ts                | 12 ++----------
 packages/main/src/ColorPaletteItemTemplate.tsx       |  3 ---
 packages/main/src/themes/ColorPaletteItem.css        |  1 +
 .../main/src/themes/base/ColorPalette-parameters.css |  1 +
 4 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/packages/main/src/ColorPaletteItem.ts b/packages/main/src/ColorPaletteItem.ts
index 92cff2cc70f7..b502757508ba 100644
--- a/packages/main/src/ColorPaletteItem.ts
+++ b/packages/main/src/ColorPaletteItem.ts
@@ -96,26 +96,18 @@ class ColorPaletteItem extends UI5Element implements IColorPaletteItem {
 	onBeforeRendering() {
 		this._disabled = !this.value;
 		this.onPhone = isPhone();
-		this.setAttribute("style", `background-color: ${this.value}`);
 
 		// since height is dynamically determined by padding-block-start
 		const itemHeight = this.offsetHeight + 4; // adding 4px for the offsets on top and bottom
 		this.style.setProperty(getScopedVarName("--_ui5_color_palette_item_height"), `${itemHeight}px`);
+
+		this.style.setProperty(getScopedVarName("--_ui5-color-palette-item-background-color"), `${this.value}`);
 	}
 
 	get colorLabel() {
 		return ColorPaletteItem.i18nBundle.getText(COLORPALETTE_COLOR_LABEL);
 	}
 
-	get styles() {
-		// Remove after deleting the hbs template, it's added in the jsx template
-		return {
-			root: {
-				"background-color": this.value,
-			},
-		};
-	}
-
 	get classes() {
 		// Remove after deleting the hbs template, it's added in the jsx template
 		return {
diff --git a/packages/main/src/ColorPaletteItemTemplate.tsx b/packages/main/src/ColorPaletteItemTemplate.tsx
index 5717620bfafc..6df6879e012c 100644
--- a/packages/main/src/ColorPaletteItemTemplate.tsx
+++ b/packages/main/src/ColorPaletteItemTemplate.tsx
@@ -4,9 +4,6 @@ export default function ColorPaletteItemTemplate(this: ColorPaletteItem) {
 	return (
 		<div
 			class="ui5-cp-item"
-			style={{
-				"background-color": this.value,
-			}}
 			tabindex={parseInt(this.forcedTabIndex)}
 			role="button"
 			aria-label={`${this.colorLabel} - ${this.index}: ${this.value}`}
diff --git a/packages/main/src/themes/ColorPaletteItem.css b/packages/main/src/themes/ColorPaletteItem.css
index 37a398597a1d..10dbe4dbf2b7 100644
--- a/packages/main/src/themes/ColorPaletteItem.css
+++ b/packages/main/src/themes/ColorPaletteItem.css
@@ -6,6 +6,7 @@
 	display: inline-block;
 	margin: var(--_ui5_color-palette-item-margin);
 	box-sizing: border-box;
+	background-color: var(--_ui5-color-palette-item-background-color);
 }
 
 :host(:not([_disabled]):hover),
diff --git a/packages/main/src/themes/base/ColorPalette-parameters.css b/packages/main/src/themes/base/ColorPalette-parameters.css
index 9778d8151f18..46aa8966543a 100644
--- a/packages/main/src/themes/base/ColorPalette-parameters.css
+++ b/packages/main/src/themes/base/ColorPalette-parameters.css
@@ -22,4 +22,5 @@
 	--_ui5-color-palette-item-mobile-focus-inset: 0.625rem;
 	--_ui5_color-palette-item-mobile-focus-sides-inset: 0.25rem 0.25rem;
 	--_ui5_color-palette-item-after-mobile-focus-border: var(--_ui5_color-palette-item-after-focus-color);
+	--_ui5-color-palette-item-background-color: transparent;
 }
\ No newline at end of file