fix: Use on_surface instead of on_surface_variant if applicable

YohYamasaki · YohYamasaki · commit 84a0bc19ef55 · 2025-11-28T15:30:45.000+01:00
diff --git a/src/calendar-app/calendar/gui/eventeditor-view/AttendeeListEditor.ts b/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", [
diff --git a/src/calendar-app/calendar/gui/eventeditor-view/CalendarEventEditDialog.ts b/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({
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.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,
 				{
diff --git a/src/calendar-app/calendar/gui/eventpopup/ContactPreviewView.ts b/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
diff --git a/src/common/gui/SidebarSection.ts b/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,
 				},
 			},
 			[
diff --git a/src/common/gui/base/Expander.ts b/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(),
diff --git a/src/common/gui/base/NavButton.ts b/src/common/gui/base/NavButton.ts
@@ -122,7 +122,7 @@ export class NavButton implements Component<NavButtonAttrs> {
 			ondragstart: a.dragStartHandler,
 			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),
diff --git a/src/common/gui/base/buttons/BannerButton.ts b/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",
 			},
diff --git a/src/common/gui/base/buttons/OutlineButton.ts b/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)
diff --git a/src/common/gui/base/buttons/RowButton.ts b/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(
diff --git a/src/common/gui/main-styles.ts b/src/common/gui/main-styles.ts
@@ -2666,7 +2666,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,
diff --git a/src/common/gui/titles/MenuTitle.ts b/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)
 	}
 }
diff --git a/src/common/subscription/BuyOptionBox.ts b/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" }),
 							},
diff --git a/src/common/support/pages/SupportTopicPage.ts b/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",
diff --git a/src/mail-app/gui/date/EventBannerImpl.ts b/src/mail-app/gui/date/EventBannerImpl.ts
@@ -154,7 +154,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,
 						},
 					},
 					[
diff --git a/src/mail-app/mail/view/CollapsedMailView.ts b/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) => {
diff --git a/src/mail-app/mail/view/ConversationViewer.ts b/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"),
diff --git a/src/mail-app/mail/view/LabelsPopup.ts b/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
 
diff --git a/src/mail-app/mail/view/MailRow.ts b/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),
diff --git a/src/mail-app/mail/view/MailViewerHeader.ts b/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
 						]),
diff --git a/src/mail-app/settings/SettingsView.ts b/src/mail-app/settings/SettingsView.ts
@@ -830,7 +830,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),

Original file line number	Diff line number	Diff line change
`@@ -145,7 +145,7 @@ export class EventEditorDialog {`
`145`	`145`	`{`
`146`	`146`	`height: "100%",`
`147`	`147`	`"background-color": theme.surface_container,`
`148`		`- color: theme.on_surface_variant,`
	`148`	`+ color: theme.on_surface,`
`149`	`149`	`},`
`150`	`150`	`)`
`151`	`151`	`.addShortcut({`
Original file line number	Diff line number	Diff line change
`@@ -96,7 +96,7 @@ export class RepeatRuleEditor implements Component<RepeatRuleEditorAttrs> {`
`96`	`96`	`[`
`97`	`97`	`this.hasUnsupportedRules ? this.renderUnsupportedAdvancedRulesWarning() : null,`
`98`	`98`	`m(".flex.col", [`
`99`		`- m("small.uppercase.pb-s.b.text-ellipsis", { style: { color: theme.on_surface_variant } }, lang.getTranslationText("frequency_title")),`
	`99`	`+ m("small.uppercase.pb-s.b.text-ellipsis", { style: { color: theme.on_surface } }, lang.getTranslationText("frequency_title")),`
`100`	`100`	`m(`
`101`	`101`	`Card,`
`102`	`102`	`{`
`@@ -137,7 +137,7 @@ export class RepeatRuleEditor implements Component<RepeatRuleEditorAttrs> {`
`137`	`137`	`}`
`138`	`138`
`139`	`139`	`return m(".flex.col", [`
`140`		`- m("small.uppercase.pb-s.b.text-ellipsis", { style: { color: theme.on_surface_variant } }, lang.get("calendarRepeatStopCondition_label")),`
	`140`	`+ m("small.uppercase.pb-s.b.text-ellipsis", { style: { color: theme.on_surface } }, lang.get("calendarRepeatStopCondition_label")),`
`141`	`141`	`m(`
`142`	`142`	`Card,`
`143`	`143`	`{`
`@@ -169,7 +169,7 @@ export class RepeatRuleEditor implements Component<RepeatRuleEditorAttrs> {`
`169`	`169`	`}`
`170`	`170`
`171`	`171`	`return m(".flex.col", [`
`172`		`- m("small.uppercase.pb-s.b.text-ellipsis", { style: { color: theme.on_surface_variant } }, lang.get("interval_title")),`
	`172`	`+ m("small.uppercase.pb-s.b.text-ellipsis", { style: { color: theme.on_surface } }, lang.get("interval_title")),`
`173`	`173`	`m(`
`174`	`174`	`Card,`
`175`	`175`	`{`
Original file line number	Diff line number	Diff line change
`@@ -144,7 +144,7 @@ const ActionButtons = pureComponent((contact: Contact) => {`
`144`	`144`	`}`
`145`	`145`	`const phoneButtonColors = {`
`146`	`146`	`borderColor: theme.on_surface_variant,`
`147`		`- color: theme.on_surface_variant,`
	`147`	`+ color: theme.on_surface,`
`148`	`148`	`}`
`149`	`149`
`150`	`150`	`const singleEmailAdress = contact.mailAddresses.length === 1`
Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@ export class SidebarSection implements Component<SidebarSectionAttrs> {`
`25`	`25`	`{`
`26`	`26`	"data-testid": `section:${lang.getTestId(name)}`,
`27`	`27`	`style: {`
`28`		`- color: theme.on_surface_variant,`
	`28`	`+ color: theme.on_surface,`
`29`	`29`	`},`
`30`	`30`	`},`
`31`	`31`	`[`
Original file line number	Diff line number	Diff line change
`@@ -62,7 +62,7 @@ export class ExpanderButton implements Component<ExpanderAttrs> {`
`62`	`62`	`${a.isBig ? "span" : "small"}`,
`63`	`63`	`{`
`64`	`64`	`style: {`
`65`		`- color: a.color \|\| theme.on_surface_variant,`
	`65`	`+ color: a.color \|\| theme.on_surface,`
`66`	`66`	`},`
`67`	`67`	`},`
`68`	`68`	`a.isUnformattedLabel ? label : label.toUpperCase(),`