no explicit colors left besides tiptap css

continuedev · Jan 6, 2025 · 2ef62e0 · 2ef62e0
1 parent 24dc52a
commit 2ef62e0
Show file tree

Hide file tree

Showing 23 changed files with 76 additions and 69 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -161,21 +161,21 @@ 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;
             const id = `${language}-${name}-${version}`;
             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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -109,34 +109,36 @@ 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}
           </div>
         )}
       </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
@@ -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
@@ -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
@@ -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">