fix: Use on_surface instead of on_surface_variant if applicable

src/calendar-app/calendar/gui/eventeditor-view/AttendeeListEditor.ts

@@ -52,7 +52,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.on_surface_variant } }, lang.get("guests_label")),
+					m("small.uppercase.b.text-ellipsis", { style: { color: theme.on_surface } }, lang.get("guests_label")),
 					whoModel.canModifyGuests ? this.renderGuestsInput(whoModel, attrs.logins, attrs.recipientsSearch) : null,
 					this.renderSendUpdateCheckbox(attrs.model.editModels.whoModel),
 					this.renderGuestList(attrs, organizer),
@@ -218,7 +218,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.on_surface_variant } }, lang.get("organizer_label")),
+			m("small.uppercase.pb-s.b.text-ellipsis", { style: { color: theme.on_surface } }, lang.get("organizer_label")),
 			m(Card, { style: { padding: `0` } }, [
 				m(".flex.flex-column", [
 					m(".flex.pl-vpad-s.pr-vpad-s", [

src/calendar-app/calendar/gui/eventeditor-view/CalendarEventEditDialog.ts

@@ -145,7 +145,7 @@ export class EventEditorDialog {
 			{
 				height: "100%",
 				"background-color": theme.surface_container,
-				color: theme.on_surface_variant,
+				color: theme.on_surface,
 			},
 		)
 			.addShortcut({

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.on_surface_variant } }, lang.getTranslationText("frequency_title")),
+					m("small.uppercase.pb-s.b.text-ellipsis", { style: { color: theme.on_surface } }, 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.on_surface_variant } }, lang.get("calendarRepeatStopCondition_label")),
+			m("small.uppercase.pb-s.b.text-ellipsis", { style: { color: theme.on_surface } }, 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.on_surface_variant } }, lang.get("interval_title")),
+			m("small.uppercase.pb-s.b.text-ellipsis", { style: { color: theme.on_surface } }, lang.get("interval_title")),
 			m(
 				Card,
 				{

src/calendar-app/calendar/gui/eventpopup/ContactPreviewView.ts

@@ -144,7 +144,7 @@ const ActionButtons = pureComponent((contact: Contact) => {
 	}
 	const phoneButtonColors = {
 		borderColor: theme.on_surface_variant,
-		color: theme.on_surface_variant,
+		color: theme.on_surface,
 	}
 
 	const singleEmailAdress = contact.mailAddresses.length === 1

src/common/gui/SidebarSection.ts

@@ -25,7 +25,7 @@ export class SidebarSection implements Component<SidebarSectionAttrs> {
 			{
 				"data-testid": `section:${lang.getTestId(name)}`,
 				style: {
-					color: theme.on_surface_variant,
+					color: theme.on_surface,
 				},
 			},
 			[

src/common/gui/base/Expander.ts

@@ -62,7 +62,7 @@ export class ExpanderButton implements Component<ExpanderAttrs> {
 						`${a.isBig ? "span" : "small"}`,
 						{
 							style: {
-								color: a.color || theme.on_surface_variant,
+								color: a.color || theme.on_surface,
 							},
 						},
 						a.isUnformattedLabel ? label : label.toUpperCase(),

src/common/gui/base/NavButton.ts

@@ -119,7 +119,7 @@ export class NavButton implements Component<NavButtonAttrs> {
 			href: this._getUrl(a.href),
 			style: {
 				"font-size": a.fontSize ? px(a.fontSize) : "",
-				color: this._draggedOver || isNavButtonSelected(a) ? theme.primary : theme.on_surface_variant,
+				color: this._draggedOver || isNavButtonSelected(a) ? theme.primary : theme.on_surface,
 				...(isCurrent && { background: theme.state_bg_active }),
 			},
 			title: lang.getTranslationText(a.label),

src/common/gui/base/buttons/BannerButton.ts

@@ -23,7 +23,7 @@ export class BannerButton implements Component<BannerButtonAttrs> {
 			class: `border-radius center ${attrs.class} ${attrs.disabled ? "disabled" : ""}`,
 			style: {
 				border: `2px solid ${attrs.disabled ? theme.on_surface_variant : attrs.borderColor}`,
-				color: attrs.disabled ? theme.on_surface_variant : attrs.color,
+				color: attrs.disabled ? theme.on_surface : attrs.color,
 				padding: px(size.vpad_small),
 				minWidth: "60px",
 			},

src/common/gui/base/buttons/OutlineButton.ts

@@ -31,7 +31,7 @@ export class OutlineButton implements ClassComponent<OutlineButtonAttrs> {
 			disabled: attrs.disabled,
 			style: {
 				borderColor: theme.outline,
-				color: theme.on_surface_variant,
+				color: theme.on_surface,
 			},
 			class: this.resolveClasses(attrs.expanded, attrs.disabled),
 		} as BaseButtonAttrs)

src/common/gui/base/buttons/RowButton.ts

@@ -25,7 +25,7 @@ export class RowButton implements Component<RowButtonAttrs> {
 		const attrs = vnode.attrs
 		const label = lang.getTranslationText(attrs.label)
 		const text = lang.getTranslationText(attrs.text ?? attrs.label)
-		const color = attrs.selected ? theme.primary : theme.on_surface_variant
+		const color = attrs.selected ? theme.primary : theme.on_surface
 		return m(BaseButton, {
 			label: attrs.label,
 			text: m(

src/common/gui/main-styles.ts

@@ -2662,7 +2662,7 @@ styles.registerStyle("main", () => {
 		".custom-color-container .inputWrapper:before": {
 			// slash in content is content alt. so that it's ignored by screen readers
 			content: '"#" / ""',
-			color: theme.on_surface_variant,
+			color: theme.on_surface,
 		},
 		".success-container": {
 			"background-color": theme.success_container,

src/common/gui/titles/MenuTitle.ts

@@ -8,6 +8,6 @@ export type MenuTitleAttrsType = {
 // used in sidebar section title and inside setting view menus
 export class MenuTitle implements Component<MenuTitleAttrsType> {
 	view({ attrs }: Vnode<MenuTitleAttrsType>): Children {
-		return m("small.uppercase.b", { style: { color: theme.on_surface_variant } }, attrs.content)
+		return m("small.uppercase.b", { style: { color: theme.on_surface } }, attrs.content)
 	}
 }

src/common/subscription/BuyOptionBox.ts

@@ -250,7 +250,7 @@ export class BuyOptionBox implements Component<BuyOptionBoxAttr> {
 						".span.strike.pt-s",
 						{
 							style: {
-								color: theme.on_surface_variant,
+								color: theme.on_surface,
 								fontSize: px(size.font_size_base),
 								...(!isApplePrice && { "justify-self": "end" }),
 							},

src/common/support/pages/SupportTopicPage.ts

@@ -83,7 +83,7 @@ class WasThisHelpful implements Component<WasThisHelpfulAttrs> {
 	view({ attrs: { goToContactSupportPage, goToSolutionWasHelpfulPage, topicName } }: Vnode<WasThisHelpfulAttrs>): Children {
 		return m(
 			".flex.flex-column.gap-vpad-s",
-			m("small.uppercase.b.text-ellipsis", { style: { color: theme.on_surface_variant } }, lang.get("wasThisHelpful_msg")),
+			m("small.uppercase.b.text-ellipsis", { style: { color: theme.on_surface } }, lang.get("wasThisHelpful_msg")),
 			m(Card, { shouldDivide: true }, [
 				m(SectionButton, {
 					text: "yes_label",

src/mail-app/gui/date/EventBannerImpl.ts

@@ -148,7 +148,7 @@ export class EventBannerImpl implements ClassComponent<EventBannerImplAttrs> {
 						class: styles.isSingleColumnLayout() ? "plr-vpad" : "pr-vpad-l pl-vpad-l",
 						style: {
 							"background-color": theme.surface_container_high,
-							color: theme.on_surface_variant,
+							color: theme.on_surface,
 						},
 					},
 					[

src/mail-app/mail/view/CollapsedMailView.ts

@@ -31,7 +31,7 @@ export class CollapsedMailView implements Component<CollapsedMailViewAttrs> {
 				"aria-expanded": "false",
 				"data-testid": "collapsed-mail-view",
 				style: {
-					color: theme.on_surface_variant,
+					color: theme.on_surface,
 				},
 				onclick: () => viewModel.expandMail(Promise.resolve()),
 				onkeyup: (e: KeyboardEvent) => {

src/mail-app/mail/view/ConversationViewer.ts

@@ -193,7 +193,7 @@ export class ConversationViewer implements Component<ConversationViewerAttrs> {
 						".font-weight-600.center.mt-l" + "." + responsiveCardHMargin(),
 						{
 							style: {
-								color: theme.on_surface_variant,
+								color: theme.on_surface,
 							},
 						},
 						lang.get("loading_msg"),

src/mail-app/mail/view/LabelsPopup.ts

@@ -73,7 +73,7 @@ export class LabelsPopup implements ModalComponent {
 						.sort((labelA, labelB) => labelA.label.name.localeCompare(labelB.label.name))
 						.map((labelState) => {
 							const { label, state } = labelState
-							const color = theme.on_surface_variant
+							const color = theme.on_surface
 							const canToggleLabel = state === LabelState.Applied || state === LabelState.AppliedToSome || !this.isMaxLabelsReached
 							const opacity = !canToggleLabel ? 0.5 : undefined
 

src/mail-app/mail/view/MailRow.ts

@@ -348,7 +348,7 @@ export class MailRow implements VirtualRow<Mail> {
 				style: {
 					// in dark theme override saturation to aid readability. This is not relative but absolute saturation. We preserve the hue.
 					border: `2px solid ${getLabelColor(theme.on_surface_variant)}`,
-					color: getLabelColor(theme.on_surface_variant),
+					color: getLabelColor(theme.on_surface),
 					padding: `0px ${size.vpad_xsm}px 1px`,
 					marginRight: px(size.vpad_xsm),
 					minWidth: px(16),

src/mail-app/mail/view/MailViewerHeader.ts

@@ -189,7 +189,7 @@ export class MailViewerHeader implements Component<MailViewerHeaderAttrs> {
 							},
 							hoverText: folderInfo.name,
 						}),
-						m(".small.font-weight-600.selectable.no-wrap", { style: { color: theme.on_surface_variant } }, [
+						m(".small.font-weight-600.selectable.no-wrap", { style: { color: theme.on_surface } }, [
 							m(".noprint", dateTime), // show the short date when viewing
 							m(".noscreen", dateTimeFull), // show the date with year when printing
 						]),

src/mail-app/settings/SettingsView.ts

@@ -799,7 +799,7 @@ export class SettingsView extends BaseTopLevelView implements TopLevelView<Setti
 				style: {
 					marginInline: "auto",
 					border: `1px solid ${theme.on_surface_variant}`,
-					color: theme.on_surface_variant,
+					color: theme.on_surface,
 				},
 				label: "supportMenu_label",
 				text: m(".pl-s", lang.getTranslation("supportMenu_label").text),