refactor(editor): Change UI and monospace fonts (#13839)

2025-12-19 11:01:15 +00:00 · 2025-03-17 21:13:57 +01:00
parent bda068880e
commit eb91111ddf
83 changed files with 153 additions and 146 deletions
--- a/packages/frontend/editor-ui/src/components/ApiKeyCard.vue
+++ b/packages/frontend/editor-ui/src/components/ApiKeyCard.vue
@@ -60,9 +60,9 @@ const getExpirationTime = (apiKey: ApiKey): string => {
 	<n8n-card :class="$style.cardLink" data-test-id="api-key-card" @click="onAction('edit')">
 		<template #header>
 			<div>
-				<n8n-heading tag="h2" bold :class="$style.cardHeading">
+				<n8n-text tag="h2" bold :class="$style.cardHeading">
 					{{ apiKey.label }}
-				</n8n-heading>
+				</n8n-text>
 				<div :class="[$style.cardDescription]">
 					<n8n-text :color="!hasApiKeyExpired(apiKey) ? 'text-light' : 'warning'" size="small">
 						<span>{{ getExpirationTime(apiKey) }}</span>
--- a/packages/frontend/editor-ui/src/components/Badge.vue
+++ b/packages/frontend/editor-ui/src/components/Badge.vue
@@ -29,7 +29,7 @@ export default {
 	font-size: 11px;
 	line-height: 18px;
 	max-height: 18px;
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 	display: flex;
 	align-items: center;
 	padding: 2px 4px;
--- a/packages/frontend/editor-ui/src/components/CanvasChat/components/ChatLogsPanel.vue
+++ b/packages/frontend/editor-ui/src/components/CanvasChat/components/ChatLogsPanel.vue
@@ -56,7 +56,7 @@ const locale = useI18n();
 	align-items: center;

 	span {
-		font-weight: 100;
+		font-weight: var(--font-weight-regular);
 	}
 }
 .logsWrapper {
--- a/packages/frontend/editor-ui/src/components/CanvasChat/components/ChatMessagesPanel.vue
+++ b/packages/frontend/editor-ui/src/components/CanvasChat/components/ChatMessagesPanel.vue
@@ -251,7 +251,7 @@ async function copySessionId() {
 }
 .chatHeader {
 	font-size: var(--font-size-s);
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 	line-height: 18px;
 	text-align: left;
 	border-bottom: 1px solid var(--color-foreground-base);
@@ -262,7 +262,7 @@ async function copySessionId() {
 	align-items: center;
 }
 .chatTitle {
-	font-weight: 600;
+	font-weight: var(--font-weight-medium);
 }
 .session {
 	display: flex;
--- a/packages/frontend/editor-ui/src/components/CodeNodeEditor/theme.ts
+++ b/packages/frontend/editor-ui/src/components/CodeNodeEditor/theme.ts
@@ -12,7 +12,7 @@ import { tags } from '@lezer/highlight';

 const BASE_STYLING = {
 	fontSize: '0.8em',
-	fontFamily: "Menlo, Consolas, 'DejaVu Sans Mono', monospace !important",
+	fontFamily: 'var(--font-family-monospace)',
 	maxHeight: '400px',
 	tooltip: {
 		maxWidth: '250px',
--- a/packages/frontend/editor-ui/src/components/CredentialCard.vue
+++ b/packages/frontend/editor-ui/src/components/CredentialCard.vue
@@ -134,7 +134,7 @@ function moveResource() {
 			<CredentialIcon :credential-type-name="credentialType?.name ?? ''" />
 		</template>
 		<template #header>
-			<n8n-heading tag="h2" bold :class="$style.cardHeading">
+			<n8n-text tag="h2" bold :class="$style.cardHeading">
 				{{ data.name }}
 				<N8nBadge v-if="readOnly" class="ml-3xs" theme="tertiary" bold>
 					{{ locale.baseText('credentials.item.readonly') }}
@@ -142,7 +142,7 @@ function moveResource() {
 				<N8nBadge v-if="needsSetup" class="ml-3xs" theme="warning">
 					{{ locale.baseText('credentials.item.needsSetup') }}
 				</N8nBadge>
-			</n8n-heading>
+			</n8n-text>
 		</template>
 		<div :class="$style.cardDescription">
 			<n8n-text color="text-light" size="small">
--- a/packages/frontend/editor-ui/src/components/Error/NodeErrorView.vue
+++ b/packages/frontend/editor-ui/src/components/Error/NodeErrorView.vue
@@ -665,7 +665,7 @@ async function onAskAssistantClick() {
 		padding: var(--spacing-2xs) var(--spacing-s);
 		border-bottom: 1px solid var(--color-danger-tint-1);
 		font-size: var(--font-size-3xs);
-		font-weight: var(--font-weight-bold);
+		font-weight: var(--font-weight-medium);
 		background-color: var(--color-danger-tint-2);
 		border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
 		color: var(--color-danger);
@@ -678,7 +678,7 @@ async function onAskAssistantClick() {
 		gap: var(--spacing-xs);
 		padding: var(--spacing-xs) var(--spacing-s) var(--spacing-3xs) var(--spacing-s);
 		color: var(--color-danger);
-		font-weight: var(--font-weight-bold);
+		font-weight: var(--font-weight-medium);
 		font-size: var(--font-size-s);
 	}

--- a/packages/frontend/editor-ui/src/components/FilterConditions/OperatorSelect.vue
+++ b/packages/frontend/editor-ui/src/components/FilterConditions/OperatorSelect.vue
@@ -143,7 +143,7 @@ function onGroupSelect(group: string) {
 	cursor: pointer;

 	&.suggested {
-		font-weight: 800;
+		font-weight: var(--font-weight-bold);
 	}

 	&:hover {
--- a/packages/frontend/editor-ui/src/components/InlineNameEdit.vue
+++ b/packages/frontend/editor-ui/src/components/InlineNameEdit.vue
@@ -118,7 +118,7 @@ onClickOutside(nameInput, disableNameEdit);
 	position: relative;
 	min-height: 22px;
 	max-height: v-bind(maxHeight);
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);

 	&.editing {
 		width: 100%;
@@ -158,6 +158,6 @@ onClickOutside(nameInput, disableNameEdit);
 	font-size: var(--font-size-2xs);
 	color: var(--color-text-light);
 	margin-left: 4px;
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 }
 </style>
--- a/packages/frontend/editor-ui/src/components/MainHeader/MainHeader.vue
+++ b/packages/frontend/editor-ui/src/components/MainHeader/MainHeader.vue
@@ -290,7 +290,7 @@ function hideGithubButton() {
 	display: flex;
 	align-items: center;
 	font-size: 0.9em;
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 	overflow: auto;
 }

--- a/packages/frontend/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/frontend/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -715,7 +715,7 @@ $--header-spacing: 20px;

 .activator {
 	color: $custom-font-dark;
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 	font-size: 13px;
 	line-height: $--text-line-height;
 	align-items: center;
@@ -729,7 +729,7 @@ $--header-spacing: 20px;
 	font-size: 12px;
 	padding: 20px 0; // to be more clickable
 	color: $custom-font-very-light;
-	font-weight: 600;
+	font-weight: var(--font-weight-bold);
 	white-space: nowrap;

 	&:hover {
--- a/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/LabelItem.vue
+++ b/packages/frontend/editor-ui/src/components/Node/NodeCreator/ItemTypes/LabelItem.vue
@@ -21,7 +21,7 @@ defineProps<Props>();
 	letter-spacing: 1px;
 	padding-top: var(--spacing-s);
 	font-style: normal;
-	font-weight: 700;
+	font-weight: var(--font-weight-bold);
 	font-size: 10px;
 	line-height: 12px;
 	text-transform: uppercase;
--- a/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/NoResults.vue
+++ b/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/NoResults.vue
@@ -72,7 +72,7 @@ const i18n = useI18n();
 	height: 100%;
 	border-left: 1px solid $node-creator-border-color;
 	flex-direction: column;
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 	display: flex;
 	align-items: center;
 	align-content: center;
--- a/packages/frontend/editor-ui/src/components/NodeTitle.vue
+++ b/packages/frontend/editor-ui/src/components/NodeTitle.vue
@@ -90,7 +90,7 @@ function onRename() {

 <style lang="scss" module>
 .container {
-	font-weight: var(--font-weight-bold);
+	font-weight: var(--font-weight-medium);
 	display: flex;
 	font-size: var(--font-size-m);
 	line-height: var(--font-line-height-compact);
--- a/packages/frontend/editor-ui/src/components/NodeWebhooks.vue
+++ b/packages/frontend/editor-ui/src/components/NodeWebhooks.vue
@@ -228,7 +228,7 @@ watch(

 	.headline {
 		color: $color-primary;
-		font-weight: 600;
+		font-weight: var(--font-weight-bold);
 		font-size: var(--font-size-2xs);
 	}
 }
--- a/packages/frontend/editor-ui/src/components/ParameterInput.vue
+++ b/packages/frontend/editor-ui/src/components/ParameterInput.vue
@@ -1788,7 +1788,7 @@ onUpdated(async () => {
 	padding-right: 20px;

 	.option-headline {
-		font-weight: var(--font-weight-bold);
+		font-weight: var(--font-weight-medium);
 		line-height: var(--font-line-height-regular);
 		overflow-wrap: break-word;
 	}
--- a/packages/frontend/editor-ui/src/components/Projects/ProjectSharingInfo.vue
+++ b/packages/frontend/editor-ui/src/components/Projects/ProjectSharingInfo.vue
@@ -61,7 +61,7 @@ const projectIcon = computed(() => {
 	p {
 		font-size: var(--font-size-s);
 		color: var(--color-text-dark);
-		font-weight: var(--font-weight-bold);
+		font-weight: var(--font-weight-medium);
 		line-height: var(--font-line-height-loose);
 	}

--- a/packages/frontend/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
+++ b/packages/frontend/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
@@ -416,7 +416,7 @@ defineExpose({ isWithinDropdown });
 }

 .addResourceText {
-	font-weight: bold;
+	font-weight: var(--font-weight-bold);
 }

 .addResourceIcon {
--- a/packages/frontend/editor-ui/src/components/RunData.vue
+++ b/packages/frontend/editor-ui/src/components/RunData.vue
@@ -2325,7 +2325,7 @@ defineExpose({ enterEditMode });
 	color: black;
 	border-radius: var(--border-radius-base);
 	padding: 0 1px;
-	font-weight: normal;
+	font-weight: var(--font-weight-regular);
 	font-style: normal;
 }
 </style>
--- a/packages/frontend/editor-ui/src/components/SaveButton.vue
+++ b/packages/frontend/editor-ui/src/components/SaveButton.vue
@@ -79,7 +79,7 @@ const shortcutTooltipLabel = computed(() => {
 .saved {
 	color: $custom-font-very-light;
 	font-size: 12px;
-	font-weight: 600;
+	font-weight: var(--font-weight-bold);
 	line-height: 12px;
 	text-align: center;
 	padding: var(--spacing-2xs) var(--spacing-2xs);
--- a/packages/frontend/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue
+++ b/packages/frontend/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue
@@ -566,7 +566,7 @@ function callEventBus(event: string, data: unknown) {

 .cardTitle {
 	font-size: 14px;
-	font-weight: bold;
+	font-weight: var(--font-weight-bold);
 }

 .header {
--- a/packages/frontend/editor-ui/src/components/TagsDropdown.vue
+++ b/packages/frontend/editor-ui/src/components/TagsDropdown.vue
@@ -352,7 +352,7 @@ onClickOutside(
 		padding: $--item-padding;
 		margin: 0;
 		line-height: $--item-line-height;
-		font-weight: 400;
+		font-weight: var(--font-weight-regular);
 		font-size: $--item-font-size;

 		&.is-disabled {
@@ -361,7 +361,7 @@ onClickOutside(
 		}

 		&.selected {
-			font-weight: bold;
+			font-weight: var(--font-weight-bold);

 			> span {
 				display: inline-block;
--- a/packages/frontend/editor-ui/src/components/TestDefinition/shared/TestTableBase.vue
+++ b/packages/frontend/editor-ui/src/components/TestDefinition/shared/TestTableBase.vue
@@ -198,7 +198,7 @@ defineSlots<{
 	overflow: hidden;
 	text-overflow: ellipsis;
 	font-size: 12px;
-	font-weight: 600;
+	font-weight: var(--font-weight-bold);
 	color: var(--color-text-base);
 }

--- a/packages/frontend/editor-ui/src/components/UpdatesPanel.vue
+++ b/packages/frontend/editor-ui/src/components/UpdatesPanel.vue
@@ -84,7 +84,7 @@ const i18n = useI18n();
 	font-size: 24px;
 	line-height: 24px;
 	color: $updates-panel-text-color;
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 }

 .description {
@@ -96,7 +96,7 @@ const i18n = useI18n();
 		font-size: 16px;
 		line-height: 22px;
 		color: $updates-panel-description-text-color;
-		font-weight: 400;
+		font-weight: var(--font-weight-regular);
 		margin: 0 0 16px 0;
 	}

--- a/packages/frontend/editor-ui/src/components/VersionCard.vue
+++ b/packages/frontend/editor-ui/src/components/VersionCard.vue
@@ -103,7 +103,7 @@ const nodeName = (node: IVersionNode): string => {
 }

 .name {
-	font-weight: 600;
+	font-weight: var(--font-weight-bold);
 	font-size: 16px;
 	line-height: 18px;
 	color: $version-card-name-text-color;
@@ -117,7 +117,7 @@ const nodeName = (node: IVersionNode): string => {

 .description {
 	font-size: 14px;
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 	line-height: 19px;
 	color: $version-card-description-text-color;
 }
@@ -125,7 +125,7 @@ const nodeName = (node: IVersionNode): string => {
 .release-date {
 	font-size: 12px;
 	line-height: 18px;
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 	color: $version-card-release-date-text-color;
 }

--- a/packages/frontend/editor-ui/src/components/WorkflowCard.vue
+++ b/packages/frontend/editor-ui/src/components/WorkflowCard.vue
@@ -256,12 +256,12 @@ const emitWorkflowActiveToggle = (value: { id: string; active: boolean }) => {
 <template>
 	<n8n-card :class="$style.cardLink" data-test-id="workflow-card" @click="onClick">
 		<template #header>
-			<n8n-heading tag="h2" bold :class="$style.cardHeading" data-test-id="workflow-card-name">
+			<n8n-text tag="h2" bold :class="$style.cardHeading" data-test-id="workflow-card-name">
 				{{ data.name }}
 				<N8nBadge v-if="!workflowPermissions.update" class="ml-3xs" theme="tertiary" bold>
 					{{ locale.baseText('workflows.item.readonly') }}
 				</N8nBadge>
-			</n8n-heading>
+			</n8n-text>
 		</template>
 		<div :class="$style.cardDescription">
 			<n8n-text color="text-light" size="small">
--- a/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeAddNodes.vue
+++ b/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeAddNodes.vue
@@ -89,7 +89,7 @@ function onClick() {

 .label {
 	width: max-content;
-	font-weight: var(--font-weight-bold);
+	font-weight: var(--font-weight-medium);
 	font-size: var(--font-size-m);
 	line-height: var(--font-line-height-xloose);
 	color: var(--color-text-dark);
--- a/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
+++ b/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
@@ -313,7 +313,7 @@ function onActivate() {
 	-webkit-line-clamp: 2;
 	overflow: hidden;
 	overflow-wrap: anywhere;
-	font-weight: var(--font-weight-bold);
+	font-weight: var(--font-weight-medium);
 	line-height: var(--font-line-height-compact);
 }

@@ -326,7 +326,7 @@ function onActivate() {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	line-height: var(--font-line-height-compact);
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 }

 .statusIcons {
--- a/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeStatusIcons.vue
+++ b/packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeStatusIcons.vue
@@ -104,7 +104,7 @@ const dirtiness = computed(() =>
 	display: flex;
 	align-items: center;
 	gap: var(--spacing-5xs);
-	font-weight: 600;
+	font-weight: var(--font-weight-bold);
 }

 .runData {
--- a/packages/frontend/editor-ui/src/components/executions/workflow/WorkflowExecutionAnnotationPanel.ee.vue
+++ b/packages/frontend/editor-ui/src/components/executions/workflow/WorkflowExecutionAnnotationPanel.ee.vue
@@ -278,7 +278,7 @@ const onTagsEditEsc = () => {
 	}

 	.key {
-		font-weight: bold;
+		font-weight: var(--font-weight-bold);
 	}
 }

--- a/packages/frontend/editor-ui/src/main.ts
+++ b/packages/frontend/editor-ui/src/main.ts
@@ -12,10 +12,6 @@ import '@n8n/design-system/css/index.scss';

 import './n8n-theme.scss';

-import '@fontsource/open-sans/latin-400.css';
-import '@fontsource/open-sans/latin-600.css';
-import '@fontsource/open-sans/latin-700.css';
-
 import App from '@/App.vue';
 import router from './router';

--- a/packages/frontend/editor-ui/src/n8n-theme.scss
+++ b/packages/frontend/editor-ui/src/n8n-theme.scss
@@ -15,7 +15,7 @@
 }
 .text-light {
 	color: $custom-font-light;
-	font-weight: 400;
+	font-weight: var(--font-weight-regular);
 }

 // Dialog
@@ -52,7 +52,7 @@
 			width: 50px;
 			.el-dialog__close {
 				color: var(--color-foreground-xlight);
-				font-weight: 400;
+				font-weight: var(--font-weight-regular);
 			}
 			.el-dialog__close:hover {
 				transform: scale(1.2);
@@ -121,7 +121,7 @@
 	outline: none;
 }
 .el-tabs__item.is-active {
-	font-weight: bold;
+	font-weight: var(--font-weight-bold);
 }

 .el-tabs__content {
@@ -186,7 +186,7 @@
 .tags-container {
 	.el-select-tags-wrapper .el-tag {
 		font-size: 12px;
-		font-weight: 400;
+		font-weight: var(--font-weight-regular);
 		display: flex;
 		align-items: center;

--- a/packages/frontend/editor-ui/src/views/CanvasAddButton.vue
+++ b/packages/frontend/editor-ui/src/views/CanvasAddButton.vue
@@ -86,7 +86,7 @@ const containerCssVars = computed(() => ({

 .label {
 	width: max-content;
-	font-weight: var(--font-weight-bold);
+	font-weight: var(--font-weight-medium);
 	font-size: var(--font-size-m);
 	line-height: var(--font-line-height-xloose);
 	color: var(--color-text-dark);
--- a/packages/frontend/editor-ui/src/views/SettingsLogStreamingView.vue
+++ b/packages/frontend/editor-ui/src/views/SettingsLogStreamingView.vue
@@ -174,7 +174,7 @@ async function onEdit(destinationId?: string) {
 					{{ i18n.baseText(`settings.log-streaming.heading`) }}
 				</n8n-heading>
 				<template v-if="environment !== 'production'">
-					<strong class="ml-m">Disable License ({{ environment }})&nbsp;</strong>
+					<span class="ml-m">Disable License ({{ environment }})&nbsp;</span>
 					<el-switch v-model="disableLicense" size="large" data-test-id="disable-license-toggle" />
 				</template>
 			</div>
--- a/packages/frontend/editor-ui/src/views/SettingsSso.vue
+++ b/packages/frontend/editor-ui/src/views/SettingsSso.vue
@@ -298,7 +298,7 @@ onMounted(async () => {
 	> label {
 		display: inline-block;
 		font-size: var(--font-size-s);
-		font-weight: var(--font-weight-bold);
+		font-weight: var(--font-weight-medium);
 		padding: 0 0 var(--spacing-2xs);
 	}