styling alignment

apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-header/knowledge-header.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { AlertTriangle, ChevronDown, LibraryBig, MoreHorizontal } from 'lucide-react'
+import { AlertTriangle, LibraryBig, MoreHorizontal } from 'lucide-react'
 import Link from 'next/link'
 import {
   Button,
@@ -12,6 +12,7 @@ import {
   PopoverTrigger,
   Tooltip,
 } from '@/components/emcn'
+import { ChevronDown } from '@/components/emcn/icons'
 import { Trash } from '@/components/emcn/icons/trash'
 import { filterButtonClass } from '@/app/workspace/[workspaceId]/knowledge/components/constants'
 import { useUpdateKnowledgeBase } from '@/hooks/queries/kb/knowledge'
@@ -27,10 +28,10 @@ interface BreadcrumbItem {
 const HEADER_STYLES = {
   container: 'flex items-center justify-between px-6 pt-[14px] pb-6',
   breadcrumbs: 'flex items-center gap-2',
-  icon: 'h-[18px] w-[18px] text-muted-foreground transition-colors group-hover:text-muted-foreground/70',
-  link: 'group flex items-center gap-2 font-medium text-sm transition-colors hover:text-muted-foreground',
-  label: 'font-medium text-sm',
-  separator: 'text-muted-foreground',
+  icon: 'h-[18px] w-[18px] text-[var(--text-icon)] transition-colors',
+  link: 'group flex items-center gap-2 font-medium text-sm text-[var(--text-body)] transition-colors hover:text-[var(--text-secondary)]',
+  label: 'font-medium text-sm text-[var(--text-body)]',
+  separator: 'text-[var(--text-icon)]',
   actionsContainer: 'flex items-center gap-2',
 } as const
 
@@ -175,7 +176,7 @@ export function KnowledgeHeader({ breadcrumbs, options }: KnowledgeHeaderProps)
                           ? 'Updating...'
                           : currentWorkspace?.name || 'No workspace'}
                     </span>
-                    <ChevronDown className='ml-2 h-4 w-4 text-muted-foreground' />
+                    <ChevronDown className='ml-2 h-4 w-4 text-[var(--text-icon)]' />
                   </Button>
                 </PopoverTrigger>
                 <PopoverContent align='end' side='bottom' sideOffset={4}>
@@ -185,7 +186,7 @@ export function KnowledgeHeader({ breadcrumbs, options }: KnowledgeHeaderProps)
                     showCheck
                     onClick={() => handleWorkspaceChange(null)}
                   >
-                    <span className='text-muted-foreground'>No workspace</span>
+                    <span className='text-[var(--text-secondary)]'>No workspace</span>
                   </PopoverItem>
 
                   {/* Available workspaces */}
@@ -202,7 +203,7 @@ export function KnowledgeHeader({ breadcrumbs, options }: KnowledgeHeaderProps)
 
                   {workspaces.length === 0 && !isLoadingWorkspaces && (
                     <PopoverItem disabled>
-                      <span className='text-muted-foreground text-xs'>
+                      <span className='text-[var(--text-secondary)] text-xs'>
                         No workspaces with write access
                       </span>
                     </PopoverItem>

apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credentials-manager.tsx

@@ -1557,7 +1557,7 @@ export function CredentialsManager() {
                               {copyIdSuccess ? (
                                 <Check className='h-3 w-3 text-green-500' />
                               ) : (
-                                <Clipboard className='h-3 w-3 text-muted-foreground' />
+                                <Clipboard className='h-3 w-3 text-[var(--text-icon)]' />
                               )}
                             </button>
                           </Tooltip.Trigger>

apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx

@@ -147,7 +147,7 @@ function FormattedInput({
         onChange={onChange}
         onScroll={handleScroll}
         onInput={handleScroll}
-        className='h-9 text-transparent caret-foreground placeholder:text-[var(--text-muted)]'
+        className='h-9 text-transparent caret-[var(--text-primary)] placeholder:text-[var(--text-muted)]'
       />
       <div className='pointer-events-none absolute inset-0 flex items-center overflow-hidden px-[8px] py-[6px] font-medium font-sans text-sm'>
         <div className='whitespace-nowrap' style={{ transform: `translateX(-${scrollLeft}px)` }}>

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

@@ -2,7 +2,7 @@
 
 import { useCallback, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { Columns, Rows3 } from 'lucide-react'
+import { Columns } from 'lucide-react'
 import { useRouter } from 'next/navigation'
 import {
   Badge,
@@ -14,6 +14,7 @@ import {
   ModalHeader,
   Tooltip,
 } from '@/components/emcn'
+import { Rows3 } from '@/components/emcn/icons'
 import type { TableDefinition } from '@/lib/table'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { SchemaModal } from '@/app/workspace/[workspaceId]/tables/[tableId]/components'

apps/sim/app/workspace/[workspaceId]/task/[taskId]/loading.tsx

@@ -2,7 +2,7 @@ import { Loader2 } from 'lucide-react'
 
 export default function TaskLoading() {
   return (
-    <div className='flex h-full bg-[#FCFCFC] dark:bg-[var(--surface-2)]'>
+    <div className='flex h-full bg-[var(--bg)]'>
       <div className='flex h-full min-w-0 flex-1 flex-col'>
         <div className='flex min-h-0 flex-1 items-center justify-center'>
           <Loader2 className='h-[20px] w-[20px] animate-spin text-[var(--text-tertiary)]' />

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx

@@ -2,8 +2,9 @@
 
 import { useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { ArrowDown, MoreHorizontal, Plus } from 'lucide-react'
+import { MoreHorizontal } from 'lucide-react'
 import {
+  ArrowDown,
   Button,
   ChevronDown,
   Modal,
@@ -11,6 +12,7 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader,
+  Plus,
   Popover,
   PopoverContent,
   PopoverItem,
@@ -316,7 +318,7 @@ export function WorkspaceHeader({
               <button
                 type='button'
                 aria-label='Switch workspace'
-                className='group flex h-[32px] w-full min-w-0 cursor-pointer items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-[#FCFCFC] px-[8px] transition-colors hover:bg-[var(--surface-5)] dark:bg-[var(--surface-2)] dark:hover:bg-[var(--surface-3)]'
+                className='group flex h-[32px] w-full min-w-0 cursor-pointer items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-[var(--surface-2)] px-[8px] transition-colors hover:bg-[var(--surface-5)]'
                 title={activeWorkspace?.name || 'Loading...'}
                 onContextMenu={(e) => {
                   if (activeWorkspaceFull) {
@@ -490,7 +492,7 @@ export function WorkspaceHeader({
           <button
             type='button'
             aria-label='Switch workspace'
-            className='flex h-[32px] w-full min-w-0 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-[#FCFCFC] px-[8px] dark:bg-[var(--surface-2)]'
+            className='flex h-[32px] w-full min-w-0 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-[var(--surface-2)] px-[8px]'
             title={activeWorkspace?.name || 'Loading...'}
             disabled
           >