continuedev · RomneyDa · Dec 23, 2024 · Jan 1, 2025 · Jan 4, 2025 · Jan 5, 2025
diff --git a/core/autocomplete/filtering/test/testCases.ts b/core/autocomplete/filtering/test/testCases.ts
@@ -650,10 +650,10 @@ export const Button = ({
 <|fim|>
   );
 };`,
-    llmOutput: `<button onClick={onClick} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+    llmOutput: `<button onClick={onClick} className="bg-blue-500 hover:bg-primary text-primary-foreground font-bold py-2 px-4 rounded">
       {children}
     </button>`,
-    expectedCompletion: `<button onClick={onClick} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+    expectedCompletion: `<button onClick={onClick} className="bg-blue-500 hover:bg-primary text-primary-foreground font-bold py-2 px-4 rounded">
       {children}
     </button>`,
     filename: "Button.tsx",

diff --git a/...c/main/kotlin/com/github/continuedev/continueintellijextension/editor/InlineEditAction.kt b/...c/main/kotlin/com/github/continuedev/continueintellijextension/editor/InlineEditAction.kt
@@ -479,7 +479,7 @@ class CustomPanel(
         JPanel(MigLayout("insets 0, fillx")).apply {
             val leftLabel =
                 JLabel("Type to re-prompt").apply {
-                    foreground = Color(156, 163, 175) // text-gray-400
+                    foreground = Color(156, 163, 175) // text-description
                     font = UIUtil.getFontWithFallback("Arial", Font.PLAIN, 11)
                     border = EmptyBorder(0, 4, 0, 0)
                 }
@@ -737,7 +737,7 @@ class TransparentArrowButtonUI : BasicComboBoxUI() {
         if (item != null) {
             val c = renderer.getListCellRendererComponent(listBox, item, -1, false, false)
             c.font = comboBox.font
-            c.foreground = Color(156, 163, 175) // text-gray-400
+            c.foreground = Color(156, 163, 175) // text-description
             c.background = comboBox.background
 
             if (c is JComponent) {

diff --git a/gui/src/App.tsx b/gui/src/App.tsx
@@ -1,4 +1,3 @@
-import { useDispatch } from "react-redux";
 import { RouterProvider, createMemoryRouter } from "react-router-dom";
 import Layout from "./components/Layout";
 import { VscThemeProvider } from "./context/VscTheme";
@@ -13,6 +12,7 @@ import MorePage from "./pages/More";
 import Stats from "./pages/stats";
 import { ROUTES } from "./util/navigation";
 import { SubmenuContextProvidersProvider } from "./context/SubmenuContextProviders";
+import ThemePage from "./pages/theme";
 
 const router = createMemoryRouter([
   {
@@ -56,6 +56,10 @@ const router = createMemoryRouter([
         path: "/migration",
         element: <MigrationPage />,
       },
+      {
+        path: ROUTES.THEME,
+        element: <ThemePage />,
+      },
     ],
   },
 ]);

diff --git a/gui/src/components/AccountDialog.tsx b/gui/src/components/AccountDialog.tsx
@@ -43,7 +43,7 @@ export default function AccountDialog() {
     return (
       <div className="p-4 pt-0">
         <h1 className="mb-0.5 text-center text-2xl">Account</h1>
-        <span className="text-lightgray mb-4 block text-center">
+        <span className="text-description mb-4 block text-center">
           Signed out
         </span>
         <Button className="w-full" onClick={login}>
@@ -77,7 +77,7 @@ export default function AccountDialog() {
     <div className="flex flex-col items-center gap-5 p-4 pt-0">
       <div className="flex flex-col items-center text-center">
         <h1 className="mb-1 text-2xl">Account</h1>
-        <span className="text-lightgray text-sm">
+        <span className="text-description text-sm">
           {session.account.label === "" ? (
             "Signed in"
           ) : (

diff --git a/gui/src/components/CodeToEditCard/AddFileButton.tsx b/gui/src/components/CodeToEditCard/AddFileButton.tsx
@@ -31,7 +31,7 @@ export default function AddFileButton({ onClick }: AddFileButtonProps) {
       <div className="relative">
         <Listbox.Button
           ref={buttonRef}
-          className="bg-vsc-editor-background border-lightgray/50 flex h-5 cursor-pointer items-center justify-between rounded-md border border-solid px-0 shadow-sm transition-colors"
+          className="bg-vsc-editor-background border-border/50 flex h-5 cursor-pointer items-center justify-between rounded-md border border-solid px-0 shadow-sm transition-colors"
         >
           <div
             className="flex h-5 w-14 items-center justify-center gap-1 hover:brightness-125"
@@ -47,12 +47,12 @@ export default function AddFileButton({ onClick }: AddFileButtonProps) {
             </span>
           </div>
 
-          <div className="border-lightgray/50 h-4 w-[1px] border-y-0 border-l-0 border-r border-solid" />
+          <div className="border-border/50 h-4 w-[1px] border-y-0 border-l-0 border-r border-solid" />
 
           <ChevronDownIcon className="text-vsc-foreground h-2.5 w-2.5 cursor-pointer px-1 brightness-75 hover:brightness-125" />
         </Listbox.Button>
 
-        <Listbox.Options className="bg-vsc-editor-background border-lightgray/50 absolute right-0 top-full z-50 mt-1 min-w-fit whitespace-nowrap rounded-md border border-solid px-1 py-0 shadow-lg">
+        <Listbox.Options className="bg-vsc-editor-background border-border/50 absolute right-0 top-full z-50 mt-1 min-w-fit whitespace-nowrap rounded-md border border-solid px-1 py-0 shadow-lg">
           <Listbox.Option
             value="addAllFiles"
             className="text-vsc-foreground block w-full cursor-pointer px-2 py-1 text-left text-[10px] brightness-75 hover:brightness-125"

diff --git a/gui/src/components/CodeToEditCard/AddFileCombobox.tsx b/gui/src/components/CodeToEditCard/AddFileCombobox.tsx
@@ -67,7 +67,7 @@ export default function AddFileCombobox({
               onFocus={() => {
                 buttonRef.current?.click();
               }}
-              className="bg-vsc-background border-lightgray text-vsc-foreground box-border w-full rounded border border-solid py-0.5 pl-2 focus:outline-none"
+              className="bg-vsc-background border-border text-vsc-foreground box-border w-full rounded border border-solid py-0.5 pl-2 focus:outline-none"
               onChange={(event) => setQuery(event.target.value)}
               placeholder="Type to search files..."
               onKeyDown={(e) => {
@@ -77,7 +77,7 @@ export default function AddFileCombobox({
               }}
             />
 
-            <Combobox.Options className="no-scrollbar bg-vsc-editor-background border-lightgray/50 absolute left-0 right-0 z-50 mt-1 max-h-60 overflow-y-auto overflow-x-hidden rounded-md border border-solid px-1 py-0 pl-0 pr-5 shadow-lg focus:outline-none">
+            <Combobox.Options className="no-scrollbar bg-vsc-editor-background border-border/50 absolute left-0 right-0 z-50 mt-1 max-h-60 overflow-y-auto overflow-x-hidden rounded-md border border-solid px-1 py-0 pl-0 pr-5 shadow-lg focus:outline-none">
               {filteredFiles.length > 0 ? (
                 filteredFiles.map((file) => (
                   <Combobox.Option
@@ -103,7 +103,7 @@ export default function AddFileCombobox({
                         </div>
 
                         <span
-                          className={`text-lightgray max-w-[30%] truncate ${
+                          className={`text-description max-w-[30%] truncate ${
                             active || selected ? "visible" : "invisible"
                           } group-hover:visible`}
                         >
@@ -114,7 +114,7 @@ export default function AddFileCombobox({
                   </Combobox.Option>
                 ))
               ) : (
-                <div className="text-vsc-list-active-foreground0 px-2 py-1 text-xs">
+                <div className="text-vsc-list-active-foreground px-2 py-1 text-xs">
                   No results
                 </div>
               )}

