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"

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

@@ -34,7 +34,7 @@ export const ModalProvider = ({ children }: ModalProviderProps) => {
       {children}
       {modalProps && (
         <>
-          <div className="bg-medusa-bg-overlay dark:bg-medusa-bg-overlay-dark fixed top-0 left-0 z-[499] h-screen w-screen"></div>
+          <div className="bg-medusa-bg-overlay fixed top-0 left-0 z-[499] h-screen w-screen"></div>
           <Modal {...modalProps} onClose={closeModal} />
         </>
       )}

www/packages/tailwind/base.tailwind.config.js

@@ -1,4 +1,5 @@
 import plugin from "tailwindcss/plugin"
+import presets from "./theme-presets"
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -13,374 +14,158 @@ module.exports = {
         medusa: {
           bg: {
             subtle: {
-              DEFAULT: "#F9FAFB",
-              dark: "#18181A",
-              hover: {
-                DEFAULT: "#F3F4F6",
-                dark: "#1B1B1F",
-              },
-              pressed: {
-                DEFAULT: "#E5E7EB",
-                dark: "#27282D",
-              },
+              DEFAULT: "var(--docs-bg-subtle)",
+              hover: "var(--docs-bg-subtle-hover)",
+              pressed: "var(--docs-bg-subtle-pressed)",
             },
             base: {
-              DEFAULT: "#FFFFFF",
-              dark: "#1B1B1F",
-              hover: {
-                DEFAULT: "#F9FAFB",
-                dark: "#27282D",
-              },
-              pressed: {
-                DEFAULT: "#F3F4F6",
-                dark: "#2E3035",
-              },
-            },
-            component: {
-              DEFAULT: "#F1F3F5",
-              dark: "#27282D",
+              DEFAULT: "var(--docs-bg-base)",
+              hover: "var(--docs-bg-base-hover)",
+              pressed: "var(--docs-bg-base-pressed)",
             },
+            component: "var(--docs-bg-component)",
             "switch-off": {
-              DEFAULT: "#E5E7EB",
-              dark: "#35373C",
-              hover: {
-                DEFAULT: "#E5E7EB",
-                dark: "#464B50",
-              },
-            },
-            interactive: {
-              DEFAULT: "#3B82F6",
-              dark: "#60A5FA",
-            },
-            overlay: {
-              DEFAULT: "rgba(3, 7, 18, 0.4)",
-              dark: "rgba(24, 24, 26, 0.7)",
-            },
-            disabled: {
-              DEFAULT: "#F3F4F6",
-              dark: "#27282D",
+              DEFAULT: "var(--docs-bg-switch-off)",
+              hover: "var(--docs-bg-switch-off-hover)",
             },
+            interactive: "var(--docs-bg-interactive)",
+            overlay: "var(--docs-bg-overlay)",
+            disabled: "var(--docs-bg-disabled)",
             highlight: {
-              DEFAULT: "#EFF6FF",
-              dark: "#172554",
-              hover: {
-                DEFAULT: "#DBEAFE",
-                dark: "#1E3A8A",
-              },
+              DEFAULT: "var(--docs-bg-highlight)",
+              hover: "var(--docs-bg-highlight-hover)",
             },
             field: {
-              DEFAULT: "#F9FAFB",
-              dark: "#27282D",
-              hover: {
-                DEFAULT: "#F3F4F6",
-                dark: "#2E3035",
-              },
+              DEFAULT: "var(--docs-bg-field)",
+              hover: "var(--docs-bg-field-hover)",
             },
           },
           fg: {
-            base: {
-              DEFAULT: "#030712",
-              dark: "#EDEEF0",
-            },
-            subtle: {
-              DEFAULT: "#4B5563",
-              dark: "#ADB1B8",
-            },
-            muted: {
-              DEFAULT: "#9CA3AF",
-              dark: "#696E77",
-            },
-            disabled: {
-              DEFAULT: "#D1D5DB",
-              dark: "#3C3F44",
-            },
+            base: "var(--docs-fg-base)",
+            subtle: "var(--docs-fg-subtle)",
+            muted: "var(--docs-fg-muted)",
+            disabled: "var(--docs-fg-disabled)",
             on: {
-              color: {
-                DEFAULT: "#FFFFFF",
-                dark: "#FFFFFF",
-              },
-              inverted: {
-                DEFAULT: "#FFFFFF",
-                dark: "#18181A",
-              },
+              color: "var(--docs-fg-on-color)",
+              inverted: "var(--docs-fg-on-inverted)",
             },
             interactive: {
-              DEFAULT: "#3B82F6",
-              dark: "#60A5FA",
-              hover: {
-                DEFAULT: "#2563EB",
-                dark: "#3B82F6",
-              },
-            },
-            error: {
-              DEFAULT: "#E11D48",
-              dark: "#FB7185",
+              DEFAULT: "var(--docs-fg-interactive)",
+              hover: "var(--docs-fg-interactive-hover)",
             },
+            error: "var(--docs-fg-error)",
           },
           border: {
-            base: {
-              DEFAULT: "#E5E7EB",
-              dark: "#2E3035",
-            },
-            strong: {
-              DEFAULT: "#D1D5DB",
-              dark: "#35373C",
-            },
-            loud: {
-              DEFAULT: "#030712",
-              dark: "#EDEEF0",
-            },
-            interactive: {
-              DEFAULT: "#3B82F6",
-              dark: "#60A5FA",
-            },
-            error: {
-              DEFAULT: "#E11D48",
-              dark: "#F43F5E",
-            },
-            danger: {
-              DEFAULT: "#BE123C",
-              dark: "#BE123C",
-            },
-            transparent: {
-              DEFAULT: "rgba(3, 7, 18, 0)",
-              dark: "rgba(238, 238, 238, 0)",
-            },
+            base: "var(--docs-border-base)",
+            strong: "var(--docs-border-strong)",
+            loud: "var(--docs-border-loud)",
+            interactive: "var(--docs-border-interactive)",
+            error: "var(--docs-border-error)",
+            danger: "var(--docs-border-danger)",
+            transparent: "var(--docs-border-transparent)",
           },
           button: {
             inverted: {
-              DEFAULT: "#030712",
-              dark: "#EDEEF0",
-              hover: {
-                DEFAULT: "#1F2937",
-                dark: "#FFFFFF",
-              },
-              pressed: {
-                DEFAULT: "#374151",
-                dark: "#EDEEF0",
-              },
+              DEFAULT: "var(--docs-button-inverted)",
+              hover: "var(--docs-button-inverted-hover)",
+              pressed: "var(--docs-button-inverted-pressed)",
             },
             neutral: {
-              DEFAULT: "#FFFFFF",
-              dark: "#27282D",
-              hover: {
-                DEFAULT: "#F9FAFB",
-                dark: "#35373C",
-              },
-              pressed: {
-                DEFAULT: "#F3F4F6",
-                dark: "#3C3F44",
-              },
+              DEFAULT: "var(--docs-button-neutral)",
+              hover: "var(--docs-button-neutral-hover)",
+              pressed: "var(--docs-button-neutral-pressed)",
             },
             danger: {
-              DEFAULT: "#E11D48",
-              dark: "#9F1239",
-              hover: {
-                DEFAULT: "#E11D48",
-                dark: "#BE123C",
-              },
-              pressed: {
-                DEFAULT: "#BE123C",
-                dark: "#E11D48",
-              },
+              DEFAULT: "var(--docs-button-danger)",
+              hover: "var(--docs-button-danger-hover)",
+              pressed: "var(--docs-button-danger-pressed)",
             },
             transparent: {
-              DEFAULT: "rgba(255, 255, 255, 0)",
-              dark: "rgba(0, 0, 0, 0)",
-              hover: {
-                DEFAULT: "#F9FAFB",
-                dark: "#27282D",
-              },
-              pressed: {
-                DEFAULT: "#F3F4F6",
-                dark: "#2E3035",
-              },
-            },
-            disabled: {
-              DEFAULT: "#ECEEF0",
-              dark: "#28282C",
+              DEFAULT: "var(--docs-button-transparent)",
+              hover: "var(--docs-button-transparent-hover)",
+              pressed: "var(--docs-button-transparent-pressed)",
             },
+            disabled: "var(--docs-button-disabled)",
           },
           tag: {
             neutral: {
               bg: {
-                DEFAULT: "#F3F4F6",
-                dark: "#2E3035",
-                hover: {
-                  DEFAULT: "#E5E7EB",
-                  dark: "#35373C",
-                },
-              },
-              text: {
-                DEFAULT: "#4B5563",
-                dark: "#ADB1B8",
-              },
-              icon: {
-                DEFAULT: "#6B7280",
-                dark: "#7D828A",
-              },
-              border: {
-                DEFAULT: "#E5E7EB",
-                dark: "#3C3F44",
+                DEFAULT: "var(--docs-tags-neutral-bg)",
+                hover: "var(--docs-tags-neutral-bg-hover)",
               },
+              text: "var(--docs-tags-neutral-text)",
+              icon: "var(--docs-tags-neutral-icon)",
+              border: "var(--docs-tags-neutral-border)",
             },
             purple: {
               bg: {
-                DEFAULT: "#EDE9FE",
-                dark: "#2E1064",
-                hover: {
-                  DEFAULT: "#DDD6FE",
-                  dark: "#4C1D95",
-                },
-              },
-              text: {
-                DEFAULT: "#6D28D9",
-                dark: "#8B5CF6",
-              },
-              icon: {
-                DEFAULT: "#7C3AED",
-                dark: "#6D28D9",
-              },
-              border: {
-                DEFAULT: "#DDD6FE",
-                dark: "#4C1D95",
+                DEFAULT: "var(--docs-tags-purple-bg)",
+                hover: "var(--docs-tags-purple-bg-hover)",
               },
+              text: "var(--docs-tags-purple-text)",
+              icon: "var(--docs-tags-purple-icon)",
+              border: "var(--docs-tags-purple-border)",
             },
             blue: {
               bg: {
-                DEFAULT: "#DBEAFE",
-                dark: "#172554",
-                hover: {
-                  DEFAULT: "#BFDBFE",
-                  dark: "#1E2A8A",
-                },
-              },
-              text: {
-                DEFAULT: "#1D4ED8",
-                dark: "#3B82F6",
-              },
-              icon: {
-                DEFAULT: "#2563EB",
-                dark: "#1D4ED8",
-              },
-              border: {
-                DEFAULT: "#BFDBFE",
-                dark: "#1E3A8A",
+                DEFAULT: "var(--docs-tags-blue-bg)",
+                hover: "var(--docs-tags-blue-bg-hover)",
               },
+              text: "var(--docs-tags-blue-text)",
+              icon: "var(--docs-tags-blue-icon)",
+              border: "var(--docs-tags-blue-border)",
             },
             green: {
               bg: {
-                DEFAULT: "#D1FAE5",
-                dark: "#022C22",
-                hover: {
-                  DEFAULT: "#A7F3D0",
-                  dark: "#064E3B",
-                },
-              },
-              text: {
-                DEFAULT: "#047857",
-                dark: "#10B981",
-              },
-              icon: {
-                DEFAULT: "#059669",
-                dark: "#047857",
-              },
-              border: {
-                DEFAULT: "#A7F3D0",
-                dark: "#064E3B",
+                DEFAULT: "var(--docs-tags-green-bg)",
+                hover: "var(--docs-tags-green-bg-hover)",
               },
+              text: "var(--docs-tags-green-text)",
+              icon: "var(--docs-tags-green-icon)",
+              border: "var(--docs-tags-green-border)",
             },
             orange: {
               bg: {
-                DEFAULT: "#FEF4C7",
-                dark: "#451A03",
-                hover: {
-                  DEFAULT: "#FDE68A",
-                  dark: "#78350F",
-                },
-              },
-              text: {
-                DEFAULT: "#B45309",
-                dark: "#F59E0B",
-              },
-              icon: {
-                DEFAULT: "#D97706",
-                dark: "#B45309",
-              },
-              border: {
-                DEFAULT: "#FDE68A",
-                dark: "#78350F",
+                DEFAULT: "var(--docs-tags-orange-bg)",
+                hover: "var(--docs-tags-orange-bg-hover)",
               },
+              text: "var(--docs-tags-orange-text)",
+              icon: "var(--docs-tags-orange-icon)",
+              border: "var(--docs-tags-orange-border)",
             },
             red: {
               bg: {
-                DEFAULT: "#FFE4E6",
-                dark: "#4C0519",
-                hover: {
-                  DEFAULT: "#FECDD3",
-                  dark: "#881337",
-                },
-              },
-              text: {
-                DEFAULT: "#BE123C",
-                dark: "#FB7185",
-              },
-              icon: {
-                DEFAULT: "#E11D48",
-                dark: "#F43F5E",
-              },
-              border: {
-                DEFAULT: "#FECDD3",
-                dark: "#881337",
+                DEFAULT: "var(--docs-tags-red-bg)",
+                hover: "var(--docs-tags-red-bg-hover)",
               },
+              text: "var(--docs-tags-red-text)",
+              icon: "var(--docs-tags-red-icon)",
+              border: "var(--docs-tags-red-border)",
             },
           },
           code: {
             text: {
-              base: {
-                DEFAULT: "#F9FAFB",
-                dark: "#EDEEF0",
-              },
-              subtle: {
-                DEFAULT: "#9CA3AF",
-                dark: "#696E77",
-              },
-              highlight: "#102A4C",
-            },
-            icon: {
-              DEFAULT: "#6B7280",
-              dark: "#464B50",
+              base: "var(--docs-code-text-base)",
+              subtle: "var(--docs-code-text-subtle)",
+              highlight: "var(--docs-code-text-highlight)",
             },
+            icon: "var(--docs-code-icon)",
             bg: {
               base: {
-                DEFAULT: "#111827",
-                dark: "#1B1B1F",
+                DEFAULT: "var(--docs-code-bg-base)",
                 // Need this one for color-fade
-                transparent: {
-                  DEFAULT: "#11182700",
-                  dark: "#1B1B1F00",
-                },
-              },
-              header: {
-                DEFAULT: "#1F2937",
-                dark: "#18181A",
+                transparent: "var(--docs-code-bg-transparent)",
               },
+              header: "var(--docs-code-bg-header)",
             },
-            border: {
-              DEFAULT: "#374151",
-              dark: "#2E3035",
-            },
+            border: "var(--docs-code-border)",
           },
         },
         /* docs defaults */
         docs: {
           bg: {
-            DEFAULT: "#FFFFFF",
-            dark: "#18181A",
-            surface: {
-              DEFAULT: "#F9FAFB",
-              dark: "#1B1B1F",
-            },
+            DEFAULT: "var(--docs-bg)",
+            surface: "var(--docs-bg-surface)",
           },
         },
       },
@@ -470,11 +255,8 @@ module.exports = {
         "button-danger-pressed-dark":
           "linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.14) 100%)",
         "code-fade": `linear-gradient(90deg, ${theme(
-          "colors.medusa.code.bg.base.transparent.DEFAULT"
+          "colors.medusa.code.bg.base.transparent"
         )}, ${theme("colors.medusa.code.bg.base.DEFAULT")} 24px)`,
-        "code-fade-dark": `linear-gradient(90deg, ${theme(
-          "colors.medusa.code.bg.base.transparent.dark"
-        )}, ${theme("colors.medusa.code.bg.base.dark")} 24px)`,
         fade: "linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))",
         "fade-dark":
           "linear-gradient(to top, rgba(27, 27, 31, 1), rgba(27, 27, 31, 0))",
@@ -758,7 +540,8 @@ module.exports = {
     },
   },
   plugins: [
-    plugin(({ addVariant, addUtilities, addComponents, theme }) => {
+    plugin(({ addBase, addVariant, addUtilities, addComponents, theme }) => {
+      addBase(presets)
       addVariant("search-cancel", "&::-webkit-search-cancel-button")
       addUtilities({
         ".animation-fill-forwards": {

www/packages/tailwind/theme-presets.js

@@ -0,0 +1,194 @@
+const light = {
+  "--docs-bg-base": "rgba(255, 255, 255, 1)",
+  "--docs-bg-base-hover": "rgba(249, 250, 251, 1)",
+  "--docs-bg-base-pressed": "rgba(243, 244, 246, 1)",
+  "--docs-bg-subtle": "rgba(249, 250, 251, 1)",
+  "--docs-bg-subtle-hover": "rgba(243, 244, 246, 1)",
+  "--docs-bg-subtle-pressed": "rgba(229, 231, 235, 1)",
+  "--docs-bg-component": "rgba(241, 243, 245, 1)",
+  "--docs-bg-switch-off": "rgba(229, 231, 235, 1)",
+  "--docs-bg-switch-off-hover": "rgba(209, 213, 219, 1)",
+  "--docs-bg-interactive": "rgba(59, 130, 246, 1)",
+  "--docs-bg-overlay": "rgba(3, 7, 18, 0.4)",
+  "--docs-bg-disabled": "rgba(243, 244, 246, 1)",
+  "--docs-bg-highlight": "rgba(239, 246, 255, 1)",
+  "--docs-bg-highlight-hover": "rgba(219, 234, 254, 1)",
+  "--docs-bg-field": "rgba(249, 250, 251, 1)",
+  "--docs-bg-field-hover": "rgba(243, 244, 246, 1)",
+
+  "--docs-fg-base": "rgba(3, 7, 18, 1)",
+  "--docs-fg-subtle": "rgba(75, 85, 99, 1)",
+  "--docs-fg-muted": "rgba(156, 163, 175, 1)",
+  "--docs-fg-disabled": "rgba(209, 213, 219, 1)",
+  "--docs-fg-on-color": "rgba(255, 255, 255, 1)",
+  "--docs-fg-on-inverted": "rgba(255, 255, 255, 1)",
+  "--docs-fg-interactive": "rgba(59, 130, 246, 1)",
+  "--docs-fg-interactive-hover": "rgba(37, 99, 235, 1)",
+  "--docs-fg-error": "rgba(225, 29, 72, 1)",
+
+  "--docs-border-base": "rgba(229, 231, 235, 1)",
+  "--docs-border-strong": "rgba(209, 213, 219, 1)",
+  "--docs-border-loud": "rgba(3, 7, 18, 1)",
+  "--docs-border-interactive": "rgba(59, 130, 246, 1)",
+  "--docs-border-error": "rgba(225, 29, 72, 1)",
+  "--docs-border-danger": "rgba(190, 18, 60, 1)",
+  "--docs-border-transparent": "rgba(3, 7, 18, 0)",
+
+  "--docs-button-inverted": "rgba(3, 7, 18, 1)",
+  "--docs-button-inverted-hover": "rgba(31, 41, 55, 1)",
+  "--docs-button-inverted-pressed": "rgba(55, 65, 81, 1)",
+  "--docs-button-neutral": "rgba(255, 255, 255, 1)",
+  "--docs-button-neutral-hover": "rgba(249, 250, 251, 1)",
+  "--docs-button-neutral-pressed": "rgba(243, 244, 246, 1)",
+  "--docs-button-danger": "rgba(225, 29, 72, 1)",
+  "--docs-button-danger-hover": "rgba(225, 29, 72, 1)",
+  "--docs-button-danger-pressed": "rgba(190, 18, 60, 1)",
+  "--docs-button-transparent": "rgba(255, 255, 255, 0)",
+  "--docs-button-transparent-hover": "rgba(249, 250, 251, 1)",
+  "--docs-button-transparent-pressed": "rgba(243, 244, 246, 1)",
+  "--docs-button-disabled": "rgba(236, 238, 240, 1)",
+
+  "--docs-tags-neutral-bg": "rgba(243, 244, 246, 1)",
+  "--docs-tags-neutral-bg-hover": "rgba(229, 231, 235, 1)",
+  "--docs-tags-neutral-text": "rgba(75, 85, 99, 1)",
+  "--docs-tags-neutral-icon": "rgba(107, 114, 128, 1)",
+  "--docs-tags-neutral-border": "rgba(229, 231, 235, 1)",
+  "--docs-tags-purple-bg": "rgba(237, 233, 254, 1)",
+  "--docs-tags-purple-bg-hover": "rgba(221, 214, 254, 1)",
+  "--docs-tags-purple-text": "rgba(109, 40, 217, 1)",
+  "--docs-tags-purple-icon": "rgba(124, 58, 237, 1)",
+  "--docs-tags-purple-border": "rgba(221, 214, 254, 1)",
+  "--docs-tags-blue-bg": "rgba(219, 234, 254, 1)",
+  "--docs-tags-blue-bg-hover": "rgba(191, 219, 254, 1)",
+  "--docs-tags-blue-text": "rgba(29, 78, 216, 1)",
+  "--docs-tags-blue-icon": "rgba(37, 99, 235, 1)",
+  "--docs-tags-blue-border": "rgba(191, 219, 254, 1)",
+  "--docs-tags-green-bg": "rgba(209, 250, 229, 1)",
+  "--docs-tags-green-bg-hover": "rgba(167, 243, 208, 1)",
+  "--docs-tags-green-text": "rgba(4, 120, 87, 1)",
+  "--docs-tags-green-icon": "rgba(5, 150, 105, 1)",
+  "--docs-tags-green-border": "rgba(167, 243, 208, 1)",
+  "--docs-tags-orange-bg": "rgba(254, 244, 199, 1)",
+  "--docs-tags-orange-bg-hover": "rgba(253, 230, 138, 1)",
+  "--docs-tags-orange-text": "rgba(180, 83, 9, 1)",
+  "--docs-tags-orange-icon": "rgba(217, 119, 6, 1)",
+  "--docs-tags-orange-border": "rgba(253, 230, 138, 1)",
+  "--docs-tags-red-bg": "rgba(255, 228, 230, 1)",
+  "--docs-tags-red-bg-hover": "rgba(254, 205, 211, 1)",
+  "--docs-tags-red-text": "rgba(190, 18, 60, 1)",
+  "--docs-tags-red-icon": "rgba(225, 29, 72, 1)",
+  "--docs-tags-red-border": "rgba(254, 205, 211, 1)",
+
+  "--docs-code-text-base": "rgba(249, 250, 251, 1)",
+  "--docs-code-text-subtle": "rgba(156, 163, 175, 1)",
+  "--docs-code-text-highlight": "rgba(16, 42, 76, 1)",
+  "--docs-code-icon": "rgba(107, 114, 128, 1)",
+  "--docs-code-bg-base": "rgba(17, 24, 39, 1)",
+  "--docs-code-bg-header": "rgba(31, 41, 55, 1)",
+  "--docs-code-bg-transparent": "rgba(17, 24, 39, 0)",
+  "--docs-code-border": "rgba(55, 65, 81, 1)",
+
+  "--docs-bg": "var(--docs-bg-base)",
+  "--docs-bg-surface": "var(--docs-bg-subtle)",
+}
+
+const dark = {
+  "--docs-bg-base": "rgba(27, 27, 31, 1)",
+  "--docs-bg-base-hover": "rgba(39, 40, 45, 1)",
+  "--docs-bg-base-pressed": "rgba(46, 48, 53, 1)",
+  "--docs-bg-subtle": "rgba(24, 24, 26, 1)",
+  "--docs-bg-subtle-hover": "rgba(27, 27, 31, 1)",
+  "--docs-bg-subtle-pressed": "rgba(39, 40, 45, 1)",
+  "--docs-bg-component": "rgba(39, 40, 45, 1)",
+  "--docs-bg-switch-off": "rgba(53, 55, 60, 1)",
+  "--docs-bg-switch-off-hover": "rgba(70, 75, 80, 1)",
+  "--docs-bg-interactive": "rgba(96, 165, 250, 1)",
+  "--docs-bg-overlay": "rgba(24, 24, 26, 0.7)",
+  "--docs-bg-disabled": "rgba(39, 40, 45, 1)",
+  "--docs-bg-highlight": "rgba(23, 37, 84, 1)",
+  "--docs-bg-highlight-hover": "rgba(30, 58, 138, 1)",
+  "--docs-bg-field": "rgba(39, 40, 45, 1)",
+  "--docs-bg-field-hover": "rgba(46, 48, 53, 1)",
+
+  "--docs-fg-base": "rgba(237, 238, 240, 1)",
+  "--docs-fg-subtle": "rgba(173, 177, 184, 1)",
+  "--docs-fg-muted": "rgba(105, 110, 119, 1)",
+  "--docs-fg-disabled": "rgba(60, 63, 68, 1)",
+  "--docs-fg-on-color": "rgba(255, 255, 255, 1)",
+  "--docs-fg-on-inverted": "rgba(24, 24, 26, 1)",
+  "--docs-fg-interactive": "rgba(96, 165, 250, 1)",
+  "--docs-fg-interactive-hover": "rgba(59, 130, 246, 1)",
+  "--docs-fg-error": "rgba(251, 113, 133, 1)",
+
+  "--docs-border-base": "rgba(46, 48, 53, 1)",
+  "--docs-border-strong": "rgba(53, 55, 60, 1)",
+  "--docs-border-loud": "rgba(237, 238, 240, 1)",
+  "--docs-border-interactive": "rgba(96, 165, 250, 1)",
+  "--docs-border-error": "rgba(244, 63, 94, 1)",
+  "--docs-border-danger": "rgba(190, 18, 60, 1)",
+  "--docs-border-transparent": "rgba(255, 255, 255, 0)",
+
+  "--docs-button-inverted": "rgba(237, 238, 240, 1)",
+  "--docs-button-inverted-hover": "rgba(255, 255, 255, 1)",
+  "--docs-button-inverted-pressed": "rgba(237, 238, 240, 1)",
+  "--docs-button-neutral": "rgba(39, 40, 45, 1)",
+  "--docs-button-neutral-hover": "rgba(53, 55, 60, 1)",
+  "--docs-button-neutral-pressed": "rgba(60, 63, 68, 1)",
+  "--docs-button-danger": "rgba(159, 18, 57, 1)",
+  "--docs-button-danger-hover": "rgba(190, 18, 60, 1)",
+  "--docs-button-danger-pressed": "rgba(225, 29, 72, 1)",
+  "--docs-button-transparent": "rgba(255, 255, 255, 0)",
+  "--docs-button-transparent-hover": "rgba(39, 40, 45, 1)",
+  "--docs-button-transparent-pressed": "rgba(46, 48, 53, 1)",
+  "--docs-button-disabled": "rgba(40, 40, 44, 1)",
+
+  "--docs-tags-neutral-bg": "rgba(46, 48, 53, 1)",
+  "--docs-tags-neutral-bg-hover": "rgba(53, 55, 60, 1)",
+  "--docs-tags-neutral-text": "rgba(173, 177, 184, 1)",
+  "--docs-tags-neutral-icon": "rgba(125, 130, 138, 1)",
+  "--docs-tags-neutral-border": "rgba(60, 63, 68, 1)",
+  "--docs-tags-purple-bg": "rgba(46, 16, 100, 1)",
+  "--docs-tags-purple-bg-hover": "rgba(76, 29, 149, 1)",
+  "--docs-tags-purple-text": "rgba(167, 139, 250, 1)",
+  "--docs-tags-purple-icon": "rgba(139, 92, 246, 1)",
+  "--docs-tags-purple-border": "rgba(76, 29, 149, 1)",
+  "--docs-tags-blue-bg": "rgba(23, 37, 84, 1)",
+  "--docs-tags-blue-bg-hover": "rgba(30, 42, 138, 1)",
+  "--docs-tags-blue-text": "rgba(96, 165, 250, 1)",
+  "--docs-tags-blue-icon": "rgba(59, 130, 246, 1)",
+  "--docs-tags-blue-border": "rgba(30, 58, 138, 1)",
+  "--docs-tags-green-bg": "rgba(2, 44, 34, 1)",
+  "--docs-tags-green-bg-hover": "rgba(6, 78, 59, 1)",
+  "--docs-tags-green-text": "rgba(52, 211, 153, 1)",
+  "--docs-tags-green-icon": "rgba(16, 185, 129, 1)",
+  "--docs-tags-green-border": "rgba(6, 78, 59, 1)",
+  "--docs-tags-orange-bg": "rgba(69, 26, 3, 1)",
+  "--docs-tags-orange-bg-hover": "rgba(120, 53, 15, 1)",
+  "--docs-tags-orange-text": "rgba(251, 191, 36, 1)",
+  "--docs-tags-orange-icon": "rgba(245, 158, 11, 1)",
+  "--docs-tags-orange-border": "rgba(120, 53, 15, 1)",
+  "--docs-tags-red-bg": "rgba(76, 5, 25, 1)",
+  "--docs-tags-red-bg-hover": "rgba(136, 19, 55, 1)",
+  "--docs-tags-red-text": "rgba(251, 113, 133, 1)",
+  "--docs-tags-red-icon": "rgba(244, 63, 94, 1)",
+  "--docs-tags-red-border": "rgba(136, 19, 55, 1)",
+
+  "--docs-code-text-base": "rgba(237, 238, 240, 1)",
+  "--docs-code-text-subtle": "rgba(105, 110, 119, 1)",
+  "--docs-code-text-highlight": "rgba(16, 42, 76, 1)",
+  "--docs-code-icon": "rgba(70, 75, 80, 1)",
+  "--docs-code-bg-base": "rgba(27, 27, 31, 1)",
+  "--docs-code-bg-header": "rgba(24, 24, 26, 1)",
+  "--docs-code-bg-transparent": "rgba(27, 27, 31, 0)",
+  "--docs-code-border": "rgba(46, 48, 53, 1)",
+
+  "--docs-bg": "var(--docs-bg-subtle)",
+  "--docs-bg-surface": "var(--docs-bg-base)",
+}
+
+module.exports = {
+  ":root": light,
+  ".dark": dark,
+  // eslint-disable-next-line prettier/prettier
+  "[data-theme=\"dark\"]": dark,
+}