docs: improve tailwind configuration (#5215)

www/packages/docs-ui/src/components/Search/Hits/GroupName/index.tsx

@@ -10,7 +10,7 @@ export const SearchHitGroupName = ({ name }: SearchHitGroupNameProps) => {
     <span
       className={clsx(
         "pb-docs_0.25 flex px-docs_0.5 pt-docs_1",
-        "text-medusa-fg-muted dark:text-medusa-fg-muted-dark",
+        "text-medusa-fg-muted",
         "text-compact-x-small-plus"
       )}
     >

www/packages/docs-ui/src/components/Search/Hits/index.tsx

@@ -145,8 +145,8 @@ export const SearchHits = ({
     <div
       className={clsx(
         "overflow-auto",
-        "[&_mark]:bg-medusa-bg-highlight dark:[&_mark]:bg-medusa-bg-highlight-dark",
-        "[&_mark]:text-medusa-fg-interactive dark:[&_mark]:text-medusa-fg-interactive-dark"
+        "[&_mark]:bg-medusa-bg-highlight",
+        "[&_mark]:text-medusa-fg-interactive"
       )}
     >
       {Object.keys(grouped).map((groupName, index) => (
@@ -157,8 +157,8 @@ export const SearchHits = ({
               className={clsx(
                 "gap-docs_0.25 relative flex flex-1 flex-col p-docs_0.5",
                 "overflow-x-hidden text-ellipsis whitespace-nowrap break-words",
-                "hover:bg-medusa-bg-base-hover dark:hover:bg-medusa-bg-base-hover-dark",
-                "focus:bg-medusa-bg-base-hover dark:focus:bg-medusa-bg-base-hover-dark",
+                "hover:bg-medusa-bg-base-hover",
+                "focus:bg-medusa-bg-base-hover",
                 "last:mb-docs_1 focus:outline-none"
               )}
               key={index}
@@ -173,7 +173,7 @@ export const SearchHits = ({
             >
               <span
                 className={clsx(
-                  "text-compact-small-plus text-medusa-fg-base dark:text-medusa-fg-base-dark",
+                  "text-compact-small-plus text-medusa-fg-base",
                   "max-w-full"
                 )}
               >
@@ -191,7 +191,7 @@ export const SearchHits = ({
                 />
               </span>
               {item.type !== "lvl1" && (
-                <span className="text-compact-small text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark">
+                <span className="text-compact-small text-medusa-fg-subtle">
                   <Snippet
                     attribute={
                       item.content

www/packages/docs-ui/src/components/Search/Modal/index.tsx

@@ -199,35 +199,33 @@ export const SearchModal = ({
         indexName={algolia.mainIndexName}
         searchClient={searchClient}
       >
-        <div
-          className={clsx("bg-medusa-bg-base dark:bg-medusa-bg-base-dark flex")}
-        >
+        <div className={clsx("bg-medusa-bg-base flex")}>
           <SearchBox
             classNames={{
               root: clsx(
                 "h-[56px] w-full md:rounded-t-docs_xl relative border-0 border-solid",
-                "border-b border-medusa-border-base dark:border-medusa-border-base-dark",
+                "border-b border-medusa-border-base",
                 "bg-transparent"
               ),
               form: clsx("h-full md:rounded-t-docs_xl bg-transparent"),
               input: clsx(
-                "w-full h-full pl-docs_3 text-medusa-fg-base dark:text-medusa-fg-base-dark",
-                "placeholder:text-medusa-fg-muted dark:placeholder:text-medusa-fg-muted-dark",
+                "w-full h-full pl-docs_3 text-medusa-fg-base",
+                "placeholder:text-medusa-fg-muted",
                 "md:rounded-t-docs_xl text-compact-medium bg-transparent",
                 "appearance-none search-cancel:hidden border-0 active:outline-none focus:outline-none"
               ),
               submit: clsx("absolute top-[18px] left-docs_1 btn-clear p-0"),
               reset: clsx(
-                "absolute top-docs_0.75 right-docs_1 hover:bg-medusa-bg-base-hover dark:hover:bg-medusa-bg-base-hover-dark",
+                "absolute top-docs_0.75 right-docs_1 hover:bg-medusa-bg-base-hover",
                 "p-[5px] md:rounded-docs_DEFAULT btn-clear"
               ),
               loadingIndicator: clsx("absolute top-[18px] right-docs_1"),
             }}
             submitIconComponent={() => (
-              <MagnifyingGlass className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
+              <MagnifyingGlass className="text-medusa-fg-muted" />
             )}
             resetIconComponent={() => (
-              <XMark className="hidden md:block text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark" />
+              <XMark className="hidden md:block text-medusa-fg-subtle" />
             )}
             placeholder="Find something..."
             autoFocus
@@ -236,14 +234,14 @@ export const SearchModal = ({
           <Button
             variant="clear"
             className={clsx(
-              "bg-medusa-bg-base dark:bg-medusa-bg-base-dark block md:hidden",
+              "bg-medusa-bg-base block md:hidden",
               "border-0 border-solid",
-              "border-medusa-border-base dark:border-medusa-border-base-dark border-b",
+              "border-medusa-border-base border-b",
               "pr-docs_1"
             )}
             onClick={() => setIsOpen(false)}
           >
-            <XMark className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
+            <XMark className="text-medusa-fg-muted" />
           </Button>
         </div>
         <div className="mx-docs_0.5 h-[calc(100%-120px)] md:h-[332px] md:flex-initial lg:max-h-[332px] lg:min-h-[332px]">
@@ -276,8 +274,8 @@ export const SearchModal = ({
         className={clsx(
           "py-docs_0.75 flex items-center justify-between px-docs_1",
           "border-0 border-solid",
-          "border-medusa-border-base dark:border-medusa-border-base-dark border-t",
-          "bg-medusa-bg-base dark:bg-medusa-bg-base-dark"
+          "border-medusa-border-base border-t",
+          "bg-medusa-bg-base"
         )}
       >
         {filterOptions.length && (
@@ -306,10 +304,7 @@ export const SearchModal = ({
         <div className="hidden items-center gap-docs_1 md:flex">
           <div className="flex items-center gap-docs_0.5">
             <span
-              className={clsx(
-                "text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
-                "text-compact-x-small"
-              )}
+              className={clsx("text-medusa-fg-subtle", "text-compact-x-small")}
             >
               Navigation
             </span>
@@ -320,10 +315,7 @@ export const SearchModal = ({
           </div>
           <div className="flex items-center gap-docs_0.5">
             <span
-              className={clsx(
-                "text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
-                "text-compact-x-small"
-              )}
+              className={clsx("text-medusa-fg-subtle", "text-compact-x-small")}
             >
               Open Result
             </span>

www/packages/docs-ui/src/components/Search/ModalOpener/index.tsx

@@ -48,7 +48,7 @@ export const SearchModalOpener = ({
     <>
       {isMobile && (
         <Button variant="clear" onClick={handleOpen}>
-          <MagnifyingGlass className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
+          <MagnifyingGlass className="text-medusa-fg-muted" />
         </Button>
       )}
       {!isMobile && (
@@ -59,7 +59,7 @@ export const SearchModalOpener = ({
           <MagnifyingGlass
             className={clsx(
               "absolute left-docs_0.5 top-[5px]",
-              "text-medusa-fg-muted dark:text-medusa-fg-muted-dark"
+              "text-medusa-fg-muted"
             )}
           />
           <InputText

www/packages/docs-ui/src/components/Search/NoResults/index.tsx

@@ -7,7 +7,7 @@ export const SearchNoResult = () => {
     <div
       className={clsx(
         "flex h-full w-full flex-col items-center justify-center gap-docs_1",
-        "text-medusa-fg-muted dark:text-medusa-fg-muted-dark"
+        "text-medusa-fg-muted"
       )}
     >
       <ExclamationCircleSolid />

www/packages/docs-ui/src/components/Search/Suggestions/index.tsx

@@ -26,8 +26,8 @@ export const SearchSuggestions = ({ suggestions }: SearchSuggestionsProps) => {
               className={clsx(
                 "flex items-center justify-between",
                 "cursor-pointer rounded-docs_sm p-docs_0.5",
-                "hover:bg-medusa-bg-base-hover dark:hover:bg-medusa-bg-base-hover-dark",
-                "focus:bg-medusa-bg-base-hover dark:focus:bg-medusa-bg-base-hover-dark",
+                "hover:bg-medusa-bg-base-hover",
+                "focus:bg-medusa-bg-base-hover",
                 "focus:outline-none last:mb-docs_1"
               )}
               onClick={() =>
@@ -40,10 +40,7 @@ export const SearchSuggestions = ({ suggestions }: SearchSuggestionsProps) => {
               data-hit
             >
               <span
-                className={clsx(
-                  "text-medusa-fg-base dark:text-medusa-fg-base-dark",
-                  "text-compact-small"
-                )}
+                className={clsx("text-medusa-fg-base", "text-compact-small")}
               >
                 {item}
               </span>