Translations of colors

Author: bjarnef

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

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

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

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<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.name ?? color.alias}
-										title=${color.name ?? 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>

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' },
 ];
 
 /**