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

[backport core/1.30]: UI color updates & tweaks (#6679)

Browse Source 
## Summary
Backports PR #6381 (UI color updates & tweaks) to core/1.30 branch.

This includes:
- Text readability improvements
- Semantic color token consistency updates
- UI element styling refinements
- Component import path fixes (ComfyLogoTransparent → ComfyLogo)

## Merge Conflicts Resolved
- **ComfyMenuButton.vue**: Accepted cherry-picked version with import
changes
- **20 browser test snapshots**: Used backportee's copy as instructed

**Original commit**: fd236b3587

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6679-Backport-PR-6381-to-core-1-30-UI-color-updates-tweaks-2aa6d73d3650815689defd191e3dd86e)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Christian Byrne
2025-11-14 10:40:10 -08:00
committed by GitHub
parent 3be12e18e8
commit bf24b6e729
185 changed files with 531 additions and 544 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/platform/assets/components/AssetBadgeGroup.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="absolute right-2 bottom-2 flex flex-wrap justify-end gap-1">
<div class="absolute bottom-2 right-2 flex flex-wrap justify-end gap-1">
<span
v-for="badge in badges"
:key="badge.label"

2
src/platform/assets/components/AssetBrowserModal.vue
View File

@@ -1,7 +1,7 @@
<template>
<BaseModalLayout
data-component-id="AssetBrowserModal"
class="size-full max-h-full max-w-full min-w-0"
class="size-full max-h-full min-w-0 max-w-full"
:content-title="displayTitle"
@close="handleClose"
>

4
src/platform/assets/components/AssetCard.vue
View File

@@ -12,11 +12,11 @@
<img
v-if="shouldShowImage"
:src="asset.preview_url"
class="h-full w-full object-contain"
class="size-full object-contain"
/>
<div
v-else
class="flex h-full w-full items-center justify-center bg-gradient-to-br from-smoke-400 via-smoke-800 to-charcoal-400"
class="from-smoke-400 via-smoke-800 to-charcoal-400 flex size-full items-center justify-center bg-gradient-to-br"
></div>
<AssetBadgeGroup :badges="asset.badges" />
</div>

2
src/platform/assets/components/AssetGrid.vue
View File

@@ -27,7 +27,7 @@
)
"
>
<i class="mb-4 icon-[lucide--search] size-10" />
<i class="icon-[lucide--search] mb-4 size-10" />
<h3 class="mb-2 text-lg font-medium">
{{ $t('assetBrowser.noAssetsFound') }}
</h3>

2
src/platform/assets/components/Media3DBottom.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col items-center gap-1">
<h3
class="m-0 line-clamp-1 text-sm font-bold text-zinc-900 dark-theme:text-white"
class="dark-theme:text-white m-0 line-clamp-1 text-sm font-bold text-zinc-900"
:title="asset.name"
>
{{ fileName }}

