umb icon element fallback colors and stylemap

src/packages/core/components/icon/icon.element.ts

@@ -1,6 +1,7 @@
 import { extractUmbColorVariable } from '../../resources/extractUmbColorVariable.function.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { html, customElement, property, state, ifDefined, css } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, property, state, ifDefined, css, styleMap } from '@umbraco-cms/backoffice/external/lit';
+import type { StyleInfo } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 /**
@@ -10,40 +11,26 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
  */
 @customElement('umb-icon')
 export class UmbIconElement extends UmbLitElement {
-	@state()
-	private _icon?: string;
+	#color?: string;
+	#fallbackColor?: string;
 
 	@state()
-	private _color?: string;
+	private _icon?: string;
 
 	@state()
-	private _fallbackColor?: string;
+	private _style: StyleInfo = {};
 
 	/**
 	 * Color alias or a color code directly.\
 	 * If a color has been set via the name property, this property will override it.
 	 * */
 	@property({ type: String })
 	public set color(value: string) {
-		if (value) {
-			this.#setColorStyle(value, true);
-		} else {
-			this._color = undefined;
-		}
+		this.#color = value;
+		this.#updateColorStyle();
 	}
-	public get color(): string {
-		return this._color ?? '';
-	}
-
-	#setColorStyle(value: string, dominant = false) {
-		const alias = value.replace('color-', '');
-		const variable = extractUmbColorVariable(alias);
-		const color = alias ? (variable ? `--uui-icon-color: var(${variable})` : `--uui-icon-color: ${alias}`) : undefined;
-		if (dominant) {
-			this._color = color;
-		} else {
-			this._fallbackColor = color;
-		}
+	public get color(): string | undefined {
+		return this.#color || this.#fallbackColor;
 	}
 
 	/**
@@ -53,23 +40,31 @@ export class UmbIconElement extends UmbLitElement {
 	@property({ type: String })
 	public set name(value: string | undefined) {
 		const [icon, color] = value ? value.split(' ') : [];
-
-		if (color) {
-			this.#setColorStyle(color);
-		} else {
-			this._fallbackColor = undefined;
-		}
-
+		this.#fallbackColor = color;
 		this._icon = icon;
+		this.#updateColorStyle();
 	}
 	public get name(): string | undefined {
 		return this._icon;
 	}
 
+	#updateColorStyle() {
+		const value = this.#color || this.#fallbackColor;
+
+		if (!value) {
+			this._style = { '--uui-icon-color': undefined };
+			return;
+		}
+
+		const color = value.replace('color-', '');
+		const variable = extractUmbColorVariable(color);
+		const styling = variable ? `var(${variable})` : color;
+
+		this._style = { '--uui-icon-color': styling };
+	}
+
 	override render() {
-		return html`<uui-icon
-			name=${ifDefined(this._icon)}
-			style=${ifDefined(this._color ?? this._fallbackColor)}></uui-icon>`;
+		return html`<uui-icon name=${ifDefined(this._icon)} style=${styleMap(this._style)}></uui-icon>`;
 	}
 
 	static override styles = [