Skip to content

Commit 8ba241d

Browse files
emir-karabegemir-karabeg
committed
improvement(ui): light styling
1 parent 853c755 commit 8ba241d

File tree

36 files changed

+100
-112
lines changed

36 files changed

+100
-112
lines changed

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

Lines changed: 24 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -47,24 +47,27 @@
4747
@layer base {
4848
:root,
4949
.light {
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 */
50+
--bg: #f9faf8; /* main canvas - near white */
51+
--surface-1: #f9faf8; /* sidebar, panels - light warm gray */
52+
--surface-2: #fdfdfb; /* blocks, cards, modals - soft warm white */
53+
--surface-3: #f4f5f1; /* popovers, headers - more contrast */
54+
--surface-4: #f2f3ef; /* buttons base */
55+
--border: #d7dcda; /* primary border */
56+
--surface-5: #f0f1ed; /* inputs, form elements - subtle */
5757
--border-1: #d7dcda; /* stronger border - sage gray */
58-
--surface-6: #d7dcda; /* scroll thumbs, active states */
58+
--surface-6: #eceee9; /* popovers, elevated surfaces */
59+
--surface-7: #e8e9e4;
60+
61+
--workflow-edge: #d7dcda; /* workflow handles/edges - matches border-1 */
5962

6063
/* Text - warm neutrals */
61-
--text-primary: #1a1a1a;
62-
--text-secondary: #2d2d2d;
63-
--text-tertiary: #525252;
64+
--text-primary: #2d2d2d;
65+
--text-secondary: #404040;
66+
--text-tertiary: #5c5c5c;
6467
--text-muted: #737373;
6568
--text-subtle: #8c8c8c;
6669
--text-inverse: #f0fff6;
67-
--text-error: #dc2626;
70+
--text-error: #ef4444;
6871

6972
/* Borders / dividers */
7073
--divider: #e8e9e4;
@@ -86,15 +89,6 @@
8689
--font-weight-medium: 450;
8790
--font-weight-semibold: 500;
8891

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;
95-
--white-rgb: 255 255 255;
96-
--black-rgb: 0 0 0;
97-
9892
/* Extended palette */
9993
--c-0D0D0D: #0d0d0d;
10094
--c-1A1A1A: #1a1a1a;
@@ -178,6 +172,9 @@
178172
--surface-5: #363636;
179173
--border-1: #3d3d3d;
180174
--surface-6: #454545;
175+
--surface-7: #454545;
176+
177+
--workflow-edge: #454545; /* workflow handles/edges - same as surface-6 in dark */
181178

182179
/* Text */
183180
--text-primary: #e6e6e6;
@@ -208,15 +205,6 @@
208205
--font-weight-medium: 480;
209206
--font-weight-semibold: 550;
210207

211-
/* RGB for opacity usage */
212-
--surface-4-rgb: 41 41 41;
213-
--surface-5-rgb: 39 39 39;
214-
--surface-7-rgb: 44 44 44;
215-
--surface-9-rgb: 54 54 54;
216-
--divider-rgb: 57 57 57;
217-
--white-rgb: 255 255 255;
218-
--black-rgb: 0 0 0;
219-
220208
/* Extended palette (exhaustive from code usage via -[#...]) */
221209
/* Neutral deep shades */
222210
--c-0D0D0D: #0d0d0d;
@@ -344,12 +332,12 @@
344332
}
345333

346334
::-webkit-scrollbar-thumb {
347-
background-color: var(--surface-6);
335+
background-color: var(--surface-7);
348336
border-radius: var(--radius);
349337
}
350338

351339
::-webkit-scrollbar-thumb:hover {
352-
background-color: var(--surface-6);
340+
background-color: var(--surface-7);
353341
}
354342

355343
/* Dark Mode Global Scrollbar */
@@ -358,20 +346,20 @@
358346
}
359347

360348
.dark ::-webkit-scrollbar-thumb {
361-
background-color: var(--surface-6);
349+
background-color: var(--surface-7);
362350
}
363351

