diff --git a/packages/docusaurus-playground/docs/index.md b/packages/docusaurus-playground/docs/index.md index cc26d6b..d2534d7 100644 --- a/packages/docusaurus-playground/docs/index.md +++ b/packages/docusaurus-playground/docs/index.md @@ -52,6 +52,36 @@ const Hello = () => { } ``` +:::note + +The presets: **_ [['classic', {...}]] _** shorthand works as well. + +::: + +:::tip + +Some **content** with _Markdown_ `syntax`. Check [this `api`](#). + +::: + +:::info + +The presets: **_ [['classic', {...}]] _** shorthand works as well. + +::: + +:::caution + +Some **content** with _Markdown_ `syntax`. Check [this `api`](#). + +::: + +:::danger + +The presets: **_ [['classic', {...}]] _** shorthand works as well. + +::: + ## Start your site Run the development server: diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index 7a5fe8f..f7a02fb 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss @@ -49,7 +49,6 @@ /*components*/ --ifm-hero-background-color: var(--ifm-color-black); --ifm-hero-text-color: rgb(var(--lsd-surface-primary)); - --ifm-alert-background-color: var(--ifm-color-gray-100) !important; --ifm-card-background-color: var(--ifm-color-gray-100) !important; --ifm-alert-foreground-color: var(--ifm-color-gray-700); @@ -183,11 +182,30 @@ --ifm-tabs-padding-horizontal: 1rem; --ifm-tabs-padding-vertical: 1rem; + --ifm-alert-background-color: transparent; + --ifm-color-secondary-contrast-background: transparent; + --ifm-color-success-contrast-background: transparent; + --ifm-color-info-contrast-background: transparent; + --ifm-color-warning-contrast-background: transparent; + --ifm-color-danger-contrast-background: transparent; + --ifm-alert-border-radius: none; + --note: #d4d5d8; --tip: #6ace4b; --caution: #ddaa39; --danger: #e46967; --info: #68b1d0; + + --ifm-color-secondary-dark: var(--note); + --ifm-color-secondary-light: var(--note); + --ifm-color-success-dark: var(--tip); + --ifm-color-success-light: var(--tip); + --ifm-color-info-dark: var(--info); + --ifm-color-info-light: var(--info); + --ifm-color-warning-dark: var(--caution); + --ifm-color-warning-light: var(--caution); + --ifm-color-danger-dark: var(--danger); + --ifm-color-danger-light: var(--danger); } @include utils.responsive('lg', 'down') { @@ -201,7 +219,7 @@ body { } svg * { - stroke: rgb(var(--lsd-text-primary)) !important; + stroke: rgb(var(--lsd-text-primary)); } .table-of-contents__link--active { @@ -220,6 +238,10 @@ code { color: rgb(var(--lsd-text-secondary)); } +a code { + color: rgb(var(--lsd-text-secondary)); +} + /* For readability concerns, you should choose a lighter palette in dark mode. */ [data-theme='dark'] { --ifm-hero-background-color: #f8f8fa; diff --git a/packages/logos-docusaurus-theme/src/client/theme/Admonition/index.js b/packages/logos-docusaurus-theme/src/client/theme/Admonition/index.js deleted file mode 100644 index cc4218e..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/Admonition/index.js +++ /dev/null @@ -1,188 +0,0 @@ -import React from 'react' -import clsx from 'clsx' -import { ThemeClassNames } from '@docusaurus/theme-common' -import Translate from '@docusaurus/Translate' -import styles from './styles.module.css' -function NoteIcon() { - return ( - - - - ) -} -function TipIcon() { - return ( - - - - ) -} -function DangerIcon() { - return ( - - - - ) -} -function InfoIcon() { - return ( - - - - ) -} -function CautionIcon() { - return ( - - - - ) -} -// eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style -const AdmonitionConfigs = { - note: { - infimaClassName: 'secondary', - iconComponent: NoteIcon, - label: ( - - note - - ), - }, - tip: { - infimaClassName: 'success', - iconComponent: TipIcon, - label: ( - - tip - - ), - }, - danger: { - infimaClassName: 'danger', - iconComponent: DangerIcon, - label: ( - - danger - - ), - }, - info: { - infimaClassName: 'info', - iconComponent: InfoIcon, - label: ( - - info - - ), - }, - caution: { - infimaClassName: 'warning', - iconComponent: CautionIcon, - label: ( - - caution - - ), - }, -} -// Legacy aliases, undocumented but kept for retro-compatibility -const aliases = { - secondary: 'note', - important: 'info', - success: 'tip', - warning: 'danger', -} -function getAdmonitionConfig(unsafeType) { - const type = aliases[unsafeType] ?? unsafeType - const config = AdmonitionConfigs[type] - if (config) { - return config - } - console.warn( - `No admonition config found for admonition type "${type}". Using Info as fallback.`, - ) - return AdmonitionConfigs.info -} -// Workaround because it's difficult in MDX v1 to provide a MDX title as props -// See https://github.com/facebook/docusaurus/pull/7152#issuecomment-1145779682 -function extractMDXAdmonitionTitle(children) { - const items = React.Children.toArray(children) - const mdxAdmonitionTitle = items.find( - (item) => - React.isValidElement(item) && - item.props?.mdxType === 'mdxAdmonitionTitle', - ) - const rest = <>{items.filter((item) => item !== mdxAdmonitionTitle)} - return { - mdxAdmonitionTitle, - rest, - } -} -function processAdmonitionProps(props) { - const { mdxAdmonitionTitle, rest } = extractMDXAdmonitionTitle(props.children) - return { - ...props, - title: props.title ?? mdxAdmonitionTitle, - children: rest, - } -} -export default function Admonition(props) { - const { - children, - type, - title, - icon: iconProp, - } = processAdmonitionProps(props) - const typeConfig = getAdmonitionConfig(type) - const titleLabel = title ?? typeConfig.label - const { iconComponent: IconComponent } = typeConfig - const icon = iconProp ?? - return ( -
-
- {icon} - {titleLabel} -
-
{children}
-
- ) -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/Admonition/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Admonition/index.tsx new file mode 100644 index 0000000..8899c60 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/theme/Admonition/index.tsx @@ -0,0 +1,233 @@ +import React from 'react' +import clsx from 'clsx' +import { ThemeClassNames } from '@docusaurus/theme-common' +import Translate from '@docusaurus/Translate' +import styles from './styles.module.css' +import { Typography } from '@acid-info/lsd-react' + +function NoteIcon() { + return ( + + + + ) +} + +function TipIcon() { + return ( + + + + ) +} + +function DangerIcon() { + return ( + + + + ) +} + +function InfoIcon() { + return ( + + + + ) +} + +function CautionIcon() { + return ( + + + + ) +} + +// eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style +const AdmonitionConfigs = { + note: { + infimaClassName: 'secondary', + iconComponent: NoteIcon, + label: ( + + note + + ), + }, + tip: { + infimaClassName: 'success', + iconComponent: TipIcon, + label: ( + + tip + + ), + }, + danger: { + infimaClassName: 'danger', + iconComponent: DangerIcon, + label: ( + + danger + + ), + }, + info: { + infimaClassName: 'info', + iconComponent: InfoIcon, + label: ( + + info + + ), + }, + caution: { + infimaClassName: 'warning', + iconComponent: CautionIcon, + label: ( + + caution + + ), + }, +} + +// Legacy aliases, undocumented but kept for retro-compatibility +const aliases = { + secondary: 'note', + important: 'info', + success: 'tip', + warning: 'danger', +} + +function getAdmonitionConfig(unsafeType) { + const type = aliases[unsafeType] ?? unsafeType + const config = AdmonitionConfigs[type] + if (config) { + return config + } + console.warn( + `No admonition config found for admonition type "${type}". Using Info as fallback.`, + ) + return AdmonitionConfigs.info +} + +// Workaround because it's difficult in MDX v1 to provide a MDX title as props +// See https://github.com/facebook/docusaurus/pull/7152#issuecomment-1145779682 +function extractMDXAdmonitionTitle(children) { + const items = React.Children.toArray(children) + const mdxAdmonitionTitle = items.find( + (item) => + React.isValidElement(item) && + item.props?.mdxType === 'mdxAdmonitionTitle', + ) + const rest = <>{items.filter((item) => item !== mdxAdmonitionTitle)} + return { + mdxAdmonitionTitle, + rest, + } +} + +function processAdmonitionProps(props) { + const { mdxAdmonitionTitle, rest } = extractMDXAdmonitionTitle(props.children) + return { + ...props, + title: props.title ?? mdxAdmonitionTitle, + children: rest, + } +} + +export default function Admonition(props) { + const { + children, + type, + title, + icon: iconProp, + } = processAdmonitionProps(props) + const typeConfig = getAdmonitionConfig(type) + const titleLabel = title ?? typeConfig.label + const { iconComponent: IconComponent } = typeConfig + const icon = iconProp ?? + + return ( +
+ {icon} +
+ {/* LSD doesn't support 20px font size, so we use h6 instead */} + + {titleLabel} + + + {children} + +
+
+ ) +} diff --git a/packages/logos-docusaurus-theme/src/client/theme/Admonition/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/Admonition/styles.module.css index 634c9dc..9cafa43 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/Admonition/styles.module.css +++ b/packages/logos-docusaurus-theme/src/client/theme/Admonition/styles.module.css @@ -1,11 +1,15 @@ .admonition { + display: flex; + gap: 18px; margin-bottom: 1em; + border: 1px solid var(--ifm-alert-border-color); + padding: 18px; } .admonitionHeading { font: var(--ifm-heading-font-weight) var(--ifm-h5-font-size) / var(--ifm-heading-line-height) var(--ifm-heading-font-family); - text-transform: uppercase; + text-transform: capitalize; margin-bottom: 0.3rem; } @@ -16,14 +20,17 @@ .admonitionIcon { display: inline-block; vertical-align: middle; - margin-right: 0.4em; } .admonitionIcon svg { display: inline-block; - height: 1.6em; - width: 1.6em; - fill: var(--ifm-alert-foreground-color); + width: 16px; + height: 16px; +} + +.admonitionIcon svg * { + stroke: none !important; + fill: var(--ifm-alert-border-color); } .admonitionContent > :last-child {