feat(theme): Mitigate color token update for whitelabel users

- Added mapper of new/old color tokens.
- Added a message to prompt admin users with whitelabel customisation to check and update their settings.

Author: YohYamasaki

src/common/gui/ThemeController.ts

@@ -5,9 +5,9 @@ import Stream from "mithril/stream"
 import { assertMainOrNodeBoot, isApp, isDesktop } from "../api/common/Env"
 import { downcast, findAndRemove, LazyLoaded, mapAndFilterNull, typedValues } from "@tutao/tutanota-utils"
 import m from "mithril"
-import type { BaseThemeId, Theme, ThemeId, ThemePreference } from "./theme"
+import { BaseThemeId, theme, Theme, ThemeId, ThemePreference } from "./theme"
 import { logoDefaultGrey, themes } from "./builtinThemes"
-import type { ThemeCustomizations } from "../misc/WhitelabelCustomizations"
+import { ThemeCustomizations } from "../misc/WhitelabelCustomizations"
 import { getWhitelabelCustomizations } from "../misc/WhitelabelCustomizations"
 import { getCalendarLogoSvg, getMailLogoSvg } from "./base/Logo"
 import { ThemeFacade } from "../native/common/generatedipc/ThemeFacade"
@@ -70,6 +70,46 @@ export class ThemeController {
 		}
 	}
 
