@docusaurus/theme-classic 0.0.0-4953 → 0.0.0-4962

package/lib/theme-classic.d.ts

@@ -219,7 +219,7 @@ declare module '@theme/CodeBlock/Line' {
 
   export interface Props {
     readonly line: Token[];
-    readonly highlight: boolean;
+    readonly classNames: string[] | undefined;
     readonly showLineNumbers: boolean;
     readonly getLineProps: GetLineProps;
     readonly getTokenProps: GetTokenProps;
@@ -997,6 +997,7 @@ declare module '@theme/PaginatorNavLink' {
   export interface Props extends Omit<PropNavigationLink, 'title'> {
     readonly title: ReactNode;
     readonly subLabel?: JSX.Element;
+    readonly isNext?: boolean;
   }
 
   export default function PaginatorNavLink(props: Props): JSX.Element;

package/lib/validateThemeConfig.js

@@ -45,7 +45,15 @@ const DEFAULT_CONFIG = {
   metadata: [],
   prism: {
     additionalLanguages: [],
-    theme: _palenight.default
+    theme: _palenight.default,
+    magicComments: [{
+      className: 'theme-code-block-highlighted-line',
+      line: 'highlight-next-line',
+      block: {
+        start: 'highlight-start',
+        end: 'highlight-end'
+      }
+    }]
   },
   navbar: {
     hideOnScroll: false,
@@ -320,7 +328,15 @@ const ThemeConfigSchema = _utilsValidation.Joi.object({
       styles: _utilsValidation.Joi.alternatives().try(_utilsValidation.Joi.array(), _utilsValidation.Joi.object()).required()
     }),
     defaultLanguage: _utilsValidation.Joi.string(),
-    additionalLanguages: _utilsValidation.Joi.array().items(_utilsValidation.Joi.string()).default(DEFAULT_CONFIG.prism.additionalLanguages)
+    additionalLanguages: _utilsValidation.Joi.array().items(_utilsValidation.Joi.string()).default(DEFAULT_CONFIG.prism.additionalLanguages),
+    magicComments: _utilsValidation.Joi.array().items(_utilsValidation.Joi.object({
+      className: _utilsValidation.Joi.string().required(),
+      line: _utilsValidation.Joi.string(),
+      block: _utilsValidation.Joi.object({
+        start: _utilsValidation.Joi.string().required(),
+        end: _utilsValidation.Joi.string().required()
+      })
+    }).or('line', 'block')).default(DEFAULT_CONFIG.prism.magicComments)
   }).default(DEFAULT_CONFIG.prism).unknown(),
   hideableSidebar: _utilsValidation.Joi.forbidden().messages({
     'any.unknown': 'themeConfig.hideableSidebar has been moved to themeConfig.docs.sidebar.hideable.'

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

@@ -18,34 +18,31 @@ export default function BlogListPaginator(props) {
         message: 'Blog list page navigation',
         description: 'The ARIA label for the blog pagination',
       })}>
-      <div className="pagination-nav__item">
-        {previousPage && (
-          <PaginatorNavLink
-            permalink={previousPage}
-            title={
-              <Translate
-                id="theme.blog.paginator.newerEntries"
-                description="The label used to navigate to the newer blog posts page (previous page)">
-                Newer Entries
-              </Translate>
-            }
-          />
-        )}
-      </div>
-      <div className="pagination-nav__item pagination-nav__item--next">
-        {nextPage && (
-          <PaginatorNavLink
-            permalink={nextPage}
-            title={
-              <Translate
-                id="theme.blog.paginator.olderEntries"
-                description="The label used to navigate to the older blog posts page (next page)">
-                Older Entries
-              </Translate>
-            }
-          />
-        )}
-      </div>
+      {previousPage && (
+        <PaginatorNavLink
+          permalink={previousPage}
+          title={
+            <Translate
+              id="theme.blog.paginator.newerEntries"
+              description="The label used to navigate to the newer blog posts page (previous page)">
+              Newer Entries
+            </Translate>
+          }
+        />
+      )}
+      {nextPage && (
+        <PaginatorNavLink
+          permalink={nextPage}
+          title={
+            <Translate
+              id="theme.blog.paginator.olderEntries"
+              description="The label used to navigate to the older blog posts page (next page)">
+              Older Entries
+            </Translate>
+          }
+          isNext
+        />
+      )}
     </nav>
   );
 }

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

@@ -6,7 +6,6 @@
  */
 import React from 'react';
 import Link from '@docusaurus/Link';
-import styles from './styles.module.css';
 
 function MaybeLink(props) {
   if (props.href) {
@@ -22,11 +21,9 @@ export default function BlogPostAuthor({author}) {
   return (
     <div className="avatar margin-bottom--sm">
       {imageURL && (
-        <span className="avatar__photo-link avatar__photo">
-          <MaybeLink href={link}>
-            <img className={styles.image} src={imageURL} alt={name} />
-          </MaybeLink>
-        </span>
+        <MaybeLink href={link} className="avatar__photo-link">
+          <img className="avatar__photo" src={imageURL} alt={name} />
+        </MaybeLink>
       )}
 
       {name && (

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

@@ -17,34 +17,31 @@ export default function BlogPostPaginator(props) {
         message: 'Blog post page navigation',
         description: 'The ARIA label for the blog posts pagination',
       })}>
-      <div className="pagination-nav__item">
-        {prevItem && (
-          <PaginatorNavLink
-            {...prevItem}
-            subLabel={
-              <Translate
-                id="theme.blog.post.paginator.newerPost"
-                description="The blog post button label to navigate to the newer/previous post">
-                Newer Post
-              </Translate>
-            }
-          />
-        )}
-      </div>
-      <div className="pagination-nav__item pagination-nav__item--next">
-        {nextItem && (
-          <PaginatorNavLink
-            {...nextItem}
-            subLabel={
-              <Translate
-                id="theme.blog.post.paginator.olderPost"
-                description="The blog post button label to navigate to the older/next post">
-                Older Post
-              </Translate>
-            }
-          />
-        )}
-      </div>
+      {prevItem && (
+        <PaginatorNavLink
+          {...prevItem}
+          subLabel={
+            <Translate
+              id="theme.blog.post.paginator.newerPost"
+              description="The blog post button label to navigate to the newer/previous post">
+              Newer Post
+            </Translate>
+          }
+        />
+      )}
+      {nextItem && (
+        <PaginatorNavLink
+          {...nextItem}
+          subLabel={
+            <Translate
+              id="theme.blog.post.paginator.olderPost"
+              description="The blog post button label to navigate to the older/next post">
+              Older Post
+            </Translate>
+          }
+          isNext
+        />
+      )}
     </nav>
   );
 }

package/lib-next/theme/BlogSidebar/Desktop/index.js

@@ -22,7 +22,7 @@ export default function BlogSidebarDesktop({sidebar}) {
         <div className={clsx(styles.sidebarItemTitle, 'margin-bottom--md')}>
           {sidebar.title}
         </div>
-        <ul className={styles.sidebarItemList}>
+        <ul className={clsx(styles.sidebarItemList, 'clean-list')}>
           {sidebar.items.map((item) => (
             <li key={item.permalink} className={styles.sidebarItem}>
               <Link

package/lib-next/theme/BlogSidebar/Desktop/styles.module.css

@@ -18,9 +18,7 @@
 }
 
 .sidebarItemList {
-  list-style: none;
   font-size: 0.9rem;
-  padding-left: 0;
 }
 
 .sidebarItem {

package/lib-next/theme/CodeBlock/Content/String.js

@@ -30,7 +30,7 @@ export default function CodeBlockString({
   language: languageProp,
 }) {
   const {
-    prism: {defaultLanguage},
+    prism: {defaultLanguage, magicComments},
   } = useThemeConfig();
   const language =
     languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage;
@@ -40,7 +40,11 @@ export default function CodeBlockString({
   // "title=\"xyz\"" => title: "\"xyz\""
 
   const title = parseCodeBlockTitle(metastring) || titleProp;
-  const {highlightLines, code} = parseLines(children, metastring, language);
+  const {lineClassNames, code} = parseLines(children, {
+    metastring,
+    language,
+    magicComments,
+  });
   const showLineNumbers =
     showLineNumbersProp || containsLineNumbers(metastring);
   return (
@@ -76,7 +80,7 @@ export default function CodeBlockString({
                     line={line}
                     getLineProps={getLineProps}
                     getTokenProps={getTokenProps}
-                    highlight={highlightLines.includes(i)}
+                    classNames={lineClassNames[i]}
                     showLineNumbers={showLineNumbers}
                   />
                 ))}

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

@@ -9,7 +9,7 @@ import clsx from 'clsx';
 import styles from './styles.module.css';
 export default function CodeBlockLine({
   line,
-  highlight,
+  classNames,
   showLineNumbers,
   getLineProps,
   getTokenProps,
@@ -20,19 +20,8 @@ export default function CodeBlockLine({
 
   const lineProps = getLineProps({
     line,
-    ...(showLineNumbers && {
-      className: styles.codeLine,
-    }),
+    className: clsx(classNames, showLineNumbers && styles.codeLine),
   });
-
-  if (highlight) {
-    lineProps.className = clsx(
-      lineProps.className,
-      styles.highlightedCodeLine,
-      'theme-code-block-highlighted-line',
-    );
-  }
-
   const lineTokens = line.map((token, key) => (
     <span
       key={key}

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

@@ -5,6 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+:global(.theme-code-block-highlighted-line) {
+  background-color: var(--docusaurus-highlighted-code-line-bg);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+}
+
 /* Intentionally has zero specificity, so that to be able to override
 the background in custom CSS file due bug https://github.com/facebook/docusaurus/issues/3678 */
 :where(:root) {
@@ -15,13 +22,6 @@ the background in custom CSS file due bug https://github.com/facebook/docusaurus
   --docusaurus-highlighted-code-line-bg: rgb(100 100 100);
 }
 
-.highlightedCodeLine {
-  background-color: var(--docusaurus-highlighted-code-line-bg);
-  display: block;
-  margin: 0 calc(-1 * var(--ifm-pre-padding));
-  padding: 0 var(--ifm-pre-padding);
-}
-
 .codeLine {
   display: table-row;
   counter-increment: line-count;

package/lib-next/theme/DocPage/Layout/Sidebar/ExpandButton/styles.module.css

@@ -15,11 +15,12 @@
     align-items: center;
     justify-content: center;
     transition: background-color var(--ifm-transition-fast) ease;
+    background-color: var(--docusaurus-collapse-button-bg);
   }
 
   .expandButton:hover,
   .expandButton:focus {
-    background-color: var(--ifm-color-emphasis-200);
+    background-color: var(--docusaurus-collapse-button-bg-hover);
   }
 
   .expandButtonIcon {
@@ -29,9 +30,4 @@
   [dir='rtl'] .expandButtonIcon {
     transform: rotate(180deg);
   }
-
-  [data-theme='dark'] .expandButton:hover,
-  [data-theme='dark'] .expandButton:focus {
-    background-color: var(--collapse-button-bg-color-dark);
-  }
 }

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

@@ -17,34 +17,31 @@ export default function DocPaginator(props) {
         message: 'Docs pages navigation',
         description: 'The ARIA label for the docs pagination',
       })}>
-      <div className="pagination-nav__item">
-        {previous && (
-          <PaginatorNavLink
-            {...previous}
-            subLabel={
-              <Translate
-                id="theme.docs.paginator.previous"
-                description="The label used to navigate to the previous doc">
-                Previous
-              </Translate>
-            }
-          />
-        )}
-      </div>
-      <div className="pagination-nav__item pagination-nav__item--next">
-        {next && (
-          <PaginatorNavLink
-            {...next}
-            subLabel={
-              <Translate
-                id="theme.docs.paginator.next"
-                description="The label used to navigate to the next doc">
-                Next
-              </Translate>
-            }
-          />
-        )}
-      </div>
+      {previous && (
+        <PaginatorNavLink
+          {...previous}
+          subLabel={
+            <Translate
+              id="theme.docs.paginator.previous"
+              description="The label used to navigate to the previous doc">
+              Previous
+            </Translate>
+          }
+        />
+      )}
+      {next && (
+        <PaginatorNavLink
+          {...next}
+          subLabel={
+            <Translate
+              id="theme.docs.paginator.next"
+              description="The label used to navigate to the next doc">
+              Next
+            </Translate>
+          }
+          isNext
+        />
+      )}
     </nav>
   );
 }

package/lib-next/theme/DocSidebar/Desktop/CollapseButton/styles.module.css

@@ -6,13 +6,19 @@
  */
 
 :root {
-  --collapse-button-bg-color-dark: #2e333a;
+  --docusaurus-collapse-button-bg: transparent;
+  --docusaurus-collapse-button-bg-hover: rgb(0 0 0 / 10%);
+}
+
+[data-theme='dark']:root {
+  --docusaurus-collapse-button-bg: rgb(255 255 255 / 5%);
+  --docusaurus-collapse-button-bg-hover: rgb(255 255 255 / 10%);
 }
 
 @media (min-width: 997px) {
   .collapseSidebarButton {
     display: block !important;
-    background-color: var(--ifm-button-background-color);
+    background-color: var(--docusaurus-collapse-button-bg);
     height: 40px;
     position: sticky;
     bottom: 0;
@@ -29,13 +35,9 @@
     transform: rotate(0);
   }
 
-  [data-theme='dark'] .collapseSidebarButton {
-    background-color: var(--collapse-button-bg-color-dark);
-  }
-
-  [data-theme='dark'] .collapseSidebarButton:hover,
-  [data-theme='dark'] .collapseSidebarButton:focus {
-    background-color: var(--ifm-color-emphasis-200);
+  .collapseSidebarButton:hover,
+  .collapseSidebarButton:focus {
+    background-color: var(--docusaurus-collapse-button-bg-hover);
   }
 }
 

package/lib-next/theme/Footer/Links/MultiColumn/index.js

@@ -27,7 +27,7 @@ function Column({column}) {
   return (
     <div className="col footer__col">
       <div className="footer__title">{column.title}</div>
-      <ul className="footer__items">
+      <ul className="footer__items clean-list">
         {column.items.map((item, i) => (
           <ColumnLinkItem key={i} item={item} />
         ))}

package/lib-next/theme/MDXComponents/Ul.js

@@ -6,15 +6,13 @@
  */
 import React from 'react';
 import clsx from 'clsx';
-import styles from './Ul.module.css';
-const containsClassListLocalClass = styles['contains-task-list'];
 
 function transformUlClassName(className) {
   return clsx(
     className, // This class is set globally by GitHub/MDX
-    // We keep the global class, but apply scoped CSS
+    // We keep the global class, but add Infima class to get list without styling
     // See https://github.com/syntax-tree/mdast-util-to-hast/issues/28
-    className?.includes('contains-task-list') && containsClassListLocalClass,
+    className?.includes('contains-task-list') && 'clean-list',
   );
 }
 

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

@@ -11,7 +11,7 @@ export default function NavbarLogo() {
     <Logo
       className="navbar__brand"
       imageClassName="navbar__logo"
-      titleClassName="navbar__title"
+      titleClassName="navbar__title text--truncate"
     />
   );
 }

package/lib-next/theme/NavbarItem/LocaleDropdownNavbarItem/index.js

@@ -49,10 +49,10 @@ export default function LocaleDropdownNavbarItem({
       {...props}
       mobile={mobile}
       label={
-        <span>
+        <>
           <IconLanguage className={styles.iconLanguage} />
           {dropdownLabel}
-        </span>
+        </>
       }
       items={items}
     />

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

@@ -5,11 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 export default function PaginatorNavLink(props) {
-  const {permalink, title, subLabel} = props;
+  const {permalink, title, subLabel, isNext} = props;
   return (
-    <Link className="pagination-nav__link" to={permalink}>
+    <Link
+      className={clsx(
+        'pagination-nav__link',
+        isNext ? 'pagination-nav__link--next' : 'pagination-nav__link--prev',
+      )}
+      to={permalink}>
       {subLabel && <div className="pagination-nav__sublabel">{subLabel}</div>}
       <div className="pagination-nav__label">{title}</div>
     </Link>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-4953",
+  "version": "0.0.0-4962",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -21,19 +21,19 @@
     "format:lib-next": "prettier --config ../../.prettierrc --write \"lib-next/**/*.{js,ts,jsx,tsc}\""
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-4953",
-    "@docusaurus/plugin-content-blog": "0.0.0-4953",
-    "@docusaurus/plugin-content-docs": "0.0.0-4953",
-    "@docusaurus/plugin-content-pages": "0.0.0-4953",
-    "@docusaurus/theme-common": "0.0.0-4953",
-    "@docusaurus/theme-translations": "0.0.0-4953",
-    "@docusaurus/utils": "0.0.0-4953",
-    "@docusaurus/utils-common": "0.0.0-4953",
-    "@docusaurus/utils-validation": "0.0.0-4953",
+    "@docusaurus/core": "0.0.0-4962",
+    "@docusaurus/plugin-content-blog": "0.0.0-4962",
+    "@docusaurus/plugin-content-docs": "0.0.0-4962",
+    "@docusaurus/plugin-content-pages": "0.0.0-4962",
+    "@docusaurus/theme-common": "0.0.0-4962",
+    "@docusaurus/theme-translations": "0.0.0-4962",
+    "@docusaurus/utils": "0.0.0-4962",
+    "@docusaurus/utils-common": "0.0.0-4962",
+    "@docusaurus/utils-validation": "0.0.0-4962",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.0.1",
-    "infima": "0.2.0-alpha.38",
+    "infima": "0.2.0-alpha.39",
     "lodash": "^4.17.21",
     "nprogress": "^0.2.0",
     "postcss": "^8.4.13",
@@ -46,8 +46,8 @@
     "@babel/cli": "^7.17.10",
     "@babel/core": "^7.17.10",
     "@babel/preset-typescript": "^7.16.7",
-    "@docusaurus/module-type-aliases": "0.0.0-4953",
-    "@docusaurus/types": "0.0.0-4953",
+    "@docusaurus/module-type-aliases": "0.0.0-4962",
+    "@docusaurus/types": "0.0.0-4962",
     "@types/mdx-js__react": "^1.5.5",
     "@types/nprogress": "^0.2.0",
     "@types/prismjs": "^1.26.0",
@@ -64,5 +64,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "743ce473689da566f982a0fff79c71dc24d7a573"
+  "gitHead": "09d93ecee8d2d83cd27166af3c6bf4fb12abf2e7"
 }

package/src/theme/BlogListPaginator/index.tsx

@@ -22,34 +22,31 @@ export default function BlogListPaginator(props: Props): JSX.Element {
         message: 'Blog list page navigation',
         description: 'The ARIA label for the blog pagination',
       })}>
-      <div className="pagination-nav__item">
-        {previousPage && (
-          <PaginatorNavLink
-            permalink={previousPage}
-            title={
-              <Translate
-                id="theme.blog.paginator.newerEntries"
-                description="The label used to navigate to the newer blog posts page (previous page)">
-                Newer Entries
-              </Translate>
-            }
-          />
-        )}
-      </div>
-      <div className="pagination-nav__item pagination-nav__item--next">
-        {nextPage && (
-          <PaginatorNavLink
-            permalink={nextPage}
-            title={
-              <Translate
-                id="theme.blog.paginator.olderEntries"
-                description="The label used to navigate to the older blog posts page (next page)">
-                Older Entries
-              </Translate>
-            }
-          />
-        )}
-      </div>
+      {previousPage && (
+        <PaginatorNavLink
+          permalink={previousPage}
+          title={
+            <Translate
+              id="theme.blog.paginator.newerEntries"
+              description="The label used to navigate to the newer blog posts page (previous page)">
+              Newer Entries
+            </Translate>
+          }
+        />
+      )}
+      {nextPage && (
+        <PaginatorNavLink
+          permalink={nextPage}
+          title={
+            <Translate
+              id="theme.blog.paginator.olderEntries"
+              description="The label used to navigate to the older blog posts page (next page)">
+              Older Entries
+            </Translate>
+          }
+          isNext
+        />
+      )}
     </nav>
   );
 }

package/src/theme/BlogPostAuthor/index.tsx

@@ -9,8 +9,6 @@ import React from 'react';
 import Link, {type Props as LinkProps} from '@docusaurus/Link';
 import type {Props} from '@theme/BlogPostAuthor';
 
-import styles from './styles.module.css';
-
 function MaybeLink(props: LinkProps): JSX.Element {
   if (props.href) {
     return <Link {...props} />;
@@ -24,11 +22,9 @@ export default function BlogPostAuthor({author}: Props): JSX.Element {
   return (
     <div className="avatar margin-bottom--sm">
       {imageURL && (
-        <span className="avatar__photo-link avatar__photo">
-          <MaybeLink href={link}>
-            <img className={styles.image} src={imageURL} alt={name} />
-          </MaybeLink>
-        </span>
+        <MaybeLink href={link} className="avatar__photo-link">
+          <img className="avatar__photo" src={imageURL} alt={name} />
+        </MaybeLink>
       )}
 
       {name && (

package/src/theme/BlogPostPaginator/index.tsx

@@ -21,34 +21,31 @@ export default function BlogPostPaginator(props: Props): JSX.Element {
         message: 'Blog post page navigation',
         description: 'The ARIA label for the blog posts pagination',
       })}>
-      <div className="pagination-nav__item">
-        {prevItem && (
-          <PaginatorNavLink
-            {...prevItem}
-            subLabel={
-              <Translate
-                id="theme.blog.post.paginator.newerPost"
-                description="The blog post button label to navigate to the newer/previous post">
-                Newer Post
-              </Translate>
-            }
-          />
-        )}
-      </div>
-      <div className="pagination-nav__item pagination-nav__item--next">
-        {nextItem && (
-          <PaginatorNavLink
-            {...nextItem}
-            subLabel={
-              <Translate
-                id="theme.blog.post.paginator.olderPost"
-                description="The blog post button label to navigate to the older/next post">
-                Older Post
-              </Translate>
-            }
-          />
-        )}
-      </div>
+      {prevItem && (
+        <PaginatorNavLink
+          {...prevItem}
+          subLabel={
+            <Translate
+              id="theme.blog.post.paginator.newerPost"
+              description="The blog post button label to navigate to the newer/previous post">
+              Newer Post
+            </Translate>
+          }
+        />
+      )}
+      {nextItem && (
+        <PaginatorNavLink
+          {...nextItem}
+          subLabel={
+            <Translate
+              id="theme.blog.post.paginator.olderPost"
+              description="The blog post button label to navigate to the older/next post">
+              Older Post
+            </Translate>
+          }
+          isNext
+        />
+      )}
     </nav>
   );
 }

package/src/theme/BlogSidebar/Desktop/index.tsx

@@ -26,7 +26,7 @@ export default function BlogSidebarDesktop({sidebar}: Props): JSX.Element {
         <div className={clsx(styles.sidebarItemTitle, 'margin-bottom--md')}>
           {sidebar.title}
         </div>
-        <ul className={styles.sidebarItemList}>
+        <ul className={clsx(styles.sidebarItemList, 'clean-list')}>
           {sidebar.items.map((item) => (
             <li key={item.permalink} className={styles.sidebarItem}>
               <Link

package/src/theme/BlogSidebar/Desktop/styles.module.css

@@ -18,9 +18,7 @@
 }
 
 .sidebarItemList {
-  list-style: none;
   font-size: 0.9rem;
-  padding-left: 0;
 }
 
 .sidebarItem {

package/src/theme/CodeBlock/Content/String.tsx

@@ -34,7 +34,7 @@ export default function CodeBlockString({
   language: languageProp,
 }: Props): JSX.Element {
   const {
-    prism: {defaultLanguage},
+    prism: {defaultLanguage, magicComments},
   } = useThemeConfig();
   const language =
     languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage;
@@ -46,7 +46,11 @@ export default function CodeBlockString({
   // "title=\"xyz\"" => title: "\"xyz\""
   const title = parseCodeBlockTitle(metastring) || titleProp;
 
-  const {highlightLines, code} = parseLines(children, metastring, language);
+  const {lineClassNames, code} = parseLines(children, {
+    metastring,
+    language,
+    magicComments,
+  });
   const showLineNumbers =
     showLineNumbersProp || containsLineNumbers(metastring);
 
@@ -83,7 +87,7 @@ export default function CodeBlockString({
                     line={line}
                     getLineProps={getLineProps}
                     getTokenProps={getTokenProps}
-                    highlight={highlightLines.includes(i)}
+                    classNames={lineClassNames[i]}
                     showLineNumbers={showLineNumbers}
                   />
                 ))}

package/src/theme/CodeBlock/Line/index.tsx

@@ -12,7 +12,7 @@ import styles from './styles.module.css';
 
 export default function CodeBlockLine({
   line,
-  highlight,
+  classNames,
   showLineNumbers,
   getLineProps,
   getTokenProps,
@@ -23,17 +23,9 @@ export default function CodeBlockLine({
 
   const lineProps = getLineProps({
     line,
-    ...(showLineNumbers && {className: styles.codeLine}),
+    className: clsx(classNames, showLineNumbers && styles.codeLine),
   });
 
-  if (highlight) {
-    lineProps.className = clsx(
-      lineProps.className,
-      styles.highlightedCodeLine,
-      'theme-code-block-highlighted-line',
-    );
-  }
-
   const lineTokens = line.map((token, key) => (
     <span key={key} {...getTokenProps({token, key})} />
   ));

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

@@ -5,6 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+:global(.theme-code-block-highlighted-line) {
+  background-color: var(--docusaurus-highlighted-code-line-bg);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+}
+
 /* Intentionally has zero specificity, so that to be able to override
 the background in custom CSS file due bug https://github.com/facebook/docusaurus/issues/3678 */
 :where(:root) {
@@ -15,13 +22,6 @@ the background in custom CSS file due bug https://github.com/facebook/docusaurus
   --docusaurus-highlighted-code-line-bg: rgb(100 100 100);
 }
 
-.highlightedCodeLine {
-  background-color: var(--docusaurus-highlighted-code-line-bg);
-  display: block;
-  margin: 0 calc(-1 * var(--ifm-pre-padding));
-  padding: 0 var(--ifm-pre-padding);
-}
-
 .codeLine {
   display: table-row;
   counter-increment: line-count;

package/src/theme/DocPage/Layout/Sidebar/ExpandButton/styles.module.css

@@ -15,11 +15,12 @@
     align-items: center;
     justify-content: center;
     transition: background-color var(--ifm-transition-fast) ease;
+    background-color: var(--docusaurus-collapse-button-bg);
   }
 
   .expandButton:hover,
   .expandButton:focus {
-    background-color: var(--ifm-color-emphasis-200);
+    background-color: var(--docusaurus-collapse-button-bg-hover);
   }
 
   .expandButtonIcon {
@@ -29,9 +30,4 @@
   [dir='rtl'] .expandButtonIcon {
     transform: rotate(180deg);
   }
-
-  [data-theme='dark'] .expandButton:hover,
-  [data-theme='dark'] .expandButton:focus {
-    background-color: var(--collapse-button-bg-color-dark);
-  }
 }

package/src/theme/DocPaginator/index.tsx

@@ -21,34 +21,31 @@ export default function DocPaginator(props: Props): JSX.Element {
         message: 'Docs pages navigation',
         description: 'The ARIA label for the docs pagination',
       })}>
-      <div className="pagination-nav__item">
-        {previous && (
-          <PaginatorNavLink
-            {...previous}
-            subLabel={
-              <Translate
-                id="theme.docs.paginator.previous"
-                description="The label used to navigate to the previous doc">
-                Previous
-              </Translate>
-            }
-          />
-        )}
-      </div>
-      <div className="pagination-nav__item pagination-nav__item--next">
-        {next && (
-          <PaginatorNavLink
-            {...next}
-            subLabel={
-              <Translate
-                id="theme.docs.paginator.next"
-                description="The label used to navigate to the next doc">
-                Next
-              </Translate>
-            }
-          />
-        )}
-      </div>
+      {previous && (
+        <PaginatorNavLink
+          {...previous}
+          subLabel={
+            <Translate
+              id="theme.docs.paginator.previous"
+              description="The label used to navigate to the previous doc">
+              Previous
+            </Translate>
+          }
+        />
+      )}
+      {next && (
+        <PaginatorNavLink
+          {...next}
+          subLabel={
+            <Translate
+              id="theme.docs.paginator.next"
+              description="The label used to navigate to the next doc">
+              Next
+            </Translate>
+          }
+          isNext
+        />
+      )}
     </nav>
   );
 }

package/src/theme/DocSidebar/Desktop/CollapseButton/styles.module.css

@@ -6,13 +6,19 @@
  */
 
 :root {
-  --collapse-button-bg-color-dark: #2e333a;
+  --docusaurus-collapse-button-bg: transparent;
+  --docusaurus-collapse-button-bg-hover: rgb(0 0 0 / 10%);
+}
+
+[data-theme='dark']:root {
+  --docusaurus-collapse-button-bg: rgb(255 255 255 / 5%);
+  --docusaurus-collapse-button-bg-hover: rgb(255 255 255 / 10%);
 }
 
 @media (min-width: 997px) {
   .collapseSidebarButton {
     display: block !important;
-    background-color: var(--ifm-button-background-color);
+    background-color: var(--docusaurus-collapse-button-bg);
     height: 40px;
     position: sticky;
     bottom: 0;
@@ -29,13 +35,9 @@
     transform: rotate(0);
   }
 
-  [data-theme='dark'] .collapseSidebarButton {
-    background-color: var(--collapse-button-bg-color-dark);
-  }
-
-  [data-theme='dark'] .collapseSidebarButton:hover,
-  [data-theme='dark'] .collapseSidebarButton:focus {
-    background-color: var(--ifm-color-emphasis-200);
+  .collapseSidebarButton:hover,
+  .collapseSidebarButton:focus {
+    background-color: var(--docusaurus-collapse-button-bg-hover);
   }
 }
 

package/src/theme/Footer/Links/MultiColumn/index.tsx

@@ -31,7 +31,7 @@ function Column({column}: {column: ColumnType}) {
   return (
     <div className="col footer__col">
       <div className="footer__title">{column.title}</div>
-      <ul className="footer__items">
+      <ul className="footer__items clean-list">
         {column.items.map((item, i) => (
           <ColumnLinkItem key={i} item={item} />
         ))}

package/src/theme/MDXComponents/Ul.tsx

@@ -9,17 +9,13 @@ import React from 'react';
 import clsx from 'clsx';
 import type {Props} from '@theme/MDXComponents/Ul';
 
-import styles from './Ul.module.css';
-
-const containsClassListLocalClass = styles['contains-task-list'];
-
 function transformUlClassName(className?: string): string {
   return clsx(
     className,
     // This class is set globally by GitHub/MDX
-    // We keep the global class, but apply scoped CSS
+    // We keep the global class, but add Infima class to get list without styling
     // See https://github.com/syntax-tree/mdast-util-to-hast/issues/28
-    className?.includes('contains-task-list') && containsClassListLocalClass,
+    className?.includes('contains-task-list') && 'clean-list',
   );
 }
 

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

@@ -13,7 +13,7 @@ export default function NavbarLogo(): JSX.Element {
     <Logo
       className="navbar__brand"
       imageClassName="navbar__logo"
-      titleClassName="navbar__title"
+      titleClassName="navbar__title text--truncate"
     />
   );
 }

package/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx

@@ -58,10 +58,10 @@ export default function LocaleDropdownNavbarItem({
       {...props}
       mobile={mobile}
       label={
-        <span>
+        <>
           <IconLanguage className={styles.iconLanguage} />
           {dropdownLabel}
-        </span>
+        </>
       }
       items={items}
     />

package/src/theme/PaginatorNavLink/index.tsx

@@ -6,13 +6,19 @@
  */
 
 import React from 'react';
+import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import type {Props} from '@theme/PaginatorNavLink';
 
 export default function PaginatorNavLink(props: Props): JSX.Element {
-  const {permalink, title, subLabel} = props;
+  const {permalink, title, subLabel, isNext} = props;
   return (
-    <Link className="pagination-nav__link" to={permalink}>
+    <Link
+      className={clsx(
+        'pagination-nav__link',
+        isNext ? 'pagination-nav__link--next' : 'pagination-nav__link--prev',
+      )}
+      to={permalink}>
       {subLabel && <div className="pagination-nav__sublabel">{subLabel}</div>}
       <div className="pagination-nav__label">{title}</div>
     </Link>

package/src/theme-classic.d.ts

@@ -219,7 +219,7 @@ declare module '@theme/CodeBlock/Line' {
 
   export interface Props {
     readonly line: Token[];
-    readonly highlight: boolean;
+    readonly classNames: string[] | undefined;
     readonly showLineNumbers: boolean;
     readonly getLineProps: GetLineProps;
     readonly getTokenProps: GetTokenProps;
@@ -997,6 +997,7 @@ declare module '@theme/PaginatorNavLink' {
   export interface Props extends Omit<PropNavigationLink, 'title'> {
     readonly title: ReactNode;
     readonly subLabel?: JSX.Element;
+    readonly isNext?: boolean;
   }
 
   export default function PaginatorNavLink(props: Props): JSX.Element;

package/src/validateThemeConfig.ts

@@ -44,6 +44,13 @@ export const DEFAULT_CONFIG = {
   prism: {
     additionalLanguages: [],
     theme: defaultPrismTheme,
+    magicComments: [
+      {
+        className: 'theme-code-block-highlighted-line',
+        line: 'highlight-next-line',
+        block: {start: 'highlight-start', end: 'highlight-end'},
+      },
+    ],
   },
   navbar: {
     hideOnScroll: false,
@@ -386,6 +393,18 @@ export const ThemeConfigSchema = Joi.object({
     additionalLanguages: Joi.array()
       .items(Joi.string())
       .default(DEFAULT_CONFIG.prism.additionalLanguages),
+    magicComments: Joi.array()
+      .items(
+        Joi.object({
+          className: Joi.string().required(),
+          line: Joi.string(),
+          block: Joi.object({
+            start: Joi.string().required(),
+            end: Joi.string().required(),
+          }),
+        }).or('line', 'block'),
+      )
+      .default(DEFAULT_CONFIG.prism.magicComments),
   })
     .default(DEFAULT_CONFIG.prism)
     .unknown(),

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

@@ -1,12 +0,0 @@
-/**
- * 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.
- */
-
-.image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}

package/lib-next/theme/MDXComponents/Ul.module.css

@@ -1,11 +0,0 @@
-/**
- * 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.
- */
-
-.contains-task-list {
-  padding-left: 0;
-  list-style: none;
-}

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

@@ -1,12 +0,0 @@
-/**
- * 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.
- */
-
-.image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}

package/src/theme/MDXComponents/Ul.module.css

@@ -1,11 +0,0 @@
-/**
- * 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.
- */
-
-.contains-task-list {
-  padding-left: 0;
-  list-style: none;
-}