chore: fix button state

Author: adithyaakrishna

apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx

@@ -102,7 +102,7 @@ const OVERLAY_CLASSES = cn(
 
 const SEND_BUTTON_BASE = 'h-[28px] w-[28px] rounded-full border-0 p-0 transition-colors'
 const SEND_BUTTON_ACTIVE =
-  'bg-[var(--divider)] hover-hover:bg-[var(--text-secondary)] dark:bg-[var(--border-1)] dark:hover-hover:bg-[var(--text-body)]'
+  'bg-[var(--text-primary)] hover-hover:bg-[var(--text-secondary)] dark:bg-[var(--border-1)] dark:hover-hover:bg-[var(--text-body)]'
 const SEND_BUTTON_DISABLED = 'bg-[var(--text-subtle)] dark:bg-[var(--text-subtle)]'
 
 const MAX_CHAT_TEXTAREA_HEIGHT = 200
@@ -841,7 +841,7 @@ export function UserInput({
             <DropdownMenuTrigger asChild>
               <button
                 type='button'
-                className='flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded-full border border-[var(--landing-bg-elevated)] transition-colors hover-hover:bg-[var(--surface-3)] dark:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-4)]'
+                className='flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded-full border transition-colors hover-hover:bg-[var(--surface-3)] dark:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-4)]'
                 title='Add attachments or resources'
               >
                 <Plus className='h-[16px] w-[16px] text-[var(--text-icon)]' />

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table/table.tsx

@@ -2737,10 +2737,10 @@ const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
           <DropdownMenuTrigger asChild>
             <button
               type='button'
-              className='flex h-full w-full min-w-0 cursor-pointer items-center px-2 py-[7px]  outline-none active:cursor-grabbing'
+              className='flex h-full w-full min-w-0 cursor-pointer items-center px-2 py-[7px] outline-none active:cursor-grabbing'
             >
               <ColumnTypeIcon type={column.type} />
-              <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap font-medium text-small text-[var(--text-primary)]'>
+              <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap font-medium text-[var(--text-primary)] text-small'>
                 {column.name}
               </span>
               <ChevronDown className='ml-2 h-[7px] w-[9px] shrink-0 text-[var(--text-muted)]' />

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx

@@ -707,7 +707,7 @@ export const Toolbar = memo(
       >
         {/* Header */}
         <div
-          className='mx-[-1px] flex flex-shrink-0 cursor-pointer items-center justify-between rounded-sm border border-[var(--border)] bg-[var(--surface-4)] px-3 py-1.5'
+          className='mx-[-1px] flex flex-shrink-0 cursor-pointer items-center justify-between border border-[var(--border)] bg-[var(--surface-4)] px-3 py-1.5'
           onClick={handleSearchClick}
         >
           <h2 className='font-medium text-[var(--text-primary)] text-sm'>Toolbar</h2>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx

@@ -745,7 +745,7 @@ export const Panel = memo(function Panel() {
                 data-tab-content='copilot'
               >
                 {/* Copilot Header */}
-                <div className='mx-[-1px] flex flex-shrink-0 items-center justify-between gap-[8px] rounded-[4px] border border-[var(--border)] bg-[var(--surface-4)] px-[12px] py-[6px]'>
+                <div className='mx-[-1px] flex flex-shrink-0 items-center justify-between gap-[8px] border border-[var(--border)] bg-[var(--surface-4)] px-[12px] py-[6px]'>
                   <h2 className='min-w-0 flex-1 truncate font-medium text-[14px] text-[var(--text-primary)]'>
                     {copilotChatTitle || 'New Chat'}
                   </h2>

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

@@ -15,7 +15,7 @@ const buttonVariants = cva(
         outline:
           'text-[var(--text-secondary)] hover-hover:text-[var(--text-primary)] border border-[var(--text-muted)] bg-transparent hover-hover:border-[var(--text-secondary)]',
         primary:
-          'bg-[var(--text-primary)] text-[var(--text-inverse)] hover-hover:text-[var(--text-inverse)] hover-hover:bg-[var(--surface-4)] dark:bg-white dark:text-[var(--bg)] dark:hover-hover:bg-[var(--border-1)] dark:hover-hover:text-[var(--text-inverse)]',
+          'bg-[var(--text-primary)] text-[var(--text-inverse)] hover-hover:text-[var(--text-inverse)] hover-hover:bg-[var(--text-body)] dark:bg-white dark:text-[var(--bg)] dark:hover-hover:bg-[var(--text-secondary)] dark:hover-hover:text-[var(--bg)]',
         destructive:
           'bg-[var(--text-error)] text-white hover-hover:text-white hover-hover:brightness-106',
         secondary: 'bg-[var(--brand-secondary)] text-[var(--text-primary)]',
@@ -30,8 +30,8 @@ const buttonVariants = cva(
           'rounded-[10px] border text-white hover-hover:text-white text-base transition-[transform,background-color,color,border-color] duration-200',
       },
       size: {
-        sm: 'px-1.5 py-1 text-xs',
-        md: 'px-2 py-1.5 text-caption',
+        sm: 'px-1.5 py-1 text-[length:11px]',
+        md: 'px-2 py-1.5 text-[length:12px]',
         /** Branded size - matches login form button padding */
         branded: 'py-1.5 pr-2.5 pl-3',
       },