fix: emcn component library design engineering polish

[adithyaakrishna]

Summary

Comprehensive polish of the emcn compos library along with addressing a11y issues and design token consistency

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation
• Other: Components Polish

Testing

• Visual regression: Button variants (tertiary no longer uses !important, base class restructured), toast auto-dismiss now 5s default, dropdown menu wider
• Touch devices: Verify hover states no longer stick on tap
• Keyboard navigation: Tab through Input, Textarea, Slider, Switch all now show visible focus indicators
• Reduced motion: Toggle prefer reduced motion (macos setting), all animations should be disabled

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)

[cursor]

PR Summary

Low Risk
Low risk UI-only changes: primarily swaps hardcoded colors/spacing for CSS variables and minor layout/animation tweaks, with no backend or data-flow changes.

Overview
Updates the landing, auth, and blog UI to use shared design tokens (e.g., var(--landing-*)) instead of hardcoded hex colors, along with broad spacing/typography normalization (Tailwind numeric → semantic sizes like text-sm, gap-2, p-2.5).

Polishes a few interactions: the Enterprise feature marquee now pauses on hover and respects reduced-motion, the signup form’s field validation messages animate/collapse inline, and various skeleton/loading states and small motion parameters are adjusted for consistency. Also relaxes the docs app viewport restrictions by removing maximumScale/userScalable settings.

^{Written by Cursor Bugbot for commit 2715ffb. This will update automatically on new commits. Configure here.}

[vercel]

@adithyaakrishna is attempting to deploy a commit to the Sim Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Mar 20, 2026 5:50pm

[icecrasher321]

@adithyaakrishna just ping me when this is ready for review. We'll go through this together.

[adithyaakrishna]

@icecrasher321 this is ready

[icecrasher321]

Can the + not have a dark outline. Let's not make styling changes here and keep it in line with staging imo

[icecrasher321]

In Settings > Custom Tools -- Add button has incorrect styling. Please test light and dark mode of all these if changes were made.

[icecrasher321]

When I start typing into the copilot box -- it becomes lighter instead of looking active

[adithyaakrishna]

@icecrasher321 looks like these were some regressions that I missed out on, will send a fix soon

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

[greptile-apps]

Greptile Summary

This PR delivers a comprehensive design polish pass on the emcn component library: it introduces a hover-hover Tailwind variant to prevent hover-state stickiness on touch devices, adds visible keyboard focus rings to Input, Textarea, Slider, and Switch, removes !important overrides from the tertiary button variant, widens dropdown menus, adds a description field to toasts, and replaces hundreds of hardcoded pixel/hex values with semantic design tokens. It also performs a significant CSS variable cleanup — removing the opaque --c-XXXXXX palette and --brand-*-hex aliases in favour of named semantic groups (--badge-*, --landing-*, --shadow-*, --z-*, etc.).\n\nKey findings:\n- Bug (P1): data-popover-scroll was removed from the inner scroll wrapper in popover.tsx, but the CSS selector [&_.flex-1:not([data-popover-scroll])]:truncate still relies on it to exclude that container from truncation. When hasUserWidthConstraint && showArrow both hold, the scrollable container incorrectly receives overflow: hidden; white-space: nowrap, breaking scroll.\n- Custom rule violation (P2): Extensive additions to globals.css violate the project rule to avoid editing globals.css unless absolutely necessary.\n- Behavioral change (P2): Default toast auto-dismiss changed from 0 (never) to 5000 ms. Existing call sites that omit duration will now silently auto-dismiss.\n- Stale docs (P2): lib/workflows/colors.ts JSDoc still references removed variable names brand-400 and brand-tertiary.

Confidence Score: 4/5

Safe to merge after the data-popover-scroll fix; all other changes are well-scoped polish.

The vast majority of changes are mechanical token renames and hover-hover class substitutions, correctly propagated across 464 files. The one genuine logic bug (popover scroll-container truncation) is narrow in scope and has a simple one-line fix. The behavioral change to toast auto-dismiss is intentional per the PR description. CSS variable renames are fully migrated with no dangling references in code.

