update neutral

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/ChatPage.tsx

@@ -1941,7 +1941,7 @@ export function ChatPage({
                   page="chat"
                   ref={innerSidebarElementRef}
                   toggleSidebar={toggleSidebar}
-                  toggled={toggledSidebar && !settings?.isMobile}
+                  toggled={toggledSidebar}
                   backgroundToggled={toggledSidebar || showDocSidebar}
                   existingChats={chatSessions}
                   currentChatSession={selectedChatSession}

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

@@ -819,6 +819,7 @@ export const HumanMessage = ({
                         outline-none 
                         placeholder-gray-400 
                         resize-none
+                        text-text-editing-message
                         pl-4
                         overflow-y-auto
                         pr-12 
@@ -877,7 +878,6 @@ export const HumanMessage = ({
                           py-2 
                           px-3 
                           w-fit 
-                          bg-hover
                           bg-background-strong 
                           text-sm
                           rounded-lg
@@ -903,15 +903,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

@@ -49,7 +49,13 @@ export default function FixedLogo({
         </div>
       </Link>
       <div className="mobile:hidden fixed left-2.5 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

@@ -95,7 +95,9 @@ export function UserDropdown({ page }: { page?: pageType }) {
       }
 
       // Construct the current URL
-      const currentUrl = `${pathname}${searchParams.toString() ? `?${searchParams.toString()}` : ""}`;
+      const currentUrl = `${pathname}${
+        searchParams.toString() ? `?${searchParams.toString()}` : ""
+      }`;
 
       // Encode the current URL to use as a redirect parameter
       const encodedRedirect = encodeURIComponent(currentUrl);
@@ -130,7 +132,7 @@ export function UserDropdown({ page }: { page?: pageType }) {
             <div
               className="
                 my-auto
-                bg-background-strong
+                bg-userdropdown-background
                 ring-2
                 ring-transparent
                 group-hover:ring-background-300/50
@@ -244,7 +246,11 @@ export function UserDropdown({ page }: { page?: pageType }) {
                     setShowNotifications(true);
                   }}
                   icon={<BellIcon className="h-5 w-5 my-auto mr-2" />}
-                  label={`Notifications ${notifications && notifications.length > 0 ? `(${notifications.length})` : ""}`}
+                  label={`Notifications ${
+                    notifications && notifications.length > 0
+                      ? `(${notifications.length})`
+                      : ""
+                  }`}
                 />
 
                 {showLogout &&

web/src/components/assistants/AssistantBanner.tsx

@@ -41,7 +41,7 @@ export default function AssistantBanner({
             <Tooltip>
               <TooltipTrigger asChild>
                 <div
-                  className="flex w-36 mx-3 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"
+                  className="flex w-36 mx-3 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-recent-assistants-hover transition-colors cursor-pointer"
                   onClick={() => onAssistantChange(assistant)}
                 >
                   <AssistantIcon
@@ -49,7 +49,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

@@ -51,7 +51,14 @@ export default function LogoType({
           onClick={() => toggleSidebar()}
           className="pt-[2px] flex  gap-x-2 items-center ml-4 desktop:invisible mb-auto"
         >
-          <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/SearchAnswer.tsx

@@ -74,7 +74,7 @@ export default function SearchAnswer({
         searchAnswerExpanded ? "min-h-[16rem]" : "h-[16rem]"
       } ${
         !searchAnswerExpanded && searchAnswerOverflowing && "overflow-y-hidden"
-      } p-4 border-2 border-search-answer-border rounded-lg relative`}
+      } p-4 border-2 border-search-answer-border text-text-search-answer   bg-background-search-answer  rounded-lg relative`}
     >
       <div>
         <div className="flex gap-x-2">
@@ -152,7 +152,6 @@ export default function SearchAnswer({
       {!searchAnswerExpanded && searchAnswerOverflowing && (
         <div className="absolute bottom-0 left-0 w-full h-[100px] bg-gradient-to-b from-background/5 via-background/60 to-background/90"></div>
       )}
-
       {!searchAnswerExpanded && searchAnswerOverflowing && (
         <div className="w-full h-12 absolute items-center content-center flex left-0 px-4 bottom-0">
           <button

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

@@ -121,7 +121,7 @@ export function SourceSelector({
           </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
@@ -490,22 +490,26 @@ 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
-            mode="single"
-            selected={timeRange ? new Date(timeRange.from) : undefined}
-            onSelect={(date) => {
-              const selectedDate = date || new Date();
-              const today = new Date();
+            mode="range"
+            selected={
+              timeRange
+                ? { from: new Date(timeRange.from), to: new Date(timeRange.to) }
+                : undefined
+            }
+            onSelect={(daterange) => {
+              const initialDate = daterange?.from || new Date();
+              const endDate = daterange?.to || new Date();
               setTimeRange({
-                from: selectedDate > today ? today : selectedDate,
-                to: today,
+                from: initialDate,
+                to: endDate,
                 selectValue: timeRange?.selectValue || "",
               });
             }}
-            className="rounded-md "
+            className="rounded-md"
           />
         </PopoverContent>
       </Popover>

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

@@ -88,7 +88,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>
@@ -109,7 +124,7 @@ export function TagFilter({
         <div className="absolute top-0 right-0 transform translate-x-[105%] z-40">
           <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" />
@@ -132,7 +147,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

@@ -34,23 +34,45 @@ function Calendar({
         table: "w-full border-collapse space-y-1",
         head_row: "flex",
         head_cell:
-          "text-neutral-500 rounded-md w-9 font-normal text-[0.8rem] dark:text-neutral-400",
+          "text-calendar-text-muted rounded-md w-9 font-normal text-[0.8rem] dark:text-calendar-text-muted-dark",
         row: "flex w-full mt-2",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-neutral-100/50 [&:has([aria-selected])]:bg-neutral-100 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 dark:[&:has([aria-selected].day-outside)]:bg-neutral-800/50 dark:[&:has([aria-selected])]:bg-neutral-800",
+        cell: cn(
+          "h-9 w-9 text-center text-sm p-0 relative",
+          "[&:has([aria-selected].day-range-end)]:rounded-r-md",
+          "[&:has([aria-selected].day-outside)]:bg-calendar-bg-outside-selected",
+          "[&:has([aria-selected])]:bg-calendar-bg-selected",
+          "first:[&:has([aria-selected])]:rounded-l-md",
+          "last:[&:has([aria-selected])]:rounded-r-md",
+          "focus-within:relative focus-within:z-20",
+          "dark:[&:has([aria-selected].day-outside)]:bg-calendar-bg-outside-selected-dark",
+          "dark:[&:has([aria-selected])]:bg-calendar-bg-selected-dark"
+        ),
         day: cn(
           buttonVariants({ variant: "ghost" }),
           "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
         ),
-        day_range_end: "day-range-end !text-neutral-200",
-        day_selected:
-          "bg-neutral-900 text-neutral-50 hover:bg-neutral-900 hover:text-neutral-50 focus:bg-neutral-900 focus:text-neutral-50 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50 dark:hover:text-neutral-900 dark:focus:bg-neutral-50 dark:focus:text-neutral-900",
+        day_selected: cn(
+          "bg-calendar-selected text-calendar-text-selected rounded-full",
+          "hover:bg-calendar-selected hover:text-calendar-text-selected",
+          "focus:bg-calendar-selected focus:text-calendar-text-selected"
+        ),
+        day_range_start: cn(
+          "bg-calendar-range-start text-calendar-text-end rounded-l-full",
+          "hover:bg-calendar-range-start hover:text-calendar-text-end",
+          "focus:bg-calendar-range-start focus:text-calendar-text-end"
+        ),
+        day_range_end: cn(
+          "bg-calendar-range-end text-calendar-text-selected rounded-r-full",
+          "hover:bg-calendar-range-end hover:text-calendar-text-selected",
+          "focus:bg-calendar-range-end focus:text-calendar-text-selected"
+        ),
         day_today:
           "bg-neutral-100 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-50",
         day_outside:
           "day-outside text-neutral-500 opacity-50 aria-selected:bg-neutral-100/50 aria-selected:text-neutral-500 aria-selected:opacity-30 dark:text-neutral-400 dark:aria-selected:bg-neutral-800/50 dark:aria-selected:text-neutral-400",
         day_disabled: "text-neutral-500 opacity-50 dark:text-neutral-400",
         day_range_middle:
-          "aria-selected:bg-neutral-100 aria-selected:text-neutral-900 dark:aria-selected:bg-neutral-800 dark:aria-selected:text-neutral-50",
+          "aria-selected:bg-calendar-bg-selected aria-selected:text-calendar-text-selected dark:aria-selected:bg-calendar-bg-selected-dark dark:aria-selected:text-calendar-text-selected-dark",
         day_hidden: "invisible",
         ...classNames,
       }}

web/tailwind-themes/tailwind.config.js

@@ -286,7 +286,42 @@ module.exports = {
             inverted: "var(--dark-tremor-content-inverted)",
           },
         },
+        calendar: {
+          // Light mode
+          "bg-selected": "#000000",
+          "bg-outside-selected": "#E5E7EB",
+          "text-muted": "#6B7280",
+          "text-end": "#000000",
+          "text-selected": "#FFFFFF",
+          "range-start": "#E5E7EB",
+          "range-middle": "#F3F4F6",
+          "range-end": "#E5E7EB",
+          "text-in-range": "#374151",
+
+          // 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": "#374151",
+          "range-end-dark": "#374151",
+          "text-in-range-dark": "#D1D5DB",
+
+          // Hover effects
+          "hover-bg": "#9CA3AF",
+          "hover-bg-dark": "#6B7280",
+          "hover-text": "#374151",
+          "hover-text-dark": "#E5E7EB",
+
+          // Today's date
+          "today-bg": "#E5E7EB",
+          "today-bg-dark": "#374151",
+          "today-text": "#374151",
+          "today-text-dark": "#E5E7EB",
+        },
       },
+
       boxShadow: {
         // light
         "tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",