feat: Semantic font weights for interactive elements

kra-mo · kra-mo · commit dbb8a9ba91f8 · 2026-05-08T11:15:05.000+02:00
Signed-off-by: kramo &lt;git@kramo.page&gt;
diff --git a/src/assets/NcAppNavigationItem.scss b/src/assets/NcAppNavigationItem.scss
@@ -134,7 +134,7 @@
 		padding: 0;
 		white-space: nowrap;
 		color: var(--color-main-text);
-		font-weight: 500;
+		font-weight: var(--font-weight-element, 500);
 		background-repeat: no-repeat;
 		background-position: $icon-margin center;
 		background-size: $icon-size $icon-size;
@@ -157,6 +157,7 @@
 			max-width: 100%;
 			white-space: nowrap;
 			text-overflow: ellipsis;
+			font-weight: var(--font-weight-element, normal);
 		}
 
 		.editingContainer {
diff --git a/src/assets/action.scss b/src/assets/action.scss
@@ -55,7 +55,7 @@
 		background-color: transparent;
 		box-shadow: none;
 
-		font-weight: normal;
+		font-weight: var(--font-weight-element, normal);
 		font-size: var(--default-font-size);
 		line-height: var(--default-clickable-area);
 
@@ -106,7 +106,7 @@
 		}
 
 		&__name {
-			font-weight: bold;
+			font-weight: var(--font-weight-heading, bold);
 			text-overflow: ellipsis;
 			overflow: hidden;
 			white-space: nowrap;
@@ -118,6 +118,7 @@
 			display: block;
 			white-space: pre-wrap;
 			font-size: var(--font-size-small);
+			font-weight: var(--font-weight-default, normal);
 			line-height: var(--default-line-height);
 			color: var(--color-text-maxcontrast);
 			cursor: pointer;
diff --git a/src/components/NcActionInput/NcActionInput.vue b/src/components/NcActionInput/NcActionInput.vue
@@ -591,7 +591,7 @@ $input-margin: 4px;
 	background-color: transparent;
 	box-shadow: none;
 
-	font-weight: normal;
+	font-weight: var(--font-weight-default, normal);
 
 	&__icon-wrapper {
 		display: flex;
diff --git a/src/components/NcActionTextEditable/NcActionTextEditable.vue b/src/components/NcActionTextEditable/NcActionTextEditable.vue
@@ -252,7 +252,7 @@ $input-margin: 4px;
 	background-color: transparent;
 	box-shadow: none;
 
-	font-weight: normal;
+	font-weight: var(--font-weight-default, normal);
 	line-height: var(--default-clickable-area);
 
 	& > span {
diff --git a/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue b/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
@@ -266,7 +266,7 @@ export default {
 	}
 
 	&__name {
-		font-weight: bold;
+		font-weight: var(--font-weight-heading, bold);
 		color: var(--color-main-text);
 		font-size: var(--default-font-size);
 		line-height: var(--default-clickable-area);
diff --git a/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue b/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue
@@ -114,7 +114,7 @@ export default {
 			padding-inline: 0 calc((var(--default-clickable-area) - 16px) / 2) !important;
 
 			:deep(.button-vue__text) {
-				font-weight: normal !important;
+				font-weight: var(--font-weight-default, normal) !important;
 			}
 		}
 	}
diff --git a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
@@ -295,7 +295,7 @@ $content-inset: calc(3 * var(--default-grid-baseline));
 		padding: $content-inset;
 		margin: 0;
 		font-size: 20px;
-		font-weight: 700;
+		font-weight: var(--font-weight-heading, 700);
 	}
 
 	:deep(.app-settings__navigation) {
@@ -329,7 +329,7 @@ $content-inset: calc(3 * var(--default-grid-baseline));
 			display: flex;
 			align-items: center;
 			font-size: var(--default-font-size);
-			font-weight: 500;
+			font-weight: var(--font-weight-element, 500);
 			height: var(--default-clickable-area);
 			margin: 2px 0;
 			line-height: var(--default-clickable-area);
diff --git a/src/components/NcAppSettingsSection/NcAppSettingsSection.vue b/src/components/NcAppSettingsSection/NcAppSettingsSection.vue
@@ -83,7 +83,7 @@ onBeforeUnmount(() => {
 		padding-inline: var(--app-settings-section-text-offset);
 		padding-block: 0;
 		font-size: 20px;
-		font-weight: bold;
+		font-weight: var(--font-weight-heading, bold);
 	}
 
 	&__description {
diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue
@@ -1539,7 +1539,7 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation
 							margin: 0;
 							padding: $desc-input-padding;
 							font-size: 20px;
-							font-weight: bold;
+							font-weight: var(--font-weight-heading, bold);
 						}
 					}
 
diff --git a/src/components/NcAssistantButton/NcAssistantButton.vue b/src/components/NcAssistantButton/NcAssistantButton.vue
@@ -76,7 +76,7 @@ export default {
 }
 
 h5 {
-	font-weight: bold;
+	font-weight: var(--font-weight-heading, bold);
 	margin: 40px 0 20px 0;
 }
 
diff --git a/src/components/NcAvatar/NcAvatar.vue b/src/components/NcAvatar/NcAvatar.vue
@@ -989,7 +989,7 @@ export default {
 			display: block;
 			width: 100%;
 			text-align: center;
-			font-weight: normal;
+			font-weight: var(--font-weight-default, normal);
 		}
 	}
 
diff --git a/src/components/NcBreadcrumb/NcBreadcrumb.vue b/src/components/NcBreadcrumb/NcBreadcrumb.vue
@@ -322,7 +322,7 @@ export default {
 		}
 
 		&__text {
-			font-weight: normal;
+			font-weight: var(--font-weight-element, normal);
 		}
 	}
 	:deep(.button-vue__text) {
diff --git a/src/components/NcButton/NcButton.vue b/src/components/NcButton/NcButton.vue
@@ -169,7 +169,7 @@ export default {
 }
 
 h5 {
-	font-weight: bold;
+	font-weight: var(--font-weight-heading, bold);
 	margin: 40px 0 20px 0;
 }
 
@@ -404,7 +404,7 @@ td.row-size {
 }
 
 .table-header {
-	font-weight: normal;
+	font-weight: var(--font-weight-default, normal);
 	color: var(--color-text-maxcontrast);
 }
 
@@ -838,7 +838,7 @@ export default {
 	transition-timing-function: linear;
 	cursor: pointer;
 	font-size: var(--default-font-size);
-	font-weight: bold;
+	font-weight: var(--font-weight-element, bold);
 
 	&--size-small {
 		--button-size: var(--clickable-area-small, 24px);
@@ -927,7 +927,7 @@ export default {
 	}
 
 	&__text {
-		font-weight: bold;
+		font-weight: var(--font-weight-element, bold);
 		margin-bottom: 1px;
 		padding: 2px 0;
 		white-space: nowrap;
diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue
@@ -262,6 +262,7 @@ export default {
 	&__description {
 		display: block;
 		color: var(--color-text-maxcontrast);
+		font-weight: var(--font-weight-default, normal);
 	}
 
 	&--button-variant {
diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
@@ -729,6 +729,7 @@ export default {
 	background-color: transparent;
 	box-sizing: border-box;
 	font-size: var(--default-font-size);
+	font-weight: var(--font-weight-element, normal);
 	line-height: var(--default-line-height);
 	padding: 0;
 	position: relative;
@@ -800,7 +801,7 @@ export default {
 		overflow: hidden;
 
 		&--checked {
-			font-weight: bold;
+			font-weight: var(--font-weight-element, bold);
 
 			.checkbox-radio-switch__content {
 				background-color: var(--color-primary-element);
diff --git a/src/components/NcColorPicker/NcColorPicker.vue b/src/components/NcColorPicker/NcColorPicker.vue
@@ -446,7 +446,7 @@ export default {
 				font-family: var(--font-face);
 				font-size: var(--font-size-small, 13px);
 				line-height: 1.5;
-				font-weight: 500;
+				font-weight: var(--font-weight-element, 500);
 				color: var(--color-text-maxcontrast);
 				background-color: var(--color-main-background);
 				pointer-events: none;
diff --git a/src/components/NcContent/NcContent.vue b/src/components/NcContent/NcContent.vue
@@ -221,7 +221,7 @@ export default {
 	}
 
 	&__headline {
-		font-weight: bold;
+		font-weight: var(--font-weight-heading, bold);
 		font-size: 20px;
 		line-height: 30px;
 		margin-bottom: 12px;
diff --git a/src/components/NcDateTime/NcDateTime.vue b/src/components/NcDateTime/NcDateTime.vue
@@ -82,7 +82,7 @@ It is also possible to disable relative time by setting the `relativeTime` prope
 </script>
 <style>
 h4 {
-	font-weight: bold;
+	font-weight: var(--font-weight-heading, bold);
 	margin-top: 12px;
 }
 </style>
diff --git a/src/components/NcEmptyContent/NcEmptyContent.vue b/src/components/NcEmptyContent/NcEmptyContent.vue
@@ -233,7 +233,7 @@ export default {
 	&__name {
 		margin-bottom: 10px;
 		text-align: center;
-		font-weight: bold;
+		font-weight: var(--font-weight-heading, bold);
 		font-size: 20px;
 		line-height: 30px;
 	}
diff --git a/src/components/NcFormBox/NcFormBoxItem.vue b/src/components/NcFormBox/NcFormBoxItem.vue
@@ -109,6 +109,7 @@ const hasDescription = () => !!props.description || !!slots.description
 	border-radius: var(--border-radius-element);
 	background-color: var(--color-primary-element-extra-light);
 	color: var(--color-main-text);
+	font-weight: var(--font-weight-element, normal);
 	transition-property: color, border-color, background-color;
 	transition-duration: var(--animation-quick);
 	transition-timing-function: linear;
@@ -135,6 +136,10 @@ const hasDescription = () => !!props.description || !!slots.description
 		box-shadow: 0 0 0 4px var(--color-main-background);
 	}
 
+	&__description {
+		font-weight: var(--font-weight-default, normal);
+	}
+
 	&.formBoxItem_legacy {
 		--nc-form-box-item-border-width: 0px;
 		border: none;
diff --git a/src/components/NcFormGroup/NcFormGroup.vue b/src/components/NcFormGroup/NcFormGroup.vue
@@ -82,7 +82,7 @@ const hasContentOnly = () => props.hideLabel && (!hasDescription() || props.hide
 .formGroup__label {
 	padding-inline: var(--form-element-label-offset);
 	font-size: var(--font-size);
-	font-weight: bold;
+	font-weight: var(--font-weight-heading, bold);
 }
 
 .formGroup__description {
diff --git a/src/components/NcHotkeyList/NcHotkeyList.vue b/src/components/NcHotkeyList/NcHotkeyList.vue
@@ -37,7 +37,7 @@ const labelId = `NcHotkeyList_${createElementId()}`
 }
 
 .hotkeyList__heading {
-	font-weight: bold;
+	font-weight: var(--font-weight-heading, bold);
 	margin-inline: var(--form-element-label-offset);
 }
 </style>
diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue
@@ -519,7 +519,7 @@ export default {
 		line-height: 1.5; // minimum allowed line height for accessibility
 		// 1.5 * font-size = line-height; line-height / 2 for centering and make it negative as we need to move outside the element
 		inset-block-start: calc(-1.5 * var(--input-label-font-size) / 2);
-		font-weight: 500;
+		font-weight: var(--font-weight-element, 500);
 		border-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;
 		background-color: var(--color-main-background);
 		padding-inline: var(--default-grid-baseline);
diff --git a/src/components/NcKbd/NcKbd.vue b/src/components/NcKbd/NcKbd.vue
@@ -209,7 +209,7 @@ OS detection is automatic but can be overridden via the `mac` prop.
 		border-block-end: 2px solid var(--color-border);
 
 		th {
-			font-weight: bold;
+			font-weight: var(--font-weight-heading, bold);
 		}
 	}
 }
diff --git a/src/components/NcListItem/NcListItem.vue b/src/components/NcListItem/NcListItem.vue
@@ -906,15 +906,15 @@ export default {
 .list-item-content__name {
 	min-width: 100px;
 	flex: 1 1 10%;
-	font-weight: 500;
+	font-weight: var(--font-weight-element, 500);
 }
 
 .list-item-content__subname {
 	flex: 1 0;
 	min-width: 0;
 	color: var(--color-text-maxcontrast);
 	&--bold {
-		font-weight: 500;
+		font-weight: var(--font-weight-element, 500);
 	}
 }
 
@@ -1048,7 +1048,7 @@ export default {
 		&__details {
 			color: var(--color-text-maxcontrast);
 			margin: 0 9px !important;
-			font-weight: normal;
+			font-weight: var(--font-weight-default, normal);
 		}
 		&__extra {
 			margin: 2px 4px 0 4px;
diff --git a/src/components/NcNoteCard/NcNoteCard.vue b/src/components/NcNoteCard/NcNoteCard.vue
@@ -181,7 +181,7 @@ export default {
 
 	&__heading {
 		font-size: var(--note-card-icon-size); // Same as icon
-		font-weight: 600;
+		font-weight: var(--font-weight-heading, 600);
 	}
 
 	&__icon {
diff --git a/src/components/NcRadioGroupButton/NcRadioGroupButton.vue b/src/components/NcRadioGroupButton/NcRadioGroupButton.vue
@@ -135,7 +135,7 @@ function onUpdate() {
 }
 
 .radioGroupButton__label {
-	font-weight: bold;
+	font-weight: var(--font-weight-element, bold);
 }
 
 .radioGroupButton_disabled {
diff --git a/src/components/NcRelatedResourcesPanel/NcRelatedResourcesPanel.vue b/src/components/NcRelatedResourcesPanel/NcRelatedResourcesPanel.vue
@@ -261,7 +261,7 @@ export default {
 	&__header {
 
 		h5 {
-			font-weight: bold;
+			font-weight: var(--font-weight-heading, bold);
 			margin-bottom: 6px;
 		}
 
diff --git a/src/components/NcRelatedResourcesPanel/NcResource.vue b/src/components/NcRelatedResourcesPanel/NcResource.vue
@@ -86,7 +86,7 @@ export default {
 				justify-content: flex-start !important;
 
 				.button-vue__text {
-					font-weight: normal !important;
+					font-weight: var(--font-weight-default, normal) !important;
 					margin-left: 2px !important;
 				}
 			}
diff --git a/src/components/NcRelatedResourcesPanel/NcTeamResources.vue b/src/components/NcRelatedResourcesPanel/NcTeamResources.vue
@@ -201,7 +201,7 @@ export default {
 
 <style lang="scss" scoped>
 .team-resources__header {
-	font-weight: bold;
+	font-weight: var(--font-weight-heading, bold);
 	margin-bottom: 6px;
 }
 
@@ -227,23 +227,23 @@ export default {
 		align-items: center;
 		gap: 12px;
 		padding: 6px 12px;
-		font-weight: bold;
+		font-weight: var(--font-weight-heading, bold);
 		margin: 0;
 	}
 
 	.related-team-provider {
 		padding: 6px 12px;
 
 		&__name {
-			font-weight: bold;
+			font-weight: var(--font-weight-heading, bold);
 			margin-bottom: 3px;
 		}
 
 		&__link {
 			display: flex;
 			gap: 12px;
 			padding: 6px 12px;
-			font-weight: bold;
+			font-weight: var(--font-weight-heading, bold);
 		}
 	}
 
diff --git a/src/components/NcRichContenteditable/NcRichContenteditable.vue b/src/components/NcRichContenteditable/NcRichContenteditable.vue
diff --git a/src/components/NcRichText/NcReferenceWidget.vue b/src/components/NcRichText/NcReferenceWidget.vue
diff --git a/src/components/NcRichText/highlight.scss b/src/components/NcRichText/highlight.scss
diff --git a/src/components/NcRichText/richtext.scss b/src/components/NcRichText/richtext.scss
diff --git a/src/components/NcSettingsSection/NcSettingsSection.vue b/src/components/NcSettingsSection/NcSettingsSection.vue
diff --git a/src/components/NcTextArea/NcTextArea.vue b/src/components/NcTextArea/NcTextArea.vue

Original file line number	Diff line number	Diff line change
`@@ -266,7 +266,7 @@ export default {`
`266`	`266`	`}`
`267`	`267`
`268`	`268`	`&__name {`
`269`		`- font-weight: bold;`
	`269`	`+ font-weight: var(--font-weight-heading, bold);`
`270`	`270`	`color: var(--color-main-text);`
`271`	`271`	`font-size: var(--default-font-size);`
`272`	`272`	`line-height: var(--default-clickable-area);`
Original file line number	Diff line number	Diff line change
`@@ -114,7 +114,7 @@ export default {`
`114`	`114`	`padding-inline: 0 calc((var(--default-clickable-area) - 16px) / 2) !important;`
`115`	`115`
`116`	`116`	`:deep(.button-vue__text) {`
`117`		`- font-weight: normal !important;`
	`117`	`+ font-weight: var(--font-weight-default, normal) !important;`
`118`	`118`	`}`
`119`	`119`	`}`
`120`	`120`	`}`
Original file line number	Diff line number	Diff line change
`@@ -83,7 +83,7 @@ onBeforeUnmount(() => {`
`83`	`83`	`padding-inline: var(--app-settings-section-text-offset);`
`84`	`84`	`padding-block: 0;`
`85`	`85`	`font-size: 20px;`
`86`		`- font-weight: bold;`
	`86`	`+ font-weight: var(--font-weight-heading, bold);`
`87`	`87`	`}`
`88`	`88`
`89`	`89`	`&__description {`
Original file line number	Diff line number	Diff line change
`@@ -1539,7 +1539,7 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation`
`1539`	`1539`	`margin: 0;`
`1540`	`1540`	`padding: $desc-input-padding;`
`1541`	`1541`	`font-size: 20px;`
`1542`		`- font-weight: bold;`
	`1542`	`+ font-weight: var(--font-weight-heading, bold);`
`1543`	`1543`	`}`
`1544`	`1544`	`}`
`1545`	`1545`
Original file line number	Diff line number	Diff line change
`@@ -76,7 +76,7 @@ export default {`
`76`	`76`	`}`
`77`	`77`
`78`	`78`	`h5 {`
`79`		`- font-weight: bold;`
	`79`	`+ font-weight: var(--font-weight-heading, bold);`
`80`	`80`	`margin: 40px 0 20px 0;`
`81`	`81`	`}`
`82`	`82`