Skip to content

Commit b03cf7e

Browse files
DrJKLDrJKL
authored
Style: Token renaming and style organization (#6337)
## Summary Align color names and organize style.css some more ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6337-Style-Token-renaming-and-style-organization-29a6d73d365081b69f25ce1298c67fdc) by [Unito](https://www.unito.io)
1 parent 0a80a28 commit b03cf7e

38 files changed

+235
-406
lines changed

‎packages/design-system/src/css/style.css‎

Lines changed: 90 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -9,29 +9,18 @@
99

1010
@config '../../tailwind.config.ts';
1111

12-
@media (prefers-color-scheme: dark) {
13-
:root {
14-
--fg-color: #fff;
15-
--bg-color: #202020;
16-
--content-bg: #4e4e4e;
17-
--content-fg: #fff;
18-
--content-hover-bg: #222;
19-
--content-hover-fg: #fff;
20-
}
21-
}
22-
2312
@theme {
2413
--text-xxs: 0.625rem;
2514
--text-xxs--line-height: calc(1 / 0.625);
2615

27-
/* Spacing */
28-
--spacing-xs: 8px;
16+
--text-xxxs: 0.5625rem;
17+
--text-xxxs--line-height: calc(1 / 0.5625);
2918

3019
/* Font Families */
3120
--font-inter: 'Inter', sans-serif;
3221

3322
/* Palette Colors */
34-
--color-charcoal-100: #171718;
23+
--color-charcoal-100: #55565e;
3524
--color-charcoal-200: #494a50;
3625
--color-charcoal-300: #3c3d42;
3726
--color-charcoal-400: #313235;
@@ -42,43 +31,45 @@
4231

4332
--color-neutral-550: #636363;
4433

45-
--color-stone-100: #828282;
46-
--color-stone-200: #444444;
47-
--color-stone-300: #bbbbbb;
34+
--color-ash-300: #bbbbbb;
35+
--color-ash-500: #828282;
36+
--color-ash-800: #444444;
4837

4938
--color-ivory-100: #fdfbfa;
5039
--color-ivory-200: #faf9f5;
5140
--color-ivory-300: #f0eee6;
5241

53-
--color-gray-100: #f3f3f3;
54-
--color-gray-200: #e9e9e9;
55-
--color-gray-300: #e1e1e1;
56-
--color-gray-400: #d9d9d9;
57-
--color-gray-500: #c5c5c5;
58-
--color-gray-600: #b4b4b4;
59-
--color-gray-700: #a0a0a0;
60-
--color-gray-800: #8a8a8a;
42+
--color-smoke-100: #f3f3f3;
43+
--color-smoke-200: #e9e9e9;
44+
--color-smoke-300: #e1e1e1;
45+
--color-smoke-400: #d9d9d9;
46+
--color-smoke-500: #c5c5c5;
47+
--color-smoke-600: #b4b4b4;
48+
--color-smoke-700: #a0a0a0;
49+
--color-smoke-800: #8a8a8a;
6150

6251
--color-sand-100: #e1ded5;
6352
--color-sand-200: #d6cfc2;
6453
--color-sand-300: #888682;
6554

66-
--color-pure-black: #000000;
67-
--color-pure-white: #ffffff;
68-
6955
--color-slate-100: #9c9eab;
7056
--color-slate-200: #9fa2bd;
7157
--color-slate-300: #5b5e7d;
7258

73-
--color-brand-yellow: #f0ff41;
74-
--color-brand-blue: #172dd7;
59+
--color-electric-400: #f0ff41;
60+
--color-sapphire-700: #172dd7;
61+
--color-brand-yellow: var(--color-electric-400);
62+
--color-brand-blue: var(--color-sapphire-700);
63+
64+
--color-azure-400: #31b9f4;
65+
--color-azure-600: #0b8ce9;
66+
67+
--color-jade-400: #47e469;
68+
--color-jade-600: #00cd72;
69+
70+
--color-gold-400: #fcbf64;
71+
--color-gold-600: #fd9903;
7572

76-
--color-blue-100: #0b8ce9;
77-
--color-blue-200: #31b9f4;
78-
--color-success-100: #00cd72;
79-
--color-success-200: #47e469;
80-
--color-warning-100: #fd9903;
81-
--color-warning-200: #fcbf64;
8273
--color-danger-100: #c02323;
8374
--color-danger-200: #d62952;
8475

@@ -90,26 +81,24 @@
9081
--color-error: #962a2a;
9182

9283
--color-comfy-menu-secondary: var(--comfy-menu-secondary-bg);
93-
--text-xxxs: 0.5625rem;
94-
--text-xxxs--line-height: calc(1 / 0.5625);
9584

96-
--color-blue-selection: rgb(from var(--color-blue-100) r g b / 0.3);
97-
--color-node-hover-100: rgb(from var(--color-charcoal-100) r g b/ 0.15);
98-
--color-node-hover-200: rgb(from var(--color-charcoal-100) r g b/ 0.1);
99-
--color-modal-tag: rgb(from var(--color-gray-400) r g b/ 0.4);
85+
--color-blue-selection: rgb(from var(--color-azure-600) r g b / 0.3);
86+
--color-node-hover-100: rgb(from var(--color-charcoal-800) r g b/ 0.15);
87+
--color-node-hover-200: rgb(from var(--color-charcoal-800) r g b/ 0.1);
88+
--color-modal-tag: rgb(from var(--color-smoke-400) r g b/ 0.4);
10089
--color-alpha-charcoal-600-30: color-mix(
10190
in srgb,
10291
var(--color-charcoal-600) 30%,
10392
transparent
10493
);
105-
--color-alpha-stone-100-20: color-mix(
94+
--color-alpha-ash-500-20: color-mix(
10695
in srgb,
107-
var(--color-stone-100) 20%,
96+
var(--color-ash-500) 20%,
10897
transparent
10998
);
110-
--color-alpha-gray-500-50: color-mix(
99+
--color-alpha-smoke-500-50: color-mix(
111100
in srgb,
112-
var(--color-gray-500) 50%,
101+
var(--color-smoke-500) 50%,
113102
transparent
114103
);
115104

@@ -145,8 +134,8 @@
145134
--content-hover-bg: #adadad;
146135
--content-hover-fg: #000;
147136

148-
--button-surface: var(--color-pure-white);
149-
--button-surface-contrast: var(--color-pure-black);
137+
--button-surface: var(--color-white);
138+
--button-surface-contrast: var(--color-black);
150139

151140
/* Code styling colors for help menu*/
152141
--code-text-color: rgb(0 122 255 / 1);
@@ -157,31 +146,36 @@
157146

158147
--accent-primary: var(--color-charcoal-700);
159148
--backdrop: var(--color-white);
160-
--button-hover-surface: var(--color-gray-200);
161-
--button-active-surface: var(--color-gray-400);
162-
--button-icon: var(--color-gray-600);
149+
150+
--button-hover-surface: var(--color-smoke-200);
151+
--button-active-surface: var(--color-smoke-400);
152+
--button-icon: var(--color-smoke-600);
153+
163154
--dialog-surface: var(--color-neutral-200);
164-
--interface-menu-component-surface-hovered: var(--color-gray-200);
165-
--interface-menu-component-surface-selected: var(--color-gray-400);
166-
--interface-menu-keybind-surface-default: var(--color-gray-500);
167-
--interface-panel-surface: var(--color-pure-white);
168-
--interface-stroke: var(--color-gray-300);
169-
--nav-background: var(--color-pure-white);
170-
--node-border: var(--color-gray-300);
171-
--node-component-border: var(--color-gray-400);
172-
--node-component-disabled: var(--color-alpha-stone-100-20);
155+
156+
--interface-menu-component-surface-hovered: var(--color-smoke-200);
157+
--interface-menu-component-surface-selected: var(--color-smoke-400);
158+
--interface-menu-keybind-surface-default: var(--color-smoke-500);
159+
--interface-panel-surface: var(--color-white);
160+
--interface-stroke: var(--color-smoke-300);
161+
162+
--nav-background: var(--color-white);
163+
164+
--node-border: var(--color-smoke-300);
165+
--node-component-border: var(--color-smoke-400);
166+
--node-component-disabled: var(--color-alpha-ash-500-20);
173167
--node-component-executing: var(--color-blue-500);
174168
--node-component-header: var(--fg-color);
175-
--node-component-header-icon: var(--color-stone-200);
169+
--node-component-header-icon: var(--color-ash-800);
176170
--node-component-header-surface: var(--color-white);
177171
--node-component-outline: var(--color-black);
178-
--node-component-ring: rgb(from var(--color-gray-500) r g b / 50%);
172+
--node-component-ring: rgb(from var(--color-smoke-500) r g b / 50%);
179173
--node-component-slot-dot-outline-opacity-mult: 1;
180174
--node-component-slot-dot-outline-opacity: 5%;
181175
--node-component-slot-dot-outline: var(--color-black);
182-
--node-component-slot-text: var(--color-stone-200);
183-
--node-component-surface-highlight: var(--color-stone-100);
184-
--node-component-surface-hovered: var(--color-gray-200);
176+
--node-component-slot-text: var(--color-ash-800);
177+
--node-component-surface-highlight: var(--color-ash-500);
178+
--node-component-surface-hovered: var(--color-smoke-200);
185179
--node-component-surface-selected: var(--color-charcoal-200);
186180
--node-component-surface: var(--color-white);
187181
--node-component-tooltip: var(--color-charcoal-700);
@@ -193,40 +187,53 @@
193187
);
194188
--node-component-widget-skeleton-surface: var(--color-zinc-300);
195189
--node-divider: var(--color-sand-100);
196-
--node-icon-disabled: var(--color-alpha-gray-500-50);
197-
--node-stroke: var(--color-gray-400);
190+
--node-icon-disabled: var(--color-alpha-smoke-500-50);
191+
--node-stroke: var(--color-smoke-400);
198192
--node-stroke-selected: var(--color-accent-primary);
199193
--node-stroke-error: var(--color-error);
200-
--node-stroke-executing: var(--color-blue-100);
201-
--text-secondary: var(--color-stone-100);
194+
--node-stroke-executing: var(--color-azure-600);
195+
196+
--text-secondary: var(--color-ash-500);
202197
--text-primary: var(--color-charcoal-700);
203198
--input-surface: rgb(0 0 0 / 0.15);
204199
}
205200

206201
.dark-theme {
207-
--accent-primary: var(--color-pure-white);
202+
--fg-color: #fff;
203+
--bg-color: #202020;
204+
--content-bg: #4e4e4e;
205+
--content-fg: #fff;
206+
--content-hover-bg: #222;
207+
--content-hover-fg: #fff;
208+
209+
--accent-primary: var(--color-white);
208210
--backdrop: var(--color-neutral-900);
211+
209212
--button-surface: var(--color-charcoal-600);
210-
--button-surface-contrast: var(--color-pure-white);
213+
--button-surface-contrast: var(--color-white);
211214
--button-hover-surface: var(--color-charcoal-600);
212215
--button-active-surface: var(--color-charcoal-600);
213-
--button-icon: var(--color-gray-800);
216+
--button-icon: var(--color-smoke-800);
217+
214218
--dialog-surface: var(--color-neutral-700);
219+
215220
--interface-menu-component-surface-hovered: var(--color-charcoal-400);
216221
--interface-menu-component-surface-selected: var(--color-charcoal-300);
217222
--interface-menu-keybind-surface-default: var(--color-charcoal-200);
218-
--interface-panel-surface: var(--color-charcoal-100);
223+
--interface-panel-surface: var(--color-charcoal-800);
219224
--interface-stroke: var(--color-charcoal-400);
220-
--nav-background: var(--color-charcoal-100);
225+
226+
--nav-background: var(--color-charcoal-800);
227+
221228
--node-border: var(--color-charcoal-500);
222-
--node-component-border: var(--color-stone-200);
229+
--node-component-border: var(--color-ash-800);
223230
--node-component-border-error: var(--color-danger-100);
224231
--node-component-border-executing: var(--color-blue-500);
225232
--node-component-border-selected: var(--color-charcoal-200);
226233
--node-component-header-icon: var(--color-slate-300);
227234
--node-component-header-surface: var(--color-charcoal-800);
228235
--node-component-outline: var(--color-white);
229-
--node-component-ring: rgb(var(--color-gray-500) / 20%);
236+
--node-component-ring: rgb(var(--color-smoke-500) / 20%);
230237
--node-component-slot-dot-outline-opacity: 10%;
231238
--node-component-slot-dot-outline: var(--color-white);
232239
--node-component-slot-text: var(--color-slate-200);
@@ -240,13 +247,15 @@
240247
--node-component-widget-skeleton-surface: var(--color-zinc-800);
241248
--node-component-disabled: var(--color-alpha-charcoal-600-30);
242249
--node-divider: var(--color-charcoal-500);
243-
--node-icon-disabled: var(--color-alpha-stone-100-20);
244-
--node-stroke: var(--color-stone-200);
245-
--node-stroke-selected: var(--color-pure-white);
250+
--node-icon-disabled: var(--color-alpha-ash-500-20);
251+
--node-stroke: var(--color-ash-800);
252+
--node-stroke-selected: var(--color-white);
246253
--node-stroke-error: var(--color-error);
247-
--node-stroke-executing: var(--color-blue-100);
254+
--node-stroke-executing: var(--color-azure-600);
255+
248256
--text-secondary: var(--color-slate-100);
249-
--text-primary: var(--color-pure-white);
257+
--text-primary: var(--color-white);
258+
250259
--input-surface: rgb(130 130 130 / 0.1);
251260
}
252261

@@ -330,7 +339,6 @@
330339
}
331340
}
332341

