From b76cf2b49eeda021b85bdafb64d2259dece6c6f5 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Sat, 30 Apr 2022 09:37:30 +0300
Subject: [PATCH 1/4] chore: upgrade Infima to alpha.39

---
 .../src/theme/DebugRegistry/index.tsx         |  2 +-
 .../src/theme/DebugRegistry/styles.module.css |  5 --
 .../src/theme/DebugRoutes/index.tsx           |  2 +-
 .../src/theme/DebugRoutes/styles.module.css   |  5 --
 .../src/theme/DebugSiteMetadata/index.tsx     |  2 +-
 .../theme/DebugSiteMetadata/styles.module.css |  5 --
 .../docusaurus-theme-classic/package.json     |  2 +-
 .../src/theme-classic.d.ts                    |  1 +
 .../src/theme/BlogListPaginator/index.tsx     | 53 +++++++++----------
 .../src/theme/BlogPostAuthor/index.tsx        | 12 ++---
 .../theme/BlogPostAuthor/styles.module.css    | 12 -----
 .../src/theme/BlogPostPaginator/index.tsx     | 53 +++++++++----------
 .../src/theme/BlogSidebar/Desktop/index.tsx   |  2 +-
 .../BlogSidebar/Desktop/styles.module.css     |  2 -
 .../src/theme/DocPaginator/index.tsx          | 53 +++++++++----------
 .../theme/Footer/Links/MultiColumn/index.tsx  |  2 +-
 .../src/theme/MDXComponents/Ul.module.css     | 11 ----
 .../src/theme/MDXComponents/Ul.tsx            |  8 +--
 .../src/theme/Navbar/Logo/index.tsx           |  2 +-
 .../LocaleDropdownNavbarItem/index.tsx        |  4 +-
 .../src/theme/PaginatorNavLink/index.tsx      | 10 +++-
 website/src/css/custom.css                    |  2 +-
 website/src/pages/showcase/index.tsx          |  8 +--
 website/src/pages/showcase/styles.module.css  |  6 ---
 website/src/utils/prismDark.mjs               |  2 +-
 yarn.lock                                     |  8 +--
 26 files changed, 110 insertions(+), 164 deletions(-)
 delete mode 100644 packages/docusaurus-theme-classic/src/theme/BlogPostAuthor/styles.module.css
 delete mode 100644 packages/docusaurus-theme-classic/src/theme/MDXComponents/Ul.module.css

diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugRegistry/index.tsx b/packages/docusaurus-plugin-debug/src/theme/DebugRegistry/index.tsx
index 0fc809149035..b937bf9040c4 100644
--- a/packages/docusaurus-plugin-debug/src/theme/DebugRegistry/index.tsx
+++ b/packages/docusaurus-plugin-debug/src/theme/DebugRegistry/index.tsx
@@ -15,7 +15,7 @@ export default function DebugRegistry(): JSX.Element {
   return (
     <DebugLayout>
       <h2>Registry</h2>
-      <ul className={styles.list}>
+      <ul className="clean-list">
         {Object.values(registry).map(([, aliasedPath, resolved]) => (
           <li key={aliasedPath} className={styles.listItem}>
             <div style={{marginBottom: '10px'}}>
diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugRegistry/styles.module.css b/packages/docusaurus-plugin-debug/src/theme/DebugRegistry/styles.module.css
index 590719949918..7ba1e93d88d3 100644
--- a/packages/docusaurus-plugin-debug/src/theme/DebugRegistry/styles.module.css
+++ b/packages/docusaurus-plugin-debug/src/theme/DebugRegistry/styles.module.css
@@ -5,12 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.list {
-  padding: 0;
-}
-
 .listItem {
-  list-style: none;
   background-color: #242526;
   padding: 10px;
   border-radius: 4px;
diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugRoutes/index.tsx b/packages/docusaurus-plugin-debug/src/theme/DebugRoutes/index.tsx
index 962c9f508b06..d9d3c5b5fa08 100644
--- a/packages/docusaurus-plugin-debug/src/theme/DebugRoutes/index.tsx
+++ b/packages/docusaurus-plugin-debug/src/theme/DebugRoutes/index.tsx
@@ -16,7 +16,7 @@ export default function DebugRoutes(): JSX.Element {
   return (
     <DebugLayout>
       <h2>Routes</h2>
-      <ul className={styles.list}>
+      <ul className="clean-list">
         {routes.map(({path, exact, routes: childRoutes}) => (
           <li key={path} className={styles.listItem}>
             <div className={styles.route}>
diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugRoutes/styles.module.css b/packages/docusaurus-plugin-debug/src/theme/DebugRoutes/styles.module.css
index e1f2756898d1..1f79735c4f48 100644
--- a/packages/docusaurus-plugin-debug/src/theme/DebugRoutes/styles.module.css
+++ b/packages/docusaurus-plugin-debug/src/theme/DebugRoutes/styles.module.css
@@ -5,12 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.list {
-  padding: 0;
-}
-
 .listItem {
-  list-style: none;
   background-color: #242526;
   padding: 10px;
   border-radius: 4px;
diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugSiteMetadata/index.tsx b/packages/docusaurus-plugin-debug/src/theme/DebugSiteMetadata/index.tsx
index 934e45b97e9c..a30cc3bbc642 100644
--- a/packages/docusaurus-plugin-debug/src/theme/DebugSiteMetadata/index.tsx
+++ b/packages/docusaurus-plugin-debug/src/theme/DebugSiteMetadata/index.tsx
@@ -24,7 +24,7 @@ export default function DebugMetadata(): JSX.Element {
         <code>{siteMetadata.siteVersion || 'No version specified'}</code>
       </div>
       <h3 className={styles.sectionTitle}>Plugins and themes</h3>
-      <ul className={styles.list}>
+      <ul className="clean-list">
         {Object.entries(siteMetadata.pluginVersions).map(
           ([name, versionInformation]) => (
             <li key={name} className={styles.listItem}>
diff --git a/packages/docusaurus-plugin-debug/src/theme/DebugSiteMetadata/styles.module.css b/packages/docusaurus-plugin-debug/src/theme/DebugSiteMetadata/styles.module.css
index 37f3e666f6a2..d5b589b5b6d3 100644
--- a/packages/docusaurus-plugin-debug/src/theme/DebugSiteMetadata/styles.module.css
+++ b/packages/docusaurus-plugin-debug/src/theme/DebugSiteMetadata/styles.module.css
@@ -9,12 +9,7 @@
   margin-top: 20px;
 }
 
-.list {
-  padding: 0;
-}
-
 .listItem {
-  list-style: none;
   background-color: #242526;
   padding: 10px;
   border-radius: 4px;
diff --git a/packages/docusaurus-theme-classic/package.json b/packages/docusaurus-theme-classic/package.json
index d5215a7d6df0..4997746b8cd6 100644
--- a/packages/docusaurus-theme-classic/package.json
+++ b/packages/docusaurus-theme-classic/package.json
@@ -33,7 +33,7 @@
     "@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",
     "postcss": "^8.4.12",
     "prism-react-renderer": "^1.3.1",
diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
index a3388507acc3..7c4a0bfedfa8 100644
--- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts
+++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -938,6 +938,7 @@ declare module '@theme/PaginatorNavLink' {
   export interface Props extends Omit<PropNavigationLink, 'title'> {
     readonly title: ReactNode;
     readonly subLabel?: JSX.Element;
+    readonly isPrev?: boolean;
   }
 
   export default function PaginatorNavLink(props: Props): JSX.Element;
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogListPaginator/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogListPaginator/index.tsx
index 415f4f86369c..1fcfbc27838d 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogListPaginator/index.tsx
+++ b/packages/docusaurus-theme-classic/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>
+          }
+          isPrev
+        />
+      )}
+      {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>
+          }
+        />
+      )}
     </nav>
   );
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostAuthor/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostAuthor/index.tsx
index f4d32b74ca80..8eb68c996cd2 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogPostAuthor/index.tsx
+++ b/packages/docusaurus-theme-classic/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,11 @@ 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={link ? 'avatar__photo-link' : undefined}>
+          <img className="avatar__photo" src={imageURL} alt={name} />
+        </MaybeLink>
       )}
 
       {name && (
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostAuthor/styles.module.css b/packages/docusaurus-theme-classic/src/theme/BlogPostAuthor/styles.module.css
deleted file mode 100644
index aae60add2db9..000000000000
--- a/packages/docusaurus-theme-classic/src/theme/BlogPostAuthor/styles.module.css
+++ /dev/null
@@ -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;
-}
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostPaginator/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostPaginator/index.tsx
index 7adcd60f2f6c..f9b716b86bbf 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogPostPaginator/index.tsx
+++ b/packages/docusaurus-theme-classic/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>
+          }
+          isPrev
+        />
+      )}
+      {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>
+          }
+        />
+      )}
     </nav>
   );
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/Desktop/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/Desktop/index.tsx
index 15e5cecb70d5..ff74637e9ea5 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/Desktop/index.tsx
+++ b/packages/docusaurus-theme-classic/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
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/Desktop/styles.module.css b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/Desktop/styles.module.css
index cf147cd4e369..73a4bd8c041a 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogSidebar/Desktop/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/BlogSidebar/Desktop/styles.module.css
@@ -18,9 +18,7 @@
 }
 
 .sidebarItemList {
-  list-style: none;
   font-size: 0.9rem;
-  padding-left: 0;
 }
 
 .sidebarItem {
diff --git a/packages/docusaurus-theme-classic/src/theme/DocPaginator/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPaginator/index.tsx
index 3b5a9d814213..831904635262 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocPaginator/index.tsx
+++ b/packages/docusaurus-theme-classic/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>
+          }
+          isPrev
+        />
+      )}
+      {next && (
+        <PaginatorNavLink
+          {...next}
+          subLabel={
+            <Translate
+              id="theme.docs.paginator.next"
+              description="The label used to navigate to the next doc">
+              Next
+            </Translate>
+          }
+        />
+      )}
     </nav>
   );
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/Footer/Links/MultiColumn/index.tsx b/packages/docusaurus-theme-classic/src/theme/Footer/Links/MultiColumn/index.tsx
index 75c8f3a64328..a2bad28d8682 100644
--- a/packages/docusaurus-theme-classic/src/theme/Footer/Links/MultiColumn/index.tsx
+++ b/packages/docusaurus-theme-classic/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} />
         ))}
