fix(editor): Add fallback color for NodeItem Icons (#18607)

This commit is contained in:
Raúl Gómez Morales
2025-08-25 08:25:07 +02:00
committed by GitHub
parent b6681bb92c
commit c8dc7d9ab6

View File

@@ -18,9 +18,9 @@ import { useNodeType } from '@/composables/useNodeType';
import { useTelemetry } from '@/composables/useTelemetry'; import { useTelemetry } from '@/composables/useTelemetry';
import { useNodeTypesStore } from '@/stores/nodeTypes.store'; import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import { N8nTooltip } from '@n8n/design-system'; import { N8nTooltip } from '@n8n/design-system';
import { useI18n } from '@n8n/i18n';
import { useActions } from '../composables/useActions'; import { useActions } from '../composables/useActions';
import { useViewStacks } from '../composables/useViewStacks'; import { useViewStacks } from '../composables/useViewStacks';
import { useI18n } from '@n8n/i18n';
import { isNodePreviewKey, removePreviewToken, shouldShowCommunityNodeDetails } from '../utils'; import { isNodePreviewKey, removePreviewToken, shouldShowCommunityNodeDetails } from '../utils';
export interface Props { export interface Props {
@@ -179,7 +179,11 @@ function onCommunityNodeTooltipClick(event: MouseEvent) {
> >
<template #icon> <template #icon>
<div v-if="isSubNodeType" :class="$style.subNodeBackground"></div> <div v-if="isSubNodeType" :class="$style.subNodeBackground"></div>
<NodeIcon :class="$style.nodeIcon" :node-type="nodeType" /> <NodeIcon
:class="$style.nodeIcon"
:node-type="nodeType"
color-default="var(--color-foreground-xdark)"
/>
</template> </template>
<template v-if="isOfficial" #extraDetails> <template v-if="isOfficial" #extraDetails>
@@ -222,7 +226,13 @@ function onCommunityNodeTooltipClick(event: MouseEvent) {
:class="$style.draggable" :class="$style.draggable"
:style="draggableStyle" :style="draggableStyle"
> >
<NodeIcon :node-type="nodeType" :size="40" :shrink="false" @click.capture.stop /> <NodeIcon
:node-type="nodeType"
:size="40"
:shrink="false"
@click.capture.stop
color-default="var(--color-foreground-xdark)"
/>
</div> </div>
</template> </template>
</N8nNodeCreatorNode> </N8nNodeCreatorNode>
@@ -232,7 +242,6 @@ function onCommunityNodeTooltipClick(event: MouseEvent) {
.nodeItem { .nodeItem {
--trigger-icon-background-color: #{$trigger-icon-background-color}; --trigger-icon-background-color: #{$trigger-icon-background-color};
--trigger-icon-border-color: #{$trigger-icon-border-color}; --trigger-icon-border-color: #{$trigger-icon-border-color};
--canvas-node-icon-color: var(--color-foreground-xdark);
margin-left: 15px; margin-left: 15px;
margin-right: 12px; margin-right: 12px;
user-select: none; user-select: none;