From 29395381eaac2c7d0e983cfc3bc0be237702849b Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sat, 20 Jun 2026 18:44:17 +0200
Subject: [PATCH] refactor: tokenize Files and Auth surfaces, text, borders,
 and CTAs

---
 client/src/components/Auth/AuthLayout.tsx     |  6 ++--
 client/src/components/Auth/Footer.tsx         |  2 +-
 client/src/components/Auth/Login.tsx          |  2 +-
 client/src/components/Auth/LoginForm.tsx      |  4 +--
 client/src/components/Auth/Registration.tsx   |  6 ++--
 .../components/Auth/RequestPasswordReset.tsx  |  4 +--
 .../src/components/Auth/SocialLoginRender.tsx |  6 ++--
 .../src/components/Auth/TwoFactorScreen.tsx   |  8 +++--
 client/src/components/Auth/VerifyEmail.tsx    | 12 +++----
 client/src/components/Files/ActionButton.tsx  |  2 +-
 .../src/components/Files/DeleteIconButton.tsx |  5 ++-
 .../components/Files/FileDashboardView.tsx    |  4 +--
 .../Files/FileList/DataTableFile.tsx          | 14 ++++----
 .../Files/FileList/FileListItem.tsx           |  8 ++---
 .../Files/FileList/FileListItem2.tsx          |  8 ++---
 .../components/Files/FileList/FilePreview.tsx | 26 +++++++-------
 .../Files/FileList/FileTableColumns.tsx       |  4 +--
 .../Files/FileList/UploadFileButton.tsx       |  2 +-
 .../Files/FileList/UploadFileModal.tsx        | 12 ++++---
 client/src/components/Files/FilesListView.tsx |  2 +-
 .../components/Files/FilesSectionSelector.tsx |  2 +-
 .../Files/VectorStore/VectorStoreButton.tsx   |  2 +-
 .../Files/VectorStore/VectorStoreListItem.tsx | 10 +++---
 .../Files/VectorStore/VectorStorePreview.tsx  | 36 ++++++++++---------
 .../src/components/Files/VectorStoreView.tsx  |  2 +-
 25 files changed, 97 insertions(+), 92 deletions(-)

