fix(blocks): drop the dead copies of a block's colour

Sweeping the surfaces above turned up colour data nothing reads and colour data
two surfaces disagreed on.

Dead: `BLOCK_COLORS.DEFAULT/LOOP/PARALLEL` in the tag dropdown (only `VARIABLE`
was ever referenced), `BlockIconInfo.color` on table columns — whose consumer
documents that it deliberately ignores the colour, so the `#2F55FF` behind it
could never render — and the `bgColor` threaded into the add-resource dropdown,
whose row renders a bare tinted icon.

Disagreeing: the Variables tile is `#2F8BFF` in the tag dropdown and `#8B5CF6`
in the preview panel, for the same "V" on the same concept. Both now read
`VARIABLE_TILE_COLOR`, and the preview panel's two hand-rolled squares become
`BlockTile` like every other tile.

Four spellings of the neutral fallback (`#6B7280`, `#6b7280`, `#666666`, and a
`cancelled` status that happened to equal it) now point at
`DEFAULT_BLOCK_TILE_COLOR`.

The terminal and logs resolvers stay. They look like duplicates of `accent.ts`
but carry behaviour it does not have — status fills for synthesized
error/validation/cancelled rows, near-black contrast correction, MCP tool-id
parsing, and a model-provider branch — so folding them in is a behavioural
change, not a deletion.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx

