feat: Semantic font weights for interactive elements

kra-mo · kra-mo · commit 6cf9f3988789 · 2026-04-24T15:15:17.000+02:00
Resolves #8083 All general text should now be weight 400, interactive controls 500, and headings 700. Added variables for the former two, as suggested by @ShGKme. Signed-off-by: kramo <git@kramo.page>
diff --git a/src/assets/NcAppNavigationItem.scss b/src/assets/NcAppNavigationItem.scss
@@ -119,6 +119,7 @@
 			max-width: 100%;
 			white-space: nowrap;
 			text-overflow: ellipsis;
+			font-weight: var(--font-weight-element);
 		}
 
 		.editingContainer {
diff --git a/src/assets/action.scss b/src/assets/action.scss
@@ -54,7 +54,7 @@
 		background-color: transparent;
 		box-shadow: none;
 
-		font-weight: normal;
+		font-weight: var(--font-weight-element);
 		font-size: var(--default-font-size);
 		line-height: var(--default-clickable-area);
 
@@ -117,6 +117,7 @@
 			display: block;
 			white-space: pre-wrap;
 			font-size: var(--font-size-small);
+			font-weight: var(--font-weight-default);
 			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
@@ -531,7 +531,7 @@ $input-margin: 4px;
 	background-color: transparent;
 	box-shadow: none;
 
-	font-weight: normal;
+	font-weight: var(--font-weight-default);
 
 	&__icon-wrapper {
 		display: flex;
diff --git a/src/components/NcActionTextEditable/NcActionTextEditable.vue b/src/components/NcActionTextEditable/NcActionTextEditable.vue
@@ -217,7 +217,7 @@ $input-margin: 4px;
 	background-color: transparent;
 	box-shadow: none;
 
-	font-weight: normal;
+	font-weight: var(--font-weight-default);
 	line-height: var(--default-clickable-area);
 
 	& > span {
diff --git a/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue b/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);
 	}
 }
 
diff --git a/src/components/NcAppSidebar/NcAppSidebarTabsButton.vue b/src/components/NcAppSidebar/NcAppSidebarTabsButton.vue
@@ -88,16 +88,12 @@ defineProps<{
 }
 
 .sidebarTabsButton__name {
-	font-weight: normal;
+	font-weight: var(--font-weight-element);
 	overflow: hidden;
 	text-overflow: ellipsis;
 	text-wrap: nowrap;
 }
 
-.sidebarTabsButton_selected .sidebarTabsButton__name {
-	font-weight: bold;
-}
-
 .sidebarTabsButton__icon {
 	display: inline-flex;
 	align-items: center;
diff --git a/src/components/NcAvatar/NcAvatar.vue b/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);
 		}
 	}
 
diff --git a/src/components/NcBreadcrumb/NcBreadcrumb.vue b/src/components/NcBreadcrumb/NcBreadcrumb.vue
@@ -324,10 +324,6 @@ export default {
 			background-color: var(--color-background-dark);
 			color: var(--color-main-text);
 		}
-
-		&__text {
-			font-weight: normal;
-		}
 	}
 	:deep(.button-vue__text) {
 		margin: 0;
diff --git a/src/components/NcButton/NcButton.vue b/src/components/NcButton/NcButton.vue
@@ -417,7 +417,7 @@ td.row-size {
 }
 
 .table-header {
-	font-weight: normal;
+	font-weight: var(--font-weight-default);
 	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);
 
 	// Setup different button sizes
 	&--size-small {
@@ -847,7 +847,7 @@ function onClick(event: MouseEvent) {
 	}
 
 	&__text {
-		font-weight: bold;
+		font-weight: var(--font-weight-element);
 		margin-bottom: 1px;
 		padding: 2px 0;
 		white-space: nowrap;
diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue b/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);
 	}
 
 	&--button-variant {
diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue b/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);
 	line-height: var(--default-line-height);
 	padding: 0;
 	position: relative;
@@ -774,8 +775,6 @@ export default {
 		overflow: hidden;
 
 		&--checked {
-			font-weight: bold;
-
 			.checkbox-radio-switch__content {
 				background-color: var(--color-primary-element);
 				color: var(--color-primary-element-text);
diff --git a/src/components/NcColorPicker/NcColorPicker.vue b/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);
 				color: var(--color-text-maxcontrast);
 				background-color: var(--color-main-background);
 				pointer-events: none;
diff --git a/src/components/NcFormBox/NcFormBoxItem.vue b/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);
 	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);
+	}
+
 	&.formBoxItem_legacy {
 		--nc-form-box-item-border-width: 0px;
 		border: none;
diff --git a/src/components/NcInputField/NcInputField.vue b/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);
 		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/NcListItem/NcListItem.vue b/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);
 }
 
 .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);
 	}
 }
 