apps/sim/components/emcn/components/popover/popover.tsx (data-popover-scroll regression)

Important Files Changed

Filename	Overview
apps/sim/components/emcn/components/popover/popover.tsx	Removed data-popover-scroll attribute from inner scroll container but the CSS selector still relies on it — scrollable wrapper incorrectly receives truncate when hasUserWidthConstraint && showArrow.
apps/sim/components/emcn/components/button/button.tsx	Replaced !important overrides in tertiary variant with clean token refs, adopted hover-hover variant throughout, switched to Tailwind spacing tokens; no issues found.
apps/sim/components/emcn/components/toast/toast.tsx	Added description field, restyled layout, changed default AUTO_DISMISS_MS from 0 (never-dismiss) to 5000ms — intentional but silently breaks callers that omit duration.
apps/sim/app/_styles/globals.css	Major design-token restructure — removes opaque --c-XXXXXX palette and --brand-*-hex aliases, adds semantic groups; violates the project rule to avoid editing globals.css for component-scoped tokens.
apps/sim/tailwind.config.ts	Adds hover-hover media-query variant, new font-size scale (micro, caption, md), semantic shadow tokens, collapsible animations, and 4.5 spacing token — clean additions, no issues.
apps/sim/components/emcn/components/input/input.tsx	Removed duplicate focus:outline-none classes and replaced with focus-visible:border for a visible indicator; adds touch-manipulation for better touch responsiveness.
apps/sim/components/emcn/components/switch/switch.tsx	Added before:inset-[-12px] pseudo-element for 44px touch target and focus-visible:ring-2 keyboard indicator — good a11y improvements.
apps/sim/components/emcn/components/slider/slider.tsx	Added before:inset-[-15px] touch-target expansion and focus-visible:ring-2 keyboard focus ring to thumb — mirrors Switch improvements.
apps/sim/ee/whitelabeling/inject-theme.ts	CSS variable names updated from --brand-primary-hex / --brand-accent-hex to --brand / --brand-link to match renamed tokens in globals.css — correctly synchronized.
apps/sim/hooks/use-branded-button-class.ts	Updated CSS variable read from --brand-accent-hex to --brand-link to stay in sync with globals.css rename — no issues.

Comments Outside Diff (2)

1. apps/sim/components/emcn/components/popover/popover.tsx, line 613-614 (link)

   Stale CSS selector after removing data-popover-scroll

   The data-popover-scroll attribute was removed from the inner wrapper div (now just className='flex flex-1 flex-col overflow-auto'), but the CSS selector [&_.flex-1:not([data-popover-scroll])]:truncate still relies on it to exclude the scrollable container from truncation.

   Since the wrapper no longer carries [data-popover-scroll], the :not([data-popover-scroll]) filter always matches it — so when hasUserWidthConstraint && showArrow are both true, the overflow-auto container itself gets truncate (→ overflow: hidden; white-space: nowrap) applied, conflicting directly with the overflow/flex-col layout and breaking scroll.

   Either restore the data-popover-scroll attribute on the new wrapper div, or switch the selector to a class-based approach:

   // Option A — restore the data attribute
   <div
     data-popover-scroll
     className='flex flex-1 flex-col overflow-auto'
     style={{ maxHeight: `${maxHeight || 400}px` }}
   >
   
   // Option B — update the selector to use a dedicated class
   // wrapper:
   <div className='popover-scroll-area flex flex-1 flex-col overflow-auto' ...>
   // selector in content className:
   '[&_.flex-1:not(.popover-scroll-area)]:truncate ...'
   

2. apps/sim/lib/workflows/colors.ts, line 5-9 (link)

   Stale JSDoc references to removed CSS variable names

   The file-level comment still documents brand-400 and brand-tertiary — both variables were removed in this PR. The surviving equivalents are --brand (formerly --brand-primary-hex) and --brand-accent (formerly --brand-tertiary-2).

_{Reviews (1): Last reviewed commit: "chore: fix review changes" | Re-trigger Greptile}