tutao · YohYamasaki · Apr 4, 2025 · Apr 15, 2025 · May 26, 2025 · Jun 6, 2025
diff --git a/src/calendar-app/calendar/gui/CalendarGuiUtils.ts b/src/calendar-app/calendar/gui/CalendarGuiUtils.ts
@@ -1077,7 +1077,7 @@ export function getDisplayEventTitle(title: string): string {
 export type ColorString = string
 
 export function generateRandomColor(): ColorString {
-	const model = new ColorPickerModel(!isColorLight(theme.content_bg))
+	const model = new ColorPickerModel(!isColorLight(theme.surface))
 	return hslToHex(model.getColor(Math.floor(Math.random() * MAX_HUE_ANGLE), 2))
 }
 

diff --git a/src/calendar-app/calendar/gui/day-selector/DaySelector.ts b/src/calendar-app/calendar/gui/day-selector/DaySelector.ts
@@ -197,7 +197,7 @@ export class DaySelector implements Component<DaySelectorAttrs> {
 
 		if (highlight) {
 			style = {
-				backgroundColor: hexToRGBAString(theme.content_accent, 0.2),
+				backgroundColor: hexToRGBAString(theme.primary, 0.2),
 				height: px(styles.isDesktopLayout() ? 19 : 25),
 				borderRadius: px(styles.isDesktopLayout() ? 6 : 25),
 				width: `calc(100% - ${px(size.hpad_small)})`,

diff --git a/src/calendar-app/calendar/gui/eventeditor-view/AttendeeListEditor.ts b/src/calendar-app/calendar/gui/eventeditor-view/AttendeeListEditor.ts
@@ -53,7 +53,7 @@ export class AttendeeListEditor implements Component<AttendeeListEditorAttrs> {
 			m(".flex-grow.flex.flex-column.gap-vpad.pb.pt.fit-height", { style: { width: px(attrs.width) } }, [
 				this.renderOrganizer(attrs.model, organizer),
 				m(".flex.flex-column.gap-vpad-s", [
-					m("small.uppercase.b.text-ellipsis", { style: { color: theme.navigation_button } }, lang.get("guests_label")),
+					m("small.uppercase.b.text-ellipsis", { style: { color: theme.on_surface_variant } }, lang.get("guests_label")),
 					whoModel.canModifyGuests ? this.renderGuestsInput(whoModel, attrs.logins, attrs.recipientsSearch) : null,
 					this.renderSendUpdateCheckbox(attrs.model.editModels.whoModel),
 					this.renderGuestList(attrs, organizer),
@@ -102,7 +102,7 @@ export class AttendeeListEditor implements Component<AttendeeListEditorAttrs> {
 						m(IconMessageBox, {
 							message: "noEntries_msg",
 							icon: Icons.People,
-							color: theme.list_message_bg,
+							color: theme.on_surface_fade,
 						}),
 					]),
 			  )
@@ -181,7 +181,7 @@ export class AttendeeListEditor implements Component<AttendeeListEditorAttrs> {
 						"button.items-center.flex-grow.state-bg.button-content.dropdown-button.pt-s.pb-s.button-min-height",
 						{
 							class: option.selectable === false ? `no-hover` : "",
-							style: { color: option.value === status ? theme.content_button_selected : undefined },
+							style: { color: option.value === status ? theme.primary : undefined },
 						},
 						option.name,
 					),
@@ -219,7 +219,7 @@ export class AttendeeListEditor implements Component<AttendeeListEditorAttrs> {
 		const selected = options.find((option) => option.address === address) ?? options[0]
 
 		return m(".flex.col", [
-			m("small.uppercase.pb-s.b.text-ellipsis", { style: { color: theme.navigation_button } }, lang.get("organizer_label")),
+			m("small.uppercase.pb-s.b.text-ellipsis", { style: { color: theme.on_surface_variant } }, lang.get("organizer_label")),
 			m(Card, { style: { padding: `0` } }, [
 				m(".flex.flex-column", [
 					m(".flex.pl-vpad-s.pr-vpad-s", [
@@ -237,7 +237,7 @@ export class AttendeeListEditor implements Component<AttendeeListEditorAttrs> {
 							renderOption: (option) =>
 								m(
 									"button.items-center.flex-grow.state-bg.button-content.dropdown-button.pt-s.pb-s.button-min-height",
-									{ style: { color: selected.address === option.address ? theme.content_button_selected : undefined } },
+									{ style: { color: selected.address === option.address ? theme.primary : undefined } },
 									option.address,
 								),
 							renderDisplay: (option) => m("", option.name ? `${option.name} <${option.address}>` : option.address),
@@ -270,7 +270,7 @@ export class AttendeeListEditor implements Component<AttendeeListEditorAttrs> {
 							: null,
 					]),
 					isMe && model.operation !== CalendarOperation.EditThis
-						? [m(Divider, { color: theme.button_bubble_bg }), this.renderAttendeeStatus(whoModel, organizer)]
+						? [m(Divider, { color: theme.outline_variant }), this.renderAttendeeStatus(whoModel, organizer)]
 						: null,
 				]),
 			]),
@@ -341,7 +341,7 @@ export class AttendeeListEditor implements Component<AttendeeListEditorAttrs> {
 									},
 								},
 								m(Divider, {
-									color: theme.button_bubble_bg,
+									color: theme.outline_variant,
 								}),
 							),
 							this.renderPasswordField(address, password, strength ?? 0, whoModel),
@@ -387,7 +387,7 @@ export class AttendeeListEditor implements Component<AttendeeListEditorAttrs> {
 			size: IconSize.Large,
 			class: "mr-s",
 			style: {
-				fill: theme.content_fg,
+				fill: theme.on_surface,
 			},
 		})
 	}

diff --git a/src/calendar-app/calendar/gui/eventeditor-view/CalendarEventEditDialog.ts b/src/calendar-app/calendar/gui/eventeditor-view/CalendarEventEditDialog.ts
@@ -146,7 +146,7 @@ export class EventEditorDialog {
 			},
 			{
 				height: "100%",
-				"background-color": theme.navigation_bg,
+				"background-color": theme.surface_container,
 			},
 		)
 			.addShortcut({

diff --git a/src/calendar-app/calendar/gui/eventeditor-view/CalendarEventEditView.ts b/src/calendar-app/calendar/gui/eventeditor-view/CalendarEventEditView.ts
@@ -345,7 +345,7 @@ export class CalendarEventEditView implements Component<CalendarEventEditViewAtt
 						marginInline: px(size.vpad_xsm / 2),
 					},
 				}),
-				m("span", { style: { color: isSelected ? theme.content_button_selected : undefined } }, option.name),
+				m("span", { style: { color: isSelected ? theme.primary : undefined } }, option.name),
 			],
 		)
 	}
@@ -441,7 +441,7 @@ export class CalendarEventEditView implements Component<CalendarEventEditViewAtt
 					// Ideally we could do this inside DatePicker itself, but the rendering breaks and the dialog appears below it's siblings
 					// We also don't want to do this for all dialogs because it could potentially cause other issues
 					transform: "translate(0)",
-					color: theme.button_bubble_fg,
+					color: theme.on_surface,
 					"pointer-events": `${this.allowRenderMainPage() ? "auto" : "none"}`,
 					width: px(this.pageWidth),
 				},

diff --git a/src/calendar-app/calendar/gui/eventeditor-view/EventTimeEditor.ts b/src/calendar-app/calendar/gui/eventeditor-view/EventTimeEditor.ts
@@ -37,7 +37,7 @@ export class EventTimeEditor implements Component<EventTimeEditorAttrs> {
 					m(Icon, {
 						icon: Icons.Time,
 						style: {
-							fill: theme.content_fg,
+							fill: theme.on_surface,
 						},
 						title: lang.get("timeSection_label"),
 						size: IconSize.Medium,
@@ -55,7 +55,7 @@ export class EventTimeEditor implements Component<EventTimeEditorAttrs> {
 					),
 				]),
 				m(".flex.col.full-width.flex-grow.gap-vpad-s", { style: { paddingLeft: px(size.icon_size_large + size.vpad_small) } }, [
-					m(Divider, { color: theme.button_bubble_bg }),
+					m(Divider, { color: theme.outline_variant }),
 					m(".time-selection-grid.pr-vpad-s", [
 						m("", lang.get("dateFrom_label")),
 						m(

diff --git a/src/calendar-app/calendar/gui/eventeditor-view/RepeatRuleEditor.ts b/src/calendar-app/calendar/gui/eventeditor-view/RepeatRuleEditor.ts
@@ -96,7 +96,7 @@ export class RepeatRuleEditor implements Component<RepeatRuleEditorAttrs> {
 			[
 				this.hasUnsupportedRules ? this.renderUnsupportedAdvancedRulesWarning() : null,
 				m(".flex.col", [
-					m("small.uppercase.pb-s.b.text-ellipsis", { style: { color: theme.navigation_button } }, lang.getTranslationText("frequency_title")),
+					m("small.uppercase.pb-s.b.text-ellipsis", { style: { color: theme.on_surface_variant } }, lang.getTranslationText("frequency_title")),
 					m(
 						Card,
 						{
@@ -137,7 +137,7 @@ export class RepeatRuleEditor implements Component<RepeatRuleEditorAttrs> {
 		}
 
 		return m(".flex.col", [
-			m("small.uppercase.pb-s.b.text-ellipsis", { style: { color: theme.navigation_button } }, lang.get("calendarRepeatStopCondition_label")),
+			m("small.uppercase.pb-s.b.text-ellipsis", { style: { color: theme.on_surface_variant } }, lang.get("calendarRepeatStopCondition_label")),
 			m(
 				Card,
 				{
@@ -169,7 +169,7 @@ export class RepeatRuleEditor implements Component<RepeatRuleEditorAttrs> {
 		}
 
 		return m(".flex.col", [
-			m("small.uppercase.pb-s.b.text-ellipsis", { style: { color: theme.navigation_button } }, lang.get("interval_title")),
+			m("small.uppercase.pb-s.b.text-ellipsis", { style: { color: theme.on_surface_variant } }, lang.get("interval_title")),
 			m(
 				Card,
 				{
@@ -188,7 +188,7 @@ export class RepeatRuleEditor implements Component<RepeatRuleEditorAttrs> {
 			this.renderIntervalPicker(attrs),
 			this.repeatRuleType === RepeatPeriod.WEEKLY
 				? [
-						m(Divider, { color: theme.button_bubble_bg }),
+						m(Divider, { color: theme.outline_variant }),
 						m(WeekdaySelector, {
 							items: this.weekdayItems,
 							selectedDays: this.byDayRules?.weekdays ?? [],
@@ -197,7 +197,7 @@ export class RepeatRuleEditor implements Component<RepeatRuleEditorAttrs> {
 				  ]
 				: this.repeatRuleType === RepeatPeriod.MONTHLY
 				? [
-						m(Divider, { color: theme.button_bubble_bg }),
+						m(Divider, { color: theme.outline_variant }),
 						m(WeekRepetitionSelector, {
 							repetitionOptionsAndWeekday: createRepetitionValuesForWeekday(
 								DateTime.fromJSDate(attrs.model.startDate).weekday,

diff --git a/src/calendar-app/calendar/gui/eventpopup/ContactPreviewView.ts b/src/calendar-app/calendar/gui/eventpopup/ContactPreviewView.ts
@@ -63,7 +63,7 @@ export class ContactPreviewView implements Component<ContactPreviewViewAttrs> {
 			size: IconSize.Medium,
 			style: Object.assign(
 				{
-					fill: theme.content_button,
+					fill: theme.on_surface,
 					display: "block",
 				},
 				style,
@@ -139,12 +139,12 @@ const ActionButtons = pureComponent((contact: Contact) => {
 	})
 
 	const emailButtonColors = {
-		borderColor: theme.content_accent,
-		color: theme.content_accent,
+		borderColor: theme.primary,
+		color: theme.primary,
 	}
 	const phoneButtonColors = {
-		borderColor: theme.content_button,
-		color: theme.content_button,
+		borderColor: theme.on_surface_variant,
+		color: theme.on_surface_variant,
 	}
 
 	const singleEmailAdress = contact.mailAddresses.length === 1

diff --git a/src/calendar-app/calendar/gui/eventpopup/EventPreviewView.ts b/src/calendar-app/calendar/gui/eventpopup/EventPreviewView.ts
@@ -46,13 +46,13 @@ export type EventPreviewViewAttrs = {
  * a mail to the organizer. */
 export const ReplyButtons = pureComponent((participation: NonNullable<EventPreviewViewAttrs["participation"]>) => {
 	const colors = {
-		borderColor: theme.content_button,
-		color: theme.content_fg,
+		borderColor: theme.on_surface_variant,
+		color: theme.on_surface,
 	}
 
 	const highlightColors = {
-		borderColor: theme.content_accent,
-		color: theme.content_accent,
+		borderColor: theme.primary,
+		color: theme.primary,
 	}
 
 	const makeStatusButtonAttrs = (status: CalendarAttendeeStatus, text: TranslationKey): BannerButtonAttrs =>
@@ -133,7 +133,7 @@ export class EventPreviewView implements Component<EventPreviewViewAttrs> {
 			size: IconSize.Medium,
 			style: Object.assign(
 				{
-					fill: theme.content_button,
+					fill: theme.on_surface_variant,
 					display: "block",
 				},
 				style,
@@ -210,7 +210,7 @@ export class EventPreviewView implements Component<EventPreviewViewAttrs> {
 			m(Icon, {
 				icon: iconForAttendeeStatus[status],
 				style: {
-					fill: theme.content_fg,
+					fill: theme.on_surface,
 				},
 				class: "mr-s",
 			}),

diff --git a/src/calendar-app/calendar/gui/pickers/DatePicker.ts b/src/calendar-app/calendar/gui/pickers/DatePicker.ts
@@ -92,7 +92,7 @@ export class DatePicker implements Component<DatePickerAttrs> {
 						type: TextFieldType.Date,
 						style: {
 							zIndex: 1,
-							border: `2px solid ${theme.content_message_bg}`,
+							border: `2px solid ${theme.outline}`,
 							width: "auto",
 							height: "auto",
 							padding: 0,
@@ -676,7 +676,7 @@ export class VisualDatePicker implements Component<VisualDatePickerAttrs> {
 						height: size,
 						width: size,
 						lineHeight: size,
-						color: theme.navigation_menu_icon,
+						color: theme.on_surface_variant,
 					},
 				},
 				wd,

diff --git a/src/calendar-app/calendar/gui/pickers/GuestPicker.ts b/src/calendar-app/calendar/gui/pickers/GuestPicker.ts
@@ -71,7 +71,7 @@ export class GuestPicker implements ClassComponent<GuestPickerAttrs> {
 				: m(Icon, {
 						icon: Icons.People,
 						style: {
-							fill: theme.content_fg,
+							fill: theme.on_surface,
 							"aria-describedby": lang.get("contactListName_label"),
 						},
 				  })

diff --git a/src/calendar-app/calendar/gui/pickers/TimePicker.ts b/src/calendar-app/calendar/gui/pickers/TimePicker.ts
@@ -85,7 +85,7 @@ export class TimePicker implements Component<TimePickerAttrs> {
 				type: TextFieldType.Time,
 				style: {
 					zIndex: 1,
-					border: `2px solid ${theme.content_message_bg}`,
+					border: `2px solid ${theme.outline}`,
 					width: "auto",
 					height: "auto",
 					appearance: "none",

diff --git a/src/calendar-app/calendar/search/view/CalendarSearchListView.ts b/src/calendar-app/calendar/search/view/CalendarSearchListView.ts
@@ -46,7 +46,7 @@ export class CalendarSearchListView implements Component<CalendarSearchListViewA
 			? m(ColumnEmptyMessageBox, {
 					icon,
 					message: "searchNoResults_msg",
-					color: theme.list_message_bg,
+					color: theme.on_surface_fade,
 			  })
 			: m(List, {
 					state: attrs.listModel.state,

diff --git a/src/calendar-app/calendar/search/view/CalendarSearchView.ts b/src/calendar-app/calendar/search/view/CalendarSearchView.ts
@@ -104,7 +104,7 @@ export class CalendarSearchView extends BaseTopLevelView implements TopLevelView
 			{
 				view: () => {
 					return m(BackgroundColumnLayout, {
-						backgroundColor: theme.navigation_bg,
+						backgroundColor: theme.surface_container,
 						desktopToolbar: () => m(DesktopListToolbar, [m(".button-height")]),
 						mobileHeader: () => this.renderMobileListHeader(vnode.attrs.header),
 						columnLayout: this.getResultColumnLayout(),
@@ -208,7 +208,7 @@ export class CalendarSearchView extends BaseTopLevelView implements TopLevelView
 
 		const selectedEvent = this.searchViewModel.getSelectedEvents()[0]
 		return m(BackgroundColumnLayout, {
-			backgroundColor: theme.navigation_bg,
+			backgroundColor: theme.surface_container,
 			desktopToolbar: () => m(DesktopViewerToolbar, []),
 			mobileHeader: () =>
 				m(MobileHeader, {
@@ -225,8 +225,8 @@ export class CalendarSearchView extends BaseTopLevelView implements TopLevelView
 					? m(ColumnEmptyMessageBox, {
 							message: "noEventSelect_msg",
 							icon: BootIcons.Calendar,
-							color: theme.content_message_bg,
-							backgroundColor: theme.navigation_bg,
+							color: theme.on_surface_fade,
+							backgroundColor: theme.surface_container,
 					  })
 					: !this.getSanitizedPreviewData(selectedEvent).isLoaded()
 					? null

diff --git a/src/calendar-app/calendar/settings/CalendarSettingsView.ts b/src/calendar-app/calendar/settings/CalendarSettingsView.ts
@@ -121,7 +121,7 @@ export class CalendarSettingsView extends BaseTopLevelView implements TopLevelVi
 				// are concealed), but there's still room for improvement for scrollbars
 				view: () =>
 					m(BackgroundColumnLayout, {
-						backgroundColor: theme.navigation_bg,
+						backgroundColor: theme.surface_container,
 						classes: this.isTabletView() ? "pr-m pl-vpad-s" : "",
 						columnLayout: m(
 							".mlr-safe-inset.fill-absolute.content-bg.border-radius-top-left-m.border-radius-top-right-m",
@@ -167,7 +167,7 @@ export class CalendarSettingsView extends BaseTopLevelView implements TopLevelVi
 			{
 				view: () => {
 					return m(BackgroundColumnLayout, {
-						backgroundColor: theme.navigation_bg,
+						backgroundColor: theme.surface_container,
 						columnLayout: m(".flex.flex-grow.col.full-height", [
 							this.renderSettingsNavigation(this.userFolders, "userSettings_label"),
 							this.renderLoggedInNavigationLinks(),
@@ -213,8 +213,8 @@ export class CalendarSettingsView extends BaseTopLevelView implements TopLevelVi
 					class: "flash flex justify-center center-vertically pt-s pb-s plr border-radius",
 					style: {
 						marginInline: "auto",
-						border: `1px solid ${theme.navigation_button}`,
-						color: theme.navigation_button,
+						border: `1px solid ${theme.outline}`,
+						color: theme.on_surface_variant,
 					},
 					label: "supportMenu_label",
 					text: m(".pl-s", lang.getTranslation("supportMenu_label").text),
@@ -223,7 +223,7 @@ export class CalendarSettingsView extends BaseTopLevelView implements TopLevelVi
 						size: IconSize.Medium,
 						class: "center-h",
 						container: "div",
-						style: { fill: theme.navigation_button },
+						style: { fill: theme.on_surface_variant },
 					}),
 					onclick: () => {
 						const triggerStage = getSupportUsageTestStage(0)
@@ -375,7 +375,7 @@ export class CalendarSettingsView extends BaseTopLevelView implements TopLevelVi
 				class: styles.isSingleColumnLayout() ? "pr-m" : "pr-vpad-s",
 			},
 			[
-				m("small.uppercase.pb-s.b.text-ellipsis", { style: { color: theme.navigation_button } }, lang.getTranslationText(title)),
+				m("small.uppercase.pb-s.b.text-ellipsis", { style: { color: theme.on_surface_variant } }, lang.getTranslationText(title)),
 				m(
 					".flex.col.border-radius-m.list-bg",
 					folders
@@ -527,7 +527,7 @@ export class CalendarSettingsView extends BaseTopLevelView implements TopLevelVi
 						".b",
 						{
 							style: {
-								color: theme.navigation_button_selected,
+								color: theme.primary,
 							},
 						},
 						label,

diff --git a/src/calendar-app/calendar/view/CalendarAgendaItemView.ts b/src/calendar-app/calendar/view/CalendarAgendaItemView.ts
@@ -62,7 +62,7 @@ export class CalendarAgendaItemView implements Component<CalendarAgendaItemViewA
 				if (isFocused) {
 					return stateBgFocus
 				} else {
-					return theme.list_bg
+					return theme.surface
 				}
 			}
 		} else {