@@ -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);
 		}
 		&__extra {
 			margin: 2px 4px 0 4px;
diff --git a/src/components/NcNoteCard/NcNoteCard.vue b/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: bold;
 	}
 
 	&__icon {
diff --git a/src/components/NcRadioGroupButton/NcRadioGroupButton.vue b/src/components/NcRadioGroupButton/NcRadioGroupButton.vue
@@ -143,7 +143,7 @@ function onUpdate() {
 }
 
 .radioGroupButton__label {
-	font-weight: bold;
+	font-weight: var(--font-weight-element);
 }
 
 .radioGroupButton_disabled {
diff --git a/src/components/NcRelatedResourcesPanel/NcResource.vue b/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) !important;
 				margin-inline-start: 2px !important;
 			}
 		}
diff --git a/src/components/NcRichContenteditable/NcRichContenteditable.vue b/src/components/NcRichContenteditable/NcRichContenteditable.vue
@@ -1068,7 +1068,7 @@ export default {
 		inset-block-start: -10px;
 		line-height: 1.5; // minimum allowed line height for accessibility
 		font-size: 13px; // minimum allowed font size for accessibility
-		font-weight: 500;
+		font-weight: var(--font-weight-element);
 		border-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;
 		background-color: var(--color-main-background);
 		padding-inline: 5px;
diff --git a/src/components/NcTextArea/NcTextArea.vue b/src/components/NcTextArea/NcTextArea.vue
@@ -382,7 +382,7 @@ function select() {
 		inset-block-start: -10px;
 		line-height: 1.5; // minimum allowed line height for accessibility
 		font-size: 13px; // minimum allowed font size for accessibility
-		font-weight: 500;
+		font-weight: var(--font-weight-element);
 		color: var(--color-main-text);
 		background-color: var(--color-main-background);
 		padding-inline: 4px;
diff --git a/styleguide/assets/dark.css b/styleguide/assets/dark.css
@@ -58,6 +58,8 @@
 	--font-face: system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 	--default-font-size: 15px;
 	--font-size-small: 13px;
+	--font-weight-default: normal;
+    --font-weight-element: 500;
 	--default-line-height: 1.5;
 	--animation-quick: 100ms;
 	--animation-slow: 300ms;
diff --git a/styleguide/assets/default.css b/styleguide/assets/default.css
@@ -70,6 +70,10 @@
   --font-face: system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --default-font-size: 15px;
   --font-size-small: 13px;
+  /* Default text font weight */
+  --font-weight-default: normal;
+  /* Font weight for interactive elements */
+  --font-weight-element: 500;
   /* 1.5 x font-size for accessibility */
   --default-line-height: 1.5;
   --animation-quick: 100ms;
diff --git a/styleguide/assets/legacy/default.css b/styleguide/assets/legacy/default.css
@@ -50,6 +50,10 @@
   --font-face: system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --default-font-size: 15px;
   --font-size-small: 13px;
+  /* Default text font weight */
+  --font-weight-default: normal;
+  /* Font weight for interactive elements */
+  --font-weight-element: 500;
   /* 1.5 x font-size for accessibility */
   --default-line-height: 1.5;
   --animation-quick: 100ms;

Original file line number	Diff line number	Diff line change
`@@ -119,6 +119,7 @@`
`119`	`119`	`max-width: 100%;`
`120`	`120`	`white-space: nowrap;`
`121`	`121`	`text-overflow: ellipsis;`
	`122`	`+ font-weight: var(--font-weight-element);`
`122`	`123`	`}`
`123`	`124`
`124`	`125`	`.editingContainer {`
Original file line number	Diff line number	Diff line change
`@@ -104,7 +104,7 @@ onClickOutside(container, () => {`
`104`	`104`	`padding-inline: 0 calc((var(--default-clickable-area) - 16px) / 2) !important;`
`105`	`105`
`106`	`106`	`:global(.button-vue__text) {`
`107`		`- font-weight: normal;`
	`107`	`+ font-weight: var(--font-weight-default);`
`108`	`108`	`}`
`109`	`109`	`}`
`110`	`110`
Original file line number	Diff line number	Diff line change
`@@ -953,7 +953,7 @@ export default {`
`953`	`953`	`display: block;`
`954`	`954`	`width: 100%;`
`955`	`955`	`text-align: center;`
`956`		`- font-weight: normal;`
	`956`	`+ font-weight: var(--font-weight-default);`
`957`	`957`	`}`
`958`	`958`	`}`
`959`	`959`
Original file line number	Diff line number	Diff line change
`@@ -324,10 +324,6 @@ export default {`
`324`	`324`	`background-color: var(--color-background-dark);`
`325`	`325`	`color: var(--color-main-text);`
`326`	`326`	`}`
`327`		`-`
`328`		`- &__text {`
`329`		`- font-weight: normal;`
`330`		`- }`
`331`	`327`	`}`
`332`	`328`	`:deep(.button-vue__text) {`
`333`	`329`	`margin: 0;`
Original file line number	Diff line number	Diff line change
`@@ -264,6 +264,7 @@ export default {`
`264`	`264`	`&__description {`
`265`	`265`	`display: block;`
`266`	`266`	`color: var(--color-text-maxcontrast);`
	`267`	`+ font-weight: var(--font-weight-default);`
`267`	`268`	`}`
`268`	`269`
`269`	`270`	`&--button-variant {`