feat: light, emcn, modals (#2104)

* feat: aligned current unassigned hex to old globals

* feat: emcn modal, help-modal; improvement(ui): emcn textarea, emcn combobox, messages-input

* improvement(modal): ui, transition

* improvement: terminal expand, variables styling; refactor(float): hooks

* improvement(invite-modal): emcn aligned

* feat(terminal): height memory

* improvement(invite-modal): skeleton ui

* improvement(invite-modal): badges UI

* feat: deploy-modal, emcn

* refactor: deleted duplicate dark styles

* feat: emcn, settings, light

* improvement: emcn, settings

* improvement: settings-modal, emcn

* improvement: SSO, light-mode

* improvement: EMCN, light

* fix issues, run lint

* fix: reverted mock data

Author: emir-karabeg

.cursorrules

@@ -8,7 +8,7 @@ ENSURE that you use the logger.info and logger.warn and logger.error instead of
 
 ## Comments
 
-You must use TSDOC for comments. Do not use ==== for comments to separate sections.
+You must use TSDOC for comments. Do not use ==== for comments to separate sections. Do not leave any comments that are not TSDOC. 
 
 ## Globals styles
 

apps/sim/.cursorrules

@@ -1,6 +1,6 @@
 # Sim App Architecture Guidelines
 
-You are building features in the Sim app following the architecture established by the sidebar-new component. This file defines the patterns, structures, and conventions you must follow.
+You are building features in the Sim app following the architecture. This file defines the patterns, structures, and conventions you must follow.
 
 ---
 
@@ -428,20 +428,22 @@ setSidebarWidth: (width) => {
 ### Tailwind Classes
 
 1. **No Inline Styles**: Use Tailwind utility classes exclusively
-2. **Dark Mode**: Always include dark mode variants (`dark:bg-[var(--surface-1)]`)
-3. **Exact Values**: Use exact values from design system (`text-[14px]`, `h-[25px]`)
-4. **clsx for Conditionals**: Use clsx() for conditional classes
-5. **Consistent Spacing**: Use spacing tokens (`gap-[8px]`, `px-[14px]`)
-6. **Transitions**: Add transitions for interactive states (`transition-colors`)
-7. **Prefer px units**: Use arbitrary px values over scale utilities (e.g., `px-[4px]` instead of `px-1`)
+2. **Dark Mode**: Include dark mode variants only when the value differs from light mode
+3. **No Duplicate Dark Classes**: Never add a `dark:` class when the value is identical to the light mode class (e.g., `text-[var(--text-primary)] dark:text-[var(--text-primary)]` is redundant - just use `text-[var(--text-primary)]`)
+4. **Exact Values**: Use exact values from design system (`text-[14px]`, `h-[25px]`)
+5. **cn for Conditionals**: Use `cn()` from `@/lib/utils` for conditional classes (wraps clsx + tailwind-merge for conflict resolution)
+6. **Consistent Spacing**: Use spacing tokens (`gap-[8px]`, `px-[14px]`)
+7. **Transitions**: Add transitions for interactive states (`transition-colors`)
+8. **Prefer px units**: Use arbitrary px values over scale utilities (e.g., `px-[4px]` instead of `px-1`)
 
 ```typescript
+import { cn } from '@/lib/utils'
+
 <div
-  className={clsx(
+  className={cn(
     'base-classes that-always-apply',
     isActive && 'active-state-classes',
-    disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer hover:bg-accent',
-    'dark:bg-[var(--surface-1)] dark:border-[var(--border)]' // Dark mode variants
+    disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer hover:bg-accent'
   )}
 >
 ```
@@ -620,9 +622,10 @@ Before considering a component/hook complete, verify:
 
 ### Styling
 - [ ] No styles attributes (use className with Tailwind)
-- [ ] Dark mode variants included
+- [ ] Dark mode variants only when values differ from light mode
+- [ ] No duplicate dark: classes with identical values
 - [ ] Consistent spacing using design tokens
-- [ ] clsx for conditional classes
+- [ ] cn() for conditional classes
 
 ### Accessibility
 - [ ] Semantic HTML elements
@@ -652,6 +655,11 @@ Before considering a component/hook complete, verify:
 // ❌ Inline styles
 <div style={{ width: 200, marginTop: 10 }}>
 
+// ❌ Duplicate dark mode classes (same value as light mode)
+<div className='text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
+<div className='bg-[var(--surface-9)] dark:bg-[var(--surface-9)]'>
+<div className='hover:bg-[var(--border)] dark:hover:bg-[var(--border)]'>
+
 // ❌ console.log
 console.log('Debug info')
 
@@ -690,6 +698,14 @@ export function Component() {
 // ✅ Tailwind classes
 <div className='w-[200px] mt-[10px]'>
 
+// ✅ No duplicate dark classes - CSS variables already handle theming
+<div className='text-[var(--text-primary)]'>
+<div className='bg-[var(--surface-9)]'>
+<div className='hover:bg-[var(--border)]'>
+
+// ✅ Only add dark: when values differ between modes
+<div className='bg-[var(--surface-6)] dark:bg-[var(--surface-9)]'>
+
 // ✅ Logger
 logger.info('Debug info', { context })
 

apps/sim/app/_shell/providers/theme-provider.tsx

@@ -7,25 +7,23 @@ import { ThemeProvider as NextThemesProvider } from 'next-themes'
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   const pathname = usePathname()
 
-  // Force dark mode for workspace pages and templates
-  // Force light mode for certain public pages
+  // Force light mode for public/marketing pages
+  // Workspace and templates respect user's theme preference from settings
   const forcedTheme =
-    pathname.startsWith('/workspace') || pathname.startsWith('/templates')
-      ? 'dark'
-      : pathname === '/' ||
-          pathname.startsWith('/login') ||
-          pathname.startsWith('/signup') ||
-          pathname.startsWith('/sso') ||
-          pathname.startsWith('/terms') ||
-          pathname.startsWith('/privacy') ||
-          pathname.startsWith('/invite') ||
-          pathname.startsWith('/verify') ||
-          pathname.startsWith('/careers') ||
-          pathname.startsWith('/changelog') ||
-          pathname.startsWith('/chat') ||
-          pathname.startsWith('/studio')
-        ? 'light'
-        : undefined
+    pathname === '/' ||
+    pathname.startsWith('/login') ||
+    pathname.startsWith('/signup') ||
+    pathname.startsWith('/sso') ||
+    pathname.startsWith('/terms') ||
+    pathname.startsWith('/privacy') ||
+    pathname.startsWith('/invite') ||
+    pathname.startsWith('/verify') ||
+    pathname.startsWith('/careers') ||
+    pathname.startsWith('/changelog') ||
+    pathname.startsWith('/chat') ||
+    pathname.startsWith('/studio')
+      ? 'light'
+      : undefined
 
   return (
     <NextThemesProvider