Comfy-Org / Comfy-Org/ComfyUI_frontend

4 layered color systems create fragile overrides

Open
#11,048 0 comments 0 reactions 0 assignees View on GitHub
area:customization area:ui area:vue-migration audit:conflicting code-audit
Dominant language
TypeScript
Stars
2k
Forks
699
Avg merge
1d 7h
Merged PRs (30d)
490

Description

## Recommendation

### 🔍 INVESTIGATE: Simplify color system layering

Four overlapping color systems create complexity and fragile override chains.

## What Was Found

| System | Location |
|---|---|
| **Design system CSS variables** | `packages/design-system/src/css/style.css` (Tailwind @theme) |
| **PrimeVue Aura preset** | `src/main.ts` (PrimeVue theme config) |
| **Color palette JSON system** | `colorPaletteStore.ts` + `colorPaletteService.ts` (overrides LiteGraph & Comfy variables) |
| **LiteGraph CSS** | `src/lib/litegraph/public/css/litegraph.css` |

## Context

The color palette service dynamically overrides CSS variables set by the design system, which can be fragile. As PrimeVue is migrated away, one layer will eventually be removed. Consider having the palette system generate Tailwind-compatible tokens directly.

---

**Category:** Conflicting Systems | **Confidence:** MEDIUM | **Tools:** Semantic analysis
_Filed by audit-code skill_

Part of #11022

┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-11048-4-layered-color-systems-create-fragile-overrides-33e6d73d3650815e849afc2c200c50ff) by [Unito](https://www.unito.io)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.