diff --git a/client/src/components/Auth/AuthLayout.tsx b/client/src/components/Auth/AuthLayout.tsx
index 1aad9a94e7..76bc5c70f4 100644
--- a/client/src/components/Auth/AuthLayout.tsx
+++ b/client/src/components/Auth/AuthLayout.tsx
@@ -57,7 +57,7 @@ function AuthLayout({
   };
 
   return (
-    <div className="relative flex min-h-screen flex-col bg-white dark:bg-gray-900">
+    <div className="relative flex min-h-screen flex-col bg-surface-primary">
       <Banner />
       <BlinkAnimation active={isFetching}>
         <div className="mt-6 h-10 w-full bg-cover">
@@ -74,10 +74,10 @@ function AuthLayout({
       </div>
 
       <main className="flex flex-grow items-center justify-center">
-        <div className="w-authPageWidth overflow-hidden bg-white px-6 py-4 dark:bg-gray-900 sm:max-w-md sm:rounded-lg">
+        <div className="w-authPageWidth overflow-hidden bg-surface-primary px-6 py-4 sm:max-w-md sm:rounded-lg">
           {!hasStartupConfigError && !isFetching && header && (
             <h1
-              className="mb-4 text-center text-3xl font-semibold text-black dark:text-white"
+              className="mb-4 text-center text-3xl font-semibold text-text-primary"
               style={{ userSelect: 'none' }}
             >
               {header}
diff --git a/client/src/components/Auth/Footer.tsx b/client/src/components/Auth/Footer.tsx
index fccd099eef..9513ab7269 100644
--- a/client/src/components/Auth/Footer.tsx
+++ b/client/src/components/Auth/Footer.tsx
@@ -37,7 +37,7 @@ function Footer({ startupConfig }: { startupConfig: TStartupConfig | null | unde
     <div className="align-end m-4 flex justify-center gap-2" role="contentinfo">
       {privacyPolicyRender}
       {privacyPolicyRender && termsOfServiceRender && (
-        <div className="border-r-[1px] border-gray-300 dark:border-gray-600" />
+        <div className="border-r-[1px] border-border-medium" />
       )}
       {termsOfServiceRender}
     </div>
diff --git a/client/src/components/Auth/Login.tsx b/client/src/components/Auth/Login.tsx
index 7c3adf51bd..a8b637671e 100644
--- a/client/src/components/Auth/Login.tsx
+++ b/client/src/components/Auth/Login.tsx
@@ -110,7 +110,7 @@ function Login() {
         />
       )}
       {startupConfig?.registrationEnabled === true && (
-        <p className="my-4 text-center text-sm font-light text-gray-700 dark:text-white">
+        <p className="my-4 text-center text-sm font-light text-text-secondary">
           {' '}
           {localize('com_auth_no_account')}{' '}
           <a
diff --git a/client/src/components/Auth/LoginForm.tsx b/client/src/components/Auth/LoginForm.tsx
index 31665dbf07..28e49ef6c4 100644
--- a/client/src/components/Auth/LoginForm.tsx
+++ b/client/src/components/Auth/LoginForm.tsx
@@ -59,7 +59,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
   const renderError = (fieldName: string) => {
     const errorMessage = errors[fieldName]?.message;
     return errorMessage ? (
-      <span role="alert" className="mt-1 text-sm text-red-600 dark:text-red-500">
+      <span role="alert" className="mt-1 text-sm text-text-destructive">
         {String(errorMessage)}
       </span>
     ) : null;
@@ -76,7 +76,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
   return (
     <>
       {showResendLink && (
-        <div className="mt-2 rounded-md border border-green-500 bg-green-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-200">
+        <div className="mt-2 rounded-md border border-green-500 bg-green-500/10 px-3 py-2 text-sm text-text-secondary">
           {localize('com_auth_email_verification_resend_prompt')}
           <button
             type="button"
diff --git a/client/src/components/Auth/Registration.tsx b/client/src/components/Auth/Registration.tsx
index e37e3a7a50..fd2a274978 100644
--- a/client/src/components/Auth/Registration.tsx
+++ b/client/src/components/Auth/Registration.tsx
@@ -116,7 +116,7 @@ const Registration: React.FC = () => {
           )}
         </div>
         {errors[id] && (
-          <span role="alert" className="mt-1 text-sm text-red-500">
+          <span role="alert" className="mt-1 text-sm text-text-destructive">
             {String(errors[id]?.message) ?? ''}
           </span>
         )}
@@ -133,7 +133,7 @@ const Registration: React.FC = () => {
       )}
       {registerUser.isSuccess && countdown > 0 && (
         <div
-          className="rounded-md border border-green-500 bg-green-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-200"
+          className="rounded-md border border-green-500 bg-green-500/10 px-3 py-2 text-sm text-text-secondary"
           role="alert"
         >
           {localize(
@@ -239,7 +239,7 @@ const Registration: React.FC = () => {
             </div>
           </form>
 
-          <p className="my-4 text-center text-sm font-light text-gray-700 dark:text-white">
+          <p className="my-4 text-center text-sm font-light text-text-secondary">
             {localize('com_auth_already_have_account')}{' '}
             <a
               href={loginPage()}
diff --git a/client/src/components/Auth/RequestPasswordReset.tsx b/client/src/components/Auth/RequestPasswordReset.tsx
index d95954cf00..7a2368cbda 100644
--- a/client/src/components/Auth/RequestPasswordReset.tsx
+++ b/client/src/components/Auth/RequestPasswordReset.tsx
@@ -110,13 +110,13 @@ function RequestPasswordReset() {
           />
           <label
             htmlFor="email"
-            className="absolute -top-2 left-2 z-10 bg-white px-2 text-sm text-gray-600 transition-all peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-focus:-top-2 peer-focus:text-sm peer-focus:text-green-600 dark:bg-gray-900 dark:text-gray-400 dark:peer-focus:text-green-500"
+            className="absolute -top-2 left-2 z-10 bg-surface-primary px-2 text-sm text-text-secondary transition-all peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-placeholder-shown:text-text-tertiary peer-focus:-top-2 peer-focus:text-sm peer-focus:text-green-600 dark:peer-focus:text-green-500"
           >
             {localize('com_auth_email_address')}
           </label>
         </div>
         {errors.email && (
-          <p role="alert" className="text-sm font-medium text-red-600 dark:text-red-400">
+          <p role="alert" className="text-sm font-medium text-text-destructive">
             {errors.email.message}
           </p>
         )}
diff --git a/client/src/components/Auth/SocialLoginRender.tsx b/client/src/components/Auth/SocialLoginRender.tsx
index ad76354a53..b4f2ac18ba 100644
--- a/client/src/components/Auth/SocialLoginRender.tsx
+++ b/client/src/components/Auth/SocialLoginRender.tsx
@@ -122,10 +122,8 @@ function SocialLoginRender({
       <>
         {startupConfig.emailLoginEnabled && (
           <>
-            <div className="relative mt-6 flex w-full items-center justify-center border border-t border-gray-300 uppercase dark:border-gray-600">
-              <div className="absolute bg-white px-3 text-xs text-black dark:bg-gray-900 dark:text-white">
-                Or
-              </div>
+            <div className="relative mt-6 flex w-full items-center justify-center border border-t border-border-medium uppercase">
+              <div className="absolute bg-surface-primary px-3 text-xs text-text-primary">Or</div>
             </div>
             <div className="mt-8" />
           </>
diff --git a/client/src/components/Auth/TwoFactorScreen.tsx b/client/src/components/Auth/TwoFactorScreen.tsx
index 11eab660c7..936a4e088e 100644
--- a/client/src/components/Auth/TwoFactorScreen.tsx
+++ b/client/src/components/Auth/TwoFactorScreen.tsx
@@ -105,7 +105,9 @@ const TwoFactorScreen: React.FC = React.memo(() => {
                 </InputOTP>
               )}
             />
-            {errors.token && <span className="text-sm text-red-500">{errors.token.message}</span>}
+            {errors.token && (
+              <span className="text-sm text-text-destructive">{errors.token.message}</span>
+            )}
           </div>
         )}
         {useBackup && (
@@ -134,7 +136,7 @@ const TwoFactorScreen: React.FC = React.memo(() => {
               )}
             />
             {errors.backupCode && (
-              <span className="text-sm text-red-500">{errors.backupCode.message}</span>
+              <span className="text-sm text-text-destructive">{errors.backupCode.message}</span>
             )}
           </div>
         )}
@@ -144,7 +146,7 @@ const TwoFactorScreen: React.FC = React.memo(() => {
             aria-label={localize('com_auth_continue')}
             data-testid="login-button"
             disabled={isLoading}
-            className="w-full rounded-2xl bg-green-600 px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:opacity-80 dark:bg-green-600 dark:hover:bg-green-700"
+            className="w-full rounded-2xl bg-surface-submit px-4 py-3 text-sm font-medium text-white transition-colors hover:bg-surface-submit-hover disabled:opacity-80"
           >
             {isLoading ? localize('com_auth_email_verifying_ellipsis') : localize('com_ui_verify')}
           </button>
diff --git a/client/src/components/Auth/VerifyEmail.tsx b/client/src/components/Auth/VerifyEmail.tsx
index 4c24b5437b..9b4275e2c9 100644
--- a/client/src/components/Auth/VerifyEmail.tsx
+++ b/client/src/components/Auth/VerifyEmail.tsx
@@ -78,16 +78,14 @@ function RequestPasswordReset() {
 
   const VerificationSuccess = () => (
     <div className="flex flex-col items-center justify-center">
-      <h1 className="mb-4 text-center text-3xl font-semibold text-black dark:text-white">
-        {headerText}
-      </h1>
+      <h1 className="mb-4 text-center text-3xl font-semibold text-text-primary">{headerText}</h1>
       {countdown > 0 && (
-        <p className="text-center text-lg text-gray-600 dark:text-gray-400">
+        <p className="text-center text-lg text-text-secondary">
           {localize('com_auth_email_verification_redirecting', { 0: countdown.toString() })}
         </p>
       )}
       {showResendLink && countdown === 0 && (
-        <p className="text-center text-lg text-gray-600 dark:text-gray-400">
+        <p className="text-center text-lg text-text-secondary">
           {localize('com_auth_email_verification_resend_prompt')}
           <button
             className="ml-2 text-link hover:underline"
@@ -103,7 +101,7 @@ function RequestPasswordReset() {
 
   const VerificationInProgress = () => (
     <div className="flex flex-col items-center justify-center">
-      <h1 className="mb-4 text-center text-3xl font-semibold text-black dark:text-white">
+      <h1 className="mb-4 text-center text-3xl font-semibold text-text-primary">
         {localize('com_auth_email_verification_in_progress')}
       </h1>
       <div className="mt-4 flex justify-center">
@@ -113,7 +111,7 @@ function RequestPasswordReset() {
   );
 
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 dark:bg-gray-900 sm:pt-0">
+    <div className="flex min-h-screen flex-col items-center justify-center bg-surface-primary pt-6 sm:pt-0">
       <div className="absolute bottom-0 left-0 m-4">
         <ThemeSelector />
       </div>
diff --git a/client/src/components/Files/ActionButton.tsx b/client/src/components/Files/ActionButton.tsx
index 0d4c59f8d7..9bb096c683 100644
--- a/client/src/components/Files/ActionButton.tsx
+++ b/client/src/components/Files/ActionButton.tsx
@@ -11,7 +11,7 @@ export default function ActionButton({ onClick }: ActionButtonProps) {
   return (
     <div className="w-32">
       <Button
-        className="w-full rounded-md border border-black bg-white p-0 text-black hover:bg-black hover:text-white"
+        className="w-full rounded-md border border-text-primary bg-surface-primary p-0 text-text-primary hover:bg-primary hover:text-primary-foreground"
         onClick={onClick}
       >
         {/* Action Button */}
diff --git a/client/src/components/Files/DeleteIconButton.tsx b/client/src/components/Files/DeleteIconButton.tsx
index 0173a3d577..3d944e7094 100644
--- a/client/src/components/Files/DeleteIconButton.tsx
+++ b/client/src/components/Files/DeleteIconButton.tsx
@@ -8,7 +8,10 @@ type DeleteIconButtonProps = {
 export default function DeleteIconButton({ onClick }: DeleteIconButtonProps) {
   return (
     <div className="w-fit">
-      <Button className="bg-red-400 p-3" onClick={onClick}>
+      <Button
+        className="bg-surface-destructive p-3 hover:bg-surface-destructive-hover"
+        onClick={onClick}
+      >
         <TrashIcon />
       </Button>
     </div>
diff --git a/client/src/components/Files/FileDashboardView.tsx b/client/src/components/Files/FileDashboardView.tsx
index 20d7a7800a..fb86b14286 100644
--- a/client/src/components/Files/FileDashboardView.tsx
+++ b/client/src/components/Files/FileDashboardView.tsx
@@ -7,7 +7,7 @@ const FileDashboardView = () => {
   const params = useParams();
   const navigate = useNavigate();
   return (
-    <div className="bg-[#f9f9f9] p-0 lg:p-7">
+    <div className="bg-surface-primary p-0 lg:p-7">
       <div className="ml-3 mt-3 flex flex-row justify-between">
         {params.vectorStoreId && (
           <Button
@@ -22,7 +22,7 @@ const FileDashboardView = () => {
           </Button>
         )}
       </div>
-      <div className="flex h-screen max-w-full flex-row divide-x bg-[#f9f9f9]">
+      <div className="flex h-screen max-w-full flex-row divide-x bg-surface-primary">
         <div className={`w-full lg:w-1/3 ${params.vectorStoreId ? 'hidden lg:block' : ''}`}>
           <VectorStoreSidePanel />
         </div>
diff --git a/client/src/components/Files/FileList/DataTableFile.tsx b/client/src/components/Files/FileList/DataTableFile.tsx
index 269001d0a3..f62d673208 100644
--- a/client/src/components/Files/FileList/DataTableFile.tsx
+++ b/client/src/components/Files/FileList/DataTableFile.tsx
@@ -117,7 +117,7 @@ export default function DataTableFile<TData, TValue>({
               {isDeleting ? (
                 <Spinner className="h-4 w-4" />
               ) : (
-                <TrashIcon className="h-4 w-4 text-red-400" />
+                <TrashIcon className="h-4 w-4 text-text-destructive" />
               )}
               {localize('com_ui_delete')}
             </Button>
@@ -132,7 +132,7 @@ export default function DataTableFile<TData, TValue>({
               </DropdownMenuTrigger>
               <DropdownMenuContent
                 align="end"
-                className="z-[1001] dark:border-gray-700 dark:bg-gray-850"
+                className="z-[1001] border-border-light bg-surface-dialog"
               >
                 {table
                   .getAllColumns()
@@ -141,7 +141,7 @@ export default function DataTableFile<TData, TValue>({
                     return (
                       <DropdownMenuCheckboxItem
                         key={column.id}
-                        className="cursor-pointer capitalize dark:text-white dark:hover:bg-gray-800"
+                        className="cursor-pointer capitalize text-text-primary hover:bg-surface-hover"
                         checked={column.getIsVisible()}
                         onCheckedChange={(value) => column.toggleVisibility(Boolean(value))}
                       >
@@ -192,7 +192,7 @@ export default function DataTableFile<TData, TValue>({
                   return (
                     <TableHead
                       key={header.id}
-                      className="align-start sticky top-0 rounded-t border-b border-black/10 bg-white px-2 py-1 text-left font-medium text-gray-700 dark:border-white/10 dark:bg-gray-700 dark:text-gray-100 sm:px-4 sm:py-2"
+                      className="align-start sticky top-0 rounded-t border-b border-black/10 bg-surface-secondary px-2 py-1 text-left font-medium text-text-secondary dark:border-white/10 sm:px-4 sm:py-2"
                       style={style}
                     >
                       {header.isPlaceholder
@@ -210,7 +210,7 @@ export default function DataTableFile<TData, TValue>({
                 <TableRow
                   key={row.id}
                   data-state={row.getIsSelected() && 'selected'}
-                  className="border-b border-black/10 text-left text-gray-600 dark:border-white/10 dark:text-gray-300 [tr:last-child_&]:border-b-0"
+                  className="border-b border-black/10 text-left text-text-secondary dark:border-white/10 [tr:last-child_&]:border-b-0"
                 >
                   {row.getVisibleCells().map((cell, index) => {
                     const maxWidth =
@@ -254,7 +254,7 @@ export default function DataTableFile<TData, TValue>({
           })}
         </div>
         <Button
-          className="dark:border-gray-500 dark:hover:bg-gray-600"
+          className="border-border-medium hover:bg-surface-hover"
           variant="outline"
           size="sm"
           onClick={() => table.previousPage()}
@@ -263,7 +263,7 @@ export default function DataTableFile<TData, TValue>({
           {localize('com_ui_prev')}
         </Button>
         <Button
-          className="dark:border-gray-500 dark:hover:bg-gray-600"
+          className="border-border-medium hover:bg-surface-hover"
           variant="outline"
           size="sm"
           onClick={() => table.nextPage()}
diff --git a/client/src/components/Files/FileList/FileListItem.tsx b/client/src/components/Files/FileList/FileListItem.tsx
index e7ee5d1d29..314fda511e 100644
--- a/client/src/components/Files/FileList/FileListItem.tsx
+++ b/client/src/components/Files/FileList/FileListItem.tsx
@@ -10,18 +10,18 @@ type FileListItemProps = {
 
 export default function FileListItem({ file, deleteFile, width = '400px' }: FileListItemProps) {
   return (
-    <div className="w-100 my-3 mr-2 flex cursor-pointer flex-row rounded-md border border-0 bg-white p-4 transition duration-300 ease-in-out hover:bg-slate-200">
+    <div className="w-100 my-3 mr-2 flex cursor-pointer flex-row rounded-md border border-0 bg-surface-secondary p-4 transition duration-300 ease-in-out hover:bg-surface-hover">
       <div className="flex w-1/2 flex-col justify-around align-middle">
         <strong>{file.filename}</strong>
-        <p className="text-sm text-gray-500">{file.object}</p>
+        <p className="text-sm text-text-tertiary">{file.object}</p>
       </div>
-      <div className="w-2/6 text-gray-500">
+      <div className="w-2/6 text-text-tertiary">
         <p>({file.bytes / 1000}KB)</p>
         <p className="text-sm">{file.createdAt?.toString()}</p>
       </div>
       <div className="flex w-1/6 justify-around">
         <Button
-          className="my-0 ml-3 bg-transparent p-0 text-[#666666] hover:bg-slate-200"
+          className="my-0 ml-3 bg-transparent p-0 text-text-destructive hover:bg-surface-hover"
           onClick={() => deleteFile(file._id)}
         >
           <TrashIcon className="m-0 p-0" />
diff --git a/client/src/components/Files/FileList/FileListItem2.tsx b/client/src/components/Files/FileList/FileListItem2.tsx
index b692a69625..1a8401e8c2 100644
--- a/client/src/components/Files/FileList/FileListItem2.tsx
+++ b/client/src/components/Files/FileList/FileListItem2.tsx
@@ -22,7 +22,7 @@ export default function FileListItem2({
       onClick={() => {
         navigate('file_id_abcdef');
       }}
-      className="w-100 mt-2 flex h-fit cursor-pointer flex-row rounded-md border border-0 bg-white p-4 transition duration-300 ease-in-out hover:bg-slate-200"
+      className="w-100 mt-2 flex h-fit cursor-pointer flex-row rounded-md border border-0 bg-surface-secondary p-4 transition duration-300 ease-in-out hover:bg-surface-hover"
     >
       <div className="flex w-10/12 flex-col justify-around md:flex-row">
         <div className="flex w-2/5 flex-row">
@@ -31,7 +31,7 @@ export default function FileListItem2({
           </div>
           <div className="w-3/4 content-center">{file.filename}</div>
         </div>
-        <div className="flex w-fit flex-row flex-wrap text-gray-500 md:w-3/5">
+        <div className="flex w-fit flex-row flex-wrap text-text-tertiary md:w-3/5">
           {attachedVectorStores.map((vectorStore, index) => {
             if (index === 4) {
               return (
@@ -60,11 +60,11 @@ export default function FileListItem2({
         </div>
       </div>
       <div className="mr-0 flex w-2/12 flex-col items-center justify-evenly sm:mr-4 md:flex-row">
-        <Button className="w-min content-center bg-transparent text-gray-500 hover:bg-slate-200">
+        <Button className="w-min content-center bg-transparent text-text-tertiary hover:bg-surface-hover">
           <DotsIcon className="text-grey-100" />
         </Button>
         <Button
-          className="w-min bg-transparent text-[#666666] hover:bg-slate-200"
+          className="w-min bg-transparent text-text-destructive hover:bg-surface-hover"
           onClick={() => deleteFile(file._id)}
         >
           <TrashIcon className="" />
diff --git a/client/src/components/Files/FileList/FilePreview.tsx b/client/src/components/Files/FileList/FilePreview.tsx
index 0b416fa704..d3fc838472 100644
--- a/client/src/components/Files/FileList/FilePreview.tsx
+++ b/client/src/components/Files/FileList/FilePreview.tsx
@@ -44,7 +44,7 @@ export default function FilePreview() {
   const params = useParams();
 
   return (
-    <div className="m-3 bg-white p-2 sm:p-4 md:p-6 lg:p-10">
+    <div className="m-3 bg-surface-primary p-2 sm:p-4 md:p-6 lg:p-10">
       <div className="flex flex-col justify-between md:flex-row">
         <div className="flex flex-col">
           <b className="hidden text-sm md:text-base lg:block lg:text-lg">FILE</b>
@@ -73,18 +73,18 @@ export default function FilePreview() {
       <div className="mt-3 flex flex-col">
         <div className="flex flex-row">
           <span className="flex w-1/2 flex-row items-center sm:w-1/4 md:w-2/5">
-            <InfoIcon className="size-4 text-gray-500" />
+            <InfoIcon className="size-4 text-text-tertiary" />
             &nbsp; File ID
           </span>
-          <span className="w-1/2 text-gray-500 sm:w-3/4 md:w-3/5">{file._id}</span>
+          <span className="w-1/2 text-text-tertiary sm:w-3/4 md:w-3/5">{file._id}</span>
         </div>
         <div className="mt-3 flex flex-row">
           <span className="flex w-1/2 flex-row items-center sm:w-1/4 md:w-2/5">
-            <CircleIcon className="m-0 size-4 p-0 text-gray-500" />
+            <CircleIcon className="m-0 size-4 p-0 text-text-tertiary" />
             &nbsp; Status
           </span>
           <div className="w-1/2 sm:w-3/4 md:w-3/5">
-            <span className="flex w-20 flex-row items-center justify-evenly rounded-full bg-[#f2f8ec] p-1 text-[#91c561]">
+            <span className="flex w-20 flex-row items-center justify-evenly rounded-full bg-status-success-subtle p-1 text-status-success">
               <CheckMark className="m-0 p-0" />
               <div>{file.object}</div>
             </span>
@@ -92,24 +92,24 @@ export default function FilePreview() {
         </div>
         <div className="mt-3 flex flex-row">
           <span className="flex w-1/2 flex-row items-center sm:w-1/4 md:w-2/5">
-            <Clock3Icon className="m-0 size-4 p-0 text-gray-500" />
+            <Clock3Icon className="m-0 size-4 p-0 text-text-tertiary" />
             &nbsp; Purpose
           </span>
-          <span className="w-1/2 text-gray-500 sm:w-3/4 md:w-3/5">{file.message}</span>
+          <span className="w-1/2 text-text-tertiary sm:w-3/4 md:w-3/5">{file.message}</span>
         </div>
         <div className="mt-3 flex flex-row">
           <span className="flex w-1/2 flex-row items-center sm:w-1/4 md:w-2/5">
-            <Clock3Icon className="m-0 size-4 p-0 text-gray-500" />
+            <Clock3Icon className="m-0 size-4 p-0 text-text-tertiary" />
             &nbsp; Size
           </span>
-          <span className="w-1/2 text-gray-500 sm:w-3/4 md:w-3/5">{file.bytes}</span>
+          <span className="w-1/2 text-text-tertiary sm:w-3/4 md:w-3/5">{file.bytes}</span>
         </div>
         <div className="mt-3 flex flex-row">
           <span className="flex w-1/2 flex-row items-center sm:w-1/4 md:w-2/5">
-            <Clock3Icon className="m-0 size-4 p-0 text-gray-500" />
+            <Clock3Icon className="m-0 size-4 p-0 text-text-tertiary" />
             &nbsp; Created At
           </span>
-          <span className="w-1/2 text-gray-500 sm:w-3/4 md:w-3/5">
+          <span className="w-1/2 text-text-tertiary sm:w-3/4 md:w-3/5">
             {file.createdAt?.toString()}
           </span>
         </div>
@@ -133,7 +133,7 @@ export default function FilePreview() {
                 <div className="flex w-3/5 flex-row md:w-1/2 xl:w-1/3">
                   <div className="content-center text-nowrap">{vectors.created_at.toString()}</div>
                   <Button
-                    className="m-0 ml-3 h-full bg-transparent p-0 text-[#666666] hover:bg-slate-200"
+                    className="m-0 ml-3 h-full bg-transparent p-0 text-text-destructive hover:bg-surface-hover"
                     onClick={() => {
                       console.log('Remove from vector store');
                     }}
@@ -161,7 +161,7 @@ export default function FilePreview() {
                 <div className="flex w-3/5 flex-row md:w-1/2 xl:w-1/3">
                   <div className="content-center text-nowrap">{thread.createdAt}</div>
                   <Button
-                    className="m-0 ml-3 h-full bg-transparent p-0 text-[#666666] hover:bg-slate-200"
+                    className="m-0 ml-3 h-full bg-transparent p-0 text-text-destructive hover:bg-surface-hover"
                     onClick={() => {
                       console.log('Remove from thread');
                     }}
diff --git a/client/src/components/Files/FileList/FileTableColumns.tsx b/client/src/components/Files/FileList/FileTableColumns.tsx
index bbad347318..047b51d9dd 100644
--- a/client/src/components/Files/FileList/FileTableColumns.tsx
+++ b/client/src/components/Files/FileList/FileTableColumns.tsx
@@ -80,7 +80,7 @@ export const fileTableColumns: ColumnDef<TFileWithVectors>[] = [
               return (
                 <span
                   key={index}
-                  className="ml-2 mt-2 flex w-fit flex-row items-center rounded-full bg-[#f5f5f5] px-2 text-gray-500"
+                  className="ml-2 mt-2 flex w-fit flex-row items-center rounded-full bg-surface-tertiary px-2 text-text-tertiary"
                 >
                   <PlusIcon className="h-3 w-3" />
                   &nbsp;
@@ -119,7 +119,7 @@ export const fileTableColumns: ColumnDef<TFileWithVectors>[] = [
     cell: () => {
       return (
         <>
-          <Button className="w-min content-center bg-transparent text-gray-500 hover:bg-slate-200">
+          <Button className="w-min content-center bg-transparent text-text-tertiary hover:bg-surface-hover">
             <DotsIcon className="text-grey-100 m-0 size-5 p-0" />
           </Button>
         </>
diff --git a/client/src/components/Files/FileList/UploadFileButton.tsx b/client/src/components/Files/FileList/UploadFileButton.tsx
index 0823f706e3..0a6f17f8ab 100644
--- a/client/src/components/Files/FileList/UploadFileButton.tsx
+++ b/client/src/components/Files/FileList/UploadFileButton.tsx
@@ -9,7 +9,7 @@ type UploadFileProps = {
 export default function UploadFileButton({ onClick }: UploadFileProps) {
   return (
     <div className="w-full">
-      <Button className="w-full bg-black px-3 text-white" onClick={onClick}>
+      <Button className="w-full bg-primary px-3 text-primary-foreground" onClick={onClick}>
         <PlusIcon className="h-4 w-4 font-bold" />
         &nbsp; <span className="text-nowrap">Upload New File</span>
       </Button>
diff --git a/client/src/components/Files/FileList/UploadFileModal.tsx b/client/src/components/Files/FileList/UploadFileModal.tsx
index 7be59184a5..d8ffb3b5de 100644
--- a/client/src/components/Files/FileList/UploadFileModal.tsx
+++ b/client/src/components/Files/FileList/UploadFileModal.tsx
@@ -18,11 +18,11 @@ const UploadFileModal = ({ open, onOpenChange }) => {
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
         className={cn(
-          'w-11/12 overflow-x-auto p-3 shadow-2xl dark:bg-gray-700 dark:text-white lg:w-2/3 xl:w-2/5',
+          'w-11/12 overflow-x-auto bg-surface-dialog p-3 text-text-primary shadow-2xl lg:w-2/3 xl:w-2/5',
         )}
       >
         <DialogHeader>
-          <DialogTitle className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">
+          <DialogTitle className="text-lg font-medium leading-6 text-text-primary">
             Upoad a File
           </DialogTitle>
         </DialogHeader>
@@ -33,7 +33,7 @@ const UploadFileModal = ({ open, onOpenChange }) => {
             </div>
             <div className="flex w-full flex-col text-center sm:w-4/5 sm:text-left">
               <div className="italic">Please upload square file, size less than 100KB</div>
-              <div className="mt-4 flex w-full flex-row items-center bg-[#f9f9f9] p-2">
+              <div className="mt-4 flex w-full flex-row items-center bg-surface-secondary p-2">
                 <div className="w-1/2 sm:w-1/3">
                   <Button>Choose File</Button>
                 </div>
@@ -43,13 +43,15 @@ const UploadFileModal = ({ open, onOpenChange }) => {
           </div>
           <div className="mt-3 flex w-full flex-col">
             <label htmlFor="name">Name</label>
-            <label className="hidden text-[#808080] sm:block">The name of the uploaded file</label>
+            <label className="hidden text-text-secondary sm:block">
+              The name of the uploaded file
+            </label>
             <Input type="text" id="name" name="name" placeholder="Name" />
           </div>
 
           <div className="mt-3 flex w-full flex-col">
             <label htmlFor="purpose">Purpose</label>
-            <label className="hidden text-[#808080] sm:block">
+            <label className="hidden text-text-secondary sm:block">
               The purpose of the uploaded file
             </label>
             <Input type="text" id="purpose" name="purpose" placeholder="Purpose" />
diff --git a/client/src/components/Files/FilesListView.tsx b/client/src/components/Files/FilesListView.tsx
index 73609c575e..8a98e6d494 100644
--- a/client/src/components/Files/FilesListView.tsx
+++ b/client/src/components/Files/FilesListView.tsx
@@ -10,7 +10,7 @@ export default function FilesListView() {
   const navigate = useNavigate();
   const localize = useLocalize();
   return (
-    <div className="bg-[#f9f9f9] p-0 lg:p-7">
+    <div className="bg-surface-primary p-0 lg:p-7">
       <div className="m-4 flex w-full flex-row justify-between md:m-2">
         <FilesSectionSelector />
         {params.fileId != null && params.fileId && (
diff --git a/client/src/components/Files/FilesSectionSelector.tsx b/client/src/components/Files/FilesSectionSelector.tsx
index dc7fccf9b5..bfaa492a8d 100644
--- a/client/src/components/Files/FilesSectionSelector.tsx
+++ b/client/src/components/Files/FilesSectionSelector.tsx
@@ -18,7 +18,7 @@ export default function FilesSectionSelector() {
   const lightButton = { backgroundColor: '#f9f9f9', color: 'black' };
 
   return (
-    <div className="flex h-12 w-52 flex-row justify-center rounded border bg-white p-1">
+    <div className="flex h-12 w-52 flex-row justify-center rounded border bg-surface-secondary p-1">
       <div className="flex w-2/3 items-center pr-1">
         <Button
           className="w-full rounded rounded-lg border"
diff --git a/client/src/components/Files/VectorStore/VectorStoreButton.tsx b/client/src/components/Files/VectorStore/VectorStoreButton.tsx
index 6eb0f35a26..37225c10b5 100644
--- a/client/src/components/Files/VectorStore/VectorStoreButton.tsx
+++ b/client/src/components/Files/VectorStore/VectorStoreButton.tsx
@@ -9,7 +9,7 @@ type VectorStoreButtonProps = {
 export default function VectorStoreButton({ onClick }: VectorStoreButtonProps) {
   return (
     <div className="w-full">
-      <Button className="w-full bg-black p-0 text-white" onClick={onClick}>
+      <Button className="w-full bg-primary p-0 text-primary-foreground" onClick={onClick}>
         <PlusIcon className="h-4 w-4 font-bold" />
         &nbsp; <span className="text-nowrap">Add Store</span>
       </Button>
diff --git a/client/src/components/Files/VectorStore/VectorStoreListItem.tsx b/client/src/components/Files/VectorStore/VectorStoreListItem.tsx
index d0a266b3d2..70d2b78c3f 100644
--- a/client/src/components/Files/VectorStore/VectorStoreListItem.tsx
+++ b/client/src/components/Files/VectorStore/VectorStoreListItem.tsx
@@ -20,13 +20,13 @@ export default function VectorStoreListItem({
       onClick={() => {
         navigate('vs_id_abcdef');
       }}
-      className="w-100 mt-2 flex cursor-pointer flex-row justify-around rounded-md border border-0 bg-white p-4 transition duration-300 ease-in-out hover:bg-slate-200"
+      className="w-100 mt-2 flex cursor-pointer flex-row justify-around rounded-md border border-0 bg-surface-secondary p-4 transition duration-300 ease-in-out hover:bg-surface-hover"
     >
       <div className="flex w-1/2 flex-col justify-around align-middle">
         <strong>{vectorStore.name}</strong>
-        <p className="text-sm text-gray-500">{vectorStore.object}</p>
+        <p className="text-sm text-text-tertiary">{vectorStore.object}</p>
       </div>
-      <div className="w-2/6 text-gray-500">
+      <div className="w-2/6 text-text-tertiary">
         <p>
           {localize('com_ui_files_count_size', {
             0: vectorStore.file_counts?.total ?? 0,
@@ -36,11 +36,11 @@ export default function VectorStoreListItem({
         <p className="text-sm">{vectorStore.created_at.toString()}</p>
       </div>
       <div className="flex w-1/6 flex-col justify-around sm:flex-row">
-        <Button className="m-0 w-full content-center bg-transparent p-0 text-gray-500 hover:bg-slate-200 sm:w-min">
+        <Button className="m-0 w-full content-center bg-transparent p-0 text-text-tertiary hover:bg-surface-hover sm:w-min">
           <DotsIcon className="text-grey-100 m-0 p-0" />
         </Button>
         <Button
-          className="m-0 w-full bg-transparent p-0 text-[#666666] hover:bg-slate-200 sm:w-fit"
+          className="m-0 w-full bg-transparent p-0 text-text-destructive hover:bg-surface-hover sm:w-fit"
           onClick={() => deleteVectorStore(vectorStore._id)}
         >
           <TrashIcon className="m-0 p-0" />
diff --git a/client/src/components/Files/VectorStore/VectorStorePreview.tsx b/client/src/components/Files/VectorStore/VectorStorePreview.tsx
index d75a827425..beb12d0d32 100644
--- a/client/src/components/Files/VectorStore/VectorStorePreview.tsx
+++ b/client/src/components/Files/VectorStore/VectorStorePreview.tsx
@@ -98,7 +98,7 @@ export default function VectorStorePreview() {
   const params = useParams();
 
   return (
-    <div className="m-3 ml-1 mr-7 bg-white p-2 sm:p-4 md:p-6 lg:p-10">
+    <div className="m-3 ml-1 mr-7 bg-surface-primary p-2 sm:p-4 md:p-6 lg:p-10">
       <div className="flex flex-col justify-between md:flex-row">
         <div className="flex flex-col">
           <b className="hidden text-base md:text-lg lg:block lg:text-xl">VECTOR STORE</b>
@@ -127,57 +127,59 @@ export default function VectorStorePreview() {
       <div className="mt-3 flex flex-col">
         <div className="flex flex-row">
           <span className="flex w-1/2 flex-row items-center md:w-2/5">
-            <InfoIcon className="text-base text-gray-500 md:text-lg lg:text-xl" />
+            <InfoIcon className="text-base text-text-tertiary md:text-lg lg:text-xl" />
             &nbsp; ID
           </span>
-          <span className="w-1/2 break-words text-gray-500 md:w-3/5">{vectorStore._id}</span>
+          <span className="w-1/2 break-words text-text-tertiary md:w-3/5">{vectorStore._id}</span>
         </div>
         <div className="mt-3 flex flex-row">
           <span className="flex w-1/2 flex-row items-center md:w-2/5">
-            <BarChart4Icon className="text-base text-gray-500 md:text-lg lg:text-xl" />
+            <BarChart4Icon className="text-base text-text-tertiary md:text-lg lg:text-xl" />
             &nbsp;Usage this &nbsp;month
           </span>
           <div className="w-1/2 md:w-3/5">
-            <p className="text-gray-500">
-              <span className="text-[#91c561]">0 KB hours</span>
+            <p className="text-text-tertiary">
+              <span className="text-status-success">0 KB hours</span>
               &nbsp; Free until end of 2024
             </p>
           </div>
         </div>
         <div className="mt-3 flex flex-row">
           <span className="flex w-1/2 flex-row items-center md:w-2/5">
-            <InfoIcon className="text-base text-gray-500 md:text-lg lg:text-xl" />
+            <InfoIcon className="text-base text-text-tertiary md:text-lg lg:text-xl" />
             &nbsp;Size
           </span>
-          <span className="w-1/2 text-gray-500 md:w-3/5">{vectorStore.bytes} bytes</span>
+          <span className="w-1/2 text-text-tertiary md:w-3/5">{vectorStore.bytes} bytes</span>
         </div>
         <div className="mt-3 flex flex-row">
           <span className="flex w-1/2 flex-row items-center md:w-2/5">
-            <Clock3 className="text-base text-gray-500 md:text-lg lg:text-xl" />
+            <Clock3 className="text-base text-text-tertiary md:text-lg lg:text-xl" />
             &nbsp;Last active
           </span>
-          <span className="w-1/2 text-gray-500 md:w-3/5">{vectorStore.lastActive}</span>
+          <span className="w-1/2 text-text-tertiary md:w-3/5">{vectorStore.lastActive}</span>
         </div>
         <div className="mt-3 flex flex-row">
           <span className="flex w-1/2 flex-row items-center md:w-2/5">
-            <InfoIcon className="text-base text-gray-500 md:text-lg lg:text-xl" />
+            <InfoIcon className="text-base text-text-tertiary md:text-lg lg:text-xl" />
             &nbsp;Expiration policy
           </span>
-          <span className="w-1/2 text-gray-500 md:w-3/5">{vectorStore.expirationPolicy}</span>
+          <span className="w-1/2 text-text-tertiary md:w-3/5">{vectorStore.expirationPolicy}</span>
         </div>
         <div className="mt-3 flex flex-row">
           <span className="flex w-1/2 flex-row items-center md:w-2/5">
-            <FileClock className="text-base text-gray-500 md:text-lg lg:text-xl" />
+            <FileClock className="text-base text-text-tertiary md:text-lg lg:text-xl" />
             &nbsp;Expires
           </span>
-          <span className="w-1/2 text-gray-500 md:w-3/5">{vectorStore.expires}</span>
+          <span className="w-1/2 text-text-tertiary md:w-3/5">{vectorStore.expires}</span>
         </div>
         <div className="mt-3 flex flex-row">
           <span className="flex w-1/2 flex-row items-center md:w-2/5">
-            <Clock3 className="text-base text-gray-500 md:text-lg lg:text-xl" />
+            <Clock3 className="text-base text-text-tertiary md:text-lg lg:text-xl" />
             &nbsp;Created At
           </span>
-          <span className="w-1/2 text-gray-500 md:w-3/5">{vectorStore.createdAt.toString()}</span>
+          <span className="w-1/2 text-text-tertiary md:w-3/5">
+            {vectorStore.createdAt.toString()}
+          </span>
         </div>
       </div>
 
@@ -200,7 +202,7 @@ export default function VectorStorePreview() {
                 <div className="flex w-1/2 flex-row lg:w-1/3">
                   <div className="content-center text-nowrap">{file.createdAt?.toString()}</div>
                   <Button
-                    className="my-0 ml-3 h-min bg-transparent p-0 text-[#666666] hover:bg-slate-200"
+                    className="my-0 ml-3 h-min bg-transparent p-0 text-text-destructive hover:bg-surface-hover"
                     onClick={() => console.log('click')}
                   >
                     <TrashIcon className="m-0 p-0" />
diff --git a/client/src/components/Files/VectorStoreView.tsx b/client/src/components/Files/VectorStoreView.tsx
index 63db286cff..f5815bc042 100644
--- a/client/src/components/Files/VectorStoreView.tsx
+++ b/client/src/components/Files/VectorStoreView.tsx
@@ -8,7 +8,7 @@ export default function VectorStoreView() {
   const params = useParams();
   const navigate = useNavigate();
   return (
-    <div className="max-h-[100vh] bg-[#f9f9f9] p-0 lg:p-7">
+    <div className="max-h-[100vh] bg-surface-primary p-0 lg:p-7">
       <div className="m-4 flex max-h-[10vh] w-full flex-row justify-between md:m-2">
         <FilesSectionSelector />
         <Button