364352
.dark ::-webkit-scrollbar-thumb:hover {
365-
background-color: var(--surface-6);
353+
background-color: var(--surface-7);
366354
}
367355

368356
* {
369357
scrollbar-width: thin;
370-
scrollbar-color: var(--surface-6) var(--surface-1);
358+
scrollbar-color: var(--surface-7) var(--surface-1);
371359
}
372360

373361
.dark * {
374-
scrollbar-color: var(--surface-6) var(--surface-4);
362+
scrollbar-color: var(--surface-7) var(--surface-4);
375363
}
376364

377365
.copilot-scrollable {

‎apps/sim/app/templates/components/template-card.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -243,7 +243,7 @@ function TemplateCardInner({
243243
)
244244
})}
245245
<div
246-
className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px] bg-[var(--surface-6)]'
246+
className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px] bg-[var(--surface-7)]'
247247
style={{ marginLeft: '-4px' }}
248248
>
249249
<span className='font-medium text-[10px] text-[var(--text-primary)]'>
@@ -280,7 +280,7 @@ function TemplateCardInner({
280280
<img src={authorImageUrl} alt={author} className='h-full w-full object-cover' />
281281
</div>
282282
) : (
283-
<div className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--surface-6)]'>
283+
<div className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--surface-7)]'>
284284
<User className='h-[12px] w-[12px] text-[var(--text-muted)]' />
285285
</div>
286286
)}

‎apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,8 @@ export function WorkflowsList({
6666
<div
6767
key={workflow.workflowId}
6868
className={cn(
69-
'flex h-[44px] cursor-pointer items-center gap-[16px] px-[24px] hover:bg-[var(--surface-4)]',
70-
isSelected && 'bg-[var(--surface-4)]'
69+
'flex h-[44px] cursor-pointer items-center gap-[16px] px-[24px] hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-4)]',
70+
isSelected && 'bg-[var(--surface-6)] dark:bg-[var(--surface-4)]'
7171
)}
7272
onClick={() => onToggleWorkflow(workflow.workflowId)}
7373
>

‎apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -253,7 +253,7 @@ function TemplateCardInner({
253253
)
254254
})}
255255
<div
256-
className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px] bg-[var(--surface-6)]'
256+
className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px] bg-[var(--surface-7)]'
257257
style={{ marginLeft: '-4px' }}
258258
>
259259
<span className='font-medium text-[10px] text-[var(--text-primary)]'>
@@ -290,7 +290,7 @@ function TemplateCardInner({
290290
<img src={authorImageUrl} alt={author} className='h-full w-full object-cover' />
291291
</div>
292292
) : (
293-
<div className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--surface-6)]'>
293+
<div className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--surface-7)]'>
294294
<User className='h-[12px] w-[12px] text-[var(--text-tertiary)]' />
295295
</div>
296296
)}

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -319,7 +319,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
319319
onClick={handleMessageClick}
320320
onMouseEnter={() => setIsHoveringMessage(true)}
321321
onMouseLeave={() => setIsHoveringMessage(false)}
322-
className='group relative w-full cursor-pointer rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[6px] py-[6px] transition-all duration-200 hover:border-[var(--surface-6)] hover:bg-[var(--surface-5)] dark:bg-[var(--surface-5)] dark:hover:border-[var(--surface-6)] dark:hover:bg-[var(--border-1)]'
322+
className='group relative w-full cursor-pointer rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[6px] py-[6px] transition-all duration-200 hover:border-[var(--surface-7)] hover:bg-[var(--surface-5)] dark:bg-[var(--surface-5)] dark:hover:border-[var(--surface-7)] dark:hover:bg-[var(--border-1)]'
323323
>
324324
<div
325325
ref={messageContentRef}

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const logger = createLogger('Versions')
1212

