From ca7e30721dc19d87a28b41f9faf7d7ae4c501770 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 10 Apr 2026 20:24:49 +0200 Subject: [PATCH 1/3] use currentColor as color fallback --- .../packages/core/components/icon/icon.element.ts | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/icon/icon.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/icon/icon.element.ts index 35f31347b20b..375a577ec3ba 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/icon/icon.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/icon/icon.element.ts @@ -1,7 +1,6 @@ import { extractUmbColorVariable } from '../../resources/extractUmbColorVariable.function.js'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { html, customElement, property, state, ifDefined, css, styleMap } from '@umbraco-cms/backoffice/external/lit'; -import type { StyleInfo } from '@umbraco-cms/backoffice/external/lit'; +import { html, customElement, property, state, ifDefined, css } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; /** @@ -17,9 +16,6 @@ export class UmbIconElement extends UmbLitElement { @state() private _icon?: string; - @state() - 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. @@ -53,7 +49,7 @@ export class UmbIconElement extends UmbLitElement { const value = this.#color || this.#fallbackColor; if (!value) { - this._style = { '--uui-icon-color': 'inherit' }; + this.style.removeProperty('--uui-icon-color'); return; } @@ -61,11 +57,11 @@ export class UmbIconElement extends UmbLitElement { const variable = extractUmbColorVariable(color); const styling = variable ? `var(${variable})` : color; - this._style = { '--uui-icon-color': styling }; + this.style.setProperty('--uui-icon-color', styling); } override render() { - return html``; + return html``; } static override styles = [ @@ -75,6 +71,7 @@ export class UmbIconElement extends UmbLitElement { display: flex; justify-content: center; align-items: center; + --uui-icon-color: currentColor; } `, ]; From 368ae4021c78aedd0448669edab6fcd2e4cd6928 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 10 Apr 2026 20:28:37 +0200 Subject: [PATCH 2/3] clean up necessary prop --- .../src/packages/core/components/icon/icon.element.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/icon/icon.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/icon/icon.element.ts index 375a577ec3ba..25707c07a035 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/icon/icon.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/icon/icon.element.ts @@ -71,7 +71,6 @@ export class UmbIconElement extends UmbLitElement { display: flex; justify-content: center; align-items: center; - --uui-icon-color: currentColor; } `, ]; From 5d4bb118a1e93aa76ce336c286946cf95af45481 Mon Sep 17 00:00:00 2001 From: engjlr Date: Wed, 15 Apr 2026 10:30:57 +0200 Subject: [PATCH 3/3] Add test color behavior coverage for umb-icon --- .../core/components/icon/icon.test.ts | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/icon/icon.test.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/icon/icon.test.ts index 5c658d5ed128..ceddb6ecfc3d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/icon/icon.test.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/icon/icon.test.ts @@ -17,4 +17,43 @@ describe('UmbIconElement', () => { await expect(element).shadowDom.to.be.accessible(defaultA11yConfig); }); } + + describe('color handling', () => { + it('does not set --uui-icon-color when no color is provided', () => { + expect(element.style.getPropertyValue('--uui-icon-color')).to.equal(''); + }); + + it('sets --uui-icon-color to a raw color value', async () => { + element.color = '#ff0000'; + await element.updateComplete; + expect(element.style.getPropertyValue('--uui-icon-color')).to.equal('#ff0000'); + }); + + it('resolves a color alias to the matching CSS variable', async () => { + element.color = 'color-red'; + await element.updateComplete; + expect(element.style.getPropertyValue('--uui-icon-color')).to.equal('var(--uui-palette-maroon-flush)'); + }); + + it('resolves a color suffix from the name property', async () => { + element.name = 'icon-heart color-red'; + await element.updateComplete; + expect(element.style.getPropertyValue('--uui-icon-color')).to.equal('var(--uui-palette-maroon-flush)'); + }); + + it('prefers the color property over the name suffix', async () => { + element.name = 'icon-heart color-red'; + element.color = 'color-green'; + await element.updateComplete; + expect(element.style.getPropertyValue('--uui-icon-color')).to.equal('var(--uui-palette-jungle-green)'); + }); + + it('removes --uui-icon-color when color is cleared', async () => { + element.color = 'color-red'; + await element.updateComplete; + element.color = ''; + await element.updateComplete; + expect(element.style.getPropertyValue('--uui-icon-color')).to.equal(''); + }); + }); });