From 1c626dfcae15358714a0becde0b94ece33d3b311 Mon Sep 17 00:00:00 2001 From: Emir Karabeg <78010029+emir-karabeg@users.noreply.github.com> Date: Sun, 28 Dec 2025 13:28:36 -0800 Subject: [PATCH] improvement(globals): light colors (#2620) * improvement(globals): light colors * improvement(ui): logs, templates, kb, light globals * improvement(subflows): start node and ui/ux --- apps/sim/app/_styles/globals.css | 44 +++++++++---------- apps/sim/app/templates/[id]/template.tsx | 4 +- .../knowledge/[id]/[documentId]/document.tsx | 6 +-- .../[workspaceId]/knowledge/[id]/base.tsx | 6 +-- .../components/base-card/base-card.tsx | 18 ++++---- .../[workspaceId]/knowledge/knowledge.tsx | 2 +- .../[workspaceId]/knowledge/layout.tsx | 6 ++- .../workflows-list/workflows-list.tsx | 8 ++-- .../logs/components/dashboard/dashboard.tsx | 28 ++++++------ .../logs/components/logs-list/logs-list.tsx | 4 +- .../logs-toolbar/components/search/search.tsx | 4 +- .../workspace/[workspaceId]/logs/layout.tsx | 6 ++- .../app/workspace/[workspaceId]/logs/logs.tsx | 6 +-- .../templates/components/template-card.tsx | 24 +++++----- .../[workspaceId]/templates/layout.tsx | 6 ++- .../[workspaceId]/templates/templates.tsx | 2 +- .../components/subflows/subflow-node.tsx | 9 ++-- .../workflow-preview-subflow.tsx | 22 +++++----- 18 files changed, 109 insertions(+), 96 deletions(-) diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css index 96a17260c..dccad450f 100644 --- a/apps/sim/app/_styles/globals.css +++ b/apps/sim/app/_styles/globals.css @@ -47,32 +47,32 @@ @layer base { :root, .light { - --bg: #f9faf8; /* main canvas - near white */ - --surface-1: #f9faf8; /* sidebar, panels - light warm gray */ - --surface-2: #fdfdfb; /* blocks, cards, modals - soft warm white */ - --surface-3: #f4f5f1; /* popovers, headers - more contrast */ - --surface-4: #f2f3ef; /* buttons base */ - --border: #d7dcda; /* primary border */ - --surface-5: #f0f1ed; /* inputs, form elements - subtle */ - --border-1: #d7dcda; /* stronger border - sage gray */ - --surface-6: #eceee9; /* popovers, elevated surfaces */ - --surface-7: #e8e9e4; + --bg: #fdfdfd; /* main canvas - neutral near-white */ + --surface-1: #fcfcfc; /* sidebar, panels */ + --surface-2: #ffffff; /* blocks, cards, modals - pure white */ + --surface-3: #f7f7f7; /* popovers, headers */ + --surface-4: #f5f5f5; /* buttons base */ + --border: #e0e0e0; /* primary border */ + --surface-5: #f3f3f3; /* inputs, form elements */ + --border-1: #e0e0e0; /* stronger border */ + --surface-6: #f0f0f0; /* popovers, elevated surfaces */ + --surface-7: #ececec; - --workflow-edge: #d7dcda; /* workflow handles/edges - matches border-1 */ + --workflow-edge: #e0e0e0; /* workflow handles/edges - matches border-1 */ - /* Text - warm neutrals */ + /* Text - neutral */ --text-primary: #2d2d2d; --text-secondary: #404040; --text-tertiary: #5c5c5c; --text-muted: #737373; --text-subtle: #8c8c8c; - --text-inverse: #f0fff6; + --text-inverse: #ffffff; --text-error: #ef4444; /* Borders / dividers */ - --divider: #e8e9e4; - --border-muted: #dfe0db; - --border-success: #d7dcda; + --divider: #ededed; + --border-muted: #e4e4e4; + --border-success: #e0e0e0; /* Brand & state */ --brand-400: #8e4cfb; @@ -152,13 +152,13 @@ --c-883827: #7c2d12; /* Terminal status badges */ - --terminal-status-error-bg: #feeeee; + --terminal-status-error-bg: #fef2f2; --terminal-status-error-border: #f87171; - --terminal-status-info-bg: #f5f5f4; - --terminal-status-info-border: #a8a29e; - --terminal-status-info-color: #57534e; - --terminal-status-warning-bg: #fef9e7; - --terminal-status-warning-border: #f5c842; + --terminal-status-info-bg: #f7f7f7; + --terminal-status-info-border: #a3a3a3; + --terminal-status-info-color: #525252; + --terminal-status-warning-bg: #fefce8; + --terminal-status-warning-border: #facc15; --terminal-status-warning-color: #a16207; } .dark { diff --git a/apps/sim/app/templates/[id]/template.tsx b/apps/sim/app/templates/[id]/template.tsx index 9619bcb55..55752a553 100644 --- a/apps/sim/app/templates/[id]/template.tsx +++ b/apps/sim/app/templates/[id]/template.tsx @@ -68,7 +68,7 @@ function TemplateDetailsLoading({ isWorkspaceContext, workspaceId }: TemplateDet
{/* Breadcrumb navigation */} @@ -638,7 +638,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
{/* Breadcrumb navigation */} diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx index 7b2d278cd..69d726c02 100644 --- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx +++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx @@ -212,7 +212,7 @@ function DocumentLoading({ return (
-
+
@@ -234,7 +234,7 @@ function DocumentLoading({
-
+
-
+
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx index 8274a9dd3..0d1cf5d1e 100644 --- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx +++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx @@ -171,7 +171,7 @@ function KnowledgeBaseLoading({ knowledgeBaseName }: KnowledgeBaseLoadingProps) return (
-
+
@@ -193,7 +193,7 @@ function KnowledgeBaseLoading({ knowledgeBaseName }: KnowledgeBaseLoadingProps)
-
+
-
+
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/base-card/base-card.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/base-card/base-card.tsx index c643347a5..64782d86b 100644 --- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/base-card/base-card.tsx +++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/base-card/base-card.tsx @@ -67,26 +67,26 @@ function formatAbsoluteDate(dateString: string): string { */ export function BaseCardSkeleton() { return ( -
+
-
-
+
+
-
-
+
+
-
+
-
-
+
+
@@ -122,7 +122,7 @@ export function BaseCard({ id, title, docCount, description, updatedAt }: BaseCa return ( -
+

{title} diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx index 132757e8f..9e68bf536 100644 --- a/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx +++ b/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx @@ -131,7 +131,7 @@ export function Knowledge() { <>
-
+
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/layout.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/layout.tsx index d1d899e55..4283b6f85 100644 --- a/apps/sim/app/workspace/[workspaceId]/knowledge/layout.tsx +++ b/apps/sim/app/workspace/[workspaceId]/knowledge/layout.tsx @@ -2,5 +2,9 @@ * Knowledge Base layout - applies sidebar padding for all knowledge routes. */ export default function KnowledgeLayout({ children }: { children: React.ReactNode }) { - return
{children}
+ return ( +
+ {children} +
+ ) } diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx index 8a9c2ba7e..a78caa79f 100644 --- a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx +++ b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx @@ -35,9 +35,9 @@ export function WorkflowsList({ const { workflows } = useWorkflowRegistry() return ( -
+
{/* Table header */} -
+
Workflow @@ -66,8 +66,8 @@ export function WorkflowsList({
onToggleWorkflow(workflow.workflowId)} > diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx index 5aaafb465..e573b813c 100644 --- a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx +++ b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx @@ -36,14 +36,14 @@ const SKELETON_BAR_HEIGHTS = [ function GraphCardSkeleton({ title }: { title: string }) { return ( -
-
+
+
{title}
-
+
{SKELETON_BAR_HEIGHTS.map((height, i) => ( @@ -81,8 +81,8 @@ function WorkflowRowSkeleton() { function WorkflowsListSkeleton({ rowCount = 5 }: { rowCount?: number }) { return ( -
-
+
+
Workflow @@ -570,8 +570,8 @@ export default function Dashboard({ logs, isLoading, error }: DashboardProps) {
-
-
+
+
Runs @@ -581,7 +581,7 @@ export default function Dashboard({ logs, isLoading, error }: DashboardProps) { )}
-
+
{globalDetails ? (
-
-
+
+
Errors @@ -608,7 +608,7 @@ export default function Dashboard({ logs, isLoading, error }: DashboardProps) { )}
-
+
{globalDetails ? (
-
-
+
+
Latency @@ -635,7 +635,7 @@ export default function Dashboard({ logs, isLoading, error }: DashboardProps) { )}
-
+
{globalDetails ? ( diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx index 2569d6c5f..f4964ad44 100644 --- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx +++ b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx @@ -163,7 +163,7 @@ export function AutocompleteSearch({ }} > -
+
{/* Search Icon */} @@ -179,7 +179,7 @@ export function AutocompleteSearch({ className={cn( 'h-6 shrink-0 cursor-pointer whitespace-nowrap rounded-md px-2 text-[11px]', highlightedBadgeIndex === index && - 'ring-1 ring-[var(--border-focus)] ring-offset-1 ring-offset-[var(--surface-5)]' + 'ring-1 ring-[var(--border-focus)] ring-offset-1 ring-offset-[var(--surface-3)] dark:ring-offset-[var(--surface-5)]' )} onClick={() => removeBadge(index)} onKeyDown={(e) => { diff --git a/apps/sim/app/workspace/[workspaceId]/logs/layout.tsx b/apps/sim/app/workspace/[workspaceId]/logs/layout.tsx index 4247f01e9..ec0a23ca3 100644 --- a/apps/sim/app/workspace/[workspaceId]/logs/layout.tsx +++ b/apps/sim/app/workspace/[workspaceId]/logs/layout.tsx @@ -1,3 +1,7 @@ export default function LogsLayout({ children }: { children: React.ReactNode }) { - return
{children}
+ return ( +
+ {children} +
+ ) } diff --git a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx index b43e0f89e..69f95ac56 100644 --- a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx +++ b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx @@ -344,7 +344,7 @@ export default function Logs() { return (
-
+
{/* Table container */} -
+
{/* Table header */} -
+
Date diff --git a/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx b/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx index 3f080de2d..1b7564922 100644 --- a/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx +++ b/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx @@ -29,19 +29,19 @@ export function TemplateCardSkeleton({ className }: { className?: string }) { return (
-
+
-
+
{Array.from({ length: 3 }).map((_, index) => (
))}
@@ -49,14 +49,14 @@ export function TemplateCardSkeleton({ className }: { className?: string }) {
-
-
+
+
-
-
-
-
+
+
+
+
@@ -202,7 +202,7 @@ function TemplateCardInner({
@@ -223,7 +223,7 @@ function TemplateCardInner({ cursorStyle='pointer' /> ) : ( -
+
)}
diff --git a/apps/sim/app/workspace/[workspaceId]/templates/layout.tsx b/apps/sim/app/workspace/[workspaceId]/templates/layout.tsx index fb101fcaa..bc62e4104 100644 --- a/apps/sim/app/workspace/[workspaceId]/templates/layout.tsx +++ b/apps/sim/app/workspace/[workspaceId]/templates/layout.tsx @@ -2,5 +2,9 @@ * Templates layout - applies sidebar padding for all template routes. */ export default function TemplatesLayout({ children }: { children: React.ReactNode }) { - return
{children}
+ return ( +
+ {children} +
+ ) } diff --git a/apps/sim/app/workspace/[workspaceId]/templates/templates.tsx b/apps/sim/app/workspace/[workspaceId]/templates/templates.tsx index c92fa5bfc..43a4bac2f 100644 --- a/apps/sim/app/workspace/[workspaceId]/templates/templates.tsx +++ b/apps/sim/app/workspace/[workspaceId]/templates/templates.tsx @@ -172,7 +172,7 @@ export default function Templates({ return (
-
+
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx index 4d2be4ed3..98375ee56 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx @@ -108,12 +108,12 @@ export const SubflowNodeComponent = memo(({ data, id }: NodeProps { const baseClasses = '!z-[10] !cursor-crosshair !border-none !transition-[colors] !duration-150' - const colorClasses = '!bg-[var(--surface-7)]' + const colorClasses = '!bg-[var(--workflow-edge)]' const positionClasses = { - left: '!left-[-7px] !h-5 !w-[7px] !rounded-l-[2px] !rounded-r-none hover:!left-[-10px] hover:!w-[10px] hover:!rounded-l-full', + left: '!left-[-8px] !h-5 !w-[7px] !rounded-l-[2px] !rounded-r-none hover:!left-[-11px] hover:!w-[10px] hover:!rounded-l-full', right: - '!right-[-7px] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none hover:!right-[-10px] hover:!w-[10px] hover:!rounded-r-full', + '!right-[-8px] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none hover:!right-[-11px] hover:!w-[10px] hover:!rounded-r-full', } return cn(baseClasses, colorClasses, positionClasses[position]) @@ -205,13 +205,12 @@ export const SubflowNodeComponent = memo(({ data, id }: NodeProps {/* Subflow Start */}
{/* Start handle inside - connects to first block in subflow */} -
+
Start
@@ -85,9 +87,9 @@ function WorkflowPreviewSubflowInner({ data }: NodeProps