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

[waleedlatif1]

Summary

• Added type variant to Badge component for better dark mode contrast on surface-4 backgrounds
• Updated 8 usages where type badges were blending into headers in dark mode

Type of Change

• Bug fix

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
docs	Skipped		Jan 27, 2026 7:40pm

[greptile-apps]

Greptile Overview

Greptile Summary

Added a new type variant to the Badge component that provides better contrast in dark mode by using --surface-6 (#454545) instead of --surface-4 (#292929), preventing badges from blending into headers.

• Updated Badge component with new type variant for dark mode contrast
• Consistently applied variant='type' across 8 files where type information badges appear on surface-4 backgrounds
• All changes follow consistent pattern: wrapping Badge with variant='type' prop
• TSDoc should be updated to include the new type variant in the documentation

Confidence Score: 4.5/5

• Safe to merge with minor documentation improvement needed
• The implementation is solid with consistent application across all usage sites. The dark mode contrast fix addresses a real UX issue. Only minor improvement needed is updating TSDoc to reflect the new variant.
• No files require special attention - all changes follow the same simple pattern

Important Files Changed

Filename	Overview
apps/sim/components/emcn/components/badge/badge.tsx	Added type variant with dark mode contrast fix (surface-6 vs surface-4)
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx	Updated Badge to use variant='type' for field type display
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx	Updated Badge to use variant='type' for variable type display

Sequence Diagram

sequenceDiagram
    participant Dev as Developer
    participant Badge as Badge Component
    participant CVA as CVA Variants
    participant CSS as CSS Variables
    participant UI as UI (Dark Mode)

    Dev->>Badge: Add variant='type' prop
    Badge->>CVA: Lookup 'type' variant
    CVA->>CSS: Apply bg-[var(--surface-4)]
    CVA->>CSS: Apply dark:bg-[var(--surface-6)]
    CSS->>UI: Light mode: #f5f5f5 (surface-4)
    CSS->>UI: Dark mode: #454545 (surface-6)
    UI-->>Dev: Badge visible on surface-4 header (#292929)
    
    Note over Badge,UI: Old behavior: default variant used surface-4 in dark mode
    Note over Badge,UI: New behavior: type variant uses surface-6 for contrast

Loading

[greptile-apps]

_{1 file reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Additional Comments (1)

apps/sim/components/emcn/components/badge/badge.tsx
TSDoc should list the new type variant alongside other bordered variants

 * @remarks
 * Supports two categories of variants:
 * - **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
 *
 * Status color variants can display a dot indicator via the `dot` prop.
 * All variants support an optional `icon` prop for leading icons.

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/sim/components/emcn/components/badge/badge.tsx
Line: 84:94

Comment:
TSDoc should list the new `type` variant alongside other bordered variants

```suggestion
 * @remarks
 * Supports two categories of variants:
 * - **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
 *
 * Status color variants can display a dot indicator via the `dot` prop.
 * All variants support an optional `icon` prop for leading icons.
```

<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>

How can I resolve this? If you propose a fix, please make it concise.