docs: improve tailwind configuration (#5215)

packages/medusa/src/api/routes/admin/currencies/list-currencies.ts

@@ -42,6 +42,9 @@ import { FeatureFlagDecorators } from "../../../../utils/feature-flag-decorators
  *     source: |
  *       curl -X POST '{backend_url}/admin/currencies' \
  *       -H 'Authorization: Bearer {api_token}'
+ * security:
+ *   - api_token: []
+ *   - cookie_auth: []
  * tags:
  *   - Currencies
  * responses:

packages/medusa/src/api/routes/admin/currencies/update-currency.ts

@@ -43,6 +43,9 @@ import { EntityManager } from "typeorm"
  *       --data-raw '{
  *           "includes_tax": true
  *       }'
+ * security:
+ *   - api_token: []
+ *   - cookie_auth: []
  * tags:
  *   - Currencies
  * responses:

www/apps/api-reference/app/api/[area]/layout.tsx

@@ -33,8 +33,8 @@ export default function RootLayout({
         className={clsx(
           inter.variable,
           robotoMono.variable,
-          "bg-docs-bg dark:bg-docs-bg-dark font-base text-medium h-full w-full",
+          "bg-docs-bg font-base text-medium h-full w-full",
-          "text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark"
+          "text-medusa-fg-subtle"
         )}
       >
         <Providers>

www/apps/api-reference/components/MDXComponents/Security/Description/index.tsx

@@ -39,12 +39,7 @@ const SecurityDescription = ({
         {getSecuritySchemaTypeName(securitySchema)}
       </p>
       {(securitySchema.type === "http" || securitySchema.type === "apiKey") && (
-        <p
+        <p className={clsx("bg-docs-bg-surface", "p-1")}>
-          className={clsx(
-            "bg-docs-bg-surface dark:bg-docs-bg-surface-dark",
-            "p-1"
-          )}
-        >
           <strong>
             {securitySchema.type === "http"
               ? "HTTP Authorization Scheme"

www/apps/api-reference/components/Tags/Operation/CodeSection/Responses/Sample/index.tsx

@@ -91,7 +91,7 @@ const TagsOperationCodeSectionResponsesSample = ({
                   examples.find((ex) => ex.value === event.target.value)
                 )
               }
-              className="border-medusa-border-base dark:border-medusa-border-base-dark my-1 w-full rounded-sm border p-0.5"
+              className="border-medusa-border-base my-1 w-full rounded-sm border p-0.5"
             >
               {examples.map((example, index) => (
                 <option value={example.value} key={index}>

www/apps/api-reference/components/Tags/Operation/CodeSection/index.tsx

@@ -31,18 +31,17 @@ const TagOperationCodeSection = ({
       <div
         className={clsx(
           "bg-medusa-bg-subtle border-medusa-border-base px-0.75 rounded border py-0.5",
-          "text-code-body flex w-full justify-between gap-1",
+          "text-code-body flex w-full justify-between gap-1"
-          "dark:bg-medusa-bg-subtle-dark dark:border-medusa-border-base-dark"
         )}
       >
         <div className={clsx("flex w-[calc(100%-36px)] gap-1")}>
           <MethodLabel method={method} className="h-fit" />
-          <code className="text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark break-words break-all">
+          <code className="text-medusa-fg-subtle =break-words break-all">
             {endpointPath}
           </code>
         </div>
         <CopyButton text={endpointPath} tooltipClassName="font-base">
-          <SquareTwoStack className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
+          <SquareTwoStack className="text-medusa-fg-muted" />
         </CopyButton>
       </div>
       {operation["x-codeSamples"] && (

www/apps/api-reference/components/Tags/Operation/DescriptionSection/Parameters/index.tsx

@@ -44,7 +44,7 @@ const TagsOperationDescriptionSectionParameters = ({
     <>
       {Object.values(pathParameters.properties).length > 0 && (
         <>
-          <h3 className="border-medusa-border-base dark:border-medusa-border-base-dark border-b py-1.5">
+          <h3 className="border-medusa-border-base border-b py-1.5">
             Path Parameters
           </h3>
           <TagOperationParameters
@@ -55,7 +55,7 @@ const TagsOperationDescriptionSectionParameters = ({
       )}
       {Object.values(queryParameters.properties).length > 0 && (
         <>
-          <h3 className="border-medusa-border-base dark:border-medusa-border-base-dark border-b py-1.5">
+          <h3 className="border-medusa-border-base border-b py-1.5">
             Query Parameters
           </h3>
           <TagOperationParameters

www/apps/api-reference/components/Tags/Operation/DescriptionSection/index.tsx

@@ -54,7 +54,7 @@ const TagsOperationDescriptionSection = ({
         {operation["x-featureFlag"] && (
           <TagsOperationFeatureFlagNotice
             featureFlag={operation["x-featureFlag"]}
-            tooltipTextClassName="font-normal text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark"
+            tooltipTextClassName="font-normal text-medusa-fg-subtle"
             badgeClassName="ml-0.5"
           />
         )}

www/apps/api-reference/components/Tags/Operation/Parameters/Name/index.tsx

@@ -62,7 +62,7 @@ const TagOperationParametersName = ({
       {isRequired && (
         <>
           <br />
-          <span className="text-medusa-tag-red-text dark:text-medusa-tag-red-text-dark text-compact-x-small">
+          <span className="text-medusa-tag-red-text text-compact-x-small">
             required
           </span>
         </>

www/apps/api-reference/components/Tags/Operation/Parameters/Nested/index.tsx

@@ -12,8 +12,8 @@ const TagsOperationParametersNested = ({
       {...props}
       className={clsx(
         props.className,
-        "bg-docs-bg-surface dark:bg-docs-bg-surface-dark px-1 pt-1",
+        "bg-docs-bg-surface px-1 pt-1",
-        "border-medusa-border-base dark:border-medusa-border-base-dark my-1 rounded-sm border"
+        "border-medusa-border-base my-1 rounded-sm border"
       )}
     >
       {children}

www/apps/api-reference/components/Tags/Operation/Parameters/Types/OneOf/index.tsx

@@ -76,11 +76,9 @@ const TagOperationParamatersOneOf = ({
                   "border border-solid",
                   activeTab === index && [
                     "bg-medusa-bg-subtle border-medusa-border-strong",
-                    "dark:bg-medusa-bg-subtle-dark dark:border-medusa-border-strong-dark",
                   ],
                   activeTab !== index && [
                     "bg-medusa-bg-base border-medusa-border-base",
-                    "dark:bg-medusa-bg-base-dark dark:border-medusa-border-base-dark",
                   ]
                 )}
                 onClick={() => setActiveTab(index)}

www/apps/api-reference/css/globals.css

@@ -20,11 +20,11 @@
   }
   
   h1, h2, h3, h4 {
-    @apply text-medusa-fg-base dark:text-medusa-fg-base-dark;
+    @apply text-medusa-fg-base;
   }
   
   hr {
-    @apply h-[1px] w-full border-0 bg-medusa-border-base dark:bg-medusa-border-base-dark my-2;
+    @apply h-[1px] w-full border-0 bg-medusa-border-base my-2;
   }
   
   p, ul, ol {
@@ -40,7 +40,7 @@
   }
 
   *::selection {
-    @apply bg-medusa-bg-highlight dark:bg-medusa-bg-highlight-dark;
+    @apply bg-medusa-bg-highlight;
   }
 
   pre *::selection {

www/apps/docs/src/components/DocSidebarItemIcon/index.tsx

@@ -24,9 +24,8 @@ const DocSidebarItemIcon: React.FC<DocSidebarItemIconProps> = ({
           IconComponent={IconComponent}
           iconClassName={clsx("sidebar-item-icon")}
           iconColorClassName={clsx(
-            "text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
+            "text-medusa-fg-subtle",
-            is_disabled &&
+            is_disabled && "text-medusa-fg-disabled"
-              "text-medusa-fg-disabled dark:text-medusa-fg-disabled-dark"
           )}
         />
       )}
@@ -34,9 +33,8 @@ const DocSidebarItemIcon: React.FC<DocSidebarItemIconProps> = ({
         <IconComponent
           className={clsx(
             "sidebar-item-icon",
-            "text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
+            "text-medusa-fg-subtle",
-            is_disabled &&
+            is_disabled && "text-medusa-fg-disabled"
-              "text-medusa-fg-disabled dark:text-medusa-fg-disabled-dark"
           )}
         />
       )}

www/apps/docs/src/components/Footer/SocialLinks/index.tsx

@@ -12,16 +12,16 @@ type SocialLinksProps = {
 const SocialLinks: React.FC<SocialLinksProps> = ({ links = [] }) => {
   const socialIcons = {
     twitter: (
-      <IconTwitter className="text-ui-fg-muted group-hover:text-ui-fg-subtle" />
+      <IconTwitter className="!text-ui-fg-muted group-hover:!text-ui-fg-subtle" />
     ),
     github: (
-      <IconGitHub className="text-ui-fg-muted group-hover:text-ui-fg-subtle" />
+      <IconGitHub className="!text-ui-fg-muted group-hover:!text-ui-fg-subtle" />
     ),
     discord: (
-      <IconDiscord className="text-ui-fg-muted group-hover:text-ui-fg-subtle" />
+      <IconDiscord className="!text-ui-fg-muted group-hover:!text-ui-fg-subtle" />
     ),
     linkedin: (
-      <IconLinkedIn className="text-ui-fg-muted group-hover:text-ui-fg-subtle" />
+      <IconLinkedIn className="!text-ui-fg-muted group-hover:!text-ui-fg-subtle" />
     ),
   }
 

www/apps/docs/src/components/LargeCard/index.tsx

@@ -34,15 +34,15 @@ const LargeCard: React.FC<LargeCardProps> = ({
   return (
     <article
       className={clsx(
-        "group bg-docs-bg-surface dark:bg-docs-bg-surface-dark",
+        "group bg-docs-bg-surface",
         "rounded",
         "p-1 !pb-1.5 shadow-card-rest dark:shadow-card-rest-dark",
         "flex flex-col justify-between relative",
         "[&:nth-child(3n+1):before]:bg-[2%_52%] [&:nth-child(3n+2):before]:bg-[19%_16%] [&:nth-child(3n+3):before]:bg-[17%_50%]",
-        !isSoon &&
+        !isSoon && [
-          "hover:bg-medusa-bg-subtle-hover dark:hover:bg-medusa-bg-base-hover-dark hover:shadow-card-hover dark:hover:shadow-card-hover-dark",
+          "hover:bg-medusa-bg-subtle-hover dark:hover:bg-medusa-bg-base-hover hover:shadow-card-hover dark:hover:shadow-card-hover-dark",
-        !isSoon &&
+          "group-hover:bg-medusa-bg-subtle-hover dark:group-hover:bg-medusa-bg-base-hover group-hover:shadow-card-hover dark:group-hover:shadow-card-hover-dark",
-          "group-hover:bg-medusa-bg-subtle-hover dark:group-hover:bg-medusa-bg-base-hover-dark group-hover:shadow-card-hover dark:group-hover:shadow-card-hover-dark",
+        ],
         "transition-all duration-200 ease-ease",
         "large-card",
         className
@@ -66,9 +66,8 @@ const LargeCard: React.FC<LargeCardProps> = ({
         <div className="mb-0.25">
           <span
             className={clsx(
-              isSoon &&
+              isSoon && "group-hover:text-medusa-fg-disabled",
-                "group-hover:text-medusa-fg-disabled dark:group-hover:text-medusa-fg-disabled-dark",
+              "text-medusa-fg-base text-compact-medium-plus",
-              "text-medusa-fg-base dark:text-medusa-fg-base-dark text-compact-medium-plus",
               "transition-all duration-200 ease-ease"
             )}
           >
@@ -77,8 +76,7 @@ const LargeCard: React.FC<LargeCardProps> = ({
         </div>
         <div
           className={clsx(
-            isSoon &&
+            isSoon && "group-hover:text-medusa-fg-disabled",
-              "group-hover:text-medusa-fg-disabled dark:group-hover:text-medusa-fg-disabled-dark",
             "transition-all duration-200 ease-ease text-medium"
           )}
         >

www/apps/docs/src/components/LearningPath/Finish/index.tsx

@@ -31,7 +31,7 @@ const LearningPathFinish: React.FC<LearningPathFinishProps> = ({
         <Rating event={step.eventName} onRating={onRating} />
       )}
       {type === "custom" && (
-        <span className="text-compact-small text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark">
+        <span className="text-compact-small text-medusa-fg-subtle">
           {step.descriptionJSX}
         </span>
       )}

www/apps/docs/src/components/LearningPath/Icon/index.tsx

@@ -14,7 +14,7 @@ const LearningPathIcon: React.FC<LearningPathIconProps> = ({
   return (
     <div
       className={clsx(
-        "rounded-full shadow-card-rest dark:shadow-card-rest-dark w-3 h-3 bg-medusa-bg-base dark:bg-medusa-bg-base-dark",
+        "rounded-full shadow-card-rest dark:shadow-card-rest-dark w-3 h-3 bg-medusa-bg-base",
         "flex justify-center items-center flex-none",
         className
       )}

www/apps/docs/src/components/LearningPath/Steps/index.tsx

@@ -24,7 +24,7 @@ const LearningPathSteps: React.FC<LearningPathStepsProps> = ({ ...rest }) => {
         {path.steps.map((step, index) => (
           <div
             className={clsx(
-              "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",
               "relative p-1"
             )}
             key={index}
@@ -35,7 +35,7 @@ const LearningPathSteps: React.FC<LearningPathStepsProps> = ({ ...rest }) => {
                   <IconCircleDottedLine
                     className={clsx(
                       "shadow-active dark:shadow-active-dark rounded-full",
-                      "text-ui-fg-interactive"
+                      "!text-ui-fg-interactive"
                     )}
                   />
                 )}
@@ -47,9 +47,7 @@ const LearningPathSteps: React.FC<LearningPathStepsProps> = ({ ...rest }) => {
                 )}
               </div>
               <span
-                className={clsx(
+                className={clsx("text-compact-medium-plus text-medusa-fg-base")}
-                  "text-compact-medium-plus text-medusa-fg-base dark:text-medusa-fg-base-dark"
-                )}
               >
                 {step.title}
               </span>

www/apps/docs/src/components/LearningPath/index.tsx

@@ -32,20 +32,20 @@ const LearningPath: React.FC<LearningPathProps> = ({
   return (
     <div
       className={clsx(
-        "rounded shadow-card-rest dark:shadow-card-rest-dark bg-docs-bg-surface dark:bg-docs-bg-surface-dark mt-1.5 mb-4",
+        "rounded shadow-card-rest dark:shadow-card-rest-dark bg-docs-bg-surface mt-1.5 mb-4",
         className
       )}
     >
       <div
         className={clsx(
-          "flex items-center gap-1 p-1 border-0 border-b border-solid border-medusa-border-base dark:border-medusa-border-base-dark"
+          "flex items-center gap-1 p-1 border-0 border-b border-solid border-medusa-border-base"
         )}
       >
         <LearningPathIcon />
         <div className={clsx("basis-3/4")}>
           <span
             className={clsx(
-              "text-medusa-fg-base dark:text-medusa-fg-base-dark text-compact-large-plus block"
+              "text-medusa-fg-base text-compact-large-plus block"
             )}
           >
             {path.label}
@@ -53,7 +53,7 @@ const LearningPath: React.FC<LearningPathProps> = ({
           {path.description && (
             <span
               className={clsx(
-                "text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark text-compact-medium mt-0.25 inline-block"
+                "text-medusa-fg-subtle text-compact-medium mt-0.25 inline-block"
               )}
             >
               {path.description}
@@ -69,17 +69,15 @@ const LearningPath: React.FC<LearningPathProps> = ({
           className={clsx(
             "flex items-center p-1 gap-1",
             index !== path.steps.length - 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"
           )}
           key={index}
         >
           <div className={clsx("w-3 flex items-center justify-center")}>
-            <CircleMiniSolid className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
+            <CircleMiniSolid className="text-medusa-fg-muted" />
           </div>
           <span
-            className={clsx(
+            className={clsx("text-medusa-fg-base text-compact-medium-plus")}
-              "text-medusa-fg-base dark:text-medusa-fg-base-dark text-compact-medium-plus"
-            )}
           >
             {step.title}
           </span>

www/apps/docs/src/css/_docusaurus.css

@@ -42,7 +42,7 @@ video {
 }
 
 .theme-code-block {
-  @apply border border-solid border-medusa-code-border dark:border-medusa-code-border-dark;
+  @apply border border-solid border-medusa-code-border;
 }
 
 .markdown p + .card-wrapper {
@@ -54,8 +54,7 @@ video {
 }
 
 .card-highlighted {
- 
+  @apply relative mb-4 bg-medusa-bg-subtle dark:bg-medusa-bg-base hover:bg-medusa-bg-subtle-hover dark:hover:bg-medusa-bg-base-hover;
-  @apply relative mb-4 bg-medusa-bg-subtle dark:bg-medusa-bg-base-dark hover:bg-medusa-bg-subtle-hover dark:hover:bg-medusa-bg-subtle-hover-dark;
 }
 
 .col.toc-wrapper {
@@ -79,12 +78,12 @@ video {
 }
 
 [class*=codeLineNumber] {
-  @apply text-medusa-code-text-subtle dark:text-medusa-code-text-subtle-dark !pl-0;
+  @apply text-medusa-code-text-subtle !pl-0;
 }
 
 .prism-code {
   @apply xs:max-w-[90%] text-code-body [&_*]:text-code-body xs:after:content-[''] xs:after:rounded xs:after:absolute;
-  @apply xs:after:right-0 xs:after:top-0 xs:after:w-[calc(10%+24px)] xs:after:h-full xs:after:bg-code-fade dark:xs:after:bg-code-fade-dark;
+  @apply xs:after:right-0 xs:after:top-0 xs:after:w-[calc(10%+24px)] xs:after:h-full xs:after:bg-code-fade;
 }
 
 .prism-code:not(:hover)::-webkit-scrollbar-thumb,
@@ -166,7 +165,7 @@ details summary {
 }
 
 .theme-code-block {
-  @apply !bg-medusa-code-bg-base dark:!bg-medusa-code-bg-base-dark
+  @apply !bg-medusa-code-bg-base;
 }
 
 .reference-table .code-block-numbering {
@@ -182,7 +181,7 @@ details summary {
 }
 
 .theme-doc-footer {
-  @apply !mt-0 border-0 !border-t border-solid !border-medusa-border-base dark:!border-medusa-border-base-dark;
+  @apply !mt-0 border-0 !border-t border-solid !border-medusa-border-base;
   @apply pt-2;
 }
 
@@ -216,12 +215,12 @@ details > div {
 }
 
 .search-result-match {
-  @apply text-medusa-fg-base dark:text-medusa-fg-base-dark;
+  @apply text-medusa-fg-base;
-  @apply bg-medusa-bg-highlight dark:bg-medusa-bg-highlight-dark py-0.25 px-0;
+  @apply bg-medusa-bg-highlight py-0.25 px-0;
 }
 
 .navbar {
-  @apply z-[399] p-0 border-0 border-b border-solid border-medusa-border-base dark:border-medusa-border-base-dark;
+  @apply z-[399] p-0 border-0 border-b border-solid border-medusa-border-base;
 }
 
 html:not(.plugin-redoc) .navbar:not(.navbar-sidebar--show) {
@@ -257,7 +256,7 @@ h3 {
 }
 
 h1, h2, h3, h4, h5, h6 {
-  @apply text-medusa-fg-base dark:text-medusa-fg-base-dark;
+  @apply text-medusa-fg-base;
 }
 
 .markdown > h1:first-child,
@@ -279,7 +278,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 *::selection {
-  @apply bg-medusa-bg-highlight dark:bg-medusa-bg-highlight-dark;
+  @apply bg-medusa-bg-highlight;
 }
 
 .prism-code *::selection, .code-header::selection {

www/apps/docs/src/css/_variables.css

@@ -11,14 +11,14 @@
   --font-roboto-mono: "Roboto Mono";
   
   /* Colors */
-  --ifm-color-primary: theme(colors.medusa.fg.base.DEFAULT);
+  --ifm-color-primary: theme(colors.medusa.fg.base);
   --ifm-background-color: theme(colors.medusa.bg.base.DEFAULT);
   --ifm-background-surface-color: theme(colors.medusa.bg.subtle.DEFAULT);
-  --ifm-color-content: theme(colors.medusa.fg.subtle.DEFAULT) !important;
+  --ifm-color-content: theme(colors.medusa.fg.subtle) !important;
   --ifm-color-content-secondary: var(--ifm-color-content);
-  --ifm-base-border-color: theme(colors.medusa.border.base.DEFAULT);
+  --ifm-base-border-color: theme(colors.medusa.border.base);
-  --ifm-strong-border-color: theme(colors.medusa.border.strong.DEFAULT);
+  --ifm-strong-border-color: theme(colors.medusa.border.strong);
-  --ifm-hr-background-color: theme(colors.medusa.border.base.DEFAULT);
+  --ifm-hr-background-color: theme(colors.medusa.border.base);
 
   /* Fonts */
   --ifm-code-font-size: theme(fontSize.code-label);
@@ -44,21 +44,21 @@
 
   /* Links */
   --ifm-link-color: theme(colors.medusa.fg.interactive.DEFAULT);
-  --ifm-link-hover-color: theme(colors.medusa.fg.interactive.hover.DEFAULT);
+  --ifm-link-hover-color: theme(colors.medusa.fg.interactive.hover);
   --ifm-link-decoration: none;
   --ifm-link-hover-decoration: none;
 
   /* Sidebar */
   --ifm-menu-link-padding-vertical: 6px;
   --ifm-menu-link-padding-horizontal: theme(margin.1);
-  --ifm-menu-color: theme(colors.medusa.fg.subtle.DEFAULT);
+  --ifm-menu-color: theme(colors.medusa.fg.subtle);
-  --ifm-menu-color-active: theme(colors.medusa.fg.base.DEFAULT);
+  --ifm-menu-color-active: theme(colors.medusa.fg.base);
-  --ifm-menu-color-background-hover: theme(colors.medusa.bg.base.hover.DEFAULT);
+  --ifm-menu-color-background-hover: theme(colors.medusa.bg.base.hover);
-  --ifm-menu-color-background-active: theme(colors.medusa.bg.base.pressed.DEFAULT);
+  --ifm-menu-color-background-active: theme(colors.medusa.bg.base.pressed);
 
   /* Toc */
-  --ifm-toc-border-color: theme(colors.medusa.border.base.DEFAULT);
+  --ifm-toc-border-color: theme(colors.medusa.border.base);
-  --ifm-toc-link-color: theme(colors.medusa.fg.subtle.DEFAULT);
+  --ifm-toc-link-color: theme(colors.medusa.fg.subtle);
   --ifm-toc-padding-horizontal: theme(padding.1);
 
   /* Navbar */
@@ -69,8 +69,8 @@
   --ifm-navbar-item-padding-vertical: 6px;
   --ifm-navbar-item-padding-horizontal: theme(padding[1]);
   --ifm-navbar-height: theme(height.navbar);
-  --ifm-navbar-link-hover-color: theme(colors.medusa.fg.base.DEFAULT);
+  --ifm-navbar-link-hover-color: theme(colors.medusa.fg.base);
-  --ifm-navbar-link-color: theme(colors.medusa.fg.subtle.DEFAULT);
+  --ifm-navbar-link-color: theme(colors.medusa.fg.subtle);
 
   /* Inline Code */
   --ifm-code-border-radius: theme(borderRadius.DEFAULT);
@@ -90,34 +90,16 @@
   --rt-color-white: var(--ifm-color-content) !important;
 
   /* Footer */
-  --ifm-footer-color: theme(colors.medusa.fg.muted.DEFAULT);
+  --ifm-footer-color: theme(colors.medusa.fg.muted);
   --ifm-footer-background-color: transparent;
   --ifm-footer-padding-horizontal: 0;
   --ifm-footer-link-color: var(--ifm-color-content);
 
-  /* Search */
-  --docsearch-searchbox-background: theme(colors.medusa.bg.subtle.DEFAULT) !important;
-  --docsearch-searchbox-focus-background: theme(colors.medusa.bg.subtle.hover.DEFAULT) !important;
-  --docsearch-searchbox-shadow: none !important;
-  --docsearch-modal-height: 472px !important;
-  --docsearch-modal-background: theme(colors.medusa.bg.base.DEFAULT) !important;
-  --docsearch-modal-shadow: theme(boxShadow.modal) !important;
-  --docsearch-container-background: theme(colors.medusa.bg.overlay.DEFAULT) !important;
-  --docsearch-key-gradient: theme(colors.medusa.tag.neutral.bg.DEFAULT) !important;
-  --docsearch-muted-color: theme(colors.medusa.fg.subtle.DEFAULT) !important;
-  --docsearch-spacing: 12px theme(spacing[1.5]) !important;
-  --docsearch-highlight-color: theme(colors.medusa.fg.muted.DEFAULT) !important;
-  --docsearch-text-color: var(--ifm-color-primary) !important;
-  --docsearch-hit-background: var(--docsearch-modal-background) !important;
-  --docsearch-hit-height: auto !important;
-  --docsearch-hit-active-color: var(--docsearch-text-color) !important;
-  --docsearch-footer-height: 40px !important;
-
   /* Announcement Bar */
   --docusaurus-announcement-bar-height: auto !important;
 
   /* Tables */
-  --ifm-table-border-color: theme(colors.medusa.border.base.DEFAULT);
+  --ifm-table-border-color: theme(colors.medusa.border.base);
   --ifm-table-head-background: var(--ifm-background-surface-color);
   --ifm-table-head-color: var(--ifm-color-primary);
   --ifm-table-head-font-weight: theme(fontSize.medium-plus[1].fontWeight);
@@ -126,57 +108,15 @@
 
 html[data-theme="dark"] {
   /* Colors */
-  --ifm-background-color: theme(colors.medusa.bg.subtle.dark);
+  --ifm-background-color: theme(colors.medusa.bg.subtle.DEFAULT);
-  --ifm-background-surface-color: theme(colors.medusa.bg.base.dark);
+  --ifm-background-surface-color: theme(colors.medusa.bg.base.DEFAULT);
-  --ifm-hr-background-color: theme(colors.medusa.border.base.dark);
-  --ifm-color-primary: theme(colors.medusa.fg.base.dark);
-  --ifm-color-content: theme(colors.medusa.fg.subtle.dark) !important;
-  --ifm-base-border-color: theme(colors.medusa.border.base.dark);
-  --ifm-strong-border-color: theme(colors.medusa.border.strong.dark);
-
-  /* Links */
-  --ifm-link-color: theme(colors.medusa.fg.interactive.DEFAULT);
-  --ifm-link-hover-color: theme(colors.medusa.fg.interactive.hover.DEFAULT);
 
   /* Sidebar */
-  --ifm-menu-color: theme(colors.medusa.fg.subtle.dark);
+  --ifm-menu-color-background-hover: theme(colors.medusa.bg.subtle.hover);
-  --ifm-menu-color-active: theme(colors.medusa.fg.base.dark);
+  --ifm-menu-color-background-active: theme(colors.medusa.bg.subtle.pressed);
-  --ifm-menu-color-background-hover: theme(colors.medusa.bg.subtle.hover.dark);
-  --ifm-menu-color-background-active: theme(colors.medusa.bg.subtle.pressed.dark);
-
-  /* Toc */
-  --ifm-toc-border-color: theme(colors.medusa.border.base.dark);
-  --ifm-toc-link-color: theme(colors.medusa.fg.subtle.dark);
 
   /* Navbar */
   --ifm-navbar-shadow: none;
-  --ifm-navbar-link-hover-color: theme(colors.medusa.fg.base.dark);
-  --ifm-navbar-link-color: theme(colors.medusa.fg.subtle.dark);
-
-  /* Inline Code */
-  --ifm-code-background: theme(colors.medusa.tag.neutral.bg.dark) !important;
-
-  /* Code Blocks */
-  --ifm-pre-background: theme(colors.medusa.code.bg.base.dark);
-
-  /* Tooltip */
-  --rt-color-dark: theme(colors.medusa.bg.base.dark) !important;
-
-  /* Footer */
-  --ifm-footer-color: theme(colors.medusa.fg.muted.dark);
-
-  /* Search */
-  --docsearch-searchbox-background: theme(colors.medusa.bg.subtle.dark) !important;
-  --docsearch-searchbox-focus-background: theme(colors.medusa.bg.subtle.hover.dark) !important;
-  --docsearch-modal-background: theme(colors.medusa.bg.base.dark) !important;
-  --docsearch-modal-shadow: theme(boxShadow.modal-dark) !important;
-  --docsearch-container-background: theme(colors.medusa.bg.overlay.dark) !important;
-  --docsearch-key-gradient: theme(colors.medusa.tag.neutral.bg.dark) !important;
-  --docsearch-muted-color: theme(colors.medusa.fg.subtle.dark) !important;
-  --docsearch-highlight-color: theme(colors.medusa.fg.muted.dark) !important;
-
-  /* Tables */
-  --ifm-table-border-color: theme(colors.medusa.border.base.dark);
 }
 
 @media screen and (min-width: 1441px) {
@@ -202,7 +142,3 @@ html[data-theme="dark"] {
 .alert {
   --ifm-code-background: theme(colors.medusa.tag.neutral.bg.DEFAULT) !important;
 }
-
-html[data-theme="dark"] .alert {
-  --ifm-code-background: theme(colors.medusa.tag.neutral.bg.dark) !important;
-}

www/apps/docs/src/css/components/sidebar.css

@@ -49,12 +49,12 @@
 
 .menu__list-item .menu__list:not(.theme-doc-sidebar-menu) [class*=theme-doc-sidebar-item-]::before,
 .menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-category:first-child .menu__list-item-collapsible::before {
-  @apply bg-medusa-border-base dark:bg-medusa-border-base-dark;
+  @apply bg-medusa-border-base;
 }
 
 .theme-doc-sidebar-item-category-level-2 > .menu__list-item-collapsible .menu__link--active::before,
 .menu__list:not(.theme-doc-sidebar-menu) > .theme-doc-sidebar-item-link.theme-doc-sidebar-item-link-level-2 > .menu__link--active::before {
-  @apply bg-medusa-fg-interactive dark:bg-medusa-fg-interactive-dark !z-[2] !top-[6px];
+  @apply bg-medusa-fg-interactive !z-[2] !top-[6px];
 }
 
 .theme-doc-sidebar-item-category-level-2:only-child > .menu__list-item-collapsible .menu__link--active::before,
@@ -113,7 +113,7 @@
 }
 
 .menu__list-item-collapsible .menu__link--sublist:hover {
-  @apply !bg-medusa-bg-base-hover dark:!bg-medusa-bg-subtle-hover-dark;
+  @apply !bg-medusa-bg-base-hover dark:!bg-medusa-bg-subtle-hover;
 }
 
 .menu__list:not(.theme-doc-sidebar-menu) > .theme-doc-sidebar-item-link:last-child > .menu__link--active::before {
@@ -143,7 +143,7 @@
 
 /** General sidebar styles **/
 .theme-doc-sidebar-container {
-  @apply z-[398] border-0 border-r border-solid border-medusa-border-base dark:border-medusa-border-base-dark;
+  @apply z-[398] border-0 border-r border-solid border-medusa-border-base;
 }
 
 /** Mobile Sidebar **/
@@ -158,10 +158,10 @@
 /** Redocly sidebar **/
 
 .redocusaurus .menu-content > div > ul > li > ul label:not([type=tag]):not(.active) {
-  @apply text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark;
+  @apply text-medusa-fg-subtle;
-  @apply hover:text-medusa-fg-base dark:hover:text-medusa-fg-base-dark;
+  @apply hover:text-medusa-fg-base;
 }
 
 .redocusaurus .menu-content > div > ul > li > ul label:not([type=tag]).active {
-  @apply text-medusa-fg-base dark:text-medusa-fg-base-dark;
+  @apply text-medusa-fg-base;
 }

www/apps/docs/src/css/components/toc.css

@@ -8,7 +8,7 @@
   @apply before:bg-no-repeat before:bg-[length:14px_10px] before:bg-[center_left];
   @apply before:pl-[22px] before:content-['On_this_page'] before:pb-0 text-compact-small-plus;
   @apply after:content-[''] after:absolute after:left-0 after:top-2.5;
-  @apply after:h-full after:w-[1px] after:bg-medusa-border-base dark:after:bg-medusa-border-base-dark;
+  @apply after:h-full after:w-[1px] after:bg-medusa-border-base;
 }
 
 .theme-doc-toc-desktop .table-of-contents .table-of-contents__link {
@@ -25,22 +25,22 @@
 
 .theme-doc-toc-desktop .table-of-contents__link {
   @apply relative text-compact-x-small-plus;
-  @apply hover:text-medusa-fg-base dark:hover:text-medusa-fg-base-dark;
+  @apply hover:text-medusa-fg-base;
 }
 
 .theme-doc-toc-desktop .table-of-contents__link:hover code {
-  @apply text-medusa-fg-base dark:text-medusa-fg-base-dark;
+  @apply text-medusa-fg-base;
 }
 
 .theme-doc-toc-desktop .table-of-contents__link--active {
-  @apply text-medusa-fg-base dark:text-medusa-fg-base-dark;
+  @apply text-medusa-fg-base;
   @apply after:content-[''] after:absolute after:left-0 after:top-0;
-  @apply after:h-full after:w-[1px] after:bg-medusa-fg-base dark:after:bg-medusa-fg-base-dark;
+  @apply after:h-full after:w-[1px] after:bg-medusa-fg-base;
   @apply z-[1];
 }
 
 .theme-doc-toc-desktop .table-of-contents__link--active code {
-  @apply text-medusa-fg-base dark:text-medusa-fg-base-dark;
+  @apply text-medusa-fg-base;
 }
 
 .theme-doc-toc-desktop .table-of-contents li {

www/apps/docs/src/css/components/tooltip.css

@@ -1,5 +1,5 @@
 .react-tooltip {
-  @apply !border !border-solid !border-medusa-border-base dark:!border-medusa-border-base-dark;
+  @apply !border !border-solid !border-medusa-border-base;
   @apply !rounded !text-compact-x-small-plus !shadow-tooltip dark:!shadow-tooltip-dark;
   @apply !py-0.4 !px-1 lg:block hidden;
 }

www/apps/docs/src/css/custom.css

@@ -20,7 +20,7 @@
   
   .sidebar-title .menu__link,
   .sidebar-title span {
-    @apply !text-compact-medium-plus text-medusa-fg-base dark:text-medusa-fg-base-dark;
+    @apply !text-compact-medium-plus text-medusa-fg-base;
   }
   
   .sidebar-title .menu__link--active,
@@ -37,7 +37,7 @@
   }
   
   .sidebar-group-headline > .menu__list-item-collapsible > .menu__link {
-    @apply text-medusa-fg-base dark:text-medusa-fg-base-dark !p-0;
+    @apply text-medusa-fg-base !p-0;
   }
   
   .sidebar-group-headline > .menu__list-item-collapsible > .menu__link:not([href]) {
@@ -55,12 +55,12 @@
   }
 
   .sidebar-group-divider {
-    @apply pb-[6px] uppercase text-medusa-fg-muted dark:text-medusa-fg-muted-dark text-compact-x-small-plus;
+    @apply pb-[6px] uppercase text-medusa-fg-muted text-compact-x-small-plus;
     @apply first:pt-[6px] [&:not(:first-child)]:!pt-1;
   }
   
   .sidebar-divider-line {
-    @apply h-[1px] w-full bg-medusa-border-base dark:bg-medusa-border-base-dark my-1 mx-0;
+    @apply h-[1px] w-full bg-medusa-border-base my-1 mx-0;
   }
 
   .sidebar-back-link {
@@ -69,11 +69,11 @@
 
   .sidebar-back-link,
   .sidebar-title {
-    @apply lg:sticky lg:bg-medusa-bg-base dark:lg:bg-medusa-bg-subtle-dark lg:z-[100];
+    @apply lg:sticky lg:bg-medusa-bg-base dark:lg:bg-medusa-bg-subtle lg:z-[100];
   }
 
   .sidebar-back-link .menu__link {
-    @apply !p-0 hover:!bg-transparent hover:text-medusa-fg-base dark:hover:text-medusa-fg-base-dark;
+    @apply !p-0 hover:!bg-transparent hover:text-medusa-fg-base;
   }
 
   .sidebar-back-link .menu__link,
@@ -86,7 +86,7 @@
   }
 
   .sidebar-soon-link {
-    @apply pointer-events-none [&_*]:text-medusa-fg-disabled dark:[&_*]:text-medusa-fg-disabled-dark;
+    @apply pointer-events-none [&_*]:text-medusa-fg-disabled;
   }
 
 
@@ -95,69 +95,31 @@
   }
 
   .search-page-input {
-    @apply rounded border border-solid border-medusa-border-base dark:border-medusa-border-base-dark;
+    @apply rounded border border-solid border-medusa-border-base;
-    @apply font-base text-medium p-0.75 w-full bg-medusa-bg-subtle dark:bg-medusa-bg-subtle-dark;
+    @apply font-base text-medium p-0.75 w-full bg-medusa-bg-subtle;
-    @apply text-medusa-fg-base dark:text-medusa-fg-base-dark mb-1;
+    @apply text-medusa-fg-base mb-1;
     @apply transition-[border] duration-200 ease-ease;
-    @apply focus:border-medusa-border-base dark:focus:border-medusa-border-base-dark;
+    @apply focus:border-medusa-border-base;
     @apply focus:outline-none !shadow-none;
   }
 
   .code-header {
-    @apply py-0.75 px-1 bg-medusa-code-bg-header dark:bg-medusa-code-bg-header-dark text-medusa-code-text-subtle dark:text-medusa-code-text-subtle;
+    @apply py-0.75 px-1 bg-medusa-code-bg-header text-medusa-code-text-subtle;
     @apply flex justify-between items-center;
     @apply rounded-tl rounded-tr rounded-br-none rounded-bl-none border-b-0;
-    @apply border border-solid border-medusa-code-border dark:border-medusa-code-border-dark border-b-0;
+    @apply border border-solid border-medusa-code-border border-b-0;
   }
 
   .no-scrollbar::-webkit-scrollbar {
     @apply hidden;
   }
 
-  .animate__fastest {
-    --animate-duration: 0.2s;
-  }
-
-  /* .btn-secondary {
-    @apply inline-flex flex-row justify-center items-center;
-    @apply py-[5px] px-0.75 rounded-sm cursor-pointer;
-    @apply bg-button-neutral bg-medusa-button-neutral dark:bg-button-neutral-dark dark:bg-medusa-button-neutral-dark;
-    @apply hover:bg-medusa-button-neutral-hover hover:bg-no-image dark:hover:bg-medusa-button-neutral-hover-dark hover:no-underline;
-    @apply active:bg-medusa-button-neutral-pressed active:bg-no-image dark:active:bg-medusa-button-neutral-pressed-dark;
-    @apply focus:bg-medusa-button-neutral-pressed focus:bg-no-image dark:focus:bg-medusa-button-neutral-pressed-dark;
-    @apply disabled:!bg-no-image disabled:bg-medusa-bg-disabled dark:disabled:bg-medusa-bg-disabled-dark;
-    @apply disabled:cursor-not-allowed;
-    @apply border border-solid border-medusa-border-base dark:border-medusa-border-base-dark;
-    @apply text-compact-small-plus text-medusa-fg-base dark:text-medusa-fg-base-dark;
-    @apply hover:text-medusa-fg-base hover:dark:text-medusa-fg-base-dark;
-    @apply shadow-button-neutral focus:shadow-button-neutral-focused active:shadow-button-neutral-focused transition-shadow;
-    @apply dark:shadow-button-neutral dark:focus:shadow-button-neutral-focused dark:active:shadow-button-neutral-focused;
-    @apply select-none;
-  }
-
-  .btn-primary {
-    @apply inline-flex flex-row justify-center items-center;
-    @apply py-[5px] px-0.75 rounded-sm cursor-pointer;
-    @apply bg-button-inverted bg-medusa-button-inverted dark:bg-button-inverted-dark dark:bg-medusa-button-inverted-dark;
-    @apply hover:bg-medusa-button-inverted-hover hover:bg-no-image dark:hover:bg-medusa-button-inverted-hover-dark hover:no-underline;
-    @apply active:bg-medusa-button-inverted-pressed active:bg-no-image dark:active:bg-medusa-button-inverted-pressed-dark;
-    @apply focus:bg-medusa-button-inverted-pressed focus:bg-no-image dark:focus:bg-medusa-button-inverted-pressed-dark;
-    @apply shadow-button-colored active:shadow-button-colored-focused focus:shadow-button-colored-focused transition-shadow;
-    @apply dark:shadow-button-colored-dark dark:active:shadow-button-colored-focused-dark dark:focus:shadow-button-colored-focused-dark;
-    @apply disabled:!bg-no-image disabled:bg-medusa-button-disabled dark:disabled:bg-medusa-button-disabled-dark;
-    @apply disabled:cursor-not-allowed disabled:border-medusa-border-base dark:disabled:border-medusa-border-base-dark;
-    @apply text-compact-small-plus text-medusa-fg-on-inverted dark:text-medusa-fg-on-inverted-dark;
-    @apply disabled:text-medusa-fg-disabled dark:disabled:text-medusa-fg-disabled-dark;
-    @apply border border-medusa-border-loud dark:border-medusa-border-loud-dark;
-    @apply select-none;
-  } */
-
   .navbar-action-icon-item {
-    @apply lg:bg-button-neutral lg:bg-medusa-button-neutral lg:dark:bg-button-neutral-dark lg:dark:bg-medusa-button-neutral-dark;
+    @apply lg:bg-button-neutral lg:bg-medusa-button-neutral lg:dark:bg-button-neutral-dark;
-    @apply lg:hover:bg-medusa-button-neutral-hover lg:hover:bg-no-image lg:dark:hover:bg-medusa-button-neutral-hover-dark lg:hover:no-underline;
+    @apply lg:hover:bg-medusa-button-neutral-hover lg:hover:bg-no-image lg:hover:no-underline;
-    @apply lg:active:bg-medusa-button-neutral-pressed lg:active:bg-no-image lg:dark:active:bg-medusa-button-neutral-pressed-dark;
+    @apply lg:active:bg-medusa-button-neutral-pressed lg:active:bg-no-image;
-    @apply lg:focus:bg-medusa-button-neutral-pressed lg:focus:bg-no-image lg:dark:focus:bg-medusa-button-neutral-pressed-dark;
+    @apply lg:focus:bg-medusa-button-neutral-pressed lg:focus:bg-no-image;
-    @apply lg:lg:border lg:border-solid lg:border-medusa-border-base lg:dark:border-medusa-border-base-dark rounded;
+    @apply lg:lg:border lg:border-solid lg:border-medusa-border-base rounded;
     @apply w-2 h-2 flex justify-center items-center cursor-pointer;
   }
 

www/apps/docs/src/theme/Admonition/index.tsx

@@ -10,19 +10,19 @@ import {
 
 function NoteIcon() {
   return (
-    <InformationCircleSolid className="inline-block mr-0.125 text-medusa-fg-interactive-dark" />
+    <InformationCircleSolid className="inline-block mr-0.125 text-medusa-tag-blue-icon" />
   )
 }
 
 function TipIcon() {
   return (
-    <LightBulbSolid className="inline-block mr-0.125 text-medusa-tag-orange-icon-dark" />
+    <LightBulbSolid className="inline-block mr-0.125 text-medusa-tag-orange-icon" />
   )
 }
 
 function DangerIcon() {
   return (
-    <ExclamationCircleSolid className="inline-block mr-0.125 text-medusa-fg-error dark:text-medusa-fg-error-dark" />
+    <ExclamationCircleSolid className="inline-block mr-0.125 text-medusa-fg-error" />
   )
 }
 
@@ -165,9 +165,9 @@ export default function Admonition(props: Props): JSX.Element {
   return (
     <div
       className={clsx(
-        "p-1 border border-solid border-medusa-border-base dark:border-medusa-border-base-dark rounded",
+        "p-1 border border-solid border-medusa-border-base rounded",
-        "bg-medusa-bg-subtle dark:bg-medusa-bg-base-dark shadow-none",
+        "bg-medusa-bg-subtle dark:bg-medusa-bg-base shadow-none",
-        "[&_a]:no-underline [&_a]:text-medusa-fg-interactive dark:[&_a]:text-medusa-fg-interactive-dark hover:[&_a]:text-medusa-fg-interactive-hover dark:hover:[&_a]:text-medusa-fg-interactive-hover-dark",
+        "[&_a]:no-underline [&_a]:text-medusa-fg-interactive hover:[&_a]:text-medusa-fg-interactive-hover ",
         "mb-2 alert"
       )}
     >
@@ -175,7 +175,7 @@ export default function Admonition(props: Props): JSX.Element {
         <span className={clsx("inline-block h-1.5 w-1.5 mr-1")}>{icon}</span>
         <div
           className={clsx(
-            "text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
+            "text-medusa-fg-subtle",
             "text-medium flex-1 [&>*:last-child]:mb-0",
             "[&>p>code]:px-0.5 [&>p>code]:text-code-label"
           )}

www/apps/docs/src/theme/AnnouncementBar/CloseButton/index.tsx

@@ -26,7 +26,7 @@ export default function AnnouncementBarCloseButton(
         width={20}
         height={20}
         strokeWidth={1.5}
-        className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark"
+        className="!text-medusa-fg-muted"
       />
     </button>
   )

www/apps/docs/src/theme/AnnouncementBar/Content/index.tsx

@@ -11,14 +11,14 @@ export default function AnnouncementBarContent(
   return (
     <div
       className={clsx(
-        "text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
+        "text-medusa-fg-subtle",
         "text-compact-x-small-plus",
         props.className
       )}
     >
       <div
         {...props}
-        className={clsx("text-medusa-fg-base dark:text-medusa-fg-base-dark")}
+        className={clsx("text-medusa-fg-base")}
         // Developer provided the HTML, so assume it's safe.
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{ __html: content }}

www/apps/docs/src/theme/AnnouncementBar/index.tsx

@@ -17,10 +17,10 @@ export default function AnnouncementBar(): JSX.Element | null {
   return (
     <div
       className={clsx(
-        "relative flex items-center h-auto bg-medusa-bg-subtle dark:bg-medusa-bg-base-dark p-0.75",
+        "relative flex items-center h-auto bg-medusa-bg-subtle dark:bg-medusa-bg-base p-0.75",
         "rounded mx-1.5 mb-1 shadow-card-rest dark:shadow-card-rest-dark",
         "transition-all duration-200 ease-ease",
-        "hover:bg-medusa-bg-subtle-hover dark:hover:bg-medusa-bg-base-hover-dark",
+        "hover:bg-medusa-bg-subtle-hover dark:hover:bg-medusa-bg-base-hover",
         "print:hidden"
       )}
     >
@@ -28,10 +28,10 @@ export default function AnnouncementBar(): JSX.Element | null {
         <div
           className={clsx(
             "p-[6px] flex justify-center items-center",
-            "rounded-xs bg-medusa-bg-component dark:bg-medusa-bg-component-dark"
+            "rounded-xs bg-medusa-bg-component"
           )}
         >
-          <BellAlertSolid className="text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark" />
+          <BellAlertSolid className="text-medusa-fg-subtle" />
         </div>
       </Bordered>
       <AnnouncementBarContent className={clsx("flex-1")} />

www/apps/docs/src/theme/CodeBlock/Content/String.tsx

@@ -115,12 +115,12 @@ export default function CodeBlockString({
                       target="_blank"
                       className={clsx(
                         "bg-transparent border-none p-0.25 cursor-pointer rounded",
-                        "hover:bg-medusa-code-bg-base dark:hover:bg-medusa-code-bg-base-dark [&:not(:first-child)]:ml-0.5",
+                        "hover:bg-medusa-code-bg-base [&:not(:first-child)]:ml-0.5",
                         "inline-flex justify-center items-center invisible xs:visible"
                       )}
                       rel="noreferrer"
                     >
-                      <ExclamationCircleSolid className="text-medusa-code-icon dark:text-medusa-code-icon-dark" />
+                      <ExclamationCircleSolid className="text-medusa-code-icon" />
                     </a>
                   </Tooltip>
                 )}
@@ -131,7 +131,7 @@ export default function CodeBlockString({
                     )}
                     text={code}
                   >
-                    <SquareTwoStackSolid className="text-medusa-code-icon dark:text-medusa-code-icon-dark" />
+                    <SquareTwoStackSolid className="text-medusa-code-icon" />
                   </CopyButton>
                 )}
               </div>

www/apps/docs/src/theme/DocCard/index.tsx

@@ -36,7 +36,7 @@ function CardContainer({
         href={href}
         className={clsx(
           "card",
-          "bg-medusa-bg-subtle dark:bg-medusa-bg-base-dark",
+          "bg-medusa-bg-subtle dark:bg-medusa-bg-base",
           "rounded shadow-card-rest dark:shadow-card-rest-dark",
           "transition-all duration-200 ease-ease",
           "flex p-1 !pb-1.5 h-full",
@@ -66,7 +66,7 @@ function CardLayout({
       className={clsx(
         containerClassName,
         !isSoon &&
-          "hover:bg-medusa-bg-subtle-hover dark:hover:bg-medusa-bg-base-hover-dark",
+          "hover:bg-medusa-bg-subtle-hover dark:hover:bg-medusa-bg-base-hover",
         isSoon && "pointer-events-none",
         isHighlighted &&
           "md:before:content-[''] md:before:absolute md:before:top-0 before:right-0 md:before:w-1/2 md:before:h-full md:before:bg-no-repeat md:before:bg-cover md:before:bg-card-highlighted dark:md:before:bg-card-highlighted-dark",
@@ -81,11 +81,10 @@ function CardLayout({
       <div className={clsx("w-[calc(100%-20px)] [&>*:last-child]:mb-0")}>
         <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",
             "mb-0.25 block",
             "transition-all duration-200 ease-ease",
-            isSoon &&
+            isSoon && "group-hover:text-medusa-fg-disabled"
-              "group-hover:text-medusa-fg-disabled dark:group-hover:text-medusa-fg-disabled-dark"
           )}
           title={title}
         >
@@ -94,10 +93,9 @@ function CardLayout({
         {description && (
           <p
             className={clsx(
-              "text-medium text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
+              "text-medium text-medusa-fg-subtle",
               "transition-all duration-200 ease-ease",
-              isSoon &&
+              isSoon && "group-hover:text-medusa-fg-disabled",
-                "group-hover:text-medusa-fg-disabled dark:group-hover:text-medusa-fg-disabled-dark",
               isHighlighted && "md:w-1/2"
             )}
             title={description}
@@ -108,10 +106,9 @@ function CardLayout({
         {html && (
           <p
             className={clsx(
-              "text-compact-medium text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
+              "text-compact-medium text-medusa-fg-subtle",
               "transition-all duration-200 ease-ease",
-              isSoon &&
+              isSoon && "group-hover:text-medusa-fg-disabled",
-                "group-hover:text-medusa-fg-disabled dark:group-hover:text-medusa-fg-disabled-dark",
               isHighlighted && "md:w-1/2"
             )}
             dangerouslySetInnerHTML={{

www/apps/docs/src/theme/DocItem/Footer/index.tsx

@@ -19,7 +19,7 @@ export default function FooterWrapper(props: Props): JSX.Element {
         <div className="mt-[42px]">
           <Feedback
             {...footerFeedback}
-            className="border-0 border-t border-solid border-medusa-border-base dark:border-medusa-border-base-dark"
+            className="border-0 border-t border-solid border-medusa-border-base"
           />
           <Footer {...props} />
         </div>

www/apps/docs/src/theme/DocPage/Layout/Sidebar/index.tsx

@@ -36,10 +36,10 @@ export default function DocPageLayoutSidebar({
         "min-[997px]:block min-[997px]:w-sidebar min-[997px]:transition-[left] min-[997px]:ease-ease min-[997px]:duration-200 min-[997px]:left-0 hidden",
         !hiddenSidebarContainer && "clip",
         hiddenSidebarContainer &&
-          "min-[997px]:fixed min-[997px]:left-[-100%] min-[997px]:rounded min-[997px]:border-0 min-[997px]:border-medusa-border-strong min-[997px]:dark:border-medusa-border-strong-dark",
+          "min-[997px]:fixed min-[997px]:left-[-100%] min-[997px]:rounded min-[997px]:border-0 min-[997px]:border-medusa-border-strong",
         hiddenSidebarContainer &&
           sidebarContext?.floatingSidebar &&
-          "min-[997px]:!left-0.5 min-[997px]:top-[65px] min-[997px]:z-20 min-[997px]:bg-docs-bg min-[997px]:dark:bg-docs-bg-dark min-[997px]:shadow-flyout min-[997px]:dark:shadow-flyout-dark"
+          "min-[997px]:!left-0.5 min-[997px]:top-[65px] min-[997px]:z-20 min-[997px]:bg-docs-bg min-[997px]:shadow-flyout min-[997px]:dark:shadow-flyout-dark"
       )}
       onTransitionEnd={(e) => {
         if (

www/apps/docs/src/theme/Footer/Layout/index.tsx

@@ -17,7 +17,7 @@ export default function FooterLayout({
     <footer
       className={clsx(
         "footer",
-        "border-t border-x-0 border-b-0 border-solid border-medusa-border-base dark:border-medusa-border-base-dark",
+        "border-t border-x-0 border-b-0 border-solid border-medusa-border-base",
         "pt-[108px] pb-4 mt-2",
         {
           "footer--dark": style === "dark",

www/apps/docs/src/theme/MDXComponents/A.tsx

@@ -29,7 +29,7 @@ const MDXA = (props: Props) => {
     <Tooltip
       tooltipChildren={
         <span className="flex flex-col gap-0.25 max-w-[200px]">
-          <span className="text-compact-small-plus text-medusa-fg-base dark:text-medusa-fg-base-dark">
+          <span className="text-compact-small-plus text-medusa-fg-base">
             {glossary.title}
           </span>
           <span className="text-compact-small">{glossary.content}</span>

www/apps/docs/src/theme/Navbar/ColorModeToggle/index.tsx

@@ -17,9 +17,7 @@ export default function NavbarColorModeToggle({
   return (
     <ColorModeToggle
       className={clsx("text-ui-fg-muted", className)}
-      buttonClassName={clsx(
+      buttonClassName={clsx("hover:!bg-medusa-button-neutral-hover")}
-        "hover:!bg-medusa-button-neutral-hover dark:hover:!bg-medusa-button-neutral-hover-dark"
-      )}
       value={colorMode}
       onChange={setColorMode}
     />

www/apps/docs/src/theme/Navbar/Content/index.tsx

@@ -97,27 +97,27 @@ export default function NavbarContent(): JSX.Element {
                   type: "button",
                   html: !sidebarContext?.hiddenSidebarContainer
                     ? `<span class="text-compact-x-small-plus">Close sidebar <kbd class="${clsx(
-                        "bg-medusa-tag-neutral-bg dark:bg-medusa-tag-neutral-bg-dark",
+                        "bg-medusa-tag-neutral-bg",
-                        "border border-solid rounded border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark",
+                        "border border-solid rounded border-medusa-tag-neutral-border",
-                        "text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark font-base text-compact-x-small-plus",
+                        "text-medusa-fg-subtle font-base text-compact-x-small-plus",
                         "inline-flex w-[22px] h-[22px] !p-0 justify-center items-center shadow-none ml-0.5"
                       )}">${isApple ? "⌘" : "Ctrl"}</kbd>
                       <kbd class="${clsx(
-                        "bg-medusa-tag-neutral-bg dark:bg-medusa-tag-neutral-bg-dark",
+                        "bg-medusa-tag-neutral-bg",
-                        "border border-solid rounded border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark",
+                        "border border-solid rounded border-medusa-tag-neutral-border",
-                        "text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark font-base text-compact-x-small-plus",
+                        "text-medusa-fg-subtle font-base text-compact-x-small-plus",
                         "inline-flex w-[22px] h-[22px] !p-0 justify-center items-center shadow-none"
                       )}">I</kbd></span>`
                     : `<span class="text-compact-x-small-plus">Lock sidebar open <kbd class="${clsx(
-                        "bg-medusa-tag-neutral-bg dark:bg-medusa-tag-neutral-bg-dark",
+                        "bg-medusa-tag-neutral-bg",
-                        "border border-solid rounded border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark",
+                        "border border-solid rounded border-medusa-tag-neutral-border",
-                        "text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark font-base text-compact-x-small-plus",
+                        "text-medusa-fg-subtle font-base text-compact-x-small-plus",
                         "inline-flex w-[22px] h-[22px] !p-0 justify-center items-center shadow-none ml-0.5"
                       )}">${isApple ? "⌘" : "Ctrl"}</kbd>
                     <kbd class="${clsx(
-                      "bg-medusa-tag-neutral-bg dark:bg-medusa-tag-neutral-bg-dark",
+                      "bg-medusa-tag-neutral-bg",
-                      "border border-solid rounded border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark",
+                      "border border-solid rounded border-medusa-tag-neutral-border",
-                      "text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark font-base text-compact-x-small-plus",
+                      "text-medusa-fg-subtle font-base text-compact-x-small-plus",
                       "inline-flex w-[22px] h-[22px] !p-0 justify-center items-center shadow-none"
                     )}">I</kbd></span>`,
                   events: {
@@ -142,9 +142,9 @@ export default function NavbarContent(): JSX.Element {
                     },
                   },
                   Icon: !sidebarContext?.hiddenSidebarContainer ? (
-                    <Sidebar className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
+                    <Sidebar className="text-medusa-fg-muted" />
                   ) : (
-                    <ChevronDoubleLeftMiniSolid className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
+                    <ChevronDoubleLeftMiniSolid className="text-medusa-fg-muted" />
                   ),
                   buttonType: "icon",
                 },

www/apps/docs/src/theme/Navbar/MobileSidebar/Header/index.tsx

@@ -32,7 +32,7 @@ export default function NavbarMobileSidebarHeader(): JSX.Element {
       <NavbarLogo />
       <NavbarColorModeToggle
         className={clsx(
-          "[&>button]:hover:bg-medusa-button-neutral-hover dark:[&>button]:hover:bg-medusa-button-neutral-hover-dark",
+          "[&>button]:hover:bg-medusa-button-neutral-hover",
           "[&>button]:!rounded"
         )}
       />

www/apps/docs/src/theme/Navbar/MobileSidebar/Toggle/index.tsx

@@ -18,12 +18,8 @@ export default function MobileSidebarToggle(): JSX.Element {
       className="navbar__toggle !block lg:!hidden clean-btn"
       type="button"
     >
-      {!shown && (
+      {!shown && <Sidebar className="text-medusa-fg-muted" />}
-        <Sidebar className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
+      {shown && <XMark className="text-medusa-fg-muted" />}
-      )}
-      {shown && (
-        <XMark className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
-      )}
     </button>
   )
 }

www/apps/docs/src/theme/Tabs/index.tsx

@@ -106,7 +106,7 @@ function TabList({
         {isCodeTabs && (
           <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:transition-all xs:duration-200 xs:ease-ease xs:top-0 xs:z-[1] xs:rounded-full"
+              "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-0 xs:z-[1] xs:rounded-full"
             )}
             ref={codeTabSelectorRef}
           ></span>
@@ -140,18 +140,18 @@ function TabList({
                 isCodeTabs && "z-[2] flex justify-center items-center",
                 isCodeTabs &&
                   selectedValue !== value &&
-                  "text-medusa-code-text-subtle dark:text-medusa-code-text-subtle-dark hover:!bg-medusa-code-bg-base dark:hover:!bg-medusa-code-bg-base-dark",
+                  "text-medusa-code-text-subtle hover:!bg-medusa-code-bg-base",
                 isCodeTabs &&
                   selectedValue === value &&
-                  "text-medusa-code-text-base dark:text-medusa-code-text-base-dark border border-solid border-medusa-code-border dark:border-medusa-code-border-dark bg-medusa-code-bg-base dark:bg-medusa-code-bg-base-dark xs:!border-none xs:!bg-transparent",
+                  "text-medusa-code-text-base border border-solid border-medusa-code-border bg-medusa-code-bg-base xs:!border-none xs:!bg-transparent",
                 !isCodeTabs &&
                   "border-0 border-b-[3px] rounded inline-flex p-1 transition-[background-color] duration-200 ease-ease",
                 !isCodeTabs &&
                   selectedValue === value &&
-                  "border-solid border-medusa-fg-base dark:border-medusa-fg-base-dark rounded-b-none",
+                  "border-solid border-medusa-fg-base rounded-b-none",
                 !isCodeTabs &&
                   selectedValue !== value &&
-                  "text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
+                  "text-medusa-fg-subtle",
                 (!isCodeTabs || !attributes?.badge) && "px-0.75",
                 isCodeTabs &&
                   attributes?.badge &&
@@ -166,7 +166,7 @@ function TabList({
       {isCodeTabs && (
         <span
           className={clsx(
-            "text-compact-small-plus text-medusa-code-text-subtle dark:text-medusa-code-text-subtle-dark hidden xs:block"
+            "text-compact-small-plus text-medusa-code-text-subtle hidden xs:block"
           )}
         >
           {codeTitle}
@@ -246,7 +246,7 @@ export default function Tabs(props: TabsProps): JSX.Element {
         props.wrapperClassName,
         isCodeTabs && "code-tabs",
         !isCodeTabs &&
-          "bg-docs-bg-surface dark:bg-docs-bg-surface-dark p-1 border border-solid border-medusa-border-base dark:border-medusa-border-base-dark rounded"
+          "bg-docs-bg-surface p-1 border border-solid border-medusa-border-base rounded"
       )}
     >
       <TabsComponent

www/apps/ui/src/app/(content)/[[...slug]]/page.tsx

@@ -61,13 +61,8 @@ export default async function DocPage({ params }: DocPageProps) {
 
   return (
     <div className="flex flex-col">
-      <h1 className="h1-docs text-medusa-fg-base dark:text-medusa-fg-base-dark mb-2">
+      <h1 className="h1-docs text-medusa-fg-base mb-2">{doc.title}</h1>
-        {doc.title}
+      <Text className="text-medusa-fg-subtle mb-6" size="large">
-      </h1>
-      <Text
-        className="text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark mb-6"
-        size="large"
-      >
         {doc.description}
       </Text>
       <div>

www/apps/ui/src/app/layout.tsx

@@ -31,7 +31,7 @@ export default function RootLayout({
     <html lang="en" className="h-full w-full">
       <head />
       <body
-        className={` bg-docs-bg dark:bg-docs-bg-dark h-screen w-full ${inter.variable} ${robotoMono.variable}`}
+        className={`bg-docs-bg h-screen w-full ${inter.variable} ${robotoMono.variable}`}
       >
         <Providers>
           <div className="w-full">

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-component 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-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(
+      className={clsx("text-medusa-fg-subtle", props.className)}
-        "text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
-        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 (
+  return <BorderedIcon icon={basePathUrl("/images/figma.png")} />
-    <BorderedIcon
-      IconComponent={Figma}
-      iconWrapperClassName={
-        "bg-medusa-button-inverted bg-button-inverted !p-[6px]"
-      }
-    />
-  )
 }

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

www/apps/ui/src/styles/globals.css

@@ -7,11 +7,11 @@
     -webkit-font-smoothing: antialiased;
   }
   .html {
-    @apply text-medusa-fg-base dark:text-medusa-fg-base-dark;
+    @apply text-medusa-fg-base;
   }
 
   *::selection {
-    @apply bg-medusa-bg-highlight dark:bg-medusa-bg-highlight-dark;
+    @apply bg-medusa-bg-highlight;
   }
 
   pre *::selection {

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",
+          "bg-medusa-tag-purple-bg text-medusa-tag-purple-text border-medusa-tag-purple-border",
-        variant === "purple-dark" &&
-          "bg-medusa-tag-purple-bg-dark text-medusa-tag-purple-text-dark border-medusa-tag-purple-border-dark",
         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",
+          "bg-medusa-tag-orange-bg text-medusa-tag-orange-text border-medusa-tag-orange-border",
-        variant === "orange-dark" &&
-          "bg-medusa-tag-orange-bg-dark text-medusa-tag-orange-text-dark border-medusa-tag-orange-border-dark",
         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",
+          "bg-medusa-tag-green-bg text-medusa-tag-green-text border-medusa-tag-green-border",
-        variant === "green-dark" &&
-          "bg-medusa-tag-green-bg-dark text-medusa-tag-green-text-dark border-medusa-tag-green-border-dark",
         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",
+          "bg-medusa-tag-blue-bg text-medusa-tag-blue-text border-medusa-tag-blue-border",
-        variant === "blue-dark" &&
-          "bg-medusa-tag-blue-bg-dark text-medusa-tag-blue-text-dark border-medusa-tag-blue-border-dark",
         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",
+      "bg-button-inverted bg-medusa-button-inverted dark:bg-button-inverted-dark",
-      "hover:bg-medusa-button-inverted-hover hover:bg-no-image dark:hover:bg-medusa-button-inverted-hover-dark hover:no-underline",
+      "hover:bg-medusa-button-inverted-hover hover:bg-no-image hover:no-underline",
-      "active:bg-medusa-button-inverted-pressed active:bg-no-image dark:active:bg-medusa-button-inverted-pressed-dark",
+      "active:bg-medusa-button-inverted-pressed active:bg-no-image",
-      "focus:bg-medusa-button-inverted-pressed focus:bg-no-image dark:focus:bg-medusa-button-inverted-pressed-dark",
+      "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:!bg-no-image disabled:bg-medusa-bg-disabled",
-      "disabled:cursor-not-allowed disabled:border-medusa-border-base dark:disabled:border-medusa-border-base-dark",
+      "disabled:cursor-not-allowed disabled:border-medusa-border-base",
-      "text-compact-small-plus text-medusa-fg-on-inverted dark:text-medusa-fg-on-inverted-dark",
+      "text-compact-small-plus text-medusa-fg-on-inverted",
-      "[&_a]:text-medusa-fg-on-inverted dark:[&_a]:text-medusa-fg-on-inverted-dark",
+      "[&_a]:text-medusa-fg-on-inverted",
-      "disabled:text-medusa-fg-disabled dark:disabled:text-medusa-fg-disabled-dark",
+      "disabled:text-medusa-fg-disabled",
-      "[&_a]:disabled:text-medusa-fg-disabled dark:[&_a]:disabled:text-medusa-fg-disabled-dark",
+      "[&_a]:disabled:text-medusa-fg-disabled",
-      "border border-medusa-border-loud dark:border-medusa-border-loud-dark",
+      "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",
+      "bg-button-neutral bg-medusa-button-neutral dark:bg-button-neutral-dark",
-      "hover:bg-medusa-button-neutral-hover hover:bg-no-image dark:hover:bg-medusa-button-neutral-hover-dark hover:no-underline",
+      "hover:bg-medusa-button-neutral-hover hover:bg-no-image hover:no-underline",
-      "active:bg-medusa-button-neutral-pressed active:bg-no-image dark:active:bg-medusa-button-neutral-pressed-dark",
+      "active:bg-medusa-button-neutral-pressed active:bg-no-image",
-      "focus:bg-medusa-button-neutral-pressed focus:bg-no-image dark:focus:bg-medusa-button-neutral-pressed-dark",
+      "focus:bg-medusa-button-neutral-pressed focus:bg-no-image",
-      "disabled:!bg-no-image disabled:bg-medusa-bg-disabled dark:disabled:bg-medusa-bg-disabled-dark",
+      "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",
+      "border border-solid border-medusa-border-base",
-      "text-compact-small-plus text-medusa-fg-base dark:text-medusa-fg-base-dark",
+      "text-compact-small-plus text-medusa-fg-base",
-      "[&_a]:text-medusa-fg-base dark:[&_a]:text-medusa-fg-base-dark",
+      "[&_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",
+        "bg-medusa-code-bg-base relative mb-docs_1 rounded-docs_DEFAULT",
-        "border-medusa-code-border dark:border-medusa-code-border-dark w-full max-w-full border",
+        "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 xs:dark:after:bg-code-fade-dark",
+        "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",
+                            "text-medusa-code-text-subtle 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"
+                            "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",
+          "bg-medusa-code-bg-header 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",
+          "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",
+                  "text-medusa-code-text-subtle border-transparent",
-                  "hover:bg-medusa-code-bg-base dark:hover:bg-medusa-code-bg-base-dark",
+                  "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 &&
+        !expandable && "border-medusa-border-base border-y",
-          "border-medusa-border-base dark:border-medusa-border-base-dark 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",
+        "bg-transparent border-0 p-0 inline text-medusa-fg-subtle group"
-        "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"
       )}
     >
       <code
         {...props}
         className={clsx(
-          "border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark border",
+          "border-medusa-tag-neutral-border border",
-          "text-medusa-tag-neutral-text dark:text-medusa-tag-neutral-text-dark",
+          "text-medusa-tag-neutral-text",
-          "bg-medusa-tag-neutral-bg dark:bg-medusa-tag-neutral-bg-dark font-monospace text-code-label rounded-docs_sm py-0 px-[6px]",
+          "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",
+        "bg-medusa-bg-field shadow-button-secondary dark:shadow-button-secondary-dark",
-        "border-medusa-border-base dark:border-medusa-border-base-dark rounded-docs_sm border border-solid",
+        "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",
+        "hover:bg-medusa-bg-field-hover",
-        "focus:border-medusa-border-interactive dark:focus:border-medusa-border-interactive-dark",
+        "focus:border-medusa-border-interactive",
-        "active:border-medusa-border-interactive dark:active:border-medusa-border-interactive-dark",
+        "active:border-medusa-border-interactive",
-        "disabled:bg-medusa-bg-disabled dark:disabled:bg-medusa-bg-disabled-dark",
+        "disabled:bg-medusa-bg-disabled",
-        "disabled:border-medusa-border-base dark:disabled:border-medusa-border-base-dark",
+        "disabled:border-medusa-border-base",
-        "placeholder:text-medusa-fg-muted dark:placeholder:text-medusa-fg-muted-dark",
+        "placeholder:text-medusa-fg-muted",
-        "disabled:placeholder:text-medusa-fg-disabled dark:disabled:placeholder:text-medusa-fg-disabled-dark",
+        "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",
+        "border-medusa-tag-neutral-border border",
-        "bg-medusa-tag-neutral-bg dark:bg-medusa-tag-neutral-bg-dark",
+        "bg-medusa-tag-neutral-bg",
-        "text-medusa-tag-neutral-text dark:text-medusa-tag-neutral-text-dark",
+        "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
+      <span className={clsx("text-medusa-fg-base text-h2")}>{title}</span>
-        className={clsx(
-          "text-medusa-fg-base dark:text-medusa-fg-base-dark 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",
+          "bg-medusa-bg-base rounded-docs_sm",
-          "border-medusa-border-base dark:border-medusa-border-base-dark border border-solid",
+          "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" && (
+      {colorMode === "light" && <Sun className="text-medusa-fg-muted" />}
-        <Sun className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
+      {colorMode === "dark" && <Moon className="text-medusa-fg-muted" />}
-      )}
-      {colorMode === "dark" && (
-        <Moon className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
-      )}
     </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-base",
-        !isActive && "!text-medusa-fg-subtle dark:!text-medusa-fg-subtle-dark",
+        !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 && (
+      {!mobileSidebarOpen && <Sidebar className="text-medusa-fg-muted" />}
-        <Sidebar className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
+      {mobileSidebarOpen && <XMark className="text-medusa-fg-muted" />}
-      )}
-      {mobileSidebarOpen && (
-        <XMark className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
-      )}
     </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(
+          className={clsx("text-compact-medium-plus", "text-medusa-fg-base")}
-            "text-compact-medium-plus",
-            "text-medusa-fg-base dark:text-medusa-fg-base-dark"
-          )}
         >
           {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
+              <span className={clsx("text-medium text-medusa-fg-subtle")}>
-                className={clsx(
-                  "text-medium text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark"
-                )}
-              >
                 {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]:bg-medusa-bg-highlight",
-        "[&_mark]:text-medusa-fg-interactive dark:[&_mark]:text-medusa-fg-interactive-dark"
+        "[&_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",
+                "hover:bg-medusa-bg-base-hover",
-                "focus:bg-medusa-bg-base-hover dark:focus:bg-medusa-bg-base-hover-dark",
+                "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
+        <div className={clsx("bg-medusa-bg-base flex")}>
-          className={clsx("bg-medusa-bg-base dark:bg-medusa-bg-base-dark 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",
+                "w-full h-full pl-docs_3 text-medusa-fg-base",
-                "placeholder:text-medusa-fg-muted dark:placeholder:text-medusa-fg-muted-dark",
+                "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",
+          "border-medusa-border-base border-t",
-          "bg-medusa-bg-base dark:bg-medusa-bg-base-dark"
+          "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(
+              className={clsx("text-medusa-fg-subtle", "text-compact-x-small")}
-                "text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
-                "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(
+              className={clsx("text-medusa-fg-subtle", "text-compact-x-small")}
-                "text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
-                "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",
+                "hover:bg-medusa-bg-base-hover",
-                "focus:bg-medusa-bg-base-hover dark:focus:bg-medusa-bg-base-hover-dark",
+                "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(
+                className={clsx("text-medusa-fg-base", "text-compact-small")}
-                  "text-medusa-fg-base dark:text-medusa-fg-base-dark",
-                  "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(
+            className={clsx("text-medusa-fg-subtle", "text-compact-x-small")}
-              "text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
-              "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",
+          "border-medusa-border-base rounded-sm border border-solid",
-          "hover:bg-medusa-bg-subtle-hover dark:hover:bg-medusa-bg-subtle-hover-dark",
+          "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",
+          "text-medusa-fg-subtle",
-          !open && "bg-medusa-bg-subtle dark:bg-medusa-bg-subtle-dark",
+          !open && "bg-medusa-bg-subtle",
-          open &&
+          open && "bg-medusa-bg-subtle-hover",
-            "bg-medusa-bg-subtle-hover dark:bg-medusa-bg-subtle-hover-dark",
           className
         )}
         ref={ref}
@@ -97,12 +93,7 @@ export const SelectBadge = ({
           }
         }}
       >
-        <span
+        <span className={clsx("text-medusa-fg-subtle", "text-compact-x-small")}>
-          className={clsx(
-            "text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
-            "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 && (
+            {multiple && <CheckMini className="text-medusa-fg-base" />}
-              <CheckMini className="text-medusa-fg-base dark:text-medusa-fg-base-dark" />
+            {!multiple && <EllipseMiniSolid className="text-medusa-fg-base" />}
-            )}
-            {!multiple && (
-              <EllipseMiniSolid className="text-medusa-fg-base dark:text-medusa-fg-base-dark" />
-            )}
           </>
         )}
         {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",
+        "border-medusa-border-base rounded-docs_sm border border-solid",
-        "bg-medusa-bg-field dark:bg-medusa-bg-field-dark shadow-button-neutral dark:shadow-button-neutral-dark",
+        "bg-medusa-bg-field shadow-button-neutral dark:shadow-button-neutral-dark",
-        "hover:bg-medusa-bg-field-hover dark:hover:bg-medusa-bg-field-hover-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",
+        "text-medusa-fg-base text-compact-medium",
-        "disabled:bg-medusa-bg-disabled dark:disabled:bg-medusa-bg-disabled-dark",
+        "disabled:bg-medusa-bg-disabled",
-        "disabled:text-medusa-fg-disabled dark:disabled:text-medusa-fg-disabled-dark",
+        "disabled:text-medusa-fg-disabled",
         "flex items-center gap-docs_0.5",
-        !hasSelectedValues &&
+        !hasSelectedValues && "placeholder:text-medusa-fg-muted",
-          "placeholder:text-medusa-fg-muted dark:placeholder:text-medusa-fg-muted-dark",
+        hasSelectedValues && "placeholder:text-medusa-fg-base",
-        hasSelectedValues &&
-          "placeholder:text-medusa-fg-base dark:placeholder:text-medusa-fg-base-dark",
         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 &&
+        !item.children && "text-compact-small-plus text-medusa-fg-subtle",
-          "text-compact-small-plus text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
         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 && [
+          active && ["!text-medusa-fg-base bg-medusa-bg-base-pressed"],
-            "!text-medusa-fg-base bg-medusa-bg-base-pressed",
+        item.path !== undefined && active && "border border-medusa-border-base",
-            "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",
         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",
+        "bg-medusa-bg-field shadow-button-secondary dark:shadow-button-secondary-dark",
-        "border-medusa-border-base dark:border-medusa-border-base-dark rounded-docs_sm border border-solid",
+        "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",
+        "hover:bg-medusa-bg-field-hover",
-        "focus:border-medusa-border-interactive dark:focus:border-medusa-border-interactive-dark",
+        "focus:border-medusa-border-interactive",
-        "active:border-medusa-border-interactive dark:active:border-medusa-border-interactive-dark",
+        "active:border-medusa-border-interactive",
-        "disabled:bg-medusa-bg-disabled dark:disabled:bg-medusa-bg-disabled-dark",
+        "disabled:bg-medusa-bg-disabled",
-        "disabled:border-medusa-border-base dark:disabled:border-medusa-border-base-dark",
+        "disabled:border-medusa-border-base",
-        "placeholder:text-medusa-fg-muted dark:placeholder:text-medusa-fg-muted-dark",
+        "placeholder:text-medusa-fg-muted",
-        "disabled:placeholder:text-medusa-fg-disabled dark:disabled:placeholder:text-medusa-fg-disabled-dark",
+        "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",
+          "!bg-medusa-bg-base",
-          "!text-medusa-fg-subtle dark:!text-medusa-fg-subtle-dark",
+          "!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",
+              DEFAULT: "var(--docs-bg-subtle)",
-              dark: "#18181A",
+              hover: "var(--docs-bg-subtle-hover)",
-              hover: {
+              pressed: "var(--docs-bg-subtle-pressed)",
-                DEFAULT: "#F3F4F6",
-                dark: "#1B1B1F",
-              },
-              pressed: {
-                DEFAULT: "#E5E7EB",
-                dark: "#27282D",
-              },
             },
             base: {
-              DEFAULT: "#FFFFFF",
+              DEFAULT: "var(--docs-bg-base)",
-              dark: "#1B1B1F",
+              hover: "var(--docs-bg-base-hover)",
-              hover: {
+              pressed: "var(--docs-bg-base-pressed)",
-                DEFAULT: "#F9FAFB",
-                dark: "#27282D",
-              },
-              pressed: {
-                DEFAULT: "#F3F4F6",
-                dark: "#2E3035",
-              },
-            },
-            component: {
-              DEFAULT: "#F1F3F5",
-              dark: "#27282D",
             },
+            component: "var(--docs-bg-component)",
             "switch-off": {
-              DEFAULT: "#E5E7EB",
+              DEFAULT: "var(--docs-bg-switch-off)",
-              dark: "#35373C",
+              hover: "var(--docs-bg-switch-off-hover)",
-              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",
             },
+            interactive: "var(--docs-bg-interactive)",
+            overlay: "var(--docs-bg-overlay)",
+            disabled: "var(--docs-bg-disabled)",
             highlight: {
-              DEFAULT: "#EFF6FF",
+              DEFAULT: "var(--docs-bg-highlight)",
-              dark: "#172554",
+              hover: "var(--docs-bg-highlight-hover)",
-              hover: {
-                DEFAULT: "#DBEAFE",
-                dark: "#1E3A8A",
-              },
             },
             field: {
-              DEFAULT: "#F9FAFB",
+              DEFAULT: "var(--docs-bg-field)",
-              dark: "#27282D",
+              hover: "var(--docs-bg-field-hover)",
-              hover: {
-                DEFAULT: "#F3F4F6",
-                dark: "#2E3035",
-              },
             },
           },
           fg: {
-            base: {
+            base: "var(--docs-fg-base)",
-              DEFAULT: "#030712",
+            subtle: "var(--docs-fg-subtle)",
-              dark: "#EDEEF0",
+            muted: "var(--docs-fg-muted)",
-            },
+            disabled: "var(--docs-fg-disabled)",
-            subtle: {
-              DEFAULT: "#4B5563",
-              dark: "#ADB1B8",
-            },
-            muted: {
-              DEFAULT: "#9CA3AF",
-              dark: "#696E77",
-            },
-            disabled: {
-              DEFAULT: "#D1D5DB",
-              dark: "#3C3F44",
-            },
             on: {
-              color: {
+              color: "var(--docs-fg-on-color)",
-                DEFAULT: "#FFFFFF",
+              inverted: "var(--docs-fg-on-inverted)",
-                dark: "#FFFFFF",
-              },
-              inverted: {
-                DEFAULT: "#FFFFFF",
-                dark: "#18181A",
-              },
             },
             interactive: {
-              DEFAULT: "#3B82F6",
+              DEFAULT: "var(--docs-fg-interactive)",
-              dark: "#60A5FA",
+              hover: "var(--docs-fg-interactive-hover)",
-              hover: {
-                DEFAULT: "#2563EB",
-                dark: "#3B82F6",
-              },
-            },
-            error: {
-              DEFAULT: "#E11D48",
-              dark: "#FB7185",
             },
+            error: "var(--docs-fg-error)",
           },
           border: {
-            base: {
+            base: "var(--docs-border-base)",
-              DEFAULT: "#E5E7EB",
+            strong: "var(--docs-border-strong)",
-              dark: "#2E3035",
+            loud: "var(--docs-border-loud)",
-            },
+            interactive: "var(--docs-border-interactive)",
-            strong: {
+            error: "var(--docs-border-error)",
-              DEFAULT: "#D1D5DB",
+            danger: "var(--docs-border-danger)",
-              dark: "#35373C",
+            transparent: "var(--docs-border-transparent)",
-            },
-            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)",
-            },
           },
           button: {
             inverted: {
-              DEFAULT: "#030712",
+              DEFAULT: "var(--docs-button-inverted)",
-              dark: "#EDEEF0",
+              hover: "var(--docs-button-inverted-hover)",
-              hover: {
+              pressed: "var(--docs-button-inverted-pressed)",
-                DEFAULT: "#1F2937",
-                dark: "#FFFFFF",
-              },
-              pressed: {
-                DEFAULT: "#374151",
-                dark: "#EDEEF0",
-              },
             },
             neutral: {
-              DEFAULT: "#FFFFFF",
+              DEFAULT: "var(--docs-button-neutral)",
-              dark: "#27282D",
+              hover: "var(--docs-button-neutral-hover)",
-              hover: {
+              pressed: "var(--docs-button-neutral-pressed)",
-                DEFAULT: "#F9FAFB",
-                dark: "#35373C",
-              },
-              pressed: {
-                DEFAULT: "#F3F4F6",
-                dark: "#3C3F44",
-              },
             },
             danger: {
-              DEFAULT: "#E11D48",
+              DEFAULT: "var(--docs-button-danger)",
-              dark: "#9F1239",
+              hover: "var(--docs-button-danger-hover)",
-              hover: {
+              pressed: "var(--docs-button-danger-pressed)",
-                DEFAULT: "#E11D48",
-                dark: "#BE123C",
-              },
-              pressed: {
-                DEFAULT: "#BE123C",
-                dark: "#E11D48",
-              },
             },
             transparent: {
-              DEFAULT: "rgba(255, 255, 255, 0)",
+              DEFAULT: "var(--docs-button-transparent)",
-              dark: "rgba(0, 0, 0, 0)",
+              hover: "var(--docs-button-transparent-hover)",
-              hover: {
+              pressed: "var(--docs-button-transparent-pressed)",
-                DEFAULT: "#F9FAFB",
-                dark: "#27282D",
-              },
-              pressed: {
-                DEFAULT: "#F3F4F6",
-                dark: "#2E3035",
-              },
-            },
-            disabled: {
-              DEFAULT: "#ECEEF0",
-              dark: "#28282C",
             },
+            disabled: "var(--docs-button-disabled)",
           },
           tag: {
             neutral: {
               bg: {
-                DEFAULT: "#F3F4F6",
+                DEFAULT: "var(--docs-tags-neutral-bg)",
-                dark: "#2E3035",
+                hover: "var(--docs-tags-neutral-bg-hover)",
-                hover: {
-                  DEFAULT: "#E5E7EB",
-                  dark: "#35373C",
-                },
-              },
-              text: {
-                DEFAULT: "#4B5563",
-                dark: "#ADB1B8",
-              },
-              icon: {
-                DEFAULT: "#6B7280",
-                dark: "#7D828A",
-              },
-              border: {
-                DEFAULT: "#E5E7EB",
-                dark: "#3C3F44",
               },
+              text: "var(--docs-tags-neutral-text)",
+              icon: "var(--docs-tags-neutral-icon)",
+              border: "var(--docs-tags-neutral-border)",
             },
             purple: {
               bg: {
-                DEFAULT: "#EDE9FE",
+                DEFAULT: "var(--docs-tags-purple-bg)",
-                dark: "#2E1064",
+                hover: "var(--docs-tags-purple-bg-hover)",
-                hover: {
-                  DEFAULT: "#DDD6FE",
-                  dark: "#4C1D95",
-                },
-              },
-              text: {
-                DEFAULT: "#6D28D9",
-                dark: "#8B5CF6",
-              },
-              icon: {
-                DEFAULT: "#7C3AED",
-                dark: "#6D28D9",
-              },
-              border: {
-                DEFAULT: "#DDD6FE",
-                dark: "#4C1D95",
               },
+              text: "var(--docs-tags-purple-text)",
+              icon: "var(--docs-tags-purple-icon)",
+              border: "var(--docs-tags-purple-border)",
             },
             blue: {
               bg: {
-                DEFAULT: "#DBEAFE",
+                DEFAULT: "var(--docs-tags-blue-bg)",
-                dark: "#172554",
+                hover: "var(--docs-tags-blue-bg-hover)",
-                hover: {
-                  DEFAULT: "#BFDBFE",
-                  dark: "#1E2A8A",
-                },
-              },
-              text: {
-                DEFAULT: "#1D4ED8",
-                dark: "#3B82F6",
-              },
-              icon: {
-                DEFAULT: "#2563EB",
-                dark: "#1D4ED8",
-              },
-              border: {
-                DEFAULT: "#BFDBFE",
-                dark: "#1E3A8A",
               },
+              text: "var(--docs-tags-blue-text)",
+              icon: "var(--docs-tags-blue-icon)",
+              border: "var(--docs-tags-blue-border)",
             },
             green: {
               bg: {
-                DEFAULT: "#D1FAE5",
+                DEFAULT: "var(--docs-tags-green-bg)",
-                dark: "#022C22",
+                hover: "var(--docs-tags-green-bg-hover)",
-                hover: {
-                  DEFAULT: "#A7F3D0",
-                  dark: "#064E3B",
-                },
-              },
-              text: {
-                DEFAULT: "#047857",
-                dark: "#10B981",
-              },
-              icon: {
-                DEFAULT: "#059669",
-                dark: "#047857",
-              },
-              border: {
-                DEFAULT: "#A7F3D0",
-                dark: "#064E3B",
               },
+              text: "var(--docs-tags-green-text)",
+              icon: "var(--docs-tags-green-icon)",
+              border: "var(--docs-tags-green-border)",
             },
             orange: {
               bg: {
-                DEFAULT: "#FEF4C7",
+                DEFAULT: "var(--docs-tags-orange-bg)",
-                dark: "#451A03",
+                hover: "var(--docs-tags-orange-bg-hover)",
-                hover: {
-                  DEFAULT: "#FDE68A",
-                  dark: "#78350F",
-                },
-              },
-              text: {
-                DEFAULT: "#B45309",
-                dark: "#F59E0B",
-              },
-              icon: {
-                DEFAULT: "#D97706",
-                dark: "#B45309",
-              },
-              border: {
-                DEFAULT: "#FDE68A",
-                dark: "#78350F",
               },
+              text: "var(--docs-tags-orange-text)",
+              icon: "var(--docs-tags-orange-icon)",
+              border: "var(--docs-tags-orange-border)",
             },
             red: {
               bg: {
-                DEFAULT: "#FFE4E6",
+                DEFAULT: "var(--docs-tags-red-bg)",
-                dark: "#4C0519",
+                hover: "var(--docs-tags-red-bg-hover)",
-                hover: {
-                  DEFAULT: "#FECDD3",
-                  dark: "#881337",
-                },
-              },
-              text: {
-                DEFAULT: "#BE123C",
-                dark: "#FB7185",
-              },
-              icon: {
-                DEFAULT: "#E11D48",
-                dark: "#F43F5E",
-              },
-              border: {
-                DEFAULT: "#FECDD3",
-                dark: "#881337",
               },
+              text: "var(--docs-tags-red-text)",
+              icon: "var(--docs-tags-red-icon)",
+              border: "var(--docs-tags-red-border)",
             },
           },
           code: {
             text: {
-              base: {
+              base: "var(--docs-code-text-base)",
-                DEFAULT: "#F9FAFB",
+              subtle: "var(--docs-code-text-subtle)",
-                dark: "#EDEEF0",
+              highlight: "var(--docs-code-text-highlight)",
-              },
-              subtle: {
-                DEFAULT: "#9CA3AF",
-                dark: "#696E77",
-              },
-              highlight: "#102A4C",
-            },
-            icon: {
-              DEFAULT: "#6B7280",
-              dark: "#464B50",
             },
+            icon: "var(--docs-code-icon)",
             bg: {
               base: {
-                DEFAULT: "#111827",
+                DEFAULT: "var(--docs-code-bg-base)",
-                dark: "#1B1B1F",
                 // Need this one for color-fade
-                transparent: {
+                transparent: "var(--docs-code-bg-transparent)",
-                  DEFAULT: "#11182700",
-                  dark: "#1B1B1F00",
               },
+              header: "var(--docs-code-bg-header)",
             },
-              header: {
+            border: "var(--docs-code-border)",
-                DEFAULT: "#1F2937",
-                dark: "#18181A",
-              },
-            },
-            border: {
-              DEFAULT: "#374151",
-              dark: "#2E3035",
-            },
           },
         },
         /* docs defaults */
         docs: {
           bg: {
-            DEFAULT: "#FFFFFF",
+            DEFAULT: "var(--docs-bg)",
-            dark: "#18181A",
+            surface: "var(--docs-bg-surface)",
-            surface: {
-              DEFAULT: "#F9FAFB",
-              dark: "#1B1B1F",
-            },
           },
         },
       },
@@ -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,
+}