Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-24 00:09:32 +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
src/workbench/extensions/manager/components/ManagerProgressDialogContent.vue
View File

@@ -22,7 +22,7 @@
<Panel
:expanded="collapsedPanels[index] === true"
toggleable
class="shadow-elevation-1 mt-2 rounded-lg dark-theme:border-black dark-theme:bg-black"
class="shadow-elevation-1 mt-2 rounded-lg"
>
<template #header>
<div class="flex w-full items-center justify-between py-2">
@@ -67,7 +67,7 @@
<div
v-for="(logLine, logIndex) in log.logs"
:key="logIndex"
class="text-neutral-400 dark-theme:text-muted"
class="text-muted"
>
<pre class="break-words whitespace-pre-wrap">{{ logLine }}</pre>
</div>

2
src/workbench/extensions/manager/components/ManagerProgressFooter.vue
View File

@@ -32,7 +32,7 @@
v-if="!isInProgress && !isRestartCompleted"
rounded
outlined
class="!dark-theme:bg-transparent mr-4 rounded-md border-2 border-neutral-900 px-3 text-neutral-600 hover:bg-neutral-100 dark-theme:border-white dark-theme:text-white dark-theme:hover:bg-neutral-800"
class="mr-4 rounded-md border-2 border-base-foreground px-3 text-base-foreground hover:bg-secondary-background-hover"
@click="handleRestart"
>
{{ $t('manager.applyChanges') }}

2
src/workbench/extensions/manager/components/manager/ManagerDialogContent.vue
View File

@@ -20,7 +20,7 @@
:tabs="tabs"
/>
<div
class="flex-1 overflow-auto bg-gray-50 dark-theme:bg-neutral-900"
class="flex-1 overflow-auto bg-base-background"
:class="{
'transition-all duration-300': isSmallScreen
}"

69
src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
View File

