refactor(emcn): centralize destructive ghost button colors

Author: Bill Leoutsakos

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>