8
src/platform/assets/components/Media3DTop.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="relative h-full w-full overflow-hidden rounded">
<div class="relative size-full overflow-hidden rounded">
<div
class="flex h-full w-full flex-col items-center justify-center gap-2 bg-zinc-200 dark-theme:bg-zinc-700/50"
class="dark-theme:bg-zinc-700/50 flex size-full flex-col items-center justify-center gap-2 bg-zinc-200"
>
<i
class="icon-[lucide--box] text-3xl text-zinc-600 dark-theme:text-zinc-200"
class="icon-[lucide--box] dark-theme:text-zinc-200 text-3xl text-zinc-600"
/>
<span class="text-zinc-600 dark-theme:text-zinc-200">{{
<span class="dark-theme:text-zinc-200 text-zinc-600">{{
$t('3D Model')
}}</span>
</div>

2
src/platform/assets/components/MediaAssetButtonDivider.vue
View File

@@ -1,4 +1,4 @@
<template>
<div class="h-[1px] bg-neutral-200 dark-theme:bg-neutral-700"></div>
<div class="dark-theme:bg-neutral-700 h-px bg-neutral-200"></div>
</template>
<script setup lang="ts"></script>

6
src/platform/assets/components/MediaAssetCard.vue
View File

@@ -23,7 +23,7 @@
<!-- Loading State -->
<template v-if="loading">
<div
class="h-full w-full animate-pulse rounded-lg bg-zinc-200 dark-theme:bg-zinc-700"
class="dark-theme:bg-zinc-700 size-full animate-pulse rounded-lg bg-zinc-200"
/>
</template>
@@ -98,10 +98,10 @@
<template v-if="loading">
<div class="flex flex-col items-center justify-between gap-1">
<div
class="h-4 w-2/3 animate-pulse rounded bg-zinc-200 dark-theme:bg-zinc-700"
class="dark-theme:bg-zinc-700 h-4 w-2/3 animate-pulse rounded bg-zinc-200"
/>
<div
class="h-3 w-1/2 animate-pulse rounded bg-zinc-200 dark-theme:bg-zinc-700"
class="dark-theme:bg-zinc-700 h-3 w-1/2 animate-pulse rounded bg-zinc-200"
/>
</div>
</template>

2
src/platform/assets/components/MediaAudioBottom.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col items-center gap-1">
<h3
class="m-0 line-clamp-1 text-sm font-bold text-zinc-900 dark-theme:text-white"
class="dark-theme:text-white m-0 line-clamp-1 text-sm font-bold text-zinc-900"
:title="asset.name"
>
{{ fileName }}

8
src/platform/assets/components/MediaAudioTop.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="relative h-full w-full overflow-hidden rounded">
<div class="relative size-full overflow-hidden rounded">
<div
class="flex h-full w-full flex-col items-center justify-center gap-2 bg-zinc-200 dark-theme:bg-zinc-700/50"
class="dark-theme:bg-zinc-700/50 flex size-full flex-col items-center justify-center gap-2 bg-zinc-200"
>
<i
class="icon-[lucide--music] text-3xl text-zinc-600 dark-theme:text-zinc-200"
class="icon-[lucide--music] dark-theme:text-zinc-200 text-3xl text-zinc-600"
/>
<span class="text-zinc-600 dark-theme:text-zinc-200">{{
<span class="dark-theme:text-zinc-200 text-zinc-600">{{
$t('Audio')
}}</span>
</div>

2
src/platform/assets/components/MediaImageBottom.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col items-center gap-1">
<h3
class="m-0 line-clamp-1 text-sm font-bold text-zinc-900 dark-theme:text-white"
class="dark-theme:text-white m-0 line-clamp-1 text-sm font-bold text-zinc-900"
:title="asset.name"
>
{{ fileName }}

6
src/platform/assets/components/MediaImageTop.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="relative h-full w-full overflow-hidden rounded">
<div class="relative size-full overflow-hidden rounded">
<LazyImage
v-if="asset.src"
:src="asset.src"
@@ -9,9 +9,9 @@
/>
<div
v-else
class="flex h-full w-full items-center justify-center bg-zinc-200 dark-theme:bg-zinc-700/50"
class="dark-theme:bg-zinc-700/50 flex size-full items-center justify-center bg-zinc-200"
>
<i class="pi pi-image text-3xl text-smoke-400" />
<i class="pi pi-image text-smoke-400 text-3xl" />
</div>
</div>
</template>

21
src/platform/assets/components/MediaTitle.vue
View File

@@ -1,21 +0,0 @@
<template>
<h3
class="m-0 line-clamp-1 text-sm font-bold text-base-foreground"
:title="fullName"
>
{{ displayName }}
</h3>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { truncateFilename } from '@/utils/formatUtil'
const props = defineProps<{
fileName: string
}>()
const fullName = computed(() => props.fileName)
const displayName = computed(() => truncateFilename(props.fileName))
</script>

2
src/platform/assets/components/MediaVideoBottom.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col items-center gap-1">
<h3
class="m-0 line-clamp-1 text-sm font-bold text-zinc-900 dark-theme:text-white"
class="dark-theme:text-white m-0 line-clamp-1 text-sm font-bold text-zinc-900"
:title="asset.name"
>
{{ fileName }}

4
src/platform/assets/components/MediaVideoTop.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="relative h-full w-full overflow-hidden rounded bg-black"
class="relative size-full overflow-hidden rounded bg-black"
@mouseenter="isHovered = true"
@mouseleave="isHovered = false"
>
@@ -9,7 +9,7 @@
:controls="shouldShowControls"
preload="none"
:poster="asset.preview_url"
class="relative h-full w-full object-contain"
class="relative size-full object-contain"
@click.stop
@play="onVideoPlay"
@pause="onVideoPause"

16
src/platform/cloud/subscription/components/SubscriptionPanel.vue
View File

@@ -9,7 +9,7 @@
</div>
<div class="grow overflow-auto">
<div class="rounded-lg border border-charcoal-400 p-4">
<div class="border-charcoal-400 rounded-lg border p-4">
<div>
<div class="flex items-center justify-between">
<div>
@@ -19,7 +19,7 @@
}}</span>
<span>{{ $t('subscription.perMonth') }}</span>
</div>
<div v-if="isActiveSubscription" class="text-xs text-muted">
<div v-if="isActiveSubscription" class="text-muted text-xs">
{{
$t('subscription.renewsDate', {
date: formattedRenewalDate
@@ -52,7 +52,7 @@
{{ $t('subscription.apiNodesBalance') }}
</div>
<div class="flex items-center">
<div class="text-xs text-muted">
<div class="text-muted text-xs">
{{ $t('subscription.apiNodesDescription') }}
</div>
<Button
@@ -61,17 +61,17 @@
rounded
size="small"
severity="secondary"
class="h-5 w-5"
class="size-5"
/>
</div>
</div>
<div
class="flex flex-col gap-3 rounded-lg border p-4 dark-theme:border-0 dark-theme:bg-charcoal-600"
class="dark-theme:border-0 dark-theme:bg-charcoal-600 flex flex-col gap-3 rounded-lg border p-4"
>
<div class="flex items-center justify-between">
<div>
<div class="text-xs text-muted">
<div class="text-muted text-xs">
{{ $t('subscription.totalCredits') }}
</div>
<div class="text-2xl font-bold">${{ totalCredits }}</div>
@@ -130,7 +130,7 @@
:label="$t('subscription.viewUsageHistory')"
text
severity="secondary"
class="p-0 text-xs text-muted"
class="text-muted p-0 text-xs"
@click="handleViewUsageHistory"
/>
<Button
@@ -156,7 +156,7 @@
</div>
<div
class="flex items-center justify-between border-t border-charcoal-400 pt-3"
class="border-charcoal-400 flex items-center justify-between border-t pt-3"
>
<div class="flex gap-2">
<Button

4
src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
View File

@@ -22,7 +22,7 @@
<div>
<div class="flex flex-col gap-4">
<div class="inline-flex items-center gap-2">
<div class="text-sm text-muted">
<div class="text-muted text-sm">
{{ $t('subscription.required.title') }}
</div>
<CloudBadge
@@ -38,7 +38,7 @@
</div>
</div>
<SubscriptionBenefits class="mt-6 text-muted" />
<SubscriptionBenefits class="text-muted mt-6" />
</div>
<div class="flex flex-col">

4
src/platform/settings/components/SettingDialogContent.vue
View File

@@ -29,8 +29,8 @@
</ScrollPanel>
<Divider layout="vertical" class="mx-1 hidden md:flex 2xl:mx-4" />
<Divider layout="horizontal" class="flex md:hidden" />
<Tabs :value="tabValue" :lazy="true" class="settings-content h-full w-full">
<TabPanels class="settings-tab-panels h-full w-full pr-0">
<Tabs :value="tabValue" :lazy="true" class="settings-content size-full">
<TabPanels class="settings-tab-panels size-full pr-0">
<PanelTemplate value="Search Results">
<SettingsPanel :setting-groups="searchResults" />
</PanelTemplate>

2
src/platform/settings/constants/coreSettings.ts
View File

@@ -121,7 +121,7 @@ export const CORE_SETTINGS: SettingParams[] = [
name: 'Sidebar style',
type: 'combo',
options: ['floating', 'connected'],
defaultValue: 'floating'
defaultValue: 'connected'
},
{
id: 'Comfy.TextareaWidget.FontSize',