diff --git a/gui/src/components/CodeToEditCard/CodeToEditCard.tsx b/gui/src/components/CodeToEditCard/CodeToEditCard.tsx
@@ -56,7 +56,7 @@ export default function CodeToEditCard() {
 
   return (
     <div className="bg-vsc-editor-background mx-3 flex flex-col rounded-t-lg p-1">
-      <div className="text-lightgray flex items-center justify-between gap-1.5 py-1.5 pl-3 pr-2 text-xs">
+      <div className="text-description flex items-center justify-between gap-1.5 py-1.5 pl-3 pr-2 text-xs">
         <span>{title}</span>
         <AddFileButton onClick={() => setShowAddFileCombobox(true)} />
       </div>
@@ -75,7 +75,7 @@ export default function CodeToEditCard() {
       ) : (
         !showAddFileCombobox && (
           <div
-            className="text-lightgray hover:bg-lightgray hover:text-vsc-foreground -mt-0.5 flex cursor-pointer items-center justify-center gap-1 rounded py-1 text-center text-xs transition-colors hover:bg-opacity-20"
+            className="text-description hover:bg-description hover:text-vsc-foreground -mt-0.5 flex cursor-pointer items-center justify-center gap-1 rounded py-1 text-center text-xs transition-colors hover:bg-opacity-20"
             onClick={() => setShowAddFileCombobox(true)}
           >
             <PlusIcon className="h-3.5 w-3.5" />
@@ -96,7 +96,7 @@ export default function CodeToEditCard() {
             onClick={(e) => {
               setShowAddFileCombobox(false);
             }}
-            className="text-lightgray hover:bg-lightgray hover:text-vsc-foreground mb-2 h-3.5 w-3.5 cursor-pointer rounded-md rounded-sm p-0.5 hover:bg-opacity-20"
+            className="text-description hover:bg-description hover:text-vsc-foreground mb-2 h-3.5 w-3.5 cursor-pointer rounded-sm p-0.5 hover:bg-opacity-20"
           />
         </div>
       )}

diff --git a/gui/src/components/CodeToEditCard/CodeToEditListItem.tsx b/gui/src/components/CodeToEditCard/CodeToEditListItem.tsx
@@ -78,7 +78,7 @@ export default function CodeToEditListItem({
       }}
     >
       <div
-        className={`hover:bg-lightgray hover:text-vsc-foreground flex items-center justify-between rounded px-2 py-0.5 transition-colors hover:bg-opacity-20 ${showCodeSnippet && "text-vsc-foreground bg-lightgray bg-opacity-20"}`}
+        className={`hover:bg-description hover:text-vsc-foreground flex items-center justify-between rounded px-2 py-0.5 transition-colors hover:bg-opacity-20 ${showCodeSnippet && "text-vsc-foreground bg-border bg-opacity-20"}`}
       >
         <div className="flex w-4/5 min-w-0 items-center gap-0.5">
           <FileIcon filename={code.filepath} height={"18px"} width={"18px"} />
@@ -92,7 +92,7 @@ export default function CodeToEditListItem({
             >
               {title}
             </span>
-            <span className="text-lightgray invisible flex-grow truncate text-xs group-hover:visible">
+            <span className="text-description invisible flex-grow truncate text-xs group-hover:visible">
               {last2Parts}
             </span>
           </div>
@@ -106,15 +106,15 @@ export default function CodeToEditListItem({
                   e.stopPropagation();
                   setShowCodeSnippet(false);
                 }}
-                className="text-lightgray hover:bg-lightgray hover:text-vsc-foreground h-3.5 w-3.5 cursor-pointer rounded-sm p-0.5 hover:bg-opacity-20"
+                className="text-description hover:bg-description hover:text-vsc-foreground h-3.5 w-3.5 cursor-pointer rounded-sm p-0.5 hover:bg-opacity-20"
               />
             ) : (
               <ChevronRightIcon
                 onClick={(e) => {
                   e.stopPropagation();
                   setShowCodeSnippet(true);
                 }}
-                className="text-lightgray hover:bg-lightgray hover:text-vsc-foreground h-3.5 w-3.5 cursor-pointer rounded-sm p-0.5 hover:bg-opacity-20"
+                className="text-description hover:bg-description hover:text-vsc-foreground h-3.5 w-3.5 cursor-pointer rounded-sm p-0.5 hover:bg-opacity-20"
               />
             )}
           </div>
@@ -124,7 +124,7 @@ export default function CodeToEditListItem({
                 e.stopPropagation();
                 onDelete(code);
               }}
-              className="text-lightgray hover:bg-lightgray hover:text-vsc-foreground h-3.5 w-3.5 cursor-pointer rounded-sm p-0.5 hover:bg-opacity-20"
+              className="text-description hover:bg-description hover:text-vsc-foreground h-3.5 w-3.5 cursor-pointer rounded-sm p-0.5 hover:bg-opacity-20"
             />
           </div>
         </div>

diff --git a/gui/src/components/Footer.tsx b/gui/src/components/Footer.tsx
@@ -8,7 +8,7 @@ function Footer() {
 
   if (defaultModel?.provider === "free-trial") {
     return (
-      <footer className="flex flex-col border-0 border-t border-solid border-t-zinc-700 px-2 py-2">
+      <footer className="border-t-border flex flex-col border-0 border-t border-solid px-2 py-2">
         <FreeTrialProgressBar
           completed={parseInt(localStorage.getItem("ftc") || "0")}
           total={FREE_TRIAL_LIMIT_REQUESTS}

diff --git a/gui/src/components/History/HistoryTableRow.tsx b/gui/src/components/History/HistoryTableRow.tsx
@@ -88,7 +88,7 @@ export function HistoryTableRow({
         >
           <div className="flex-1 cursor-pointer space-y-1">
             {editing ? (
-              <div className="text-md">
+              <div className="text-base">
                 <Input
                   type="text"
                   className="w-full"
@@ -100,7 +100,7 @@ export function HistoryTableRow({
                 />
               </div>
             ) : (
-              <span className="text-md block max-w-80 truncate text-base font-semibold">
+              <span className="block max-w-80 truncate text-base font-semibold">
                 {sessionMetadata.title}
               </span>
             )}

diff --git a/gui/src/components/InfoHover.tsx b/gui/src/components/InfoHover.tsx
@@ -19,7 +19,7 @@ const InfoHover = ({
     <>
       <InformationCircleIcon
         data-tooltip-id={dataTooltipId}
-        className={`h-${size ?? DEFAULT_SIZE} w-${size ?? DEFAULT_SIZE} cursor-help text-gray-500`}
+        className={`h-${size ?? DEFAULT_SIZE} w-${size ?? DEFAULT_SIZE} text-description cursor-help`}
       />
 
       <ToolTip id={dataTooltipId} place="bottom">

diff --git a/gui/src/components/Layout.tsx b/gui/src/components/Layout.tsx
@@ -301,7 +301,7 @@ const Layout = () => {
 
             {hasFatalErrors && pathname !== ROUTES.CONFIG_ERROR && (
               <div
-                className="z-50 cursor-pointer bg-red-600 p-4 text-center text-white"
+                className="bg-error text-error-foreground z-50 cursor-pointer p-4 text-center"
                 role="alert"
                 onClick={() => navigate(ROUTES.CONFIG_ERROR)}
               >

diff --git a/gui/src/components/OnboardingCard/components/BestExperienceConfigForm.tsx b/gui/src/components/OnboardingCard/components/BestExperienceConfigForm.tsx
@@ -2,7 +2,7 @@ import { CubeIcon } from "@heroicons/react/24/outline";
 import { DEFAULT_CHAT_MODEL_CONFIG } from "core/config/default";
 import { useContext, useState } from "react";
 import { useDispatch } from "react-redux";
-import { Button, Input, InputSubtext, lightGray } from "../..";
+import { Button, Input, InputSubtext, vscBorder } from "../..";
 import { IdeMessengerContext } from "../../../context/IdeMessenger";
 import { models } from "../../../pages/AddNewModel/configs/models";
 import { providers } from "../../../pages/AddNewModel/configs/providers";
@@ -84,7 +84,7 @@ function BestExperienceConfigForm({
             <label className="text-lg font-bold">Chat model</label>
             <div
               className="flex hidden items-center justify-end text-xs font-semibold sm:flex"
-              style={{ color: lightGray }}
+              style={{ color: vscBorder }}
             >
               <CubeIcon className="mr-1 h-4 w-4 flex-shrink-0" />
               <span className="inline text-right italic">
@@ -118,7 +118,7 @@ function BestExperienceConfigForm({
             <label className="text-lg font-bold">Autocomplete model</label>
             <div
               className="flex hidden items-center text-xs font-semibold sm:flex"
-              style={{ color: lightGray }}
+              style={{ color: vscBorder }}
             >
               <CubeIcon className="mr-1 inline h-4 w-4 flex-shrink-0" />
               <span className="text-right italic">

diff --git a/gui/src/components/OnboardingCard/components/OllamaCompletedStep.tsx b/gui/src/components/OnboardingCard/components/OllamaCompletedStep.tsx
@@ -8,7 +8,7 @@ function OllamaCompletedStep({ text }: OllamaCompletedStepProps) {
   return (
     <div className="flex items-center justify-between">
       <p className="mr-1 w-3/4 truncate font-mono text-sm">{text}</p>
-      <CheckCircleIcon width={24} height={24} className="text-emerald-600" />
+      <CheckCircleIcon width={24} height={24} className="text-success" />
     </div>
   );
 }

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/ProfileSwitcher.tsx b/gui/src/components/ProfileSwitcher.tsx
@@ -7,12 +7,13 @@ import { UserCircleIcon as UserCircleIconSolid } from "@heroicons/react/24/solid
 import { ProfileDescription } from "core/config/ConfigHandler";
 import { Fragment, useContext, useEffect, useState } from "react";
 import ReactDOM from "react-dom";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import styled from "styled-components";
 import {
   defaultBorderRadius,
-  lightGray,
   vscBackground,
+  vscBorder,
+  vscDescription,
   vscForeground,
   vscInputBackground,
   vscListActiveBackground,
@@ -22,7 +23,6 @@ import { useAuth } from "../context/Auth";
 import { IdeMessengerContext } from "../context/IdeMessenger";
 import { useWebviewListener } from "../hooks/useWebviewListener";
 import { setLastControlServerBetaEnabledStatus } from "../redux/slices/miscSlice";
-import { RootState } from "../redux/store";
 import { getFontSize } from "../util";
 import HeaderButtonWithToolTip from "./gui/HeaderButtonWithToolTip";
 import { useAppSelector } from "../redux/hooks";
@@ -45,7 +45,7 @@ const StyledListboxButton = styled(Listbox.Button)`
   white-space: nowrap;
   overflow: hidden;
 
-  border: 0.5px solid ${lightGray};
+  border: 0.5px solid ${vscBorder};
   border-radius: ${defaultBorderRadius};
 
   display: grid;
@@ -202,7 +202,7 @@ function ProfileSwitcher() {
               <span className="truncate">{selectedProfile()?.title}</span>
               <div className="pointer-events-none flex items-center">
                 <ChevronUpDownIcon
-                  className="h-4 w-4 text-gray-400"
+                  className="text-description h-4 w-4"
                   aria-hidden="true"
                 />
               </div>
@@ -228,7 +228,7 @@ function ProfileSwitcher() {
                     <div
                       className="px-2 py-1"
                       style={{
-                        color: lightGray,
+                        color: vscDescription,
                         fontSize: getFontSize() - 2,
                       }}
                     >

diff --git a/gui/src/components/StepContainer/AcceptRejectAllButtons.tsx b/gui/src/components/StepContainer/AcceptRejectAllButtons.tsx
@@ -34,12 +34,12 @@ 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="mr-1 h-4 w-4 text-red-600" />
+        <XMarkIcon className="text-error mr-1 h-4 w-4" />
         {isSingleRangeEdit ? (
           <span>Reject ({getMetaKeyLabel()}⇧⌫)</span>
         ) : (
@@ -51,10 +51,10 @@ 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="mr-1 h-4 w-4 text-green-600" />
+        <CheckIcon className="text-success mr-1 h-4 w-4" />
         {isSingleRangeEdit ? (
           <span>Accept ({getMetaKeyLabel()}⇧⏎)</span>
         ) : (