Icon picker: Better title for icon colors (#20649)

* Better title for icon colors

* Add name for legacy colors

* Translations of colors

* Fixed import, adding missing colour, added Italian translations.

---------

Co-authored-by: Andy Butland <[email protected]>

Author: bjarnef

src/Umbraco.Web.UI.Client/src/assets/lang/da.ts

@@ -1009,7 +1009,18 @@ 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',
+		grey: 'Grå',
 	},
 	shortcuts: {
 		addGroup: 'Tilføj fane',

src/Umbraco.Web.UI.Client/src/assets/lang/de.ts

@@ -903,7 +903,18 @@ 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ß',
+		grey: 'Grau',
 	},
 	shortcuts: {
 		addTab: 'Tab hinzufügen',

src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts

@@ -35,6 +35,9 @@ export default {
 		showLabelDescription:
 			'Displays colored field and a label for each color in the color picker, rather than just a colored field.',
 	},
+	colors: {
+		grey: 'Gray',
+	},
 	create: {
 		folderDescription: 'Used to organize items and other folders. Keep items structured and easy to access.',
 	},

src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

@@ -1019,7 +1019,18 @@ 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',
+		grey: 'Grey',
 	},
 	shortcuts: {
 		addGroup: 'Add group',

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',

src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts

@@ -16,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<UmbIconPickerModalData, UmbIconPickerModalValue> {
@@ -87,12 +88,11 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 						label=${this.localize.term('defaultdialogs_colorSwitcher')}
 						@change=${this.#onColorChange}>
 						${
-							// TODO: Missing localization for the color aliases. [NL]
 							this._colorList.map(
 								(color) => html`
 									<uui-color-swatch
-										label=${color.alias}
-										title=${color.alias}
+										label=${this.localize.term('colors_' + toCamelCase(color.alias))}
+										title=${this.localize.term('colors_' + toCamelCase(color.alias))}
 										value=${color.alias}
 										style="--uui-swatch-color: var(${color.varName})">
 									</uui-color-swatch>