@@ -258,7 +258,6 @@ export function useAvailableResources(
           id: integration.blockType,
           name: integration.name,
           iconComponent: integration.icon,
-          bgColor: integration.bgColor,
         })),
       },
       {

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/utils.ts

@@ -7,6 +7,7 @@ import type { TraceSpan } from '@/lib/logs/types'
 import { LoopTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/loop/loop-config'
 import { ParallelTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/parallel/parallel-config'
 import { getBlock, getBlockByToolName } from '@/blocks'
+import { DEFAULT_BLOCK_TILE_COLOR } from '@/blocks/accent'
 import { PROVIDER_DEFINITIONS } from '@/providers/models'
 import { normalizeToolId } from '@/tools/normalize'
 
@@ -24,8 +25,6 @@ function tryParseMcpToolName(toolId: string): string | null {
   return toolName.length > 0 ? toolName : null
 }
 
-export const DEFAULT_BLOCK_COLOR = '#6b7280'
-
 export interface BlockIconAndColor {
   icon: React.ComponentType<{ className?: string }> | null
   bgColor: string
@@ -71,12 +70,12 @@ export function getBlockIconAndColor(
   if (lowerType === 'model' && provider) {
     const providerDef = PROVIDER_DEFINITIONS[provider]
     if (providerDef?.icon)
-      return { icon: providerDef.icon, bgColor: providerDef.color ?? DEFAULT_BLOCK_COLOR }
+      return { icon: providerDef.icon, bgColor: providerDef.color ?? DEFAULT_BLOCK_TILE_COLOR }
   }
   const blockType = lowerType === 'model' ? 'agent' : lowerType
   const blockConfig = getBlock(blockType)
   if (blockConfig) return { icon: blockConfig.icon, bgColor: blockConfig.bgColor }
-  return { icon: null, bgColor: DEFAULT_BLOCK_COLOR }
+  return { icon: null, bgColor: DEFAULT_BLOCK_TILE_COLOR }
 }
 
 /**
@@ -93,7 +92,9 @@ const MAX_YIQ_SUM = 255_000
  */
 export function adjustBgForContrast(bgColor: string): string {
   const brightness = perceivedBrightness(bgColor)
-  return brightness !== null && brightness < 30_000 / MAX_YIQ_SUM ? DEFAULT_BLOCK_COLOR : bgColor
+  return brightness !== null && brightness < 30_000 / MAX_YIQ_SUM
+    ? DEFAULT_BLOCK_TILE_COLOR
+    : bgColor
 }
 
 export function parseTime(value?: string | number | null): number {

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/types.ts

@@ -1,9 +1,13 @@
 import type React from 'react'
 import type { ColumnDefinition } from '@/lib/table'
 
+/**
+ * The producing block's mark for a workflow-output column. Icon only — these
+ * render in the plain `--text-icon` tone like every other column-type icon, so
+ * carrying a colour here only invited a second copy of the block's `bgColor`.
+ */
 export interface BlockIconInfo {
   icon: React.ComponentType<{ className?: string }>
-  color: string
 }
 
 export interface ColumnSourceInfo {

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/hooks/use-table.ts

@@ -244,7 +244,7 @@ export function useTable({ workspaceId, tableId, queryOptions }: UseTableParams)
         const block = blocks?.[out.blockId]
         const blockConfig = block?.type ? getBlock(block.type) : undefined
         const blockIconInfo: BlockIconInfo | undefined = blockConfig?.icon
-          ? { icon: blockConfig.icon, color: blockConfig.bgColor || '#2F55FF' }
+          ? { icon: blockConfig.icon }
           : undefined
         const blockName = block?.name?.trim() || undefined
         // Flag a missing source block only once the workflow state has loaded

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx

@@ -29,6 +29,7 @@ import type {
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/types'
 import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
 import { getBlock } from '@/blocks'
+import { VARIABLE_TILE_COLOR } from '@/blocks/accent'
 import { BlockTile } from '@/blocks/block-tile'
 import type { BlockConfig } from '@/blocks/types'
 import { normalizeName } from '@/executor/constants'
@@ -154,16 +155,6 @@ export const getTagSearchTerm = (text: string, cursorPosition: number): string =
   return textBeforeCursor.slice(lastOpenBracket + 1).toLowerCase()
 }
 
-/**
- * Color constants for block type icons in the tag dropdown.
- */
-const BLOCK_COLORS = {
-  VARIABLE: '#2F8BFF',
-  DEFAULT: '#2F55FF',
-  LOOP: '#2FB3FF',
-  PARALLEL: '#FEE12B',
-} as const
-
 /**
  * Prefix constants for special tag types.
  */
@@ -1709,7 +1700,7 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
                   <>
                     <PopoverSection rootOnly>
                       <div className='flex items-center gap-1.5'>
-                        <BlockTile bgColor={BLOCK_COLORS.VARIABLE} fallbackLabel='V' size='sm' />
+                        <BlockTile bgColor={VARIABLE_TILE_COLOR} fallbackLabel='V' size='sm' />
                         Variables
                       </div>
                     </PopoverSection>

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

@@ -33,6 +33,7 @@ import {
 import { useToolbarItemInteractions } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/hooks'
 import { LoopTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/loop/loop-config'
 import { ParallelTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/parallel/parallel-config'
+import { DEFAULT_BLOCK_TILE_COLOR } from '@/blocks/accent'
 import { BlockTile } from '@/blocks/block-tile'
 import {
   buildCustomBlockConfig,
@@ -89,7 +90,7 @@ const ToolbarItem = memo(function ToolbarItem({
       const iconContainer = e.currentTarget.querySelector<HTMLElement>('[data-toolbar-item-icon]')
       onDragStart(e, item.type, isTriggerCapable, {
         name: item.name,
-        bgColor: item.bgColor ?? '#666666',
+        bgColor: item.bgColor ?? DEFAULT_BLOCK_TILE_COLOR,
         iconContainer,
       })
     },

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/utils.ts

@@ -1,6 +1,7 @@
 import type React from 'react'
 import { Ban, CircleX, Repeat, Split, TriangleAlert, Workflow } from '@sim/emcn/icons'
 import { getBlock } from '@/blocks'
+import { DEFAULT_BLOCK_TILE_COLOR } from '@/blocks/accent'
 import { isWorkflowBlockType } from '@/executor/constants'
 import { TERMINAL_BLOCK_COLUMN_WIDTH } from '@/stores/constants'
 import type { ConsoleEntry } from '@/stores/terminal'
@@ -20,7 +21,7 @@ const SUBFLOW_COLORS = {
 const SPECIAL_BLOCK_COLORS = {
   error: '#ef4444',
   validation: '#f59e0b',
-  cancelled: '#6b7280',
+  cancelled: DEFAULT_BLOCK_TILE_COLOR,
 } as const
 
 /**
@@ -90,7 +91,7 @@ export function getBlockColor(blockType: string): string {
   if (blockType === 'cancelled') {
     return SPECIAL_BLOCK_COLORS.cancelled
   }
-  return '#6b7280'
+  return DEFAULT_BLOCK_TILE_COLOR
 }
 
 /**

apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx

@@ -43,6 +43,7 @@ import { PreviewContextMenu } from '@/app/workspace/[workspaceId]/w/components/p
 import { PreviewWorkflow } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow'
 import { useContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
 import { getBlock } from '@/blocks'
+import { DEFAULT_BLOCK_TILE_COLOR, VARIABLE_TILE_COLOR } from '@/blocks/accent'
 import { BlockTile } from '@/blocks/block-tile'
 import type { BlockConfig, SubBlockConfig, SubBlockType } from '@/blocks/types'
 import { normalizeName } from '@/executor/constants'
@@ -436,9 +437,7 @@ function ConnectionsSection({
                 handleKeyboardActivation(event, () => setExpandedVariables(!expandedVariables))
               }
             >
-              <div className='relative flex size-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm bg-[#8B5CF6]'>
-                <span className='text-[9px] text-white'>V</span>
-              </div>
+              <BlockTile bgColor={VARIABLE_TILE_COLOR} fallbackLabel='V' size='sm' />
               <span
                 className={cn(
                   'truncate',
@@ -488,9 +487,7 @@ function ConnectionsSection({
                 handleKeyboardActivation(event, () => setExpandedEnvVars(!expandedEnvVars))
               }
             >
-              <div className='relative flex size-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm bg-[#6B7280]'>
-                <span className='text-[9px] text-white'>E</span>
-              </div>
+              <BlockTile bgColor={DEFAULT_BLOCK_TILE_COLOR} fallbackLabel='E' size='sm' />
               <span
                 className={cn(
                   'truncate',

apps/sim/blocks/accent.ts

@@ -6,6 +6,13 @@ import { getBlock } from '@/blocks/registry'
 /** Tile fill for a block that has no config of its own to colour it. */
 export const DEFAULT_BLOCK_TILE_COLOR = '#6B7280'
 
+/**
+ * Tile fill for a workflow variable. Not a block, but it is listed beside them
+ * — in the tag dropdown and the preview panel's reference sections — and those
+ * two had drifted to different colours for the same "V" tile.
+ */
+export const VARIABLE_TILE_COLOR = '#2F8BFF'
+
 /**
  * Subflow tiles. Loop and Parallel are canvas blocks with no registry config,
  * so every surface that lists them had to special-case the pair; they resolve