@docusaurus/theme-classic 0.0.0-4861 → 0.0.0-4866

package/lib/theme-classic.d.ts

@@ -692,6 +692,16 @@ declare module '@theme/Navbar/MobileSidebar/Header' {
   export default function NavbarMobileSidebarHeader(): JSX.Element;
 }
 
+declare module '@theme/Navbar/Search' {
+  import type {ReactNode} from 'react';
+
+  export interface Props {
+    readonly children: ReactNode;
+  }
+
+  export default function NavbarSearch(props: Props): JSX.Element;
+}
+
 declare module '@theme/NavbarItem/DefaultNavbarItem' {
   import type {Props as NavbarNavLinkProps} from '@theme/NavbarItem/NavbarNavLink';
 

package/lib/validateThemeConfig.js

@@ -6,8 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.ThemeConfigSchema = exports.DEFAULT_CONFIG = void 0;
 exports.validateThemeConfig = validateThemeConfig;
 
+var _palenight = _interopRequireDefault(require("prism-react-renderer/themes/palenight"));
+
 var _utilsValidation = require("@docusaurus/utils-validation");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
@@ -32,7 +36,8 @@ const DEFAULT_CONFIG = {
   docs: DEFAULT_DOCS_CONFIG,
   metadata: [],
   prism: {
-    additionalLanguages: []
+    additionalLanguages: [],
+    theme: _palenight.default
   },
   navbar: {
     hideOnScroll: false,
@@ -277,7 +282,7 @@ const ThemeConfigSchema = _utilsValidation.Joi.object({
     theme: _utilsValidation.Joi.object({
       plain: _utilsValidation.Joi.alternatives().try(_utilsValidation.Joi.array(), _utilsValidation.Joi.object()).required(),
       styles: _utilsValidation.Joi.alternatives().try(_utilsValidation.Joi.array(), _utilsValidation.Joi.object()).required()
-    }),
+    }).default(DEFAULT_CONFIG.prism.theme),
     darkTheme: _utilsValidation.Joi.object({
       plain: _utilsValidation.Joi.alternatives().try(_utilsValidation.Joi.array(), _utilsValidation.Joi.object()).required(),
       styles: _utilsValidation.Joi.alternatives().try(_utilsValidation.Joi.array(), _utilsValidation.Joi.object()).required()

package/lib-next/theme/CodeBlock/CopyButton/styles.module.css

@@ -7,7 +7,9 @@
 
 .copyButton {
   display: flex;
-  background: inherit;
+  /* TODO: move to base button styling */
+  background: var(--prism-background-color);
+  color: var(--prism-color);
   border: 1px solid var(--ifm-color-emphasis-300);
   border-radius: var(--ifm-global-radius);
   padding: 0.4rem;

package/lib-next/theme/CodeBlock/index.js

@@ -15,6 +15,7 @@ import {
   containsLineNumbers,
   ThemeClassNames,
   usePrismTheme,
+  getPrismCssVariables,
 } from '@docusaurus/theme-common';
 import CopyButton from '@theme/CodeBlock/CopyButton';
 import styles from './styles.module.css';
@@ -42,7 +43,8 @@ export default function CodeBlock({
   // "title=\"xyz\"" => title: "\"xyz\""
 
   const codeBlockTitle = parseCodeBlockTitle(metastring) || title;
-  const prismTheme = usePrismTheme(); // <pre> tags in markdown map to CodeBlocks and they may contain JSX children.
+  const prismTheme = usePrismTheme();
+  const prismCssVariables = getPrismCssVariables(prismTheme); // <pre> tags in markdown map to CodeBlocks and they may contain JSX children.
   // When the children is not a simple string, we just return a styled block
   // without actually highlighting.
 
@@ -54,7 +56,7 @@ export default function CodeBlock({
         theme={prismTheme}
         code=""
         language={'text'}>
-        {({className, style}) => (
+        {({className}) => (
           <pre
             /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
             tabIndex={0}
@@ -66,7 +68,7 @@ export default function CodeBlock({
               blockClassName,
               ThemeClassNames.common.codeBlock,
             )}
-            style={style}>
+            style={prismCssVariables}>
             <code className={styles.codeBlockLines}>{children}</code>
           </pre>
         )}
@@ -87,7 +89,7 @@ export default function CodeBlock({
       theme={prismTheme}
       code={code}
       language={language ?? 'text'}>
-      {({className, style, tokens, getLineProps, getTokenProps}) => (
+      {({className, tokens, getLineProps, getTokenProps}) => (
         <div
           className={clsx(
             styles.codeBlockContainer,
@@ -97,13 +99,12 @@ export default function CodeBlock({
                 language && !blockClassName.includes(`language-${language}`),
             },
             ThemeClassNames.common.codeBlock,
-          )}>
+          )}
+          style={prismCssVariables}>
           {codeBlockTitle && (
-            <div style={style} className={styles.codeBlockTitle}>
-              {codeBlockTitle}
-            </div>
+            <div className={styles.codeBlockTitle}>{codeBlockTitle}</div>
           )}
-          <div className={styles.codeBlockContent} style={style}>
+          <div className={styles.codeBlockContent}>
             <pre
               /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
               tabIndex={0}

package/lib-next/theme/CodeBlock/styles.module.css

@@ -6,6 +6,8 @@
  */
 
 .codeBlockContainer {
+  background: var(--prism-background-color);
+  color: var(--prism-color);
   margin-bottom: var(--ifm-leading);
   box-shadow: var(--ifm-global-shadow-lw);
   border-radius: var(--ifm-code-border-radius);
@@ -28,7 +30,7 @@
 }
 
 .codeBlock {
-  --ifm-pre-background: inherit;
+  --ifm-pre-background: var(--prism-background-color);
   margin: 0;
   padding: 0;
 }
@@ -44,7 +46,6 @@
 
 .codeBlockLines {
   font: inherit;
-  background: var(--ifm-pre-background);
   /* rtl:ignore */
   float: left;
   min-width: 100%;

package/lib-next/theme/Navbar/Content/index.js

@@ -15,6 +15,7 @@ import {
 } from '@docusaurus/theme-common';
 import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
 import NavbarLogo from '@theme/Navbar/Logo';
+import NavbarSearch from '@theme/Navbar/Search';
 import styles from './styles.module.css';
 
 function useNavbarItems() {
@@ -62,7 +63,11 @@ export default function NavbarContent() {
         <>
           <NavbarItems items={rightItems} />
           <NavbarColorModeToggle className={styles.colorModeToggle} />
-          {autoAddSearchBar && <SearchBar />}
+          {autoAddSearchBar && (
+            <NavbarSearch>
+              <SearchBar />
+            </NavbarSearch>
+          )}
         </>
       }
     />

package/lib-next/theme/Navbar/Search/index.js

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import styles from './styles.module.css';
+export default function NavbarSearch({children}) {
+  return <div className={styles.searchBox}>{children}</div>;
+}

package/lib-next/theme/Navbar/Search/styles.module.css

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@media (max-width: 996px) {
+  .searchBox {
+    position: absolute;
+    right: var(--ifm-navbar-padding-horizontal);
+  }
+}
+
+@media (min-width: 997px) {
+  .searchBox {
+    padding: var(--ifm-navbar-item-padding-vertical)
+      var(--ifm-navbar-item-padding-horizontal);
+  }
+}

package/lib-next/theme/NavbarItem/SearchNavbarItem.js

@@ -6,10 +6,15 @@
  */
 import React from 'react';
 import SearchBar from '@theme/SearchBar';
+import NavbarSearch from '@theme/Navbar/Search';
 export default function SearchNavbarItem({mobile}) {
   if (mobile) {
     return null;
   }
 
-  return <SearchBar />;
+  return (
+    <NavbarSearch>
+      <SearchBar />
+    </NavbarSearch>
+  );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-4861",
+  "version": "0.0.0-4866",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -21,15 +21,15 @@
     "format:lib-next": "prettier --config ../../.prettierrc --write \"lib-next/**/*.{js,ts,jsx,tsc}\""
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-4861",
-    "@docusaurus/plugin-content-blog": "0.0.0-4861",
-    "@docusaurus/plugin-content-docs": "0.0.0-4861",
-    "@docusaurus/plugin-content-pages": "0.0.0-4861",
-    "@docusaurus/theme-common": "0.0.0-4861",
-    "@docusaurus/theme-translations": "0.0.0-4861",
-    "@docusaurus/utils": "0.0.0-4861",
-    "@docusaurus/utils-common": "0.0.0-4861",
-    "@docusaurus/utils-validation": "0.0.0-4861",
+    "@docusaurus/core": "0.0.0-4866",
+    "@docusaurus/plugin-content-blog": "0.0.0-4866",
+    "@docusaurus/plugin-content-docs": "0.0.0-4866",
+    "@docusaurus/plugin-content-pages": "0.0.0-4866",
+    "@docusaurus/theme-common": "0.0.0-4866",
+    "@docusaurus/theme-translations": "0.0.0-4866",
+    "@docusaurus/utils": "0.0.0-4866",
+    "@docusaurus/utils-common": "0.0.0-4866",
+    "@docusaurus/utils-validation": "0.0.0-4866",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.0.1",
@@ -45,8 +45,8 @@
     "@babel/cli": "^7.17.6",
     "@babel/core": "^7.17.9",
     "@babel/preset-typescript": "^7.16.7",
-    "@docusaurus/module-type-aliases": "0.0.0-4861",
-    "@docusaurus/types": "0.0.0-4861",
+    "@docusaurus/module-type-aliases": "0.0.0-4866",
+    "@docusaurus/types": "0.0.0-4866",
     "@types/mdx-js__react": "^1.5.5",
     "@types/prismjs": "^1.26.0",
     "@types/rtlcss": "^3.1.3",
@@ -62,5 +62,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "98ec6aafe622a5101a4356e7ea9b30c441e3b977"
+  "gitHead": "73ca22c3217a0a2d68d62b19796fde9a0a498a29"
 }

package/src/theme/CodeBlock/CopyButton/styles.module.css

@@ -7,7 +7,9 @@
 
 .copyButton {
   display: flex;
-  background: inherit;
+  /* TODO: move to base button styling */
+  background: var(--prism-background-color);
+  color: var(--prism-color);
   border: 1px solid var(--ifm-color-emphasis-300);
   border-radius: var(--ifm-global-radius);
   padding: 0.4rem;

package/src/theme/CodeBlock/index.tsx

@@ -16,6 +16,7 @@ import {
   containsLineNumbers,
   ThemeClassNames,
   usePrismTheme,
+  getPrismCssVariables,
 } from '@docusaurus/theme-common';
 import CopyButton from '@theme/CodeBlock/CopyButton';
 import type {Props} from '@theme/CodeBlock';
@@ -50,6 +51,8 @@ export default function CodeBlock({
   const codeBlockTitle = parseCodeBlockTitle(metastring) || title;
   const prismTheme = usePrismTheme();
 
+  const prismCssVariables = getPrismCssVariables(prismTheme);
+
   // <pre> tags in markdown map to CodeBlocks and they may contain JSX children.
   // When the children is not a simple string, we just return a styled block
   // without actually highlighting.
@@ -61,7 +64,7 @@ export default function CodeBlock({
         theme={prismTheme}
         code=""
         language={'text' as Language}>
-        {({className, style}) => (
+        {({className}) => (
           <pre
             /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
             tabIndex={0}
@@ -73,7 +76,7 @@ export default function CodeBlock({
               blockClassName,
               ThemeClassNames.common.codeBlock,
             )}
-            style={style}>
+            style={prismCssVariables}>
             <code className={styles.codeBlockLines}>{children}</code>
           </pre>
         )}
@@ -99,7 +102,7 @@ export default function CodeBlock({
       theme={prismTheme}
       code={code}
       language={(language ?? 'text') as Language}>
-      {({className, style, tokens, getLineProps, getTokenProps}) => (
+      {({className, tokens, getLineProps, getTokenProps}) => (
         <div
           className={clsx(
             styles.codeBlockContainer,
@@ -109,13 +112,12 @@ export default function CodeBlock({
                 language && !blockClassName.includes(`language-${language}`),
             },
             ThemeClassNames.common.codeBlock,
-          )}>
+          )}
+          style={prismCssVariables}>
           {codeBlockTitle && (
-            <div style={style} className={styles.codeBlockTitle}>
-              {codeBlockTitle}
-            </div>
+            <div className={styles.codeBlockTitle}>{codeBlockTitle}</div>
           )}
-          <div className={styles.codeBlockContent} style={style}>
+          <div className={styles.codeBlockContent}>
             <pre
               /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
               tabIndex={0}

package/src/theme/CodeBlock/styles.module.css

@@ -6,6 +6,8 @@
  */
 
 .codeBlockContainer {
+  background: var(--prism-background-color);
+  color: var(--prism-color);
   margin-bottom: var(--ifm-leading);
   box-shadow: var(--ifm-global-shadow-lw);
   border-radius: var(--ifm-code-border-radius);
@@ -28,7 +30,7 @@
 }
 
 .codeBlock {
-  --ifm-pre-background: inherit;
+  --ifm-pre-background: var(--prism-background-color);
   margin: 0;
   padding: 0;
 }
@@ -44,7 +46,6 @@
 
 .codeBlockLines {
   font: inherit;
-  background: var(--ifm-pre-background);
   /* rtl:ignore */
   float: left;
   min-width: 100%;

package/src/theme/Navbar/Content/index.tsx

@@ -17,6 +17,7 @@ import {
 } from '@docusaurus/theme-common';
 import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
 import NavbarLogo from '@theme/Navbar/Logo';
+import NavbarSearch from '@theme/Navbar/Search';
 import styles from './styles.module.css';
 
 function useNavbarItems() {
@@ -73,7 +74,11 @@ export default function NavbarContent(): JSX.Element {
         <>
           <NavbarItems items={rightItems} />
           <NavbarColorModeToggle className={styles.colorModeToggle} />
-          {autoAddSearchBar && <SearchBar />}
+          {autoAddSearchBar && (
+            <NavbarSearch>
+              <SearchBar />
+            </NavbarSearch>
+          )}
         </>
       }
     />

package/src/theme/Navbar/Search/index.tsx

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import type {Props} from '@theme/Navbar/Search';
+
+import styles from './styles.module.css';
+
+export default function NavbarSearch({children}: Props): JSX.Element {
+  return <div className={styles.searchBox}>{children}</div>;
+}

package/src/theme/Navbar/Search/styles.module.css

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@media (max-width: 996px) {
+  .searchBox {
+    position: absolute;
+    right: var(--ifm-navbar-padding-horizontal);
+  }
+}
+
+@media (min-width: 997px) {
+  .searchBox {
+    padding: var(--ifm-navbar-item-padding-vertical)
+      var(--ifm-navbar-item-padding-horizontal);
+  }
+}

package/src/theme/NavbarItem/SearchNavbarItem.tsx

@@ -8,11 +8,16 @@
 import React from 'react';
 import type {Props} from '@theme/NavbarItem/SearchNavbarItem';
 import SearchBar from '@theme/SearchBar';
+import NavbarSearch from '@theme/Navbar/Search';
 
 export default function SearchNavbarItem({mobile}: Props): JSX.Element | null {
   if (mobile) {
     return null;
   }
 
-  return <SearchBar />;
+  return (
+    <NavbarSearch>
+      <SearchBar />
+    </NavbarSearch>
+  );
 }

package/src/theme-classic.d.ts

@@ -692,6 +692,16 @@ declare module '@theme/Navbar/MobileSidebar/Header' {
   export default function NavbarMobileSidebarHeader(): JSX.Element;
 }
 
+declare module '@theme/Navbar/Search' {
+  import type {ReactNode} from 'react';
+
+  export interface Props {
+    readonly children: ReactNode;
+  }
+
+  export default function NavbarSearch(props: Props): JSX.Element;
+}
+
 declare module '@theme/NavbarItem/DefaultNavbarItem' {
   import type {Props as NavbarNavLinkProps} from '@theme/NavbarItem/NavbarNavLink';
 

package/src/validateThemeConfig.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import defaultPrismTheme from 'prism-react-renderer/themes/palenight';
 import {Joi, URISchema} from '@docusaurus/utils-validation';
 import type {
   ThemeConfig,
@@ -32,6 +33,7 @@ export const DEFAULT_CONFIG = {
   metadata: [],
   prism: {
     additionalLanguages: [],
+    theme: defaultPrismTheme,
   },
   navbar: {
     hideOnScroll: false,
@@ -335,7 +337,7 @@ export const ThemeConfigSchema = Joi.object({
     theme: Joi.object({
       plain: Joi.alternatives().try(Joi.array(), Joi.object()).required(),
       styles: Joi.alternatives().try(Joi.array(), Joi.object()).required(),
-    }),
+    }).default(DEFAULT_CONFIG.prism.theme),
     darkTheme: Joi.object({
       plain: Joi.alternatives().try(Joi.array(), Joi.object()).required(),
       styles: Joi.alternatives().try(Joi.array(), Joi.object()).required(),