diff --git a/packages/docusaurus-theme-classic/src/theme/MDXComponents/Ul.module.css b/packages/docusaurus-theme-classic/src/theme/MDXComponents/Ul.module.css
deleted file mode 100644
index af91b8ee535d..000000000000
--- a/packages/docusaurus-theme-classic/src/theme/MDXComponents/Ul.module.css
+++ /dev/null
@@ -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;
-}
diff --git a/packages/docusaurus-theme-classic/src/theme/MDXComponents/Ul.tsx b/packages/docusaurus-theme-classic/src/theme/MDXComponents/Ul.tsx
index c8bf10e62b9b..8a0da274ec2c 100644
--- a/packages/docusaurus-theme-classic/src/theme/MDXComponents/Ul.tsx
+++ b/packages/docusaurus-theme-classic/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',
   );
 }
 
diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/Logo/index.tsx b/packages/docusaurus-theme-classic/src/theme/Navbar/Logo/index.tsx
index e1967b955f06..9c04ea9be729 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/Logo/index.tsx
+++ b/packages/docusaurus-theme-classic/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"
     />
   );
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
index d112c188a4dd..620a161b9dee 100644
--- a/packages/docusaurus-theme-classic/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
+++ b/packages/docusaurus-theme-classic/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}
     />
diff --git a/packages/docusaurus-theme-classic/src/theme/PaginatorNavLink/index.tsx b/packages/docusaurus-theme-classic/src/theme/PaginatorNavLink/index.tsx
index 5d34daf13328..3390d7ab5632 100644
--- a/packages/docusaurus-theme-classic/src/theme/PaginatorNavLink/index.tsx
+++ b/packages/docusaurus-theme-classic/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, isPrev} = props;
   return (
-    <Link className="pagination-nav__link" to={permalink}>
+    <Link
+      className={clsx(
+        'pagination-nav__link',
+        isPrev ? 'pagination-nav__link--prev' : 'pagination-nav__link--next',
+      )}
+      to={permalink}>
       {subLabel && <div className="pagination-nav__sublabel">{subLabel}</div>}
       <div className="pagination-nav__label">{title}</div>
     </Link>
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index d4f018b494df..ce3bea8aad58 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -25,7 +25,7 @@ html[data-theme='dark'] {
   --site-color-feedback-background: #f0f8ff;
   --site-color-favorite-background: #1d1e1e;
   --site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 10%);
-  --docusaurus-highlighted-code-line-bg: rgb(66 66 66 / 30%);
+  --docusaurus-highlighted-code-line-bg: rgb(66 66 66 / 35%);
 }
 
 [data-theme='light'] {
diff --git a/website/src/pages/showcase/index.tsx b/website/src/pages/showcase/index.tsx
index 34869ce94ed1..973732d86080 100644
--- a/website/src/pages/showcase/index.tsx
+++ b/website/src/pages/showcase/index.tsx
@@ -168,7 +168,7 @@ function ShowcaseFilters() {
         </div>
         <ShowcaseFilterToggle />
       </div>
-      <ul className={styles.checkboxList}>
+      <ul className="clean-list">
         {TagList.map((tag, i) => {
           const {label, description, color} = Tags[tag];
           const id = `showcase_checkbox_id_${tag}`;
@@ -287,7 +287,7 @@ function ShowcaseCards() {
                 <FavoriteIcon svgClass={styles.svgIconFavorite} />
                 <SearchBar />
               </div>
-              <ul className={clsx('container', styles.showcaseList)}>
+              <ul className="container clean-list">
                 {favoriteUsers.map((user) => (
                   <ShowcaseCard key={user.title} user={user} />
                 ))}
@@ -298,7 +298,7 @@ function ShowcaseCards() {
             <h2 className={styles.showcaseHeader}>
               <Translate id="showcase.usersList.allUsers">All sites</Translate>
             </h2>
-            <ul className={styles.showcaseList}>
+            <ul className="clean-list">
               {otherUsers.map((user) => (
                 <ShowcaseCard key={user.title} user={user} />
               ))}
@@ -314,7 +314,7 @@ function ShowcaseCards() {
             )}>
             <SearchBar />
           </div>
-          <ul className={styles.showcaseList}>
+          <ul className="clean-list">
             {filteredUsers.map((user) => (
               <ShowcaseCard key={user.title} user={user} />
             ))}
diff --git a/website/src/pages/showcase/styles.module.css b/website/src/pages/showcase/styles.module.css
index f9e5e70e9d96..d9cfd94b0428 100644
--- a/website/src/pages/showcase/styles.module.css
+++ b/website/src/pages/showcase/styles.module.css
@@ -30,12 +30,6 @@
   flex-wrap: wrap;
 }
 
-.checkboxList,
-.showcaseList {
-  padding: 0;
-  list-style: none;
-}
-
 .checkboxListItem {
   user-select: none;
   white-space: nowrap;
diff --git a/website/src/utils/prismDark.mjs b/website/src/utils/prismDark.mjs
index 2f25fa12a909..b5c9099190e9 100644
--- a/website/src/utils/prismDark.mjs
+++ b/website/src/utils/prismDark.mjs
@@ -10,7 +10,7 @@ import darkTheme from 'prism-react-renderer/themes/vsDark/index.cjs.js';
 export default {
   plain: {
     color: '#D4D4D4',
-    backgroundColor: '#1E1E1E',
+    backgroundColor: '#212121',
   },
   styles: [
     ...darkTheme.styles,
diff --git a/yarn.lock b/yarn.lock
index 5b1804c30fb6..2d37da780c1e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8508,10 +8508,10 @@ infer-owner@^1.0.4:
   resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
   integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==
 
-infima@0.2.0-alpha.38:
-  version "0.2.0-alpha.38"
-  resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.38.tgz#e41d95c7cd82756549b17df12f613fed4af3d528"
-  integrity sha512-1WsmqSMI5IqzrUx3goq+miJznHBonbE3aoqZ1AR/i/oHhroxNeSV6Awv5VoVfXBhfTzLSnxkHaRI2qpAMYcCzw==
+infima@0.2.0-alpha.39:
+  version "0.2.0-alpha.39"
+  resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.39.tgz#054b13ac44f3e9a42bc083988f1a1586add2f59c"
+  integrity sha512-UyYiwD3nwHakGhuOUfpe3baJ8gkiPpRVx4a4sE/Ag+932+Y6swtLsdPoRR8ezhwqGnduzxmFkjumV9roz6QoLw==
 
 inflight@^1.0.4:
   version "1.0.6"

From 57f86ba805a204f0515ca438a5e272574463674d Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Wed, 4 May 2022 12:50:28 +0300
Subject: [PATCH 2/4] Make less contrast collapse/expand button

---
 .../Sidebar/ExpandButton/styles.module.css    |  8 ++------
 .../Desktop/CollapseButton/styles.module.css  | 20 ++++++++++---------
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Sidebar/ExpandButton/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Sidebar/ExpandButton/styles.module.css
index 8df23b581d4c..ee835664bb46 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocPage/Layout/Sidebar/ExpandButton/styles.module.css
+++ b/packages/docusaurus-theme-classic/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);
-  }
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/CollapseButton/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/CollapseButton/styles.module.css
index 4e225b0bdd93..44f11f21cc75 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/CollapseButton/styles.module.css
+++ b/packages/docusaurus-theme-classic/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);
   }
 }
 

From 28278cbfc60b9229b93b4fc45be8fad405894384 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Wed, 4 May 2022 12:55:19 +0300
Subject: [PATCH 3/4] Pagination fixes

---
 .../src/theme-classic.d.ts                    |  2 +-
 .../src/theme/BlogListPaginator/index.tsx     |  2 +-
 .../src/theme/BlogPostPaginator/index.tsx     |  2 +-
 .../src/theme/DocPaginator/index.tsx          |  2 +-
 .../src/theme/PaginatorNavLink/index.tsx      |  4 +-
 .../theme/ChangelogPaginator/index.tsx        | 53 +++++++++----------
 6 files changed, 31 insertions(+), 34 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
index d1fd7e626527..94a0be2e2a26 100644
--- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts
+++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -997,7 +997,7 @@ declare module '@theme/PaginatorNavLink' {
   export interface Props extends Omit<PropNavigationLink, 'title'> {
     readonly title: ReactNode;
     readonly subLabel?: JSX.Element;
-    readonly isPrev?: boolean;
+    readonly isNext?: boolean;
   }
 
   export default function PaginatorNavLink(props: Props): JSX.Element;
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogListPaginator/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogListPaginator/index.tsx
index 1fcfbc27838d..ff4dda6b4b44 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogListPaginator/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/BlogListPaginator/index.tsx
@@ -32,7 +32,6 @@ export default function BlogListPaginator(props: Props): JSX.Element {
               Newer Entries
             </Translate>
           }
-          isPrev
         />
       )}
       {nextPage && (
@@ -45,6 +44,7 @@ export default function BlogListPaginator(props: Props): JSX.Element {
               Older Entries
             </Translate>
           }
+          isNext
         />
       )}
     </nav>
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostPaginator/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostPaginator/index.tsx
index f9b716b86bbf..acf93a0081e8 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogPostPaginator/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/BlogPostPaginator/index.tsx
@@ -31,7 +31,6 @@ export default function BlogPostPaginator(props: Props): JSX.Element {
               Newer Post
             </Translate>
           }
-          isPrev
         />
       )}
       {nextItem && (
@@ -44,6 +43,7 @@ export default function BlogPostPaginator(props: Props): JSX.Element {
               Older Post
             </Translate>
           }
+          isNext
         />
       )}
     </nav>
