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

14
www/apps/docs/src/theme/Admonition/index.tsx
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"
)}

2
www/apps/docs/src/theme/AnnouncementBar/CloseButton/index.tsx
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>
)

4
www/apps/docs/src/theme/AnnouncementBar/Content/index.tsx
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 }}

8
www/apps/docs/src/theme/AnnouncementBar/index.tsx
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")} />

6
www/apps/docs/src/theme/CodeBlock/Content/String.tsx
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>

19
www/apps/docs/src/theme/DocCard/index.tsx
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={{

2
www/apps/docs/src/theme/DocItem/Footer/index.tsx
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>

4
www/apps/docs/src/theme/DocPage/Layout/Sidebar/index.tsx
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 (

2
www/apps/docs/src/theme/Footer/Layout/index.tsx
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",

2
www/apps/docs/src/theme/MDXComponents/A.tsx
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>

4
www/apps/docs/src/theme/Navbar/ColorModeToggle/index.tsx
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}
/>

28
www/apps/docs/src/theme/Navbar/Content/index.tsx
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",
},

2
www/apps/docs/src/theme/Navbar/MobileSidebar/Header/index.tsx
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"
)}
/>

8
www/apps/docs/src/theme/Navbar/MobileSidebar/Toggle/index.tsx
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>
)
}

14
www/apps/docs/src/theme/Tabs/index.tsx
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