Skip to content

Commit c8e1a9e

Browse files
emir-karabegemir-karabeg
committed
feat: colors consolidation
1 parent 8f776e9 commit c8e1a9e

File tree

46 files changed

+241
-231
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+241
-231
lines changed

‎apps/sim/app/_styles/globals.css‎

Lines changed: 77 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -40,101 +40,93 @@
4040
}
4141

4242
/**
43-
* Dark color tokens - single source of truth for all colors (dark-only)
43+
* Color tokens - single source of truth for all colors
44+
* Light mode: Warm theme
45+
* Dark mode: Dark neutral theme
4446
*/
4547
@layer base {
4648
:root,
4749
.light {
48-
/* Neutrals (surfaces) - Hex-inspired white theme */
49-
--surface-0: #ffffff; /* white canvas bg, modal header/droparea */
50-
--surface-1: #ffffff; /* white sidebar (primary) */
51-
--surface-2: #ffffff; /* white workflow blocks, modals (card) */
52-
--surface-3: #ffffff; /* white */
53-
--surface-4: #ffffff; /* white */
54-
--surface-5: #ffffff; /* subtle off-white for search, buttons, badges (card-2) */
55-
--surface-6: #ffffff; /* white */
56-
--surface-9: #f2f2f2; /* visible gray for active states, textarea bg (card-3) */
57-
--surface-11: #e8e8e8; /* deeper gray */
58-
--surface-12: #dedede; /* even deeper */
59-
--surface-13: #a3a3a3; /* muted gray */
60-
--surface-14: #737373; /* darker gray */
61-
--surface-15: #525252; /* darkest gray */
62-
--surface-elevated: #ffffff; /* white elevated */
63-
--bg-strong: #e8e8e8; /* strong bg element */
64-
65-
/* Text - neutral grays for Hex-inspired theme */
66-
--text-primary: #171717; /* near black */
67-
--text-secondary: #1f1f1f; /* dark gray */
68-
--text-tertiary: #404040; /* medium gray */
69-
--text-muted: #5c5c5c; /* muted gray */
70-
--text-subtle: #8a8a8a; /* subtle gray */
71-
--text-inverse: #fafafa; /* near white */
50+
--bg: #fcfcf9; /* main canvas - warm off-white */
51+
--surface-1: #f9faf7; /* sidebar, panels - very close to bg */
52+
--surface-2: #fcfcf9; /* cards, modals - matches bg */
53+
--surface-3: #f6f7f4; /* popovers, elevated */
54+
--surface-4: #f2f3f0; /* buttons base */
55+
--border: #e5e6e1; /* primary border */
56+
--surface-5: #ecede8; /* inputs, hover states */
57+
--border-1: #d7dcda; /* stronger border - sage gray */
58+
--surface-6: #d7dcda; /* scroll thumbs, active states */
59+
60+
/* Text - warm neutrals */
61+
--text-primary: #1a1a1a;
62+
--text-secondary: #2d2d2d;
63+
--text-tertiary: #525252;
64+
--text-muted: #737373;
65+
--text-subtle: #8c8c8c;
66+
--text-inverse: #f0fff6;
7267
--text-error: #dc2626;
7368

74-
/* Borders / dividers - Hex-inspired neutral grays */
75-
--border: #e5e5e5; /* neutral gray border */
76-
--border-strong: #d4d4d4; /* stronger border */
77-
--divider: #ebebeb; /* subtle divider */
78-
--border-muted: #ebebeb; /* muted border */
79-
--border-success: #d4d4d4; /* success border */
69+
/* Borders / dividers */
70+
--divider: #e8e9e4;
71+
--border-muted: #dfe0db;
72+
--border-success: #d7dcda;
8073

8174
/* Brand & state */
8275
--brand-400: #8e4cfb;
83-
--brand-500: #6f3dfa;
8476
--brand-secondary: #33b4ff;
8577
--brand-tertiary: #22c55e;
86-
--brand-tertiary-2: #33c482;
78+
--brand-tertiary-2: #32bd7e;
8779
--warning: #ea580c;
8880

8981
/* Utility */
9082
--white: #ffffff;
9183

92-
/* Font weights - lighter for light mode (-20 from dark) */
84+
/* Font weights - lighter for light mode */
9385
--font-weight-base: 430;
9486
--font-weight-medium: 450;
9587
--font-weight-semibold: 500;
9688

97-
/* RGB for opacity usage - neutral grays */
98-
--surface-4-rgb: 255 255 255; /* white */
99-
--surface-5-rgb: 248 248 248; /* subtle off-white */
100-
--surface-7-rgb: 255 255 255; /* white */
101-
--surface-9-rgb: 242 242 242; /* active state gray */
102-
--divider-rgb: 235 235 235; /* divider gray */
89+
/* RGB for opacity usage */
90+
--surface-4-rgb: 242 243 240;
91+
--surface-5-rgb: 236 237 232;
92+
--surface-7-rgb: 246 247 244;
93+
--surface-9-rgb: 232 233 228;
94+
--divider-rgb: 232 233 228;
10395
--white-rgb: 255 255 255;
10496
--black-rgb: 0 0 0;
10597

106-
/* Extended palette - neutral grays for Hex-inspired theme */
107-
--c-0D0D0D: #0d0d0d; /* near black */
108-
--c-1A1A1A: #1a1a1a; /* very dark gray */
109-
--c-1F1F1F: #1f1f1f; /* very dark gray */
110-
--c-2A2A2A: #2a2a2a; /* dark gray */
111-
--c-383838: #383838; /* dark gray */
112-
--c-414141: #414141; /* medium-dark gray */
98+
/* Extended palette */
99+
--c-0D0D0D: #0d0d0d;
100+
--c-1A1A1A: #1a1a1a;
101+
--c-1F1F1F: #1f1f1f;
102+
--c-2A2A2A: #2a2a2a;
103+
--c-383838: #383838;
104+
--c-414141: #414141;
113105
--c-442929: #442929;
114106
--c-491515: #491515;
115-
--c-575757: #575757; /* medium gray */
116-
--c-686868: #686868; /* medium gray */
117-
--c-707070: #707070; /* medium gray */
118-
--c-727272: #727272; /* medium gray */
119-
--c-737373: #737373; /* medium gray */
120-
--c-808080: #808080; /* gray */
121-
--c-858585: #858585; /* gray */
122-
--c-868686: #868686; /* gray */
123-
--c-8D8D8D: #8d8d8d; /* gray */
124-
--c-939393: #939393; /* gray */
125-
--c-A8A8A8: #a8a8a8; /* light gray */
126-
--c-B8B8B8: #b8b8b8; /* light gray */
127-
--c-C0C0C0: #c0c0c0; /* light gray */
128-
--c-CDCDCD: #cdcdcd; /* light gray */
129-
--c-D0D0D0: #d0d0d0; /* light gray */
130-
--c-D2D2D2: #d2d2d2; /* light gray */
131-
--c-E0E0E0: #e0e0e0; /* very light gray */
132-
--c-E5E5E5: #e5e5e5; /* very light gray */
133-
--c-E8E8E8: #e8e8e8; /* very light gray */
134-
--c-EEEEEE: #eeeeee; /* near white */
135-
--c-F0F0F0: #f0f0f0; /* near white */
136-
--c-F4F4F4: #f4f4f4; /* near white */
137-
--c-F5F5F5: #f5f5f5; /* near white */
107+
--c-575757: #575757;
108+
--c-686868: #686868;
109+
--c-707070: #707070;
110+
--c-727272: #727272;
111+
--c-737373: #737373;
112+
--c-808080: #808080;
113+
--c-858585: #858585;
114+
--c-868686: #868686;
115+
--c-8D8D8D: #8d8d8d;
116+
--c-939393: #939393;
117+
--c-A8A8A8: #a8a8a8;
118+
--c-B8B8B8: #b8b8b8;
119+
--c-C0C0C0: #c0c0c0;
120+
--c-CDCDCD: #cdcdcd;
121+
--c-D0D0D0: #d0d0d0;
122+
--c-D2D2D2: #d2d2d2;
123+
--c-E0E0E0: #e0e0e0;
124+
--c-E5E5E5: #e5e5e5;
125+
--c-E8E8E8: #e8e8e8;
126+
--c-EEEEEE: #eeeeee;
127+
--c-F0F0F0: #f0f0f0;
128+
--c-F4F4F4: #f4f4f4;
129+
--c-F5F5F5: #f5f5f5;
138130

139131
/* Blues and cyans */
140132
--c-00B0B0: #00b0b0;
@@ -168,29 +160,24 @@
168160
/* Terminal status badges */
169161
--terminal-status-error-bg: #feeeee;
170162
--terminal-status-error-border: #f87171;
171-
--terminal-status-info-bg: #f5f5f4; /* stone-100 */
172-
--terminal-status-info-border: #a8a29e; /* stone-400 */
173-
--terminal-status-info-color: #57534e; /* stone-600 */
163+
--terminal-status-info-bg: #f5f5f4;
164+
--terminal-status-info-border: #a8a29e;
165+
--terminal-status-info-color: #57534e;
174166
--terminal-status-warning-bg: #fef9e7;
175167
--terminal-status-warning-border: #f5c842;
176168
--terminal-status-warning-color: #a16207;
177169
}
178170
.dark {
179171
/* Surface */
180-
--surface-0: #1b1b1b;
172+
--bg: #1b1b1b;
181173
--surface-1: #1e1e1e;
182174
--surface-2: #232323;
183175
--surface-3: #242424;
184176
--surface-4: #292929;
185177
--border: #2c2c2c;
186178
--surface-5: #363636;
187179
--border-1: #3d3d3d;
188-
--surface-12: #454545;
189-
--surface-13: #454545;
190-
--surface-14: #4a4a4a;
191-
--surface-15: #5a5a5a;
192-
--surface-elevated: #202020;
193-
--bg-strong: #0c0c0c;
180+
--surface-6: #454545;
194181

195182
/* Text */
196183
--text-primary: #e6e6e6;
@@ -201,8 +188,6 @@
201188
--text-inverse: #1b1b1b;
202189
--text-error: #ef4444;
203190

204-
/* Borders / dividers */
205-
206191
/* --border-strong: #303030; */
207192
--divider: #393939;
208193
--border-muted: #424242;
@@ -212,7 +197,7 @@
212197
--brand-400: #8e4cfb;
213198
--brand-secondary: #33b4ff;
214199
--brand-tertiary: #22c55e;
215-
--brand-tertiary-2: #33c482;
200+
--brand-tertiary-2: #32bd7e;
216201
--warning: #ff6600;
217202

218203
/* Utility */
@@ -323,7 +308,7 @@
323308
}
324309

325310
body {
326-
background-color: var(--surface-0);
311+
background-color: var(--bg);
327312
color: var(--text-primary);
328313
overscroll-behavior-x: none;
329314
overscroll-behavior-y: none;
@@ -359,12 +344,12 @@
359344
}
360345

361346
::-webkit-scrollbar-thumb {
362-
background-color: var(--surface-12);
347+
background-color: var(--surface-6);
363348
border-radius: var(--radius);
364349
}
365350

366351
::-webkit-scrollbar-thumb:hover {
367-
background-color: var(--surface-13);
352+
background-color: var(--surface-6);
368353
}
369354

370355
/* Dark Mode Global Scrollbar */
@@ -373,20 +358,20 @@
373358
}
374359

