Better title for icon colors

Author: bjarnef

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<UmbIconPicker
 							this._colorList.map(
 								(color) => html`
 									<uui-color-swatch
-										label=${color.alias}
-										title=${color.alias}
+										label=${color.name ?? color.alias}
+										title=${color.name ?? color.alias}
 										value=${color.alias}
 										style="--uui-swatch-color: var(${color.varName})">
 									</uui-color-swatch>

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