From 16b81b5e786d6948990db42eee48697c8c11160a Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Date: Fri, 18 Sep 2026 15:38:45 -0700
Subject: [PATCH] refactor(emcn): centralize destructive ghost button colors

---
 .../document-tags-modal/document-tags-modal.tsx        |  4 ++--
 .../components/base-tags-modal/base-tags-modal.tsx     |  4 ++--
 .../components/condition-input/condition-input.tsx     |  4 ++--
 .../document-tag-entry/document-tag-entry.tsx          |  4 ++--
 .../sub-block/components/eval-input/eval-input.tsx     |  4 ++--
 .../filter-builder/components/filter-rule-row.tsx      |  4 ++--
 .../knowledge-tag-filters/knowledge-tag-filters.tsx    |  4 ++--
 .../sort-builder/components/sort-rule-row.tsx          |  4 ++--
 .../sub-block/components/starter/input-format.tsx      |  4 ++--
 .../components/variables-input/variables-input.tsx     |  4 ++--
 .../w/[workflowId]/components/variables/variables.tsx  |  4 ++--
 packages/emcn/src/components/button/button.tsx         | 10 ++++++++++
 12 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
index 3f8f9bec003..414c7c5511b 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
@@ -408,12 +408,12 @@ export function DocumentTagsModal({
                   <div className='flex shrink-0 items-center gap-1'>
                     <Button
                       aria-label='Remove tag'
-                      variant='ghost'
+                      variant='ghost-destructive-muted'
                       onClick={(e) => {
                         e.stopPropagation()
                         handleRemoveTag(index)
                       }}
-                      className='size-4 p-0 text-[var(--text-muted)] hover-hover:text-[var(--text-error)]'
+                      className='size-4 p-0'
                     >
                       <Trash className='size-3' />
                     </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
index 46163ac91ea..11fd1e18f6d 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
@@ -294,12 +294,12 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
                     <div className='flex shrink-0 items-center gap-1'>
                       <Button
                         aria-label='Delete Tag'
-                        variant='ghost'
+                        variant='ghost-destructive-muted'
                         onClick={(e) => {
                           e.stopPropagation()
                           handleDeleteTagClick(tag)
                         }}
-                        className='size-4 p-0 text-[var(--text-muted)] hover-hover:text-[var(--text-error)]'
+                        className='size-4 p-0'
                       >
                         <Trash className='size-3' />
                       </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
index f29ef3eae1d..41fccf4943f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
@@ -1023,12 +1023,12 @@ export function ConditionInput({
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
                     <Button
-                      variant='ghost'
+                      variant='ghost-destructive'
                       onClick={() => removeBlock(block.id)}
                       disabled={
                         isPreview || disabled || conditionalBlocks.length <= (isRouterMode ? 1 : 2)
                       }
-                      className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
+                      className='h-auto p-0'
                     >
                       <Trash className='size-[14px]' />
                       <span className='sr-only'>Delete Block</span>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
index bf2b4bdb42d..b5abcaf47a4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
@@ -274,10 +274,10 @@ export function DocumentTagEntry({
           <span className='sr-only'>Add Tag</span>
         </Button>
         <Button
-          variant='ghost'
+          variant='ghost-destructive'
           onClick={() => removeTag(tag.id)}
           disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
+          className='h-auto p-0'
         >
           <Trash className='size-[14px]' />
           <span className='sr-only'>Delete Tag</span>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
index 6c659aff3dc..652f79b6e3a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
@@ -159,10 +159,10 @@ export function EvalInput({
         <Tooltip.Root key={`remove-${metric.id}`}>
           <Tooltip.Trigger asChild>
             <Button
-              variant='ghost'
+              variant='ghost-destructive'
               onClick={() => removeMetric(metric.id)}
               disabled={isPreview || disabled || metrics.length === 1}
-              className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
+              className='h-auto p-0'
             >
               <Trash className='size-[14px]' />
               <span className='sr-only'>Delete Metric</span>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx
index 7a4545c0426..d41572a72d6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx
@@ -142,10 +142,10 @@ export function FilterRuleRow({
           <span className='sr-only'>Add Condition</span>
         </Button>
         <Button
-          variant='ghost'
+          variant='ghost-destructive'
           onClick={() => onRemove(rule.id)}
           disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
+          className='h-auto p-0'
         >
           <Trash className='size-[14px]' />
           <span className='sr-only'>Delete Condition</span>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
index 9ddea5c5fce..b5ca52dd694 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
@@ -266,13 +266,13 @@ export function KnowledgeTagFilters({
           <span className='sr-only'>Add Filter</span>
         </Button>
         <Button
-          variant='ghost'
+          variant='ghost-destructive'
           onClick={(e) => {
             e.stopPropagation()
             removeFilter(filter.id)
           }}
           disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
+          className='h-auto p-0'
         >
           <Trash className='size-[14px]' />
           <span className='sr-only'>Delete Filter</span>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx
index 9c13ee26ecd..329adbef3c6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx
@@ -101,10 +101,10 @@ export function SortRuleRow({
           <span className='sr-only'>Add Sort</span>
         </Button>
         <Button
-          variant='ghost'
+          variant='ghost-destructive'
           onClick={() => onRemove(rule.id)}
           disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
+          className='h-auto p-0'
         >
           <Trash className='size-[14px]' />
           <span className='sr-only'>Delete Sort</span>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
index ab93a862a07..8502854b75d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
@@ -422,10 +422,10 @@ export function FieldFormat({
           <span className='sr-only'>Add {title}</span>
         </Button>
         <Button
-          variant='ghost'
+          variant='ghost-destructive'
           onClick={() => removeField(field.id)}
           disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)] hover-hover:opacity-90'
+          className='h-auto p-0 hover-hover:opacity-90'
         >
           <Trash className='size-[14px]' />
           <span className='sr-only'>Delete Field</span>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
index 5301bf26a18..b3f340c7e60 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
@@ -440,13 +440,13 @@ export function VariablesInput({
                       <span className='sr-only'>Add Variable</span>
                     </Button>
                     <Button
-                      variant='ghost'
+                      variant='ghost-destructive'
                       onClick={(e) => {
                         e.stopPropagation()
                         removeAssignment(assignment.id)
                       }}
                       disabled={isReadOnly}
-                      className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
+                      className='h-auto p-0'
                     >
                       <Trash className='size-[14px]' />
                       <span className='sr-only'>Delete Variable</span>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
index 0baf5e457a5..6b2ee09e620 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
@@ -128,12 +128,12 @@ function VariableHeader({
         )}
       </div>
       <Button
-        variant='ghost'
+        variant='ghost-destructive'
         onClick={(e) => {
           e.stopPropagation()
           onRemove()
         }}
-        className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
+        className='h-auto p-0'
         disabled={readOnly}
         aria-label={`Delete ${variable.name || `variable ${index + 1}`}`}
       >
diff --git a/packages/emcn/src/components/button/button.tsx b/packages/emcn/src/components/button/button.tsx
index 10f481e3df5..0c0b472878d 100644
--- a/packages/emcn/src/components/button/button.tsx
+++ b/packages/emcn/src/components/button/button.tsx
@@ -37,6 +37,16 @@ const buttonVariants = cva(
         destructive:
           'bg-[var(--text-error)] text-white hover-hover:text-white hover-hover:brightness-106',
         ghost: 'text-[var(--text-secondary)] hover-hover:text-[var(--text-primary)]',
+        /**
+         * Destructive action without a filled surface; stays red on hover.
+         * @example <Button variant='ghost-destructive'>Delete</Button>
+         */
+        'ghost-destructive': 'text-[var(--text-error)] hover-hover:text-[var(--text-error)]',
+        /**
+         * Muted destructive action that turns red on hover.
+         * @example <Button variant='ghost-destructive-muted'>Remove</Button>
+         */
+        'ghost-destructive-muted': 'text-[var(--text-muted)] hover-hover:text-[var(--text-error)]',
         subtle:
           'text-[var(--text-body)] hover-hover:text-[var(--text-body)] hover-hover:bg-[var(--surface-4)]',
         'ghost-secondary': 'text-[var(--text-muted)] hover-hover:text-[var(--text-primary)]',