diff --git a/src/assets/NcAppNavigationItem.scss b/src/assets/NcAppNavigationItem.scss index 1e596ef645..398487fc91 100644 --- 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, normal); } .editingContainer { diff --git a/src/assets/action.scss b/src/assets/action.scss index 05f00585d3..f0e566198c 100644 --- 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, 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; diff --git a/src/components/NcActionInput/NcActionInput.vue b/src/components/NcActionInput/NcActionInput.vue index f3f321c294..a35577568b 100644 --- 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, normal); &__icon-wrapper { display: flex; diff --git a/src/components/NcActionTextEditable/NcActionTextEditable.vue b/src/components/NcActionTextEditable/NcActionTextEditable.vue index adb7d5eca7..8f01f8822c 100644 --- 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, normal); line-height: var(--default-clickable-area); & > span { diff --git a/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue b/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue index 4f3c4a7753..71e9610dcf 100644 --- 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 index f7e27f8042..c46267492d 100644 --- 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, normal); } } diff --git a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue index f560f3be56..9846923d9e 100644 --- a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue +++ b/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; diff --git a/src/components/NcAppSettingsSection/NcAppSettingsSection.vue b/src/components/NcAppSettingsSection/NcAppSettingsSection.vue index 370d604331..a2b721397e 100644 --- a/src/components/NcAppSettingsSection/NcAppSettingsSection.vue +++ b/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 { diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue index 096c61bc58..fe041a4d7b 100644 --- a/src/components/NcAppSidebar/NcAppSidebar.vue +++ b/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); } } diff --git a/src/components/NcAppSidebar/NcAppSidebarTabsButton.vue b/src/components/NcAppSidebar/NcAppSidebarTabsButton.vue index e198779348..3da3adb3d5 100644 --- a/src/components/NcAppSidebar/NcAppSidebarTabsButton.vue +++ b/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 { diff --git a/src/components/NcAssistantButton/NcAssistantButton.vue b/src/components/NcAssistantButton/NcAssistantButton.vue index 18318bb84e..9cc3c8fbed 100644 --- 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 index 3eed0c0596..e28a2e169f 100644 --- 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, normal); } } diff --git a/src/components/NcBreadcrumb/NcBreadcrumb.vue b/src/components/NcBreadcrumb/NcBreadcrumb.vue index e65989a7fa..6b8a59f918 100644 --- a/src/components/NcBreadcrumb/NcBreadcrumb.vue +++ b/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) { diff --git a/src/components/NcButton/NcButton.vue b/src/components/NcButton/NcButton.vue index f9a34764ea..f44f18edfa 100644 --- a/src/components/NcButton/NcButton.vue +++ b/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; diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue index 0c3dce1433..9b91ef814d 100644 --- 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, normal); } &--button-variant { diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue index 6f00fa023d..07b688ed7b 100644 --- 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, 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); diff --git a/src/components/NcColorPicker/NcColorPicker.vue b/src/components/NcColorPicker/NcColorPicker.vue index 31fd10ab76..f61dc456da 100644 --- 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, 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 index 82603345fb..5c15fb0943 100644 --- a/src/components/NcContent/NcContent.vue +++ b/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; diff --git a/src/components/NcDateTime/NcDateTime.vue b/src/components/NcDateTime/NcDateTime.vue index 52dfa88cc1..d85409017e 100644 --- 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 diff --git a/src/components/NcEmptyContent/NcEmptyContent.vue b/src/components/NcEmptyContent/NcEmptyContent.vue index ee82f7619b..e8c3f50561 100644 --- a/src/components/NcEmptyContent/NcEmptyContent.vue +++ b/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; } diff --git a/src/components/NcFormBox/NcFormBoxItem.vue b/src/components/NcFormBox/NcFormBoxItem.vue index 4c6656efde..2d985800e7 100644 --- 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, 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; diff --git a/src/components/NcFormGroup/NcFormGroup.vue b/src/components/NcFormGroup/NcFormGroup.vue index f160f9d6d9..63420ea9da 100644 --- a/src/components/NcFormGroup/NcFormGroup.vue +++ b/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 { diff --git a/src/components/NcHotkeyList/NcHotkeyList.vue b/src/components/NcHotkeyList/NcHotkeyList.vue index e66efd3c7b..a832760c00 100644 --- a/src/components/NcHotkeyList/NcHotkeyList.vue +++ b/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); } diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue index d5860648b6..4c86a037b8 100644 --- 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, 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 index 66b7272580..f7782744f9 100644 --- a/src/components/NcKbd/NcKbd.vue +++ b/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); } } } diff --git a/src/components/NcListItem/NcListItem.vue b/src/components/NcListItem/NcListItem.vue index baeb75e509..3ef88f1df9 100644 --- a/src/components/NcListItem/NcListItem.vue +++ b/src/components/NcListItem/NcListItem.vue @@ -887,7 +887,7 @@ 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 { @@ -895,7 +895,7 @@ export default { 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; diff --git a/src/components/NcModal/NcModal.vue b/src/components/NcModal/NcModal.vue index 3d600ca761..30bafb5d5a 100644 --- a/src/components/NcModal/NcModal.vue +++ b/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); } ``` diff --git a/src/components/NcNoteCard/NcNoteCard.vue b/src/components/NcNoteCard/NcNoteCard.vue index c677b9ddb2..24a7a8a259 100644 --- 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: var(--font-weight-heading, 600); } &__icon { diff --git a/src/components/NcRadioGroupButton/NcRadioGroupButton.vue b/src/components/NcRadioGroupButton/NcRadioGroupButton.vue index d049411d73..7c4c83bfed 100644 --- 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, bold); } .radioGroupButton_disabled { diff --git a/src/components/NcRelatedResourcesPanel/NcRelatedResourcesPanel.vue b/src/components/NcRelatedResourcesPanel/NcRelatedResourcesPanel.vue index 64f34c1da5..49d6bef762 100644 --- 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 index bbc29608e4..c192bdaddf 100644 --- 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, normal) !important; margin-inline-start: 2px !important; } } diff --git a/src/components/NcRelatedResourcesPanel/NcTeamResources.vue b/src/components/NcRelatedResourcesPanel/NcTeamResources.vue index 3255829bdc..7fe57e6edf 100644 --- a/src/components/NcRelatedResourcesPanel/NcTeamResources.vue +++ b/src/components/NcRelatedResourcesPanel/NcTeamResources.vue @@ -201,7 +201,7 @@ export default {