Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-30 19:21:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: Flip the shade direction for charoal to go from light to dark (#5609)

Browse Source
This commit is contained in:
Alexander Brown
2025-09-16 16:31:13 -07:00
committed by GitHub
parent f5b949762d
commit 15cffe9d9e
3 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/assets/css/style.css
View File

@@ -57,14 +57,14 @@
--font-inter: 'Inter', sans-serif; --font-inter: 'Inter', sans-serif;
/* Palette Colors */ /* Palette Colors */
--color-charcoal-100: #171718; --color-charcoal-100: #55565e;
--color-charcoal-200: #202121; --color-charcoal-200: #494a50;
--color-charcoal-300: #262729; --color-charcoal-300: #3c3d42;
--color-charcoal-400: #2d2e32; --color-charcoal-400: #313235;
--color-charcoal-500: #313235; --color-charcoal-500: #2d2e32;
--color-charcoal-600: #3c3d42; --color-charcoal-600: #262729;
--color-charcoal-700: #494a50; --color-charcoal-700: #202121;
--color-charcoal-800: #55565e; --color-charcoal-800: #171718;
--color-stone-100: #444444; --color-stone-100: #444444;
--color-stone-200: #828282; --color-stone-200: #828282;
@@ -103,12 +103,12 @@
--color-danger-100: #c02323; --color-danger-100: #c02323;
--color-danger-200: #d62952; --color-danger-200: #d62952;
--color-bypass: #6A246A; --color-bypass: #6a246a;
--color-error: #962a2a; --color-error: #962a2a;
--color-blue-selection: rgb(from var(--color-blue-100) r g b / 0.3); --color-blue-selection: rgb(from var(--color-blue-100) r g b / 0.3);
--color-node-hover-100: rgb(from var(--color-charcoal-800) r g b/ 0.15); --color-node-hover-100: rgb(from var(--color-charcoal-100) r g b/ 0.15);
--color-node-hover-200: rgb(from var(--color-charcoal-800) r g b/ 0.1); --color-node-hover-200: rgb(from var(--color-charcoal-100) r g b/ 0.1);
--color-modal-tag: rgb(from var(--color-gray-400) r g b/ 0.4); --color-modal-tag: rgb(from var(--color-gray-400) r g b/ 0.4);
/* PrimeVue pulled colors */ /* PrimeVue pulled colors */
@@ -121,10 +121,10 @@
} }
@theme inline { @theme inline {
--color-node-component-surface: var(--color-charcoal-300); --color-node-component-surface: var(--color-charcoal-600);
--color-node-component-surface-highlight: var(--color-slate-100); --color-node-component-surface-highlight: var(--color-slate-100);
--color-node-component-surface-hovered: var(--color-charcoal-500); --color-node-component-surface-hovered: var(--color-charcoal-400);
--color-node-component-surface-selected: var(--color-charcoal-700); --color-node-component-surface-selected: var(--color-charcoal-200);
--color-node-stroke: var(--color-stone-100); --color-node-stroke: var(--color-stone-100);
} }

2
src/components/graph/selectionToolbox/BypassButton.vue
View File

@@ -7,7 +7,7 @@
severity="secondary" severity="secondary"
text text
data-testid="bypass-button" data-testid="bypass-button"
class="hover:dark-theme:bg-charcoal-300 hover:bg-[#E7E6E6]" class="hover:dark-theme:bg-charcoal-600 hover:bg-[#E7E6E6]"
@click="toggleBypass" @click="toggleBypass"
> >
<template #icon> <template #icon>

6
src/renderer/extensions/vueNodes/components/LGraphNode.vue
View File

@@ -7,9 +7,9 @@
:data-node-id="nodeData.id" :data-node-id="nodeData.id"
:class=" :class="
cn( cn(
'bg-white dark-theme:bg-charcoal-100', 'bg-white dark-theme:bg-charcoal-800',
'lg-node absolute rounded-2xl', 'lg-node absolute rounded-2xl',
'border border-solid border-sand-100 dark-theme:border-charcoal-300', 'border border-solid border-sand-100 dark-theme:border-charcoal-600',
'hover:ring-7 ring-gray-500/50 dark-theme:ring-gray-500/20', 'hover:ring-7 ring-gray-500/50 dark-theme:ring-gray-500/20',
'outline-transparent -outline-offset-2 outline-2', 'outline-transparent -outline-offset-2 outline-2',
borderClass, borderClass,
@@ -309,7 +309,7 @@ const hasCustomContent = computed(() => {
// Computed classes and conditions for better reusability // Computed classes and conditions for better reusability
const separatorClasses = const separatorClasses =
'bg-sand-100 dark-theme:bg-charcoal-300 h-[1px] mx-0 w-full' 'bg-sand-100 dark-theme:bg-charcoal-600 h-px mx-0 w-full'
const progressClasses = 'h-2 bg-primary-500 transition-all duration-300' const progressClasses = 'h-2 bg-primary-500 transition-all duration-300'
// Common condition computations to avoid repetition // Common condition computations to avoid repetition