docs: improve tailwind configuration (#5215)

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

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"
)}
/>
)}

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" />
),
}

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"
)}
>

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>
)}

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
)}

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>

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>