333-
334342
/* ===================== Scrollbar Utilities (Tailwind) =====================
335343
Usage: Add `scrollbar-custom` class to scrollable containers.
336344
The scrollbar styling adapts to light/dark theme automatically.

‎packages/tailwind-utils/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { cn } from '@comfyorg/tailwind-utils'
1414

1515
// Use with conditional classes (ternary)
1616
<button
17-
:class="cn('px-4 py-2', isActive ? 'bg-blue-500' : 'bg-gray-500')"
17+
:class="cn('px-4 py-2', isActive ? 'bg-blue-500' : 'bg-smoke-500')"
1818
/>
1919
```
2020

‎src/components/common/FormImageUpload.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
<div class="flex items-center gap-2">
44
<div
55
class="preview-box flex h-16 w-16 items-center justify-center rounded border p-2"
6-
:class="{ 'bg-gray-100 dark-theme:bg-gray-800': !modelValue }"
6+
:class="{ 'bg-smoke-100 dark-theme:bg-smoke-800': !modelValue }"
77
>
88
<img
99
v-if="modelValue"
1010
:src="modelValue"
1111
class="max-h-full max-w-full object-contain"
1212
/>
13-
<i v-else class="pi pi-image text-xl text-gray-400" />
13+
<i v-else class="pi pi-image text-xl text-smoke-400" />
1414
</div>
1515

1616
<div class="flex flex-col gap-2">

‎src/components/dialog/content/setting/UsageLogsTable.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
<div class="font-semibold">
5151
{{ data.params?.api_name || 'API' }}
5252
</div>
53-
<div class="text-sm text-gray-400">
53+
<div class="text-sm text-smoke-400">
5454
{{ $t('credits.model') }}: {{ data.params?.model || '-' }}
5555
</div>
5656
</div>

‎src/components/dialog/content/setting/UserPanel.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878

7979
<!-- Login Section -->
8080
<div v-else class="flex flex-col gap-4">
81-
<p class="text-gray-600">
81+
<p class="text-smoke-600">
8282
{{ $t('auth.login.title') }}
8383
</p>
8484

‎src/components/graph/modals/ZoomControlsModal.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,6 @@ watch(
148148
</script>
149149
<style>
150150
.zoomInputContainer:focus-within {
151-
border: 1px solid var(--color-pure-white);
151+
border: 1px solid var(--color-white);
152152
}
153153
</style>

‎src/components/graph/selectionToolbox/MenuOptionItem.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div
33
v-if="option.type === 'divider'"
4-
class="my-1 h-px bg-gray-200 dark-theme:bg-zinc-700"
4+
class="my-1 h-px bg-smoke-200 dark-theme:bg-zinc-700"
55
/>
66
<div
77
v-else

‎src/components/graph/selectionToolbox/SubmenuPopover.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,15 @@
2020
:key="subOption.label"
2121
:class="
2222
isColorSubmenu
23-
? 'w-7 h-7 flex items-center justify-center hover:bg-gray-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
24-
: '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'
23+
? 'w-7 h-7 flex items-center justify-center hover:bg-smoke-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
24+
: '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'
2525
"
2626
:title="subOption.label"
2727
@click="handleSubmenuClick(subOption)"
2828
>
2929
<div
3030
v-if="subOption.color"
31-
class="h-5 w-5 rounded-full border border-gray-300 dark-theme:border-zinc-600"
31+
class="h-5 w-5 rounded-full border border-smoke-300 dark-theme:border-zinc-600"
3232
:style="{ backgroundColor: subOption.color }"
3333
/>
3434
<template v-else-if="!subOption.color">

‎src/components/graph/selectionToolbox/VerticalDivider.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
<template>
2-
<div class="h-6 w-px self-center bg-gray-300/10 dark-theme:bg-gray-600/10" />
2+
<div
3+
class="h-6 w-px self-center bg-smoke-300/10 dark-theme:bg-smoke-600/10"
4+
/>
35
</template>

‎src/components/graph/widgets/ChatHistoryWidget.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
>
1414
<div class="mb-1 flex justify-end">
1515
<div
16-
class="max-w-[80%] rounded-xl bg-gray-300 px-4 py-1 text-right dark-theme:bg-gray-800"
16+
class="max-w-[80%] rounded-xl bg-smoke-300 px-4 py-1 text-right dark-theme:bg-smoke-800"
1717
>
1818
<div class="text-[12px] break-words">{{ item.prompt }}</div>
1919
</div>
@@ -26,7 +26,7 @@
2626
"
2727
text
2828
rounded
29-
class="h-4! w-4! p-1! text-gray-400 transition hover:text-gray-600 hover:dark-theme:text-gray-200"
29+
class="h-4! w-4! p-1! text-smoke-400 transition hover:text-smoke-600 hover:dark-theme:text-smoke-200"
3030
pt:icon:class="text-xs!"
3131
:icon="editIndex === i ? 'pi pi-times' : 'pi pi-pencil'"
3232
:aria-label="

0 commit comments

Comments
 (0)