Skip to content

Commit ae397c3

Browse files
emir-karabegemir-karabeg
committed
feat: styling consolidation, note block upgrades
1 parent bf144a5 commit ae397c3

File tree

83 files changed

+450
-581
lines changed

Some content is hidden

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

83 files changed

+450
-581
lines changed

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

Lines changed: 76 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -26,41 +26,6 @@
2626
height: var(--terminal-height);
2727
}
2828

29-
/**
30-
* Workflow component z-index fixes and background colors
31-
*/
32-
.workflow-container .react-flow__edges {
33-
z-index: 0 !important;
34-
}
35-
36-
.workflow-container .react-flow__node {
37-
z-index: 21 !important;
38-
}
39-
40-
.workflow-container .react-flow__handle {
41-
z-index: 30 !important;
42-
}
43-
44-
.workflow-container .react-flow__edge [data-testid="workflow-edge"] {
45-
z-index: 0 !important;
46-
}
47-
48-
.workflow-container .react-flow__edge-labels {
49-
z-index: 60 !important;
50-
}
51-
52-
.workflow-container,
53-
.workflow-container .react-flow__pane,
54-
.workflow-container .react-flow__renderer {
55-
background-color: var(--bg) !important;
56-
}
57-
58-
.dark .workflow-container,
59-
.dark .workflow-container .react-flow__pane,
60-
.dark .workflow-container .react-flow__renderer {
61-
background-color: var(--bg) !important;
62-
}
63-
6429
/**
6530
* Landing loop animation styles (keyframes defined in tailwind.config.ts)
6631
*/
@@ -80,38 +45,38 @@
8045
@layer base {
8146
:root,
8247
.light {
83-
/* Neutrals (surfaces) - shadcn stone palette */
84-
--bg: #ffffff; /* pure white for landing/auth pages */
85-
--surface-1: #fafaf9; /* stone-50 */
86-
--surface-2: #ffffff; /* white */
87-
--surface-3: #f5f5f4; /* stone-100 */
88-
--surface-4: #f5f5f4; /* stone-100 */
89-
--surface-5: #eeedec; /* stone-150 */
90-
--surface-6: #f5f5f4; /* stone-100 */
91-
--surface-9: #f5f5f4; /* stone-100 */
92-
--surface-11: #e7e5e4; /* stone-200 */
93-
--surface-12: #d6d3d1; /* stone-300 */
94-
--surface-13: #a8a29e; /* stone-400 */
95-
--surface-14: #78716c; /* stone-500 */
96-
--surface-15: #57534e; /* stone-600 */
97-
--surface-elevated: #ffffff; /* white */
98-
--bg-strong: #e7e5e4; /* stone-200 */
99-
100-
/* Text - shadcn stone palette for proper contrast */
101-
--text-primary: #1c1917; /* stone-900 */
102-
--text-secondary: #292524; /* stone-800 */
103-
--text-tertiary: #57534e; /* stone-600 */
104-
--text-muted: #78716c; /* stone-500 */
105-
--text-subtle: #a8a29e; /* stone-400 */
106-
--text-inverse: #fafaf9; /* stone-50 */
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 */
10772
--text-error: #dc2626;
10873

109-
/* Borders / dividers - shadcn stone palette */
110-
--border: #d6d3d1; /* stone-300 */
111-
--border-strong: #d6d3d1; /* stone-300 */
112-
--divider: #e7e5e4; /* stone-200 */
113-
--border-muted: #e7e5e4; /* stone-200 */
114-
--border-success: #d6d3d1; /* stone-300 */
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 */
11580

11681
/* Brand & state */
11782
--brand-400: #8e4cfb;
@@ -129,47 +94,47 @@
12994
--font-weight-medium: 450;
13095
--font-weight-semibold: 500;
13196

132-
/* RGB for opacity usage - stone palette */
133-
--surface-4-rgb: 245 245 244; /* stone-100 */
134-
--surface-5-rgb: 238 237 236; /* stone-150 */
135-
--surface-7-rgb: 245 245 244; /* stone-100 */
136-
--surface-9-rgb: 245 245 244; /* stone-100 */
137-
--divider-rgb: 231 229 228; /* stone-200 */
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 */
138103
--white-rgb: 255 255 255;
139104
--black-rgb: 0 0 0;
140105

141-
/* Extended palette - mapped to shadcn stone palette */
142-
--c-0D0D0D: #0c0a09; /* stone-950 */
143-
--c-1A1A1A: #1c1917; /* stone-900 */
144-
--c-1F1F1F: #1c1917; /* stone-900 */
145-
--c-2A2A2A: #292524; /* stone-800 */
146-
--c-383838: #44403c; /* stone-700 */
147-
--c-414141: #57534e; /* stone-600 */
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 */
148113
--c-442929: #442929;
149114
--c-491515: #491515;
150-
--c-575757: #78716c; /* stone-500 */
151-
--c-686868: #78716c; /* stone-500 */
152-
--c-707070: #78716c; /* stone-500 */
153-
--c-727272: #78716c; /* stone-500 */
154-
--c-737373: #78716c; /* stone-500 */
155-
--c-808080: #a8a29e; /* stone-400 */
156-
--c-858585: #a8a29e; /* stone-400 */
157-
--c-868686: #a8a29e; /* stone-400 */
158-
--c-8D8D8D: #a8a29e; /* stone-400 */
159-
--c-939393: #a8a29e; /* stone-400 */
160-
--c-A8A8A8: #a8a29e; /* stone-400 */
161-
--c-B8B8B8: #d6d3d1; /* stone-300 */
162-
--c-C0C0C0: #d6d3d1; /* stone-300 */
163-
--c-CDCDCD: #d6d3d1; /* stone-300 */
164-
--c-D0D0D0: #d6d3d1; /* stone-300 */
165-
--c-D2D2D2: #d6d3d1; /* stone-300 */
166-
--c-E0E0E0: #e7e5e4; /* stone-200 */
167-
--c-E5E5E5: #e7e5e4; /* stone-200 */
168-
--c-E8E8E8: #e7e5e4; /* stone-200 */
169-
--c-EEEEEE: #f5f5f4; /* stone-100 */
170-
--c-F0F0F0: #f5f5f4; /* stone-100 */
171-
--c-F4F4F4: #fafaf9; /* stone-50 */
172-
--c-F5F5F5: #fafaf9; /* stone-50 */
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 */
173138

174139
/* Blues and cyans */
175140
--c-00B0B0: #00b0b0;
@@ -211,15 +176,14 @@
211176
--terminal-status-warning-color: #a16207;
212177
}
213178
.dark {
214-
/* Neutrals (surfaces) */
215-
--bg: #1b1b1b;
179+
/* Surface */
180+
--surface-0: #1b1b1b;
216181
--surface-1: #1e1e1e;
217182
--surface-2: #232323;
218183
--surface-3: #242424;
219-
--surface-4: #252525;
220-
--surface-5: #272727;
221-
--surface-6: #282828;
222-
--surface-9: #363636;
184+
--surface-4: #272727;
185+
--border: #2c2c2c;
186+
--surface-5: #363636;
223187
--surface-11: #3d3d3d;
224188
--surface-12: #434343;
225189
--surface-13: #454545;
@@ -238,7 +202,7 @@
238202
--text-error: #ef4444;
239203

240204
/* Borders / dividers */
241-
--border: #2c2c2c;
205+
242206
--border-strong: #303030;
243207
--divider: #393939;
244208
--border-muted: #424242;
@@ -359,7 +323,7 @@
359323
}
360324

361325
body {
362-
background-color: var(--bg);
326+
background-color: var(--surface-0);
363327
color: var(--text-primary);
364328
overscroll-behavior-x: none;
365329
overscroll-behavior-y: none;
@@ -405,7 +369,7 @@
405369

406370
/* Dark Mode Global Scrollbar */
407371
.dark ::-webkit-scrollbar-track {
408-
background: var(--surface-5);
372+
background: var(--surface-4);
409373
}
410374

411375
.dark ::-webkit-scrollbar-thumb {
@@ -422,7 +386,7 @@
422386
}
423387

424388
.dark * {
425-
scrollbar-color: var(--surface-12) var(--surface-5);
389+
scrollbar-color: var(--surface-12) var(--surface-4);
426390
}
427391

428392
.copilot-scrollable {
@@ -450,7 +414,7 @@
450414
}
451415

452416
.panel-tab-inactive:hover {
453-
background-color: var(--surface-9);
417+
background-color: var(--surface-5);
454418
color: var(--text-primary);
455419
}
456420

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

Lines changed: 2 additions & 2 deletions
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(--bg)] p-8'>
123+
<div className='relative min-h-screen bg-[var(--surface-0)] p-8'>
124124
<Tooltip.Root>
125125
<Tooltip.Trigger asChild>
126126
<Button
@@ -550,7 +550,7 @@ export default function PlaygroundPage() {
550550
].map(({ Icon, name }) => (
551551
<Tooltip.Root key={name}>
552552
<Tooltip.Trigger asChild>
553-
<div className='flex h-10 w-10 cursor-pointer items-center justify-center rounded-md border border-[var(--border)] bg-[var(--surface-2)] transition-colors hover:bg-[var(--surface-5)]'>
553+
<div className='flex h-10 w-10 cursor-pointer items-center justify-center rounded-md border border-[var(--border)] bg-[var(--surface-2)] transition-colors hover:bg-[var(--surface-4)]'>
554554
<Icon className='h-5 w-5 text-[var(--text-secondary)]' />
555555
</div>
556556
</Tooltip.Trigger>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -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(--bg)]/80 px-[8px] py-[4px] backdrop-blur-sm'>
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'>
877877
<span className='font-medium text-[12px] text-[var(--text-muted)]'>
878878
Last updated{' '}
879879
{formatDistanceToNow(new Date(template.updatedAt), {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ interface TemplateCardProps {
2727

2828
export function TemplateCardSkeleton({ className }: { className?: string }) {
2929
return (
30-
<div className={cn('h-[268px] w-full rounded-[8px] bg-[#202020] p-[8px]', className)}>
30+
<div className={cn('h-[268px] w-full rounded-[8px] bg-[var(--surface-2)] p-[8px]', className)}>
3131
<div className='h-[180px] w-full animate-pulse rounded-[6px] bg-gray-700' />
3232
<div className='mt-[14px] flex items-center justify-between'>
3333
<div className='h-4 w-32 animate-pulse rounded bg-gray-700' />
@@ -195,7 +195,7 @@ function TemplateCardInner({
195195
return (
196196
<div
197197
onClick={handleCardClick}
198-
className={cn('w-full cursor-pointer rounded-[8px] bg-[#202020] p-[8px]', className)}
198+
className={cn('w-full cursor-pointer rounded-[8px] bg-[var(--surface-2)] p-[8px]', className)}
199199
>
200200
<div
201201
ref={previewRef}

‎apps/sim/app/templates/templates.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ export default function Templates({
149149
</div>
150150

151151
<div className='mt-[14px] flex items-center justify-between'>
152-
<div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-5)] px-[8px]'>
152+
<div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-4)] px-[8px]'>
153153
<Search className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
154154
<Input
155155
placeholder='Search'

‎apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -234,7 +234,7 @@ function DocumentLoading({
234234
</div>
235235

236236
<div className='mt-[14px] flex items-center justify-between'>
237-
<div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-5)] px-[8px]'>
237+
<div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-4)] px-[8px]'>
238238
<Search className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
239239
<Input
240240
placeholder='Search chunks...'
@@ -851,7 +851,7 @@ export function Document({
851851
</div>
852852

853853
<div className='mt-[14px] flex items-center justify-between'>
854-
<div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-5)] px-[8px]'>
854+
<div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-4)] px-[8px]'>
855855
<Search className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
856856
<Input
857857
placeholder={

‎apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@ function KnowledgeBaseLoading({ knowledgeBaseName }: KnowledgeBaseLoadingProps)
185185
</div>
186186

187187
<div className='mt-[14px] flex items-center justify-between'>
188-
<div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-5)] px-[8px]'>
188+
<div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-4)] px-[8px]'>
189189
<Search className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
190190
<Input
191191
placeholder='Search documents...'
@@ -973,7 +973,7 @@ export function KnowledgeBase({
973973
</div>
974974

975975
<div className='mt-[14px] flex items-center justify-between'>
976-
<div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-5)] px-[8px]'>
976+
<div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-4)] px-[8px]'>
977977
<Search className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
978978
<Input
979979
placeholder='Search documents...'

0 commit comments

Comments
 (0)