diff --git a/packages/frontend/@n8n/design-system/src/components/N8nTag/Tag.vue b/packages/frontend/@n8n/design-system/src/components/N8nTag/Tag.vue index 4ed78db816..238a0d30c4 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nTag/Tag.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nTag/Tag.vue @@ -36,7 +36,8 @@ withDefaults(defineProps(), { cursor: pointer; &:hover { - background-color: var(--color-background-medium); + background-color: var(--tag-background-hover-color); + border-color: var(--tag-border-hover-color); } } } diff --git a/packages/frontend/@n8n/design-system/src/css/_primitives.scss b/packages/frontend/@n8n/design-system/src/css/_primitives.scss index 73d47a7fd4..220b976aa2 100644 --- a/packages/frontend/@n8n/design-system/src/css/_primitives.scss +++ b/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%); diff --git a/packages/frontend/@n8n/design-system/src/css/_tokens.dark.scss b/packages/frontend/@n8n/design-system/src/css/_tokens.dark.scss index 051de41601..c86d968bef 100644 --- a/packages/frontend/@n8n/design-system/src/css/_tokens.dark.scss +++ b/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); diff --git a/packages/frontend/@n8n/design-system/src/css/_tokens.scss b/packages/frontend/@n8n/design-system/src/css/_tokens.scss index 32eac9e849..7561910e17 100644 --- a/packages/frontend/@n8n/design-system/src/css/_tokens.scss +++ b/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); diff --git a/packages/frontend/editor-ui/src/components/WorkflowCard.vue b/packages/frontend/editor-ui/src/components/WorkflowCard.vue index ebd0adbf07..c91ea4b8f0 100644 --- a/packages/frontend/editor-ui/src/components/WorkflowCard.vue +++ b/packages/frontend/editor-ui/src/components/WorkflowCard.vue @@ -445,6 +445,7 @@ 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, diff --git a/packages/frontend/editor-ui/src/components/executions/workflow/WorkflowExecutionAnnotationTags.ee.vue b/packages/frontend/editor-ui/src/components/executions/workflow/WorkflowExecutionAnnotationTags.ee.vue index c3e4fb6a7d..cd51f20fc2 100644 --- a/packages/frontend/editor-ui/src/components/executions/workflow/WorkflowExecutionAnnotationTags.ee.vue +++ b/packages/frontend/editor-ui/src/components/executions/workflow/WorkflowExecutionAnnotationTags.ee.vue @@ -174,8 +174,8 @@ const onTagsEditEsc = () => { } .addTagButtonIconOnly { - height: 22px; - width: 22px; + height: 20px; + width: 20px; } .tagsContainer {