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

Move color palettes to constants/coreColorPalettes.ts (#2035)

Browse Source
This commit is contained in:
Chenlei Hu
2024-12-23 21:43:30 -05:00
committed by GitHub
parent 54ca111c7c
commit af6cb31214
4 changed files with 76 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/palettes/dark.json
View File

@@ -4,7 +4,7 @@
"colors": { "colors": {
"node_slot": { "node_slot": {
"CLIP": "#FFD500", "CLIP": "#FFD500",
"clip_vision": "#A8DADC", "CLIP_VISION": "#A8DADC",
"CLIP_VISION_OUTPUT": "#ad7452", "CLIP_VISION_OUTPUT": "#ad7452",
"CONDITIONING": "#FFA931", "CONDITIONING": "#FFA931",
"CONTROL_NET": "#6EE7B7", "CONTROL_NET": "#6EE7B7",

16
src/constants/coreColorPalettes.ts Normal file
View File

@@ -0,0 +1,16 @@
import dark from '@/assets/palettes/dark.json'
import light from '@/assets/palettes/light.json'
import solarized from '@/assets/palettes/solarized.json'
import arc from '@/assets/palettes/arc.json'
import nord from '@/assets/palettes/nord.json'
import github from '@/assets/palettes/github.json'
import type { ColorPalettes } from '@/types/colorPaletteTypes'
export const CORE_COLOR_PALETTES: ColorPalettes = {
dark,
light,
solarized,
arc,
nord,
github
} as const

18
src/extensions/core/colorPalette.ts
View File

@@ -4,24 +4,10 @@ import { app } from '../../scripts/app'
import { $el } from '../../scripts/ui' import { $el } from '../../scripts/ui'
import type { ColorPalettes, Palette } from '@/types/colorPaletteTypes' import type { ColorPalettes, Palette } from '@/types/colorPaletteTypes'
import { LGraphCanvas, LiteGraph } from '@comfyorg/litegraph' import { LGraphCanvas, LiteGraph } from '@comfyorg/litegraph'
import dark from '@/assets/palettes/dark.json' import { CORE_COLOR_PALETTES } from '@/constants/coreColorPalettes'
import light from '@/assets/palettes/light.json'
import solarized from '@/assets/palettes/solarized.json'
import arc from '@/assets/palettes/arc.json'
import nord from '@/assets/palettes/nord.json'
import github from '@/assets/palettes/github.json'
// Manage color palettes // Manage color palettes
const colorPalettes: ColorPalettes = { const colorPalettes = CORE_COLOR_PALETTES
dark,
light,
solarized,
arc,
nord,
github
} as const
const id = 'Comfy.ColorPalette' const id = 'Comfy.ColorPalette'
const idCustomColorPalettes = 'Comfy.CustomColorPalettes' const idCustomColorPalettes = 'Comfy.CustomColorPalettes'
const defaultColorPaletteId = 'dark' const defaultColorPaletteId = 'dark'

116
src/types/colorPaletteTypes.ts
View File

@@ -1,69 +1,67 @@
import { LiteGraph } from '@comfyorg/litegraph' import { LiteGraph } from '@comfyorg/litegraph'
import { z } from 'zod' import { z } from 'zod'
const nodeSlotSchema = z const nodeSlotSchema = z.object({
.object({ BOOLEAN: z.string().optional(),
BOOLEAN: z.string().optional(), CLIP: z.string().optional(),
CLIP: z.string(), CLIP_VISION: z.string().optional(),
CLIP_VISION: z.string(), CLIP_VISION_OUTPUT: z.string().optional(),
CLIP_VISION_OUTPUT: z.string(), CONDITIONING: z.string().optional(),
CONDITIONING: z.string(), CONTROL_NET: z.string().optional(),
CONTROL_NET: z.string(), CONTROL_NET_WEIGHTS: z.string().optional(),
CONTROL_NET_WEIGHTS: z.string().optional(), FLOAT: z.string().optional(),
FLOAT: z.string().optional(), GLIGEN: z.string().optional(),
GLIGEN: z.string().optional(), IMAGE: z.string().optional(),
IMAGE: z.string(), IMAGEUPLOAD: z.string().optional(),
IMAGEUPLOAD: z.string().optional(), INT: z.string().optional(),
INT: z.string().optional(), LATENT: z.string().optional(),
LATENT: z.string(), LATENT_KEYFRAME: z.string().optional(),
LATENT_KEYFRAME: z.string().optional(), MASK: z.string().optional(),
MASK: z.string(), MODEL: z.string().optional(),
MODEL: z.string(), SAMPLER: z.string().optional(),
SAMPLER: z.string().optional(), SIGMAS: z.string().optional(),
SIGMAS: z.string().optional(), STRING: z.string().optional(),
STRING: z.string().optional(), STYLE_MODEL: z.string().optional(),
STYLE_MODEL: z.string(), T2I_ADAPTER_WEIGHTS: z.string().optional(),
T2I_ADAPTER_WEIGHTS: z.string().optional(), TAESD: z.string().optional(),
TAESD: z.string(), TIMESTEP_KEYFRAME: z.string().optional(),
TIMESTEP_KEYFRAME: z.string().optional(), UPSCALE_MODEL: z.string().optional(),
UPSCALE_MODEL: z.string().optional(), VAE: z.string().optional()
VAE: z.string() })
})
.passthrough()
const litegraphBaseSchema = z const litegraphBaseSchema = z.object({
.object({ BACKGROUND_IMAGE: z.string().optional(),
BACKGROUND_IMAGE: z.string(), CLEAR_BACKGROUND_COLOR: z.string().optional(),
CLEAR_BACKGROUND_COLOR: z.string(), NODE_TITLE_COLOR: z.string().optional(),
NODE_TITLE_COLOR: z.string(), NODE_SELECTED_TITLE_COLOR: z.string().optional(),
NODE_SELECTED_TITLE_COLOR: z.string(), NODE_TEXT_SIZE: z.number().optional(),
NODE_TEXT_SIZE: z.number(), NODE_TEXT_COLOR: z.string().optional(),
NODE_TEXT_COLOR: z.string(), NODE_SUBTEXT_SIZE: z.number().optional(),
NODE_SUBTEXT_SIZE: z.number(), NODE_DEFAULT_COLOR: z.string().optional(),
NODE_DEFAULT_COLOR: z.string(), NODE_DEFAULT_BGCOLOR: z.string().optional(),
NODE_DEFAULT_BGCOLOR: z.string(), NODE_DEFAULT_BOXCOLOR: z.string().optional(),
NODE_DEFAULT_BOXCOLOR: z.string(), NODE_DEFAULT_SHAPE: z
NODE_DEFAULT_SHAPE: z.union([ .union([
z.literal(LiteGraph.BOX_SHAPE), z.literal(LiteGraph.BOX_SHAPE),
z.literal(LiteGraph.ROUND_SHAPE), z.literal(LiteGraph.ROUND_SHAPE),
z.literal(LiteGraph.CARD_SHAPE) z.literal(LiteGraph.CARD_SHAPE)
]), ])
NODE_BOX_OUTLINE_COLOR: z.string(), .optional(),
NODE_BYPASS_BGCOLOR: z.string(), NODE_BOX_OUTLINE_COLOR: z.string().optional(),
NODE_ERROR_COLOUR: z.string(), NODE_BYPASS_BGCOLOR: z.string().optional(),
DEFAULT_SHADOW_COLOR: z.string(), NODE_ERROR_COLOUR: z.string().optional(),
DEFAULT_GROUP_FONT: z.number(), DEFAULT_SHADOW_COLOR: z.string().optional(),
WIDGET_BGCOLOR: z.string(), DEFAULT_GROUP_FONT: z.number().optional(),
WIDGET_OUTLINE_COLOR: z.string(), WIDGET_BGCOLOR: z.string().optional(),
WIDGET_TEXT_COLOR: z.string(), WIDGET_OUTLINE_COLOR: z.string().optional(),
WIDGET_SECONDARY_TEXT_COLOR: z.string(), WIDGET_TEXT_COLOR: z.string().optional(),
LINK_COLOR: z.string(), WIDGET_SECONDARY_TEXT_COLOR: z.string().optional(),
EVENT_LINK_COLOR: z.string(), LINK_COLOR: z.string().optional(),
CONNECTING_LINK_COLOR: z.string(), EVENT_LINK_COLOR: z.string().optional(),
BADGE_FG_COLOR: z.string().optional(), CONNECTING_LINK_COLOR: z.string().optional(),
BADGE_BG_COLOR: z.string().optional() BADGE_FG_COLOR: z.string().optional(),
}) BADGE_BG_COLOR: z.string().optional()
.passthrough() })
const comfyBaseSchema = z.object({ const comfyBaseSchema = z.object({
['fg-color']: z.string(), ['fg-color']: z.string(),