@@ -14,7 +14,7 @@
<!-- Import Failed List Wrapper -->
<div
v-if="importFailedConflicts.length > 0"
class="flex min-h-8 w-full flex-col rounded-lg bg-neutral-200 dark-theme:bg-black"
class="flex min-h-8 w-full flex-col rounded-lg bg-base-background"
>
<div
data-testid="conflict-dialog-panel-toggle"
@@ -22,14 +22,12 @@
@click="toggleImportFailedPanel"
>
<div class="flex flex-1">
<span
class="mr-2 text-xs font-bold text-yellow-600 dark-theme:text-yellow-400"
>{{ importFailedConflicts.length }}</span
>
<span
class="text-xs font-bold text-neutral-600 dark-theme:text-white"
>{{ $t('manager.conflicts.importFailedExtensions') }}</span
>
<span class="mr-2 text-xs font-bold text-warning-background">{{
importFailedConflicts.length
}}</span>
<span class="text-xs font-bold text-base-foreground">{{
$t('manager.conflicts.importFailedExtensions')
}}</span>
</div>
<div>
<Button
@@ -39,7 +37,7 @@
: 'pi pi-chevron-right text-xs'
"
text
class="!bg-transparent text-neutral-600 dark-theme:text-neutral-300"
class="!bg-transparent text-muted"
/>
</div>
</div>
@@ -54,7 +52,7 @@
:key="i"
class="conflict-list-item flex h-6 flex-shrink-0 items-center justify-between px-4"
>
<span class="text-xs text-neutral-600 dark-theme:text-neutral-300">
<span class="text-xs text-muted">
{{ packageName }}
</span>
<span class="pi pi-info-circle text-sm"></span>
@@ -62,23 +60,19 @@
</div>
</div>
<!-- Conflict List Wrapper -->
<div
class="flex min-h-8 w-full flex-col rounded-lg bg-neutral-200 dark-theme:bg-black"
>
<div class="flex min-h-8 w-full flex-col rounded-lg bg-base-background">
<div
data-testid="conflict-dialog-panel-toggle"
class="flex h-8 w-full items-center justify-between gap-2 pl-4"
@click="toggleConflictsPanel"
>
<div class="flex flex-1">
<span
class="mr-2 text-xs font-bold text-yellow-600 dark-theme:text-yellow-400"
>{{ allConflictDetails.length }}</span
>
<span
class="text-xs font-bold text-neutral-600 dark-theme:text-white"
>{{ $t('manager.conflicts.conflicts') }}</span
>
<span class="mr-2 text-xs font-bold text-warning-background">{{
allConflictDetails.length
}}</span>
<span class="text-xs font-bold text-base-foreground">{{
$t('manager.conflicts.conflicts')
}}</span>
</div>
<div>
<Button
@@ -88,7 +82,7 @@
: 'pi pi-chevron-right text-xs'
"
text
class="!bg-transparent text-neutral-600 dark-theme:text-neutral-300"
class="!bg-transparent text-muted"
/>
</div>
</div>
@@ -103,32 +97,27 @@
:key="i"
class="conflict-list-item flex h-6 flex-shrink-0 items-center justify-between px-4"
>
<span
class="text-xs text-neutral-600 dark-theme:text-neutral-300"
>{{ getConflictMessage(conflict, t) }}</span
>
<span class="text-xs text-muted">{{
getConflictMessage(conflict, t)
}}</span>
<span class="pi pi-info-circle text-sm"></span>
</div>
</div>
</div>
<!-- Extension List Wrapper -->
<div
class="flex min-h-8 w-full flex-col rounded-lg bg-neutral-200 dark-theme:bg-black"
>
<div class="flex min-h-8 w-full flex-col rounded-lg bg-base-background">
<div
data-testid="conflict-dialog-panel-toggle"
class="flex h-8 w-full items-center justify-between gap-2 pl-4"
@click="toggleExtensionsPanel"
>
<div class="flex flex-1">
<span
class="mr-2 text-xs font-bold text-yellow-600 dark-theme:text-yellow-400"
>{{ conflictData.length }}</span
>
<span
class="text-xs font-bold text-neutral-600 dark-theme:text-white"
>{{ $t('manager.conflicts.extensionAtRisk') }}</span
>
<span class="mr-2 text-xs font-bold text-warning-background">{{
conflictData.length
}}</span>
<span class="text-xs font-bold text-base-foreground">{{
$t('manager.conflicts.extensionAtRisk')
}}</span>
</div>
<div>
<Button
@@ -138,7 +127,7 @@
: 'pi pi-chevron-right text-xs'
"
text
class="!bg-transparent text-neutral-600 dark-theme:text-neutral-300"
class="!bg-transparent text-muted"
/>
</div>
</div>
@@ -153,7 +142,7 @@
:key="conflictResult.package_id"
class="conflict-list-item flex h-6 flex-shrink-0 items-center justify-between px-4"
>
<span class="text-xs text-neutral-600 dark-theme:text-neutral-300">
<span class="text-xs text-muted">
{{ conflictResult.package_name }}
</span>
<span class="pi pi-info-circle text-sm"></span>

2
src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.vue
View File

@@ -71,7 +71,7 @@
<Button
severity="secondary"
:label="$t('g.install')"
class="dark-theme:bg-unset dark-theme:text-unset rounded-lg bg-black/80 px-4 py-2.5 text-sm text-neutral-100"
class="rounded-lg bg-secondary-background px-4 py-2.5 text-sm text-base-foreground"
:disabled="isQueueing"
@click="handleSubmit"
/>

2
src/workbench/extensions/manager/components/manager/packCard/PackCard.vue
View File

@@ -1,6 +1,6 @@
<template>
<Card
class="shadow-elevation-3 inline-flex h-full w-full flex-col items-start justify-between overflow-hidden rounded-lg transition-all duration-200 dark-theme:bg-dark-elevation-2"
class="shadow-elevation-3 inline-flex size-full flex-col items-start justify-between overflow-hidden rounded-lg transition-all duration-200"
:class="{
'selected-card': isSelected,
'opacity-60': isDisabled