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