nextcloud-libraries · susnux · May 8, 2026 · May 8, 2026
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
@@ -294,7 +294,7 @@
 		/**
 		 * id attribute of the checkbox element
 		 */
 		id: {
 			type: String,
 			default: () => 'action-' + GenRandomId(),
 			validator: (id) => id.trim() !== '',
@@ -382,7 +382,7 @@
 		 *
 		 * @deprecated
 		 */
 		value: {
 			type: [String, Date, Number, Array],
 			default: undefined,
 		},
@@ -390,7 +390,7 @@
 		/**
 		 * value attribute of the input field
 		 */
 		modelValue: {
 			type: [String, Date, Number, Array],
 			default: '',
 		},
@@ -406,13 +406,13 @@
 		/**
 		 * aria-label attribute of the input field
 		 */
 		ariaLabel: {
 			type: String,
 			default: '',
 		},

 		/**
 		 * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.
 		 * @todo Add a check in @nextcloud/vue 9 that this prop is not provided,
 		 * otherwise root element will inherit incorrect aria-hidden.
 		 */
@@ -591,7 +591,7 @@
 	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);
 		}
 	}
-Original file line number
+Diff line change
@@ Expand Up / @@ -76,7 +76,7 @@ export default { @@
     }
     h5 {
-    	font-weight: bold;
+    	font-weight: var(--font-weight-heading, bold);
     	margin: 40px 0 20px 0;
     }
@@ Expand Down @@