Improved theming (#3204)

web/src/app/admin/connectors/[connector]/Sidebar.tsx

@@ -62,11 +62,11 @@ export default function Sidebar() {
   ];
 
   return (
-    <div className="flex flex-none w-[250px] bg-background text-default">
+    <div className="flex flex-none w-[250px] text-default">
       <div
         className={`
                   fixed
-                  bg-background-100
+                  bg-background-sidebar
                   h-screen
                   transition-all
                   bg-opacity-80

web/src/app/chat/message/Messages.tsx

@@ -812,6 +812,7 @@ export const HumanMessage = ({
                         outline-none 
                         placeholder-gray-400 
                         resize-none
+                        text-text-editing-message
                         pl-4
                         overflow-y-auto
                         pr-12 
@@ -870,7 +871,6 @@ export const HumanMessage = ({
                           py-2 
                           px-3 
                           w-fit 
-                          bg-hover
                           bg-background-strong 
                           text-sm
                           rounded-lg
@@ -896,15 +896,13 @@ export const HumanMessage = ({
                         <TooltipProvider delayDuration={1000}>
                           <Tooltip>
                             <TooltipTrigger>
-                              <button
-                                className="hover:bg-hover p-1.5 rounded"
+                              <HoverableIcon
+                                icon={<FiEdit2 className="text-gray-600" />}
                                 onClick={() => {
                                   setIsEditing(true);
                                   setIsHovered(false);
                                 }}
-                              >
-                                <FiEdit2 className="!h-4 !w-4" />
-                              </button>
+                              />
                             </TooltipTrigger>
                             <TooltipContent>Edit</TooltipContent>
                           </Tooltip>

web/src/app/chat/shared_chat_search/FixedLogo.tsx

@@ -47,7 +47,13 @@ export default function FixedLogo({
         </div>
       </Link>
       <div className="mobile:hidden fixed left-4 bottom-4">
-        <FiSidebar className="text-text-mobile-sidebar" />
+        <FiSidebar
+          className={`${
+            backgroundToggled
+              ? "text-text-mobile-sidebar-toggled"
+              : "text-text-mobile-sidebar-untoggled"
+          }`}
+        />
       </div>
     </>
   );

web/src/components/UserDropdown.tsx

@@ -136,7 +136,7 @@ export function UserDropdown({
             <div
               className="
                 my-auto
-                bg-background-strong
+                bg-userdropdown-background
                 ring-2
                 ring-transparent
                 group-hover:ring-background-300/50

web/src/components/assistants/AssistantBanner.tsx

@@ -45,7 +45,7 @@ export default function AssistantBanner({
                 <div
                   className={`${
                     mobile ? "w-full" : "w-36 mx-3"
-                  } flex py-1.5 scale-[1.] rounded-full border border-background-150 justify-center items-center gap-x-2 py-1 px-3 hover:bg-background-125 transition-colors cursor-pointer`}
+                  } flex py-1.5 scale-[1.] rounded-full border border-border-recent-assistants justify-center items-center gap-x-2 py-1 px-3 hover:bg-background-125 transition-colors cursor-pointer`}
                   onClick={() => onAssistantChange(assistant)}
                 >
                   <AssistantIcon
@@ -53,7 +53,7 @@ export default function AssistantBanner({
                     size="xs"
                     assistant={assistant}
                   />
-                  <span className="font-semibold text-text-800 text-xs truncate max-w-[120px]">
+                  <span className="font-semibold text-text-recent-assistants text-xs truncate max-w-[120px]">
                     {assistant.name}
                   </span>
                 </div>

web/src/components/header/LogoType.tsx

@@ -54,7 +54,14 @@ export default function LogoType({
           onClick={() => toggleSidebar()}
           className="flex gap-x-2 items-center ml-4 desktop:invisible "
         >
-          <FiSidebar size={20} className="text-text-mobile-sidebar" />
+          <FiSidebar
+            size={20}
+            className={`${
+              toggled
+                ? "text-text-mobile-sidebar-toggled"
+                : "text-text-mobile-sidebar-untoggled"
+            }`}
+          />
           {!showArrow && (
             <Logo className="desktop:hidden -my-2" height={24} width={24} />
           )}

web/src/components/search/filtering/Filters.tsx

@@ -496,7 +496,6 @@ export function HorizontalSourceSelector({
               max-w-64
               border-border 
               rounded-lg 
-              bg-background
               max-h-96 
               overflow-y-scroll
               overscroll-contain
@@ -508,7 +507,6 @@ export function HorizontalSourceSelector({
               w-fit
               gap-x-1
               hover:bg-hover
-              bg-hover-light
               flex
               items-center
               bg-background-search-filter
@@ -522,7 +520,7 @@ export function HorizontalSourceSelector({
           </div>
         </PopoverTrigger>
         <PopoverContent
-          className="bg-background border-border border rounded-md z-[200] p-0"
+          className="bg-background-search-filter border-border border rounded-md z-[200] p-0"
           align="start"
         >
           <Calendar
@@ -541,7 +539,7 @@ export function HorizontalSourceSelector({
                 selectValue: timeRange?.selectValue || "",
               });
             }}
-            className="rounded-md "
+            className="rounded-md"
           />
         </PopoverContent>
       </Popover>

web/src/components/search/filtering/TagFilter.tsx

@@ -94,7 +94,22 @@ export function TagFilter({
               <div
                 key={tag.tag_key + tag.tag_value}
                 onClick={() => onSelectTag(tag)}
-                className="max-w-full break-all line-clamp-1 text-ellipsis flex text-sm border border-border py-0.5 px-2 rounded cursor-pointer bg-background hover:bg-hover"
+                className={`
+                max-w-full 
+                break-all 
+                line-clamp-1 
+                text-ellipsis 
+                flex 
+                text-sm 
+                border 
+                border-border 
+                py-0.5 
+                px-2 
+                rounded 
+                cursor-pointer 
+                bg-background-search-filter 
+                hover:bg-background-search-filter-dropdown
+                `}
               >
                 {tag.tag_key}
                 <b>=</b>
@@ -121,7 +136,7 @@ export function TagFilter({
         >
           <div
             ref={popupRef}
-            className="p-2 border border-border rounded shadow-lg w-72 bg-background"
+            className="p-2 border border-border rounded shadow-lg w-72 bg-background-search-filter"
           >
             <div className="flex border-b border-border font-medium pb-1 text-xs mb-2">
               <FiTag className="mr-1 my-auto" />
@@ -144,7 +159,11 @@ export function TagFilter({
                     cursor-pointer 
                     bg-background 
                     hover:bg-hover
-                    ${selectedTags.includes(tag) ? "bg-hover" : ""}
+                    ${
+                      selectedTags.includes(tag)
+                        ? "bg-background-search-filter-dropdown"
+                        : ""
+                    }
                   `}
                   >
                     {tag.tag_key}

web/src/components/ui/calendar.tsx

@@ -54,7 +54,8 @@ function Calendar({
         day_range_middle:
           "aria-selected:bg-calendar-range-middle aria-selected:text-calendar-text-in-range dark:aria-selected:bg-calendar-range-middle-dark dark:aria-selected:text-calendar-text-in-range-dark",
         day_hidden: "invisible",
-        day_range_start: "bg-white text-text-900",
+        day_range_start:
+          "bg-calendar-background-selected ring-calendar-ring-selected ring text-text-900",
         ...classNames,
       }}
       components={{

web/tailwind-themes/tailwind.config.js

@@ -108,6 +108,8 @@ module.exports = {
         "background-search-filter": "var(--background-100)",
         "background-search-filter-dropdown": "var(--background-100)",
 
+        "user-bubble": "var(--user-bubble)",
+
         // colors for sidebar in chat, search, and manage settings
         "background-sidebar": "var(--background-100)",
         "background-chatbar": "var(--background-100)",
@@ -141,6 +143,14 @@ module.exports = {
         // Background for chat messages (user bubbles)
         user: "var(--user-bubble)",
 
+        "userdropdown-background": "var(--background-100)",
+        "text-mobile-sidebar-toggled": "var(--text-800)",
+        "text-mobile-sidebar-untoggled": "var(--text-500)",
+        "text-editing-message": "var(--text-800)",
+        "background-sidebar": "var(--background-100)",
+        "background-search-filter": "var(--background-100)",
+        "background-search-filter-dropdown": "var(--background-hover)",
+
         "background-toggle": "var(--background-100)",
 
         // Colors for the search toggle buttons
@@ -200,6 +210,8 @@ module.exports = {
         "calendar-today-bg-dark": "var(--background-800)",
         "calendar-today-text": "var(--text-800)",
         "calendar-today-text-dark": "var(--text-200)",
+        "calendar-background-selected": "var(--white)",
+        "calendar-ring-selected": "var(--background-900)",
 
         "user-text": "var(--text-800)",
 
@@ -350,6 +362,39 @@ module.exports = {
       fontStyle: {
         "token-italic": "italic",
       },
+      calendar: {
+        // Light mode
+        "bg-selected": "#4B5563",
+        "bg-outside-selected": "rgba(75, 85, 99, 0.2)",
+        "text-muted": "#6B7280",
+        "text-selected": "#FFFFFF",
+        "range-start": "#000000",
+        "range-middle": "#F3F4F6",
+        "range-end": "#000000",
+        "text-in-range": "#1F2937",
+
+        // Dark mode
+        "bg-selected-dark": "#6B7280",
+        "bg-outside-selected-dark": "rgba(107, 114, 128, 0.2)",
+        "text-muted-dark": "#9CA3AF",
+        "text-selected-dark": "#F3F4F6",
+        "range-start-dark": "#374151",
+        "range-middle-dark": "#4B5563",
+        "range-end-dark": "#374151",
+        "text-in-range-dark": "#E5E7EB",
+
+        // Hover effects
+        "hover-bg": "#9CA3AF",
+        "hover-bg-dark": "#6B7280",
+        "hover-text": "#374151",
+        "hover-text-dark": "#E5E7EB",
+
+        // Today's date
+        "today-bg": "#D1D5DB",
+        "today-bg-dark": "#4B5563",
+        "today-text": "#374151",
+        "today-text-dark": "#D1D5DB",
+      },
     },
   },
   safelist: [