docs: improve tailwind configuration (#5215)

www/packages/docs-ui/src/components/Badge/index.tsx

@@ -3,13 +3,9 @@ import clsx from "clsx"
 
 export type BadgeVariant =
   | "purple"
-  | "purple-dark"
   | "orange"
-  | "orange-dark"
   | "green"
-  | "green-dark"
   | "blue"
-  | "blue-dark"
   | "red"
   | "neutral"
 
@@ -24,25 +20,17 @@ export const Badge = ({ className, variant, children }: BadgeProps) => {
       className={clsx(
         "text-compact-x-small-plus px-docs_0.4 rounded-docs_sm border border-solid py-px text-center",
         variant === "purple" &&
-          "bg-medusa-tag-purple-bg dark:bg-medusa-tag-purple-bg-dark text-medusa-tag-purple-text dark:text-medusa-tag-purple-text-dark border-medusa-tag-purple-border dark:border-medusa-tag-purple-border-dark",
-        variant === "purple-dark" &&
-          "bg-medusa-tag-purple-bg-dark text-medusa-tag-purple-text-dark border-medusa-tag-purple-border-dark",
+          "bg-medusa-tag-purple-bg text-medusa-tag-purple-text border-medusa-tag-purple-border",
         variant === "orange" &&
-          "bg-medusa-tag-orange-bg dark:bg-medusa-tag-orange-bg-dark text-medusa-tag-orange-text dark:text-medusa-tag-orange-text-dark border-medusa-tag-orange-border dark:border-medusa-tag-orange-border-dark",
-        variant === "orange-dark" &&
-          "bg-medusa-tag-orange-bg-dark text-medusa-tag-orange-text-dark border-medusa-tag-orange-border-dark",
+          "bg-medusa-tag-orange-bg text-medusa-tag-orange-text border-medusa-tag-orange-border",
         variant === "green" &&
-          "bg-medusa-tag-green-bg dark:bg-medusa-tag-green-bg-dark text-medusa-tag-green-text dark:text-medusa-tag-green-text-dark border-medusa-tag-green-border dark:border-medusa-tag-green-border-dark",
-        variant === "green-dark" &&
-          "bg-medusa-tag-green-bg-dark text-medusa-tag-green-text-dark border-medusa-tag-green-border-dark",
+          "bg-medusa-tag-green-bg text-medusa-tag-green-text border-medusa-tag-green-border",
         variant === "blue" &&
-          "bg-medusa-tag-blue-bg dark:bg-medusa-tag-blue-bg-dark text-medusa-tag-blue-text dark:text-medusa-tag-blue-text-dark border-medusa-tag-blue-border dark:border-medusa-tag-blue-border-dark",
-        variant === "blue-dark" &&
-          "bg-medusa-tag-blue-bg-dark text-medusa-tag-blue-text-dark border-medusa-tag-blue-border-dark",
+          "bg-medusa-tag-blue-bg text-medusa-tag-blue-text border-medusa-tag-blue-border",
         variant === "red" &&
-          "bg-medusa-tag-red-bg dark:bg-medusa-tag-red-bg-dark text-medusa-tag-red-text dark:text-medusa-tag-red-text-dark border-medusa-tag-red-border dark:border-medusa-tag-red-border-dark",
+          "bg-medusa-tag-red-bg text-medusa-tag-red-text border-medusa-tag-red-border",
         variant === "neutral" &&
-          "bg-medusa-tag-neutral-bg dark:bg-medusa-tag-neutral-bg-dark text-medusa-tag-neutral-text dark:text-medusa-tag-neutral-text-dark border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark",
+          "bg-medusa-tag-neutral-bg text-medusa-tag-neutral-text border-medusa-tag-neutral-border",
         "badge",
         className
       )}

www/packages/docs-ui/src/components/Bordered/index.tsx

@@ -9,7 +9,7 @@ export const Bordered = ({ wrapperClassName, children }: BorderedProps) => {
   return (
     <span
       className={clsx(
-        "border-medusa-border-strong dark:border-medusa-border-strong-dark bg-docs-bg",
+        "border-medusa-border-strong bg-docs-bg",
         "dark:bg-docs-bg-dark mr-docs_1 inline-flex w-fit items-center justify-center rounded-docs_DEFAULT border border-solid p-[3px]",
         "no-zoom-img",
         wrapperClassName

www/packages/docs-ui/src/components/BorderedIcon/index.tsx

@@ -25,7 +25,7 @@ export const BorderedIcon = ({
     <Bordered wrapperClassName={wrapperClassName}>
       <span
         className={clsx(
-          "rounded-docs_xs p-docs_0.125 bg-medusa-bg-component dark:bg-medusa-bg-component-dark inline-flex items-center justify-center",
+          "rounded-docs_xs p-docs_0.125 bg-medusa-bg-component inline-flex items-center justify-center",
           iconWrapperClassName
         )}
       >
@@ -39,7 +39,7 @@ export const BorderedIcon = ({
         {IconComponent && (
           <IconComponent
             className={clsx(
-              "text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
+              "text-medusa-fg-subtle",
               iconClassName,
               "bordered-icon",
               iconColorClassName

www/packages/docs-ui/src/components/Button/index.tsx

@@ -26,33 +26,33 @@ export const Button = ({
     primary: [
       "inline-flex flex-row justify-center items-center",
       "py-[5px] px-docs_0.75 rounded-docs_sm cursor-pointer",
-      "bg-button-inverted bg-medusa-button-inverted dark:bg-button-inverted-dark dark:bg-medusa-button-inverted-dark",
-      "hover:bg-medusa-button-inverted-hover hover:bg-no-image dark:hover:bg-medusa-button-inverted-hover-dark hover:no-underline",
-      "active:bg-medusa-button-inverted-pressed active:bg-no-image dark:active:bg-medusa-button-inverted-pressed-dark",
-      "focus:bg-medusa-button-inverted-pressed focus:bg-no-image dark:focus:bg-medusa-button-inverted-pressed-dark",
+      "bg-button-inverted bg-medusa-button-inverted dark:bg-button-inverted-dark",
+      "hover:bg-medusa-button-inverted-hover hover:bg-no-image hover:no-underline",
+      "active:bg-medusa-button-inverted-pressed active:bg-no-image",
+      "focus:bg-medusa-button-inverted-pressed focus:bg-no-image",
       "shadow-button-colored active:shadow-button-colored-focused focus:shadow-button-colored-focused transition-shadow",
       "dark:shadow-button-colored-dark dark:active:shadow-button-colored-focused-dark dark:focus:shadow-button-colored-focused-dark",
-      "disabled:!bg-no-image disabled:bg-medusa-bg-disabled dark:disabled:bg-medusa-bg-disabled-dark",
-      "disabled:cursor-not-allowed disabled:border-medusa-border-base dark:disabled:border-medusa-border-base-dark",
-      "text-compact-small-plus text-medusa-fg-on-inverted dark:text-medusa-fg-on-inverted-dark",
-      "[&_a]:text-medusa-fg-on-inverted dark:[&_a]:text-medusa-fg-on-inverted-dark",
-      "disabled:text-medusa-fg-disabled dark:disabled:text-medusa-fg-disabled-dark",
-      "[&_a]:disabled:text-medusa-fg-disabled dark:[&_a]:disabled:text-medusa-fg-disabled-dark",
-      "border border-medusa-border-loud dark:border-medusa-border-loud-dark",
+      "disabled:!bg-no-image disabled:bg-medusa-bg-disabled",
+      "disabled:cursor-not-allowed disabled:border-medusa-border-base",
+      "text-compact-small-plus text-medusa-fg-on-inverted",
+      "[&_a]:text-medusa-fg-on-inverted",
+      "disabled:text-medusa-fg-disabled",
+      "[&_a]:disabled:text-medusa-fg-disabled",
+      "border border-medusa-border-loud",
       "select-none",
     ],
     secondary: [
       "inline-flex flex-row justify-center items-center",
       "py-[5px] px-docs_0.75 rounded-docs_sm cursor-pointer",
-      "bg-button-neutral bg-medusa-button-neutral dark:bg-button-neutral-dark dark:bg-medusa-button-neutral-dark",
-      "hover:bg-medusa-button-neutral-hover hover:bg-no-image dark:hover:bg-medusa-button-neutral-hover-dark hover:no-underline",
-      "active:bg-medusa-button-neutral-pressed active:bg-no-image dark:active:bg-medusa-button-neutral-pressed-dark",
-      "focus:bg-medusa-button-neutral-pressed focus:bg-no-image dark:focus:bg-medusa-button-neutral-pressed-dark",
-      "disabled:!bg-no-image disabled:bg-medusa-bg-disabled dark:disabled:bg-medusa-bg-disabled-dark",
+      "bg-button-neutral bg-medusa-button-neutral dark:bg-button-neutral-dark",
+      "hover:bg-medusa-button-neutral-hover hover:bg-no-image hover:no-underline",
+      "active:bg-medusa-button-neutral-pressed active:bg-no-image",
+      "focus:bg-medusa-button-neutral-pressed focus:bg-no-image",
+      "disabled:!bg-no-image disabled:bg-medusa-bg-disabled",
       "disabled:cursor-not-allowed",
-      "border border-solid border-medusa-border-base dark:border-medusa-border-base-dark",
-      "text-compact-small-plus text-medusa-fg-base dark:text-medusa-fg-base-dark",
-      "[&_a]:text-medusa-fg-base dark:[&_a]:text-medusa-fg-base-dark",
+      "border border-solid border-medusa-border-base",
+      "text-compact-small-plus text-medusa-fg-base",
+      "[&_a]:text-medusa-fg-base",
       "shadow-button-neutral focus:shadow-button-neutral-focused active:shadow-button-neutral-focused transition-shadow",
       "dark:shadow-button-neutral dark:focus:shadow-button-neutral-focused dark:active:shadow-button-neutral-focused",
       "select-none",

www/packages/docs-ui/src/components/Card/index.tsx

@@ -15,7 +15,7 @@ export const Card = ({ icon, title, text, href, className }: CardProps) => {
   return (
     <div
       className={clsx(
-        "bg-medusa-bg-subtle dark:bg-medusa-bg-subtle-dark w-full rounded",
+        "bg-medusa-bg-subtle w-full rounded",
         "shadow-card-rest dark:shadow-card-rest-dark py-docs_0.75 relative px-docs_1",
         "flex items-center gap-docs_1 transition-shadow",
         href && "hover:shadow-card-hover dark:hover:shadow-card-hover-dark",
@@ -25,11 +25,11 @@ export const Card = ({ icon, title, text, href, className }: CardProps) => {
       {icon}
       <div className="flex items-center gap-docs_1 justify-between flex-1">
         <div className="flex flex-col">
-          <span className="text-compact-medium-plus text-medusa-fg-base dark:text-medusa-fg-base-dark">
+          <span className="text-compact-medium-plus text-medusa-fg-base">
             {title}
           </span>
           {text && (
-            <span className="text-compact-medium text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark">
+            <span className="text-compact-medium text-medusa-fg-subtle">
               {text}
             </span>
           )}
@@ -37,7 +37,7 @@ export const Card = ({ icon, title, text, href, className }: CardProps) => {
 
         {href && (
           <>
-            <ArrowUpRightOnBox className="text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark" />
+            <ArrowUpRightOnBox className="text-medusa-fg-subtle" />
             <Link
               href={href}
               className="absolute left-0 top-0 h-full w-full rounded"

www/packages/docs-ui/src/components/CodeBlock/index.tsx

@@ -25,9 +25,9 @@ export const CodeBlock = ({
   return (
     <div
       className={clsx(
-        "bg-medusa-code-bg-base dark:bg-medusa-code-bg-base-dark relative mb-docs_1 rounded-docs_DEFAULT",
-        "border-medusa-code-border dark:border-medusa-code-border-dark w-full max-w-full border",
-        "xs:after:content-[''] xs:after:rounded xs:after:absolute xs:after:right-0 xs:after:top-0 xs:after:w-[calc(10%+24px)] xs:after:h-full xs:after:bg-code-fade xs:dark:after:bg-code-fade-dark",
+        "bg-medusa-code-bg-base relative mb-docs_1 rounded-docs_DEFAULT",
+        "border-medusa-code-border w-full max-w-full border",
+        "xs:after:content-[''] xs:after:rounded xs:after:absolute xs:after:right-0 xs:after:top-0 xs:after:w-[calc(10%+24px)] xs:after:h-full xs:after:bg-code-fade",
         collapsed && "max-h-[400px] overflow-auto",
         className
       )}
@@ -78,8 +78,8 @@ export const CodeBlock = ({
                       {tokens.length > 1 && (
                         <span
                           className={clsx(
-                            "text-medusa-code-text-subtle dark:text-medusa-code-text-subtle-dark mr-docs_1 table-cell select-none",
-                            "bg-medusa-code-bg-base dark:bg-medusa-code-bg-base-dark sticky left-0 w-[1%] px-docs_1 text-right"
+                            "text-medusa-code-text-subtle mr-docs_1 table-cell select-none",
+                            "bg-medusa-code-bg-base sticky left-0 w-[1%] px-docs_1 text-right"
                           )}
                         >
                           {i + 1}
@@ -103,7 +103,7 @@ export const CodeBlock = ({
               )}
             >
               <CopyButton text={source} tooltipClassName="font-base">
-                <SquareTwoStackSolid className="text-medusa-code-icon dark:text-medusa-code-icon-dark" />
+                <SquareTwoStackSolid className="text-medusa-code-icon" />
               </CopyButton>
             </div>
           </>

www/packages/docs-ui/src/components/CodeTabs/index.tsx

@@ -71,15 +71,15 @@ export const CodeTabs = ({
     >
       <span
         className={clsx(
-          "xs:absolute xs:border xs:border-solid xs:border-medusa-code-border dark:xs:border-medusa-code-border-dark xs:bg-medusa-code-bg-base dark:xs:bg-medusa-code-bg-base-dark ",
+          "xs:absolute xs:border xs:border-solid xs:border-medusa-code-border xs:bg-medusa-code-bg-base",
           "xs:transition-all xs:duration-200 xs:ease-ease xs:top-[13px] xs:z-[1] xs:rounded-full"
         )}
         ref={codeTabSelectorRef}
       ></span>
       <ul
         className={clsx(
-          "bg-medusa-code-bg-header dark:bg-medusa-code-bg-header-dark py-docs_0.75 flex !list-none rounded-t-docs_DEFAULT px-docs_1",
-          "border-medusa-code-border dark:border-medusa-code-border-dark border border-b-0",
+          "bg-medusa-code-bg-header py-docs_0.75 flex !list-none rounded-t-docs_DEFAULT px-docs_1",
+          "border-medusa-code-border border border-b-0",
           "gap-docs_0.25 mb-0"
         )}
       >
@@ -89,12 +89,12 @@ export const CodeTabs = ({
               className={clsx(
                 "text-compact-small-plus xs:border-0 py-docs_0.25 px-docs_0.75 relative z-[2] rounded-full border",
                 (!selectedTab || selectedTab.value !== tab.value) && [
-                  "text-medusa-code-text-subtle dark:text-medusa-code-text-subtle-dark border-transparent",
-                  "hover:bg-medusa-code-bg-base dark:hover:bg-medusa-code-bg-base-dark",
+                  "text-medusa-code-text-subtle border-transparent",
+                  "hover:bg-medusa-code-bg-base",
                 ],
                 selectedTab?.value === tab.value && [
                   "text-medusa-code-text-base bg-medusa-code-bg-base xs:!bg-transparent",
-                  "dark:text-medusa-code-text-base-dark dark:bg-medusa-code-bg-base-dark xs:!bg-transparent",
+                  "xs:!bg-transparent",
                 ]
               )}
               ref={(tabControl) => tabRefs.push(tabControl)}

www/packages/docs-ui/src/components/Details/Summary/index.tsx

@@ -27,8 +27,7 @@ export const DetailsSummary = ({
       className={clsx(
         "py-docs_0.75 flex items-center justify-between",
         expandable && "cursor-pointer",
-        !expandable &&
-          "border-medusa-border-base dark:border-medusa-border-base-dark border-y",
+        !expandable && "border-medusa-border-base border-y",
         "no-marker",
         className
       )}
@@ -37,14 +36,14 @@ export const DetailsSummary = ({
       <span className="gap-docs_0.25 flex flex-col">
         <span
           className={clsx(
-            "text-compact-medium-plus text-medusa-fg-base dark:text-medusa-fg-base-dark",
+            "text-compact-medium-plus text-medusa-fg-base",
             titleClassName
           )}
         >
           {title}
         </span>
         {subtitle && (
-          <span className="text-compact-medium text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark">
+          <span className="text-compact-medium text-medusa-fg-subtle">
             {subtitle}
           </span>
         )}

www/packages/docs-ui/src/components/Details/index.tsx

@@ -48,7 +48,7 @@ export const Details = ({
         event.stopPropagation()
       }}
       className={clsx(
-        "border-medusa-border-base dark:border-medusa-border-base-dark border-y border-solid border-x-0",
+        "border-medusa-border-base border-y border-solid border-x-0",
         "overflow-hidden [&>summary]:relative [&>summary]:z-[398]",
         props.className
       )}

www/packages/docs-ui/src/components/InlineCode/index.tsx

@@ -11,18 +11,17 @@ export const InlineCode = (props: InlineCodeProps) => {
     <CopyButton
       text={props.children as string}
       buttonClassName={clsx(
-        "bg-transparent border-0 p-0 inline text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
-        "active:[&>code]:bg-medusa-bg-subtle-pressed dark:active:[&>code]:bg-medusa-bg-subtle-pressed-dark",
-        "focus:[&>code]:bg-medusa-bg-subtle-pressed dark:focus:[&>code]:bg-medusa-bg-subtle-pressed-dark",
-        "hover:[&>code]:bg-medusa-bg-subtle-hover dark:hover:[&>code]:bg-medusa-bg-base-hover-dark"
+        "bg-transparent border-0 p-0 inline text-medusa-fg-subtle group"
       )}
     >
       <code
         {...props}
         className={clsx(
-          "border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark border",
-          "text-medusa-tag-neutral-text dark:text-medusa-tag-neutral-text-dark",
-          "bg-medusa-tag-neutral-bg dark:bg-medusa-tag-neutral-bg-dark font-monospace text-code-label rounded-docs_sm py-0 px-[6px]",
+          "border-medusa-tag-neutral-border border",
+          "text-medusa-tag-neutral-text",
+          "bg-medusa-tag-neutral-bg font-monospace text-code-label rounded-docs_sm py-0 px-[6px]",
+          "group-active:bg-medusa-bg-subtle-pressed group-focus:bg-medusa-bg-subtle-pressed",
+          "group-hover:bg-medusa-tag-neutral-bg-hover",
           props.className
         )}
       />

www/packages/docs-ui/src/components/Input/Text/index.tsx

@@ -13,16 +13,16 @@ export const InputText = (props: InputTextProps) => {
     <input
       {...props}
       className={clsx(
-        "bg-medusa-bg-field dark:bg-medusa-bg-field-dark shadow-button-secondary dark:shadow-button-secondary-dark",
-        "border-medusa-border-base dark:border-medusa-border-base-dark rounded-docs_sm border border-solid",
+        "bg-medusa-bg-field shadow-button-secondary dark:shadow-button-secondary-dark",
+        "border-medusa-border-base rounded-docs_sm border border-solid",
         "px-docs_0.75 py-[9px]",
-        "hover:bg-medusa-bg-field-hover dark:hover:bg-medusa-bg-field-hover-dark",
-        "focus:border-medusa-border-interactive dark:focus:border-medusa-border-interactive-dark",
-        "active:border-medusa-border-interactive dark:active:border-medusa-border-interactive-dark",
-        "disabled:bg-medusa-bg-disabled dark:disabled:bg-medusa-bg-disabled-dark",
-        "disabled:border-medusa-border-base dark:disabled:border-medusa-border-base-dark",
-        "placeholder:text-medusa-fg-muted dark:placeholder:text-medusa-fg-muted-dark",
-        "disabled:placeholder:text-medusa-fg-disabled dark:disabled:placeholder:text-medusa-fg-disabled-dark",
+        "hover:bg-medusa-bg-field-hover",
+        "focus:border-medusa-border-interactive",
+        "active:border-medusa-border-interactive",
+        "disabled:bg-medusa-bg-disabled",
+        "disabled:border-medusa-border-base",
+        "placeholder:text-medusa-fg-muted",
+        "disabled:placeholder:text-medusa-fg-disabled",
         "text-compact-medium font-base",
         props.className
       )}

www/packages/docs-ui/src/components/Kbd/index.tsx

@@ -9,9 +9,9 @@ export const Kbd = ({ children, className, ...props }: KbdProps) => {
       className={clsx(
         "rounded-docs_sm border-solid py-0 px-[6px]",
         "inline-flex items-center justify-center",
-        "border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark border",
-        "bg-medusa-tag-neutral-bg dark:bg-medusa-tag-neutral-bg-dark",
-        "text-medusa-tag-neutral-text dark:text-medusa-tag-neutral-text-dark",
+        "border-medusa-tag-neutral-border border",
+        "bg-medusa-tag-neutral-bg",
+        "text-medusa-tag-neutral-text",
         "text-compact-x-small-plus font-monospace shadow-none",
         className
       )}

www/packages/docs-ui/src/components/Label/index.tsx

@@ -9,7 +9,7 @@ export const Label = ({ children, className }: LabelProps) => {
   return (
     <span
       className={clsx(
-        "text-medusa-fg-base dark:text-medusa-fg-base-dark text-compact-medium-plus",
+        "text-medusa-fg-base text-compact-medium-plus",
         className
       )}
     >

www/packages/docs-ui/src/components/Link/index.tsx

@@ -14,7 +14,6 @@ export const Link = ({ href, children, className, ...rest }: LinkProps) => {
       {...rest}
       className={clsx(
         "text-medusa-fg-interactive hover:text-medusa-fg-interactive-hover",
-        "dark:text-medusa-fg-interactive-dark dark:hover:text-medusa-fg-interactive-hover-dark",
         className
       )}
     >

www/packages/docs-ui/src/components/Loading/index.tsx

@@ -18,7 +18,7 @@ export const Loading = ({
       bars.push(
         <span
           className={clsx(
-            "bg-medusa-bg-subtle-pressed dark:bg-medusa-bg-subtle-pressed-dark h-docs_1 w-full rounded-full",
+            "bg-medusa-bg-subtle-pressed h-docs_1 w-full rounded-full",
             barClassName
           )}
           key={i}

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

@@ -17,7 +17,7 @@ export const ModalFooter = ({
     <div
       className={clsx(
         "py-docs_1.5 pl-0 pr-docs_2",
-        "border-medusa-border-base dark:border-medusa-border-base-dark border-0 border-t border-solid",
+        "border-medusa-border-base border-0 border-t border-solid",
         "flex justify-end gap-docs_0.5",
         className
       )}

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

@@ -14,17 +14,11 @@ export const ModalHeader = ({ title }: ModalHeaderProps) => {
   return (
     <div
       className={clsx(
-        "border-medusa-border-base dark:border-medusa-border-base-dark border-0 border-b border-solid py-docs_1.5 px-docs_2",
+        "border-medusa-border-base border-0 border-b border-solid py-docs_1.5 px-docs_2",
         "flex items-center justify-between"
       )}
     >
-      <span
-        className={clsx(
-          "text-medusa-fg-base dark:text-medusa-fg-base-dark text-h2"
-        )}
-      >
-        {title}
-      </span>
+      <span className={clsx("text-medusa-fg-base text-h2")}>{title}</span>
       <Button
         variant="clear"
         className="cursor-pointer"

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

@@ -87,7 +87,7 @@ export const Modal = ({
       {...props}
       className={clsx(
         "fixed top-0 left-0 flex h-screen w-screen items-center justify-center",
-        "bg-medusa-bg-overlay dark:bg-medusa-bg-overlay-dark z-[500]",
+        "bg-medusa-bg-overlay z-[500]",
         "hidden open:flex border-0 p-0",
         className
       )}
@@ -98,8 +98,8 @@ export const Modal = ({
     >
       <div
         className={clsx(
-          "bg-medusa-bg-base dark:bg-medusa-bg-base-dark rounded-docs_sm",
-          "border-medusa-border-base dark:border-medusa-border-base-dark border border-solid",
+          "bg-medusa-bg-base rounded-docs_sm",
+          "border-medusa-border-base border border-solid",
           "shadow-modal dark:shadow-modal-dark",
           "w-[90%] md:h-auto md:w-[75%] lg:w-[560px]",
           modalContainerClassName

www/packages/docs-ui/src/components/Navbar/ColorModeToggle/index.tsx

@@ -16,12 +16,8 @@ export const NavbarColorModeToggle = ({
 
   return (
     <NavbarIconButton {...buttonProps} onClick={() => toggleColorMode()}>
-      {colorMode === "light" && (
-        <Sun className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
-      )}
-      {colorMode === "dark" && (
-        <Moon className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
-      )}
+      {colorMode === "light" && <Sun className="text-medusa-fg-muted" />}
+      {colorMode === "dark" && <Moon className="text-medusa-fg-muted" />}
     </NavbarIconButton>
   )
 }

www/packages/docs-ui/src/components/Navbar/Link/index.tsx

@@ -32,10 +32,10 @@ export const NavbarLink = ({
     <NextLink
       href={href}
       className={clsx(
-        isActive && "!text-medusa-fg-base dark:!text-medusa-fg-base-dark",
-        !isActive && "!text-medusa-fg-subtle dark:!text-medusa-fg-subtle-dark",
+        isActive && "!text-medusa-fg-base",
+        !isActive && "!text-medusa-fg-subtle",
         "text-compact-small-plus inline-block",
-        "hover:!text-medusa-fg-base dark:hover:!text-medusa-fg-base-dark",
+        "hover:!text-medusa-fg-base",
         className
       )}
     >

www/packages/docs-ui/src/components/Navbar/MobileMenu/Button/index.tsx

@@ -28,12 +28,8 @@ export const NavbarMobileMenuButton = ({
         }
       }}
     >
-      {!mobileSidebarOpen && (
-        <Sidebar className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
-      )}
-      {mobileSidebarOpen && (
-        <XMark className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
-      )}
+      {!mobileSidebarOpen && <Sidebar className="text-medusa-fg-muted" />}
+      {mobileSidebarOpen && <XMark className="text-medusa-fg-muted" />}
     </NavbarIconButton>
   )
 }

www/packages/docs-ui/src/components/Navbar/index.tsx

@@ -32,7 +32,7 @@ export const Navbar = ({
     <nav
       className={clsx(
         "h-navbar sticky top-0 w-full justify-between",
-        "bg-docs-bg dark:bg-docs-bg-dark border-medusa-border-base dark:border-medusa-border-base-dark z-[400] border-b",
+        "bg-docs-bg dark:bg-docs-bg-dark border-medusa-border-base z-[400] border-b",
         className
       )}
     >

www/packages/docs-ui/src/components/NextLink/index.tsx

@@ -17,7 +17,6 @@ export const Link = ({ href, children, className, ...rest }: LinkProps) => {
       {...rest}
       className={clsx(
         "text-medusa-fg-interactive hover:text-medusa-fg-interactive-hover",
-        "dark:text-medusa-fg-interactive-dark dark:hover:text-medusa-fg-interactive-hover-dark",
         className
       )}
     >

www/packages/docs-ui/src/components/Notification/Item/Layout/Default/index.tsx

@@ -34,25 +34,22 @@ export const NotificationItemLayoutDefault: React.FC<
             )}
           >
             {type === "info" && (
-              <InformationCircleSolid className="text-medusa-fg-interactive-dark" />
+              <InformationCircleSolid className="text-medusa-tag-blue-icon" />
             )}
             {type === "error" && (
-              <XCircleSolid className="text-medusa-tag-red-icon dark:text-medusa-tag-red-icon-dark" />
+              <XCircleSolid className="text-medusa-tag-red-icon" />
             )}
             {type === "warning" && (
-              <ExclamationCircleSolid className="text-medusa-tag-orange-icon dark:text-medusa-tag-orange-icon-dark" />
+              <ExclamationCircleSolid className="text-medusa-tag-orange-icon" />
             )}
             {type === "success" && (
-              <CheckCircleSolid className="text-medusa-tag-green-icon dark:text-medusa-tag-green-icon-dark" />
+              <CheckCircleSolid className="text-medusa-tag-green-icon" />
             )}
             {type === "custom" && CustomIcon}
           </div>
         )}
         <span
-          className={clsx(
-            "text-compact-medium-plus",
-            "text-medusa-fg-base dark:text-medusa-fg-base-dark"
-          )}
+          className={clsx("text-compact-medium-plus", "text-medusa-fg-base")}
         >
           {title}
         </span>
@@ -61,17 +58,13 @@ export const NotificationItemLayoutDefault: React.FC<
         <div
           className={clsx(
             "flex pt-0 pr-docs_1 pb-docs_1.5 pl-docs_1 gap-docs_1",
-            "border-0 border-b border-solid border-medusa-border-base dark:border-medusa-border-base-dark"
+            "border-0 border-b border-solid border-medusa-border-base"
           )}
         >
           <div className="w-docs_2 flex-none"></div>
           <div className={clsx("flex flex-col", children && "gap-docs_1")}>
             {text && (
-              <span
-                className={clsx(
-                  "text-medium text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark"
-                )}
-              >
+              <span className={clsx("text-medium text-medusa-fg-subtle")}>
                 {text}
               </span>
             )}

www/packages/docs-ui/src/components/Notification/Item/index.tsx

@@ -35,7 +35,7 @@ export const NotificationItem = ({
   return (
     <div
       className={clsx(
-        "md:max-w-[320px] md:w-[320px] w-full bg-medusa-bg-base dark:bg-medusa-bg-base-dark rounded-docs_DEFAULT",
+        "md:max-w-[320px] md:w-[320px] w-full bg-medusa-bg-base rounded-docs_DEFAULT",
         "shadow-flyout dark:shadow-flyout-dark max-h-[calc(100vh-90px)]",
         "fixed md:right-docs_1 left-0 z-[400] md:m-docs_1",
         placement === "bottom" && "md:bottom-docs_1 bottom-0",

www/packages/docs-ui/src/components/Rating/index.tsx

@@ -70,7 +70,7 @@ export const Rating: React.FC<RatingProps> = ({
           >
             {!isSelected && <Star />}
             {isSelected && (
-              <StarSolid className="text-medusa-tag-orange-icon dark:text-medusa-tag-orange-icon-dark" />
+              <StarSolid className="text-medusa-tag-orange-icon" />
             )}
           </Button>
         )

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>

www/packages/docs-ui/src/components/Select/Badge/index.tsx

@@ -54,7 +54,7 @@ export const SelectBadge = ({
       <>
         <span
           className={clsx(
-            "text-medusa-fg-base dark:text-medusa-fg-base-dark",
+            "text-medusa-fg-base",
             "text-compact-x-small-plus",
             "inline-block max-w-[60px] overflow-hidden text-ellipsis"
           )}
@@ -63,10 +63,7 @@ export const SelectBadge = ({
         </span>
         {!isAllSelected && selectedOptions.length > 1 && (
           <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")}
           >
             {" "}
             + {selectedOptions.length}
@@ -80,14 +77,13 @@ export const SelectBadge = ({
     <div className={clsx("relative", className)}>
       <div
         className={clsx(
-          "border-medusa-border-base dark:border-medusa-border-base-dark rounded-sm border border-solid",
-          "hover:bg-medusa-bg-subtle-hover dark:hover:bg-medusa-bg-subtle-hover-dark",
+          "border-medusa-border-base rounded-sm border border-solid",
+          "hover:bg-medusa-bg-subtle-hover",
           "py-docs_0.25 h-fit cursor-pointer px-docs_0.5",
           "flex items-center gap-[6px] whitespace-nowrap",
-          "text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
-          !open && "bg-medusa-bg-subtle dark:bg-medusa-bg-subtle-dark",
-          open &&
-            "bg-medusa-bg-subtle-hover dark:bg-medusa-bg-subtle-hover-dark",
+          "text-medusa-fg-subtle",
+          !open && "bg-medusa-bg-subtle",
+          open && "bg-medusa-bg-subtle-hover",
           className
         )}
         ref={ref}
@@ -97,12 +93,7 @@ export const SelectBadge = ({
           }
         }}
       >
-        <span
-          className={clsx(
-            "text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
-            "text-compact-x-small"
-          )}
-        >
+        <span className={clsx("text-medusa-fg-subtle", "text-compact-x-small")}>
           Show results from:{" "}
         </span>
         {getSelectedText()}

www/packages/docs-ui/src/components/Select/Dropdown/index.tsx

@@ -87,7 +87,7 @@ export const SelectDropdown = ({
         key={index}
         className={clsx(
           "pr-docs_0.75 relative rounded-docs_sm py-docs_0.5 pl-docs_2.5",
-          "hover:bg-medusa-bg-base-hover dark:hover:bg-medusa-bg-base-hover-dark",
+          "hover:bg-medusa-bg-base-hover",
           "[&>svg]:left-docs_0.75 cursor-pointer [&>svg]:absolute [&>svg]:top-docs_0.5",
           !isSelected && "text-compact-small",
           isSelected && "text-compact-small-plus"
@@ -102,12 +102,8 @@ export const SelectDropdown = ({
       >
         {isSelected && (
           <>
-            {multiple && (
-              <CheckMini className="text-medusa-fg-base dark:text-medusa-fg-base-dark" />
-            )}
-            {!multiple && (
-              <EllipseMiniSolid className="text-medusa-fg-base dark:text-medusa-fg-base-dark" />
-            )}
+            {multiple && <CheckMini className="text-medusa-fg-base" />}
+            {!multiple && <EllipseMiniSolid className="text-medusa-fg-base" />}
           </>
         )}
         {option.label}
@@ -128,7 +124,7 @@ export const SelectDropdown = ({
       <ul
         className={clsx(
           "p-docs_0.25 mb-0 w-full overflow-auto rounded-docs_DEFAULT",
-          "bg-medusa-bg-base dark:bg-medusa-bg-base-dark text-medusa-fg-base dark:text-medusa-fg-base-dark",
+          "bg-medusa-bg-base text-medusa-fg-base",
           "shadow-flyout dark:shadow-flyout-dark list-none"
         )}
       >

www/packages/docs-ui/src/components/Select/Input/index.tsx

@@ -45,19 +45,17 @@ export const SelectInput = ({
     <div
       className={clsx(
         "px-docs_0.75 relative py-[9px]",
-        "border-medusa-border-base dark:border-medusa-border-base-dark rounded-docs_sm border border-solid",
-        "bg-medusa-bg-field dark:bg-medusa-bg-field-dark shadow-button-neutral dark:shadow-button-neutral-dark",
-        "hover:bg-medusa-bg-field-hover dark:hover:bg-medusa-bg-field-hover-dark",
+        "border-medusa-border-base rounded-docs_sm border border-solid",
+        "bg-medusa-bg-field shadow-button-neutral dark:shadow-button-neutral-dark",
+        "hover:bg-medusa-bg-field-hover",
         "active:shadow-active dark:active:shadow-active-dark",
         "focus:shadow-active dark:focus:shadow-active-dark",
-        "text-medusa-fg-base dark:text-medusa-fg-base-dark text-compact-medium",
-        "disabled:bg-medusa-bg-disabled dark:disabled:bg-medusa-bg-disabled-dark",
-        "disabled:text-medusa-fg-disabled dark:disabled:text-medusa-fg-disabled-dark",
+        "text-medusa-fg-base text-compact-medium",
+        "disabled:bg-medusa-bg-disabled",
+        "disabled:text-medusa-fg-disabled",
         "flex items-center gap-docs_0.5",
-        !hasSelectedValues &&
-          "placeholder:text-medusa-fg-muted dark:placeholder:text-medusa-fg-muted-dark",
-        hasSelectedValues &&
-          "placeholder:text-medusa-fg-base dark:placeholder:text-medusa-fg-base-dark",
+        !hasSelectedValues && "placeholder:text-medusa-fg-muted",
+        hasSelectedValues && "placeholder:text-medusa-fg-base",
         className
       )}
       ref={ref}
@@ -82,7 +80,7 @@ export const SelectInput = ({
           </span>
           {showClearButton && (
             <XMarkMini
-              className="text-medusa-tag-neutral-icon dark:text-medusa-tag-neutral-icon-dark"
+              className="text-medusa-tag-neutral-icon"
               onClick={(e) => {
                 e.stopPropagation()
                 setSelected?.([])
@@ -101,7 +99,7 @@ export const SelectInput = ({
           ? selectedValues[0].label
           : props.placeholder}
       </span>
-      <ChevronUpDown className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
+      <ChevronUpDown className="text-medusa-fg-muted" />
       <input
         type="hidden"
         name={props.name}

www/packages/docs-ui/src/components/Sidebar/Item/index.tsx

@@ -50,21 +50,15 @@ export const SidebarItem = ({
     () =>
       clsx(
         "flex items-center justify-between gap-docs_0.5 rounded-docs_sm px-docs_0.5 py-[6px] hover:no-underline",
-        !item.children &&
-          "text-compact-small-plus text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
+        !item.children && "text-compact-small-plus text-medusa-fg-subtle",
         item.children &&
-          "text-compact-x-small-plus text-medusa-fg-muted dark:text-medusa-fg-muted-dark uppercase",
+          "text-compact-x-small-plus text-medusa-fg-muted uppercase",
         item.path !== undefined &&
-          active && [
-            "!text-medusa-fg-base bg-medusa-bg-base-pressed",
-            "dark:!text-medusa-fg-base-dark dark:bg-medusa-bg-base-pressed-dark",
-          ],
-        item.path !== undefined &&
-          active &&
-          "border border-medusa-border-base dark:border-medusa-border-base-dark",
+          active && ["!text-medusa-fg-base bg-medusa-bg-base-pressed"],
+        item.path !== undefined && active && "border border-medusa-border-base",
         item.path !== undefined &&
           !active &&
-          "hover:bg-medusa-bg-base-hover dark:hover:bg-medusa-bg-base-hover-dark border-transparent"
+          "hover:bg-medusa-bg-base-hover border-transparent"
       ),
     [item.children, active, item.path]
   )

www/packages/docs-ui/src/components/Sidebar/index.tsx

@@ -21,7 +21,7 @@ export const Sidebar = ({
     <aside
       className={clsx(
         "clip bg-docs-bg dark:bg-docs-bg-dark w-ref-sidebar block",
-        "border-medusa-border-base dark:border-medusa-border-base-dark border-0 border-r border-solid",
+        "border-medusa-border-base border-0 border-r border-solid",
         "fixed -left-full top-[57px] h-screen transition-[left] lg:relative lg:left-0 lg:top-auto lg:h-auto",
         "lg:w-sidebar z-[100] w-full lg:z-0",
         mobileSidebarOpen && "!left-0",

www/packages/docs-ui/src/components/TextArea/index.tsx

@@ -13,16 +13,16 @@ export const TextArea = (props: TextAreaProps) => {
     <textarea
       {...props}
       className={clsx(
-        "bg-medusa-bg-field dark:bg-medusa-bg-field-dark shadow-button-secondary dark:shadow-button-secondary-dark",
-        "border-medusa-border-base dark:border-medusa-border-base-dark rounded-docs_sm border border-solid",
+        "bg-medusa-bg-field shadow-button-secondary dark:shadow-button-secondary-dark",
+        "border-medusa-border-base rounded-docs_sm border border-solid",
         "pt-docs_0.4 px-docs_0.75 text-medium font-base pb-[9px]",
-        "hover:bg-medusa-bg-field-hover dark:hover:bg-medusa-bg-field-hover-dark",
-        "focus:border-medusa-border-interactive dark:focus:border-medusa-border-interactive-dark",
-        "active:border-medusa-border-interactive dark:active:border-medusa-border-interactive-dark",
-        "disabled:bg-medusa-bg-disabled dark:disabled:bg-medusa-bg-disabled-dark",
-        "disabled:border-medusa-border-base dark:disabled:border-medusa-border-base-dark",
-        "placeholder:text-medusa-fg-muted dark:placeholder:text-medusa-fg-muted-dark",
-        "disabled:placeholder:text-medusa-fg-disabled dark:disabled:placeholder:text-medusa-fg-disabled-dark",
+        "hover:bg-medusa-bg-field-hover",
+        "focus:border-medusa-border-interactive",
+        "active:border-medusa-border-interactive",
+        "disabled:bg-medusa-bg-disabled",
+        "disabled:border-medusa-border-base",
+        "placeholder:text-medusa-fg-muted",
+        "disabled:placeholder:text-medusa-fg-disabled",
         props.className
       )}
     />

www/packages/docs-ui/src/components/Tooltip/index.tsx

@@ -45,11 +45,11 @@ export const Tooltip = ({
         anchorId={elementId}
         // anchorSelect={elementId ? `#${elementId}` : undefined}
         className={clsx(
-          "!border-medusa-border-base dark:!border-medusa-border-base-dark !border !border-solid",
+          "!border-medusa-border-base !border !border-solid",
           "!text-compact-x-small-plus !shadow-tooltip dark:!shadow-tooltip-dark !rounded-docs_DEFAULT",
           "!py-docs_0.4 !z-[399] hidden !px-docs_1 lg:block",
-          "!bg-medusa-bg-base dark:!bg-medusa-bg-base-dark",
-          "!text-medusa-fg-subtle dark:!text-medusa-fg-subtle-dark",
+          "!bg-medusa-bg-base",
+          "!text-medusa-fg-subtle",
           tooltipClassName
         )}
         wrapper="span"