fix(badge): add type variant for dark mode contrast (#3025)

* fix(badge): add type variant for dark mode contrast

* docs(badge): add type variant to TSDoc

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/api-info-modal.tsx

@@ -203,7 +203,9 @@ export function ApiInfoModal({ open, onOpenChange, workflowId }: ApiInfoModalPro
                           <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
                             {field.name}
                           </span>
-                          <Badge size='sm'>{field.type || 'string'}</Badge>
+                          <Badge variant='type' size='sm'>
+                            {field.type || 'string'}
+                          </Badge>
                         </div>
                       </div>
                       <div className='border-[var(--border-1)] border-t px-[10px] pt-[6px] pb-[10px]'>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx

@@ -511,7 +511,9 @@ export function McpDeploy({
                     <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
                       {field.name}
                     </span>
-                    <Badge size='sm'>{field.type}</Badge>
+                    <Badge variant='type' size='sm'>
+                      {field.type}
+                    </Badge>
                   </div>
                 </div>
                 <div className='border-[var(--border-1)] border-t px-[10px] pt-[6px] pb-[10px]'>

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

@@ -245,7 +245,9 @@ export function DocumentTagEntry({
           {tag.collapsed ? tag.tagName || `Tag ${index + 1}` : `Tag ${index + 1}`}
         </span>
         {tag.collapsed && tag.tagName && (
-          <Badge size='sm'>{FIELD_TYPE_LABELS[tag.fieldType] || 'Text'}</Badge>
+          <Badge variant='type' size='sm'>
+            {FIELD_TYPE_LABELS[tag.fieldType] || 'Text'}
+          </Badge>
         )}
       </div>
       <div className='flex items-center gap-[8px] pl-[8px]' onClick={(e) => e.stopPropagation()}>

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

@@ -223,7 +223,11 @@ function InputMappingField({
           <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
             {fieldName}
           </span>
-          {fieldType && <Badge size='sm'>{fieldType}</Badge>}
+          {fieldType && (
+            <Badge variant='type' size='sm'>
+              {fieldType}
+            </Badge>
+          )}
         </div>
       </div>
 

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

@@ -238,7 +238,9 @@ export function KnowledgeTagFilters({
           {filter.collapsed ? filter.tagName || `Filter ${index + 1}` : `Filter ${index + 1}`}
         </span>
         {filter.collapsed && filter.tagName && (
-          <Badge size='sm'>{FIELD_TYPE_LABELS[filter.fieldType] || 'Text'}</Badge>
+          <Badge variant='type' size='sm'>
+            {FIELD_TYPE_LABELS[filter.fieldType] || 'Text'}
+          </Badge>
         )}
       </div>
       <div className='flex items-center gap-[8px] pl-[8px]' onClick={(e) => e.stopPropagation()}>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx

@@ -310,7 +310,11 @@ export function FieldFormat({
         <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
           {field.name || `${title} ${index + 1}`}
         </span>
-        {field.name && showType && <Badge size='sm'>{field.type}</Badge>}
+        {field.name && showType && (
+          <Badge variant='type' size='sm'>
+            {field.type}
+          </Badge>
+        )}
       </div>
       <div className='flex items-center gap-[8px] pl-[8px]' onClick={(e) => e.stopPropagation()}>
         <Button variant='ghost' onClick={addField} disabled={isReadOnly} className='h-auto p-0'>

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

@@ -345,7 +345,11 @@ export function VariablesInput({
                     <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
                       {assignment.variableName || `Variable ${index + 1}`}
                     </span>
-                    {assignment.variableName && <Badge size='sm'>{assignment.type}</Badge>}
+                    {assignment.variableName && (
+                      <Badge variant='type' size='sm'>
+                        {assignment.type}
+                      </Badge>
+                    )}
                   </div>
                   <div
                     className='flex items-center gap-[8px] pl-[8px]'

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/workflow-mcp-servers/workflow-mcp-servers.tsx

@@ -611,7 +611,9 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
                                 <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
                                   {name}
                                 </span>
-                                <Badge size='sm'>{prop.type || 'any'}</Badge>
+                                <Badge variant='type' size='sm'>
+                                  {prop.type || 'any'}
+                                </Badge>
                               </div>
                             </div>
                             <div className='border-[var(--border-1)] border-t px-[10px] pt-[6px] pb-[10px]'>

apps/sim/components/emcn/components/badge/badge.tsx

@@ -16,6 +16,7 @@ const badgeVariants = cva(
           'gap-[4px] rounded-[40px] border border-[var(--border)] text-[var(--text-secondary)] bg-[var(--surface-4)] hover:text-[var(--text-primary)] hover:border-[var(--border-1)] hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-5)]',
         outline:
           'gap-[4px] rounded-[40px] border border-[var(--border-1)] bg-transparent text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--surface-5)] dark:hover:bg-transparent dark:hover:border-[var(--surface-6)]',
+        type: 'gap-[4px] rounded-[40px] border border-[var(--border)] text-[var(--text-secondary)] bg-[var(--surface-4)] dark:bg-[var(--surface-6)]',
         green: `${STATUS_BASE} bg-[#bbf7d0] text-[#15803d] dark:bg-[rgba(34,197,94,0.2)] dark:text-[#86efac]`,
         red: `${STATUS_BASE} bg-[#fecaca] text-[var(--text-error)] dark:bg-[#551a1a] dark:text-[var(--text-error)]`,
         gray: `${STATUS_BASE} bg-[#e7e5e4] text-[#57534e] dark:bg-[var(--terminal-status-info-bg)] dark:text-[var(--terminal-status-info-color)]`,
@@ -84,7 +85,7 @@ export interface BadgeProps
  *
  * @remarks
  * Supports two categories of variants:
- * - **Bordered**: `default`, `outline` - traditional badges with borders
+ * - **Bordered**: `default`, `outline`, `type` - traditional badges with borders
  * - **Status colors**: `green`, `red`, `gray`, `blue`, `blue-secondary`, `purple`,
  *   `orange`, `amber`, `teal`, `cyan`, `gray-secondary` - borderless colored badges
  *