Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-04 23:20:07 +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

172
packages/design-system/src/css/style.css
View File

@@ -9,29 +9,18 @@
@config '../../tailwind.config.ts';
@media (prefers-color-scheme: dark) {
:root {
--fg-color: #fff;
--bg-color: #202020;
--content-bg: #4e4e4e;
--content-fg: #fff;
--content-hover-bg: #222;
--content-hover-fg: #fff;
}
}
@theme {
--text-xxs: 0.625rem;
--text-xxs--line-height: calc(1 / 0.625);
/* Spacing */
--spacing-xs: 8px;
--text-xxxs: 0.5625rem;
--text-xxxs--line-height: calc(1 / 0.5625);
/* Font Families */
--font-inter: 'Inter', sans-serif;
/* Palette Colors */
--color-charcoal-100: #171718;
--color-charcoal-100: #55565e;
--color-charcoal-200: #494a50;
--color-charcoal-300: #3c3d42;
--color-charcoal-400: #313235;
@@ -42,43 +31,45 @@
--color-neutral-550: #636363;
--color-stone-100: #828282;
--color-stone-200: #444444;
--color-stone-300: #bbbbbb;
--color-ash-300: #bbbbbb;
--color-ash-500: #828282;
--color-ash-800: #444444;
--color-ivory-100: #fdfbfa;
--color-ivory-200: #faf9f5;
--color-ivory-300: #f0eee6;
--color-gray-100: #f3f3f3;
--color-gray-200: #e9e9e9;
--color-gray-300: #e1e1e1;
--color-gray-400: #d9d9d9;
--color-gray-500: #c5c5c5;
--color-gray-600: #b4b4b4;
--color-gray-700: #a0a0a0;
--color-gray-800: #8a8a8a;
--color-smoke-100: #f3f3f3;
--color-smoke-200: #e9e9e9;
--color-smoke-300: #e1e1e1;
--color-smoke-400: #d9d9d9;
--color-smoke-500: #c5c5c5;
--color-smoke-600: #b4b4b4;
--color-smoke-700: #a0a0a0;
--color-smoke-800: #8a8a8a;
--color-sand-100: #e1ded5;
--color-sand-200: #d6cfc2;
--color-sand-300: #888682;
--color-pure-black: #000000;
--color-pure-white: #ffffff;
--color-slate-100: #9c9eab;
--color-slate-200: #9fa2bd;
--color-slate-300: #5b5e7d;
--color-brand-yellow: #f0ff41;
--color-brand-blue: #172dd7;
--color-electric-400: #f0ff41;
--color-sapphire-700: #172dd7;
--color-brand-yellow: var(--color-electric-400);
--color-brand-blue: var(--color-sapphire-700);
--color-azure-400: #31b9f4;
--color-azure-600: #0b8ce9;
--color-jade-400: #47e469;
--color-jade-600: #00cd72;
--color-gold-400: #fcbf64;
--color-gold-600: #fd9903;
--color-blue-100: #0b8ce9;
--color-blue-200: #31b9f4;
--color-success-100: #00cd72;
--color-success-200: #47e469;
--color-warning-100: #fd9903;
--color-warning-200: #fcbf64;
--color-danger-100: #c02323;
--color-danger-200: #d62952;
@@ -90,26 +81,24 @@
--color-error: #962a2a;
--color-comfy-menu-secondary: var(--comfy-menu-secondary-bg);
--text-xxxs: 0.5625rem;
--text-xxxs--line-height: calc(1 / 0.5625);
--color-blue-selection: rgb(from var(--color-blue-100) r g b / 0.3);
--color-node-hover-100: rgb(from var(--color-charcoal-100) r g b/ 0.15);
--color-node-hover-200: rgb(from var(--color-charcoal-100) r g b/ 0.1);
--color-modal-tag: rgb(from var(--color-gray-400) r g b/ 0.4);
--color-blue-selection: rgb(from var(--color-azure-600) r g b / 0.3);
--color-node-hover-100: rgb(from var(--color-charcoal-800) r g b/ 0.15);
--color-node-hover-200: rgb(from var(--color-charcoal-800) r g b/ 0.1);
--color-modal-tag: rgb(from var(--color-smoke-400) r g b/ 0.4);
--color-alpha-charcoal-600-30: color-mix(
in srgb,
var(--color-charcoal-600) 30%,
transparent
);
--color-alpha-stone-100-20: color-mix(
--color-alpha-ash-500-20: color-mix(
in srgb,
var(--color-stone-100) 20%,
var(--color-ash-500) 20%,
transparent
);
--color-alpha-gray-500-50: color-mix(
--color-alpha-smoke-500-50: color-mix(
in srgb,
var(--color-gray-500) 50%,
var(--color-smoke-500) 50%,
transparent
);
@@ -145,8 +134,8 @@
--content-hover-bg: #adadad;
--content-hover-fg: #000;
--button-surface: var(--color-pure-white);
--button-surface-contrast: var(--color-pure-black);
--button-surface: var(--color-white);
--button-surface-contrast: var(--color-black);
/* Code styling colors for help menu*/
--code-text-color: rgb(0 122 255 / 1);
@@ -157,31 +146,36 @@
--accent-primary: var(--color-charcoal-700);
--backdrop: var(--color-white);
--button-hover-surface: var(--color-gray-200);
--button-active-surface: var(--color-gray-400);
--button-icon: var(--color-gray-600);
--button-hover-surface: var(--color-smoke-200);
--button-active-surface: var(--color-smoke-400);
--button-icon: var(--color-smoke-600);
--dialog-surface: var(--color-neutral-200);
--interface-menu-component-surface-hovered: var(--color-gray-200);
--interface-menu-component-surface-selected: var(--color-gray-400);
--interface-menu-keybind-surface-default: var(--color-gray-500);
--interface-panel-surface: var(--color-pure-white);
--interface-stroke: var(--color-gray-300);
--nav-background: var(--color-pure-white);
--node-border: var(--color-gray-300);
--node-component-border: var(--color-gray-400);
--node-component-disabled: var(--color-alpha-stone-100-20);
--interface-menu-component-surface-hovered: var(--color-smoke-200);
--interface-menu-component-surface-selected: var(--color-smoke-400);
--interface-menu-keybind-surface-default: var(--color-smoke-500);
--interface-panel-surface: var(--color-white);
--interface-stroke: var(--color-smoke-300);
--nav-background: var(--color-white);
--node-border: var(--color-smoke-300);
--node-component-border: var(--color-smoke-400);
--node-component-disabled: var(--color-alpha-ash-500-20);
--node-component-executing: var(--color-blue-500);
--node-component-header: var(--fg-color);
--node-component-header-icon: var(--color-stone-200);
--node-component-header-icon: var(--color-ash-800);
--node-component-header-surface: var(--color-white);
--node-component-outline: var(--color-black);
--node-component-ring: rgb(from var(--color-gray-500) r g b / 50%);
--node-component-ring: rgb(from var(--color-smoke-500) r g b / 50%);
--node-component-slot-dot-outline-opacity-mult: 1;
--node-component-slot-dot-outline-opacity: 5%;
--node-component-slot-dot-outline: var(--color-black);
--node-component-slot-text: var(--color-stone-200);
--node-component-surface-highlight: var(--color-stone-100);
--node-component-surface-hovered: var(--color-gray-200);
--node-component-slot-text: var(--color-ash-800);
--node-component-surface-highlight: var(--color-ash-500);
--node-component-surface-hovered: var(--color-smoke-200);
--node-component-surface-selected: var(--color-charcoal-200);
--node-component-surface: var(--color-white);
--node-component-tooltip: var(--color-charcoal-700);
@@ -193,40 +187,53 @@
);
--node-component-widget-skeleton-surface: var(--color-zinc-300);
--node-divider: var(--color-sand-100);
--node-icon-disabled: var(--color-alpha-gray-500-50);
--node-stroke: var(--color-gray-400);
--node-icon-disabled: var(--color-alpha-smoke-500-50);
--node-stroke: var(--color-smoke-400);
--node-stroke-selected: var(--color-accent-primary);
--node-stroke-error: var(--color-error);
--node-stroke-executing: var(--color-blue-100);
--text-secondary: var(--color-stone-100);
--node-stroke-executing: var(--color-azure-600);
--text-secondary: var(--color-ash-500);
--text-primary: var(--color-charcoal-700);
--input-surface: rgb(0 0 0 / 0.15);
}
.dark-theme {
--accent-primary: var(--color-pure-white);
--fg-color: #fff;
--bg-color: #202020;
--content-bg: #4e4e4e;
--content-fg: #fff;
--content-hover-bg: #222;
--content-hover-fg: #fff;
--accent-primary: var(--color-white);
--backdrop: var(--color-neutral-900);
--button-surface: var(--color-charcoal-600);
--button-surface-contrast: var(--color-pure-white);
--button-surface-contrast: var(--color-white);
--button-hover-surface: var(--color-charcoal-600);
--button-active-surface: var(--color-charcoal-600);
--button-icon: var(--color-gray-800);
--button-icon: var(--color-smoke-800);
--dialog-surface: var(--color-neutral-700);
--interface-menu-component-surface-hovered: var(--color-charcoal-400);
--interface-menu-component-surface-selected: var(--color-charcoal-300);
--interface-menu-keybind-surface-default: var(--color-charcoal-200);
--interface-panel-surface: var(--color-charcoal-100);
--interface-panel-surface: var(--color-charcoal-800);
--interface-stroke: var(--color-charcoal-400);
--nav-background: var(--color-charcoal-100);
--nav-background: var(--color-charcoal-800);
--node-border: var(--color-charcoal-500);
--node-component-border: var(--color-stone-200);
--node-component-border: var(--color-ash-800);
--node-component-border-error: var(--color-danger-100);
--node-component-border-executing: var(--color-blue-500);
--node-component-border-selected: var(--color-charcoal-200);
--node-component-header-icon: var(--color-slate-300);
--node-component-header-surface: var(--color-charcoal-800);
--node-component-outline: var(--color-white);
--node-component-ring: rgb(var(--color-gray-500) / 20%);
--node-component-ring: rgb(var(--color-smoke-500) / 20%);
--node-component-slot-dot-outline-opacity: 10%;
--node-component-slot-dot-outline: var(--color-white);
--node-component-slot-text: var(--color-slate-200);
@@ -240,13 +247,15 @@
--node-component-widget-skeleton-surface: var(--color-zinc-800);
--node-component-disabled: var(--color-alpha-charcoal-600-30);
--node-divider: var(--color-charcoal-500);
--node-icon-disabled: var(--color-alpha-stone-100-20);
--node-stroke: var(--color-stone-200);
--node-stroke-selected: var(--color-pure-white);
--node-icon-disabled: var(--color-alpha-ash-500-20);
--node-stroke: var(--color-ash-800);
--node-stroke-selected: var(--color-white);
--node-stroke-error: var(--color-error);
--node-stroke-executing: var(--color-blue-100);
--node-stroke-executing: var(--color-azure-600);
--text-secondary: var(--color-slate-100);
--text-primary: var(--color-pure-white);
--text-primary: var(--color-white);
--input-surface: rgb(130 130 130 / 0.1);
}
@@ -330,7 +339,6 @@
}
}
/* ===================== Scrollbar Utilities (Tailwind) =====================
Usage: Add `scrollbar-custom` class to scrollable containers.
The scrollbar styling adapts to light/dark theme automatically.

2
packages/tailwind-utils/README.md
View File

@@ -14,7 +14,7 @@ import { cn } from '@comfyorg/tailwind-utils'
// Use with conditional classes (ternary)
<button
:class="cn('px-4 py-2', isActive ? 'bg-blue-500' : 'bg-gray-500')"
:class="cn('px-4 py-2', isActive ? 'bg-blue-500' : 'bg-smoke-500')"
/>
```

4
src/components/common/FormImageUpload.vue
View File

@@ -3,14 +3,14 @@
<div class="flex items-center gap-2">
<div
class="preview-box flex h-16 w-16 items-center justify-center rounded border p-2"
:class="{ 'bg-gray-100 dark-theme:bg-gray-800': !modelValue }"
:class="{ 'bg-smoke-100 dark-theme:bg-smoke-800': !modelValue }"
>
<img
v-if="modelValue"
:src="modelValue"
class="max-h-full max-w-full object-contain"
/>
<i v-else class="pi pi-image text-xl text-gray-400" />
<i v-else class="pi pi-image text-xl text-smoke-400" />
</div>
<div class="flex flex-col gap-2">

2
src/components/dialog/content/setting/UsageLogsTable.vue
View File

@@ -50,7 +50,7 @@
<div class="font-semibold">
{{ data.params?.api_name || 'API' }}
</div>
<div class="text-sm text-gray-400">
<div class="text-sm text-smoke-400">
{{ $t('credits.model') }}: {{ data.params?.model || '-' }}
</div>
</div>

2
src/components/dialog/content/setting/UserPanel.vue
View File

@@ -78,7 +78,7 @@
<!-- Login Section -->
<div v-else class="flex flex-col gap-4">
<p class="text-gray-600">
<p class="text-smoke-600">
{{ $t('auth.login.title') }}
</p>

2
src/components/graph/modals/ZoomControlsModal.vue
View File

@@ -148,6 +148,6 @@ watch(
</script>
<style>
.zoomInputContainer:focus-within {
border: 1px solid var(--color-pure-white);
border: 1px solid var(--color-white);
}
</style>

2
src/components/graph/selectionToolbox/MenuOptionItem.vue
View File

@@ -1,7 +1,7 @@
<template>
<div
v-if="option.type === 'divider'"
class="my-1 h-px bg-gray-200 dark-theme:bg-zinc-700"
class="my-1 h-px bg-smoke-200 dark-theme:bg-zinc-700"
/>
<div
v-else

6
src/components/graph/selectionToolbox/SubmenuPopover.vue
View File

@@ -20,15 +20,15 @@
:key="subOption.label"
:class="
isColorSubmenu
? 'w-7 h-7 flex items-center justify-center hover:bg-gray-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
: 'flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-gray-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
? 'w-7 h-7 flex items-center justify-center hover:bg-smoke-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
: 'flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-smoke-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
"
:title="subOption.label"
@click="handleSubmenuClick(subOption)"
>
<div
v-if="subOption.color"
class="h-5 w-5 rounded-full border border-gray-300 dark-theme:border-zinc-600"
class="h-5 w-5 rounded-full border border-smoke-300 dark-theme:border-zinc-600"
:style="{ backgroundColor: subOption.color }"
/>
<template v-else-if="!subOption.color">

4
src/components/graph/selectionToolbox/VerticalDivider.vue
View File

@@ -1,3 +1,5 @@
<template>
<div class="h-6 w-px self-center bg-gray-300/10 dark-theme:bg-gray-600/10" />
<div
class="h-6 w-px self-center bg-smoke-300/10 dark-theme:bg-smoke-600/10"
/>
</template>

4
src/components/graph/widgets/ChatHistoryWidget.vue
View File

@@ -13,7 +13,7 @@
>
<div class="mb-1 flex justify-end">
<div
class="max-w-[80%] rounded-xl bg-gray-300 px-4 py-1 text-right dark-theme:bg-gray-800"
class="max-w-[80%] rounded-xl bg-smoke-300 px-4 py-1 text-right dark-theme:bg-smoke-800"
>
<div class="text-[12px] break-words">{{ item.prompt }}</div>
</div>
@@ -26,7 +26,7 @@
"
text
rounded
class="h-4! w-4! p-1! text-gray-400 transition hover:text-gray-600 hover:dark-theme:text-gray-200"
class="h-4! w-4! p-1! text-smoke-400 transition hover:text-smoke-600 hover:dark-theme:text-smoke-200"
pt:icon:class="text-xs!"
:icon="editIndex === i ? 'pi pi-times' : 'pi pi-pencil'"
:aria-label="

2
src/components/graph/widgets/chatHistory/CopyButton.vue
View File

@@ -5,7 +5,7 @@
"
text
rounded
class="h-4! w-6! p-1! text-gray-400 transition hover:text-gray-600 hover:dark-theme:text-gray-200"
class="h-4! w-6! p-1! text-smoke-400 transition hover:text-smoke-600 hover:dark-theme:text-smoke-200"
pt:icon:class="text-xs!"
:icon="copied ? 'pi pi-check' : 'pi pi-copy'"
:aria-label="

42
src/components/input/MultiSelect.accessibility.stories.ts
View File

@@ -119,12 +119,12 @@ export const KeyboardNavigationDemo: Story = {
},
template: `
<div class="space-y-4 p-4">
<div class="bg-blue-50 dark-theme:bg-blue-900/20 border border-blue-200 dark-theme:border-blue-700 rounded-lg p-4">
<div class="bg-blue-50 dark-theme:bg-blue-900/20 border border-azure-400 dark-theme:border-blue-700 rounded-lg p-4">
<h3 class="text-lg font-semibold mb-2">🎯 Keyboard Navigation Test</h3>
<p class="text-sm text-gray-600 dark-theme:text-gray-300 mb-4">
<p class="text-sm text-smoke-600 dark-theme:text-smoke-300 mb-4">
Use your keyboard to navigate this MultiSelect:
</p>
<ol class="text-sm text-gray-600 list-decimal list-inside space-y-1">
<ol class="text-sm text-smoke-600 list-decimal list-inside space-y-1">
<li><strong>Tab</strong> to focus the dropdown</li>
<li><strong>Enter/Space</strong> to open dropdown</li>
<li><strong>Arrow Up/Down</strong> to navigate options</li>
@@ -134,11 +134,11 @@ export const KeyboardNavigationDemo: Story = {
</div>
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700">
<label class="block text-sm font-medium text-smoke-700">
Select Frameworks (Keyboard Navigation Test)
</label>
<MultiSelect v-bind="args" class="w-80" />
<p class="text-xs text-gray-500">
<p class="text-xs text-smoke-500">
Selected: {{ selectedFrameworks.map(f => f.name).join(', ') || 'None' }}
</p>
</div>
@@ -186,10 +186,10 @@ export const ScreenReaderFriendly: Story = {
<div class="space-y-6 p-4">
<div class="bg-green-50 dark-theme:bg-green-900/20 border border-green-200 dark-theme:border-green-700 rounded-lg p-4">
<h3 class="text-lg font-semibold mb-2">♿ Screen Reader Test</h3>
<p class="text-sm text-gray-600 mb-2">
<p class="text-sm text-smoke-600 mb-2">
These dropdowns have proper ARIA attributes and labels for screen readers:
</p>
<ul class="text-sm text-gray-600 list-disc list-inside space-y-1">
<ul class="text-sm text-smoke-600 list-disc list-inside space-y-1">
<li><code>role="combobox"</code> identifies as dropdown</li>
<li><code>aria-haspopup="listbox"</code> indicates popup type</li>
<li><code>aria-expanded</code> shows open/closed state</li>
@@ -200,7 +200,7 @@ export const ScreenReaderFriendly: Story = {
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700">
<label class="block text-sm font-medium text-smoke-700">
Color Preferences
</label>
<MultiSelect
@@ -211,13 +211,13 @@ export const ScreenReaderFriendly: Story = {
:show-clear-button="true"
class="w-full"
/>
<p class="text-xs text-gray-500" aria-live="polite">
<p class="text-xs text-smoke-500" aria-live="polite">
{{ selectedColors.length }} color(s) selected
</p>
</div>
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700">
<label class="block text-sm font-medium text-smoke-700">
Size Preferences
</label>
<MultiSelect
@@ -228,7 +228,7 @@ export const ScreenReaderFriendly: Story = {
:show-search-box="true"
class="w-full"
/>
<p class="text-xs text-gray-500" aria-live="polite">
<p class="text-xs text-smoke-500" aria-live="polite">
{{ selectedSizes.length }} size(s) selected
</p>
</div>
@@ -259,25 +259,25 @@ export const FocusManagement: Story = {
<div class="space-y-4 p-4">
<div class="bg-purple-50 dark-theme:bg-purple-900/20 border border-purple-200 dark-theme:border-purple-700 rounded-lg p-4">
<h3 class="text-lg font-semibold mb-2">🎯 Focus Management Test</h3>
<p class="text-sm text-gray-600 dark-theme:text-gray-300 mb-4">
<p class="text-sm text-smoke-600 dark-theme:text-smoke-300 mb-4">
Test focus behavior with multiple form elements:
</p>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
<label class="block text-sm font-medium text-smoke-700 mb-1">
Before MultiSelect
</label>
<input
type="text"
placeholder="Previous field"
class="block w-64 px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
class="block w-64 px-3 py-2 border border-smoke-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
<label class="block text-sm font-medium text-smoke-700 mb-1">
MultiSelect (Test Focus Ring)
</label>
<MultiSelect
@@ -290,13 +290,13 @@ export const FocusManagement: Story = {
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">
<label class="block text-sm font-medium text-smoke-700 mb-1">
After MultiSelect
</label>
<input
type="text"
placeholder="Next field"
class="block w-64 px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
class="block w-64 px-3 py-2 border border-smoke-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/>
</div>
@@ -307,7 +307,7 @@ export const FocusManagement: Story = {
</button>
</div>
<div class="text-sm text-gray-600 mt-4">
<div class="text-sm text-smoke-600 mt-4">
<strong>Test:</strong> Tab through all elements and verify focus rings are visible and logical.
</div>
</div>
@@ -319,7 +319,7 @@ export const AccessibilityChecklist: Story = {
render: () => ({
template: `
<div class="max-w-4xl mx-auto p-6 space-y-6">
<div class="bg-gray-50 dark-theme:bg-zinc-800 border border-gray-200 dark-theme:border-zinc-700 rounded-lg p-6">
<div class="bg-gray-50 dark-theme:bg-zinc-800 border border-smoke-200 dark-theme:border-zinc-700 rounded-lg p-6">
<h2 class="text-2xl font-bold mb-4">♿ MultiSelect Accessibility Checklist</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -366,9 +366,9 @@ export const AccessibilityChecklist: Story = {
</div>
</div>
<div class="mt-6 p-4 bg-blue-50 dark-theme:bg-blue-900/20 border border-blue-200 dark-theme:border-blue-700 rounded-lg">
<div class="mt-6 p-4 bg-blue-50 dark-theme:bg-blue-900/20 border border-azure-400 dark-theme:border-blue-700 rounded-lg">
<h4 class="font-semibold mb-2">🎯 Quick Test</h4>
<p class="text-sm text-gray-700 dark-theme:text-gray-300">
<p class="text-sm text-smoke-700 dark-theme:text-smoke-300">
Close your eyes, use only the keyboard, and try to select multiple options from any dropdown above.
If you can successfully navigate and make selections, the accessibility implementation is working!
</p>

2
src/components/input/MultiSelect.vue
View File

@@ -62,7 +62,7 @@
<!-- Trigger value (keep text scale identical) -->
<template #value>
<span class="text-sm text-zinc-700 dark-theme:text-gray-200">
<span class="text-sm text-zinc-700 dark-theme:text-smoke-200">
{{ label }}
</span>
<span

58
src/components/input/SingleSelect.accessibility.stories.ts
View File

@@ -101,12 +101,12 @@ export const KeyboardNavigationDemo: Story = {
},
template: `
<div class="space-y-6 p-4">
<div class="bg-blue-50 dark-theme:bg-blue-900/20 border border-blue-200 dark-theme:border-blue-700 rounded-lg p-4">
<div class="bg-blue-50 dark-theme:bg-blue-900/20 border border-azure-400 dark-theme:border-blue-700 rounded-lg p-4">
<h3 class="text-lg font-semibold mb-2">🎯 Keyboard Navigation Test</h3>
<p class="text-sm text-gray-600 dark-theme:text-gray-300 mb-4">
<p class="text-sm text-smoke-600 dark-theme:text-smoke-300 mb-4">
Use your keyboard to navigate these SingleSelect dropdowns:
</p>
<ol class="text-sm text-gray-600 dark-theme:text-gray-300 list-decimal list-inside space-y-1">
<ol class="text-sm text-smoke-600 dark-theme:text-smoke-300 list-decimal list-inside space-y-1">
<li><strong>Tab</strong> to focus the dropdown</li>
<li><strong>Enter/Space</strong> to open dropdown</li>
<li><strong>Arrow Up/Down</strong> to navigate options</li>
@@ -117,7 +117,7 @@ export const KeyboardNavigationDemo: Story = {
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200">
<label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200">
Sort Order
</label>
<SingleSelect
@@ -126,13 +126,13 @@ export const KeyboardNavigationDemo: Story = {
label="Choose sort order"
class="w-full"
/>
<p class="text-xs text-gray-500">
<p class="text-xs text-smoke-500">
Selected: {{ selectedSort ? sortOptions.find(o => o.value === selectedSort)?.name : 'None' }}
</p>
</div>
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200">
<label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200">
Task Priority (With Icon)
</label>
<SingleSelect
@@ -147,7 +147,7 @@ export const KeyboardNavigationDemo: Story = {
</svg>
</template>
</SingleSelect>
<p class="text-xs text-gray-500">
<p class="text-xs text-smoke-500">
Selected: {{ selectedPriority ? priorityOptions.find(o => o.value === selectedPriority)?.name : 'None' }}
</p>
</div>
@@ -191,10 +191,10 @@ export const ScreenReaderFriendly: Story = {
<div class="space-y-6 p-4">
<div class="bg-green-50 dark-theme:bg-green-900/20 border border-green-200 dark-theme:border-green-700 rounded-lg p-4">
<h3 class="text-lg font-semibold mb-2">♿ Screen Reader Test</h3>
<p class="text-sm text-gray-600 dark-theme:text-gray-300 mb-2">
<p class="text-sm text-smoke-600 dark-theme:text-smoke-300 mb-2">
These dropdowns have proper ARIA attributes and labels for screen readers:
</p>
<ul class="text-sm text-gray-600 dark-theme:text-gray-300 list-disc list-inside space-y-1">
<ul class="text-sm text-smoke-600 dark-theme:text-smoke-300 list-disc list-inside space-y-1">
<li><code>role="combobox"</code> identifies as dropdown</li>
<li><code>aria-haspopup="listbox"</code> indicates popup type</li>
<li><code>aria-expanded</code> shows open/closed state</li>
@@ -205,7 +205,7 @@ export const ScreenReaderFriendly: Story = {
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200" id="language-label">
<label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200" id="language-label">
Preferred Language
</label>
<SingleSelect
@@ -215,13 +215,13 @@ export const ScreenReaderFriendly: Story = {
class="w-full"
aria-labelledby="language-label"
/>
<p class="text-xs text-gray-500" aria-live="polite">
<p class="text-xs text-smoke-500" aria-live="polite">
Current: {{ selectedLanguage ? languageOptions.find(o => o.value === selectedLanguage)?.name : 'None selected' }}
</p>
</div>
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200" id="theme-label">
<label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200" id="theme-label">
Interface Theme
</label>
<SingleSelect
@@ -231,7 +231,7 @@ export const ScreenReaderFriendly: Story = {
class="w-full"
aria-labelledby="theme-label"
/>
<p class="text-xs text-gray-500" aria-live="polite">
<p class="text-xs text-smoke-500" aria-live="polite">
Current: {{ selectedTheme ? themeOptions.find(o => o.value === selectedTheme)?.name : 'No theme selected' }}
</p>
</div>
@@ -239,7 +239,7 @@ export const ScreenReaderFriendly: Story = {
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
<h4 class="font-semibold mb-2">🎧 Screen Reader Testing Tips</h4>
<ul class="text-sm text-gray-600 dark-theme:text-gray-300 space-y-1">
<ul class="text-sm text-smoke-600 dark-theme:text-smoke-300 space-y-1">
<li>• Listen for role announcements when focusing</li>
<li>• Verify dropdown state changes are announced</li>
<li>• Check that selected values are spoken clearly</li>
@@ -299,7 +299,7 @@ export const FormIntegration: Story = {
<div class="max-w-2xl mx-auto p-6">
<div class="bg-purple-50 dark-theme:bg-purple-900/20 border border-purple-200 dark-theme:border-purple-700 rounded-lg p-4 mb-6">
<h3 class="text-lg font-semibold mb-2">📝 Form Integration Test</h3>
<p class="text-sm text-gray-600 dark-theme:text-gray-300">
<p class="text-sm text-smoke-600 dark-theme:text-smoke-300">
Test keyboard navigation through a complete form with SingleSelect components.
Tab order should be logical and all elements should be accessible.
</p>
@@ -307,19 +307,19 @@ export const FormIntegration: Story = {
<form @submit.prevent="handleSubmit" class="space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
<label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
Title *
</label>
<input
type="text"
required
placeholder="Enter a title"
class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
class="block w-full px-3 py-2 border border-smoke-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
<label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
Category *
</label>
<SingleSelect
@@ -332,7 +332,7 @@ export const FormIntegration: Story = {
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
<label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
Status
</label>
<SingleSelect
@@ -344,7 +344,7 @@ export const FormIntegration: Story = {
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
<label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
Assignee
</label>
<SingleSelect
@@ -356,13 +356,13 @@ export const FormIntegration: Story = {
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark-theme:text-gray-200 mb-1">
<label class="block text-sm font-medium text-smoke-700 dark-theme:text-smoke-200 mb-1">
Description
</label>
<textarea
rows="4"
placeholder="Enter description"
class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
class="block w-full px-3 py-2 border border-smoke-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/>
</div>
@@ -375,16 +375,16 @@ export const FormIntegration: Story = {
</button>
<button
type="button"
class="px-4 py-2 bg-gray-300 dark-theme:bg-gray-600 text-gray-700 dark-theme:text-gray-200 rounded-md hover:bg-gray-400 dark-theme:hover:bg-gray-500 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
class="px-4 py-2 bg-smoke-300 dark-theme:bg-smoke-600 text-smoke-700 dark-theme:text-smoke-200 rounded-md hover:bg-smoke-400 dark-theme:hover:bg-smoke-500 focus:ring-2 focus:ring-smoke-500 focus:ring-offset-2"
>
Cancel
</button>
</div>
</form>
<div class="mt-6 p-4 bg-gray-50 dark-theme:bg-zinc-800 border border-gray-200 dark-theme:border-zinc-700 rounded-lg">
<div class="mt-6 p-4 bg-gray-50 dark-theme:bg-zinc-800 border border-smoke-200 dark-theme:border-zinc-700 rounded-lg">
<h4 class="font-semibold mb-2">Current Form Data:</h4>
<pre class="text-xs text-gray-600 dark-theme:text-gray-300">{{ JSON.stringify(formData, null, 2) }}</pre>
<pre class="text-xs text-smoke-600 dark-theme:text-smoke-300">{{ JSON.stringify(formData, null, 2) }}</pre>
</div>
</div>
`
@@ -395,7 +395,7 @@ export const AccessibilityChecklist: Story = {
render: () => ({
template: `
<div class="max-w-4xl mx-auto p-6 space-y-6">
<div class="bg-gray-50 dark-theme:bg-zinc-800 border border-gray-200 dark-theme:border-zinc-700 rounded-lg p-6">
<div class="bg-gray-50 dark-theme:bg-zinc-800 border border-smoke-200 dark-theme:border-zinc-700 rounded-lg p-6">
<h2 class="text-2xl font-bold mb-4">♿ SingleSelect Accessibility Checklist</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -442,9 +442,9 @@ export const AccessibilityChecklist: Story = {
</div>
</div>
<div class="mt-6 p-4 bg-blue-50 dark-theme:bg-blue-900/20 border border-blue-200 dark-theme:border-blue-700 rounded-lg">
<div class="mt-6 p-4 bg-blue-50 dark-theme:bg-blue-900/20 border border-azure-400 dark-theme:border-blue-700 rounded-lg">
<h4 class="font-semibold mb-2">🎯 Quick Test</h4>
<p class="text-sm text-gray-700 dark-theme:text-gray-200">
<p class="text-sm text-smoke-700 dark-theme:text-smoke-200">
Close your eyes, use only the keyboard, and try to select different options from any dropdown above.
If you can successfully navigate and make selections, the accessibility implementation is working!
</p>
@@ -452,7 +452,7 @@ export const AccessibilityChecklist: Story = {
<div class="mt-4 p-4 bg-orange-50 border border-orange-200 rounded-lg">
<h4 class="font-semibold mb-2">⚡ Performance Note</h4>
<p class="text-sm text-gray-700 dark-theme:text-gray-200">
<p class="text-sm text-smoke-700 dark-theme:text-smoke-200">
These accessibility features are built into the component with minimal performance impact.
The ARIA attributes and keyboard handlers add less than 1KB to the bundle size.
</p>

4
src/components/input/SingleSelect.vue
View File

@@ -26,11 +26,11 @@
<slot name="icon" />
<span
v-if="slotProps.value !== null && slotProps.value !== undefined"
class="text-zinc-700 dark-theme:text-gray-200"
class="text-zinc-700 dark-theme:text-smoke-200"
>
{{ getLabel(slotProps.value) }}
</span>
<span v-else class="text-zinc-700 dark-theme:text-gray-200">
<span v-else class="text-zinc-700 dark-theme:text-smoke-200">
{{ label }}
</span>
</div>

6
src/components/load3d/Load3DControls.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="pointer-events-auto absolute top-12 left-2 z-20 flex flex-col rounded-lg bg-gray-700/30"
class="pointer-events-auto absolute top-12 left-2 z-20 flex flex-col rounded-lg bg-smoke-700/30"
>
<div class="show-menu relative">
<Button class="p-button-rounded p-button-text" @click="toggleMenu">
@@ -16,7 +16,7 @@
v-for="category in availableCategories"
:key="category"
class="p-button-text flex w-full items-center justify-start"
:class="{ 'bg-gray-600': activeCategory === category }"
:class="{ 'bg-smoke-600': activeCategory === category }"
@click="selectCategory(category)"
>
<i :class="getCategoryIcon(category)" />
@@ -26,7 +26,7 @@
</div>
</div>
<div v-show="activeCategory" class="rounded-lg bg-gray-700/30">
<div v-show="activeCategory" class="rounded-lg bg-smoke-700/30">
<SceneControls
v-if="activeCategory === 'scene'"
ref="sceneControlsRef"

2
src/components/load3d/controls/RecordingControls.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="relative rounded-lg bg-gray-700/30">
<div class="relative rounded-lg bg-smoke-700/30">
<div class="flex flex-col gap-2">
<Button
class="p-button-rounded p-button-text"

2
src/components/load3d/controls/ViewerControls.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="relative rounded-lg bg-gray-700/30">
<div class="relative rounded-lg bg-smoke-700/30">
<div class="flex flex-col gap-2">
<Button class="p-button-rounded p-button-text" @click="openIn3DViewer">
<i

4
src/components/topbar/TopbarBadge.test.ts
View File

@@ -160,8 +160,8 @@ describe('TopbarBadge', () => {
'full'
)
expect(wrapper.find('.bg-warning-100').exists()).toBe(true)
expect(wrapper.find('.text-warning-100').exists()).toBe(true)
expect(wrapper.find('.bg-gold-600').exists()).toBe(true)
expect(wrapper.find('.text-gold-600').exists()).toBe(true)
})
it('uses default error icon for error variant', () => {

6
src/components/topbar/TopbarBadge.vue
View File

@@ -162,7 +162,7 @@ const labelClasses = computed(() => {
case 'error':
return 'bg-danger-100 text-white'
case 'warning':
return 'bg-warning-100 text-black'
return 'bg-gold-600 text-black'
case 'info':
default:
return 'bg-white text-black'
@@ -174,7 +174,7 @@ const textClasses = computed(() => {
case 'error':
return 'text-danger-100'
case 'warning':
return 'text-warning-100'
return 'text-gold-600'
case 'info':
default:
return 'text-slate-100'
@@ -205,7 +205,7 @@ const dotClasses = computed(() => {
case 'error':
return 'bg-danger-100'
case 'warning':
return 'bg-warning-100'
return 'bg-gold-600'
case 'info':
default:
return 'bg-slate-100'

4
src/components/widget/layout/BaseModalLayout.vue
View File

@@ -133,7 +133,7 @@ const toggleRightPanel = () => {
const layoutClasses = cn(
'base-widget-layout',
'rounded-2xl overflow-hidden relative',
'bg-gray-50 dark-theme:bg-gray-800'
'bg-gray-50 dark-theme:bg-smoke-800'
)
const rightPanelButtonClasses = computed(() => {
@@ -150,7 +150,7 @@ const closeButtonClasses = cn(
const mainContainerClasses = cn(
'flex-1 flex',
'bg-gray-100 dark-theme:bg-neutral-900'
'bg-smoke-100 dark-theme:bg-neutral-900'
)
const headerClasses = cn(

4
src/components/widget/nav/NavItem.vue
View File

@@ -3,8 +3,8 @@
class="flex cursor-pointer items-center gap-2 rounded-md px-4 py-3 text-sm transition-colors"
:class="
active
? 'bg-gray-400 dark-theme:bg-charcoal-300 text-neutral'
: 'text-neutral hover:bg-gray-100 dark-theme:hover:bg-charcoal-300'
? 'bg-smoke-400 dark-theme:bg-charcoal-300 text-neutral'
: 'text-neutral hover:bg-smoke-100 dark-theme:hover:bg-charcoal-300'
"
role="button"
@click="onClick"

4
src/core/graph/subgraph/SubgraphNode.vue
View File

@@ -255,7 +255,7 @@ onBeforeUnmount(() => {
{{ $t('subgraphStore.shown') }}
</div>
<a
class="cursor-pointer text-right text-[11px] font-normal text-blue-100"
class="cursor-pointer text-right text-[11px] font-normal text-azure-600"
@click.stop="hideAll"
>
{{ $t('subgraphStore.hideAll') }}</a
@@ -280,7 +280,7 @@ onBeforeUnmount(() => {
{{ $t('subgraphStore.hidden') }}
</div>
<a
class="cursor-pointer text-right text-[11px] font-normal text-blue-100"
class="cursor-pointer text-right text-[11px] font-normal text-azure-600"
@click.stop="showAll"
>
{{ $t('subgraphStore.showAll') }}</a

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>

14
src/renderer/extensions/vueNodes/VideoPreview.vue
View File

@@ -16,11 +16,11 @@
<!-- Error State -->
<div
v-if="videoError"
class="flex size-full flex-col items-center justify-center bg-gray-800/50 text-center text-white"
class="flex size-full flex-col items-center justify-center bg-smoke-800/50 text-center text-white"
>
<i class="mb-2 icon-[lucide--video-off] h-12 w-12 text-gray-400" />
<p class="text-sm text-gray-300">{{ $t('g.videoFailedToLoad') }}</p>
<p class="mt-1 text-xs text-gray-400">
<i class="mb-2 icon-[lucide--video-off] h-12 w-12 text-smoke-400" />
<p class="text-sm text-smoke-300">{{ $t('g.videoFailedToLoad') }}</p>
<p class="mt-1 text-xs text-smoke-400">
{{ getVideoFilename(currentVideoUrl) }}
</p>
</div>
@@ -44,7 +44,7 @@
<div v-if="isHovered" class="actions absolute top-2 right-2 flex gap-1">
<!-- Download Button -->
<button
class="action-btn cursor-pointer rounded-lg border-0 bg-white p-2 text-black shadow-sm transition-all duration-200 hover:bg-gray-100"
class="action-btn cursor-pointer rounded-lg border-0 bg-white p-2 text-black shadow-sm transition-all duration-200 hover:bg-smoke-100"
:title="$t('g.downloadVideo')"
:aria-label="$t('g.downloadVideo')"
@click="handleDownload"
@@ -54,7 +54,7 @@
<!-- Close Button -->
<button
class="action-btn cursor-pointer rounded-lg border-0 bg-white p-2 text-black shadow-sm transition-all duration-200 hover:bg-gray-100"
class="action-btn cursor-pointer rounded-lg border-0 bg-white p-2 text-black shadow-sm transition-all duration-200 hover:bg-smoke-100"
:title="$t('g.removeVideo')"
:aria-label="$t('g.removeVideo')"
@click="handleRemove"
@@ -89,7 +89,7 @@
<span v-if="videoError" class="text-red-400">
{{ $t('g.errorLoadingVideo') }}
</span>
<span v-else-if="isLoading" class="text-gray-400">
<span v-else-if="isLoading" class="text-smoke-400">
{{ $t('g.loading') }}...
</span>
<span v-else>

10
src/renderer/extensions/vueNodes/components/ImagePreview.vue
View File

@@ -16,11 +16,11 @@
<!-- Error State -->
<div
v-if="imageError"
class="flex size-full flex-col items-center justify-center bg-gray-800/50 text-center text-white"
class="flex size-full flex-col items-center justify-center bg-smoke-800/50 text-center text-white"
>
<i class="mb-2 icon-[lucide--image-off] h-12 w-12 text-gray-400" />
<p class="text-sm text-gray-300">{{ $t('g.imageFailedToLoad') }}</p>
<p class="mt-1 text-xs text-gray-400">
<i class="mb-2 icon-[lucide--image-off] h-12 w-12 text-smoke-400" />
<p class="text-sm text-smoke-300">{{ $t('g.imageFailedToLoad') }}</p>
<p class="mt-1 text-xs text-smoke-400">
{{ getImageFilename(currentImageUrl) }}
</p>
</div>
@@ -99,7 +99,7 @@
<span v-if="imageError" class="text-red-400">
{{ $t('g.errorLoadingImage') }}
</span>
<span v-else-if="isLoading" class="text-gray-400">
<span v-else-if="isLoading" class="text-smoke-400">
{{ $t('g.loading') }}...
</span>
<span v-else>

6
src/renderer/extensions/vueNodes/components/LivePreview.vue
View File

@@ -7,10 +7,10 @@
<!-- Error State -->
<div
v-if="imageError"
class="flex h-full w-full flex-col items-center justify-center text-center text-pure-white"
class="text-pure-white flex h-full w-full flex-col items-center justify-center text-center"
>
<i-lucide:image-off class="mb-1 size-8 text-gray-500" />
<p class="text-xs text-gray-400">{{ $t('g.imageFailedToLoad') }}</p>
<i-lucide:image-off class="mb-1 size-8 text-smoke-500" />
<p class="text-xs text-smoke-400">{{ $t('g.imageFailedToLoad') }}</p>
</div>
<!-- Main Image -->

2
src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col gap-1">
<div
class="max-h-[48rem] rounded border border-gray-300 p-4 dark-theme:border-gray-600"
class="max-h-[48rem] rounded border border-smoke-300 p-4 dark-theme:border-smoke-600"
>
<Chart
:type="chartType"

6
src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
View File

@@ -45,7 +45,7 @@
<button
v-if="isRecording"
:title="t('g.stopRecording', 'Stop Recording')"
class="flex size-8 animate-pulse items-center justify-center rounded-full border-0 bg-gray-500/33 transition-colors"
class="flex size-8 animate-pulse items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
@click="handleStopRecording"
>
<div class="size-2.5 rounded-sm bg-[#C02323]" />
@@ -54,7 +54,7 @@
<button
v-else-if="!isRecording && recordedURL && !isPlaying"
:title="t('g.playRecording') || 'Play Recording'"
class="flex size-8 items-center justify-center rounded-full border-0 bg-gray-500/33 transition-colors"
class="flex size-8 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
@click="handlePlayRecording"
>
<i
@@ -65,7 +65,7 @@
<button
v-else-if="isPlaying"
:title="t('g.stopPlayback') || 'Stop Playback'"
class="flex size-8 items-center justify-center rounded-full border-0 bg-gray-500/33 transition-colors"
class="flex size-8 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
@click="handleStopPlayback"
>
<i

16
src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
View File

@@ -29,11 +29,11 @@
>
<i
v-if="!isPlaying"
class="icon-[lucide--play] size-4 text-gray-600 dark-theme:text-gray-800"
class="icon-[lucide--play] size-4 text-smoke-600 dark-theme:text-smoke-800"
/>
<i
v-else
class="icon-[lucide--pause] size-4 text-gray-600 dark-theme:text-gray-800"
class="icon-[lucide--pause] size-4 text-smoke-600 dark-theme:text-smoke-800"
/>
</div>
@@ -47,10 +47,10 @@
<!-- Progress Bar -->
<div
class="relative h-0.5 flex-1 rounded-full bg-gray-300 dark-theme:bg-stone-200"
class="relative h-0.5 flex-1 rounded-full bg-smoke-300 dark-theme:bg-ash-800"
>
<div
class="absolute top-0 left-0 h-full rounded-full bg-gray-600 transition-all dark-theme:bg-white/50"
class="absolute top-0 left-0 h-full rounded-full bg-smoke-600 transition-all dark-theme:bg-white/50"
:style="{ width: `${progressPercentage}%` }"
/>
<input
@@ -77,15 +77,15 @@
>
<i
v-if="showVolumeTwo"
class="icon-[lucide--volume-2] size-4 text-gray-600 dark-theme:text-gray-800"
class="icon-[lucide--volume-2] size-4 text-smoke-600 dark-theme:text-smoke-800"
/>
<i
v-else-if="showVolumeOne"
class="icon-[lucide--volume-1] size-4 text-gray-600 dark-theme:text-gray-800"
class="icon-[lucide--volume-1] size-4 text-smoke-600 dark-theme:text-smoke-800"
/>
<i
v-else
class="icon-[lucide--volume-x] size-4 text-gray-600 dark-theme:text-gray-800"
class="icon-[lucide--volume-x] size-4 text-smoke-600 dark-theme:text-smoke-800"
/>
</div>
@@ -100,7 +100,7 @@
@click="toggleOptionsMenu"
>
<i
class="icon-[lucide--more-vertical] size-4 text-gray-600 dark-theme:text-gray-800"
class="icon-[lucide--more-vertical] size-4 text-smoke-600 dark-theme:text-smoke-800"
/>
</div>
</div>

177
src/scripts/ui/menu/menu.css
View File

@@ -1,7 +1,3 @@
.mdi.rotate270::before {
transform: rotate(270deg);
}
/* Generic */
.comfyui-button {
display: flex;
@@ -121,177 +117,4 @@
border-radius: 0;
}
/* Menu */
.comfyui-menu .mdi::before {
font-size: 18px;
}
.comfyui-menu .comfyui-button {
background: var(--comfy-input-bg);
color: var(--fg-color);
white-space: nowrap;
}
.comfyui-menu .comfyui-button:not(:disabled):hover {
background: var(--border-color);
color: var(--content-fg);
}
.comfyui-menu .comfyui-split-button-popup > .comfyui-button {
border-radius: 0;
background-color: transparent;
}
.comfyui-menu .comfyui-split-button-popup > .comfyui-button:not(:disabled):hover {
background-color: var(--comfy-input-bg);
}
.comfyui-menu .comfyui-split-button-popup.left {
border-top-right-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.comfyui-menu .comfyui-button.popup-open {
background-color: var(--content-bg);
color: var(--content-fg);
}
.comfyui-menu-push {
margin-left: -0.8em;
flex: auto;
}
/** Send to workflow widget selection dialog */
.comfy-widget-selection-dialog {
border: none;
}
.comfy-widget-selection-dialog div {
color: var(--fg-color);
font-family: Arial, Helvetica, sans-serif;
}
.comfy-widget-selection-dialog h2 {
margin-top: 0;
}
.comfy-widget-selection-dialog section {
width: fit-content;
display: flex;
flex-direction: column;
}
.comfy-widget-selection-item {
display: flex;
gap: 10px;
align-items: center;
}
.comfy-widget-selection-item span {
margin-right: auto;
}
.comfy-widget-selection-item span::before {
content: '#' attr(data-id);
opacity: 0.5;
margin-right: 5px;
}
.comfy-modal .comfy-widget-selection-item button {
font-size: 1em;
}
/***** Responsive *****/
.lg.comfyui-menu .lt-lg-show {
display: none !important;
}
.comfyui-menu:not(.lg) .nlg-hide {
display: none !important;
}
/** Large screen */
.lg.comfyui-menu>.comfyui-menu-mobile-collapse .comfyui-button span,
.lg.comfyui-menu>.comfyui-menu-mobile-collapse.comfyui-button span {
display: none;
}
.lg.comfyui-menu>.comfyui-menu-mobile-collapse .comfyui-popup .comfyui-button span {
display: unset;
}
/** Non large screen */
.lt-lg.comfyui-menu {
flex-wrap: wrap;
}
.lt-lg.comfyui-menu > *:not(.comfyui-menu-mobile-collapse) {
order: 1;
}
.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse {
order: 9999;
width: 100%;
}
.comfyui-body-bottom .lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse {
order: -1;
}
.comfyui-body-bottom .lt-lg.comfyui-menu > .comfyui-menu-button {
top: unset;
bottom: 4px;
}
.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse.comfyui-button-group {
flex-wrap: wrap;
}
.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-button,
.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse.comfyui-button {
padding: 10px;
}
.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-button,
.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-button-wrapper {
width: 100%;
}
.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-popup {
position: static;
background-color: var(--comfy-input-bg);
max-width: unset;
max-height: 50vh;
overflow: auto;
}
.lt-lg.comfyui-menu:not(.expanded) > .comfyui-menu-mobile-collapse {
display: none;
}
.lt-lg .comfyui-menu-button {
position: absolute;
top: 4px;
right: 8px;
}
.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-view-list-popup {
border-radius: 0;
}
.lt-lg.comfyui-menu .comfyui-workflows-popup {
width: 100vw;
}
/** Small */
.lt-md .comfyui-workflows-button-inner {
width: unset !important;
}
.lt-md .comfyui-workflows-label {
display: none;
}
/** Extra small */
.lt-sm .comfyui-interrupt-button {
margin-right: 45px;
}
.comfyui-body-bottom .lt-sm.comfyui-menu > .comfyui-menu-button{
bottom: 41px;
}