feat: Semantic font weights for interactive elements

src/assets/NcAppNavigationItem.scss

@@ -119,6 +119,7 @@
 			max-width: 100%;
 			white-space: nowrap;
 			text-overflow: ellipsis;
+			font-weight: var(--font-weight-element, normal);
 		}
 
 		.editingContainer {

src/assets/action.scss

@@ -54,7 +54,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);
 
@@ -105,7 +105,7 @@
 		}
 
 		&__name {
-			font-weight: bold;
+			font-weight: var(--font-weight-heading, bold);
 			text-overflow: ellipsis;
 			overflow: hidden;
 			white-space: nowrap;
@@ -117,6 +117,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;

src/components/NcActionInput/NcActionInput.vue

@@ -283,7 +283,7 @@
 		/**
 		 * id attribute of the checkbox element
 		 */
 		id: {
 			type: String,
 			default: () => 'action-' + createElementId(),
 			validator: (id) => id.trim() !== '',
@@ -362,7 +362,7 @@
 		 */
 		labelOutside: {
 			type: Boolean,
 			default: true,
 		},
 
 		/**
@@ -384,7 +384,7 @@
 		/**
 		 * aria-label attribute of the input field
 		 */
 		ariaLabel: {
 			type: String,
 			default: '',
 		},
@@ -394,7 +394,7 @@
 		 */
 		showTrailingButton: {
 			type: Boolean,
 			default: true,
 		},
 
 		/**
@@ -531,7 +531,7 @@
 	background-color: transparent;
 	box-shadow: none;
 
-	font-weight: normal;
+	font-weight: var(--font-weight-default, normal);
 
 	&__icon-wrapper {
 		display: flex;

src/components/NcActionTextEditable/NcActionTextEditable.vue

@@ -54,7 +54,7 @@
 
 			<!-- form and input -->
 			<form
 				ref="form"
 				class="action-text-editable__form"
 				:disabled="disabled"
 				@submit.prevent="onSubmit">
@@ -217,7 +217,7 @@
 	background-color: transparent;
 	box-shadow: none;
 
-	font-weight: normal;
+	font-weight: var(--font-weight-default, normal);
 	line-height: var(--default-clickable-area);
 
 	& > span {

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);

src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue

@@ -104,7 +104,7 @@ onClickOutside(container, () => {
 	padding-inline: 0 calc((var(--default-clickable-area) - 16px) / 2) !important;
 
 	:global(.button-vue__text) {
-		font-weight: normal;
+		font-weight: var(--font-weight-default, normal);
 	}
 }
 

src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue

@@ -285,7 +285,7 @@ function unregisterSection(id: string) {
 		margin: 4px 0;
 		line-height: var(--default-clickable-area);
 		border-radius: var(--border-radius-element);
-		font-weight: bold;
+		font-weight: var(--font-weight-element, bold);
 		padding: 0 calc(4 * var(--default-grid-baseline));
 		cursor: pointer;
 		white-space: nowrap;

src/components/NcAppSettingsSection/NcAppSettingsSection.vue

@@ -88,7 +88,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 {

src/components/NcAppSidebar/NcAppSidebar.vue

@@ -1731,7 +1731,7 @@ $desc-height: $desc-name-height + $desc-subname-height;
 							margin: 0;
 							padding: $desc-input-padding;
 							font-size: 20px;
-							font-weight: bold;
+							font-weight: var(--font-weight-heading, bold);
 						}
 					}
 

src/components/NcAppSidebar/NcAppSidebarTabsButton.vue

@@ -88,14 +88,14 @@ defineProps<{
 }
 
 .sidebarTabsButton__name {
-	font-weight: normal;
+	font-weight: var(--font-weight-element, normal);
 	overflow: hidden;
 	text-overflow: ellipsis;
 	text-wrap: nowrap;
 }
 
 .sidebarTabsButton_selected .sidebarTabsButton__name {
-	font-weight: bold;
+	font-weight: var(--font-weight-element, bold);
 }
 
 .sidebarTabsButton__icon {

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;
 }
 

src/components/NcAvatar/NcAvatar.vue

@@ -953,7 +953,7 @@ export default {
 			display: block;
 			width: 100%;
 			text-align: center;
-			font-weight: normal;
+			font-weight: var(--font-weight-default, normal);
 		}
 	}
 

src/components/NcBreadcrumb/NcBreadcrumb.vue

@@ -326,7 +326,7 @@ export default {
 		}
 
 		&__text {
-			font-weight: normal;
+			font-weight: var(--font-weight-element, normal);
 		}
 	}
 	:deep(.button-vue__text) {

src/components/NcButton/NcButton.vue

@@ -176,7 +176,7 @@ export default {
 }
 
 h5 {
-	font-weight: bold;
+	font-weight: var(--font-weight-heading, bold);
 	margin: 40px 0 20px 0;
 }
 
@@ -417,7 +417,7 @@ td.row-size {
 }
 
 .table-header {
-	font-weight: normal;
+	font-weight: var(--font-weight-default, normal);
 	color: var(--color-text-maxcontrast);
 }
 
@@ -751,7 +751,7 @@ function onClick(event: MouseEvent) {
 	transition-timing-function: linear;
 	cursor: pointer;
 	font-size: var(--default-font-size);
-	font-weight: bold;
+	font-weight: var(--font-weight-element, bold);
 
 	// Setup different button sizes
 	&--size-small {
@@ -847,7 +847,7 @@ function onClick(event: MouseEvent) {
 	}
 
 	&__text {
-		font-weight: bold;
+		font-weight: var(--font-weight-element, bold);
 		margin-bottom: 1px;
 		padding: 2px 0;
 		white-space: nowrap;

src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue

@@ -264,6 +264,7 @@ export default {
 	&__description {
 		display: block;
 		color: var(--color-text-maxcontrast);
+		font-weight: var(--font-weight-default, normal);
 	}
 
 	&--button-variant {

src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue

@@ -712,6 +712,7 @@ export default {
 	color: var(--color-main-text);
 	background-color: transparent;
 	font-size: var(--default-font-size);
+	font-weight: var(--font-weight-element, normal);
 	line-height: var(--default-line-height);
 	padding: 0;
 	position: relative;
@@ -774,7 +775,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);

src/components/NcColorPicker/NcColorPicker.vue

@@ -587,7 +587,7 @@ function hexToRGB(hex: string): [number, number, number] {
 				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;

src/components/NcContent/NcContent.vue

@@ -201,7 +201,7 @@ function setAppNavigation(value: boolean): void {
 	}
 
 	&__headline {
-		font-weight: bold;
+		font-weight: var(--font-weight-heading, bold);
 		font-size: 20px;
 		line-height: 30px;
 		margin-bottom: 12px;

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>

src/components/NcEmptyContent/NcEmptyContent.vue

@@ -230,7 +230,7 @@ const nameId = createElementId()
 	&__name {
 		margin-bottom: 10px;
 		text-align: center;
-		font-weight: bold;
+		font-weight: var(--font-weight-heading, bold);
 		font-size: 20px;
 		line-height: 30px;
 	}

src/components/NcFormBox/NcFormBoxItem.vue

@@ -117,6 +117,7 @@ const hasDescription = () => !!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;
@@ -143,6 +144,10 @@ const hasDescription = () => !!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;

src/components/NcFormGroup/NcFormGroup.vue

@@ -93,7 +93,7 @@ const hasContentOnly = () => hideLabel && (!hasDescription() || hideDescription)
 .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 {

src/components/NcHotkeyList/NcHotkeyList.vue

@@ -45,7 +45,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>

src/components/NcInputField/NcInputField.vue

@@ -444,7 +444,7 @@ function handleInput(event: Event) {
 		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);

src/components/NcKbd/NcKbd.vue

@@ -215,7 +215,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);
 		}
 	}
 }

src/components/NcListItem/NcListItem.vue

@@ -887,15 +887,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);
 	}
 }
 
@@ -1017,7 +1017,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;

src/components/NcModal/NcModal.vue

@@ -996,7 +996,7 @@ export default {
 
 .model__content-text {
 	font-size: 16px;
-	font-weight: bold;
+	font-weight: var(--font-weight-heading, bold);
 }
 </style>
 ```

src/components/NcNoteCard/NcNoteCard.vue

@@ -163,7 +163,7 @@ const iconPath = computed(() => {
 
 	&__heading {
 		font-size: var(--note-card-icon-size); // Same as icon
-		font-weight: 600;
+		font-weight: var(--font-weight-heading, 600);
 	}
 
 	&__icon {

src/components/NcRadioGroupButton/NcRadioGroupButton.vue

@@ -143,7 +143,7 @@ function onUpdate() {
 }
 
 .radioGroupButton__label {
-	font-weight: bold;
+	font-weight: var(--font-weight-element, bold);
 }
 
 .radioGroupButton_disabled {

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;
 		}
 

src/components/NcRelatedResourcesPanel/NcResource.vue

@@ -85,7 +85,7 @@ export default {
 			justify-content: flex-start !important;
 
 			.button-vue__text {
-				font-weight: normal !important;
+				font-weight: var(--font-weight-default, normal) !important;
 				margin-inline-start: 2px !important;
 			}
 		}