diff --git a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png index 36dddbb835..cd35644892 100644 Binary files a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png and b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png index a27406c39f..3cbe7d24ce 100644 Binary files a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png and b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png index ae210142df..37c3b3af7d 100644 Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png index f7727feb94..f7625584b3 100644 Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png index 30ffa4e0b9..dbfa157839 100644 Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png index ff5b860c43..25627f8773 100644 Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png index 610b15f1ad..c05af6991b 100644 Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png index 9b42088965..5feb89c723 100644 Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png index c7ea9a72ee..22e6a3b833 100644 Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png index 6eaf27c951..2a23c2e2d1 100644 Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png index 49b4a78d0c..1f7bc28f40 100644 Binary files a/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png index fa66f6cd1c..542f270ba6 100644 Binary files a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png index eb8c0b8cba..22281aa654 100644 Binary files a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png index f7ff7c7a78..1769f095ba 100644 Binary files a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png index 25ffc18d35..48cdf29d8b 100644 Binary files a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-default-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-default-chromium-linux.png index a1c8b6d5c2..b74ef804d1 100644 Binary files a/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-default-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-default-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-lod-inactive-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-lod-inactive-chromium-linux.png index df9ee2c930..7065b299f0 100644 Binary files a/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-lod-inactive-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-lod-inactive-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png index c47f1b2fe3..6973c889af 100644 Binary files a/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png b/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png index 4526b27080..7882700839 100644 Binary files a/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png and b/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png differ diff --git a/packages/design-system/src/css/style.css b/packages/design-system/src/css/style.css index 95084d28fa..3e7ec98913 100644 --- a/packages/design-system/src/css/style.css +++ b/packages/design-system/src/css/style.css @@ -73,6 +73,7 @@ --color-jade-400: #47e469; --color-jade-600: #00cd72; + --color-graphite-400: #9C9EAB; --color-gold-400: #fcbf64; --color-gold-500: #fdab34; @@ -227,7 +228,7 @@ --brand-yellow: var(--color-electric-400); --brand-blue: var(--color-sapphire-700); --secondary-background: var(--color-smoke-200); - --secondary-background-hover: var(--color-smoke-400); + --secondary-background-hover: var(--color-smoke-200); --secondary-background-selected: var(--color-smoke-600); --base-background: var(--color-white); --primary-background: var(--color-azure-400); @@ -242,6 +243,17 @@ --muted-background: var(--color-smoke-700); --accent-background: var(--color-smoke-800); + /* Component/Node tokens from design system light */ + --component-node-background: var(--color-white); + --component-node-border: var(--color-border-default); + --component-node-foreground: var(--base-foreground); + --component-node-foreground-secondary: var(--color-muted-foreground); + --component-node-widget-background: var(--secondary-background); + --component-node-widget-background-hovered: var(--secondary-background-hover); + --component-node-widget-background-selected: var(--secondary-background-selected); + --component-node-widget-background-disabled: var(--color-alpha-ash-500-20); + --component-node-widget-background-highlighted: var(--color-ash-500); + /* Default UI element color palette variables */ --palette-contrast-mix-color: #fff; --palette-interface-panel-surface: var(--comfy-menu-bg); @@ -301,7 +313,7 @@ --node-component-surface-highlight: var(--color-slate-100); --node-component-surface-hovered: var(--color-charcoal-600); --node-component-surface-selected: var(--color-charcoal-200); - --node-component-surface: var(--color-charcoal-800); + --node-component-surface: var(--color-charcoal-600); --node-component-tooltip: var(--color-white); --node-component-tooltip-border: var(--color-slate-300); --node-component-tooltip-surface: var(--color-charcoal-800); @@ -339,6 +351,17 @@ --border-subtle: var(--color-charcoal-300); --muted-background: var(--color-charcoal-100); --accent-background: var(--color-charcoal-100); + + /* Component/Node tokens from design dark system */ + --component-node-background: var(--color-charcoal-600); + --component-node-border: var(--color-charcoal-100); + --component-node-foreground: var(--base-foreground); + --component-node-foreground-secondary: var(--color-muted-foreground); + --component-node-widget-background: var(--secondary-background-hover); + --component-node-widget-background-hovered: var(--secondary-background-selected); + --component-node-widget-background-selected: var(--color-charcoal-100); + --component-node-widget-background-disabled: var(--color-alpha-charcoal-600-30); + --component-node-widget-background-highlighted: var(--color-graphite-400); } @theme inline { @@ -406,6 +429,17 @@ --color-text-primary: var(--text-primary); --color-input-surface: var(--input-surface); + /* Component/Node design tokens */ + --color-component-node-background: var(--component-node-background); + --color-component-node-border: var(--component-node-border); + --color-component-node-foreground: var(--component-node-foreground); + --color-component-node-foreground-secondary: var(--component-node-foreground-secondary); + --color-component-node-widget-background: var(--component-node-widget-background); + --color-component-node-widget-background-hovered: var(--component-node-widget-background-hovered); + --color-component-node-widget-background-selected: var(--component-node-widget-background-selected); + --color-component-node-widget-background-disabled: var(--component-node-widget-background-disabled); + --color-component-node-widget-background-highlighted: var(--component-node-widget-background-highlighted); + /* Semantic tokens */ --color-base-foreground: var(--base-foreground); --color-muted-foreground: var(--muted-foreground); diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue index ead65d2ccd..b731349a57 100644 --- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue +++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue @@ -8,10 +8,10 @@ :data-node-id="nodeData.id" :class=" cn( - 'bg-node-component-surface lg-node absolute', + 'bg-component-node-background lg-node absolute', 'h-min w-min contain-style contain-layout min-h-(--node-height) min-w-(--node-width)', 'rounded-2xl touch-none flex flex-col', - 'border-1 border-solid border-node-component-border', + 'border-1 border-solid border-component-node-border', // hover (only when node should handle events) shouldHandleNodePointerEvents && 'hover:ring-7 ring-node-component-ring', @@ -36,7 +36,7 @@ transform: `translate(${position.x ?? 0}px, ${(position.y ?? 0) - LiteGraph.NODE_TITLE_HEIGHT}px)`, zIndex: zIndex, opacity: nodeOpacity, - '--node-component-surface': nodeBodyBackgroundColor + '--component-node-background': nodeBodyBackgroundColor }, dragStyle ]" @@ -383,7 +383,7 @@ const hasCustomContent = computed(() => { }) // Computed classes and conditions for better reusability -const separatorClasses = 'bg-node-component-border h-px mx-0 w-full lod-toggle' +const separatorClasses = 'bg-component-node-border h-px mx-0 w-full lod-toggle' const progressClasses = 'h-2 bg-primary-500 transition-all duration-300' const { latestPreviewUrl, shouldShowPreviewImg } = useNodePreviewState( diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.vue b/src/renderer/extensions/vueNodes/components/NodeHeader.vue index 5758fed622..da3b5a9f0e 100644 --- a/src/renderer/extensions/vueNodes/components/NodeHeader.vue +++ b/src/renderer/extensions/vueNodes/components/NodeHeader.vue @@ -7,7 +7,7 @@ :class=" cn( 'lg-node-header p-4 rounded-t-2xl w-full min-w-50', - 'bg-node-component-header-surface text-node-component-header', + 'text-node-component-header', collapsed && 'rounded-2xl' ) " diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue index 60b9aeb288..912bfb2f93 100644 --- a/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue +++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue @@ -26,7 +26,7 @@ size="small" :pt="{ option: 'text-xs', - dropdownIcon: 'text-button-icon' + dropdownIcon: 'text-component-node-foreground-secondary' }" />