docs: create docs workspace (#5174)

* docs: migrate ui docs to docs universe * created yarn workspace * added eslint and tsconfig configurations * fix eslint configurations * fixed eslint configurations * shared tailwind configurations * added shared ui package * added more shared components * migrating more components * made details components shared * move InlineCode component * moved InputText * moved Loading component * Moved Modal component * moved Select components * Moved Tooltip component * moved Search components * moved ColorMode provider * Moved Notification components and providers * used icons package * use UI colors in api-reference * moved Navbar component * used Navbar and Search in UI docs * added Feedback to UI docs * general enhancements * fix color mode * added copy colors file from ui-preset * added features and enhancements to UI docs * move Sidebar component and provider * general fixes and preparations for deployment * update docusaurus version * adjusted versions * fix output directory * remove rootDirectory property * fix yarn.lock * moved code component * added vale for all docs MD and MDX * fix tests * fix vale error * fix deployment errors * change ignore commands * add output directory * fix docs test * general fixes * content fixes * fix announcement script * added changeset * fix vale checks * added nofilter option * fix vale error
2023-09-21 20:57:15 +03:00
parent 19c5d5ba36
commit fa7c94b4cc
3209 changed files with 32188 additions and 31018 deletions
--- a/www/apps/docs/src/css/_docusaurus.css
+++ b/www/apps/docs/src/css/_docusaurus.css
@@ -0,0 +1,287 @@
+/** This CSS file includes tailwind styling definitions for classes defined by docusaurus **/
+html,
+body {
+  @apply h-full;
+}
+
+.cards-grid {
+  @apply grid gap-x-1 auto-rows-fr;
+}
+
+.cards-grid.grid-6 {
+  @apply md:grid-cols-2 grid-cols-1;
+}
+
+.cards-grid.grid-4 {
+  @apply lg:grid-cols-3 md:grid-cols-2 grid-cols-1;
+}
+
+h1 + .cards-grid,
+h1 + .card-wrapper,
+h2 + .cards-grid,
+h2 + .card-wrapper,
+h3 + .cards-grid,
+h3 + .card-wrapper {
+  @apply mt-1.5;
+}
+
+.markdown p + img,
+.markdown .alert,
+.markdown .code-wrapper {
+  @apply mb-2;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown p + .code-wrapper,
+.markdown p + .tabs-wrapper,
+.markdown p + .alert,
+.markdown p + section,
+video {
+  @apply mt-2;
+}
+
+.theme-code-block {
+  @apply border border-solid border-medusa-code-border dark:border-medusa-code-border-dark;
+}
+
+.markdown p + .card-wrapper {
+  @apply mt-1.5;
+}
+
+.card + p {
+  @apply mt-2;
+}
+
+.card-highlighted {
+ 
+  @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 {
+  --ifm-col-width: var(--ifm-toc-width);
+}
+
+.markdown-doc-wrapper--fluid {
+  @apply max-w-[inherit];
+}
+
+:global(.docusaurus-mt-lg) {
+  @apply mt-3;
+}
+
+:global(#__docusaurus) {
+  @apply min-h-full flex flex-col;
+}
+
+.code-tabs .theme-code-block {
+  @apply !rounded-t-none !rounded-b
+}
+
+[class*=codeLineNumber] {
+  @apply text-medusa-code-text-subtle dark:text-medusa-code-text-subtle-dark !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;
+}
+
+.prism-code:not(:hover)::-webkit-scrollbar-thumb,
+.prism-code:not(:hover)::-webkit-scrollbar-track {
+  @apply xs:invisible;
+}
+
+.prism-code:hover::-webkit-scrollbar-thumb,
+.prism-code:hover::-webkit-scrollbar-track {
+  @apply xs:opacity-100
+}
+
+.prism-code {
+  @apply bg-transparent break-words !outline-none;
+}
+
+.prism-code div {
+  @apply !outline-none focus:!outline-none active:!outline-none;
+}
+
+.code-tabs {
+  @apply relative;
+}
+
+.sidebar-desktop nav {
+  --ifm-scrollbar-track-background-color: transparent !important;
+  --ifm-scrollbar-thumb-background-color: transparent !important;
+  --ifm-scrollbar-thumb-hover-background-color: transparent !important;
+}
+
+.main-wrapper {
+  @apply max-w-xl mx-auto xl:min-w-xl w-full;
+}
+
+.theme-doc-breadcrumbs {
+  @apply hidden;
+}
+
+article {
+  @apply max-w-[960px];
+}
+
+.padding-top--md {
+  @apply !pt-3;
+}
+
+.margin-bottom--lg {
+  @apply !mb-1;
+}
+
+details summary {
+  @apply cursor-pointer;
+}
+
+.reference-table {
+  @apply !table table-fixed w-full;
+}
+
+.reference-table p {
+  --ifm-paragraph-margin-bottom: 0;
+}
+
+.reference-table.table-col-4 th,
+.reference-table.table-col-4 td {
+  @apply [&:nth-child(1)]:!w-1/5 [&:nth-child(2)]:!w-1/5 [&:nth-child(3)]:!w-2/5 [&:nth-child(4)]:!w-1/5;
+}
+
+.reference-table th:nth-child(1),
+.reference-table td:nth-child(1) {
+  @apply [&:nth-child(1)]:!w-[30%] [&:nth-child(2)]:!w-[30%] [&:nth-child(3)]:!w-2/5;
+}
+
+.reference-table .tooltip-container code {
+  @apply whitespace-nowrap;
+}
+
+.reference-table .theme-code-block span {
+  @apply !max-w-full !break-words !whitespace-break-spaces;
+}
+
+.theme-code-block {
+  @apply !bg-medusa-code-bg-base dark:!bg-medusa-code-bg-base-dark
+}
+
+.reference-table .code-block-numbering {
+  @apply !block;
+}
+
+.container {
+  @apply !pt-3 !max-w-full;
+}
+
+.pagination-nav {
+  @apply hidden;
+}
+
+.theme-doc-footer {
+  @apply !mt-0 border-0 !border-t border-solid !border-medusa-border-base dark:!border-medusa-border-base-dark;
+  @apply pt-2;
+}
+
+.theme-last-updated {
+  @apply font-normal not-italic text-compact-small-plus;
+}
+
+.theme-last-updated,
+.theme-last-updated b {
+  @apply !font-normal;
+}
+
+.medium-zoom-overlay {
+  @apply z-[400];
+}
+
+.medium-zoom-image--opened {
+  @apply z-[400];
+}
+
+details > div {
+  --docusaurus-details-decoration-color: transparent !important;
+}
+
+.row--justify-end {
+  @apply justify-end;
+}
+
+.docs-page-container {
+  @apply !px-0;
+}
+
+.search-result-match {
+  @apply text-medusa-fg-base dark:text-medusa-fg-base-dark;
+  @apply bg-medusa-bg-highlight dark:bg-medusa-bg-highlight-dark 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;
+}
+
+html:not(.plugin-redoc) .navbar:not(.navbar-sidebar--show) {
+  @apply supports-[backdrop-filter]:bg-transparent supports-[backdrop-filter]:backdrop-blur-md;
+}
+
+.navbar__link {
+  @apply text-compact-small-plus;
+}
+
+.navbar__brand {
+  @apply mr-0;
+}
+
+.navbar__logo {
+  @apply w-[82px] h-[20px] lg:w-[20px] lg:h-[20px] flex justify-center items-center !mr-0;
+}
+
+.navbar__item {
+  @apply p-0 lg:!block !hidden;
+}
+
+h1 {
+  @apply !text-h1;
+}
+
+h2 {
+  @apply !text-h2;
+}
+
+h3 {
+  @apply !text-h3;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  @apply text-medusa-fg-base dark:text-medusa-fg-base-dark;
+}
+
+.markdown > h1:first-child,
+.markdown > h2,
+.markdown > h3 {
+  @apply mb-0.5;
+}
+
+.markdown > p {
+  @apply mb-0.5;
+}
+
+.markdown > p img {
+  @apply mt-0.5;
+}
+
+.markdown {
+  @apply mb-0;
+}
+
+*::selection {
+  @apply bg-medusa-bg-highlight dark:bg-medusa-bg-highlight-dark;
+}
+
+.prism-code *::selection, .code-header::selection {
+  @apply bg-medusa-code-text-highlight;
+}
--- a/www/apps/docs/src/css/_variables.css
+++ b/www/apps/docs/src/css/_variables.css
@@ -0,0 +1,208 @@
+/* You can override the default Infima variables here. */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
+
+:root {
+  /* Base Styles */
+  --ifm-hr-margin-vertical: theme(margin.2);
+  --ifm-leading: theme(lineHeight.DEFAULT);
+  --ifm-list-left-padding: theme(spacing.1);
+  --font-inter: "Inter";
+  --font-roboto-mono: "Roboto Mono";
+  
+  /* Colors */
+  --ifm-color-primary: theme(colors.medusa.fg.base.DEFAULT);
+  --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-secondary: var(--ifm-color-content);
+  --ifm-base-border-color: theme(colors.medusa.border.base.DEFAULT);
+  --ifm-strong-border-color: theme(colors.medusa.border.strong.DEFAULT);
+  --ifm-hr-background-color: theme(colors.medusa.border.base.DEFAULT);
+
+  /* Fonts */
+  --ifm-code-font-size: theme(fontSize.code-label);
+  --ifm-font-family-base: theme(fontFamily.base);
+  --ifm-font-family-monospace: theme(fontFamily.monospace);
+  --ifm-font-size-base: theme(fontSize.medium[0]);
+  --ifm-line-height-base: theme(fontSize.medium[1].lineHeight);
+  --ifm-font-weight-base: theme(fontSize.medium[1].fontWeight);
+
+  /* Headings */
+  /** Due to how docusaurus styles headings, the styles are applied on h1, h2, and h3 again in _docusaurus **/
+  --ifm-color-headers: var(--ifm-color-primary);
+  --ifm-h1-font-size: theme(fontSize.h1[0]);
+  --ifm-h1-line-height: theme(fontSize.h1[1].lineHeight);
+  --ifm-h1-weight: theme(fontSize.h1[1].fontWeight);
+  --ifm-h2-font-size: theme(fontSize.h2[0]);
+  --ifm-h2-line-height: theme(fontSize.h2[1].lineHeight);
+  --ifm-h2-weight: theme(fontSize.h2[1].fontWeight);
+  --ifm-h3-font-size: theme(fontSize.h3[0]);
+  --ifm-h3-line-height: theme(fontSize.h3[1].lineHeight);
+  --ifm-h3-weight: theme(fontSize.h3[1].fontWeight);
+  --ifm-h4-font-size: var(--ifm-font-size-base);
+
+  /* Links */
+  --ifm-link-color: theme(colors.medusa.fg.interactive.DEFAULT);
+  --ifm-link-hover-color: theme(colors.medusa.fg.interactive.hover.DEFAULT);
+  --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-active: theme(colors.medusa.fg.base.DEFAULT);
+  --ifm-menu-color-background-hover: theme(colors.medusa.bg.base.hover.DEFAULT);
+  --ifm-menu-color-background-active: theme(colors.medusa.bg.base.pressed.DEFAULT);
+
+  /* Toc */
+  --ifm-toc-border-color: theme(colors.medusa.border.base.DEFAULT);
+  --ifm-toc-link-color: theme(colors.medusa.fg.subtle.DEFAULT);
+  --ifm-toc-padding-horizontal: theme(padding.1);
+
+  /* Navbar */
+  --ifm-navbar-background-color: var(--ifm-background-color);
+  --ifm-navbar-shadow: none;
+  --ifm-navbar-padding-vertical: 12px;
+  --ifm-navbar-padding-horizontal: theme(padding[1.5]);
+  --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-color: theme(colors.medusa.fg.subtle.DEFAULT);
+
+  /* Inline Code */
+  --ifm-code-border-radius: theme(borderRadius.DEFAULT);
+  --ifm-code-padding-horizontal: theme(padding[0.5]);
+  --ifm-code-background: theme(colors.medusa.tag.neutral.bg.DEFAULT) !important;
+
+  /* Code Blocks */
+  --ifm-pre-background: theme(colors.medusa.code.bg.base.DEFAULT);
+  --ifm-pre-padding: theme(padding.1);
+
+  /* Tabs */
+  --ifm-tabs-color-active: var(--ifm-color-primary);
+
+  /* Tooltip */
+  --rt-opacity: theme(opacity.100) !important;
+  --rt-color-dark: theme(colors.medusa.bg.base.DEFAULT) !important;
+  --rt-color-white: var(--ifm-color-content) !important;
+
+  /* Footer */
+  --ifm-footer-color: theme(colors.medusa.fg.muted.DEFAULT);
+  --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-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);
+  --ifm-table-stripe-background: var(--ifm-background-surface-color) !important;
+}
+
+html[data-theme="dark"] {
+  /* Colors */
+  --ifm-background-color: theme(colors.medusa.bg.subtle.dark);
+  --ifm-background-surface-color: theme(colors.medusa.bg.base.dark);
+  --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-active: theme(colors.medusa.fg.base.dark);
+  --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) {
+  :root {
+    /** Table of Content **/
+    --ifm-toc-width: calc(2 / 12 * 100%);
+  }
+}
+
+@media screen and (max-width: 1440px) {
+  :root {
+    /** Table of Content **/
+    --ifm-toc-width: calc(3 / 12 * 100%);
+  }
+}
+
+@media (min-width: 997px) {
+  :root {
+    --docusaurus-announcement-bar-height: 30px;
+  }
+}
+
+.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;
+}
--- a/www/apps/docs/src/css/components/sidebar.css
+++ b/www/apps/docs/src/css/components/sidebar.css
@@ -0,0 +1,167 @@
+.theme-doc-sidebar-container {
+  --animate-duration: 0.2s;
+}
+
+.sidebar-desktop nav {
+  --ifm-scrollbar-track-background-color: transparent !important;
+  --ifm-scrollbar-thumb-background-color: transparent !important;
+  --ifm-scrollbar-thumb-hover-background-color: transparent !important;
+}
+
+.menu__list-item:not(:first-child):not(.sidebar-title) {
+  margin-top: 0 !important;
+}
+
+.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) [class*=theme-doc-sidebar-item-],
+.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) [class*=theme-doc-sidebar-item-] .menu__link--active {
+  @apply relative;
+}
+
+.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) [class*=theme-doc-sidebar-item-]:not(.theme-doc-sidebar-item-link-category)::before,
+.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-category .menu__list-item-collapsible .menu__link--active::before,
+.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) > .theme-doc-sidebar-item-link > .menu__link--active::before,
+.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-category > .menu__list-item-collapsible::before {
+  @apply content-[''] h-full w-[1px] absolute left-0.5 top-0 z-[1];
+}
+
+.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) [class*=theme-doc-sidebar-item-] .menu__link--active::before {
+  @apply !h-[20px];
+}
+
+.theme-doc-sidebar-item-category-level-1 > .menu__list > .menu__list-item:first-child::before,
+.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-category:first-child .menu__list-item-collapsible::before,
+.theme-doc-sidebar-item-category-level-1 > .menu__list > .menu__list-item:last-child::before {
+  @apply !h-[28px];
+}
+
+.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-link:first-child::before,
+.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-category:first-child .menu__list-item-collapsible::before {
+  @apply !bottom-0 !top-[unset];
+}
+
+.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-category:first-child .menu__list-item-collapsible {
+  @apply !pb-[6px];
+}
+
+.menu__list-item .menu__list:not(.theme-doc-sidebar-menu) .theme-doc-sidebar-item-category:first-child .menu__list-item-collapsible .menu__link {
+  @apply !pb-0;
+}
+
+.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;
+}
+
+.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];
+}
+
+.theme-doc-sidebar-item-category-level-2:only-child > .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:only-child > .menu__link--active::before,
+.menu__list:not(.theme-doc-sidebar-menu) > .theme-doc-sidebar-item-link.theme-doc-sidebar-item-link-level-2:first-child > .menu__link--active::before {
+  @apply !top-0.5;
+}
+
+.theme-doc-sidebar-item-link-level-1:not(.sidebar-title):not(.homepage-sidebar-item):not(.sidebar-back-link) {
+  @apply mb-1;
+}
+
+.theme-doc-sidebar-item-link-level-1:not(.sidebar-title):not(.homepage-sidebar-item):not(.sidebar-back-link) .menu__link {
+  @apply !pl-0;
+}
+
+.theme-doc-sidebar-item-category-level-1.sidebar-group-headline {
+  @apply mb-1;
+}
+
+[class*="level-2"]:is([class*="theme-doc-sidebar-item"]) .menu__link,
+[class*="level-2"]:is([class*="theme-doc-sidebar-item"]).sidebar-group-divider,
+[class*="level-3"]:is([class*="theme-doc-sidebar-item"]) .menu__link,
+[class*="level-3"]:is([class*="theme-doc-sidebar-item"]).sidebar-group-divider,
+[class*="level-4"]:is([class*="theme-doc-sidebar-item"]) .menu__link,
+[class*="level-4"]:is([class*="theme-doc-sidebar-item"]).sidebar-group-divider {
+  @apply py-[6px];
+}
+
+[class*="level-2"]:is([class*="theme-doc-sidebar-item"]) .menu__link,
+[class*="level-2"]:is([class*="theme-doc-sidebar-item"]).sidebar-group-divider {
+  @apply pl-2;
+}
+
+[class*="level-3"]:is([class*="theme-doc-sidebar-item"]) .menu__link,
+[class*="level-3"]:is([class*="theme-doc-sidebar-item"]).sidebar-group-divider {
+  @apply pl-3;
+}
+
+[class*="level-4"]:is([class*="theme-doc-sidebar-item"]) .menu__link,
+[class*="level-4"]:is([class*="theme-doc-sidebar-item"]).sidebar-group-divider {
+  @apply pl-4;
+}
+
+.homepage-sidebar-item:is([class*="level-1"]):is([class*="theme-doc-sidebar-item"]) > .menu__link,
+.homepage-sidebar-item:is([class*="level-1"]):is([class*="theme-doc-sidebar-item"]) > .menu__list-item-collapsible > .menu__link {
+  @apply !pl-0.5;
+}
+
+.menu__list-item-collapsible {
+  @apply !rounded;
+}
+
+.menu__list-item-collapsible--active {
+  @apply !bg-transparent;
+}
+
+.menu__list-item-collapsible .menu__link--sublist:hover {
+  @apply !bg-medusa-bg-base-hover dark:!bg-medusa-bg-subtle-hover-dark;
+}
+
+.menu__list:not(.theme-doc-sidebar-menu) > .theme-doc-sidebar-item-link:last-child > .menu__link--active::before {
+  @apply !top-0.25;
+}
+
+.menu__link--sublist-caret:after {
+  @apply content-none;
+}
+
+.menu__link {
+  @apply cursor-pointer !rounded text-compact-small-plus;
+}
+
+.theme-doc-sidebar-item-category-level-1 > .menu__list {
+  @apply mb-0.25;
+}
+
+.menu__list:not(.theme-doc-sidebar-menu),
+.theme-doc-sidebar-item-category-level-1 > .menu__list {
+  @apply !pl-0;
+}
+
+.menu__list .menu__list {
+  @apply !mt-0;
+}
+
+/** 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;
+}
+
+/** Mobile Sidebar **/
+.navbar-sidebar__back {
+  @apply bg-transparent w-fit top-[unset] pl-0 ml-0 mb-1 text-compact-small-plus;
+}
+
+.theme-doc-sidebar-item-link {
+  @apply flex items-center;
+}
+
+/** 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 hover:text-medusa-fg-base dark:hover:text-medusa-fg-base-dark;
+}
+
+.redocusaurus .menu-content > div > ul > li > ul label:not([type=tag]).active {
+  @apply text-medusa-fg-base dark:text-medusa-fg-base-dark;
+}
--- a/www/apps/docs/src/css/components/toc.css
+++ b/www/apps/docs/src/css/components/toc.css
@@ -0,0 +1,60 @@
+.theme-doc-toc-desktop {
+  @apply pt-3;
+}
+
+.theme-doc-toc-desktop .table-of-contents {
+  @apply !border-l-0 !p-0 text-[12px] relative overflow-y-hidden;
+  @apply before:bg-toc dark:before:bg-toc-dark;
+  @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;
+}
+
+.theme-doc-toc-desktop .table-of-contents .table-of-contents__link {
+  @apply pl-[11px];
+}
+
+.theme-doc-toc-desktop .table-of-contents > li {
+  @apply first:mt-1 [&:not(:first-child)]:mt-0 last:mb-0 [&:not(:last-child)]:mb-0.25;
+}
+
+.theme-doc-toc-desktop .table-of-contents li a + ul {
+  @apply mt-0.25;
+}
+
+.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;
+}
+
+.theme-doc-toc-desktop .table-of-contents__link:hover code {
+  @apply text-medusa-fg-base dark:text-medusa-fg-base-dark;
+}
+
+.theme-doc-toc-desktop .table-of-contents__link--active {
+  @apply text-medusa-fg-base dark:text-medusa-fg-base-dark;
+  @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 z-[1];
+}
+
+.theme-doc-toc-desktop .table-of-contents__link--active code {
+  @apply text-medusa-fg-base dark:text-medusa-fg-base-dark;
+}
+
+.theme-doc-toc-desktop .table-of-contents li {
+  @apply mx-0;
+}
+
+.theme-doc-toc-desktop .table-of-contents ul li {
+  @apply mt-0;
+}
+
+.table-of-contents ul {
+  @apply pl-0;
+}
+
+.table-of-contents ul .table-of-contents__link {
+  @apply !pl-[27px];
+}
--- a/www/apps/docs/src/css/components/tooltip.css
+++ b/www/apps/docs/src/css/components/tooltip.css
@@ -0,0 +1,10 @@
+.react-tooltip {
+  @apply !border !border-solid !border-medusa-border-base dark:!border-medusa-border-base-dark;
+  @apply !rounded !text-compact-x-small-plus !shadow-tooltip dark:!shadow-tooltip-dark;
+  @apply !py-0.4 !px-1 lg:block hidden;
+}
+
+.react-tooltip-arrow {
+  @apply hidden;
+}
+
--- a/www/apps/docs/src/css/custom.css
+++ b/www/apps/docs/src/css/custom.css
@@ -0,0 +1,185 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body[data-modal="opened"] {
+    @apply !overflow-hidden;
+  }
+
+  mark {
+    @apply bg-medusa-bg-highlight dark:bg-medusa-bg-highlight-dark;
+    @apply text-medusa-fg-interactive dark:text-medusa-fg-interactive-dark;
+  }
+}
+
+@layer components {
+  .sidebar-title {
+    @apply !m-0 !py-1 !px-0;
+    @apply lg:first:top-0 lg:[&:not(:first-child)]:top-[20px];
+  }
+
+  .sidebar-title .menu__link {
+    @apply !px-0;
+  }
+  
+  .sidebar-title .menu__link,
+  .sidebar-title span {
+    @apply !text-compact-medium-plus text-medusa-fg-base dark:text-medusa-fg-base-dark;
+  }
+  
+  .sidebar-title .menu__link--active,
+  .sidebar-title .menu__link:hover {
+    @apply !bg-transparent;
+  }
+
+  .sidebar-group-headline {
+    @apply mt-1 py-[6px] px-0;
+  }
+  
+  .sidebar-group-headline:not(.theme-doc-sidebar-item-category-level-1) {
+    @apply mb-[6px];
+  }
+  
+  .sidebar-group-headline > .menu__list-item-collapsible > .menu__link {
+    @apply text-medusa-fg-base dark:text-medusa-fg-base-dark !p-0;
+  }
+  
+  .sidebar-group-headline > .menu__list-item-collapsible > .menu__link:not([href]) {
+    @apply cursor-default
+  }
+  
+  .sidebar-group-headline > .menu__list-item-collapsible > .menu__link:hover,
+  .sidebar-group-headline .menu__list-item-collapsible:hover {
+    @apply !bg-transparent;
+  }
+  
+  .sidebar-group-headline > .menu__link,
+  .sidebar-group-headline > .menu__list-item-collapsible > .menu__link {
+    @apply font-semibold;
+  }
+
+  .sidebar-group-divider {
+    @apply pb-[6px] uppercase text-medusa-fg-muted dark:text-medusa-fg-muted-dark 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;
+  }
+
+  .sidebar-back-link {
+    @apply cursor-pointer lg:top-0;
+  }
+
+  .sidebar-back-link,
+  .sidebar-title {
+    @apply lg:sticky lg:bg-medusa-bg-base dark:lg:bg-medusa-bg-subtle-dark 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;
+  }
+
+  .sidebar-back-link .menu__link,
+  .sidebar-back-link span {
+    @apply text-compact-small-plus;
+  }
+
+  .sidebar-back-link .sidebar-item-icon {
+    @apply mr-0.5;
+  }
+
+  .sidebar-soon-link {
+    @apply pointer-events-none [&_*]:text-medusa-fg-disabled dark:[&_*]:text-medusa-fg-disabled-dark;
+  }
+
+
+  .sidebar-badge-wrapper {
+    @apply flex justify-between items-center;
+  }
+
+  .search-page-input {
+    @apply rounded border border-solid border-medusa-border-base dark:border-medusa-border-base-dark;
+    @apply font-base text-medium p-0.75 w-full bg-medusa-bg-subtle dark:bg-medusa-bg-subtle-dark;
+    @apply text-medusa-fg-base dark:text-medusa-fg-base-dark mb-1;
+    @apply transition-[border] duration-200 ease-ease;
+    @apply focus:border-medusa-border-base dark:focus:border-medusa-border-base-dark;
+    @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 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;
+  }
+
+  .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: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:active:bg-medusa-button-neutral-pressed lg:active:bg-no-image lg:dark:active:bg-medusa-button-neutral-pressed-dark;
+    @apply lg:focus:bg-medusa-button-neutral-pressed lg:focus:bg-no-image lg:dark:focus:bg-medusa-button-neutral-pressed-dark;
+    @apply lg:lg:border lg:border-solid lg:border-medusa-border-base lg:dark:border-medusa-border-base-dark rounded;
+    @apply w-2 h-2 flex justify-center items-center cursor-pointer;
+  }
+
+  .btn-clear {
+    @apply bg-transparent shadow-none border-0 outline-none cursor-pointer;
+  }
+}
+
+@layer utilities {
+  .clip {
+    clip-path: inset(0);
+  }
+}
+
+@import url('./_variables.css');
+
+@import url('./_docusaurus.css');
+@import url('./components/sidebar.css');
+@import url('./components/toc.css');
+@import url('./components/tooltip.css');