diff --git a/packages/docusaurus-theme-classic/src/theme/DocPaginator/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPaginator/index.tsx
index 831904635262..24a625263fda 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocPaginator/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocPaginator/index.tsx
@@ -31,7 +31,6 @@ export default function DocPaginator(props: Props): JSX.Element {
               Previous
             </Translate>
           }
-          isPrev
         />
       )}
       {next && (
@@ -44,6 +43,7 @@ export default function DocPaginator(props: Props): JSX.Element {
               Next
             </Translate>
           }
+          isNext
         />
       )}
     </nav>
diff --git a/packages/docusaurus-theme-classic/src/theme/PaginatorNavLink/index.tsx b/packages/docusaurus-theme-classic/src/theme/PaginatorNavLink/index.tsx
index 3390d7ab5632..1ac9f252a433 100644
--- a/packages/docusaurus-theme-classic/src/theme/PaginatorNavLink/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/PaginatorNavLink/index.tsx
@@ -11,12 +11,12 @@ import Link from '@docusaurus/Link';
 import type {Props} from '@theme/PaginatorNavLink';
 
 export default function PaginatorNavLink(props: Props): JSX.Element {
-  const {permalink, title, subLabel, isPrev} = props;
+  const {permalink, title, subLabel, isNext} = props;
   return (
     <Link
       className={clsx(
         'pagination-nav__link',
-        isPrev ? 'pagination-nav__link--prev' : 'pagination-nav__link--next',
+        isNext ? 'pagination-nav__link--next' : 'pagination-nav__link--prev',
       )}
       to={permalink}>
       {subLabel && <div className="pagination-nav__sublabel">{subLabel}</div>}
diff --git a/website/src/plugins/changelog/theme/ChangelogPaginator/index.tsx b/website/src/plugins/changelog/theme/ChangelogPaginator/index.tsx
index 61ab311f14de..76e99f97c4a6 100644
--- a/website/src/plugins/changelog/theme/ChangelogPaginator/index.tsx
+++ b/website/src/plugins/changelog/theme/ChangelogPaginator/index.tsx
@@ -23,34 +23,31 @@ export default function ChangelogPaginator(props: Props): JSX.Element {
         message: 'Changelog item navigation',
         description: 'The ARIA label for the changelog pagination',
       })}>
