docs: improve tailwind configuration (#5215)

www/apps/ui/src/components/colors.tsx

@@ -42,20 +42,20 @@ const ColorBlock = ({ colour, className, ...props }: ColorBlockProps) => {
       <div className="flex w-fit flex-row items-center gap-x-2">
         <div
           className={
-            "border-medusa-border-base dark:border-medusa-border-base-dark h-[48px] w-[48px] rounded-lg border p-1"
+            "border-medusa-border-base h-[48px] w-[48px] rounded-lg border p-1"
           }
         >
           <div
             className={clx(
-              "bg-medusa-bg-component dark:bg-medusa-bg-component-dark h-full w-full animate-pulse rounded-[4px]",
+              "bg-medusa-bg-component h-full w-full animate-pulse rounded-[4px]",
               className
             )}
             {...props}
           />
         </div>
         <div className="flex flex-col items-start">
-          <div className="bg-medusa-bg-component dark:bg-medusa-bg-component-dark h-[20px] w-[85px] animate-pulse rounded-sm" />
-          <div className="bg-medusa-bg-subtle dark:bg-medusa-bg-subtle-dark h-[20px] w-[120px] animate-pulse rounded-sm" />
+          <div className="bg-medusa-bg-component h-[20px] w-[85px] animate-pulse rounded-sm" />
+          <div className="bg-medusa-bg-subtle h-[20px] w-[120px] animate-pulse rounded-sm" />
         </div>
       </div>
     )
@@ -65,7 +65,7 @@ const ColorBlock = ({ colour, className, ...props }: ColorBlockProps) => {
     <div className="flex flex-row items-center gap-x-2">
       <div
         className={
-          "border-medusa-border-base dark:border-medusa-border-base-dark h-[48px] w-[48px] rounded-lg border p-1"
+          "border-medusa-border-base h-[48px] w-[48px] rounded-lg border p-1"
         }
       >
         <div
@@ -75,10 +75,10 @@ const ColorBlock = ({ colour, className, ...props }: ColorBlockProps) => {
         />
       </div>
       <div className="flex flex-col items-start">
-        <p className="txt-compact-xsmall-plus text-medusa-fg-base dark:text-medusa-fg-base-dark text-start">
+        <p className="txt-compact-xsmall-plus text-medusa-fg-basetext-start">
           {cssVarToTailwindClass(colour.name)}
         </p>
-        <p className="txt-compact-xsmall text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark">
+        <p className="txt-compact-xsmall text-medusa-fg-subtle">
           {colour.code}
         </p>
       </div>
@@ -148,7 +148,7 @@ const Colors = () => {
     <div>
       {Object.entries(colors).map(([section, colors]) => (
         <div className="mb-16" key={`colours-section-${section}`}>
-          <h2 className="h2-docs mb-4 mt-10 text-medusa-fg-base dark:text-medusa-fg-base-dark">
+          <h2 className="h2-docs mb-4 mt-10 text-medusa-fg-base">
             {section.charAt(0).toUpperCase() + section.slice(1)}
           </h2>
           <hr className="mb-4" />

www/apps/ui/src/components/component-example.tsx

@@ -43,13 +43,12 @@ export function ComponentExample({
             <div
               className={clsx(
                 "bg-docs-bg border-medusa-border-base flex max-h-[400px] min-h-[400px]",
-                "dark:bg-docs-bg-dark dark:border-medusa-border-base-dark",
                 "w-full items-center justify-center overflow-auto rounded-md border px-10 py-5"
               )}
             >
               <React.Suspense
                 fallback={
-                  <div className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark flex items-center text-sm">
+                  <div className="text-medusa-fg-muted flex items-center text-sm">
                     <Spinner className="animate-spin" />
                   </div>
                 }

www/apps/ui/src/components/component-props.tsx

@@ -32,7 +32,7 @@ const ComponentProps = ({ component }: ComponentPropsProps) => {
       <Container className="mb-6 mt-8 overflow-hidden p-0">
         <React.Suspense
           fallback={
-            <div className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark flex flex-1 items-center justify-center">
+            <div className="text-medusa-fg-muted flex flex-1 items-center justify-center">
               <Spinner className="animate-spin" />
             </div>
           }

www/apps/ui/src/components/feedback.tsx

@@ -25,10 +25,7 @@ export const Feedback = ({ title, ...props }: FeedbackProps) => {
         section: title,
       }}
       {...props}
-      className={clsx(
-        "text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
-        props.className
-      )}
+      className={clsx("text-medusa-fg-subtle", props.className)}
     />
   )
 }

www/apps/ui/src/components/figma-icon.tsx

@@ -1,13 +1,6 @@
 import { BorderedIcon } from "docs-ui"
-import { Figma } from "./icons"
+import { basePathUrl } from "../lib/base-path-url"
 
 export const FigmaIcon = () => {
-  return (
-    <BorderedIcon
-      IconComponent={Figma}
-      iconWrapperClassName={
-        "bg-medusa-button-inverted bg-button-inverted !p-[6px]"
-      }
-    />
-  )
+  return <BorderedIcon icon={basePathUrl("/images/figma.png")} />
 }

www/apps/ui/src/components/hook-table.tsx

@@ -57,7 +57,7 @@ const Row = ({ value, type, description }: HookData) => {
           >
             <div className="flex items-center gap-x-1">
               <span>enum</span>
-              <InformationCircleSolid className="text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark" />
+              <InformationCircleSolid className="text-medusa-fg-subtle" />
             </div>
           </Tooltip>
         )}
@@ -69,7 +69,7 @@ const Row = ({ value, type, description }: HookData) => {
           >
             <div className="flex items-center gap-x-1">
               <span>{type.name}</span>
-              <InformationCircleSolid className="text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark" />
+              <InformationCircleSolid className="text-medusa-fg-subtle" />
             </div>
           </Tooltip>
         )}
@@ -81,7 +81,7 @@ const Row = ({ value, type, description }: HookData) => {
           >
             <div className="flex items-center gap-x-1">
               <span>function</span>
-              <InformationCircleSolid className="text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark" />
+              <InformationCircleSolid className="text-medusa-fg-subtle" />
             </div>
           </Tooltip>
         )}

www/apps/ui/src/components/hook-values.tsx

@@ -32,7 +32,7 @@ const HookValues = ({ hook }: HookValuesProps) => {
       <Container className="mb-6 mt-8 overflow-hidden p-0">
         <React.Suspense
           fallback={
-            <div className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark flex flex-1 items-center justify-center">
+            <div className="text-medusa-fg-muted flex flex-1 items-center justify-center">
               <Spinner className="animate-spin" />
             </div>
           }

www/apps/ui/src/components/icon-search.tsx

@@ -59,7 +59,7 @@ const SearchResults = ({ query = "" }: { query?: string }) => {
             <Tooltip content={name}>
               <div
                 className={clsx(
-                  "border-medusa-border-base dark:border-medusa-border-base-dark",
+                  "border-medusa-border-base",
                   "flex h-10 w-10 items-center justify-center rounded-lg border"
                 )}
               >
@@ -67,7 +67,6 @@ const SearchResults = ({ query = "" }: { query?: string }) => {
                 <div
                   className={clsx(
                     "bg-medusa-bg-component text-medusa-fg-base",
-                    "dark:bg-medusa-bg-component-dark dark:text-medusa-fg-base-dark",
                     "flex h-8 w-8 items-center justify-center rounded-[4px]"
                   )}
                 >

www/apps/ui/src/components/mdx-components.tsx

@@ -23,10 +23,7 @@ const components = {
   h1: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => {
     return (
       <h1
-        className={clx(
-          "h1-docs text-medusa-fg-base dark:text-medusa-fg-base-dark",
-          className
-        )}
+        className={clx("h1-docs text-medusa-fg-base", className)}
         {...props}
       />
     )
@@ -34,10 +31,7 @@ const components = {
   h2: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => {
     return (
       <h2
-        className={clx(
-          "h2-docs mb-4 mt-16 text-medusa-fg-base dark:text-medusa-fg-base-dark",
-          className
-        )}
+        className={clx("h2-docs mb-4 mt-16 text-medusa-fg-base", className)}
         {...props}
       />
     )
@@ -45,10 +39,7 @@ const components = {
   h3: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => {
     return (
       <h3
-        className={clx(
-          "h3-docs mb-2 mt-10 text-medusa-fg-base dark:text-medusa-fg-base-dark",
-          className
-        )}
+        className={clx("h3-docs mb-2 mt-10 text-medusa-fg-base", className)}
         {...props}
       />
     )
@@ -56,10 +47,7 @@ const components = {
   p: ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => {
     return (
       <Text
-        className={clx(
-          "text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark mb-docs_1.5",
-          className
-        )}
+        className={clx("text-medusa-fg-subtle mb-docs_1.5", className)}
         {...props}
       />
     )
@@ -79,7 +67,6 @@ const components = {
       <a
         className={clx(
           "txt-medium 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
         )}
         href={href}
@@ -110,13 +97,7 @@ const components = {
     ...props
   }: React.HTMLAttributes<HTMLElement>) => {
     return (
-      <li
-        className={clx(
-          "text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
-          className
-        )}
-        {...props}
-      >
+      <li className={clx("text-medusa-fg-subtle", className)} {...props}>
         <Text>{children}</Text>
       </li>
     )

www/apps/ui/src/components/props-table.tsx

@@ -90,7 +90,7 @@ const Row = ({ prop, type, defaultValue }: PropData) => {
           >
             <div className="flex items-center gap-x-1">
               <span>enum</span>
-              <InformationCircleSolid className="text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark" />
+              <InformationCircleSolid className="text-medusa-fg-subtle" />
             </div>
           </Tooltip>
         )}
@@ -102,7 +102,7 @@ const Row = ({ prop, type, defaultValue }: PropData) => {
           >
             <div className="flex items-center gap-x-1">
               <span>{type.name}</span>
-              <InformationCircleSolid className="text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark" />
+              <InformationCircleSolid className="text-medusa-fg-subtle" />
             </div>
           </Tooltip>
         )}
@@ -114,7 +114,7 @@ const Row = ({ prop, type, defaultValue }: PropData) => {
           >
             <div className="flex items-center gap-x-1">
               <span>function</span>
-              <InformationCircleSolid className="text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark" />
+              <InformationCircleSolid className="text-medusa-fg-subtle" />
             </div>
           </Tooltip>
         )}

www/apps/ui/src/components/scroll-area.tsx

@@ -11,7 +11,7 @@ const Scrollbar = ({ key, ...props }: ScrollbarProps) => {
   return (
     <Primitives.Scrollbar
       className={clsx(
-        "bg-medusa-bg-base dark:bg-medusa-bg-base-dark flex touch-none select-none p-0.5 transition-colors ease-out",
+        "bg-medusa-bg-baseflex touch-none select-none p-0.5 transition-colors ease-out",
         "data-[orientation=horizontal]:h-2.5 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col"
       )}
       key={key as Key}
@@ -26,7 +26,7 @@ const Thumb = ({ className, key, ...props }: ThumbProps) => {
   return (
     <Primitives.Thumb
       className={clx(
-        "bg-medusa-bg-component dark:bg-medusa-bg-component-dark relative flex-1 rounded-[10px] before:absolute before:left-1/2 before:top-1/2 before:h-full",
+        "bg-medusa-bg-component relative flex-1 rounded-[10px] before:absolute before:left-1/2 before:top-1/2 before:h-full",
         "before:min-h-[44px] before:w-full before:min-w-[44px] before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']",
         className
       )}

www/apps/ui/src/components/tabs.tsx

@@ -34,7 +34,6 @@ const TabsTrigger = React.forwardRef<
     className={clx(
       "text-medusa-fg-subtle txt-compact-small-plus rounded-full px-3 py-1.5 transition-all",
       "data-[state=active]:shadow-card-rest dark:data-[state=active]:shadow-card-rest-dark data-[state=active]:text-medusa-fg-base",
-      "dark:text-medusa-fg-subtle-dark dark:data-[state=active]:text-medusa-fg-base-dark",
       className
     )}
     key={key as Key}