docs: improve tailwind configuration (#5215)
This commit is contained in:
@@ -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"
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -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" />
|
||||
),
|
||||
}
|
||||
|
||||
|
||||
@@ -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"
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -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
|
||||
)}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user