-      <div className="pagination-nav__item">
-        {prevItem && (
-          <PaginatorNavLink
-            {...prevItem}
-            subLabel={
-              <Translate
-                id="theme.changelog.post.paginator.newerRelease"
-                description="The changelog button label to navigate to the newer release">
-                Newer release
-              </Translate>
-            }
-          />
-        )}
-      </div>
-      <div className="pagination-nav__item pagination-nav__item--next">
-        {nextItem && (
-          <PaginatorNavLink
-            {...nextItem}
-            subLabel={
-              <Translate
-                id="theme.changelog.post.paginator.olderRelease"
-                description="The changelog button label to navigate to the older release">
-                Older release
-              </Translate>
-            }
-          />
-        )}
-      </div>
+      {prevItem && (
+        <PaginatorNavLink
+          {...prevItem}
+          subLabel={
+            <Translate
+              id="theme.changelog.post.paginator.newerRelease"
+              description="The changelog button label to navigate to the newer release">
+              Newer release
+            </Translate>
+          }
+        />
+      )}
+      {nextItem && (
+        <PaginatorNavLink
+          {...nextItem}
+          subLabel={
+            <Translate
+              id="theme.changelog.post.paginator.olderRelease"
+              description="The changelog button label to navigate to the older release">
+              Older release
+            </Translate>
+          }
+          isNext
+        />
+      )}
     </nav>
   );
 }

