fix(blocks): preserve agent block color (#4671)

Author: waleedlatif1

apps/sim/app/_styles/globals.css

@@ -217,6 +217,7 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
     --border-success: #e0e0e0;
 
     /* Brand & state */
+    --brand-agent: #6f3dfa;
     --brand-secondary: #33b4ff;
     --brand-accent: #33c482;
     --brand-accent-hover: #2dac72;
@@ -373,6 +374,7 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
     --border-success: #575757;
 
     /* Brand & state */
+    --brand-agent: #701ffc;
     --brand-secondary: #33b4ff;
     --brand-accent: #33c482;
     --brand-accent-hover: #2dac72;

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx

@@ -397,7 +397,7 @@ export function Editor() {
             />
           ) : (
             <h2
-              className='min-w-0 flex-1 cursor-pointer select-none text-ellipsis whitespace-nowrap [overflow:clip] [overflow-clip-margin:3px] pr-2 font-medium text-[var(--text-primary)] text-sm'
+              className='min-w-0 flex-1 cursor-pointer select-none text-ellipsis whitespace-nowrap pr-2 font-medium text-[var(--text-primary)] text-sm [overflow-clip-margin:3px] [overflow:clip]'
               title={title}
               onDoubleClick={handleStartRename}
               onMouseDown={(e) => {

apps/sim/blocks/blocks/agent.ts

@@ -81,7 +81,7 @@ export const AgentBlock: BlockConfig<AgentResponse> = {
   category: 'blocks',
   integrationType: IntegrationType.AI,
   tags: ['llm', 'agentic', 'automation'],
-  bgColor: 'var(--brand)',
+  bgColor: 'var(--brand-agent)',
   icon: AgentIcon,
   subBlocks: [
     {

apps/sim/ee/whitelabeling/inject-theme.ts

@@ -19,6 +19,7 @@ export function generateThemeCSS(): string {
 
   if (process.env.NEXT_PUBLIC_BRAND_PRIMARY_COLOR) {
     cssVars.push(`--brand: ${process.env.NEXT_PUBLIC_BRAND_PRIMARY_COLOR};`)
+    cssVars.push(`--brand-agent: ${process.env.NEXT_PUBLIC_BRAND_PRIMARY_COLOR};`)
     cssVars.push(`--brand-accent: ${process.env.NEXT_PUBLIC_BRAND_PRIMARY_COLOR};`)
     cssVars.push(`--auth-primary-btn-bg: ${process.env.NEXT_PUBLIC_BRAND_PRIMARY_COLOR};`)
     cssVars.push(`--auth-primary-btn-border: ${process.env.NEXT_PUBLIC_BRAND_PRIMARY_COLOR};`)
@@ -51,6 +52,10 @@ export function generateThemeCSS(): string {
     cssVars.push(`--brand-accent-hover: ${process.env.NEXT_PUBLIC_BRAND_ACCENT_HOVER_COLOR};`)
   }
 
+  if (process.env.NEXT_PUBLIC_CUSTOM_CSS_URL) {
+    cssVars.push('--brand-agent: var(--brand);')
+  }
+
   if (process.env.NEXT_PUBLIC_BRAND_BACKGROUND_COLOR) {
     const isDark = isDarkBackground(process.env.NEXT_PUBLIC_BRAND_BACKGROUND_COLOR)
     if (isDark) {

apps/sim/ee/whitelabeling/org-branding-utils.ts

@@ -66,6 +66,7 @@ export function generateOrgThemeCSS(settings: OrganizationWhitelabelSettings): s
 
   if (settings.primaryColor) {
     vars.push(`--brand: ${settings.primaryColor};`)
+    vars.push(`--brand-agent: ${settings.primaryColor};`)
     vars.push(`--brand-accent: ${settings.primaryColor};`)
     vars.push(`--auth-primary-btn-bg: ${settings.primaryColor};`)
     vars.push(`--auth-primary-btn-border: ${settings.primaryColor};`)