diff --git a/packages/docusaurus-playground/docs/index.md b/packages/docusaurus-playground/docs/index.md
index ed09bf9..cc26d6b 100644
--- a/packages/docusaurus-playground/docs/index.md
+++ b/packages/docusaurus-playground/docs/index.md
@@ -40,16 +40,16 @@ You can type this command into Command Prompt, Powershell, Terminal, or any othe
The command also installs all necessary dependencies you need to run Docusaurus.
-```
-import React from 'react';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+```tsx
+import React from 'react'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
const Hello = () => {
-const {siteConfig} = useDocusaurusContext();
- const {title, tagline} = siteConfig;
+ const { siteConfig } = useDocusaurusContext()
+ const { title, tagline } = siteConfig
- return {`${title} · ${tagline}`}
;
-};
+ return {`${title} · ${tagline}`}
+}
```
## Start your site
diff --git a/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx b/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx
index b190b0e..8d2511d 100644
--- a/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx
@@ -40,6 +40,7 @@ export const Icon = (props: TProps): JSX.Element => {
styles.icon,
colorMode === 'dark' ? styles.dark : styles.light,
styles[size],
+ props.className && props.className,
)}
>
{children}
diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss
index 3693312..7a5fe8f 100644
--- a/packages/logos-docusaurus-theme/src/client/css/custom.scss
+++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss
@@ -182,6 +182,12 @@
--ifm-pills-spacing: 0.125rem;
--ifm-tabs-padding-horizontal: 1rem;
--ifm-tabs-padding-vertical: 1rem;
+
+ --note: #d4d5d8;
+ --tip: #6ace4b;
+ --caution: #ddaa39;
+ --danger: #e46967;
+ --info: #68b1d0;
}
@include utils.responsive('lg', 'down') {
@@ -210,6 +216,10 @@ svg * {
color: rgb(var(--lsd-text-secondary)) !important;
}
+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/CodeBlock/Content/String.js b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/String.tsx
similarity index 95%
rename from packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/String.js
rename to packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/String.tsx
index 420a492..dcd43f2 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/String.js
+++ b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/String.tsx
@@ -1,6 +1,6 @@
import React from 'react'
import clsx from 'clsx'
-import { useThemeConfig, usePrismTheme } from '@docusaurus/theme-common'
+import { useThemeConfig } from '@docusaurus/theme-common'
import {
parseCodeBlockTitle,
parseLanguage,
@@ -14,6 +14,8 @@ import CopyButton from '@theme/CodeBlock/CopyButton'
import WordWrapButton from '@theme/CodeBlock/WordWrapButton'
import Container from '@theme/CodeBlock/Container'
import styles from './styles.module.css'
+import theme from './theme'
+
export default function CodeBlockString({
children,
className: blockClassName = '',
@@ -25,9 +27,10 @@ export default function CodeBlockString({
const {
prism: { defaultLanguage, magicComments },
} = useThemeConfig()
+
const language =
languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage
- const prismTheme = usePrismTheme()
+
const wordWrap = useCodeWordWrap()
// We still parse the metastring in case we want to support more syntax in the
// future. Note that MDX doesn't strip quotes when parsing metastring:
@@ -53,7 +56,7 @@ export default function CodeBlockString({
diff --git a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/styles.module.css
index 85696ba..445c6ca 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/styles.module.css
+++ b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/styles.module.css
@@ -63,10 +63,13 @@
background: var(--prism-background-color);
color: var(--prism-color);
border: 1px solid rgb(var(--lsd-border-primary));
- padding: 0.4rem;
line-height: 0;
transition: opacity var(--ifm-transition-fast) ease-in-out;
opacity: 0;
+ width: 28px;
+ height: 28px;
+ box-sizing: border-box;
+ justify-content: center;
}
.buttonGroup button:focus-visible,
diff --git a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/theme.ts b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/theme.ts
new file mode 100644
index 0000000..626f148
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/theme.ts
@@ -0,0 +1,107 @@
+// Converted automatically using ./tools/themeFromVsCode
+import { PrismTheme } from 'prism-react-renderer'
+
+const theme: PrismTheme = {
+ plain: {
+ color: '#ffffff',
+ backgroundColor: '#1E1E1E',
+ },
+ styles: [
+ {
+ types: ['prolog'],
+ style: {
+ color: 'rgb(0, 0, 128)',
+ },
+ },
+ {
+ types: ['comment'],
+ style: {
+ color: 'rgb(106, 153, 85)',
+ },
+ },
+ {
+ types: ['builtin', 'changed', 'keyword', 'interpolation-punctuation'],
+ style: {
+ color: '#BC89BD',
+ },
+ },
+ {
+ types: ['number', 'inserted'],
+ style: {
+ color: 'rgb(181, 206, 168)',
+ },
+ },
+ {
+ types: ['constant'],
+ style: {
+ color: 'rgb(100, 102, 149)',
+ },
+ },
+ {
+ types: ['attr-name', 'variable'],
+ style: {
+ color: 'rgb(156, 220, 254)',
+ },
+ },
+ {
+ types: ['deleted', 'string', 'attr-value', 'template-punctuation'],
+ style: {
+ color: 'rgb(206, 145, 120)',
+ },
+ },
+ {
+ types: ['selector'],
+ style: {
+ color: 'rgb(215, 186, 125)',
+ },
+ },
+ {
+ // Fix tag color
+ types: ['tag'],
+ style: {
+ color: 'rgb(78, 201, 176)',
+ },
+ },
+ {
+ // Fix tag color for HTML
+ types: ['tag'],
+ languages: ['markup'],
+ style: {
+ color: 'rgb(86, 156, 214)',
+ },
+ },
+ {
+ types: ['punctuation', 'operator'],
+ style: {
+ color: 'rgb(212, 212, 212)',
+ },
+ },
+ {
+ // Fix punctuation color for HTML
+ types: ['punctuation'],
+ languages: ['markup'],
+ style: {
+ color: '#808080',
+ },
+ },
+ {
+ types: ['function'],
+ style: {
+ color: 'rgb(220, 220, 170)',
+ },
+ },
+ {
+ types: ['class-name'],
+ style: {
+ color: 'rgb(78, 201, 176)',
+ },
+ },
+ {
+ types: ['char'],
+ style: {
+ color: 'rgb(209, 105, 105)',
+ },
+ },
+ ],
+}
+export default theme
diff --git a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/CopyButton/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/CopyButton/index.tsx
index 26a997b..0d71137 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/CopyButton/index.tsx
+++ b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/CopyButton/index.tsx
@@ -51,8 +51,11 @@ export default function CopyButton({ code, className }) {
onClick={handleCopyCode}
>
-
-
+ {isCopied ? (
+
+ ) : (
+
+ )}
)
diff --git a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/CopyButton/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/CopyButton/styles.module.css
index d5268e9..cb0dffb 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/CopyButton/styles.module.css
+++ b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/CopyButton/styles.module.css
@@ -4,37 +4,30 @@
.copyButtonIcons {
position: relative;
- width: 1.125rem;
- height: 1.125rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.copyButtonIcon,
.copyButtonSuccessIcon {
- position: absolute;
- top: 0;
- left: 0;
fill: currentColor;
opacity: inherit;
- width: inherit;
- height: inherit;
+ width: 14px;
+ height: 14px;
transition: all var(--ifm-transition-fast) ease;
}
.copyButtonSuccessIcon {
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%) scale(0.33);
opacity: 0;
color: #00d600;
}
.copyButtonCopied .copyButtonIcon {
- transform: scale(0.33);
opacity: 0;
}
.copyButtonCopied .copyButtonSuccessIcon {
- transform: translate(-50%, -50%) scale(1);
opacity: 1;
transition-delay: 0.075s;
}