375360
.dark ::-webkit-scrollbar-thumb {
376-
background-color: var(--surface-12);
361+
background-color: var(--surface-6);
377362
}
378363

379364
.dark ::-webkit-scrollbar-thumb:hover {
380-
background-color: var(--surface-13);
365+
background-color: var(--surface-6);
381366
}
382367

383368
* {
384369
scrollbar-width: thin;
385-
scrollbar-color: var(--surface-12) var(--surface-1);
370+
scrollbar-color: var(--surface-6) var(--surface-1);
386371
}
387372

388373
.dark * {
389-
scrollbar-color: var(--surface-12) var(--surface-4);
374+
scrollbar-color: var(--surface-6) var(--surface-4);
390375
}
391376

392377
.copilot-scrollable {
@@ -402,8 +387,8 @@
402387
}
403388

404389
.panel-tab-active {
405-
background-color: var(--white);
406-
color: var(--text-inverse);
390+
background-color: var(--surface-5);
391+
color: var(--text-primary);
407392
border-color: var(--border-muted);
408393
}
409394

‎apps/sim/app/playground/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ export default function PlaygroundPage() {
120120

121121
return (
122122
<Tooltip.Provider>
123-
<div className='relative min-h-screen bg-[var(--surface-0)] p-8'>
123+
<div className='relative min-h-screen bg-[var(--bg)] p-8'>
124124
<Tooltip.Root>
125125
<Tooltip.Trigger asChild>
126126
<Button

‎apps/sim/app/templates/[id]/template.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -832,7 +832,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
832832
/>
833833
</div>
834834
) : (
835-
<div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--surface-elevated)]'>
835+
<div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--surface-2)]'>
836836
<User className='h-[14px] w-[14px] text-[var(--text-muted)]' />
837837
</div>
838838
)}
@@ -873,7 +873,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
873873

874874
{/* Last updated overlay */}
875875
{template.updatedAt && (
876-
<div className='pointer-events-none absolute right-[12px] bottom-[12px] rounded-[4px] bg-[var(--surface-0)]/80 px-[8px] py-[4px] backdrop-blur-sm'>
876+
<div className='pointer-events-none absolute right-[12px] bottom-[12px] rounded-[4px] bg-[var(--bg)]/80 px-[8px] py-[4px] backdrop-blur-sm'>
877877
<span className='font-medium text-[12px] text-[var(--text-muted)]'>
878878
Last updated{' '}
879879
{formatDistanceToNow(new Date(template.updatedAt), {
@@ -1001,7 +1001,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
10011001
/>
10021002
</div>
10031003
) : (
1004-
<div className='flex h-[48px] w-[48px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--surface-elevated)]'>
1004+
<div className='flex h-[48px] w-[48px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--surface-2)]'>
10051005
<User className='h-[24px] w-[24px] text-[var(--text-muted)]' />
10061006
</div>
10071007
)}

0 commit comments

Comments
 (0)