fix(editor): Fix tags in dar mode and spacing in workflow card (no-changelog) (#16271)

packages/frontend/@n8n/design-system/src/components/N8nTag/Tag.vue

@@ -36,7 +36,8 @@ withDefaults(defineProps<TagProps>(), {
 		cursor: pointer;
 
 		&:hover {
-			background-color: var(--color-background-medium);
+			background-color: var(--tag-background-hover-color);
+			border-color: var(--tag-border-hover-color);
 		}
 	}
 }

packages/frontend/@n8n/design-system/src/css/_primitives.scss

@@ -11,6 +11,7 @@
 	--prim-gray-800: hsl(var(--prim-gray-h), 1%, 20%);
 	--prim-gray-780: hsl(var(--prim-gray-h), 1%, 22%);
 	--prim-gray-740: hsl(var(--prim-gray-h), 2%, 26%);
+	--prim-gray-710: hsl(var(--prim-gray-h), 2%, 29%);
 	--prim-gray-670: hsl(var(--prim-gray-h), 2%, 33%);
 	--prim-gray-540: hsl(var(--prim-gray-h), 4%, 46%);
 	--prim-gray-490: hsl(var(--prim-gray-h), 3%, 51%);

packages/frontend/@n8n/design-system/src/css/_tokens.dark.scss

@@ -178,6 +178,13 @@
 	--color-line-break: var(--prim-gray-420);
 	--color-code-line-break: var(--prim-color-secondary-tint-100);
 
+	// Tag
+	--tag-background-color: var(--prim-gray-670);
+	--tag-background-hover-color: var(--prim-gray-540);
+	--tag-border-color: var(--prim-gray-710);
+	--tag-border-hover-color: var(--prim-gray-670);
+	--tag-text-color: var(--color-text-dark);
+
 	// Variables
 	--color-variables-usage-font: var(--prim-color-alt-a-tint-300);
 	--color-variables-usage-syntax-bg: var(--prim-color-alt-a-alpha-025);

packages/frontend/@n8n/design-system/src/css/_tokens.scss

@@ -225,10 +225,12 @@
 	--color-code-line-break: var(--prim-color-secondary-tint-200);
 
 	// Tag
-	--tag-height: 22px;
+	--tag-height: 20px;
 	--tag-padding: 0 var(--spacing-4xs);
 	--tag-background-color: var(--prim-gray-40);
-	--tag-border-color: var(--color-foreground-light);
+	--tag-background-hover-color: var(--prim-gray-70);
+	--tag-border-color: var(--prim-gray-70);
+	--tag-border-hover-color: var(--prim-gray-120);
 	--tag-border-radius: var(--border-radius-base);
 	--tag-text-color: var(--color-text-base);
 	--tag-font-size: var(--font-size-2xs);

packages/frontend/editor-ui/src/components/WorkflowCard.vue

@@ -445,6 +445,7 @@ const onBreadcrumbItemClick = async (item: PathItem) => {
 				<span
 					v-if="settingsStore.areTagsEnabled && data.tags && data.tags.length > 0"
 					v-show="data"
+					:class="$style.cardTags"
 				>
 					<n8n-tags
 						:tags="data.tags"
@@ -552,6 +553,11 @@ const onBreadcrumbItemClick = async (item: PathItem) => {
 	padding: 0 0 var(--spacing-s) var(--spacing-s);
 }
 
+.cardTags {
+	display: inline-block;
+	margin-top: var(--spacing-4xs);
+}
+
 .cardActions {
 	display: flex;
 	flex-direction: row;
@@ -592,6 +598,7 @@ const onBreadcrumbItemClick = async (item: PathItem) => {
 	.cardActions {
 		width: 100%;
 		padding: 0 var(--spacing-s) var(--spacing-s);
+		justify-content: end;
 	}
 
 	.cardBadge,

packages/frontend/editor-ui/src/components/executions/workflow/WorkflowExecutionAnnotationTags.ee.vue

@@ -174,8 +174,8 @@ const onTagsEditEsc = () => {
 }
 
 .addTagButtonIconOnly {
-	height: 22px;
+	height: 20px;
-	width: 22px;
+	width: 20px;
 }
 
 .tagsContainer {