fix(workflows): Add Variables Dropdown Styling Inconsistencies

[KartikLabhshetwar]

Issue Summary

The Add Variables Dropdown component in the text editor had several styling inconsistencies that affected visual design system compliance and user experience:

1. Focus ring color mismatch: The search input field used focus:ring-brand-800 which was too prominent and inconsistent with the design system's subtle focus indicators
2. Missing border radius: The dropdown container and menu items lacked rounded corners, creating a visually inconsistent appearance
3. Redundant hover/active state styling: The button elements had conditional background color logic that was unnecessary and potentially causing visual glitches

These issues made the component feel inconsistent with the rest of the Cal.com UI and could confuse users during keyboard navigation.

Steps to Reproduce

1. Navigate to any page with a text editor that supports variables (e.g., Workflows, Email Templates, or Custom Email settings)
2. Click on the "Add variable" dropdown button
3. Observe the search input field when it receives focus (either by clicking or tabbing to it)
4. Navigate through the variable list using keyboard arrows or mouse hover
5. Observe the visual appearance of the dropdown container and menu items

Actual Results

Screen.Recording.2025-12-13.at.9.16.08.AM.mov

Expected Results

Screen.Recording.2025-12-13.at.9.16.53.AM.mov

Technical Details

• Component: packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
• Changes made:
  • Line 145: Changed focus:ring-brand-800 → focus:ring-subtle on Input component
  • Line 148: Added rounded-md class to dropdown container div
  • Line 153: Added rounded-md class to DropdownMenuItem
  • Line 158: Removed conditional hover:bg-muted and bg-muted styling from button className
• Design system: Follows Cal.com's design tokens for focus states and border radius

[linear]

CAL-6912