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

[backport core/1.30] Style: Token renaming and style organization (#6667)

Browse Source 
Backport of #6337 to `core/1.30`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6667-backport-core-1-30-Style-Token-renaming-and-style-organization-2aa6d73d3650811ca3acfdb00dd52fed)
by [Unito](https://www.unito.io)

Co-authored-by: Alexander Brown <drjkl@comfy.org>
This commit is contained in:
Comfy Org PR Bot
2025-11-13 09:56:21 +09:00
committed by GitHub
parent fca0ea72f7
commit 85d3bc25d6
38 changed files with 235 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,13 +30,13 @@ defineProps<{
function getBadgeColor(type: AssetBadge['type']): string {
switch (type) {
case 'type':
return 'bg-blue-100/90 dark-theme:bg-blue-100/80'
return 'bg-azure-600/90 dark-theme:bg-azure-600/80'
case 'base':
return 'bg-success-100/90 dark-theme:bg-success-100/80'
return 'bg-jade-600/90 dark-theme:bg-jade-600/80'
case 'size':
return 'bg-stone-100/90 dark-theme:bg-charcoal-700/80'
return 'bg-ash-500/90 dark-theme:bg-charcoal-700/80'
default:
return 'bg-stone-100/90 dark-theme:bg-charcoal-700/80'
return 'bg-ash-500/90 dark-theme:bg-charcoal-700/80'
}
}
</script>

6
src/platform/assets/components/AssetBrowserModal.stories.ts
View File

@@ -70,7 +70,7 @@ export const Default: Story = {
}
},
template: `
<div class="flex items-center justify-center min-h-screen bg-stone-200 dark-theme:bg-stone-200 p-4">
<div class="flex items-center justify-center min-h-screen bg-ash-800 dark-theme:bg-ash-800 p-4">
<AssetBrowserModal
:node-type="nodeType"
:input-name="inputName"
@@ -111,7 +111,7 @@ export const SingleAssetType: Story = {
return { ...args, onAssetSelect, onClose, assets: singleTypeAssets }
},
template: `
<div class="flex items-center justify-center min-h-screen bg-stone-200 dark-theme:bg-stone-200 p-4">
<div class="flex items-center justify-center min-h-screen bg-ash-800 dark-theme:bg-ash-800 p-4">
<AssetBrowserModal
:node-type="nodeType"
:input-name="inputName"
@@ -154,7 +154,7 @@ export const NoLeftPanel: Story = {
return { ...args, onAssetSelect, onClose, assets: mockAssets }
},
template: `
<div class="flex items-center justify-center min-h-screen bg-stone-200 dark-theme:bg-stone-200 p-4">
<div class="flex items-center justify-center min-h-screen bg-ash-800 dark-theme:bg-ash-800 p-4">
<AssetBrowserModal
:node-type="nodeType"
:input-name="inputName"

12
src/platform/assets/components/AssetCard.stories.ts
View File

@@ -33,7 +33,7 @@ const meta: Meta<typeof AssetCard> = {
decorators: [
() => ({
template:
'<div class="p-8 bg-gray-50 dark-theme:bg-gray-900"><story /></div>'
'<div class="p-8 bg-gray-50 dark-theme:bg-smoke-900"><story /></div>'
})
]
}
@@ -49,7 +49,7 @@ export const Interactive: Story = {
decorators: [
() => ({
template:
'<div class="p-8 bg-gray-50 dark-theme:bg-gray-900 max-w-96"><story /></div>'
'<div class="p-8 bg-gray-50 dark-theme:bg-smoke-900 max-w-96"><story /></div>'
})
],
parameters: {
@@ -70,7 +70,7 @@ export const NonInteractive: Story = {
decorators: [
() => ({
template:
'<div class="p-8 bg-gray-50 dark-theme:bg-gray-900 max-w-96"><story /></div>'
'<div class="p-8 bg-gray-50 dark-theme:bg-smoke-900 max-w-96"><story /></div>'
})
],
parameters: {
@@ -93,7 +93,7 @@ export const WithPreviewImage: Story = {
decorators: [
() => ({
template:
'<div class="p-8 bg-gray-50 dark-theme:bg-gray-900 max-w-96"><story /></div>'
'<div class="p-8 bg-gray-50 dark-theme:bg-smoke-900 max-w-96"><story /></div>'
})
],
parameters: {
@@ -115,7 +115,7 @@ export const FallbackGradient: Story = {
decorators: [
() => ({
template:
'<div class="p-8 bg-gray-50 dark-theme:bg-gray-900 max-w-96"><story /></div>'
'<div class="p-8 bg-gray-50 dark-theme:bg-smoke-900 max-w-96"><story /></div>'
})
],
parameters: {
@@ -203,7 +203,7 @@ export const EdgeCases: Story = {
return { edgeCases }
},
template: `
<div class="grid grid-cols-4 gap-6 p-8 bg-gray-50 dark-theme:bg-gray-900">
<div class="grid grid-cols-4 gap-6 p-8 bg-gray-50 dark-theme:bg-smoke-900">
<AssetCard
v-for="asset in edgeCases"
:key="asset.id"

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

@@ -16,7 +16,7 @@
/>
<div
v-else
class="flex h-full w-full items-center justify-center bg-gradient-to-br from-gray-400 via-gray-800 to-charcoal-400"
class="flex h-full w-full items-center justify-center bg-gradient-to-br from-smoke-400 via-smoke-800 to-charcoal-400"
></div>
<AssetBadgeGroup :badges="asset.badges" />
</div>
@@ -39,7 +39,7 @@
:class="
cn(
'm-0 text-sm leading-6 overflow-hidden [-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box]',
'text-stone-100',
'text-ash-500',
'dark-theme:text-slate-100'
)
"
@@ -50,11 +50,7 @@
</div>
<div
:class="
cn(
'flex gap-4 text-xs',
'text-stone-400',
'dark-theme:text-stone-300'
)
cn('flex gap-4 text-xs', 'text-stone-400', 'dark-theme:text-ash-300')
"
>
<span v-if="asset.stats.stars" class="flex items-center gap-1">
@@ -106,7 +102,7 @@ const cardClasses = computed(() => {
]
if (!props.interactive) {
return cn(...base, 'bg-gray-100 dark-theme:bg-charcoal-800')
return cn(...base, 'bg-smoke-100 dark-theme:bg-charcoal-800')
}
return cn(
@@ -114,10 +110,10 @@ const cardClasses = computed(() => {
'group',
'appearance-none bg-transparent p-0 m-0',
'font-inherit text-inherit outline-none cursor-pointer text-left',
'bg-gray-100 dark-theme:bg-charcoal-800',
'hover:bg-gray-200 dark-theme:hover:bg-charcoal-600',
'bg-smoke-100 dark-theme:bg-charcoal-800',
'hover:bg-smoke-200 dark-theme:hover:bg-charcoal-600',
'border-none',
'focus:outline-solid outline-blue-100 outline-4'
'focus:outline-solid outline-azure-600 outline-4'
)
})

10
src/platform/assets/components/AssetFilterBar.stories.ts
View File

@@ -27,10 +27,10 @@ const meta: Meta<typeof AssetFilterBar> = {
() => ({
template: `
<div class="min-h-screen bg-white dark-theme:bg-charcoal-900">
<div class="bg-gray-50 dark-theme:bg-charcoal-800 border-b border-gray-200 dark-theme:border-charcoal-600">
<div class="bg-gray-50 dark-theme:bg-charcoal-800 border-b border-smoke-200 dark-theme:border-charcoal-600">
<story />
</div>
<div class="p-6 text-sm text-gray-600 dark-theme:text-gray-400">
<div class="p-6 text-sm text-smoke-600 dark-theme:text-smoke-400">
<p>Filter bar with proper chrome styling showing contextual background and borders.</p>
</div>
</div>
@@ -222,7 +222,7 @@ export const CategorySwitchingReactivity: Story = {
'px-4 py-2 rounded border',
selectedCategory === 'all'
? 'bg-blue-500 text-white border-blue-600'
: 'bg-white dark-theme:bg-charcoal-700 border-gray-300 dark-theme:border-charcoal-600'
: 'bg-white dark-theme:bg-charcoal-700 border-smoke-300 dark-theme:border-charcoal-600'
]"
>
All (.safetensors + .pt, sd15 + sdxl)
@@ -233,7 +233,7 @@ export const CategorySwitchingReactivity: Story = {
'px-4 py-2 rounded border',
selectedCategory === 'checkpoints'
? 'bg-blue-500 text-white border-blue-600'
: 'bg-white dark-theme:bg-charcoal-700 border-gray-300 dark-theme:border-charcoal-600'
: 'bg-white dark-theme:bg-charcoal-700 border-smoke-300 dark-theme:border-charcoal-600'
]"
>
Checkpoints (.safetensors, sd15 + sdxl)
@@ -244,7 +244,7 @@ export const CategorySwitchingReactivity: Story = {
'px-4 py-2 rounded border',
selectedCategory === 'loras'
? 'bg-blue-500 text-white border-blue-600'
: 'bg-white dark-theme:bg-charcoal-700 border-gray-300 dark-theme:border-charcoal-600'
: 'bg-white dark-theme:bg-charcoal-700 border-smoke-300 dark-theme:border-charcoal-600'
]"
>
LoRAs (.pt, sd15 only)

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

@@ -23,7 +23,7 @@
:class="
cn(
'col-span-full flex flex-col items-center justify-center py-16',
'text-stone-300 dark-theme:text-stone-200'
'text-ash-300 dark-theme:text-ash-800'
)
"
>
@@ -42,7 +42,7 @@
<i
class="icon-[lucide--loader]"
:class="
cn('size-12 animate-spin', 'text-stone-300 dark-theme:text-stone-200')
cn('size-12 animate-spin', 'text-ash-300 dark-theme:text-ash-800')
"
/>
</div>

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

@@ -11,7 +11,7 @@
v-else
class="flex h-full w-full items-center justify-center bg-zinc-200 dark-theme:bg-zinc-700/50"
>
<i class="pi pi-image text-3xl text-gray-400" />
<i class="pi pi-image text-3xl text-smoke-400" />
</div>
</div>
</template>

10
src/platform/assets/composables/useAssetBrowserDialog.stories.ts
View File

@@ -91,12 +91,12 @@ const DialogDemoComponent = {
>
Change Current Model
</button>
<p class="text-sm text-gray-600 mt-1">
<p class="text-sm text-smoke-600 mt-1">
Opens with "realistic_vision_v5.safetensors" as current value
</p>
</div>
<div class="mt-8 p-4 bg-gray-100 rounded">
<div class="mt-8 p-4 bg-smoke-100 rounded">
<h4 class="font-semibold mb-2">Instructions:</h4>
<ul class="text-sm space-y-1">
<li>• Click any button to open the Asset Browser dialog</li>
@@ -154,9 +154,9 @@ export const Demo: Story = {
<DialogDemoComponent />
<!-- Code Example Section -->
<div class="p-8 border-t border-gray-200 bg-gray-50">
<div class="p-8 border-t border-smoke-200 bg-gray-50">
<h2 class="text-2xl font-bold mb-4">Code Example</h2>
<p class="text-gray-600 mb-4">
<p class="text-smoke-600 mb-4">
This is how you would use the composable in your component:
</p>
<div class="bg-white p-4 rounded-lg border shadow-sm">
@@ -182,7 +182,7 @@ export default {
}
}</code></pre>
</div>
<div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded">
<div class="mt-4 p-3 bg-blue-50 border border-azure-400 rounded">
<p class="text-sm text-blue-800">
<strong>💡 Try it:</strong> Use the interactive buttons above to see this code in action!
</p>