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

Style: Design System use across more components (#6705)

Browse Source 
## Summary

Only remaining use is in `buttonTypes.ts` which @viva-jinyi is going to
be working on to consolidate our different buttons soon.

## Changes

- **What**: Replace light/dark colors with theme aware design system
tokens.

## Review Focus

Double check the chosen colors for the components

## Screenshots

| Before | After |
| ------ | ----- |
| <img width="607" height="432" alt="image"
src="https://github.com/user-attachments/assets/6c0ee6d6-819f-40b1-b775-f8b25dd18104"
/> | <img width="646" height="488" alt="image"
src="https://github.com/user-attachments/assets/9c8532de-8ac6-4b48-9021-3fd0b3e0bc63"
/> |

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6705-Style-WIP-Design-System-use-across-more-components-2ab6d73d365081619115fc5f87a46341)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Alexander Brown
2025-11-17 12:27:10 -08:00
committed by GitHub
parent 3effe714f3
commit 471ccca1dd
106 changed files with 456 additions and 2135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
tests-ui/tests/components/dialog/content/manager/NodeConflictDialogContent.test.ts
View File

@@ -186,14 +186,14 @@ describe('NodeConflictDialogContent', () => {
// Import Failed Extensions section should show 1 package
const importFailedSection = wrapper.findAll(
'.w-full.flex.flex-col.bg-neutral-200'
'.w-full.flex.flex-col.bg-base-background'
)[0]
expect(importFailedSection.text()).toContain('1')
expect(importFailedSection.text()).toContain('Import Failed Extensions')
// Conflicts section should show 3 conflicts (excluding import_failed)
const conflictsSection = wrapper.findAll(
'.w-full.flex.flex-col.bg-neutral-200'
'.w-full.flex.flex-col.bg-base-background'
)[1]
expect(conflictsSection.text()).toContain('3')
expect(conflictsSection.text()).toContain('Conflicts')

22
tests-ui/tests/components/dialog/content/manager/packCard/PackCard.test.ts
View File

@@ -208,26 +208,4 @@ describe('PackCard', () => {
expect(wrapper.find('pack-card-footer-stub').exists()).toBe(true)
})
})
describe('styling', () => {
it('should have correct CSS classes', () => {
const wrapper = createWrapper({ nodePack: mockNodePack })
const card = wrapper.find('.p-card')
expect(card.classes()).toContain('w-full')
expect(card.classes()).toContain('h-full')
expect(card.classes()).toContain('rounded-lg')
})
it('should have correct base styling', () => {
const wrapper = createWrapper({ nodePack: mockNodePack })
const card = wrapper.find('.p-card')
// Check the actual classes applied to the card
expect(card.classes()).toContain('p-card')
expect(card.classes()).toContain('p-component')
expect(card.classes()).toContain('inline-flex')
expect(card.classes()).toContain('flex-col')
})
})
})