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
packages/medusa/src/api/routes/admin/currencies/list-currencies.ts
+3
View File
@@ -42,6 +42,9 @@ import { FeatureFlagDecorators } from "../../../../utils/feature-flag-decorators
* source: |
* curl -X POST '{backend_url}/admin/currencies' \
* -H 'Authorization: Bearer {api_token}'
* security:
* - api_token: []
* - cookie_auth: []
* tags:
* - Currencies
* responses:
packages/medusa/src/api/routes/admin/currencies/update-currency.ts
+3
View File
@@ -43,6 +43,9 @@ import { EntityManager } from "typeorm"
* --data-raw '{
* "includes_tax": true
* }'
* security:
* - api_token: []
* - cookie_auth: []
* tags:
* - Currencies
* responses:
www/apps/api-reference/app/api/[area]/layout.tsx
+2 -2
View File
@@ -33,8 +33,8 @@ export default function RootLayout({
className={clsx(
inter.variable,
robotoMono.variable,
"bg-docs-bg dark:bg-docs-bg-dark font-base text-medium h-full w-full",
"text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark"
"bg-docs-bg font-base text-medium h-full w-full",
"text-medusa-fg-subtle"
)}
>
<Providers>
www/apps/api-reference/components/MDXComponents/Security/Description/index.tsx
+1 -6
View File
@@ -39,12 +39,7 @@ const SecurityDescription = ({
{getSecuritySchemaTypeName(securitySchema)}
</p>
{(securitySchema.type === "http" || securitySchema.type === "apiKey") && (
<p
className={clsx(
"bg-docs-bg-surface dark:bg-docs-bg-surface-dark",
"p-1"
)}
>
<p className={clsx("bg-docs-bg-surface", "p-1")}>
<strong>
{securitySchema.type === "http"
? "HTTP Authorization Scheme"
www/apps/api-reference/components/Tags/Operation/CodeSection/Responses/Sample/index.tsx
+1 -1
View File
@@ -91,7 +91,7 @@ const TagsOperationCodeSectionResponsesSample = ({
examples.find((ex) => ex.value === event.target.value)
)
}
className="border-medusa-border-base dark:border-medusa-border-base-dark my-1 w-full rounded-sm border p-0.5"
className="border-medusa-border-base my-1 w-full rounded-sm border p-0.5"
>
{examples.map((example, index) => (
<option value={example.value} key={index}>
www/apps/api-reference/components/Tags/Operation/CodeSection/index.tsx
+3 -4
View File
@@ -31,18 +31,17 @@ const TagOperationCodeSection = ({
<div
className={clsx(
"bg-medusa-bg-subtle border-medusa-border-base px-0.75 rounded border py-0.5",
"text-code-body flex w-full justify-between gap-1",
"dark:bg-medusa-bg-subtle-dark dark:border-medusa-border-base-dark"
"text-code-body flex w-full justify-between gap-1"
)}
>
<div className={clsx("flex w-[calc(100%-36px)] gap-1")}>
<MethodLabel method={method} className="h-fit" />
<code className="text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark break-words break-all">
<code className="text-medusa-fg-subtle =break-words break-all">
{endpointPath}
</code>
</div>
<CopyButton text={endpointPath} tooltipClassName="font-base">
<SquareTwoStack className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
<SquareTwoStack className="text-medusa-fg-muted" />
</CopyButton>
</div>
{operation["x-codeSamples"] && (
www/apps/api-reference/components/Tags/Operation/DescriptionSection/Parameters/index.tsx
+2 -2
View File
@@ -44,7 +44,7 @@ const TagsOperationDescriptionSectionParameters = ({
<>
{Object.values(pathParameters.properties).length > 0 && (
<>
<h3 className="border-medusa-border-base dark:border-medusa-border-base-dark border-b py-1.5">
<h3 className="border-medusa-border-base border-b py-1.5">
Path Parameters
</h3>
<TagOperationParameters
@@ -55,7 +55,7 @@ const TagsOperationDescriptionSectionParameters = ({
)}
{Object.values(queryParameters.properties).length > 0 && (
<>
<h3 className="border-medusa-border-base dark:border-medusa-border-base-dark border-b py-1.5">
<h3 className="border-medusa-border-base border-b py-1.5">
Query Parameters
</h3>
<TagOperationParameters
www/apps/api-reference/components/Tags/Operation/DescriptionSection/index.tsx
+1 -1
View File
@@ -54,7 +54,7 @@ const TagsOperationDescriptionSection = ({
{operation["x-featureFlag"] && (
<TagsOperationFeatureFlagNotice
featureFlag={operation["x-featureFlag"]}
tooltipTextClassName="font-normal text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark"
tooltipTextClassName="font-normal text-medusa-fg-subtle"
badgeClassName="ml-0.5"
/>
)}
www/apps/api-reference/components/Tags/Operation/Parameters/Name/index.tsx
+1 -1
View File
@@ -62,7 +62,7 @@ const TagOperationParametersName = ({
{isRequired && (
<>
<br />
<span className="text-medusa-tag-red-text dark:text-medusa-tag-red-text-dark text-compact-x-small">
<span className="text-medusa-tag-red-text text-compact-x-small">
required
</span>
</>
www/apps/api-reference/components/Tags/Operation/Parameters/Nested/index.tsx
+2 -2
View File
@@ -12,8 +12,8 @@ const TagsOperationParametersNested = ({
{...props}
className={clsx(
props.className,
"bg-docs-bg-surface dark:bg-docs-bg-surface-dark px-1 pt-1",
"border-medusa-border-base dark:border-medusa-border-base-dark my-1 rounded-sm border"
"bg-docs-bg-surface px-1 pt-1",
"border-medusa-border-base my-1 rounded-sm border"
)}
>
{children}
www/apps/api-reference/components/Tags/Operation/Parameters/Types/OneOf/index.tsx
-2
View File
@@ -76,11 +76,9 @@ const TagOperationParamatersOneOf = ({
"border border-solid",
activeTab === index && [
"bg-medusa-bg-subtle border-medusa-border-strong",
"dark:bg-medusa-bg-subtle-dark dark:border-medusa-border-strong-dark",
],
activeTab !== index && [
"bg-medusa-bg-base border-medusa-border-base",
"dark:bg-medusa-bg-base-dark dark:border-medusa-border-base-dark",
]
)}
onClick={() => setActiveTab(index)}
www/apps/api-reference/css/globals.css
+3 -3
View File
@@ -20,11 +20,11 @@
}
h1, h2, h3, h4 {
@apply text-medusa-fg-base dark:text-medusa-fg-base-dark;
@apply text-medusa-fg-base;
}
hr {
@apply h-[1px] w-full border-0 bg-medusa-border-base dark:bg-medusa-border-base-dark my-2;
@apply h-[1px] w-full border-0 bg-medusa-border-base my-2;
}
p, ul, ol {
@@ -40,7 +40,7 @@
}
*::selection {
@apply bg-medusa-bg-highlight dark:bg-medusa-bg-highlight-dark;
@apply bg-medusa-bg-highlight;
}
pre *::selection {
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
www/apps/ui/public/images/figma.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

www/apps/ui/src/app/(content)/[[...slug]]/page.tsx
+2 -7
View File
@@ -61,13 +61,8 @@ export default async function DocPage({ params }: DocPageProps) {
return (
<div className="flex flex-col">
<h1 className="h1-docs text-medusa-fg-base dark:text-medusa-fg-base-dark mb-2">
{doc.title}
</h1>
<Text
className="text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark mb-6"
size="large"
>
<h1 className="h1-docs text-medusa-fg-base mb-2">{doc.title}</h1>
<Text className="text-medusa-fg-subtle mb-6" size="large">
{doc.description}
</Text>
<div>
www/apps/ui/src/app/layout.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ export default function RootLayout({
<html lang="en" className="h-full w-full">
<head />
<body
className={` bg-docs-bg dark:bg-docs-bg-dark h-screen w-full ${inter.variable} ${robotoMono.variable}`}
className={`bg-docs-bg h-screen w-full ${inter.variable} ${robotoMono.variable}`}
>
<Providers>
<div className="w-full">
www/apps/ui/src/components/colors.tsx
+8 -8
View File
@@ -42,20 +42,20 @@ const ColorBlock = ({ colour, className, ...props }: ColorBlockProps) => {
<div className="flex w-fit flex-row items-center gap-x-2">
<div
className={
"border-medusa-border-base dark:border-medusa-border-base-dark h-[48px] w-[48px] rounded-lg border p-1"
"border-medusa-border-base h-[48px] w-[48px] rounded-lg border p-1"
}
>
<div
className={clx(
"bg-medusa-bg-component dark:bg-medusa-bg-component-dark h-full w-full animate-pulse rounded-[4px]",
"bg-medusa-bg-component h-full w-full animate-pulse rounded-[4px]",
className
)}
{...props}
/>
</div>
<div className="flex flex-col items-start">
<div className="bg-medusa-bg-component dark:bg-medusa-bg-component-dark h-[20px] w-[85px] animate-pulse rounded-sm" />
<div className="bg-medusa-bg-subtle dark:bg-medusa-bg-subtle-dark h-[20px] w-[120px] animate-pulse rounded-sm" />
<div className="bg-medusa-bg-component h-[20px] w-[85px] animate-pulse rounded-sm" />
<div className="bg-medusa-bg-subtle h-[20px] w-[120px] animate-pulse rounded-sm" />
</div>
</div>
)
@@ -65,7 +65,7 @@ const ColorBlock = ({ colour, className, ...props }: ColorBlockProps) => {
<div className="flex flex-row items-center gap-x-2">
<div
className={
"border-medusa-border-base dark:border-medusa-border-base-dark h-[48px] w-[48px] rounded-lg border p-1"
"border-medusa-border-base h-[48px] w-[48px] rounded-lg border p-1"
}
>
<div
@@ -75,10 +75,10 @@ const ColorBlock = ({ colour, className, ...props }: ColorBlockProps) => {
/>
</div>
<div className="flex flex-col items-start">
<p className="txt-compact-xsmall-plus text-medusa-fg-base dark:text-medusa-fg-base-dark text-start">
<p className="txt-compact-xsmall-plus text-medusa-fg-basetext-start">
{cssVarToTailwindClass(colour.name)}
</p>
<p className="txt-compact-xsmall text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark">
<p className="txt-compact-xsmall text-medusa-fg-subtle">
{colour.code}
</p>
</div>
@@ -148,7 +148,7 @@ const Colors = () => {
<div>
{Object.entries(colors).map(([section, colors]) => (
<div className="mb-16" key={`colours-section-${section}`}>
<h2 className="h2-docs mb-4 mt-10 text-medusa-fg-base dark:text-medusa-fg-base-dark">
<h2 className="h2-docs mb-4 mt-10 text-medusa-fg-base">
{section.charAt(0).toUpperCase() + section.slice(1)}
</h2>
<hr className="mb-4" />
www/apps/ui/src/components/component-example.tsx
+1 -2
View File
@@ -43,13 +43,12 @@ export function ComponentExample({
<div
className={clsx(
"bg-docs-bg border-medusa-border-base flex max-h-[400px] min-h-[400px]",
"dark:bg-docs-bg-dark dark:border-medusa-border-base-dark",
"w-full items-center justify-center overflow-auto rounded-md border px-10 py-5"
)}
>
<React.Suspense
fallback={
<div className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark flex items-center text-sm">
<div className="text-medusa-fg-muted flex items-center text-sm">
<Spinner className="animate-spin" />
</div>
}
www/apps/ui/src/components/component-props.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ const ComponentProps = ({ component }: ComponentPropsProps) => {
<Container className="mb-6 mt-8 overflow-hidden p-0">
<React.Suspense
fallback={
<div className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark flex flex-1 items-center justify-center">
<div className="text-medusa-fg-muted flex flex-1 items-center justify-center">
<Spinner className="animate-spin" />
</div>
}
www/apps/ui/src/components/feedback.tsx
+1 -4
View File
@@ -25,10 +25,7 @@ export const Feedback = ({ title, ...props }: FeedbackProps) => {
section: title,
}}
{...props}
className={clsx(
"text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
props.className
)}
className={clsx("text-medusa-fg-subtle", props.className)}
/>
)
}
www/apps/ui/src/components/figma-icon.tsx
+2 -9
View File
@@ -1,13 +1,6 @@
import { BorderedIcon } from "docs-ui"
import { Figma } from "./icons"
import { basePathUrl } from "../lib/base-path-url"
export const FigmaIcon = () => {
return (
<BorderedIcon
IconComponent={Figma}
iconWrapperClassName={
"bg-medusa-button-inverted bg-button-inverted !p-[6px]"
}
/>
)
return <BorderedIcon icon={basePathUrl("/images/figma.png")} />
}
www/apps/ui/src/components/hook-table.tsx
+3 -3
View File
@@ -57,7 +57,7 @@ const Row = ({ value, type, description }: HookData) => {
>
<div className="flex items-center gap-x-1">
<span>enum</span>
<InformationCircleSolid className="text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark" />
<InformationCircleSolid className="text-medusa-fg-subtle" />
</div>
</Tooltip>
)}
@@ -69,7 +69,7 @@ const Row = ({ value, type, description }: HookData) => {
>
<div className="flex items-center gap-x-1">
<span>{type.name}</span>
<InformationCircleSolid className="text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark" />
<InformationCircleSolid className="text-medusa-fg-subtle" />
</div>
</Tooltip>
)}
@@ -81,7 +81,7 @@ const Row = ({ value, type, description }: HookData) => {
>
<div className="flex items-center gap-x-1">
<span>function</span>
<InformationCircleSolid className="text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark" />
<InformationCircleSolid className="text-medusa-fg-subtle" />
</div>
</Tooltip>
)}
www/apps/ui/src/components/hook-values.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ const HookValues = ({ hook }: HookValuesProps) => {
<Container className="mb-6 mt-8 overflow-hidden p-0">
<React.Suspense
fallback={
<div className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark flex flex-1 items-center justify-center">
<div className="text-medusa-fg-muted flex flex-1 items-center justify-center">
<Spinner className="animate-spin" />
</div>
}
www/apps/ui/src/components/icon-search.tsx
+1 -2
View File
@@ -59,7 +59,7 @@ const SearchResults = ({ query = "" }: { query?: string }) => {
<Tooltip content={name}>
<div
className={clsx(
"border-medusa-border-base dark:border-medusa-border-base-dark",
"border-medusa-border-base",
"flex h-10 w-10 items-center justify-center rounded-lg border"
)}
>
@@ -67,7 +67,6 @@ const SearchResults = ({ query = "" }: { query?: string }) => {
<div
className={clsx(
"bg-medusa-bg-component text-medusa-fg-base",
"dark:bg-medusa-bg-component-dark dark:text-medusa-fg-base-dark",
"flex h-8 w-8 items-center justify-center rounded-[4px]"
)}
>
www/apps/ui/src/components/mdx-components.tsx
+5 -24
View File
@@ -23,10 +23,7 @@ const components = {
h1: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => {
return (
<h1
className={clx(
"h1-docs text-medusa-fg-base dark:text-medusa-fg-base-dark",
className
)}
className={clx("h1-docs text-medusa-fg-base", className)}
{...props}
/>
)
@@ -34,10 +31,7 @@ const components = {
h2: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => {
return (
<h2
className={clx(
"h2-docs mb-4 mt-16 text-medusa-fg-base dark:text-medusa-fg-base-dark",
className
)}
className={clx("h2-docs mb-4 mt-16 text-medusa-fg-base", className)}
{...props}
/>
)
@@ -45,10 +39,7 @@ const components = {
h3: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => {
return (
<h3
className={clx(
"h3-docs mb-2 mt-10 text-medusa-fg-base dark:text-medusa-fg-base-dark",
className
)}
className={clx("h3-docs mb-2 mt-10 text-medusa-fg-base", className)}
{...props}
/>
)
@@ -56,10 +47,7 @@ const components = {
p: ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => {
return (
<Text
className={clx(
"text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark mb-docs_1.5",
className
)}
className={clx("text-medusa-fg-subtle mb-docs_1.5", className)}
{...props}
/>
)
@@ -79,7 +67,6 @@ const components = {
<a
className={clx(
"txt-medium text-medusa-fg-interactive hover:text-medusa-fg-interactive-hover",
"dark:text-medusa-fg-interactive-dark dark:hover:text-medusa-fg-interactive-hover-dark",
className
)}
href={href}
@@ -110,13 +97,7 @@ const components = {
...props
}: React.HTMLAttributes<HTMLElement>) => {
return (
<li
className={clx(
"text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
className
)}
{...props}
>
<li className={clx("text-medusa-fg-subtle", className)} {...props}>
<Text>{children}</Text>
</li>
)
www/apps/ui/src/components/props-table.tsx
+3 -3
View File
@@ -90,7 +90,7 @@ const Row = ({ prop, type, defaultValue }: PropData) => {
>
<div className="flex items-center gap-x-1">
<span>enum</span>
<InformationCircleSolid className="text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark" />
<InformationCircleSolid className="text-medusa-fg-subtle" />
</div>
</Tooltip>
)}
@@ -102,7 +102,7 @@ const Row = ({ prop, type, defaultValue }: PropData) => {
>
<div className="flex items-center gap-x-1">
<span>{type.name}</span>
<InformationCircleSolid className="text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark" />
<InformationCircleSolid className="text-medusa-fg-subtle" />
</div>
</Tooltip>
)}
@@ -114,7 +114,7 @@ const Row = ({ prop, type, defaultValue }: PropData) => {
>
<div className="flex items-center gap-x-1">
<span>function</span>
<InformationCircleSolid className="text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark" />
<InformationCircleSolid className="text-medusa-fg-subtle" />
</div>
</Tooltip>
)}
www/apps/ui/src/components/scroll-area.tsx
+2 -2
View File
@@ -11,7 +11,7 @@ const Scrollbar = ({ key, ...props }: ScrollbarProps) => {
return (
<Primitives.Scrollbar
className={clsx(
"bg-medusa-bg-base dark:bg-medusa-bg-base-dark flex touch-none select-none p-0.5 transition-colors ease-out",
"bg-medusa-bg-baseflex touch-none select-none p-0.5 transition-colors ease-out",
"data-[orientation=horizontal]:h-2.5 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col"
)}
key={key as Key}
@@ -26,7 +26,7 @@ const Thumb = ({ className, key, ...props }: ThumbProps) => {
return (
<Primitives.Thumb
className={clx(
"bg-medusa-bg-component dark:bg-medusa-bg-component-dark relative flex-1 rounded-[10px] before:absolute before:left-1/2 before:top-1/2 before:h-full",
"bg-medusa-bg-component relative flex-1 rounded-[10px] before:absolute before:left-1/2 before:top-1/2 before:h-full",
"before:min-h-[44px] before:w-full before:min-w-[44px] before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']",
className
)}
www/apps/ui/src/components/tabs.tsx
-1
View File
@@ -34,7 +34,6 @@ const TabsTrigger = React.forwardRef<
className={clx(
"text-medusa-fg-subtle txt-compact-small-plus rounded-full px-3 py-1.5 transition-all",
"data-[state=active]:shadow-card-rest dark:data-[state=active]:shadow-card-rest-dark data-[state=active]:text-medusa-fg-base",
"dark:text-medusa-fg-subtle-dark dark:data-[state=active]:text-medusa-fg-base-dark",
className
)}
key={key as Key}
www/apps/ui/src/styles/globals.css
+2 -2
View File
@@ -7,11 +7,11 @@
-webkit-font-smoothing: antialiased;
}
.html {
@apply text-medusa-fg-base dark:text-medusa-fg-base-dark;
@apply text-medusa-fg-base;
}
*::selection {
@apply bg-medusa-bg-highlight dark:bg-medusa-bg-highlight-dark;
@apply bg-medusa-bg-highlight;
}
pre *::selection {
www/packages/docs-ui/src/components/Badge/index.tsx
+6 -18
View File
@@ -3,13 +3,9 @@ import clsx from "clsx"
export type BadgeVariant =
| "purple"
| "purple-dark"
| "orange"
| "orange-dark"
| "green"
| "green-dark"
| "blue"
| "blue-dark"
| "red"
| "neutral"
@@ -24,25 +20,17 @@ export const Badge = ({ className, variant, children }: BadgeProps) => {
className={clsx(
"text-compact-x-small-plus px-docs_0.4 rounded-docs_sm border border-solid py-px text-center",
variant === "purple" &&
"bg-medusa-tag-purple-bg dark:bg-medusa-tag-purple-bg-dark text-medusa-tag-purple-text dark:text-medusa-tag-purple-text-dark border-medusa-tag-purple-border dark:border-medusa-tag-purple-border-dark",
variant === "purple-dark" &&
"bg-medusa-tag-purple-bg-dark text-medusa-tag-purple-text-dark border-medusa-tag-purple-border-dark",
"bg-medusa-tag-purple-bg text-medusa-tag-purple-text border-medusa-tag-purple-border",
variant === "orange" &&
"bg-medusa-tag-orange-bg dark:bg-medusa-tag-orange-bg-dark text-medusa-tag-orange-text dark:text-medusa-tag-orange-text-dark border-medusa-tag-orange-border dark:border-medusa-tag-orange-border-dark",
variant === "orange-dark" &&
"bg-medusa-tag-orange-bg-dark text-medusa-tag-orange-text-dark border-medusa-tag-orange-border-dark",
"bg-medusa-tag-orange-bg text-medusa-tag-orange-text border-medusa-tag-orange-border",
variant === "green" &&
"bg-medusa-tag-green-bg dark:bg-medusa-tag-green-bg-dark text-medusa-tag-green-text dark:text-medusa-tag-green-text-dark border-medusa-tag-green-border dark:border-medusa-tag-green-border-dark",
variant === "green-dark" &&
"bg-medusa-tag-green-bg-dark text-medusa-tag-green-text-dark border-medusa-tag-green-border-dark",
"bg-medusa-tag-green-bg text-medusa-tag-green-text border-medusa-tag-green-border",
variant === "blue" &&
"bg-medusa-tag-blue-bg dark:bg-medusa-tag-blue-bg-dark text-medusa-tag-blue-text dark:text-medusa-tag-blue-text-dark border-medusa-tag-blue-border dark:border-medusa-tag-blue-border-dark",
variant === "blue-dark" &&
"bg-medusa-tag-blue-bg-dark text-medusa-tag-blue-text-dark border-medusa-tag-blue-border-dark",
"bg-medusa-tag-blue-bg text-medusa-tag-blue-text border-medusa-tag-blue-border",
variant === "red" &&
"bg-medusa-tag-red-bg dark:bg-medusa-tag-red-bg-dark text-medusa-tag-red-text dark:text-medusa-tag-red-text-dark border-medusa-tag-red-border dark:border-medusa-tag-red-border-dark",
"bg-medusa-tag-red-bg text-medusa-tag-red-text border-medusa-tag-red-border",
variant === "neutral" &&
"bg-medusa-tag-neutral-bg dark:bg-medusa-tag-neutral-bg-dark text-medusa-tag-neutral-text dark:text-medusa-tag-neutral-text-dark border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark",
"bg-medusa-tag-neutral-bg text-medusa-tag-neutral-text border-medusa-tag-neutral-border",
"badge",
className
)}
www/packages/docs-ui/src/components/Bordered/index.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ export const Bordered = ({ wrapperClassName, children }: BorderedProps) => {
return (
<span
className={clsx(
"border-medusa-border-strong dark:border-medusa-border-strong-dark bg-docs-bg",
"border-medusa-border-strong bg-docs-bg",
"dark:bg-docs-bg-dark mr-docs_1 inline-flex w-fit items-center justify-center rounded-docs_DEFAULT border border-solid p-[3px]",
"no-zoom-img",
wrapperClassName
www/packages/docs-ui/src/components/BorderedIcon/index.tsx
+2 -2
View File
@@ -25,7 +25,7 @@ export const BorderedIcon = ({
<Bordered wrapperClassName={wrapperClassName}>
<span
className={clsx(
"rounded-docs_xs p-docs_0.125 bg-medusa-bg-component dark:bg-medusa-bg-component-dark inline-flex items-center justify-center",
"rounded-docs_xs p-docs_0.125 bg-medusa-bg-component inline-flex items-center justify-center",
iconWrapperClassName
)}
>
@@ -39,7 +39,7 @@ export const BorderedIcon = ({
{IconComponent && (
<IconComponent
className={clsx(
"text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
"text-medusa-fg-subtle",
iconClassName,
"bordered-icon",
iconColorClassName
www/packages/docs-ui/src/components/Button/index.tsx
+19 -19
View File
@@ -26,33 +26,33 @@ export const Button = ({
primary: [
"inline-flex flex-row justify-center items-center",
"py-[5px] px-docs_0.75 rounded-docs_sm cursor-pointer",
"bg-button-inverted bg-medusa-button-inverted dark:bg-button-inverted-dark dark:bg-medusa-button-inverted-dark",
"hover:bg-medusa-button-inverted-hover hover:bg-no-image dark:hover:bg-medusa-button-inverted-hover-dark hover:no-underline",
"active:bg-medusa-button-inverted-pressed active:bg-no-image dark:active:bg-medusa-button-inverted-pressed-dark",
"focus:bg-medusa-button-inverted-pressed focus:bg-no-image dark:focus:bg-medusa-button-inverted-pressed-dark",
"bg-button-inverted bg-medusa-button-inverted dark:bg-button-inverted-dark",
"hover:bg-medusa-button-inverted-hover hover:bg-no-image hover:no-underline",
"active:bg-medusa-button-inverted-pressed active:bg-no-image",
"focus:bg-medusa-button-inverted-pressed focus:bg-no-image",
"shadow-button-colored active:shadow-button-colored-focused focus:shadow-button-colored-focused transition-shadow",
"dark:shadow-button-colored-dark dark:active:shadow-button-colored-focused-dark dark:focus:shadow-button-colored-focused-dark",
"disabled:!bg-no-image disabled:bg-medusa-bg-disabled dark:disabled:bg-medusa-bg-disabled-dark",
"disabled:cursor-not-allowed disabled:border-medusa-border-base dark:disabled:border-medusa-border-base-dark",
"text-compact-small-plus text-medusa-fg-on-inverted dark:text-medusa-fg-on-inverted-dark",
"[&_a]:text-medusa-fg-on-inverted dark:[&_a]:text-medusa-fg-on-inverted-dark",
"disabled:text-medusa-fg-disabled dark:disabled:text-medusa-fg-disabled-dark",
"[&_a]:disabled:text-medusa-fg-disabled dark:[&_a]:disabled:text-medusa-fg-disabled-dark",
"border border-medusa-border-loud dark:border-medusa-border-loud-dark",
"disabled:!bg-no-image disabled:bg-medusa-bg-disabled",
"disabled:cursor-not-allowed disabled:border-medusa-border-base",
"text-compact-small-plus text-medusa-fg-on-inverted",
"[&_a]:text-medusa-fg-on-inverted",
"disabled:text-medusa-fg-disabled",
"[&_a]:disabled:text-medusa-fg-disabled",
"border border-medusa-border-loud",
"select-none",
],
secondary: [
"inline-flex flex-row justify-center items-center",
"py-[5px] px-docs_0.75 rounded-docs_sm cursor-pointer",
"bg-button-neutral bg-medusa-button-neutral dark:bg-button-neutral-dark dark:bg-medusa-button-neutral-dark",
"hover:bg-medusa-button-neutral-hover hover:bg-no-image dark:hover:bg-medusa-button-neutral-hover-dark hover:no-underline",
"active:bg-medusa-button-neutral-pressed active:bg-no-image dark:active:bg-medusa-button-neutral-pressed-dark",
"focus:bg-medusa-button-neutral-pressed focus:bg-no-image dark:focus:bg-medusa-button-neutral-pressed-dark",
"disabled:!bg-no-image disabled:bg-medusa-bg-disabled dark:disabled:bg-medusa-bg-disabled-dark",
"bg-button-neutral bg-medusa-button-neutral dark:bg-button-neutral-dark",
"hover:bg-medusa-button-neutral-hover hover:bg-no-image hover:no-underline",
"active:bg-medusa-button-neutral-pressed active:bg-no-image",
"focus:bg-medusa-button-neutral-pressed focus:bg-no-image",
"disabled:!bg-no-image disabled:bg-medusa-bg-disabled",
"disabled:cursor-not-allowed",
"border border-solid border-medusa-border-base dark:border-medusa-border-base-dark",
"text-compact-small-plus text-medusa-fg-base dark:text-medusa-fg-base-dark",
"[&_a]:text-medusa-fg-base dark:[&_a]:text-medusa-fg-base-dark",
"border border-solid border-medusa-border-base",
"text-compact-small-plus text-medusa-fg-base",
"[&_a]:text-medusa-fg-base",
"shadow-button-neutral focus:shadow-button-neutral-focused active:shadow-button-neutral-focused transition-shadow",
"dark:shadow-button-neutral dark:focus:shadow-button-neutral-focused dark:active:shadow-button-neutral-focused",
"select-none",
www/packages/docs-ui/src/components/Card/index.tsx
+4 -4
View File
@@ -15,7 +15,7 @@ export const Card = ({ icon, title, text, href, className }: CardProps) => {
return (
<div
className={clsx(
"bg-medusa-bg-subtle dark:bg-medusa-bg-subtle-dark w-full rounded",
"bg-medusa-bg-subtle w-full rounded",
"shadow-card-rest dark:shadow-card-rest-dark py-docs_0.75 relative px-docs_1",
"flex items-center gap-docs_1 transition-shadow",
href && "hover:shadow-card-hover dark:hover:shadow-card-hover-dark",
@@ -25,11 +25,11 @@ export const Card = ({ icon, title, text, href, className }: CardProps) => {
{icon}
<div className="flex items-center gap-docs_1 justify-between flex-1">
<div className="flex flex-col">
<span className="text-compact-medium-plus text-medusa-fg-base dark:text-medusa-fg-base-dark">
<span className="text-compact-medium-plus text-medusa-fg-base">
{title}
</span>
{text && (
<span className="text-compact-medium text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark">
<span className="text-compact-medium text-medusa-fg-subtle">
{text}
</span>
)}
@@ -37,7 +37,7 @@ export const Card = ({ icon, title, text, href, className }: CardProps) => {
{href && (
<>
<ArrowUpRightOnBox className="text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark" />
<ArrowUpRightOnBox className="text-medusa-fg-subtle" />
<Link
href={href}
className="absolute left-0 top-0 h-full w-full rounded"
www/packages/docs-ui/src/components/CodeBlock/index.tsx
+6 -6
View File
@@ -25,9 +25,9 @@ export const CodeBlock = ({
return (
<div
className={clsx(
"bg-medusa-code-bg-base dark:bg-medusa-code-bg-base-dark relative mb-docs_1 rounded-docs_DEFAULT",
"border-medusa-code-border dark:border-medusa-code-border-dark w-full max-w-full border",
"xs:after:content-[''] xs:after:rounded xs:after:absolute xs:after:right-0 xs:after:top-0 xs:after:w-[calc(10%+24px)] xs:after:h-full xs:after:bg-code-fade xs:dark:after:bg-code-fade-dark",
"bg-medusa-code-bg-base relative mb-docs_1 rounded-docs_DEFAULT",
"border-medusa-code-border w-full max-w-full border",
"xs:after:content-[''] xs:after:rounded xs:after:absolute xs:after:right-0 xs:after:top-0 xs:after:w-[calc(10%+24px)] xs:after:h-full xs:after:bg-code-fade",
collapsed && "max-h-[400px] overflow-auto",
className
)}
@@ -78,8 +78,8 @@ export const CodeBlock = ({
{tokens.length > 1 && (
<span
className={clsx(
"text-medusa-code-text-subtle dark:text-medusa-code-text-subtle-dark mr-docs_1 table-cell select-none",
"bg-medusa-code-bg-base dark:bg-medusa-code-bg-base-dark sticky left-0 w-[1%] px-docs_1 text-right"
"text-medusa-code-text-subtle mr-docs_1 table-cell select-none",
"bg-medusa-code-bg-base sticky left-0 w-[1%] px-docs_1 text-right"
)}
>
{i + 1}
@@ -103,7 +103,7 @@ export const CodeBlock = ({
)}
>
<CopyButton text={source} tooltipClassName="font-base">
<SquareTwoStackSolid className="text-medusa-code-icon dark:text-medusa-code-icon-dark" />
<SquareTwoStackSolid className="text-medusa-code-icon" />
</CopyButton>
</div>
</>
www/packages/docs-ui/src/components/CodeTabs/index.tsx
+6 -6
View File
@@ -71,15 +71,15 @@ export const CodeTabs = ({
>
<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: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-[13px] xs:z-[1] xs:rounded-full"
)}
ref={codeTabSelectorRef}
></span>
<ul
className={clsx(
"bg-medusa-code-bg-header dark:bg-medusa-code-bg-header-dark py-docs_0.75 flex !list-none rounded-t-docs_DEFAULT px-docs_1",
"border-medusa-code-border dark:border-medusa-code-border-dark border border-b-0",
"bg-medusa-code-bg-header py-docs_0.75 flex !list-none rounded-t-docs_DEFAULT px-docs_1",
"border-medusa-code-border border border-b-0",
"gap-docs_0.25 mb-0"
)}
>
@@ -89,12 +89,12 @@ export const CodeTabs = ({
className={clsx(
"text-compact-small-plus xs:border-0 py-docs_0.25 px-docs_0.75 relative z-[2] rounded-full border",
(!selectedTab || selectedTab.value !== tab.value) && [
"text-medusa-code-text-subtle dark:text-medusa-code-text-subtle-dark border-transparent",
"hover:bg-medusa-code-bg-base dark:hover:bg-medusa-code-bg-base-dark",
"text-medusa-code-text-subtle border-transparent",
"hover:bg-medusa-code-bg-base",
],
selectedTab?.value === tab.value && [
"text-medusa-code-text-base bg-medusa-code-bg-base xs:!bg-transparent",
"dark:text-medusa-code-text-base-dark dark:bg-medusa-code-bg-base-dark xs:!bg-transparent",
"xs:!bg-transparent",
]
)}
ref={(tabControl) => tabRefs.push(tabControl)}
www/packages/docs-ui/src/components/Details/Summary/index.tsx
+3 -4
View File
@@ -27,8 +27,7 @@ export const DetailsSummary = ({
className={clsx(
"py-docs_0.75 flex items-center justify-between",
expandable && "cursor-pointer",
!expandable &&
"border-medusa-border-base dark:border-medusa-border-base-dark border-y",
!expandable && "border-medusa-border-base border-y",
"no-marker",
className
)}
@@ -37,14 +36,14 @@ export const DetailsSummary = ({
<span className="gap-docs_0.25 flex flex-col">
<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",
titleClassName
)}
>
{title}
</span>
{subtitle && (
<span className="text-compact-medium text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark">
<span className="text-compact-medium text-medusa-fg-subtle">
{subtitle}
</span>
)}
www/packages/docs-ui/src/components/Details/index.tsx
+1 -1
View File
@@ -48,7 +48,7 @@ export const Details = ({
event.stopPropagation()
}}
className={clsx(
"border-medusa-border-base dark:border-medusa-border-base-dark border-y border-solid border-x-0",
"border-medusa-border-base border-y border-solid border-x-0",
"overflow-hidden [&>summary]:relative [&>summary]:z-[398]",
props.className
)}
www/packages/docs-ui/src/components/InlineCode/index.tsx
+6 -7
View File
@@ -11,18 +11,17 @@ export const InlineCode = (props: InlineCodeProps) => {
<CopyButton
text={props.children as string}
buttonClassName={clsx(
"bg-transparent border-0 p-0 inline text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
"active:[&>code]:bg-medusa-bg-subtle-pressed dark:active:[&>code]:bg-medusa-bg-subtle-pressed-dark",
"focus:[&>code]:bg-medusa-bg-subtle-pressed dark:focus:[&>code]:bg-medusa-bg-subtle-pressed-dark",
"hover:[&>code]:bg-medusa-bg-subtle-hover dark:hover:[&>code]:bg-medusa-bg-base-hover-dark"
"bg-transparent border-0 p-0 inline text-medusa-fg-subtle group"
)}
>
<code
{...props}
className={clsx(
"border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark border",
"text-medusa-tag-neutral-text dark:text-medusa-tag-neutral-text-dark",
"bg-medusa-tag-neutral-bg dark:bg-medusa-tag-neutral-bg-dark font-monospace text-code-label rounded-docs_sm py-0 px-[6px]",
"border-medusa-tag-neutral-border border",
"text-medusa-tag-neutral-text",
"bg-medusa-tag-neutral-bg font-monospace text-code-label rounded-docs_sm py-0 px-[6px]",
"group-active:bg-medusa-bg-subtle-pressed group-focus:bg-medusa-bg-subtle-pressed",
"group-hover:bg-medusa-tag-neutral-bg-hover",
props.className
)}
/>
www/packages/docs-ui/src/components/Input/Text/index.tsx
+9 -9
View File
@@ -13,16 +13,16 @@ export const InputText = (props: InputTextProps) => {
<input
{...props}
className={clsx(
"bg-medusa-bg-field dark:bg-medusa-bg-field-dark shadow-button-secondary dark:shadow-button-secondary-dark",
"border-medusa-border-base dark:border-medusa-border-base-dark rounded-docs_sm border border-solid",
"bg-medusa-bg-field shadow-button-secondary dark:shadow-button-secondary-dark",
"border-medusa-border-base rounded-docs_sm border border-solid",
"px-docs_0.75 py-[9px]",
"hover:bg-medusa-bg-field-hover dark:hover:bg-medusa-bg-field-hover-dark",
"focus:border-medusa-border-interactive dark:focus:border-medusa-border-interactive-dark",
"active:border-medusa-border-interactive dark:active:border-medusa-border-interactive-dark",
"disabled:bg-medusa-bg-disabled dark:disabled:bg-medusa-bg-disabled-dark",
"disabled:border-medusa-border-base dark:disabled:border-medusa-border-base-dark",
"placeholder:text-medusa-fg-muted dark:placeholder:text-medusa-fg-muted-dark",
"disabled:placeholder:text-medusa-fg-disabled dark:disabled:placeholder:text-medusa-fg-disabled-dark",
"hover:bg-medusa-bg-field-hover",
"focus:border-medusa-border-interactive",
"active:border-medusa-border-interactive",
"disabled:bg-medusa-bg-disabled",
"disabled:border-medusa-border-base",
"placeholder:text-medusa-fg-muted",
"disabled:placeholder:text-medusa-fg-disabled",
"text-compact-medium font-base",
props.className
)}
www/packages/docs-ui/src/components/Kbd/index.tsx
+3 -3
View File
@@ -9,9 +9,9 @@ export const Kbd = ({ children, className, ...props }: KbdProps) => {
className={clsx(
"rounded-docs_sm border-solid py-0 px-[6px]",
"inline-flex items-center justify-center",
"border-medusa-tag-neutral-border dark:border-medusa-tag-neutral-border-dark border",
"bg-medusa-tag-neutral-bg dark:bg-medusa-tag-neutral-bg-dark",
"text-medusa-tag-neutral-text dark:text-medusa-tag-neutral-text-dark",
"border-medusa-tag-neutral-border border",
"bg-medusa-tag-neutral-bg",
"text-medusa-tag-neutral-text",
"text-compact-x-small-plus font-monospace shadow-none",
className
)}
www/packages/docs-ui/src/components/Label/index.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ export const Label = ({ children, className }: LabelProps) => {
return (
<span
className={clsx(
"text-medusa-fg-base dark:text-medusa-fg-base-dark text-compact-medium-plus",
"text-medusa-fg-base text-compact-medium-plus",
className
)}
>
www/packages/docs-ui/src/components/Link/index.tsx
-1
View File
@@ -14,7 +14,6 @@ export const Link = ({ href, children, className, ...rest }: LinkProps) => {
{...rest}
className={clsx(
"text-medusa-fg-interactive hover:text-medusa-fg-interactive-hover",
"dark:text-medusa-fg-interactive-dark dark:hover:text-medusa-fg-interactive-hover-dark",
className
)}
>
www/packages/docs-ui/src/components/Loading/index.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ export const Loading = ({
bars.push(
<span
className={clsx(
"bg-medusa-bg-subtle-pressed dark:bg-medusa-bg-subtle-pressed-dark h-docs_1 w-full rounded-full",
"bg-medusa-bg-subtle-pressed h-docs_1 w-full rounded-full",
barClassName
)}
key={i}
www/packages/docs-ui/src/components/Modal/Footer/index.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ export const ModalFooter = ({
<div
className={clsx(
"py-docs_1.5 pl-0 pr-docs_2",
"border-medusa-border-base dark:border-medusa-border-base-dark border-0 border-t border-solid",
"border-medusa-border-base border-0 border-t border-solid",
"flex justify-end gap-docs_0.5",
className
)}
www/packages/docs-ui/src/components/Modal/Header/index.tsx
+2 -8
View File
@@ -14,17 +14,11 @@ export const ModalHeader = ({ title }: ModalHeaderProps) => {
return (
<div
className={clsx(
"border-medusa-border-base dark:border-medusa-border-base-dark border-0 border-b border-solid py-docs_1.5 px-docs_2",
"border-medusa-border-base border-0 border-b border-solid py-docs_1.5 px-docs_2",
"flex items-center justify-between"
)}
>
<span
className={clsx(
"text-medusa-fg-base dark:text-medusa-fg-base-dark text-h2"
)}
>
{title}
</span>
<span className={clsx("text-medusa-fg-base text-h2")}>{title}</span>
<Button
variant="clear"
className="cursor-pointer"
www/packages/docs-ui/src/components/Modal/index.tsx
+3 -3
View File
@@ -87,7 +87,7 @@ export const Modal = ({
{...props}
className={clsx(
"fixed top-0 left-0 flex h-screen w-screen items-center justify-center",
"bg-medusa-bg-overlay dark:bg-medusa-bg-overlay-dark z-[500]",
"bg-medusa-bg-overlay z-[500]",
"hidden open:flex border-0 p-0",
className
)}
@@ -98,8 +98,8 @@ export const Modal = ({
>
<div
className={clsx(
"bg-medusa-bg-base dark:bg-medusa-bg-base-dark rounded-docs_sm",
"border-medusa-border-base dark:border-medusa-border-base-dark border border-solid",
"bg-medusa-bg-base rounded-docs_sm",
"border-medusa-border-base border border-solid",
"shadow-modal dark:shadow-modal-dark",
"w-[90%] md:h-auto md:w-[75%] lg:w-[560px]",
modalContainerClassName
www/packages/docs-ui/src/components/Navbar/ColorModeToggle/index.tsx
+2 -6
View File
@@ -16,12 +16,8 @@ export const NavbarColorModeToggle = ({
return (
<NavbarIconButton {...buttonProps} onClick={() => toggleColorMode()}>
{colorMode === "light" && (
<Sun className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
)}
{colorMode === "dark" && (
<Moon className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
)}
{colorMode === "light" && <Sun className="text-medusa-fg-muted" />}
{colorMode === "dark" && <Moon className="text-medusa-fg-muted" />}
</NavbarIconButton>
)
}
www/packages/docs-ui/src/components/Navbar/Link/index.tsx
+3 -3
View File
@@ -32,10 +32,10 @@ export const NavbarLink = ({
<NextLink
href={href}
className={clsx(
isActive && "!text-medusa-fg-base dark:!text-medusa-fg-base-dark",
!isActive && "!text-medusa-fg-subtle dark:!text-medusa-fg-subtle-dark",
isActive && "!text-medusa-fg-base",
!isActive && "!text-medusa-fg-subtle",
"text-compact-small-plus inline-block",
"hover:!text-medusa-fg-base dark:hover:!text-medusa-fg-base-dark",
"hover:!text-medusa-fg-base",
className
)}
>
www/packages/docs-ui/src/components/Navbar/MobileMenu/Button/index.tsx
+2 -6
View File
@@ -28,12 +28,8 @@ export const NavbarMobileMenuButton = ({
}
}}
>
{!mobileSidebarOpen && (
<Sidebar className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
)}
{mobileSidebarOpen && (
<XMark className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
)}
{!mobileSidebarOpen && <Sidebar className="text-medusa-fg-muted" />}
{mobileSidebarOpen && <XMark className="text-medusa-fg-muted" />}
</NavbarIconButton>
)
}
www/packages/docs-ui/src/components/Navbar/index.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ export const Navbar = ({
<nav
className={clsx(
"h-navbar sticky top-0 w-full justify-between",
"bg-docs-bg dark:bg-docs-bg-dark border-medusa-border-base dark:border-medusa-border-base-dark z-[400] border-b",
"bg-docs-bg dark:bg-docs-bg-dark border-medusa-border-base z-[400] border-b",
className
)}
>
www/packages/docs-ui/src/components/NextLink/index.tsx
-1
View File
@@ -17,7 +17,6 @@ export const Link = ({ href, children, className, ...rest }: LinkProps) => {
{...rest}
className={clsx(
"text-medusa-fg-interactive hover:text-medusa-fg-interactive-hover",
"dark:text-medusa-fg-interactive-dark dark:hover:text-medusa-fg-interactive-hover-dark",
className
)}
>
www/packages/docs-ui/src/components/Notification/Item/Layout/Default/index.tsx
+7 -14
View File
@@ -34,25 +34,22 @@ export const NotificationItemLayoutDefault: React.FC<
)}
>
{type === "info" && (
<InformationCircleSolid className="text-medusa-fg-interactive-dark" />
<InformationCircleSolid className="text-medusa-tag-blue-icon" />
)}
{type === "error" && (
<XCircleSolid className="text-medusa-tag-red-icon dark:text-medusa-tag-red-icon-dark" />
<XCircleSolid className="text-medusa-tag-red-icon" />
)}
{type === "warning" && (
<ExclamationCircleSolid className="text-medusa-tag-orange-icon dark:text-medusa-tag-orange-icon-dark" />
<ExclamationCircleSolid className="text-medusa-tag-orange-icon" />
)}
{type === "success" && (
<CheckCircleSolid className="text-medusa-tag-green-icon dark:text-medusa-tag-green-icon-dark" />
<CheckCircleSolid className="text-medusa-tag-green-icon" />
)}
{type === "custom" && CustomIcon}
</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")}
>
{title}
</span>
@@ -61,17 +58,13 @@ export const NotificationItemLayoutDefault: React.FC<
<div
className={clsx(
"flex pt-0 pr-docs_1 pb-docs_1.5 pl-docs_1 gap-docs_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"
)}
>
<div className="w-docs_2 flex-none"></div>
<div className={clsx("flex flex-col", children && "gap-docs_1")}>
{text && (
<span
className={clsx(
"text-medium text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark"
)}
>
<span className={clsx("text-medium text-medusa-fg-subtle")}>
{text}
</span>
)}
www/packages/docs-ui/src/components/Notification/Item/index.tsx
+1 -1
View File
@@ -35,7 +35,7 @@ export const NotificationItem = ({
return (
<div
className={clsx(
"md:max-w-[320px] md:w-[320px] w-full bg-medusa-bg-base dark:bg-medusa-bg-base-dark rounded-docs_DEFAULT",
"md:max-w-[320px] md:w-[320px] w-full bg-medusa-bg-base rounded-docs_DEFAULT",
"shadow-flyout dark:shadow-flyout-dark max-h-[calc(100vh-90px)]",
"fixed md:right-docs_1 left-0 z-[400] md:m-docs_1",
placement === "bottom" && "md:bottom-docs_1 bottom-0",
www/packages/docs-ui/src/components/Rating/index.tsx
+1 -1
View File
@@ -70,7 +70,7 @@ export const Rating: React.FC<RatingProps> = ({
>
{!isSelected && <Star />}
{isSelected && (
<StarSolid className="text-medusa-tag-orange-icon dark:text-medusa-tag-orange-icon-dark" />
<StarSolid className="text-medusa-tag-orange-icon" />
)}
</Button>
)
www/packages/docs-ui/src/components/Search/Hits/GroupName/index.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ export const SearchHitGroupName = ({ name }: SearchHitGroupNameProps) => {
<span
className={clsx(
"pb-docs_0.25 flex px-docs_0.5 pt-docs_1",
"text-medusa-fg-muted dark:text-medusa-fg-muted-dark",
"text-medusa-fg-muted",
"text-compact-x-small-plus"
)}
>
www/packages/docs-ui/src/components/Search/Hits/index.tsx
+6 -6
View File
@@ -145,8 +145,8 @@ export const SearchHits = ({
<div
className={clsx(
"overflow-auto",
"[&_mark]:bg-medusa-bg-highlight dark:[&_mark]:bg-medusa-bg-highlight-dark",
"[&_mark]:text-medusa-fg-interactive dark:[&_mark]:text-medusa-fg-interactive-dark"
"[&_mark]:bg-medusa-bg-highlight",
"[&_mark]:text-medusa-fg-interactive"
)}
>
{Object.keys(grouped).map((groupName, index) => (
@@ -157,8 +157,8 @@ export const SearchHits = ({
className={clsx(
"gap-docs_0.25 relative flex flex-1 flex-col p-docs_0.5",
"overflow-x-hidden text-ellipsis whitespace-nowrap break-words",
"hover:bg-medusa-bg-base-hover dark:hover:bg-medusa-bg-base-hover-dark",
"focus:bg-medusa-bg-base-hover dark:focus:bg-medusa-bg-base-hover-dark",
"hover:bg-medusa-bg-base-hover",
"focus:bg-medusa-bg-base-hover",
"last:mb-docs_1 focus:outline-none"
)}
key={index}
@@ -173,7 +173,7 @@ export const SearchHits = ({
>
<span
className={clsx(
"text-compact-small-plus text-medusa-fg-base dark:text-medusa-fg-base-dark",
"text-compact-small-plus text-medusa-fg-base",
"max-w-full"
)}
>
@@ -191,7 +191,7 @@ export const SearchHits = ({
/>
</span>
{item.type !== "lvl1" && (
<span className="text-compact-small text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark">
<span className="text-compact-small text-medusa-fg-subtle">
<Snippet
attribute={
item.content
www/packages/docs-ui/src/components/Search/Modal/index.tsx
+14 -22
View File
@@ -199,35 +199,33 @@ export const SearchModal = ({
indexName={algolia.mainIndexName}
searchClient={searchClient}
>
<div
className={clsx("bg-medusa-bg-base dark:bg-medusa-bg-base-dark flex")}
>
<div className={clsx("bg-medusa-bg-base flex")}>
<SearchBox
classNames={{
root: clsx(
"h-[56px] w-full md:rounded-t-docs_xl relative border-0 border-solid",
"border-b border-medusa-border-base dark:border-medusa-border-base-dark",
"border-b border-medusa-border-base",
"bg-transparent"
),
form: clsx("h-full md:rounded-t-docs_xl bg-transparent"),
input: clsx(
"w-full h-full pl-docs_3 text-medusa-fg-base dark:text-medusa-fg-base-dark",
"placeholder:text-medusa-fg-muted dark:placeholder:text-medusa-fg-muted-dark",
"w-full h-full pl-docs_3 text-medusa-fg-base",
"placeholder:text-medusa-fg-muted",
"md:rounded-t-docs_xl text-compact-medium bg-transparent",
"appearance-none search-cancel:hidden border-0 active:outline-none focus:outline-none"
),
submit: clsx("absolute top-[18px] left-docs_1 btn-clear p-0"),
reset: clsx(
"absolute top-docs_0.75 right-docs_1 hover:bg-medusa-bg-base-hover dark:hover:bg-medusa-bg-base-hover-dark",
"absolute top-docs_0.75 right-docs_1 hover:bg-medusa-bg-base-hover",
"p-[5px] md:rounded-docs_DEFAULT btn-clear"
),
loadingIndicator: clsx("absolute top-[18px] right-docs_1"),
}}
submitIconComponent={() => (
<MagnifyingGlass className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
<MagnifyingGlass className="text-medusa-fg-muted" />
)}
resetIconComponent={() => (
<XMark className="hidden md:block text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark" />
<XMark className="hidden md:block text-medusa-fg-subtle" />
)}
placeholder="Find something..."
autoFocus
@@ -236,14 +234,14 @@ export const SearchModal = ({
<Button
variant="clear"
className={clsx(
"bg-medusa-bg-base dark:bg-medusa-bg-base-dark block md:hidden",
"bg-medusa-bg-base block md:hidden",
"border-0 border-solid",
"border-medusa-border-base dark:border-medusa-border-base-dark border-b",
"border-medusa-border-base border-b",
"pr-docs_1"
)}
onClick={() => setIsOpen(false)}
>
<XMark className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
<XMark className="text-medusa-fg-muted" />
</Button>
</div>
<div className="mx-docs_0.5 h-[calc(100%-120px)] md:h-[332px] md:flex-initial lg:max-h-[332px] lg:min-h-[332px]">
@@ -276,8 +274,8 @@ export const SearchModal = ({
className={clsx(
"py-docs_0.75 flex items-center justify-between px-docs_1",
"border-0 border-solid",
"border-medusa-border-base dark:border-medusa-border-base-dark border-t",
"bg-medusa-bg-base dark:bg-medusa-bg-base-dark"
"border-medusa-border-base border-t",
"bg-medusa-bg-base"
)}
>
{filterOptions.length && (
@@ -306,10 +304,7 @@ export const SearchModal = ({
<div className="hidden items-center gap-docs_1 md:flex">
<div className="flex items-center gap-docs_0.5">
<span
className={clsx(
"text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
"text-compact-x-small"
)}
className={clsx("text-medusa-fg-subtle", "text-compact-x-small")}
>
Navigation
</span>
@@ -320,10 +315,7 @@ export const SearchModal = ({
</div>
<div className="flex items-center gap-docs_0.5">
<span
className={clsx(
"text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
"text-compact-x-small"
)}
className={clsx("text-medusa-fg-subtle", "text-compact-x-small")}
>
Open Result
</span>
www/packages/docs-ui/src/components/Search/ModalOpener/index.tsx
+2 -2
View File
@@ -48,7 +48,7 @@ export const SearchModalOpener = ({
<>
{isMobile && (
<Button variant="clear" onClick={handleOpen}>
<MagnifyingGlass className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
<MagnifyingGlass className="text-medusa-fg-muted" />
</Button>
)}
{!isMobile && (
@@ -59,7 +59,7 @@ export const SearchModalOpener = ({
<MagnifyingGlass
className={clsx(
"absolute left-docs_0.5 top-[5px]",
"text-medusa-fg-muted dark:text-medusa-fg-muted-dark"
"text-medusa-fg-muted"
)}
/>
<InputText
www/packages/docs-ui/src/components/Search/NoResults/index.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ export const SearchNoResult = () => {
<div
className={clsx(
"flex h-full w-full flex-col items-center justify-center gap-docs_1",
"text-medusa-fg-muted dark:text-medusa-fg-muted-dark"
"text-medusa-fg-muted"
)}
>
<ExclamationCircleSolid />
www/packages/docs-ui/src/components/Search/Suggestions/index.tsx
+3 -6
View File
@@ -26,8 +26,8 @@ export const SearchSuggestions = ({ suggestions }: SearchSuggestionsProps) => {
className={clsx(
"flex items-center justify-between",
"cursor-pointer rounded-docs_sm p-docs_0.5",
"hover:bg-medusa-bg-base-hover dark:hover:bg-medusa-bg-base-hover-dark",
"focus:bg-medusa-bg-base-hover dark:focus:bg-medusa-bg-base-hover-dark",
"hover:bg-medusa-bg-base-hover",
"focus:bg-medusa-bg-base-hover",
"focus:outline-none last:mb-docs_1"
)}
onClick={() =>
@@ -40,10 +40,7 @@ export const SearchSuggestions = ({ suggestions }: SearchSuggestionsProps) => {
data-hit
>
<span
className={clsx(
"text-medusa-fg-base dark:text-medusa-fg-base-dark",
"text-compact-small"
)}
className={clsx("text-medusa-fg-base", "text-compact-small")}
>
{item}
</span>
www/packages/docs-ui/src/components/Select/Badge/index.tsx
+8 -17
View File
@@ -54,7 +54,7 @@ export const SelectBadge = ({
<>
<span
className={clsx(
"text-medusa-fg-base dark:text-medusa-fg-base-dark",
"text-medusa-fg-base",
"text-compact-x-small-plus",
"inline-block max-w-[60px] overflow-hidden text-ellipsis"
)}
@@ -63,10 +63,7 @@ export const SelectBadge = ({
</span>
{!isAllSelected && selectedOptions.length > 1 && (
<span
className={clsx(
"text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
"text-compact-x-small"
)}
className={clsx("text-medusa-fg-subtle", "text-compact-x-small")}
>
{" "}
+ {selectedOptions.length}
@@ -80,14 +77,13 @@ export const SelectBadge = ({
<div className={clsx("relative", className)}>
<div
className={clsx(
"border-medusa-border-base dark:border-medusa-border-base-dark rounded-sm border border-solid",
"hover:bg-medusa-bg-subtle-hover dark:hover:bg-medusa-bg-subtle-hover-dark",
"border-medusa-border-base rounded-sm border border-solid",
"hover:bg-medusa-bg-subtle-hover",
"py-docs_0.25 h-fit cursor-pointer px-docs_0.5",
"flex items-center gap-[6px] whitespace-nowrap",
"text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
!open && "bg-medusa-bg-subtle dark:bg-medusa-bg-subtle-dark",
open &&
"bg-medusa-bg-subtle-hover dark:bg-medusa-bg-subtle-hover-dark",
"text-medusa-fg-subtle",
!open && "bg-medusa-bg-subtle",
open && "bg-medusa-bg-subtle-hover",
className
)}
ref={ref}
@@ -97,12 +93,7 @@ export const SelectBadge = ({
}
}}
>
<span
className={clsx(
"text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
"text-compact-x-small"
)}
>
<span className={clsx("text-medusa-fg-subtle", "text-compact-x-small")}>
Show results from:{" "}
</span>
{getSelectedText()}
www/packages/docs-ui/src/components/Select/Dropdown/index.tsx
+4 -8
View File
@@ -87,7 +87,7 @@ export const SelectDropdown = ({
key={index}
className={clsx(
"pr-docs_0.75 relative rounded-docs_sm py-docs_0.5 pl-docs_2.5",
"hover:bg-medusa-bg-base-hover dark:hover:bg-medusa-bg-base-hover-dark",
"hover:bg-medusa-bg-base-hover",
"[&>svg]:left-docs_0.75 cursor-pointer [&>svg]:absolute [&>svg]:top-docs_0.5",
!isSelected && "text-compact-small",
isSelected && "text-compact-small-plus"
@@ -102,12 +102,8 @@ export const SelectDropdown = ({
>
{isSelected && (
<>
{multiple && (
<CheckMini className="text-medusa-fg-base dark:text-medusa-fg-base-dark" />
)}
{!multiple && (
<EllipseMiniSolid className="text-medusa-fg-base dark:text-medusa-fg-base-dark" />
)}
{multiple && <CheckMini className="text-medusa-fg-base" />}
{!multiple && <EllipseMiniSolid className="text-medusa-fg-base" />}
</>
)}
{option.label}
@@ -128,7 +124,7 @@ export const SelectDropdown = ({
<ul
className={clsx(
"p-docs_0.25 mb-0 w-full overflow-auto rounded-docs_DEFAULT",
"bg-medusa-bg-base dark:bg-medusa-bg-base-dark text-medusa-fg-base dark:text-medusa-fg-base-dark",
"bg-medusa-bg-base text-medusa-fg-base",
"shadow-flyout dark:shadow-flyout-dark list-none"
)}
>
www/packages/docs-ui/src/components/Select/Input/index.tsx
+10 -12
View File
@@ -45,19 +45,17 @@ export const SelectInput = ({
<div
className={clsx(
"px-docs_0.75 relative py-[9px]",
"border-medusa-border-base dark:border-medusa-border-base-dark rounded-docs_sm border border-solid",
"bg-medusa-bg-field dark:bg-medusa-bg-field-dark shadow-button-neutral dark:shadow-button-neutral-dark",
"hover:bg-medusa-bg-field-hover dark:hover:bg-medusa-bg-field-hover-dark",
"border-medusa-border-base rounded-docs_sm border border-solid",
"bg-medusa-bg-field shadow-button-neutral dark:shadow-button-neutral-dark",
"hover:bg-medusa-bg-field-hover",
"active:shadow-active dark:active:shadow-active-dark",
"focus:shadow-active dark:focus:shadow-active-dark",
"text-medusa-fg-base dark:text-medusa-fg-base-dark text-compact-medium",
"disabled:bg-medusa-bg-disabled dark:disabled:bg-medusa-bg-disabled-dark",
"disabled:text-medusa-fg-disabled dark:disabled:text-medusa-fg-disabled-dark",
"text-medusa-fg-base text-compact-medium",
"disabled:bg-medusa-bg-disabled",
"disabled:text-medusa-fg-disabled",
"flex items-center gap-docs_0.5",
!hasSelectedValues &&
"placeholder:text-medusa-fg-muted dark:placeholder:text-medusa-fg-muted-dark",
hasSelectedValues &&
"placeholder:text-medusa-fg-base dark:placeholder:text-medusa-fg-base-dark",
!hasSelectedValues && "placeholder:text-medusa-fg-muted",
hasSelectedValues && "placeholder:text-medusa-fg-base",
className
)}
ref={ref}
@@ -82,7 +80,7 @@ export const SelectInput = ({
</span>
{showClearButton && (
<XMarkMini
className="text-medusa-tag-neutral-icon dark:text-medusa-tag-neutral-icon-dark"
className="text-medusa-tag-neutral-icon"
onClick={(e) => {
e.stopPropagation()
setSelected?.([])
@@ -101,7 +99,7 @@ export const SelectInput = ({
? selectedValues[0].label
: props.placeholder}
</span>
<ChevronUpDown className="text-medusa-fg-muted dark:text-medusa-fg-muted-dark" />
<ChevronUpDown className="text-medusa-fg-muted" />
<input
type="hidden"
name={props.name}
www/packages/docs-ui/src/components/Sidebar/Item/index.tsx
+5 -11
View File
@@ -50,21 +50,15 @@ export const SidebarItem = ({
() =>
clsx(
"flex items-center justify-between gap-docs_0.5 rounded-docs_sm px-docs_0.5 py-[6px] hover:no-underline",
!item.children &&
"text-compact-small-plus text-medusa-fg-subtle dark:text-medusa-fg-subtle-dark",
!item.children && "text-compact-small-plus text-medusa-fg-subtle",
item.children &&
"text-compact-x-small-plus text-medusa-fg-muted dark:text-medusa-fg-muted-dark uppercase",
"text-compact-x-small-plus text-medusa-fg-muted uppercase",
item.path !== undefined &&
active && [
"!text-medusa-fg-base bg-medusa-bg-base-pressed",
"dark:!text-medusa-fg-base-dark dark:bg-medusa-bg-base-pressed-dark",
],
item.path !== undefined &&
active &&
"border border-medusa-border-base dark:border-medusa-border-base-dark",
active && ["!text-medusa-fg-base bg-medusa-bg-base-pressed"],
item.path !== undefined && active && "border border-medusa-border-base",
item.path !== undefined &&
!active &&
"hover:bg-medusa-bg-base-hover dark:hover:bg-medusa-bg-base-hover-dark border-transparent"
"hover:bg-medusa-bg-base-hover border-transparent"
),
[item.children, active, item.path]
)
www/packages/docs-ui/src/components/Sidebar/index.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export const Sidebar = ({
<aside
className={clsx(
"clip bg-docs-bg dark:bg-docs-bg-dark w-ref-sidebar block",
"border-medusa-border-base dark:border-medusa-border-base-dark border-0 border-r border-solid",
"border-medusa-border-base border-0 border-r border-solid",
"fixed -left-full top-[57px] h-screen transition-[left] lg:relative lg:left-0 lg:top-auto lg:h-auto",
"lg:w-sidebar z-[100] w-full lg:z-0",
mobileSidebarOpen && "!left-0",
www/packages/docs-ui/src/components/TextArea/index.tsx
+9 -9
View File
@@ -13,16 +13,16 @@ export const TextArea = (props: TextAreaProps) => {
<textarea
{...props}
className={clsx(
"bg-medusa-bg-field dark:bg-medusa-bg-field-dark shadow-button-secondary dark:shadow-button-secondary-dark",
"border-medusa-border-base dark:border-medusa-border-base-dark rounded-docs_sm border border-solid",
"bg-medusa-bg-field shadow-button-secondary dark:shadow-button-secondary-dark",
"border-medusa-border-base rounded-docs_sm border border-solid",
"pt-docs_0.4 px-docs_0.75 text-medium font-base pb-[9px]",
"hover:bg-medusa-bg-field-hover dark:hover:bg-medusa-bg-field-hover-dark",
"focus:border-medusa-border-interactive dark:focus:border-medusa-border-interactive-dark",
"active:border-medusa-border-interactive dark:active:border-medusa-border-interactive-dark",
"disabled:bg-medusa-bg-disabled dark:disabled:bg-medusa-bg-disabled-dark",
"disabled:border-medusa-border-base dark:disabled:border-medusa-border-base-dark",
"placeholder:text-medusa-fg-muted dark:placeholder:text-medusa-fg-muted-dark",
"disabled:placeholder:text-medusa-fg-disabled dark:disabled:placeholder:text-medusa-fg-disabled-dark",
"hover:bg-medusa-bg-field-hover",
"focus:border-medusa-border-interactive",
"active:border-medusa-border-interactive",
"disabled:bg-medusa-bg-disabled",
"disabled:border-medusa-border-base",
"placeholder:text-medusa-fg-muted",
"disabled:placeholder:text-medusa-fg-disabled",
props.className
)}
/>
www/packages/docs-ui/src/components/Tooltip/index.tsx
+3 -3
View File
@@ -45,11 +45,11 @@ export const Tooltip = ({
anchorId={elementId}
// anchorSelect={elementId ? `#${elementId}` : undefined}
className={clsx(
"!border-medusa-border-base dark:!border-medusa-border-base-dark !border !border-solid",
"!border-medusa-border-base !border !border-solid",
"!text-compact-x-small-plus !shadow-tooltip dark:!shadow-tooltip-dark !rounded-docs_DEFAULT",
"!py-docs_0.4 !z-[399] hidden !px-docs_1 lg:block",
"!bg-medusa-bg-base dark:!bg-medusa-bg-base-dark",
"!text-medusa-fg-subtle dark:!text-medusa-fg-subtle-dark",
"!bg-medusa-bg-base",
"!text-medusa-fg-subtle",
tooltipClassName
)}
wrapper="span"
www/packages/docs-ui/src/providers/Modal/index.tsx
+1 -1
View File
@@ -34,7 +34,7 @@ export const ModalProvider = ({ children }: ModalProviderProps) => {
{children}
{modalProps && (
<>
<div className="bg-medusa-bg-overlay dark:bg-medusa-bg-overlay-dark fixed top-0 left-0 z-[499] h-screen w-screen"></div>
<div className="bg-medusa-bg-overlay fixed top-0 left-0 z-[499] h-screen w-screen"></div>
<Modal {...modalProps} onClose={closeModal} />
</>
)}
www/packages/tailwind/base.tailwind.config.js
+89 -306
View File
@@ -1,4 +1,5 @@
import plugin from "tailwindcss/plugin"
import presets from "./theme-presets"
/** @type {import('tailwindcss').Config} */
module.exports = {
@@ -13,374 +14,158 @@ module.exports = {
medusa: {
bg: {
subtle: {
DEFAULT: "#F9FAFB",
dark: "#18181A",
hover: {
DEFAULT: "#F3F4F6",
dark: "#1B1B1F",
},
pressed: {
DEFAULT: "#E5E7EB",
dark: "#27282D",
},
DEFAULT: "var(--docs-bg-subtle)",
hover: "var(--docs-bg-subtle-hover)",
pressed: "var(--docs-bg-subtle-pressed)",
},
base: {
DEFAULT: "#FFFFFF",
dark: "#1B1B1F",
hover: {
DEFAULT: "#F9FAFB",
dark: "#27282D",
},
pressed: {
DEFAULT: "#F3F4F6",
dark: "#2E3035",
},
},
component: {
DEFAULT: "#F1F3F5",
dark: "#27282D",
DEFAULT: "var(--docs-bg-base)",
hover: "var(--docs-bg-base-hover)",
pressed: "var(--docs-bg-base-pressed)",
},
component: "var(--docs-bg-component)",
"switch-off": {
DEFAULT: "#E5E7EB",
dark: "#35373C",
hover: {
DEFAULT: "#E5E7EB",
dark: "#464B50",
},
},
interactive: {
DEFAULT: "#3B82F6",
dark: "#60A5FA",
},
overlay: {
DEFAULT: "rgba(3, 7, 18, 0.4)",
dark: "rgba(24, 24, 26, 0.7)",
},
disabled: {
DEFAULT: "#F3F4F6",
dark: "#27282D",
DEFAULT: "var(--docs-bg-switch-off)",
hover: "var(--docs-bg-switch-off-hover)",
},
interactive: "var(--docs-bg-interactive)",
overlay: "var(--docs-bg-overlay)",
disabled: "var(--docs-bg-disabled)",
highlight: {
DEFAULT: "#EFF6FF",
dark: "#172554",
hover: {
DEFAULT: "#DBEAFE",
dark: "#1E3A8A",
},
DEFAULT: "var(--docs-bg-highlight)",
hover: "var(--docs-bg-highlight-hover)",
},
field: {
DEFAULT: "#F9FAFB",
dark: "#27282D",
hover: {
DEFAULT: "#F3F4F6",
dark: "#2E3035",
},
DEFAULT: "var(--docs-bg-field)",
hover: "var(--docs-bg-field-hover)",
},
},
fg: {
base: {
DEFAULT: "#030712",
dark: "#EDEEF0",
},
subtle: {
DEFAULT: "#4B5563",
dark: "#ADB1B8",
},
muted: {
DEFAULT: "#9CA3AF",
dark: "#696E77",
},
disabled: {
DEFAULT: "#D1D5DB",
dark: "#3C3F44",
},
base: "var(--docs-fg-base)",
subtle: "var(--docs-fg-subtle)",
muted: "var(--docs-fg-muted)",
disabled: "var(--docs-fg-disabled)",
on: {
color: {
DEFAULT: "#FFFFFF",
dark: "#FFFFFF",
},
inverted: {
DEFAULT: "#FFFFFF",
dark: "#18181A",
},
color: "var(--docs-fg-on-color)",
inverted: "var(--docs-fg-on-inverted)",
},
interactive: {
DEFAULT: "#3B82F6",
dark: "#60A5FA",
hover: {
DEFAULT: "#2563EB",
dark: "#3B82F6",
},
},
error: {
DEFAULT: "#E11D48",
dark: "#FB7185",
DEFAULT: "var(--docs-fg-interactive)",
hover: "var(--docs-fg-interactive-hover)",
},
error: "var(--docs-fg-error)",
},
border: {
base: {
DEFAULT: "#E5E7EB",
dark: "#2E3035",
},
strong: {
DEFAULT: "#D1D5DB",
dark: "#35373C",
},
loud: {
DEFAULT: "#030712",
dark: "#EDEEF0",
},
interactive: {
DEFAULT: "#3B82F6",
dark: "#60A5FA",
},
error: {
DEFAULT: "#E11D48",
dark: "#F43F5E",
},
danger: {
DEFAULT: "#BE123C",
dark: "#BE123C",
},
transparent: {
DEFAULT: "rgba(3, 7, 18, 0)",
dark: "rgba(238, 238, 238, 0)",
},
base: "var(--docs-border-base)",
strong: "var(--docs-border-strong)",
loud: "var(--docs-border-loud)",
interactive: "var(--docs-border-interactive)",
error: "var(--docs-border-error)",
danger: "var(--docs-border-danger)",
transparent: "var(--docs-border-transparent)",
},
button: {
inverted: {
DEFAULT: "#030712",
dark: "#EDEEF0",
hover: {
DEFAULT: "#1F2937",
dark: "#FFFFFF",
},
pressed: {
DEFAULT: "#374151",
dark: "#EDEEF0",
},
DEFAULT: "var(--docs-button-inverted)",
hover: "var(--docs-button-inverted-hover)",
pressed: "var(--docs-button-inverted-pressed)",
},
neutral: {
DEFAULT: "#FFFFFF",
dark: "#27282D",
hover: {
DEFAULT: "#F9FAFB",
dark: "#35373C",
},
pressed: {
DEFAULT: "#F3F4F6",
dark: "#3C3F44",
},
DEFAULT: "var(--docs-button-neutral)",
hover: "var(--docs-button-neutral-hover)",
pressed: "var(--docs-button-neutral-pressed)",
},
danger: {
DEFAULT: "#E11D48",
dark: "#9F1239",
hover: {
DEFAULT: "#E11D48",
dark: "#BE123C",
},
pressed: {
DEFAULT: "#BE123C",
dark: "#E11D48",
},
DEFAULT: "var(--docs-button-danger)",
hover: "var(--docs-button-danger-hover)",
pressed: "var(--docs-button-danger-pressed)",
},
transparent: {
DEFAULT: "rgba(255, 255, 255, 0)",
dark: "rgba(0, 0, 0, 0)",
hover: {
DEFAULT: "#F9FAFB",
dark: "#27282D",
},
pressed: {
DEFAULT: "#F3F4F6",
dark: "#2E3035",
},
},
disabled: {
DEFAULT: "#ECEEF0",
dark: "#28282C",
DEFAULT: "var(--docs-button-transparent)",
hover: "var(--docs-button-transparent-hover)",
pressed: "var(--docs-button-transparent-pressed)",
},
disabled: "var(--docs-button-disabled)",
},
tag: {
neutral: {
bg: {
DEFAULT: "#F3F4F6",
dark: "#2E3035",
hover: {
DEFAULT: "#E5E7EB",
dark: "#35373C",
},
},
text: {
DEFAULT: "#4B5563",
dark: "#ADB1B8",
},
icon: {
DEFAULT: "#6B7280",
dark: "#7D828A",
},
border: {
DEFAULT: "#E5E7EB",
dark: "#3C3F44",
DEFAULT: "var(--docs-tags-neutral-bg)",
hover: "var(--docs-tags-neutral-bg-hover)",
},
text: "var(--docs-tags-neutral-text)",
icon: "var(--docs-tags-neutral-icon)",
border: "var(--docs-tags-neutral-border)",
},
purple: {
bg: {
DEFAULT: "#EDE9FE",
dark: "#2E1064",
hover: {
DEFAULT: "#DDD6FE",
dark: "#4C1D95",
},
},
text: {
DEFAULT: "#6D28D9",
dark: "#8B5CF6",
},
icon: {
DEFAULT: "#7C3AED",
dark: "#6D28D9",
},
border: {
DEFAULT: "#DDD6FE",
dark: "#4C1D95",
DEFAULT: "var(--docs-tags-purple-bg)",
hover: "var(--docs-tags-purple-bg-hover)",
},
text: "var(--docs-tags-purple-text)",
icon: "var(--docs-tags-purple-icon)",
border: "var(--docs-tags-purple-border)",
},
blue: {
bg: {
DEFAULT: "#DBEAFE",
dark: "#172554",
hover: {
DEFAULT: "#BFDBFE",
dark: "#1E2A8A",
},
},
text: {
DEFAULT: "#1D4ED8",
dark: "#3B82F6",
},
icon: {
DEFAULT: "#2563EB",
dark: "#1D4ED8",
},
border: {
DEFAULT: "#BFDBFE",
dark: "#1E3A8A",
DEFAULT: "var(--docs-tags-blue-bg)",
hover: "var(--docs-tags-blue-bg-hover)",
},
text: "var(--docs-tags-blue-text)",
icon: "var(--docs-tags-blue-icon)",
border: "var(--docs-tags-blue-border)",
},
green: {
bg: {
DEFAULT: "#D1FAE5",
dark: "#022C22",
hover: {
DEFAULT: "#A7F3D0",
dark: "#064E3B",
},
},
text: {
DEFAULT: "#047857",
dark: "#10B981",
},
icon: {
DEFAULT: "#059669",
dark: "#047857",
},
border: {
DEFAULT: "#A7F3D0",
dark: "#064E3B",
DEFAULT: "var(--docs-tags-green-bg)",
hover: "var(--docs-tags-green-bg-hover)",
},
text: "var(--docs-tags-green-text)",
icon: "var(--docs-tags-green-icon)",
border: "var(--docs-tags-green-border)",
},
orange: {
bg: {
DEFAULT: "#FEF4C7",
dark: "#451A03",
hover: {
DEFAULT: "#FDE68A",
dark: "#78350F",
},
},
text: {
DEFAULT: "#B45309",
dark: "#F59E0B",
},
icon: {
DEFAULT: "#D97706",
dark: "#B45309",
},
border: {
DEFAULT: "#FDE68A",
dark: "#78350F",
DEFAULT: "var(--docs-tags-orange-bg)",
hover: "var(--docs-tags-orange-bg-hover)",
},
text: "var(--docs-tags-orange-text)",
icon: "var(--docs-tags-orange-icon)",
border: "var(--docs-tags-orange-border)",
},
red: {
bg: {
DEFAULT: "#FFE4E6",
dark: "#4C0519",
hover: {
DEFAULT: "#FECDD3",
dark: "#881337",
},
},
text: {
DEFAULT: "#BE123C",
dark: "#FB7185",
},
icon: {
DEFAULT: "#E11D48",
dark: "#F43F5E",
},
border: {
DEFAULT: "#FECDD3",
dark: "#881337",
DEFAULT: "var(--docs-tags-red-bg)",
hover: "var(--docs-tags-red-bg-hover)",
},
text: "var(--docs-tags-red-text)",
icon: "var(--docs-tags-red-icon)",
border: "var(--docs-tags-red-border)",
},
},
code: {
text: {
base: {
DEFAULT: "#F9FAFB",
dark: "#EDEEF0",
},
subtle: {
DEFAULT: "#9CA3AF",
dark: "#696E77",
},
highlight: "#102A4C",
},
icon: {
DEFAULT: "#6B7280",
dark: "#464B50",
base: "var(--docs-code-text-base)",
subtle: "var(--docs-code-text-subtle)",
highlight: "var(--docs-code-text-highlight)",
},
icon: "var(--docs-code-icon)",
bg: {
base: {
DEFAULT: "#111827",
dark: "#1B1B1F",
DEFAULT: "var(--docs-code-bg-base)",
// Need this one for color-fade
transparent: {
DEFAULT: "#11182700",
dark: "#1B1B1F00",
},
},
header: {
DEFAULT: "#1F2937",
dark: "#18181A",
transparent: "var(--docs-code-bg-transparent)",
},
header: "var(--docs-code-bg-header)",
},
border: {
DEFAULT: "#374151",
dark: "#2E3035",
},
border: "var(--docs-code-border)",
},
},
/* docs defaults */
docs: {
bg: {
DEFAULT: "#FFFFFF",
dark: "#18181A",
surface: {
DEFAULT: "#F9FAFB",
dark: "#1B1B1F",
},
DEFAULT: "var(--docs-bg)",
surface: "var(--docs-bg-surface)",
},
},
},
@@ -470,11 +255,8 @@ module.exports = {
"button-danger-pressed-dark":
"linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.14) 100%)",
"code-fade": `linear-gradient(90deg, ${theme(
"colors.medusa.code.bg.base.transparent.DEFAULT"
"colors.medusa.code.bg.base.transparent"
)}, ${theme("colors.medusa.code.bg.base.DEFAULT")} 24px)`,
"code-fade-dark": `linear-gradient(90deg, ${theme(
"colors.medusa.code.bg.base.transparent.dark"
)}, ${theme("colors.medusa.code.bg.base.dark")} 24px)`,
fade: "linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))",
"fade-dark":
"linear-gradient(to top, rgba(27, 27, 31, 1), rgba(27, 27, 31, 0))",
@@ -758,7 +540,8 @@ module.exports = {
},
},
plugins: [
plugin(({ addVariant, addUtilities, addComponents, theme }) => {
plugin(({ addBase, addVariant, addUtilities, addComponents, theme }) => {
addBase(presets)
addVariant("search-cancel", "&::-webkit-search-cancel-button")
addUtilities({
".animation-fill-forwards": {
www/packages/tailwind/theme-presets.js
+194
View File
@@ -0,0 +1,194 @@
const light = {
"--docs-bg-base": "rgba(255, 255, 255, 1)",
"--docs-bg-base-hover": "rgba(249, 250, 251, 1)",
"--docs-bg-base-pressed": "rgba(243, 244, 246, 1)",
"--docs-bg-subtle": "rgba(249, 250, 251, 1)",
"--docs-bg-subtle-hover": "rgba(243, 244, 246, 1)",
"--docs-bg-subtle-pressed": "rgba(229, 231, 235, 1)",
"--docs-bg-component": "rgba(241, 243, 245, 1)",
"--docs-bg-switch-off": "rgba(229, 231, 235, 1)",
"--docs-bg-switch-off-hover": "rgba(209, 213, 219, 1)",
"--docs-bg-interactive": "rgba(59, 130, 246, 1)",
"--docs-bg-overlay": "rgba(3, 7, 18, 0.4)",
"--docs-bg-disabled": "rgba(243, 244, 246, 1)",
"--docs-bg-highlight": "rgba(239, 246, 255, 1)",
"--docs-bg-highlight-hover": "rgba(219, 234, 254, 1)",
"--docs-bg-field": "rgba(249, 250, 251, 1)",
"--docs-bg-field-hover": "rgba(243, 244, 246, 1)",
"--docs-fg-base": "rgba(3, 7, 18, 1)",
"--docs-fg-subtle": "rgba(75, 85, 99, 1)",
"--docs-fg-muted": "rgba(156, 163, 175, 1)",
"--docs-fg-disabled": "rgba(209, 213, 219, 1)",
"--docs-fg-on-color": "rgba(255, 255, 255, 1)",
"--docs-fg-on-inverted": "rgba(255, 255, 255, 1)",
"--docs-fg-interactive": "rgba(59, 130, 246, 1)",
"--docs-fg-interactive-hover": "rgba(37, 99, 235, 1)",
"--docs-fg-error": "rgba(225, 29, 72, 1)",
"--docs-border-base": "rgba(229, 231, 235, 1)",
"--docs-border-strong": "rgba(209, 213, 219, 1)",
"--docs-border-loud": "rgba(3, 7, 18, 1)",
"--docs-border-interactive": "rgba(59, 130, 246, 1)",
"--docs-border-error": "rgba(225, 29, 72, 1)",
"--docs-border-danger": "rgba(190, 18, 60, 1)",
"--docs-border-transparent": "rgba(3, 7, 18, 0)",
"--docs-button-inverted": "rgba(3, 7, 18, 1)",
"--docs-button-inverted-hover": "rgba(31, 41, 55, 1)",
"--docs-button-inverted-pressed": "rgba(55, 65, 81, 1)",
"--docs-button-neutral": "rgba(255, 255, 255, 1)",
"--docs-button-neutral-hover": "rgba(249, 250, 251, 1)",
"--docs-button-neutral-pressed": "rgba(243, 244, 246, 1)",
"--docs-button-danger": "rgba(225, 29, 72, 1)",
"--docs-button-danger-hover": "rgba(225, 29, 72, 1)",
"--docs-button-danger-pressed": "rgba(190, 18, 60, 1)",
"--docs-button-transparent": "rgba(255, 255, 255, 0)",
"--docs-button-transparent-hover": "rgba(249, 250, 251, 1)",
"--docs-button-transparent-pressed": "rgba(243, 244, 246, 1)",
"--docs-button-disabled": "rgba(236, 238, 240, 1)",
"--docs-tags-neutral-bg": "rgba(243, 244, 246, 1)",
"--docs-tags-neutral-bg-hover": "rgba(229, 231, 235, 1)",
"--docs-tags-neutral-text": "rgba(75, 85, 99, 1)",
"--docs-tags-neutral-icon": "rgba(107, 114, 128, 1)",
"--docs-tags-neutral-border": "rgba(229, 231, 235, 1)",
"--docs-tags-purple-bg": "rgba(237, 233, 254, 1)",
"--docs-tags-purple-bg-hover": "rgba(221, 214, 254, 1)",
"--docs-tags-purple-text": "rgba(109, 40, 217, 1)",
"--docs-tags-purple-icon": "rgba(124, 58, 237, 1)",
"--docs-tags-purple-border": "rgba(221, 214, 254, 1)",
"--docs-tags-blue-bg": "rgba(219, 234, 254, 1)",
"--docs-tags-blue-bg-hover": "rgba(191, 219, 254, 1)",
"--docs-tags-blue-text": "rgba(29, 78, 216, 1)",
"--docs-tags-blue-icon": "rgba(37, 99, 235, 1)",
"--docs-tags-blue-border": "rgba(191, 219, 254, 1)",
"--docs-tags-green-bg": "rgba(209, 250, 229, 1)",
"--docs-tags-green-bg-hover": "rgba(167, 243, 208, 1)",
"--docs-tags-green-text": "rgba(4, 120, 87, 1)",
"--docs-tags-green-icon": "rgba(5, 150, 105, 1)",
"--docs-tags-green-border": "rgba(167, 243, 208, 1)",
"--docs-tags-orange-bg": "rgba(254, 244, 199, 1)",
"--docs-tags-orange-bg-hover": "rgba(253, 230, 138, 1)",
"--docs-tags-orange-text": "rgba(180, 83, 9, 1)",
"--docs-tags-orange-icon": "rgba(217, 119, 6, 1)",
"--docs-tags-orange-border": "rgba(253, 230, 138, 1)",
"--docs-tags-red-bg": "rgba(255, 228, 230, 1)",
"--docs-tags-red-bg-hover": "rgba(254, 205, 211, 1)",
"--docs-tags-red-text": "rgba(190, 18, 60, 1)",
"--docs-tags-red-icon": "rgba(225, 29, 72, 1)",
"--docs-tags-red-border": "rgba(254, 205, 211, 1)",
"--docs-code-text-base": "rgba(249, 250, 251, 1)",
"--docs-code-text-subtle": "rgba(156, 163, 175, 1)",
"--docs-code-text-highlight": "rgba(16, 42, 76, 1)",
"--docs-code-icon": "rgba(107, 114, 128, 1)",
"--docs-code-bg-base": "rgba(17, 24, 39, 1)",
"--docs-code-bg-header": "rgba(31, 41, 55, 1)",
"--docs-code-bg-transparent": "rgba(17, 24, 39, 0)",
"--docs-code-border": "rgba(55, 65, 81, 1)",
"--docs-bg": "var(--docs-bg-base)",
"--docs-bg-surface": "var(--docs-bg-subtle)",
}
const dark = {
"--docs-bg-base": "rgba(27, 27, 31, 1)",
"--docs-bg-base-hover": "rgba(39, 40, 45, 1)",
"--docs-bg-base-pressed": "rgba(46, 48, 53, 1)",
"--docs-bg-subtle": "rgba(24, 24, 26, 1)",
"--docs-bg-subtle-hover": "rgba(27, 27, 31, 1)",
"--docs-bg-subtle-pressed": "rgba(39, 40, 45, 1)",
"--docs-bg-component": "rgba(39, 40, 45, 1)",
"--docs-bg-switch-off": "rgba(53, 55, 60, 1)",
"--docs-bg-switch-off-hover": "rgba(70, 75, 80, 1)",
"--docs-bg-interactive": "rgba(96, 165, 250, 1)",
"--docs-bg-overlay": "rgba(24, 24, 26, 0.7)",
"--docs-bg-disabled": "rgba(39, 40, 45, 1)",
"--docs-bg-highlight": "rgba(23, 37, 84, 1)",
"--docs-bg-highlight-hover": "rgba(30, 58, 138, 1)",
"--docs-bg-field": "rgba(39, 40, 45, 1)",
"--docs-bg-field-hover": "rgba(46, 48, 53, 1)",
"--docs-fg-base": "rgba(237, 238, 240, 1)",
"--docs-fg-subtle": "rgba(173, 177, 184, 1)",
"--docs-fg-muted": "rgba(105, 110, 119, 1)",
"--docs-fg-disabled": "rgba(60, 63, 68, 1)",
"--docs-fg-on-color": "rgba(255, 255, 255, 1)",
"--docs-fg-on-inverted": "rgba(24, 24, 26, 1)",
"--docs-fg-interactive": "rgba(96, 165, 250, 1)",
"--docs-fg-interactive-hover": "rgba(59, 130, 246, 1)",
"--docs-fg-error": "rgba(251, 113, 133, 1)",
"--docs-border-base": "rgba(46, 48, 53, 1)",
"--docs-border-strong": "rgba(53, 55, 60, 1)",
"--docs-border-loud": "rgba(237, 238, 240, 1)",
"--docs-border-interactive": "rgba(96, 165, 250, 1)",
"--docs-border-error": "rgba(244, 63, 94, 1)",
"--docs-border-danger": "rgba(190, 18, 60, 1)",
"--docs-border-transparent": "rgba(255, 255, 255, 0)",
"--docs-button-inverted": "rgba(237, 238, 240, 1)",
"--docs-button-inverted-hover": "rgba(255, 255, 255, 1)",
"--docs-button-inverted-pressed": "rgba(237, 238, 240, 1)",
"--docs-button-neutral": "rgba(39, 40, 45, 1)",
"--docs-button-neutral-hover": "rgba(53, 55, 60, 1)",
"--docs-button-neutral-pressed": "rgba(60, 63, 68, 1)",
"--docs-button-danger": "rgba(159, 18, 57, 1)",
"--docs-button-danger-hover": "rgba(190, 18, 60, 1)",
"--docs-button-danger-pressed": "rgba(225, 29, 72, 1)",
"--docs-button-transparent": "rgba(255, 255, 255, 0)",
"--docs-button-transparent-hover": "rgba(39, 40, 45, 1)",
"--docs-button-transparent-pressed": "rgba(46, 48, 53, 1)",
"--docs-button-disabled": "rgba(40, 40, 44, 1)",
"--docs-tags-neutral-bg": "rgba(46, 48, 53, 1)",
"--docs-tags-neutral-bg-hover": "rgba(53, 55, 60, 1)",
"--docs-tags-neutral-text": "rgba(173, 177, 184, 1)",
"--docs-tags-neutral-icon": "rgba(125, 130, 138, 1)",
"--docs-tags-neutral-border": "rgba(60, 63, 68, 1)",
"--docs-tags-purple-bg": "rgba(46, 16, 100, 1)",
"--docs-tags-purple-bg-hover": "rgba(76, 29, 149, 1)",
"--docs-tags-purple-text": "rgba(167, 139, 250, 1)",
"--docs-tags-purple-icon": "rgba(139, 92, 246, 1)",
"--docs-tags-purple-border": "rgba(76, 29, 149, 1)",
"--docs-tags-blue-bg": "rgba(23, 37, 84, 1)",
"--docs-tags-blue-bg-hover": "rgba(30, 42, 138, 1)",
"--docs-tags-blue-text": "rgba(96, 165, 250, 1)",
"--docs-tags-blue-icon": "rgba(59, 130, 246, 1)",
"--docs-tags-blue-border": "rgba(30, 58, 138, 1)",
"--docs-tags-green-bg": "rgba(2, 44, 34, 1)",
"--docs-tags-green-bg-hover": "rgba(6, 78, 59, 1)",
"--docs-tags-green-text": "rgba(52, 211, 153, 1)",
"--docs-tags-green-icon": "rgba(16, 185, 129, 1)",
"--docs-tags-green-border": "rgba(6, 78, 59, 1)",
"--docs-tags-orange-bg": "rgba(69, 26, 3, 1)",
"--docs-tags-orange-bg-hover": "rgba(120, 53, 15, 1)",
"--docs-tags-orange-text": "rgba(251, 191, 36, 1)",
"--docs-tags-orange-icon": "rgba(245, 158, 11, 1)",
"--docs-tags-orange-border": "rgba(120, 53, 15, 1)",
"--docs-tags-red-bg": "rgba(76, 5, 25, 1)",
"--docs-tags-red-bg-hover": "rgba(136, 19, 55, 1)",
"--docs-tags-red-text": "rgba(251, 113, 133, 1)",
"--docs-tags-red-icon": "rgba(244, 63, 94, 1)",
"--docs-tags-red-border": "rgba(136, 19, 55, 1)",
"--docs-code-text-base": "rgba(237, 238, 240, 1)",
"--docs-code-text-subtle": "rgba(105, 110, 119, 1)",
"--docs-code-text-highlight": "rgba(16, 42, 76, 1)",
"--docs-code-icon": "rgba(70, 75, 80, 1)",
"--docs-code-bg-base": "rgba(27, 27, 31, 1)",
"--docs-code-bg-header": "rgba(24, 24, 26, 1)",
"--docs-code-bg-transparent": "rgba(27, 27, 31, 0)",
"--docs-code-border": "rgba(46, 48, 53, 1)",
"--docs-bg": "var(--docs-bg-subtle)",
"--docs-bg-surface": "var(--docs-bg-base)",
}
module.exports = {
":root": light,
".dark": dark,
// eslint-disable-next-line prettier/prettier
"[data-theme=\"dark\"]": dark,
}