asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

docs: improve tailwind configuration (#5215)

Browse Source
This commit is contained in:
Shahed Nasser
2023-09-26 15:08:30 +03:00
committed by GitHub
parent 240c439beb
commit 63aea62d7a
98 changed files with 643 additions and 894 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/apps/docs/src/components/DocSidebarItemIcon/index.tsx
+4 -6
View File
@@ -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",
is_disabled &&
"text-medusa-fg-disabled dark:text-medusa-fg-disabled-dark"
"text-medusa-fg-subtle",
is_disabled && "text-medusa-fg-disabled"
)}
/>
)}
@@ -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",
is_disabled &&
"text-medusa-fg-disabled dark:text-medusa-fg-disabled-dark"
"text-medusa-fg-subtle",
is_disabled && "text-medusa-fg-disabled"
)}
/>
)}
www/apps/docs/src/components/Footer/SocialLinks/index.tsx
+4 -4
View File
@@ -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
+8 -10
View File
@@ -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 &&
"hover:bg-medusa-bg-subtle-hover dark:hover:bg-medusa-bg-base-hover-dark 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-dark group-hover:shadow-card-hover dark:group-hover:shadow-card-hover-dark",
!isSoon && [
"hover:bg-medusa-bg-subtle-hover dark:hover:bg-medusa-bg-base-hover hover:shadow-card-hover dark:hover:shadow-card-hover-dark",
"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",
],
"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 &&
"group-hover:text-medusa-fg-disabled dark:group-hover:text-medusa-fg-disabled-dark",
"text-medusa-fg-base dark:text-medusa-fg-base-dark text-compact-medium-plus",
isSoon && "group-hover:text-medusa-fg-disabled",
"text-medusa-fg-base text-compact-medium-plus",
"transition-all duration-200 ease-ease"
)}
>
@@ -77,8 +76,7 @@ const LargeCard: React.FC<LargeCardProps> = ({
</div>
<div
className={clsx(
isSoon &&
"group-hover:text-medusa-fg-disabled dark:group-hover:text-medusa-fg-disabled-dark",
isSoon && "group-hover:text-medusa-fg-disabled",
"transition-all duration-200 ease-ease text-medium"
)}
>
www/apps/docs/src/components/LearningPath/Finish/index.tsx
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+3 -5
View File
@@ -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(
"text-compact-medium-plus text-medusa-fg-base dark:text-medusa-fg-base-dark"
)}
className={clsx("text-compact-medium-plus text-medusa-fg-base")}
>
{step.title}
</span>
www/apps/docs/src/components/LearningPath/index.tsx
+7 -9
View File
@@ -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(
"text-medusa-fg-base dark:text-medusa-fg-base-dark text-compact-medium-plus"
)}
className={clsx("text-medusa-fg-base text-compact-medium-plus")}
>
{step.title}
</span>
www/apps/docs/src/css/_docusaurus.css
+11 -12
View File
@@ -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-dark hover:bg-medusa-bg-subtle-hover dark:hover:bg-medusa-bg-subtle-hover-dark;
@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;
}
.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 bg-medusa-bg-highlight dark:bg-medusa-bg-highlight-dark py-0.25 px-0;
@apply text-medusa-fg-base;
@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
+20 -84
View File
@@ -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-strong-border-color: theme(colors.medusa.border.strong.DEFAULT);
--ifm-hr-background-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);
--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-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);
--ifm-menu-color: theme(colors.medusa.fg.subtle);
--ifm-menu-color-active: theme(colors.medusa.fg.base);
--ifm-menu-color-background-hover: theme(colors.medusa.bg.base.hover);
--ifm-menu-color-background-active: theme(colors.medusa.bg.base.pressed);
/* Toc */
--ifm-toc-border-color: theme(colors.medusa.border.base.DEFAULT);
--ifm-toc-link-color: theme(colors.medusa.fg.subtle.DEFAULT);
--ifm-toc-border-color: theme(colors.medusa.border.base);
--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-color: theme(colors.medusa.fg.subtle.DEFAULT);
--ifm-navbar-link-hover-color: theme(colors.medusa.fg.base);
--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-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);
--ifm-background-color: theme(colors.medusa.bg.subtle.DEFAULT);
--ifm-background-surface-color: theme(colors.medusa.bg.base.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);
--ifm-menu-color-background-hover: theme(colors.medusa.bg.subtle.hover);
--ifm-menu-color-background-active: theme(colors.medusa.bg.subtle.pressed);
/* 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) {
@@ -201,8 +141,4 @@ 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
+7 -7
View File
@@ -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 hover:text-medusa-fg-base dark:hover:text-medusa-fg-base-dark;
@apply text-medusa-fg-subtle;
@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
+6 -6
View File
@@ -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 -1
View File
@@ -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
+18 -56
View File
@@ -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 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 rounded border border-solid border-medusa-border-base;
@apply font-base text-medium p-0.75 w-full bg-medusa-bg-subtle;
@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: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 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:hover:no-underline;
@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;
@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
+7 -7
View File
@@ -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",
"bg-medusa-bg-subtle dark:bg-medusa-bg-base-dark 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",
"p-1 border border-solid border-medusa-border-base rounded",
"bg-medusa-bg-subtle dark:bg-medusa-bg-base shadow-none",
"[&_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
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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
+4 -4
View File
@@ -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
+3 -3
View File
@@ -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
+8 -11
View File
@@ -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 &&
"group-hover:text-medusa-fg-disabled dark:group-hover:text-medusa-fg-disabled-dark"
isSoon && "group-hover:text-medusa-fg-disabled"
)}
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 &&
"group-hover:text-medusa-fg-disabled dark:group-hover:text-medusa-fg-disabled-dark",
isSoon && "group-hover:text-medusa-fg-disabled",
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 &&
"group-hover:text-medusa-fg-disabled dark:group-hover:text-medusa-fg-disabled-dark",
isSoon && "group-hover:text-medusa-fg-disabled",
isHighlighted && "md:w-1/2"
)}
dangerouslySetInnerHTML={{
www/apps/docs/src/theme/DocItem/Footer/index.tsx
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -3
View File
@@ -17,9 +17,7 @@ export default function NavbarColorModeToggle({
return (
<ColorModeToggle
className={clsx("text-ui-fg-muted", className)}
buttonClassName={clsx(
"hover:!bg-medusa-button-neutral-hover dark:hover:!bg-medusa-button-neutral-hover-dark"
)}
buttonClassName={clsx("hover:!bg-medusa-button-neutral-hover")}
value={colorMode}
onChange={setColorMode}
/>
www/apps/docs/src/theme/Navbar/Content/index.tsx
+14 -14
View File
@@ -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",
"border border-solid rounded border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark",
"text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark font-base text-compact-x-small-plus",
"bg-medusa-tag-neutral-bg",
"border border-solid rounded border-medusa-tag-neutral-border",
"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",
"border border-solid rounded border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark",
"text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark font-base text-compact-x-small-plus",
"bg-medusa-tag-neutral-bg",
"border border-solid rounded border-medusa-tag-neutral-border",
"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",
"border border-solid rounded border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark",
"text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark font-base text-compact-x-small-plus",
"bg-medusa-tag-neutral-bg",
"border border-solid rounded border-medusa-tag-neutral-border",
"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",
"border border-solid rounded border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark",
"text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark font-base text-compact-x-small-plus",
"bg-medusa-tag-neutral-bg",
"border border-solid rounded border-medusa-tag-neutral-border",
"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
+1 -1
View File
@@ -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
+2 -6
View File
@@ -18,12 +18,8 @@ export default function MobileSidebarToggle(): JSX.Element {
className="navbar__toggle !block lg:!hidden clean-btn"
type="button"
>
{!shown && (
<Sidebar className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
)}
{shown && (
<XMark className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
)}
{!shown && <Sidebar className="text-medusa-fg-muted" />}
{shown && <XMark className="text-medusa-fg-muted" />}
</button>
)
}
www/apps/docs/src/theme/Tabs/index.tsx
+7 -7
View File
@@ -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