+	/**
+	 * Color token mapper from the old to the new.
+	 * If there are colors explicitly defined for the new tokens, they will be respected and the mapped colors will be overwritten.
+	 * Since the number of new tokens is less than the number of old tokens, it is impossible to map all colors. Thus, this is just for mitigation purposes.
+	 * This mapper could be removed after all users who have whitelabel color customization have migrated to the new color tokens.
+	 */
+	public static mapOldToNewColorTokens(customizations: Partial<ThemeCustomizations>): ThemeCustomizations {
+		let mappedCustomizations: Record<string, string> = {}
+		for (const [oldToken, hex] of Object.entries(customizations)) {
+			if (!oldToken || !hex) continue
+			const newToken: string | undefined = oldToNewColorTokenMap[oldToken]
+			if (newToken) {
+				mappedCustomizations[newToken] = hex
+			}
+			mappedCustomizations[oldToken] = hex
+		}
+		return downcast(mappedCustomizations)
+	}
+
+	/**
+	 * Color token mapper from the new to the old.
+	 * This mapper could be removed after all users who have whitelabel color customization have migrated to the new color tokens.
+	 */
+	public static mapNewToOldColorTokens(customizations: Partial<ThemeCustomizations>): ThemeCustomizations {
+		let mappedCustomizations: Record<string, string> = {}
+
+		for (const [newToken, hex] of Object.entries(customizations)) {
+			if (!newToken || !hex) continue
+			const mappedOldTokens: string[] | undefined = newToOldColorTokenMap[newToken]
+			if (mappedOldTokens) {
+				for (const oldToken of mappedOldTokens) {
+					mappedCustomizations[oldToken] = hex
+				}
+			}
+			mappedCustomizations[newToken] = hex
+		}
+
+		return downcast(mappedCustomizations)
+	}
+
 	/**
 	 * Determines if the current theme is a light theme.
 	 *
@@ -181,7 +221,7 @@ export class ThemeController {
 	 * Apply the custom theme, if permanent === true, then the new theme will be saved
 	 */
 	async applyCustomizations(customizations: ThemeCustomizations, permanent: boolean = true): Promise<Theme> {
-		const updatedTheme = this.assembleTheme(customizations)
+		const updatedTheme = this.assembleTheme(ThemeController.mapOldToNewColorTokens(customizations))
 		// Set no logo until we sanitize it.
 		const filledWithoutLogo = Object.assign({}, updatedTheme, {
 			logo: "",
@@ -329,3 +369,53 @@ export class WebThemeFacade implements ThemeFacade {
 		this.mediaQuery?.addEventListener("change", listener)
 	}
 }
+
+const oldToNewColorTokenMap: Record<string, string> = {
+	button_bubble_bg: "secondary",
+	button_bubble_fg: "on_secondary",
+	content_bg: "surface",
+	content_fg: "on_surface",
+	content_button: "on_surface_variant",
+	content_button_selected: "primary",
+	content_button_icon: "on_primary",
+	content_button_icon_selected: "on_primary",
+	content_accent: "primary",
+	content_border: "outline",
+	content_message_bg: "on_surface_fade",
+	header_bg: "surface",
+	header_box_shadow_bg: "outline",
+	header_button: "on_surface_variant",
+	header_button_selected: "primary",
+	list_bg: "surface",
+	list_alternate_bg: "surface_container",
+	list_accent_fg: "primary",
+	list_message_bg: "on_surface_fade",
+	list_border: "outline_variant",
+	modal_bg: "scrim",
+	elevated_bg: "surface",
+	navigation_bg: "surface_container",
+	navigation_border: "outline_variant",
+	navigation_button: "on_surface_variant",
+	navigation_button_icon: "on_primary",
+	navigation_button_selected: "primary",
+	navigation_button_icon_selected: "on_primary",
+	navigation_menu_bg: "secondary",
+	navigation_menu_icon: "on_secondary",
+	error_color: "error",
+} as const
+
+const newToOldColorTokenMap: Record<string, string[]> = {
+	secondary: ["button_bubble_bg", "navigation_menu_bg"],
+	on_secondary: ["button_bubble_fg", "navigation_menu_icon"],
+	surface: ["content_bg", "header_bg", "list_bg", "elevated_bg"],
+	on_surface: ["content_fg"],
+	on_surface_variant: ["content_button", "header_button", "navigation_button"],
+	primary: ["content_accent", "content_button_selected", "header_button_selected", "list_accent_fg", "navigation_button_selected"],
+	on_primary: ["content_button_icon", "content_button_icon_selected", "navigation_button_icon", "navigation_button_icon_selected"],
+	outline: ["content_border", "header_box_shadow_bg"],
+	on_surface_fade: ["content_message_bg", "list_message_bg"],
+	surface_container: ["list_alternate_bg", "navigation_bg"],
+	outline_variant: ["list_border", "navigation_border"],
+	scrim: ["modal_bg"],
+	error: ["error_color"],
+} as const

src/common/misc/TranslationKey.ts

@@ -2012,3 +2012,6 @@ export type TranslationKeyType =
 	| "zoomIn_action"
 	| "zoomOut_action"
 	| "emptyString_msg"
+	| "updateColorCustomizationNews_title"
+	| "updateColorCustomizationNews_msg"
+	| "updateColorCustomizationNewsButton_label"

src/common/misc/WhitelabelCustomizations.ts

@@ -1,6 +1,7 @@
-import type { BaseThemeId, Theme } from "../gui/theme"
+import { BaseThemeId, theme, Theme } from "../gui/theme"
 import { assertMainOrNodeBoot } from "../api/common/Env"
 import type { WhitelabelConfig } from "../api/entities/sys/TypeRefs.js"
+import { ThemeController } from "../gui/ThemeController.js"
 
 assertMainOrNodeBoot()
 export type ThemeCustomizations = Partial<Theme> & {
@@ -27,5 +28,5 @@ export function getWhitelabelCustomizations(window: Window): WhitelabelCustomiza
 }
 
 export function getThemeCustomizations(whitelabelConfig: WhitelabelConfig): ThemeCustomizations {
-	return JSON.parse(whitelabelConfig.jsonTheme, (k, v) => (k === "__proto__" ? undefined : v))
+	return ThemeController.mapOldToNewColorTokens(JSON.parse(whitelabelConfig.jsonTheme, (k, v) => (k === "__proto__" ? undefined : v)))
 }

src/common/misc/news/NewsDialog.ts

@@ -39,6 +39,7 @@ export function showNewsDialog(newsModel: NewsModel) {
 						? m(NewsList, {
 								liveNewsIds: newsModel.liveNewsIds,
 								liveNewsListItems: newsModel.liveNewsListItems,
+								dialog,
 						  })
 						: m(
 								".flex-center.mt-l",

src/common/misc/news/NewsList.ts

@@ -4,10 +4,12 @@ import { NewsListItem } from "./NewsListItem.js"
 import ColumnEmptyMessageBox from "../../gui/base/ColumnEmptyMessageBox.js"
 import { theme } from "../../gui/theme.js"
 import { Icons } from "../../gui/base/icons/Icons.js"
+import { Dialog } from "../../gui/base/Dialog.js"
 
 export interface NewsListAttrs {
 	liveNewsListItems: Record<string, NewsListItem>
 	liveNewsIds: NewsId[]
+	dialog: Dialog
 }
 
 /**
@@ -28,7 +30,11 @@ export class NewsList implements Component<NewsListAttrs> {
 			vnode.attrs.liveNewsIds.map((liveNewsId) => {
 				const newsListItem = vnode.attrs.liveNewsListItems[liveNewsId.newsItemName]
 
-				return m(".pt.pl-l.pr-l.flex.fill.border-grey.left.list-border-bottom", { key: liveNewsId.newsItemId }, newsListItem.render(liveNewsId))
+				return m(
+					".pt.pl-l.pr-l.flex.fill.border-grey.left.list-border-bottom",
+					{ key: liveNewsId.newsItemId },
+					newsListItem.render(liveNewsId, vnode.attrs.dialog),
+				)
 			}),
 		)
 	}

src/common/misc/news/NewsListItem.ts

@@ -1,5 +1,6 @@
 import { Children } from "mithril"
 import { NewsId } from "../../api/entities/tutanota/TypeRefs.js"
+import { Dialog } from "../../gui/base/Dialog.js"
 
 /**
  * News items must implement this interface to be rendered.
@@ -8,7 +9,7 @@ export interface NewsListItem {
 	/**
 	 * Returns the rendered NewsItem. Should display a button that acknowledges the news via NewsModel.acknowledge().
 	 */
-	render(newsId: NewsId): Children
+	render(newsId: NewsId, dialog?: Dialog): Children
 
 	/**
 	 * Return true iff the news should be shown to the logged-in user.

src/common/misc/news/items/UpdateColorCustomizationNews.ts

@@ -0,0 +1,47 @@
+import { NewsListItem } from "../NewsListItem.js"
+import m, { Children } from "mithril"
+import { NewsId } from "../../../api/entities/tutanota/TypeRefs.js"
+import { lang } from "../../LanguageViewModel.js"
+import { Button, ButtonType } from "../../../gui/base/Button.js"
+import { NewsModel } from "../NewsModel.js"
+import { UserController } from "../../../api/main/UserController.js"
+import { Dialog } from "../../../gui/base/Dialog.js"
+
+/**
+ * News item that informs admin users that the new pricing offer is ending soon.
+ */
+export class UpdateColorCustomizationNews implements NewsListItem {
+	constructor(private readonly newsModel: NewsModel, private readonly userController: UserController) {}
+
+	async isShown(): Promise<boolean> {
+		return this.userController.isGlobalAdmin() && this.userController.isWhitelabelAccount()
+	}
+
+	render(newsId: NewsId, dialog: Dialog): Children {
+		const acknowledge = () => {
+			this.newsModel.acknowledgeNews(newsId.newsItemId).then(m.redraw)
+		}
+
+		return m(".full-width", [
+			m(".h4.pb", lang.get("updateColorCustomizationNews_title")),
+			m(".pb", lang.get("updateColorCustomizationNews_msg")),
+			m(
+				".flex-end.gap-hpad.flex-no-grow-no-shrink-auto.flex-wrap",
+				m(Button, {
+					label: "updateColorCustomizationNewsButton_label",
+					click: async () => {
+						m.route.set("/settings/whitelabel")
+						acknowledge()
+						dialog.close()
+					},
+					type: ButtonType.Primary,
+				}),
+				m(Button, {
+					label: "close_alt",
+					click: acknowledge,
+					type: ButtonType.Secondary,
+				}),
+			),
+		])
+	}
+}

src/common/settings/whitelabel/CustomColorEditor.ts

@@ -17,12 +17,6 @@ import { BaseThemeId } from "../../gui/theme"
 export type SimpleCustomColorEditorAttrs = {
 	model: CustomColorsEditorViewModel
 }
-export type ColorCategories = {
-	content: Array<CustomColor>
-	header: Array<CustomColor>
-	navigation: Array<CustomColor>
-	other: Array<CustomColor>
-}
 export const COLOR_PICKER_WIDTH = 400
 export const ADVANCED_TEXTFIELD_WIDTH = 344
 export const CATEGORY_WIDTH = 750
@@ -44,33 +38,14 @@ export class CustomColorEditor implements Component<SimpleCustomColorEditorAttrs
 			label: "accentColor_label",
 			value: vnode.attrs.model.accentColor,
 			injectionsRight: () =>
-				renderColorPicker(
-					(inputEvent) => {
-						vnode.attrs.model.changeAccentColor(downcast<HTMLInputElement>(inputEvent.target).value)
-						m.redraw()
-					},
-					vnode.attrs.model.accentColor,
-					({ dom }) => (this._colorPickerDom = dom as HTMLInputElement),
-				),
+				renderColorPicker((inputEvent) => {
+					vnode.attrs.model.changeAccentColor(downcast<HTMLInputElement>(inputEvent.target).value)
+					m.redraw()
+				}, vnode.attrs.model.accentColor),
 			maxWidth: COLOR_PICKER_WIDTH,
 			isReadOnly: true,
 		}
 
-		/*
-	Currently:
-		Button:
-		Content:
-		Elevated:
-		Header:
-		List:
-		Modal:
-		Navigation:
-		Then:
-		Content: Content, List
-		Header: Header
-		Navigation: Navigation
-		Other: Button, Elevated, Modal
-	 */
 		return m("", [
 			m("", [
 				m(".flex", [
@@ -112,52 +87,23 @@ export class CustomColorEditor implements Component<SimpleCustomColorEditorAttrs
 					[
 						m(".small.mt", lang.get("customColorsInfo_msg")),
 						m(".flex.flex-column", [
-							Object.entries(this._getGroupedColors(model.customColors)).map(([name, colors]) => {
-								return m("", [
-									m(".h4.mt-l", capitalizeFirstLetterOfString(name)),
-									m(
-										".editor-border.text-break.wrapping-row",
-										{
-											style: {
-												maxWidth: px(CATEGORY_WIDTH),
-											},
+							m("", [
+								m(
+									".editor-border.text-break.wrapping-row",
+									{
+										style: {
+											maxWidth: px(CATEGORY_WIDTH),
 										},
-										[colors.map((c) => renderCustomColorField(model, c))],
-									),
-								])
-							}),
+									},
+									[model.customColors.map((c) => renderCustomColorField(model, c))],
+								),
+							]),
 						]),
 					],
 				),
 			]),
 		])
 	}
-
-	/**
-	 *
-	 */
-	_getGroupedColors(colors: ReadonlyArray<CustomColor>): ColorCategories {
-		const groupedColors: ColorCategories = {
-			content: [],
-			header: [],
-			navigation: [],
-			other: [],
-		}
-
-		for (const color of colors) {
-			if (color.name.startsWith("content") || color.name.startsWith("list")) {
-				groupedColors.content.push(color)
-			} else if (color.name.startsWith("header")) {
-				groupedColors.header.push(color)
-			} else if (color.name.startsWith("navigation")) {
-				groupedColors.navigation.push(color)
-			} else {
-				groupedColors.other.push(color)
-			}
-		}
-
-		return groupedColors
-	}
 }
 
 function renderCustomColorField(model: CustomColorsEditorViewModel, { name, value, defaultValue, valid }: CustomColor): Child {