Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-01-26 19:09:52 +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;
/* Palette Colors */
--color-charcoal-100: #171718;
--color-charcoal-200: #202121;
--color-charcoal-300: #262729;
--color-charcoal-400: #2d2e32;
--color-charcoal-500: #313235;
--color-charcoal-600: #3c3d42;
--color-charcoal-700: #494a50;
--color-charcoal-800: #55565e;
--color-charcoal-100: #55565e;
--color-charcoal-200: #494a50;
--color-charcoal-300: #3c3d42;
--color-charcoal-400: #313235;
--color-charcoal-500: #2d2e32;
--color-charcoal-600: #262729;
--color-charcoal-700: #202121;
--color-charcoal-800: #171718;
--color-stone-100: #444444;
--color-stone-200: #828282;
@@ -103,12 +103,12 @@
--color-danger-100: #c02323;
--color-danger-200: #d62952;
--color-bypass: #6A246A;
--color-bypass: #6a246a;
--color-error: #962a2a;
--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-200: rgb(from var(--color-charcoal-800) r g b/ 0.1);
--color-node-hover-100: rgb(from var(--color-charcoal-100) r g b/ 0.15);
--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);
/* PrimeVue pulled colors */
@@ -121,10 +121,10 @@
}
@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-hovered: var(--color-charcoal-500);
--color-node-component-surface-selected: var(--color-charcoal-700);
--color-node-component-surface-hovered: var(--color-charcoal-400);
--color-node-component-surface-selected: var(--color-charcoal-200);
--color-node-stroke: var(--color-stone-100);
}

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

@@ -7,7 +7,7 @@
severity="secondary"
text
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"
>
<template #icon>

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

@@ -7,9 +7,9 @@
:data-node-id="nodeData.id"
:class="
cn(
'bg-white dark-theme:bg-charcoal-100',
'bg-white dark-theme:bg-charcoal-800',
'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',
'outline-transparent -outline-offset-2 outline-2',
borderClass,
@@ -309,7 +309,7 @@ const hasCustomContent = computed(() => {
// Computed classes and conditions for better reusability
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'
// Common condition computations to avoid repetition