From 58206746d1c354b27b6854584ea8568e99274a77 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Wed, 4 May 2022 13:47:00 +0300
Subject: [PATCH 4/4] FIxes

---
 .../src/theme/BlogPostAuthor/index.tsx                        | 4 +---
 website/testCSSOrder.mjs                                      | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostAuthor/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostAuthor/index.tsx
index 8eb68c996cd2..8dce39bd3e06 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogPostAuthor/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/BlogPostAuthor/index.tsx
@@ -22,9 +22,7 @@ export default function BlogPostAuthor({author}: Props): JSX.Element {
   return (
     <div className="avatar margin-bottom--sm">
       {imageURL && (
-        <MaybeLink
-          href={link}
-          className={link ? 'avatar__photo-link' : undefined}>
+        <MaybeLink href={link} className="avatar__photo-link">
           <img className="avatar__photo" src={imageURL} alt={name} />
         </MaybeLink>
       )}
diff --git a/website/testCSSOrder.mjs b/website/testCSSOrder.mjs
index 0b1aaa7129a7..9594c9ab3286 100644
--- a/website/testCSSOrder.mjs
+++ b/website/testCSSOrder.mjs
@@ -32,11 +32,11 @@ const EXPECTED_CSS_MARKERS = [
   '.markdown>h2',
   '.button--outline.button--active',
   '.DocSearch-Hit-content-wrapper',
-  '.navbar__title',
   '--ifm-color-scheme:light',
   '.col[class*=col--]',
   '.padding-vert--xl',
   '.footer__link-item',
+  '.navbar__title',
   '.pagination__item',
   '.pills__item',
   '.tabs__item',