fix: emcn component library design engineering polish by adithyaakrishna · Pull Request #3672 · simstudioai/sim

adithyaakrishna · 2026-03-19T17:33:51Z

Summary

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

Type of Change

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 · 2026-03-19T17:33:59Z

PR Summary

Low Risk
Low risk visual/UI refactor across auth and marketing pages, with minor interaction changes (animated validation messages and password visibility toggles) that could affect layout or form UX but not auth logic.

Overview
Updates auth and landing/marketing UI to use shared CSS variables/design tokens (replacing hard-coded hex colors) and standardizes spacing/typography classes across buttons, nav, sections, and preview components.

Improves auth form UX by adding show/hide password toggles, animating validation and reset status messages via collapsible containers with aria-live, and tweaking divider/background styles for better consistency.

Refines landing page interactions and visuals, including pausable enterprise feature marquee hover behavior and numerous small layout/hover-state adjustments in the navbar, templates/features previews, and footer.

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

vercel · 2026-03-19T17:33:59Z

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

A member of the Team first needs to authorize it.

apps/sim/components/emcn/components/button/button.tsx

apps/sim/components/emcn/components/popover/popover.tsx

apps/docs/app/layout.tsx

cursor · 2026-03-20T13:32:35Z

apps/sim/app/(home)/components/features/features.tsx

      id='features'
      aria-labelledby='features-heading'
-      className='relative overflow-hidden bg-[#F6F6F6]'
+      className='relative overflow-hidden bg-[var(--text-primary)]'


Text-primary token misused as background makes text invisible

High Severity

