From 2ef62e06dbb443c3e10b781d03a5fc8b62dc4fcd Mon Sep 17 00:00:00 2001
From: Dallin Romney <dallinromney@gmail.com>
Date: Mon, 6 Jan 2025 18:37:14 +0100
Subject: [PATCH] no explicit colors left besides tiptap css

---
 gui/src/components/PageHeader.tsx             |  4 ++--
 .../StepContainer/AcceptRejectAllButtons.tsx  |  6 +++---
 .../StepContainer/ThinkingIndicator.tsx       |  2 +-
 .../StepContainer/UndoAndRedoButtons.tsx      |  6 +++---
 gui/src/components/dialogs/AddDocsDialog.tsx  | 20 +++++++++----------
 .../components/dialogs/ConfirmationDialog.tsx |  2 +-
 gui/src/components/find/FindWidget.tsx        |  2 +-
 gui/src/components/index.ts                   |  3 +++
 .../components/indexing/ChatIndexingPeeks.tsx | 12 +++++------
 .../components/indexing/DocsIndexingPeeks.tsx | 16 +++++++--------
 .../indexing/DocsIndexingStatus.tsx           | 20 ++++++++++---------
 .../indexing/DocsIndexingStatuses.tsx         |  2 +-
 .../loaders/FreeTrialProgressBar.tsx          |  4 ++--
 .../components/mainInput/ContextItemsPeek.tsx |  4 ++--
 .../StepContainerPreToolbar/ApplyActions.tsx  |  4 ++--
 .../pages/AddNewModel/ConfigureProvider.tsx   |  4 ++--
 .../IndexingProgress/IndexingProgressBar.tsx  |  4 ++--
 .../IndexingProgressIndicator.tsx             |  4 ++--
 .../IndexingProgressSubtext.tsx               |  4 ++--
 gui/src/pages/More/More.tsx                   |  4 ++--
 gui/src/pages/More/MoreHelpRow.tsx            |  4 ++--
 gui/src/pages/config-error/index.tsx          | 10 +++++-----
 gui/tailwind.config.cjs                       |  4 +++-
 23 files changed, 76 insertions(+), 69 deletions(-)

