fix(interfaces): always-light public surfaces (chat, resume, file shares, unsubscribe, invite) with emcn components (#5336)

* fix(interfaces): pin deployed chat + resume to light mode, emcn-only components

* fix(interfaces): review feedback — formErrors dep in field renderer, keep overlay tint on attachment remove

* improvement(interfaces): chat header uses the platform SimWordmark instead of the svg asset

* fix(interfaces): light mode for file-share gates, unsubscribe, and invite surfaces

Author: TheodoreSpeaks

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

@@ -1,10 +1,3 @@
-/** Shared className for primary auth/status CTA buttons on dark auth surfaces. */
-export const AUTH_PRIMARY_CTA_BASE =
-  'inline-flex h-[32px] items-center justify-center gap-2 rounded-[5px] border border-[var(--auth-primary-btn-border)] bg-[var(--auth-primary-btn-bg)] px-2.5 font-[430] font-season text-[var(--auth-primary-btn-text)] text-sm transition-colors hover:border-[var(--auth-primary-btn-hover-border)] hover:bg-[var(--auth-primary-btn-hover-bg)] hover:text-[var(--auth-primary-btn-hover-text)] disabled:cursor-not-allowed disabled:opacity-50' as const
-
-/** Full-width variant used for primary auth form submit buttons. */
-export const AUTH_SUBMIT_BTN = `${AUTH_PRIMARY_CTA_BASE} w-full` as const
-
-/** Shared className for inline auth action links on dark auth surfaces. */
+/** Shared className for inline auth action links. */
 export const AUTH_TEXT_LINK =
   'font-medium text-[var(--brand-accent)] underline-offset-4 transition hover:text-[var(--brand-accent-hover)] hover:underline disabled:cursor-not-allowed disabled:opacity-50' as const

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

@@ -14,9 +14,8 @@ interface AuthSubmitButtonProps {
 
 /**
  * The canonical full-width primary auth action — a `primary`-variant {@link Chip}
- * with the shared in-flight spinner. Replaces the legacy dark
- * `AUTH_SUBMIT_BTN` class string for every in-scope auth submit (login, signup,
- * verify, reset), so the primary CTA chrome lives in exactly one place.
+ * with the shared in-flight spinner, so the primary CTA chrome lives in
+ * exactly one place.
  */
 export function AuthSubmitButton({
   children,

apps/sim/app/(auth)/components/auth-button-classes.ts

@@ -426,7 +426,7 @@ export default function ChatClient({ identifier }: { identifier: string }) {
   }
 
   return (
-    <div className='dark fixed inset-0 z-[100] flex flex-col bg-[var(--landing-bg)] text-[var(--landing-text)]'>
+    <div className='light fixed inset-0 z-[100] flex flex-col bg-[var(--bg)] text-[var(--text-primary)]'>
       {/* Header component */}
       <ChatHeader chatConfig={chatConfig} starCount={starCount} />
 

apps/sim/app/(auth)/components/auth-submit-button.tsx

@@ -2,7 +2,7 @@ import { Skeleton } from '@sim/emcn'
 
 export default function ChatLoading() {
   return (
-    <div className='dark fixed inset-0 z-[100] flex flex-col bg-[var(--landing-bg)] text-[var(--landing-text)]'>
+    <div className='light fixed inset-0 z-[100] flex flex-col bg-[var(--bg)] text-[var(--text-primary)]'>
       <div className='border-[var(--border-1)] border-b px-4 py-3'>
         <div className='mx-auto flex max-w-3xl items-center justify-between'>
           <div className='flex items-center gap-[12px]'>

apps/sim/app/(interfaces)/chat/[identifier]/chat.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { Button } from '@sim/emcn'
 import { useRouter } from 'next/navigation'
 
 interface ChatErrorStateProps {
@@ -16,12 +17,13 @@ export function ChatErrorState({ error }: ChatErrorStateProps) {
           Chat Unavailable
         </h1>
         <p className='text-[var(--text-muted)] text-lg'>{error}</p>
-        <button
+        <Button
+          variant='primary'
           onClick={() => router.push('/workspace')}
-          className='inline-flex h-[32px] w-full items-center justify-center gap-2 rounded-[5px] border border-[var(--text-primary)] bg-[var(--text-primary)] px-2.5 text-[var(--bg)] text-sm transition-colors hover:border-[var(--text-body)] hover:bg-[var(--text-body)] disabled:cursor-not-allowed disabled:opacity-50'
+          className='h-[32px] w-full gap-2 px-2.5 text-sm'
         >
           Return to Workspace
-        </button>
+        </Button>
       </div>
     </div>
   )

apps/sim/app/(interfaces)/chat/[identifier]/loading.tsx

@@ -3,6 +3,7 @@
 import Image from 'next/image'
 import Link from 'next/link'
 import { GithubIcon } from '@/components/icons'
+import { SimWordmark } from '@/app/(landing)/components/navbar/components'
 import { useBrandConfig } from '@/ee/whitelabeling'
 
 interface ChatHeaderProps {
@@ -20,13 +21,12 @@ interface ChatHeaderProps {
 
 export function ChatHeader({ chatConfig, starCount }: ChatHeaderProps) {
   const brand = useBrandConfig()
-  const primaryColor = chatConfig?.customizations?.primaryColor || 'var(--brand)'
   const customImage = chatConfig?.customizations?.imageUrl || chatConfig?.customizations?.logoUrl
 
   return (
     <nav
       aria-label='Chat navigation'
-      className={`flex w-full items-center justify-between px-4 pt-3 pb-[21px] sm:px-8 sm:pt-[8.5px] md:px-[44px] md:pt-4`}
+      className='flex w-full items-center justify-between px-4 pt-3 pb-[21px] sm:px-8 sm:pt-[8.5px] md:px-[44px] md:pt-4'
     >
       <div className='flex items-center gap-[34px]'>
         <div className='flex items-center gap-3'>
@@ -40,7 +40,7 @@ export function ChatHeader({ chatConfig, starCount }: ChatHeaderProps) {
               className='size-6 rounded-md object-cover'
             />
           )}
-          <h2 className='font-medium text-[var(--landing-text)] text-lg'>
+          <h2 className='font-medium text-[var(--text-primary)] text-lg'>
             {chatConfig?.customizations?.headerText || chatConfig?.title || 'Chat'}
           </h2>
         </div>
@@ -52,7 +52,7 @@ export function ChatHeader({ chatConfig, starCount }: ChatHeaderProps) {
             href='https://github.com/simstudioai/sim'
             target='_blank'
             rel='noopener noreferrer'
-            className='flex items-center gap-2 text-[var(--landing-text-muted)] text-md transition-colors hover:text-[var(--landing-text)]'
+            className='flex items-center gap-2 text-[var(--text-muted)] transition-colors hover:text-[var(--text-primary)]'
             aria-label={`GitHub repository - ${starCount} stars`}
           >
             <GithubIcon className='size-[16px]' aria-hidden='true' />
@@ -65,15 +65,9 @@ export function ChatHeader({ chatConfig, starCount }: ChatHeaderProps) {
             target='_blank'
             rel='noopener noreferrer'
             aria-label='Sim home'
+            className='flex items-center'
           >
-            <Image
-              src='/logo/sim-landing.svg'
-              alt='Sim'
-              width={71}
-              height={22}
-              className='h-[22px] w-auto'
-              priority
-            />
+            <SimWordmark />
           </Link>
         </div>
       )}

apps/sim/app/(interfaces)/chat/components/error-state/error-state.tsx

@@ -2,7 +2,7 @@
 
 import type React from 'react'
 import { useCallback, useLayoutEffect, useRef, useState } from 'react'
-import { Badge, cn, handleKeyboardActivation, Tooltip } from '@sim/emcn'
+import { Badge, Button, cn, handleKeyboardActivation, Tooltip } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { generateId } from '@sim/utils/id'
 import { ArrowUp, Mic, Paperclip, X } from 'lucide-react'
@@ -168,7 +168,7 @@ export const ChatInput: React.FC<{
 
   return (
     <Tooltip.Provider>
-      <div className='fixed right-0 bottom-0 left-0 flex w-full items-center justify-center bg-gradient-to-t from-[var(--landing-bg)] to-transparent px-4 pb-4 md:px-0 md:pb-4'>
+      <div className='fixed right-0 bottom-0 left-0 flex w-full items-center justify-center bg-gradient-to-t from-[var(--bg)] to-transparent px-4 pb-4 md:px-0 md:pb-4'>
         <div className='w-full max-w-3xl md:max-w-[748px]'>
           {/* Error Messages */}
           {uploadErrors.length > 0 && (
@@ -191,7 +191,7 @@ export const ChatInput: React.FC<{
               handleKeyboardActivation(event, focusTextarea)
             }}
             className={cn(
-              'relative z-10 cursor-text rounded-2xl border border-[var(--border-1)] bg-[var(--landing-bg-elevated)] px-2.5 py-2',
+              'relative z-10 cursor-text rounded-2xl border border-[var(--border-1)] bg-[var(--surface-2)] px-2.5 py-2',
               isDragOver && 'border-purple-500'
             )}
             onDragEnter={(e) => {
@@ -222,31 +222,31 @@ export const ChatInput: React.FC<{
                 {attachedFiles.map((file) => (
                   <Tooltip.Root key={file.id}>
                     <Tooltip.Trigger asChild>
-                      <div className='group relative size-[56px] flex-shrink-0 cursor-pointer overflow-hidden rounded-[8px] border border-[var(--border-1)] bg-[var(--landing-bg)]'>
+                      <div className='group relative size-[56px] flex-shrink-0 cursor-pointer overflow-hidden rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-3)]'>
                         {file.dataUrl ? (
                           <img
                             src={file.dataUrl}
                             alt={file.name}
                             className='h-full w-full object-cover'
                           />
                         ) : (
-                          <div className='flex h-full w-full flex-col items-center justify-center gap-0.5 text-[var(--landing-text-muted)]'>
+                          <div className='flex h-full w-full flex-col items-center justify-center gap-0.5 text-[var(--text-muted)]'>
                             <Paperclip className='size-[18px]' />
                             <span className='max-w-[48px] truncate px-[2px] text-[9px]'>
                               {file.name.split('.').pop()}
                             </span>
                           </div>
                         )}
-                        <button
-                          type='button'
+                        <Button
+                          variant='ghost'
                           onClick={(e) => {
                             e.stopPropagation()
                             handleRemoveFile(file.id)
                           }}
-                          className='absolute top-[2px] right-[2px] flex size-[16px] items-center justify-center rounded-full bg-black/60 opacity-0 group-hover:opacity-100'
+                          className='absolute top-[2px] right-[2px] size-[16px] rounded-full bg-black/60 p-0 text-white opacity-0 hover-hover:text-white group-hover:opacity-100'
                         >
-                          <X className='size-[10px] text-white' />
-                        </button>
+                          <X className='size-[10px]' />
+                        </Button>
                       </div>
                     </Tooltip.Trigger>
                     <Tooltip.Content side='top'>
@@ -265,7 +265,7 @@ export const ChatInput: React.FC<{
               onKeyDown={handleKeyDown}
               placeholder={isDragOver ? 'Drop files here...' : 'Enter a message...'}
               rows={1}
-              className='m-0 h-auto min-h-[24px] w-full resize-none overflow-y-auto overflow-x-hidden border-0 bg-transparent p-1 text-[15px] text-[var(--landing-text)] leading-[24px] caret-[var(--landing-text)] outline-none [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-[var(--landing-text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0 [&::-webkit-scrollbar]:hidden'
+              className='m-0 h-auto min-h-[24px] w-full resize-none overflow-y-auto overflow-x-hidden border-0 bg-transparent p-1 text-[15px] text-[var(--text-primary)] leading-[24px] caret-[var(--text-primary)] outline-none [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-[var(--text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0 [&::-webkit-scrollbar]:hidden'
             />
 
             {/* Bottom row */}
@@ -274,14 +274,14 @@ export const ChatInput: React.FC<{
               <div>
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
-                    <button
-                      type='button'
+                    <Button
+                      variant='quiet'
                       onClick={() => fileInputRef.current?.click()}
                       disabled={isStreaming || attachedFiles.length >= 15}
-                      className='flex size-[28px] items-center justify-center rounded-full text-[var(--landing-text-muted)] transition-colors hover:bg-[#F7F7F7] disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-[#303030]'
+                      className='size-[28px] rounded-full p-0'
                     >
                       <Paperclip className='size-[16px]' strokeWidth={2} />
-                    </button>
+                    </Button>
                   </Tooltip.Trigger>
                   <Tooltip.Content side='top'>
                     <p>Attach files</p>
@@ -307,14 +307,14 @@ export const ChatInput: React.FC<{
                 {sttAvailable && (
                   <Tooltip.Root>
                     <Tooltip.Trigger asChild>
-                      <button
-                        type='button'
+                      <Button
+                        variant='quiet'
                         onClick={onVoiceStart}
                         disabled={isStreaming}
-                        className='flex size-[28px] items-center justify-center rounded-full text-[var(--landing-text-muted)] transition-colors hover:bg-[#F7F7F7] disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-[#303030]'
+                        className='size-[28px] rounded-full p-0'
                       >
                         <Mic className='size-[16px]' strokeWidth={2} />
-                      </button>
+                      </Button>
                     </Tooltip.Trigger>
                     <Tooltip.Content side='top'>
                       <p>Start voice conversation</p>
@@ -323,37 +323,29 @@ export const ChatInput: React.FC<{
                 )}
 
                 {isStreaming ? (
-                  <button
-                    type='button'
+                  <Button
+                    variant='primary'
                     onClick={onStopStreaming}
-                    className='flex size-[28px] items-center justify-center rounded-full border-0 bg-[#383838] p-0 transition-colors hover:bg-[#575757] dark:bg-[#E0E0E0] dark:hover:bg-[#CFCFCF]'
+                    className='size-[28px] rounded-full p-0'
                     title='Stop generation'
                   >
                     <svg
-                      className='block size-[14px] fill-white dark:fill-black'
+                      className='block size-[14px] fill-current'
                       viewBox='0 0 24 24'
                       xmlns='http://www.w3.org/2000/svg'
                     >
                       <rect x='4' y='4' width='16' height='16' rx='3' ry='3' />
                     </svg>
-                  </button>
+                  </Button>
                 ) : (
-                  <button
-                    type='button'
+                  <Button
+                    variant='primary'
                     onClick={handleSubmit}
                     disabled={!canSubmit}
-                    className={cn(
-                      'flex h-[28px] w-[28px] items-center justify-center rounded-full border-0 p-0 transition-colors',
-                      canSubmit
-                        ? 'bg-[#383838] hover:bg-[#575757] dark:bg-[#E0E0E0] dark:hover:bg-[#CFCFCF]'
-                        : 'bg-[#808080] dark:bg-[#808080]'
-                    )}
+                    className='size-[28px] rounded-full p-0'
                   >
-                    <ArrowUp
-                      className='block size-[16px] text-white dark:text-black'
-                      strokeWidth={2.25}
-                    />
-                  </button>
+                    <ArrowUp className='block size-[16px]' strokeWidth={2.25} />
+                  </Button>
                 )}
               </div>
             </div>