From 523e5dd15500c552b53ce46d71495e4e14b5efa6 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Sat, 25 Oct 2025 18:01:14 +0200 Subject: [PATCH 1/4] Better title for icon colors --- .../icon-picker-modal.element.ts | 4 ++-- .../extractUmbColorVariable.function.ts | 18 +++++++++--------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts index 7227be73a0d3..e6c1037d8492 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts @@ -91,8 +91,8 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement html` diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/resources/extractUmbColorVariable.function.ts b/src/Umbraco.Web.UI.Client/src/packages/core/resources/extractUmbColorVariable.function.ts index 2db31e025991..b3d27e94697d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/resources/extractUmbColorVariable.function.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/resources/extractUmbColorVariable.function.ts @@ -1,15 +1,15 @@ // TODO: This does not belong here, lets move it to the icon package. export const umbracoColors = [ - { alias: 'text', varName: '--uui-color-text' }, - { alias: 'yellow', varName: '--uui-palette-sunglow' }, - { alias: 'pink', varName: '--uui-palette-spanish-pink' }, - { alias: 'blue', varName: '--uui-palette-violet-blue' }, - { alias: 'light-blue', varName: '--uui-palette-malibu' }, - { alias: 'red', varName: '--uui-palette-maroon-flush' }, - { alias: 'green', varName: '--uui-palette-jungle-green' }, - { alias: 'brown', varName: '--uui-palette-chamoisee' }, - { alias: 'grey', varName: '--uui-palette-dusty-grey' }, + { name: 'Black', alias: 'text', varName: '--uui-color-text' }, + { name: 'Yellow', alias: 'yellow', varName: '--uui-palette-sunglow' }, + { name: 'Pink', alias: 'pink', varName: '--uui-palette-spanish-pink' }, + { name: 'Blue', alias: 'blue', varName: '--uui-palette-violet-blue' }, + { name: 'Light Blue', alias: 'light-blue', varName: '--uui-palette-malibu' }, + { name: 'Red', alias: 'red', varName: '--uui-palette-maroon-flush' }, + { name: 'Green', alias: 'green', varName: '--uui-palette-jungle-green' }, + { name: 'Brown', alias: 'brown', varName: '--uui-palette-chamoisee' }, + { name: 'Grey', alias: 'grey', varName: '--uui-palette-dusty-grey' }, { alias: 'black', legacy: true, varName: '--uui-color-text' }, { alias: 'blue-grey', legacy: true, varName: '--uui-palette-dusty-grey' }, From 3cd8d198b5a21586e10959b90b0aba58cfa88ce3 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Mon, 27 Oct 2025 19:39:21 +0100 Subject: [PATCH 2/4] Add name for legacy colors --- .../extractUmbColorVariable.function.ts | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/resources/extractUmbColorVariable.function.ts b/src/Umbraco.Web.UI.Client/src/packages/core/resources/extractUmbColorVariable.function.ts index b3d27e94697d..05ce111a1e72 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/resources/extractUmbColorVariable.function.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/resources/extractUmbColorVariable.function.ts @@ -11,17 +11,17 @@ export const umbracoColors = [ { name: 'Brown', alias: 'brown', varName: '--uui-palette-chamoisee' }, { name: 'Grey', alias: 'grey', varName: '--uui-palette-dusty-grey' }, - { alias: 'black', legacy: true, varName: '--uui-color-text' }, - { alias: 'blue-grey', legacy: true, varName: '--uui-palette-dusty-grey' }, - { alias: 'indigo', legacy: true, varName: '--uui-palette-malibu' }, - { alias: 'purple', legacy: true, varName: '--uui-palette-space-cadet' }, - { alias: 'deep-purple', legacy: true, varName: '--uui-palette-space-cadet' }, - { alias: 'cyan', legacy: true, varName: '-uui-palette-jungle-green' }, - { alias: 'light-green', legacy: true, varName: '-uui-palette-jungle-green' }, - { alias: 'lime', legacy: true, varName: '-uui-palette-jungle-green' }, - { alias: 'amber', legacy: true, varName: '--uui-palette-chamoisee' }, - { alias: 'orange', legacy: true, varName: '--uui-palette-chamoisee' }, - { alias: 'deep-orange', legacy: true, varName: '--uui-palette-cocoa-brown' }, + { name: 'Black', alias: 'black', legacy: true, varName: '--uui-color-text' }, + { name: 'Blue Grey', alias: 'blue-grey', legacy: true, varName: '--uui-palette-dusty-grey' }, + { name: 'Indigo', alias: 'indigo', legacy: true, varName: '--uui-palette-malibu' }, + { name: 'Purple', alias: 'purple', legacy: true, varName: '--uui-palette-space-cadet' }, + { name: 'Deep Purple', alias: 'deep-purple', legacy: true, varName: '--uui-palette-space-cadet' }, + { name: 'Cyan', alias: 'cyan', legacy: true, varName: '-uui-palette-jungle-green' }, + { name: 'Light Green', alias: 'light-green', legacy: true, varName: '-uui-palette-jungle-green' }, + { name: 'Lime', alias: 'lime', legacy: true, varName: '-uui-palette-jungle-green' }, + { name: 'Amber', alias: 'amber', legacy: true, varName: '--uui-palette-chamoisee' }, + { name: 'Orange', alias: 'orange', legacy: true, varName: '--uui-palette-chamoisee' }, + { name: 'Deep Orange', alias: 'deep-orange', legacy: true, varName: '--uui-palette-cocoa-brown' }, ]; /** From 509d6e478c1bcfd98f7db18b6e74a3d0b40c0ae1 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Tue, 28 Oct 2025 23:28:33 +0100 Subject: [PATCH 3/4] Translations of colors --- .../src/assets/lang/da.ts | 10 +++++ .../src/assets/lang/de.ts | 10 +++++ .../src/assets/lang/en.ts | 10 +++++ .../icon-picker-modal.element.ts | 6 +-- .../extractUmbColorVariable.function.ts | 40 +++++++++---------- 5 files changed, 53 insertions(+), 23 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/da.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/da.ts index 7836b24781f3..799cb2afbd89 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/da.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/da.ts @@ -1006,7 +1006,17 @@ export default { document: 'Dokument', }, colors: { + black: 'Sort', blue: 'Blå', + brown: 'Brun', + cyan: 'Cyan', + green: 'Grøn', + lightBlue: 'Lyseblå', + pink: 'Lyserød', + red: 'Rød', + text: 'Sort', + yellow: 'Gul', + white: 'Hvid', }, shortcuts: { addGroup: 'Tilføj fane', diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/de.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/de.ts index 071dae12ee0e..59512bf2f3ac 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/de.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/de.ts @@ -903,7 +903,17 @@ export default { newVersionAvailable: 'Neue Version verfügbar', }, colors: { + black: 'Schwarz', blue: 'Blau', + brown: 'Braun', + cyan: 'Cyan', + green: 'Grün', + lightBlue: 'Hellblau', + pink: 'Pink', + red: 'Rot', + text: 'Schwarz', + yellow: 'Gelb', + white: 'Weiß', }, shortcuts: { addTab: 'Tab hinzufügen', diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts index f57a8dbea347..410aea7fe85a 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts @@ -1013,7 +1013,17 @@ export default { }, }, colors: { + black: 'Black', blue: 'Blue', + brown: 'Brown', + cyan: 'Cyan', + green: 'Green', + lightBlue: 'Light Blue', + pink: 'Pink', + red: 'Red', + text: 'Black', + yellow: 'Yellow', + white: 'White', }, shortcuts: { addGroup: 'Add group', diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts index e6c1037d8492..811f6a57c7a2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts @@ -1,6 +1,7 @@ import type { UmbIconDefinition } from '../types.js'; import { UMB_ICON_REGISTRY_CONTEXT } from '../icon-registry.context-token.js'; import type { UmbIconPickerModalData, UmbIconPickerModalValue } from './icon-picker-modal.token.js'; +import { toCamelCase } from '../to-camel-case/index.js'; import { css, customElement, @@ -87,12 +88,11 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement ${ - // TODO: Missing localization for the color aliases. [NL] this._colorList.map( (color) => html` diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/resources/extractUmbColorVariable.function.ts b/src/Umbraco.Web.UI.Client/src/packages/core/resources/extractUmbColorVariable.function.ts index 05ce111a1e72..2db31e025991 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/resources/extractUmbColorVariable.function.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/resources/extractUmbColorVariable.function.ts @@ -1,27 +1,27 @@ // TODO: This does not belong here, lets move it to the icon package. export const umbracoColors = [ - { name: 'Black', alias: 'text', varName: '--uui-color-text' }, - { name: 'Yellow', alias: 'yellow', varName: '--uui-palette-sunglow' }, - { name: 'Pink', alias: 'pink', varName: '--uui-palette-spanish-pink' }, - { name: 'Blue', alias: 'blue', varName: '--uui-palette-violet-blue' }, - { name: 'Light Blue', alias: 'light-blue', varName: '--uui-palette-malibu' }, - { name: 'Red', alias: 'red', varName: '--uui-palette-maroon-flush' }, - { name: 'Green', alias: 'green', varName: '--uui-palette-jungle-green' }, - { name: 'Brown', alias: 'brown', varName: '--uui-palette-chamoisee' }, - { name: 'Grey', alias: 'grey', varName: '--uui-palette-dusty-grey' }, + { alias: 'text', varName: '--uui-color-text' }, + { alias: 'yellow', varName: '--uui-palette-sunglow' }, + { alias: 'pink', varName: '--uui-palette-spanish-pink' }, + { alias: 'blue', varName: '--uui-palette-violet-blue' }, + { alias: 'light-blue', varName: '--uui-palette-malibu' }, + { alias: 'red', varName: '--uui-palette-maroon-flush' }, + { alias: 'green', varName: '--uui-palette-jungle-green' }, + { alias: 'brown', varName: '--uui-palette-chamoisee' }, + { alias: 'grey', varName: '--uui-palette-dusty-grey' }, - { name: 'Black', alias: 'black', legacy: true, varName: '--uui-color-text' }, - { name: 'Blue Grey', alias: 'blue-grey', legacy: true, varName: '--uui-palette-dusty-grey' }, - { name: 'Indigo', alias: 'indigo', legacy: true, varName: '--uui-palette-malibu' }, - { name: 'Purple', alias: 'purple', legacy: true, varName: '--uui-palette-space-cadet' }, - { name: 'Deep Purple', alias: 'deep-purple', legacy: true, varName: '--uui-palette-space-cadet' }, - { name: 'Cyan', alias: 'cyan', legacy: true, varName: '-uui-palette-jungle-green' }, - { name: 'Light Green', alias: 'light-green', legacy: true, varName: '-uui-palette-jungle-green' }, - { name: 'Lime', alias: 'lime', legacy: true, varName: '-uui-palette-jungle-green' }, - { name: 'Amber', alias: 'amber', legacy: true, varName: '--uui-palette-chamoisee' }, - { name: 'Orange', alias: 'orange', legacy: true, varName: '--uui-palette-chamoisee' }, - { name: 'Deep Orange', alias: 'deep-orange', legacy: true, varName: '--uui-palette-cocoa-brown' }, + { alias: 'black', legacy: true, varName: '--uui-color-text' }, + { alias: 'blue-grey', legacy: true, varName: '--uui-palette-dusty-grey' }, + { alias: 'indigo', legacy: true, varName: '--uui-palette-malibu' }, + { alias: 'purple', legacy: true, varName: '--uui-palette-space-cadet' }, + { alias: 'deep-purple', legacy: true, varName: '--uui-palette-space-cadet' }, + { alias: 'cyan', legacy: true, varName: '-uui-palette-jungle-green' }, + { alias: 'light-green', legacy: true, varName: '-uui-palette-jungle-green' }, + { alias: 'lime', legacy: true, varName: '-uui-palette-jungle-green' }, + { alias: 'amber', legacy: true, varName: '--uui-palette-chamoisee' }, + { alias: 'orange', legacy: true, varName: '--uui-palette-chamoisee' }, + { alias: 'deep-orange', legacy: true, varName: '--uui-palette-cocoa-brown' }, ]; /** From 2e739245f023a1035906a51487d6af898b5bbb78 Mon Sep 17 00:00:00 2001 From: Andy Butland Date: Wed, 29 Oct 2025 07:09:05 +0100 Subject: [PATCH 4/4] Fixed import, adding missing colour, added Italian translations. --- src/Umbraco.Web.UI.Client/src/assets/lang/da.ts | 1 + src/Umbraco.Web.UI.Client/src/assets/lang/de.ts | 1 + src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts | 3 +++ src/Umbraco.Web.UI.Client/src/assets/lang/en.ts | 1 + src/Umbraco.Web.UI.Client/src/assets/lang/it.ts | 11 +++++++++++ .../icon-picker-modal/icon-picker-modal.element.ts | 2 +- 6 files changed, 18 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/da.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/da.ts index 799cb2afbd89..00843703e172 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/da.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/da.ts @@ -1017,6 +1017,7 @@ export default { text: 'Sort', yellow: 'Gul', white: 'Hvid', + grey: 'Grå', }, shortcuts: { addGroup: 'Tilføj fane', diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/de.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/de.ts index 59512bf2f3ac..3824449b25ae 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/de.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/de.ts @@ -914,6 +914,7 @@ export default { text: 'Schwarz', yellow: 'Gelb', white: 'Weiß', + grey: 'Grau', }, shortcuts: { addTab: 'Tab hinzufügen', diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts index 4e33e9ef361d..156695fa3118 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts @@ -35,6 +35,9 @@ export default { showLabelDescription: 'Stores colors as a JSON object containing both the color hex string and label, rather than just the hex string.', }, + colors: { + grey: 'Gray', + }, create: { folderDescription: 'Used to organize items and other folders. Keep items structured and easy to access.', }, diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts index 410aea7fe85a..a54f9d7b407d 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts @@ -1024,6 +1024,7 @@ export default { text: 'Black', yellow: 'Yellow', white: 'White', + grey: 'Grey', }, shortcuts: { addGroup: 'Add group', diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/it.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/it.ts index ac59d1457fff..219d1a289967 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/it.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/it.ts @@ -850,7 +850,18 @@ export default { avatar: 'Avatar per', }, colors: { + black: 'Nero', blue: 'Blu', + brown: 'Marrone', + cyan: 'Ciano', + green: 'Verde', + lightBlue: 'Azzurro', + pink: 'Rosa', + red: 'Rosso', + text: 'Nero', + yellow: 'Giallo', + white: 'Bianco', + grey: 'Grigio', }, shortcuts: { addGroup: 'Aggiungi gruppo', diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts index 811f6a57c7a2..ea94404e2f84 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts @@ -1,7 +1,6 @@ import type { UmbIconDefinition } from '../types.js'; import { UMB_ICON_REGISTRY_CONTEXT } from '../icon-registry.context-token.js'; import type { UmbIconPickerModalData, UmbIconPickerModalValue } from './icon-picker-modal.token.js'; -import { toCamelCase } from '../to-camel-case/index.js'; import { css, customElement, @@ -17,6 +16,7 @@ import { umbFocus } from '@umbraco-cms/backoffice/lit-element'; import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import type { UUIColorSwatchesEvent } from '@umbraco-cms/backoffice/external/uui'; +import { toCamelCase } from '@umbraco-cms/backoffice/utils'; @customElement('umb-icon-picker-modal') export class UmbIconPickerModalElement extends UmbModalBaseElement {