diff --git a/gui/src/components/PageHeader.tsx b/gui/src/components/PageHeader.tsx
index 23e108c388..0e9d83c33d 100644
--- a/gui/src/components/PageHeader.tsx
+++ b/gui/src/components/PageHeader.tsx
@@ -7,9 +7,9 @@ export interface PageHeaderProps {
 
 export default function PageHeader({ onClick, title }: PageHeaderProps) {
   return (
-    <div className="bg-vsc-background sticky top-0 z-20 m-0 flex items-center border-0 border-b border-solid border-b-zinc-700 bg-inherit p-0">
+    <div className="border-b-border sticky top-0 z-20 m-0 flex items-center border-0 border-b border-solid bg-inherit p-0">
       <div
-        className="cursor-pointer transition-colors duration-200 hover:text-zinc-100"
+        className="cursor-pointer transition-colors duration-200 hover:opacity-80"
         onClick={onClick}
       >
         <ArrowLeftIcon className="ml-3 inline-block h-3 w-3" />
diff --git a/gui/src/components/StepContainer/AcceptRejectAllButtons.tsx b/gui/src/components/StepContainer/AcceptRejectAllButtons.tsx
index a2cc954630..fc70cab06d 100644
--- a/gui/src/components/StepContainer/AcceptRejectAllButtons.tsx
+++ b/gui/src/components/StepContainer/AcceptRejectAllButtons.tsx
@@ -34,9 +34,9 @@ export default function AcceptRejectAllButtons({
   }
 
   return (
-    <div className="flex justify-center gap-2 border-b border-gray-200/25 p-1 px-3">
+    <div className="border-border/25 flex justify-center gap-2 border-b p-1 px-3">
       <button
-        className="flex cursor-pointer items-center border-none bg-transparent px-2 py-1 text-xs text-gray-300 opacity-80 hover:opacity-100 hover:brightness-125"
+        className="text-description flex cursor-pointer items-center border-none bg-transparent px-2 py-1 text-xs opacity-80 hover:opacity-100 hover:brightness-125"
         onClick={() => handleAcceptOrReject("rejectDiff")}
       >
         <XMarkIcon className="text-error mr-1 h-4 w-4" />
@@ -51,7 +51,7 @@ export default function AcceptRejectAllButtons({
         )}
       </button>
       <button
-        className="flex cursor-pointer items-center border-none bg-transparent px-2 py-1 text-xs text-gray-300 opacity-80 hover:opacity-100 hover:brightness-125"
+        className="text-description flex cursor-pointer items-center border-none bg-transparent px-2 py-1 text-xs opacity-80 hover:opacity-100 hover:brightness-125"
         onClick={() => handleAcceptOrReject("acceptDiff")}
       >
         <CheckIcon className="text-success mr-1 h-4 w-4" />
diff --git a/gui/src/components/StepContainer/ThinkingIndicator.tsx b/gui/src/components/StepContainer/ThinkingIndicator.tsx
index 8757cae838..792f536e7d 100644
--- a/gui/src/components/StepContainer/ThinkingIndicator.tsx
+++ b/gui/src/components/StepContainer/ThinkingIndicator.tsx
@@ -37,7 +37,7 @@ const ThinkingIndicator = ({ historyItem }: ThinkingIndicatorProps) => {
 
   return (
     <div className="px-2 py-2">
-      <span className="text-stone-500">{`Thinking.${".".repeat(animation)}`}</span>
+      <span className="text-description">{`Thinking.${".".repeat(animation)}`}</span>
     </div>
   );
 };
diff --git a/gui/src/components/StepContainer/UndoAndRedoButtons.tsx b/gui/src/components/StepContainer/UndoAndRedoButtons.tsx
index a57b29bd2a..f8f7caffb1 100644
--- a/gui/src/components/StepContainer/UndoAndRedoButtons.tsx
+++ b/gui/src/components/StepContainer/UndoAndRedoButtons.tsx
@@ -38,9 +38,9 @@ export default function UndoAndRedoButtons() {
   }
 
   return (
-    <div className="flex justify-center gap-2 border-b border-gray-200/25 p-1 px-3">
+    <div className="border-border/25 flex justify-center gap-2 border-b p-1 px-3">
       <button
-        className="flex cursor-pointer items-center border-none bg-transparent px-2 py-1 text-xs text-gray-300 opacity-80 hover:opacity-100 hover:brightness-125"
+        className="text-description flex cursor-pointer items-center border-none bg-transparent px-2 py-1 text-xs opacity-80 hover:opacity-100 hover:brightness-125"
         onClick={() => handleUndoOrRedo("undo")}
       >
         <ArrowUturnLeftIcon className="mr-2 h-3.5 w-3.5" />
@@ -49,7 +49,7 @@ export default function UndoAndRedoButtons() {
 
       {shouldRenderRedo && (
         <button
-          className="flex cursor-pointer items-center border-none bg-transparent px-2 py-1 text-xs text-gray-300 opacity-80 hover:opacity-100 hover:brightness-125"
+          className="text-description flex cursor-pointer items-center border-none bg-transparent px-2 py-1 text-xs opacity-80 hover:opacity-100 hover:brightness-125"
           onClick={() => handleUndoOrRedo("redo")}
         >
           <ArrowUturnRightIcon className="mr-2 h-3.5 w-3.5" />
diff --git a/gui/src/components/dialogs/AddDocsDialog.tsx b/gui/src/components/dialogs/AddDocsDialog.tsx
index 0bcd40fd94..32634999c7 100644
--- a/gui/src/components/dialogs/AddDocsDialog.tsx
+++ b/gui/src/components/dialogs/AddDocsDialog.tsx
@@ -161,13 +161,13 @@ function AddDocsDialog() {
       <div className="">
         <h1 className="mb-0 hidden sm:block">Add documentation</h1>
         <h1 className="sm:hidden">Add docs</h1>
-        <p className="m-0 mt-2 p-0 text-stone-500">
+        <p className="text-description m-0 mt-2 p-0">
           For the @docs context provider
         </p>
         {!!sortedDocsSuggestions.length && (
           <p className="m-0 mb-1 mt-4 p-0 font-semibold">Suggestions</p>
         )}
-        <div className="border-vsc-foreground-muted max-h-[145px] overflow-y-scroll rounded-sm py-1 pr-2">
+        <div className="border-description max-h-[145px] overflow-y-scroll rounded-sm py-1 pr-2">
           {sortedDocsSuggestions.map((docsResult) => {
             const { error, details } = docsResult;
             const { language, name, version } = docsResult.packageInfo;
@@ -175,7 +175,7 @@ function AddDocsDialog() {
             return (
               <div
                 key={id}
-                className="grid cursor-pointer grid-cols-[auto_minmax(0,1fr)_minmax(0,1fr)_auto] items-center px-1 py-1 hover:bg-gray-200/10"
+                className="hover:bg-hover/20 grid cursor-pointer grid-cols-[auto_minmax(0,1fr)_minmax(0,1fr)_auto] items-center px-1 py-1"
                 onClick={() => {
                   handleSelectSuggestion(docsResult);
                 }}
@@ -185,14 +185,14 @@ function AddDocsDialog() {
                     <div>
                       <PencilIcon
                         data-tooltip-id={id + "-edit"}
-                        className="vsc-foreground-muted h-3 w-3"
+                        className="description h-3 w-3"
                       />
                       <ToolTip id={id + "-edit"} place="bottom">
                         This may not be a docs page
                       </ToolTip>
                     </div>
                   ) : (
-                    <PlusIcon className="text-foreground-muted h-3.5 w-3.5" />
+                    <PlusIcon className="text-description h-3.5 w-3.5" />
                   )}
                 </div>
                 <div className="flex items-center gap-0.5">
@@ -207,7 +207,7 @@ function AddDocsDialog() {
                 </div>
                 <div>
                   {error || !details?.docsLink ? (
-                    <span className="text-vsc-foreground-muted italic">
+                    <span className="text-description italic">
                       No docs link found
                     </span>
                   ) : (
@@ -234,7 +234,7 @@ function AddDocsDialog() {
                 >
                   <InformationCircleIcon
                     data-tooltip-id={id + "-info"}
-                    className="text-vsc-foreground-muted h-3.5 w-3.5 select-none"
+                    className="text-description h-3.5 w-3.5 select-none"
                   />
                   <ToolTip id={id + "-info"} place="bottom">
                     <p className="m-0 p-0">{`Version: ${version}`}</p>
@@ -254,7 +254,7 @@ function AddDocsDialog() {
                   <div>
                     <InformationCircleIcon
                       data-tooltip-id={"add-docs-form-title"}
-                      className="text-vsc-foreground-muted h-3.5 w-3.5 select-none"
+                      className="text-description h-3.5 w-3.5 select-none"
                     />
                     <ToolTip id={"add-docs-form-title"} place="top">
                       The title that will be displayed to users in the `@docs`
@@ -280,7 +280,7 @@ function AddDocsDialog() {
                   <div>
                     <InformationCircleIcon
                       data-tooltip-id={"add-docs-form-url"}
-                      className="text-vsc-foreground-muted h-3.5 w-3.5 select-none"
+                      className="text-description h-3.5 w-3.5 select-none"
                     />
                     <ToolTip id={"add-docs-form-url"} place="top">
                       The starting location to begin crawling the documentation
@@ -319,7 +319,7 @@ function AddDocsDialog() {
       <div className="flex flex-row items-end justify-between pb-3">
         <div>
           {docsIndexingStatuses.length ? (
-            <p className="mt-2 flex flex-row items-center gap-1 p-0 px-1 text-xs text-stone-500">
+            <p className="text-description mt-2 flex flex-row items-center gap-1 p-0 px-1 text-xs">
               <CheckIcon className="h-3 w-3" />
               It is safe to close this form while indexing
             </p>
diff --git a/gui/src/components/dialogs/ConfirmationDialog.tsx b/gui/src/components/dialogs/ConfirmationDialog.tsx
index 04023aa227..d6da2dd646 100644
--- a/gui/src/components/dialogs/ConfirmationDialog.tsx
+++ b/gui/src/components/dialogs/ConfirmationDialog.tsx
@@ -17,7 +17,7 @@ function ConfirmationDialog(props: ConfirmationDialogProps) {
 
   return (
     <div className="p-4 pt-0">
-      <h1 className="text-2x mb-1 text-center">
+      <h1 className="mb-1 text-center text-xl">
         {props.title ?? "Confirmation"}
       </h1>
       <p className="text-center text-base" style={{ whiteSpace: "pre-wrap" }}>
diff --git a/gui/src/components/find/FindWidget.tsx b/gui/src/components/find/FindWidget.tsx
index 9bf965d0fd..ee2f9165a1 100644
--- a/gui/src/components/find/FindWidget.tsx
+++ b/gui/src/components/find/FindWidget.tsx
@@ -43,7 +43,7 @@ const HighlightOverlay = (props: HighlightOverlayProps) => {
   const { isCurrent, top, left, width, height } = props;
   return (
     <div
-      className={isCurrent ? "bg-vsc-find-match-selected" : "bg-blue-200/30"} // bg-vsc-find-match can"t get to work
+      className={isCurrent ? "bg-vsc-find-match-selected" : "bg-hover/30"} // bg-vsc-find-match can"t get to work
       key={`highlight-${top}-${left}`}
       style={{
         position: "absolute",
diff --git a/gui/src/components/index.ts b/gui/src/components/index.ts
index 4568f6ef4a..101ed212c1 100644
--- a/gui/src/components/index.ts
+++ b/gui/src/components/index.ts
@@ -29,6 +29,7 @@ export const VSC_DIFF_INSERTED_LINE_BACKGROUND_VAR =
 export const VSC_SUCCESS_VAR = "--vscode-testing-iconPassed";
 export const VSC_WARNING_VAR = "--vscode-list-warningForeground";
 export const VSC_ERROR_VAR = "--vscode-errorForeground"; // "--vscode-list-errorForeground";
+export const VSC_LIST_HOVER_VAR = "--vscode-list-hoverBackground";
 
 export const VSC_THEME_COLOR_VARS = [
   VSC_INPUT_BACKGROUND_VAR,
@@ -54,6 +55,7 @@ export const VSC_THEME_COLOR_VARS = [
   VSC_SUCCESS_VAR,
   VSC_ERROR_VAR,
   VSC_WARNING_VAR,
+  VSC_LIST_HOVER_VAR,
 ];
 
 export const defaultBorderRadius = "5px";
@@ -77,6 +79,7 @@ export const vscError = `var(${VSC_ERROR_VAR}, "#d91434")`;
 export const vscWarning = `var(${VSC_WARNING_VAR}, #ff9600)`;
 export const vscBorder = `var(${VSC_SIDEBAR_BORDER_VAR}, ${lightGray})`;
 export const vscDescription = `var(${VSC_DESCRIPTION_FOREGROUND}, ${lightGray})`;
+export const vscListHover = `var(${VSC_LIST_HOVER_VAR}, ${lightGray}20)`;
 
 if (typeof document !== "undefined") {
   for (const colorVar of VSC_THEME_COLOR_VARS) {
diff --git a/gui/src/components/indexing/ChatIndexingPeeks.tsx b/gui/src/components/indexing/ChatIndexingPeeks.tsx
index 20a13b60da..cfd42d4fd3 100644
--- a/gui/src/components/indexing/ChatIndexingPeeks.tsx
+++ b/gui/src/components/indexing/ChatIndexingPeeks.tsx
@@ -40,29 +40,29 @@ function ChatIndexingPeek({ state }: ChatIndexingPeekProps) {
     >
       <div className="group flex flex-1 cursor-pointer flex-row items-center gap-2">
         <div className={`flex flex-row items-center gap-2`}>
-          <p className="m-0 p-0 text-xs text-stone-500 group-hover:underline">
+          <p className="text-description m-0 p-0 text-xs group-hover:underline">
             {state.displayName}
           </p>
         </div>
-        <div className="my-2 h-1.5 flex-1 rounded-md border border-solid border-gray-400">
+        <div className="border-border my-2 h-1.5 flex-1 rounded-md border border-solid">
           <div
-            className={`h-full rounded-lg bg-stone-500 transition-all duration-200 ease-in-out`}
+            className={`bg-vsc-editor-background h-full rounded-lg transition-all duration-200 ease-in-out`}
             style={{
               width: `${state.progressPercentage}%`,
             }}
           />
         </div>
-        <div className="xs:flex hidden flex-row items-center gap-1 text-stone-500">
+        <div className="xs:flex text-description hidden flex-row items-center gap-1">
           <span className="text-xs no-underline">
             {state.progressPercentage.toFixed(0)}%
           </span>
           <ArrowPathIcon
-            className={`animate-spin-slow inline-block h-4 w-4 text-stone-500`}
+            className={`animate-spin-slow text-description inline-block h-4 w-4`}
           ></ArrowPathIcon>
         </div>
       </div>
       <EyeSlashIcon
-        className="ml-2 h-4 w-4 cursor-pointer text-stone-500 hover:opacity-80"
+        className="text-description ml-2 h-4 w-4 cursor-pointer hover:opacity-80"
         onClick={(e) => {
           dispatch(
             setIndexingChatPeekHidden({ type: state.type, hidden: true }),
diff --git a/gui/src/components/indexing/DocsIndexingPeeks.tsx b/gui/src/components/indexing/DocsIndexingPeeks.tsx
index f659b48f92..5d395c3e91 100644
--- a/gui/src/components/indexing/DocsIndexingPeeks.tsx
+++ b/gui/src/components/indexing/DocsIndexingPeeks.tsx
@@ -18,30 +18,30 @@ function DocsIndexingPeek({ status }: DocsIndexingPeekProps) {
 
   return (
     <div
-      className="flex cursor-pointer flex-row items-center gap-2 rounded-md px-1 text-stone-500 hover:bg-gray-700/10"
+      className="text-description hover:bg-hover/10 flex cursor-pointer flex-row items-center gap-2 rounded-md px-1"
       onClick={() => {
         navigate("/more");
         dispatch(setShowDialog(false));
         dispatch(setDialogMessage(undefined));
       }}
     >
-      <p className="m-0 p-0 text-stone-500 group-hover:underline">
+      <p className="text-description m-0 p-0 group-hover:underline">
         {status.title}
       </p>
-      <div className="my-2 h-1.5 flex-1 rounded-md border border-solid border-gray-400">
+      <div className="border-border my-2 h-1.5 flex-1 rounded-md border border-solid">
         <div
-          className={`h-full rounded-lg bg-stone-500 transition-all duration-200 ease-in-out`}
+          className={`bg-vsc-editor-background h-full rounded-lg transition-all duration-200 ease-in-out`}
           style={{
             width: `${progressPercentage}%`,
           }}
         />
       </div>
-      <div className="xs:flex hidden flex-row items-center gap-1 text-stone-500">
+      <div className="xs:flex text-description hidden flex-row items-center gap-1">
         <span className="text-xs no-underline">
           {progressPercentage.toFixed(0)}%
         </span>
         {/* <ArrowPathIcon
-          className={`animate-spin-slow inline-block h-4 w-4 text-stone-500`}
+          className={`animate-spin-slow inline-block h-4 w-4 text-description`}
         ></ArrowPathIcon> */}
       </div>
     </div>
@@ -55,7 +55,7 @@ interface DocsIndexingPeeksProps {
 function DocsIndexingPeekList({ statuses }: DocsIndexingPeeksProps) {
   return (
     <div className="border-vsc-input-border mt-2 flex flex-col border-0 border-t border-solid pt-2">
-      <p className="mx-0 my-1.5 p-0 px-1 font-semibold text-stone-500">
+      <p className="text-description mx-0 my-1.5 p-0 px-1 font-semibold">
         Currently Indexing:
       </p>
       <div className="max-h-[100px] overflow-y-auto pr-2">
@@ -64,7 +64,7 @@ function DocsIndexingPeekList({ statuses }: DocsIndexingPeeksProps) {
             return <DocsIndexingPeek key={status.id} status={status} />;
           })
         ) : (
-          <p className="m-0 pl-1 font-semibold text-stone-500">None</p>
+          <p className="text-description m-0 pl-1 font-semibold">None</p>
         )}
       </div>
     </div>
diff --git a/gui/src/components/indexing/DocsIndexingStatus.tsx b/gui/src/components/indexing/DocsIndexingStatus.tsx
index 3341981686..c3c466f44d 100644
--- a/gui/src/components/indexing/DocsIndexingStatus.tsx
+++ b/gui/src/components/indexing/DocsIndexingStatus.tsx
@@ -109,23 +109,23 @@ function DocsIndexingStatus({ docConfig }: IndexingStatusViewerProps) {
           <p className="lines lines-1 m-0 p-0 text-left">
             {docConfig.title ?? docConfig.startUrl}
           </p>
-          <ArrowTopRightOnSquareIcon className="mb-0.5 h-3 w-3 text-stone-500" />
+          <ArrowTopRightOnSquareIcon className="text-description mb-0.5 h-3 w-3" />
         </div>
         {status?.status === "pending" ? (
-          <div className="text-xs text-stone-500">Pending...</div>
+          <div className="text-description text-xs">Pending...</div>
         ) : (
-          <div className="flex flex-row items-center gap-1 text-stone-500">
+          <div className="text-description flex flex-row items-center gap-1">
             <span className="text-xs">{progressPercentage.toFixed(0)}%</span>
             {Icon ? (
               <Icon
-                className={`inline-block h-4 w-4 text-stone-500 ${
+                className={`text-description inline-block h-4 w-4 ${
                   status?.status === "indexing" ? "animate-spin-slow" : ""
                 }`}
               ></Icon>
             ) : null}
             {status?.status !== "indexing" ? (
               <TrashIcon
-                className="h-4 w-4 cursor-pointer text-stone-500"
+                className="text-description h-4 w-4 cursor-pointer"
                 onClick={onDelete}
               />
             ) : null}
@@ -133,10 +133,12 @@ function DocsIndexingStatus({ docConfig }: IndexingStatusViewerProps) {
         )}
       </div>
 
-      <div className="my-2 h-1.5 w-full rounded-md border border-solid border-gray-400">
+      <div className="border-border my-2 h-1.5 w-full rounded-md border border-solid">
         <div
           className={`h-full rounded-lg transition-all duration-200 ease-in-out ${
-            status?.status === "failed" ? "bg-error" : "bg-stone-500"
+            status?.status === "failed"
+              ? "bg-error"
+              : "bg-vsc-editor-background"
           }`}
           style={{
             width: `${progressPercentage}%`,
@@ -146,7 +148,7 @@ function DocsIndexingStatus({ docConfig }: IndexingStatusViewerProps) {
 
       <div className="flex flex-row items-center justify-between gap-4">
         <span
-          className={`cursor-pointer whitespace-nowrap text-xs text-stone-500 underline`}
+          className={`text-description cursor-pointer whitespace-nowrap text-xs underline`}
           onClick={
             {
               complete: reIndex,
@@ -170,7 +172,7 @@ function DocsIndexingStatus({ docConfig }: IndexingStatusViewerProps) {
           }
         </span>
 
-        <span className="lines lines-1 text-right text-xs text-stone-500">
+        <span className="lines lines-1 text-description text-right text-xs">
           {status?.description}
         </span>
       </div>
diff --git a/gui/src/components/indexing/DocsIndexingStatuses.tsx b/gui/src/components/indexing/DocsIndexingStatuses.tsx
index 445c4db932..60fa103dbd 100644
--- a/gui/src/components/indexing/DocsIndexingStatuses.tsx
+++ b/gui/src/components/indexing/DocsIndexingStatuses.tsx
@@ -26,7 +26,7 @@ function DocsIndexingStatuses() {
           </SecondaryButton>
         ) : null}
       </div>
-      <span className="text-xs text-stone-500">
+      <span className="text-description text-xs">
         {configDocs.length
           ? "Manage your documentation sources"
           : "No docs yet"}
diff --git a/gui/src/components/loaders/FreeTrialProgressBar.tsx b/gui/src/components/loaders/FreeTrialProgressBar.tsx
index a23d8adfd3..a90c38ad7a 100644
--- a/gui/src/components/loaders/FreeTrialProgressBar.tsx
+++ b/gui/src/components/loaders/FreeTrialProgressBar.tsx
@@ -58,10 +58,10 @@ function FreeTrialProgressBar({ completed, total }: FreeTrialProgressBarProps) {
         <span>
           Free trial <span className="hidden sm:inline">requests</span>
         </span>
-        <div className="flex h-1.5 flex-1 rounded-md border border-solid border-gray-400">
+        <div className="border-border flex h-1.5 flex-1 rounded-md border border-solid">
           <div
             className={`h-full rounded-lg transition-all duration-200 ease-in-out ${
-              completed / total > 0.75 ? "bg-error" : "bg-stone-500"
+              completed / total > 0.75 ? "bg-error" : "bg-vsc-editor-background"
             }`}
             style={{
               width: `${fillPercentage}%`,
diff --git a/gui/src/components/mainInput/ContextItemsPeek.tsx b/gui/src/components/mainInput/ContextItemsPeek.tsx
index fb1772828d..67067ad25e 100644
--- a/gui/src/components/mainInput/ContextItemsPeek.tsx
+++ b/gui/src/components/mainInput/ContextItemsPeek.tsx
@@ -106,7 +106,7 @@ function ContextItemsPeekItem({ contextItem }: ContextItemsPeekItemProps) {
   return (
     <div
       onClick={openContextItem}
-      className="group mr-2 flex cursor-pointer items-center overflow-hidden text-ellipsis whitespace-nowrap rounded px-1.5 py-1 text-xs hover:opacity-80"
+      className="hover:bg-hover/20 group mr-2 flex cursor-pointer items-center overflow-hidden text-ellipsis whitespace-nowrap rounded px-1.5 py-1 text-xs"
     >
       <div className="flex w-full items-center">
         {getContextItemIcon()}
@@ -159,7 +159,7 @@ function ContextItemsPeek({
       }}
     >
       <div
-        className="flex cursor-pointer items-center justify-start text-xs text-gray-300"
+        className="text-description flex cursor-pointer items-center justify-start text-xs"
         onClick={() => setOpen((prev) => !prev)}
       >
         <div className="relative mr-1 h-4 w-4">
diff --git a/gui/src/components/markdown/StepContainerPreToolbar/ApplyActions.tsx b/gui/src/components/markdown/StepContainerPreToolbar/ApplyActions.tsx
index 31a0a13d7c..0acc55b7ab 100644
--- a/gui/src/components/markdown/StepContainerPreToolbar/ApplyActions.tsx
+++ b/gui/src/components/markdown/StepContainerPreToolbar/ApplyActions.tsx
@@ -50,7 +50,7 @@ export default function ApplyActions(props: ApplyActionsProps) {
   switch (props.applyState ? props.applyState.status : null) {
     case "streaming":
       return (
-        <div className="flex items-center rounded bg-zinc-700 pl-2 pr-1">
+        <div className="bg-vsc-editor-background flex items-center rounded pl-2 pr-1">
           <span className="text-description inline-flex items-center gap-2 text-xs">
             Applying changes
             <Spinner />
@@ -84,7 +84,7 @@ export default function ApplyActions(props: ApplyActionsProps) {
       if (!hasRejected && props.applyState?.numDiffs === 0) {
         if (showApplied) {
           return (
-            <span className="text-description flex items-center rounded bg-zinc-700 max-sm:px-0.5 sm:pl-2">
+            <span className="text-description bg-vsc-editor-background flex items-center rounded max-sm:px-0.5 sm:pl-2">
               <span className="max-sm:hidden">Applied</span>
               <CheckIcon className="h-4 w-4 hover:brightness-125 sm:px-1" />
             </span>
diff --git a/gui/src/pages/AddNewModel/ConfigureProvider.tsx b/gui/src/pages/AddNewModel/ConfigureProvider.tsx
index 3ee2415f16..39f2160179 100644
--- a/gui/src/pages/AddNewModel/ConfigureProvider.tsx
+++ b/gui/src/pages/AddNewModel/ConfigureProvider.tsx
@@ -139,7 +139,7 @@ function ConfigureProvider() {
                     <Input
                       type={d.inputType}
                       id={d.key}
-                      className="m-2 rounded-md border-2 border-gray-200 p-2"
+                      className="border-border m-2 rounded-md border-2 p-2"
                       placeholder={d.placeholder ?? d.label}
                       defaultValue={d.defaultValue}
                       min={d.min}
@@ -169,7 +169,7 @@ function ConfigureProvider() {
                     <Input
                       type={d.inputType}
                       id={d.key}
-                      className="m-2 rounded-md border-2 border-gray-200 p-2"
+                      className="border-border m-2 rounded-md border-2 p-2"
                       placeholder={d.placeholder ?? d.label}
                       defaultValue={d.defaultValue}
                       min={d.min}
diff --git a/gui/src/pages/More/IndexingProgress/IndexingProgressBar.tsx b/gui/src/pages/More/IndexingProgress/IndexingProgressBar.tsx
index 75eb5d2356..a129eb4f8f 100644
--- a/gui/src/pages/More/IndexingProgress/IndexingProgressBar.tsx
+++ b/gui/src/pages/More/IndexingProgress/IndexingProgressBar.tsx
@@ -9,10 +9,10 @@ function IndexingProgressBar({ update }: IndexingProgressBarProps) {
   const progressPercentage = getProgressPercentage(update.progress);
 
   return (
-    <div className="my-2 h-1.5 w-full rounded-md border border-solid border-gray-400">
+    <div className="border-border my-2 h-1.5 w-full rounded-md border border-solid">
       <div
         className={`h-full rounded-lg transition-all duration-200 ease-in-out ${
-          update.status === "failed" ? "bg-error" : "bg-stone-500"
+          update.status === "failed" ? "bg-error" : "bg-vsc-editor-background"
         }`}
         style={{
           width: `${progressPercentage}%`,
diff --git a/gui/src/pages/More/IndexingProgress/IndexingProgressIndicator.tsx b/gui/src/pages/More/IndexingProgress/IndexingProgressIndicator.tsx
index 83abeed110..a87b3d4776 100644
--- a/gui/src/pages/More/IndexingProgress/IndexingProgressIndicator.tsx
+++ b/gui/src/pages/More/IndexingProgress/IndexingProgressIndicator.tsx
@@ -27,7 +27,7 @@ function IndexingProgressIndicator({ update }: IndexingProgressIndicatorProps) {
   const showProgress = update.status !== "disabled";
 
   return (
-    <div className="flex items-center justify-between gap-1 text-stone-500">
+    <div className="text-description flex items-center justify-between gap-1">
       {showProgress && (
         <span className="text-xs">{progressPercentage.toFixed(0)}%</span>
       )}
@@ -35,7 +35,7 @@ function IndexingProgressIndicator({ update }: IndexingProgressIndicatorProps) {
       {Icon && (
         <div className="flex items-center">
           <Icon
-            className={`inline-block h-4 w-4 align-top text-stone-500 ${
+            className={`text-description inline-block h-4 w-4 align-top ${
               animateIcon ? "animate-spin-slow" : ""
             }`}
           ></Icon>
diff --git a/gui/src/pages/More/IndexingProgress/IndexingProgressSubtext.tsx b/gui/src/pages/More/IndexingProgress/IndexingProgressSubtext.tsx
index a731480099..ea93e9796a 100644
--- a/gui/src/pages/More/IndexingProgress/IndexingProgressSubtext.tsx
+++ b/gui/src/pages/More/IndexingProgress/IndexingProgressSubtext.tsx
@@ -27,7 +27,7 @@ function IndexingProgressSubtext({
   return (
     <div className="flex justify-between">
       <span
-        className={`cursor-pointer text-xs text-stone-500 underline ${
+        className={`text-description cursor-pointer text-xs underline ${
           showIndexingDesc ? "w-1/3" : "w-full"
         }`}
         onClick={onClick}
@@ -36,7 +36,7 @@ function IndexingProgressSubtext({
       </span>
 
       {showIndexingDesc && (
-        <span className="w-2/3 truncate text-right text-xs text-stone-500">
+        <span className="text-description w-2/3 truncate text-right text-xs">
           {update.desc}
         </span>
       )}
diff --git a/gui/src/pages/More/More.tsx b/gui/src/pages/More/More.tsx
index 347f28d2b9..bbe988cef7 100644
--- a/gui/src/pages/More/More.tsx
+++ b/gui/src/pages/More/More.tsx
@@ -26,11 +26,11 @@ function MorePage() {
     <div className="overflow-y-scroll">
       <PageHeader onClick={() => navigate("/")} title="Chat" />
 
-      <div className="gap-2 divide-x-0 divide-y-2 divide-solid divide-zinc-700 px-4">
+      <div className="divide-border gap-2 divide-x-0 divide-y-2 divide-solid px-4">
         <div className="py-5">
           <div>
             <h3 className="mx-auto mb-1 mt-0 text-xl">@codebase index</h3>
-            <span className="w-3/4 text-xs text-stone-500">
+            <span className="text-description w-3/4 text-xs">
               Local embeddings of your codebase
             </span>
           </div>
diff --git a/gui/src/pages/More/MoreHelpRow.tsx b/gui/src/pages/More/MoreHelpRow.tsx
index cf249cb51a..6d60562f51 100644
--- a/gui/src/pages/More/MoreHelpRow.tsx
+++ b/gui/src/pages/More/MoreHelpRow.tsx
@@ -14,10 +14,10 @@ function MoreHelpRow({ title, description, onClick, Icon }: MoreHelpRowProps) {
     >
       <div className="flex w-4/5 flex-col justify-center">
         <h3 className="my-0 text-sm">{title}</h3>
-        <span className="py-1 text-xs text-stone-500">{description}</span>
+        <span className="text-description py-1 text-xs">{description}</span>
       </div>
 
-      <div className="flex h-5 w-5 cursor-pointer justify-end text-stone-500">
+      <div className="text-description flex h-5 w-5 cursor-pointer justify-end">
         <Icon />
       </div>
     </div>
diff --git a/gui/src/pages/config-error/index.tsx b/gui/src/pages/config-error/index.tsx
index ab0e518e88..3cf11efbcc 100644
--- a/gui/src/pages/config-error/index.tsx
+++ b/gui/src/pages/config-error/index.tsx
@@ -20,7 +20,7 @@ export default function ConfigErrorPage() {
     <div className="overflow-y-scroll">
       <div
         onClick={() => navigate(ROUTES.HOME)}
-        className="sticky top-0 m-0 flex cursor-pointer items-center border-0 border-b border-solid border-b-zinc-700 bg-inherit p-0"
+        className="border-b-border sticky top-0 m-0 flex cursor-pointer items-center border-0 border-b border-solid bg-inherit p-0"
         style={{
           backgroundColor: vscBackground,
         }}
@@ -29,7 +29,7 @@ export default function ConfigErrorPage() {
         <span className="m-2 inline-block text-sm font-bold">Chat</span>
       </div>
 
-      <div className="gap-2 divide-x-0 divide-y-2 divide-solid divide-zinc-700 px-4">
+      <div className="divide-border gap-2 divide-x-0 divide-y-2 divide-solid px-4">
         <div className="py-5">
           <h3 className="mb-2 mt-0 text-xl">Config Errors</h3>
           <p className="mb-4 text-base">
@@ -43,8 +43,8 @@ export default function ConfigErrorPage() {
                     key={index}
                     className={`flex items-start rounded-md p-2 text-sm shadow-md ${
                       error.fatal
-                        ? "text-error bg-red-100"
-                        : "text-warning bg-yellow-100"
+                        ? "text-error-foreground bg-error"
+                        : "text-error-foreground bg-warning"
                     }`}
                   >
                     {error.fatal ? (
@@ -62,7 +62,7 @@ export default function ConfigErrorPage() {
                 ))}
               </ul>
             ) : (
-              <p className="text-success rounded-md bg-green-100 p-4 text-sm">
+              <p className="text-success rounded-md p-4 text-sm">
                 No configuration errors found.
               </p>
             )}
diff --git a/gui/tailwind.config.cjs b/gui/tailwind.config.cjs
index e963f93d5a..5d58e7220a 100644
--- a/gui/tailwind.config.cjs
+++ b/gui/tailwind.config.cjs
@@ -42,13 +42,15 @@ module.exports = {
           "var(--vscode-editor-findMatchBackground, rgba(255, 255, 0, 0.6))",
         "vsc-find-match-selected":
           "var(--vscode-editor-findMatchHighlightBackground, rgba(255, 223, 0, 0.8))",
-        "vsc-foreground-muted": "var(--vscode-foreground-muted, #999)",
+        description: "var(--vscode-foreground-muted, #999)",
 
         error: "var(--vscode-errorBackground, #f00)",
         "error-foreground": "var(--vscode-errorForeground, #fff)",
         border: "var(--vscode-sideBar-border, #999998)",
         description: "var(--vscode-descriptionForeground, #999)",
         success: "var(--vscode-testing-iconPassed, #1bbe84)",
+        warning: "var(--vscode-list-warningForeground, #ffab00)",
+        hover: "var(vscode-list-hoverBackground, #ffffff)",
 
         // Removed these because unused for now and theming is sensitive