1313
/** Shared styling constants aligned with terminal component */
1414
const HEADER_TEXT_CLASS = 'font-medium text-[var(--text-tertiary)] text-[12px]'
15-
const ROW_TEXT_CLASS = 'font-medium text-[#D2D2D2] text-[12px]'
15+
const ROW_TEXT_CLASS = 'font-medium text-[var(--text-primary)] text-[12px]'
1616
const COLUMN_BASE_CLASS = 'flex-shrink-0'
1717

1818
/** Column width configuration */
@@ -220,10 +220,10 @@ export function Versions({
220220
<div
221221
key={v.id}
222222
className={clsx(
223-
'flex h-[36px] cursor-pointer items-center px-[16px] transition-colors',
223+
'flex h-[36px] cursor-pointer items-center px-[16px] transition-colors duration-100',
224224
isSelected
225225
? 'bg-[var(--accent)]/10 hover:bg-[var(--accent)]/15'
226-
: 'hover:bg-[var(--border)]'
226+
: 'hover:bg-[var(--surface-6)] dark:hover:bg-[var(--border)]'
227227
)}
228228
onClick={() => handleRowClick(v.version)}
229229
>

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export function FieldItem({
7878
onDragStart={handleDragStart}
7979
onClick={handleClick}
8080
className={clsx(
81-
'group flex h-[26px] cursor-grab items-center gap-[8px] rounded-[8px] px-[6px] text-[14px] hover:bg-[var(--surface-5)] active:cursor-grabbing',
81+
'group flex h-[26px] cursor-grab items-center gap-[8px] rounded-[8px] px-[6px] text-[14px] hover:bg-[var(--surface-6)] active:cursor-grabbing dark:hover:bg-[var(--surface-5)]',
8282
hasChildren && 'cursor-pointer'
8383
)}
8484
>

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ function ConnectionItem({
8585
draggable
8686
onDragStart={(e) => onConnectionDragStart(e, connection)}
8787
className={clsx(
88-
'group flex h-[26px] cursor-grab items-center gap-[8px] rounded-[8px] px-[6px] text-[14px] hover:bg-[var(--surface-5)] active:cursor-grabbing',
88+
'group flex h-[26px] cursor-grab items-center gap-[8px] rounded-[8px] px-[6px] text-[14px] hover:bg-[var(--surface-6)] active:cursor-grabbing dark:hover:bg-[var(--surface-5)]',
8989
hasFields && 'cursor-pointer'
9090
)}
9191
onClick={() => hasFields && onToggleExpand(connection.id)}

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -420,7 +420,7 @@ export function FileUpload({
420420
return (
421421
<div
422422
key={fileKey}
423-
className='flex items-center justify-between rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] hover:border-[var(--surface-6)] hover:bg-[var(--surface-5)] dark:bg-[var(--surface-5)] dark:hover:bg-[var(--border-1)]'
423+
className='flex items-center justify-between rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] hover:border-[var(--surface-7)] hover:bg-[var(--surface-5)] dark:bg-[var(--surface-5)] dark:hover:bg-[var(--border-1)]'
424424
>
425425
<div className='flex-1 truncate pr-2 text-sm' title={file.name}>
426426
<span className='text-[var(--text-primary)]'>{truncateMiddle(file.name)}</span>

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ export function GroupedCheckboxList({
108108
disabled={disabled}
109109
className={cn(
110110
'flex w-full cursor-pointer items-center justify-between rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] font-medium font-sans text-[var(--text-primary)] text-sm outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-[var(--surface-5)]',
111-
'hover:border-[var(--surface-6)] hover:bg-[var(--surface-5)] dark:hover:border-[var(--surface-6)] dark:hover:bg-[var(--border-1)]'
111+
'hover:border-[var(--surface-7)] hover:bg-[var(--surface-5)] dark:hover:border-[var(--surface-7)] dark:hover:bg-[var(--border-1)]'
112112
)}
113113
>
114114
<span className='flex flex-1 items-center gap-2 truncate text-[var(--text-muted)]'>

0 commit comments

Comments
 (0)