The light-section background bg-[#F6F6F6] has been replaced with bg-[var(--text-primary)], but --text-primary is defined as #1a1a1a (light mode) or #e6e6e6 (dark mode) — it's a text color token, not a background token. In these same sections, heading text also uses text-[var(--text-primary)], meaning the background and text resolve to the same color, making headings completely invisible. This affects the Features, Pricing, and Enterprise sections of the landing page.

Additional Locations (2)

apps/sim/app/(home)/components/pricing/pricing.tsx#L186-L187

apps/sim/app/(home)/components/enterprise/enterprise.tsx#L413-L414

cursor · 2026-03-20T13:32:35Z

apps/sim/app/(home)/components/features/features.tsx

                  aria-selected={index === activeTab}
                  onClick={() => setActiveTab(index)}
-                  className={`relative h-full flex-1 items-center justify-center whitespace-nowrap px-[12px] font-medium font-season text-[#212121] text-[12px] uppercase lg:px-0 lg:text-[14px]${tab.hideOnMobile ? ' hidden lg:flex' : ' flex'}${index > 0 ? ' border-[#E9E9E9] border-l' : ''}`}
+                  className={`relative h-full flex-1 items-center justify-center whitespace-nowrap px-3 font-medium font-season text-[var(--surface-1)] text-caption uppercase lg:px-0 lg:text-sm${tab.hideOnMobile ? ' hidden lg:flex' : ' flex'}${index > 0 ? ' border-[var(--divider)] border-l' : ''}`}


Feature tab text uses surface token instead of text token

Medium Severity

The feature tab button text color changed from text-[#212121] (dark text) to text-[var(--surface-1)]. The --surface-1 token is a background/surface color (used elsewhere as bg-[var(--surface-1)]), not a text color. Depending on its value, tab labels may be invisible or extremely low contrast against the tab background.

cursor · 2026-03-20T13:32:35Z

apps/sim/app/(auth)/components/auth-background.tsx

  return (
    <div className={cn('fixed inset-0 overflow-hidden', className)}>
-      <div className='-z-50 pointer-events-none absolute inset-0 bg-[#1C1C1C]' />
+      <div className='-z-50 pointer-events-none absolute inset-0 bg-[var(--text-primary)]' />


Auth dark backgrounds become light using text-primary token

High Severity

Auth pages explicitly set the .dark class, where --text-primary resolves to #e6e6e6 (light). Replacing bg-[#1C1C1C] (near-black) with bg-[var(--text-primary)] turns dark backgrounds light — the auth background, header, and "Or continue with" divider span all become light gray instead of near-black, breaking the dark auth page design entirely.

Additional Locations (2)

apps/sim/app/(auth)/auth-layout-client.tsx#L17-L18

apps/sim/app/(auth)/login/login-form.tsx#L535-L536

cursor · 2026-03-20T13:39:00Z

apps/sim/app/(home)/components/hero/hero.tsx

          Build AI Agents
        </h1>
-        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[15px] leading-[125%] tracking-[0.02em] lg:text-[18px]'>
+        <p className='font-[430] font-season text-[var(--text-primary)]/60 text-base leading-[125%] tracking-[0.02em] lg:text-lg'>


Text opacity on dark sections uses wrong variable

Medium Severity

text-[var(--text-primary)]/60 replaces text-[#F6F6F6]/60 in dark-background sections (hero subtitle, enterprise text). In light mode, --text-primary is #1a1a1a, producing dark text at 60% opacity on a dark background — nearly invisible. The original #F6F6F6 was light text; a semantic variable for light/foreground text is needed instead.

Additional Locations (1)

apps/sim/app/(home)/components/enterprise/enterprise.tsx#L469-L470

apps/sim/app/(home)/components/enterprise/enterprise.tsx

vercel · 2026-03-20T17:50:22Z

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

cursor

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

There are 6 total unresolved issues (including 4 from previous reviews).

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

cursor · 2026-03-20T17:52:19Z

apps/sim/app/(home)/components/enterprise/enterprise.tsx

          <h2
            id='enterprise-heading'
-            className='max-w-[600px] font-[430] font-season text-[#1C1C1C] text-[32px] leading-[100%] tracking-[-0.02em] sm:text-[36px] md:text-[40px]'
+            className='max-w-[600px] font-[430] font-season text-[var(--text-primary)] text-[32px] leading-[100%] tracking-[-0.02em] sm:text-[36px] md:text-[40px]'


Heading text invisible against same-token background

High Severity

Section headings use text-[var(--text-primary)] (was text-[#1C1C1C]) while their parent sections also use bg-[var(--text-primary)] (was bg-[#F6F6F6]). The old code had dark text on light backgrounds — two different colors. Now both foreground and background resolve to the same var(--text-primary) value, rendering heading text completely invisible.

Additional Locations (2)

apps/sim/app/(home)/components/features/features.tsx#L218-L219

apps/sim/app/(home)/components/pricing/pricing.tsx#L202-L203

cursor · 2026-03-20T17:52:19Z

apps/sim/app/(auth)/login/login-form.tsx

          </div>
          <div className='relative flex justify-center text-sm'>
-            <span className='bg-[#1C1C1C] px-4 font-[340] text-[#999]'>Or continue with</span>
+            <span className='bg-[var(--text-primary)] px-4 font-[340] text-[var(--text-subtle)]'>Or continue with</span>


Divider span background matches surrounding section background

Medium Severity

The "Or continue with" divider text uses bg-[var(--text-primary)] to create a background that masks the divider line behind it. Previously this was bg-[#1C1C1C], matching the page's dark background. If --text-primary doesn't match the actual page background, the masking effect breaks and the divider line shows through the text, creating a visually broken separator.

Additional Locations (1)

apps/sim/app/(auth)/signup/signup-form.tsx#L516-L517

cursor bot reviewed Mar 19, 2026

View reviewed changes

apps/sim/components/emcn/components/button/button.tsx Outdated Show resolved Hide resolved

apps/sim/components/emcn/components/button/button.tsx Show resolved Hide resolved

apps/sim/components/emcn/components/popover/popover.tsx Show resolved Hide resolved

cursor bot reviewed Mar 19, 2026

View reviewed changes

apps/sim/components/emcn/components/popover/popover.tsx Show resolved Hide resolved

adithyaakrishna force-pushed the feat/emcn branch from 74c6b77 to 437f7fd Compare March 20, 2026 13:19

cursor bot reviewed Mar 20, 2026

View reviewed changes

apps/docs/app/layout.tsx Show resolved Hide resolved

adithyaakrishna force-pushed the feat/emcn branch from 437f7fd to ccbc8d8 Compare March 20, 2026 13:29

cursor bot reviewed Mar 20, 2026

View reviewed changes

adithyaakrishna added 6 commits March 20, 2026 22:00

chore: fix conflicts

9229227

feat: updated tailwind config

d9fa7f7

chore: pause marquee

9547361

chore: fix conflicts

0a2562b

chore: fix conflicts

977f4cb

chore: address review comments

2f83f87

adithyaakrishna force-pushed the feat/emcn branch from c6eefee to 2f83f87 Compare March 20, 2026 17:50

vercel bot temporarily deployed to Preview March 20, 2026 17:50 Inactive

cursor bot reviewed Mar 20, 2026

View reviewed changes

Conversation

adithyaakrishna commented Mar 19, 2026

Summary

Type of Change

Testing

Checklist

Uh oh!

cursor bot commented Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Summary

Uh oh!

vercel bot commented Mar 19, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor bot Mar 20, 2026

Choose a reason for hiding this comment

Text-primary token misused as background makes text invisible

Uh oh!

cursor bot Mar 20, 2026

Choose a reason for hiding this comment

Feature tab text uses surface token instead of text token

Uh oh!

cursor bot Mar 20, 2026

Choose a reason for hiding this comment

Auth dark backgrounds become light using text-primary token

Uh oh!

cursor bot Mar 20, 2026

Choose a reason for hiding this comment

Text opacity on dark sections uses wrong variable

Uh oh!

Uh oh!

vercel bot commented Mar 20, 2026

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor bot Mar 20, 2026

Choose a reason for hiding this comment

Heading text invisible against same-token background

Uh oh!

cursor bot Mar 20, 2026

Choose a reason for hiding this comment

Divider span background matches surrounding section background

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

cursor bot commented Mar 19, 2026 •

edited

Loading