From 103dd9f717d1ba19f6bdafec7f752abd226107be Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Thu, 5 Nov 2026 16:22:48 -0800
Subject: [PATCH] chore(styles): restructure stylesheets to follow Docusaurus'
 layout

---
 docusaurus.config.js                          |   2 +-
 .../global/BestPracticeFigure/index.tsx       | 106 +++----
 ...-practice-figure.css => styles.module.css} |  32 +-
 src/components/global/DocDemo/index.js        |  28 +-
 .../DocDemo/{demo.css => styles.module.css}   |  48 ++-
 src/components/global/DocsCard/index.tsx      |   6 +-
 .../global/DocsCard/styles.module.scss        |  96 +-----
 src/components/global/DocsCards/cards.css     |  20 --
 .../{IconDots.css => IconDots.module.css}     |  12 +-
 .../global/Playground/icons/IconDots.tsx      |   4 +-
 .../global/PlaygroundTabs/styles.module.css   |   8 -
 src/components/global/Tooltip/index.tsx       |   6 +-
 .../{tooltip.css => styles.module.css}        |   2 +-
 .../page/api/EncapsulationPill/index.tsx      |   2 +-
 .../api/EncapsulationPill/styles.module.scss  |   3 +
 .../page/intro/AppWizard/index.module.scss    |   2 +-
 .../NativeEnterpriseCard/index.module.scss    |  64 ----
 .../theming/ColorGenerator/styles.module.scss |  20 --
 src/css/README.md                             |  57 ++++
 src/{styles => css}/_mixins.scss              |   4 +-
 src/{styles => css}/custom.scss               | 138 ++------
 .../theme/Admonition.scss}                    |  16 +-
 src/css/theme/AnnouncementBar.scss            |  40 +++
 .../theme/BackToTopButton.scss}               |   2 +-
 .../_code.scss => css/theme/CodeBlock.scss}   |  12 +-
 .../theme/DocItem/Content.scss}               |  57 +---
 src/css/theme/DocPaginator.scss               |  42 +++
 .../theme/DocSidebar.scss}                    |  82 ++---
 .../theme/EditThisPage.scss}                  |   0
 .../theme/MDXComponents/Table.scss}           |  24 --
 src/css/theme/Navbar.scss                     | 266 ++++++++++++++++
 .../theme/Navbar/MobileSidebar.scss}          |  37 +--
 .../_search.scss => css/theme/SearchBar.scss} |  44 ++-
 src/css/theme/TOC.scss                        |  26 ++
 .../_tabs.scss => css/theme/Tabs.scss}        |   6 +-
 src/styles/README.md                          |   6 -
 src/styles/components/README.md               |  37 ---
 src/styles/components/_doc-item.scss          |  78 -----
 src/styles/components/_doc-root.scss          |  21 --
 src/styles/components/_navbar.scss            | 300 ------------------
 src/styles/components/_pagination.scss        |  46 ---
 src/styles/components/_toc.scss               |  94 ------
 src/theme/DocItem/Layout/index.tsx            |  14 +-
 src/theme/DocItem/Layout/styles.module.css    |  65 ++++
 src/theme/DocRoot/Layout/Main/index.tsx       |   4 +-
 .../DocRoot/Layout/Main/styles.module.css     |  10 +
 src/theme/DocSidebar/index.tsx                |   4 +-
 src/theme/DocSidebar/styles.module.css        |   6 +
 src/theme/EditMetaRow/index.tsx               |   5 +-
 src/theme/EditMetaRow/styles.module.css       |  26 ++
 src/theme/Icon/Edit/index.tsx                 |   2 +-
 src/theme/Icon/Edit/styles.module.css         |  11 +
 src/theme/Layout/index.tsx                    |   2 +-
 src/theme/Layout/styles.module.css            |  28 ++
 .../{Table.tsx => Table/index.tsx}            |   4 +-
 .../MDXComponents/Table/styles.module.css     |   3 +
 .../LocaleDropdownNavbarItem/index.tsx        |   5 +-
 .../styles.module.css                         |  34 +-
 src/theme/README.md                           |  12 +-
 src/theme/TOC/index.tsx                       |   6 +-
 src/theme/TOC/styles.module.css               |  54 ++++
 61 files changed, 921 insertions(+), 1270 deletions(-)
 rename src/components/global/BestPracticeFigure/{best-practice-figure.css => styles.module.css} (61%)
 rename src/components/global/DocDemo/{demo.css => styles.module.css} (72%)
 rename src/components/global/Playground/icons/{IconDots.css => IconDots.module.css} (81%)
 rename src/components/global/Tooltip/{tooltip.css => styles.module.css} (96%)
 create mode 100644 src/css/README.md
 rename src/{styles => css}/_mixins.scss (79%)
 rename src/{styles => css}/custom.scss (59%)
 rename src/{styles/components/_admonition.scss => css/theme/Admonition.scss} (94%)
 create mode 100644 src/css/theme/AnnouncementBar.scss
 rename src/{styles/components/_back-to-top-button.scss => css/theme/BackToTopButton.scss} (80%)
 rename src/{styles/components/_code.scss => css/theme/CodeBlock.scss} (89%)
 rename src/{styles/components/_markdown.scss => css/theme/DocItem/Content.scss} (60%)
 create mode 100644 src/css/theme/DocPaginator.scss
 rename src/{styles/components/_doc-sidebar.scss => css/theme/DocSidebar.scss} (68%)
 rename src/{styles/components/_edit-this-page.scss => css/theme/EditThisPage.scss} (100%)
 rename src/{styles/components/_table.scss => css/theme/MDXComponents/Table.scss} (69%)
 create mode 100644 src/css/theme/Navbar.scss
 rename src/{styles/components/_navbar-sidebar.scss => css/theme/Navbar/MobileSidebar.scss} (63%)
 rename src/{styles/components/_search.scss => css/theme/SearchBar.scss} (70%)
 create mode 100644 src/css/theme/TOC.scss
 rename src/{styles/components/_tabs.scss => css/theme/Tabs.scss} (93%)
 delete mode 100644 src/styles/README.md
 delete mode 100644 src/styles/components/README.md
 delete mode 100644 src/styles/components/_doc-item.scss
 delete mode 100644 src/styles/components/_doc-root.scss
 delete mode 100644 src/styles/components/_navbar.scss
 delete mode 100644 src/styles/components/_pagination.scss
 delete mode 100644 src/styles/components/_toc.scss
 create mode 100644 src/theme/DocItem/Layout/styles.module.css
 create mode 100644 src/theme/DocRoot/Layout/Main/styles.module.css
 create mode 100644 src/theme/DocSidebar/styles.module.css
 create mode 100644 src/theme/Icon/Edit/styles.module.css
 create mode 100644 src/theme/Layout/styles.module.css
 rename src/theme/MDXComponents/{Table.tsx => Table/index.tsx} (92%)
 create mode 100644 src/theme/MDXComponents/Table/styles.module.css
 create mode 100644 src/theme/TOC/styles.module.css

diff --git a/docusaurus.config.js b/docusaurus.config.js
index 25fa433aa76..bdd8059a392 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -135,7 +135,7 @@ module.exports = {
           customCss: [
             require.resolve('./node_modules/modern-normalize/modern-normalize.css'),
             require.resolve('./node_modules/@ionic-internal/ionic-ds/dist/tokens/tokens.css'),
-            require.resolve('./src/styles/custom.scss'),
+            require.resolve('./src/css/custom.scss'),
           ],
         },
       },
diff --git a/src/components/global/BestPracticeFigure/index.tsx b/src/components/global/BestPracticeFigure/index.tsx
index d66f48e2412..efeafff51a2 100644
--- a/src/components/global/BestPracticeFigure/index.tsx
+++ b/src/components/global/BestPracticeFigure/index.tsx
@@ -1,49 +1,49 @@
 import React, { type ReactNode } from 'react';
 
-import './best-practice-figure.css';
+import styles from './styles.module.css';
 
 /**
- Usage:
-
- import BestPracticeFigure from '@components/global/BestPracticeFigure';
-
- <BestPracticeFigure
-   text="..."
-   doText="..."
-   doNotText="..."
-   doImage={<img alt="..." src={useBaseUrl(...)} />}
-   doNotImage={<img alt="..." src={useBaseUrl(...)} />}
- />
-
- All images must have alt text for screen readers.
-
- Custom HTML can also be passed to any of the text properties by using curly braces:
-
- text={<>My text with a <Link to="/api/note">link</Link></>}
-
- Markdown such as backticks will not be processed when using curly braces.
- The <code> tag can be used instead:
-
- text={<>The <code>button</code> property</>}
-
- This component also supports a caution option. Typically you should use
- either a "Don't" image or a "Caution" image but not both.
-
- <BestPracticeFigure
-    text="..."
-    doText="..."
-    cautionText="..."
-    doImage={<img alt="..." src={useBaseUrl(...)} />}
-    cautionImage={<img alt="..." src={useBaseUrl(...)} />}
-  />
-
-  @prop text - Text that describes the figure as a whole
-  @prop doText - Text that describes a best practice
-  @prop doNotText - Text that describes an anti-pattern
-  @prop cautionText - Text that describes something that could be an anti-pattern based on use case
-  @prop doImage - Image associated with doText
-  @prop doNotImage - Image associated with doNotText
-  @prop cautionImage - Image associated with cautionText
+ * Usage:
+ *
+ * import BestPracticeFigure from '@components/global/BestPracticeFigure';
+ *
+ * <BestPracticeFigure
+ *   text="..."
+ *   doText="..."
+ *   doNotText="..."
+ *   doImage={<img alt="..." src={useBaseUrl(...)} />}
+ *   doNotImage={<img alt="..." src={useBaseUrl(...)} />}
+ * />
+ *
+ * All images must have alt text for screen readers.
+ *
+ * Custom HTML can also be passed to any of the text properties by using curly braces:
+ *
+ * text={<>My text with a <Link to="/api/note">link</Link></>}
+ *
+ * Markdown such as backticks will not be processed when using curly braces.
+ * The <code> tag can be used instead:
+ *
+ * text={<>The <code>button</code> property</>}
+ *
+ * This component also supports a caution option. Typically you should use
+ * either a "Don't" image or a "Caution" image but not both.
+ *
+ * <BestPracticeFigure
+ *   text="..."
+ *   doText="..."
+ *   cautionText="..."
+ *   doImage={<img alt="..." src={useBaseUrl(...)} />}
+ *   cautionImage={<img alt="..." src={useBaseUrl(...)} />}
+ * />
+ *
+ * @prop text - Text that describes the figure as a whole
+ * @prop doText - Text that describes a best practice
+ * @prop doNotText - Text that describes an anti-pattern
+ * @prop cautionText - Text that describes something that could be an anti-pattern based on use case
+ * @prop doImage - Image associated with doText
+ * @prop doNotImage - Image associated with doNotText
+ * @prop cautionImage - Image associated with cautionText
  */
 
 export default function BestPracticeFigure({
@@ -64,30 +64,30 @@ export default function BestPracticeFigure({
   cautionImage?: ReactNode;
 }) {
   return (
-    <div className="best-practice__container">
+    <div className={styles.container}>
       <p>{text}</p>
-      <div className="best-practice__do_dont">
-        <figure className="best-practice__do">
-          <div className="best-practice__image-wrapper">{doImage}</div>
+      <div className={styles.doDont}>
+        <figure className={styles.do}>
+          <div className={styles.imageWrapper}>{doImage}</div>
           <figcaption>
-            <div className="best-practice__do-text">Do</div>
+            <div className={styles.doText}>Do</div>
             <p>{doText}</p>
           </figcaption>
         </figure>
         {doNotText && doNotImage && (
-          <figure className="best-practice__dont">
-            <div className="best-practice__image-wrapper">{doNotImage}</div>
+          <figure className={styles.dont}>
+            <div className={styles.imageWrapper}>{doNotImage}</div>
             <figcaption>
-              <div className="best-practice__dont-text">Don't</div>
+              <div className={styles.dontText}>Don't</div>
               <p>{doNotText}</p>
             </figcaption>
           </figure>
         )}
         {cautionText && cautionImage && (
-          <figure className="best-practice__caution">
-            <div className="best-practice__image-wrapper">{cautionImage}</div>
+          <figure className={styles.caution}>
+            <div className={styles.imageWrapper}>{cautionImage}</div>
             <figcaption>
-              <div className="best-practice__caution-text">Caution</div>
+              <div className={styles.cautionText}>Caution</div>
               <p>{cautionText}</p>
             </figcaption>
           </figure>
diff --git a/src/components/global/BestPracticeFigure/best-practice-figure.css b/src/components/global/BestPracticeFigure/styles.module.css
similarity index 61%
rename from src/components/global/BestPracticeFigure/best-practice-figure.css
rename to src/components/global/BestPracticeFigure/styles.module.css
index 140024cbf83..d2a1ff72a2e 100644
--- a/src/components/global/BestPracticeFigure/best-practice-figure.css
+++ b/src/components/global/BestPracticeFigure/styles.module.css
@@ -1,4 +1,4 @@
-.best-practice__do_dont {
+.doDont {
   display: grid;
 
   grid-template-columns: 1fr 1fr;
@@ -8,30 +8,30 @@
 
 /* Collapse to 1 column per row on smaller viewports */
 @media (max-width: 996px) {
-  .best-practice__do_dont {
+  .doDont {
     grid-template-columns: 1fr;
   }
 }
 
-.best-practice__container figcaption {
+.container figcaption {
   text-align: start;
 }
 
-.best-practice__do p,
-.best-practice__dont p,
-.best-practice__caution p {
+.do p,
+.dont p,
+.caution p {
   padding: 8px 16px;
 }
 
-.best-practice__image-wrapper {
+.imageWrapper {
   border-radius: 8px 8px 0px 0px;
 
   overflow: hidden;
 }
 
-.best-practice__dont-text,
-.best-practice__do-text,
-.best-practice__caution-text {
+.dontText,
+.doText,
+.cautionText {
   padding: 12px 16px;
 
   font-weight: 600;
@@ -39,28 +39,28 @@
   border-radius: 0px 0px 8px 8px;
 }
 
-.best-practice__do .best-practice__image-wrapper {
+.do .imageWrapper {
   border: 1px solid var(--c-blue-10);
 }
 
-.best-practice__dont .best-practice__image-wrapper {
+.dont .imageWrapper {
   border: 1px solid var(--c-red-10);
 }
 
-.best-practice__caution .best-practice__image-wrapper {
+.caution .imageWrapper {
   border: 1px solid var(--c-yellow-10);
 }
 
-.best-practice__dont-text {
+.dontText {
   color: var(--c-red-100);
   background: var(--c-red-10);
 }
-.best-practice__do-text {
+.doText {
   color: var(--c-blue-100);
   background: var(--c-blue-10);
 }
 
-.best-practice__caution-text {
+.cautionText {
   /* --c-yellow-100 does not have enough contrast
    * placed on top of --c-yellow-10, so we manually
    * choose a darker text color here.
diff --git a/src/components/global/DocDemo/index.js b/src/components/global/DocDemo/index.js
index 21984c697bc..6e0ca73496a 100644
--- a/src/components/global/DocDemo/index.js
+++ b/src/components/global/DocDemo/index.js
@@ -2,7 +2,7 @@ import React, { useEffect, useState, useRef, useCallback } from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 
-import './demo.css';
+import styles from './styles.module.css';
 
 const DocDemo = (props) => {
   const [ionicMode, setIonicMode] = useState('ios');
@@ -41,11 +41,11 @@ const DocDemo = (props) => {
   };
 
   const modeToggle = (
-    <div className="docs-demo-mode-toggle">
+    <div className={styles.modeToggle}>
       {['ios', 'md'].map((mode) => (
         <button
           className={clsx({
-            'is-selected': mode === ionicMode,
+            [styles.selected]: mode === ionicMode,
           })}
           title={`Toggle ${mode === 'ios' ? 'iOS' : 'Android'} mode`}
           onClick={() => setIonicMode(mode)}
@@ -58,26 +58,20 @@ const DocDemo = (props) => {
   );
 
   const sourceLink = (
-    <Link to={props.source} className="docs-demo-source" title="Demo Source">
+    <Link to={props.source} className={styles.source} title="Demo Source">
       View Source
     </Link>
   );
 
   const device = (
-    <div className={`docs-demo-device ${ionicMode}`}>
+    <div className={clsx(styles.device, styles[ionicMode])}>
       <figure>
-        <svg className="docs-demo-device__md-bar" viewBox="0 0 1384.3 40.3">
-          <path
-            className="st0"
-            d="M1343 5l18.8 32.3c.8 1.3 2.7 1.3 3.5 0L1384 5c.8-1.3-.2-3-1.7-3h-37.6c-1.5 0-2.5 1.7-1.7 3z"
-          />
-          <circle className="st0" cx="1299" cy="20.2" r="20" />
-          <path
-            className="st0"
-            d="M1213 1.2h30c2.2 0 4 1.8 4 4v30c0 2.2-1.8 4-4 4h-30c-2.2 0-4-1.8-4-4v-30c0-2.3 1.8-4 4-4zM16 4.2h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H16c-8.8 0-16-7.2-16-16s7.2-16 16-16z"
-          />
+        <svg className={styles.mdBar} viewBox="0 0 1384.3 40.3">
+          <path d="M1343 5l18.8 32.3c.8 1.3 2.7 1.3 3.5 0L1384 5c.8-1.3-.2-3-1.7-3h-37.6c-1.5 0-2.5 1.7-1.7 3z" />
+          <circle cx="1299" cy="20.2" r="20" />
+          <path d="M1213 1.2h30c2.2 0 4 1.8 4 4v30c0 2.2-1.8 4-4 4h-30c-2.2 0-4-1.8-4-4v-30c0-2.3 1.8-4 4-4zM16 4.2h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H16c-8.8 0-16-7.2-16-16s7.2-16 16-16z" />
         </svg>
-        <svg className="docs-demo-device__ios-notch" viewBox="0 0 219 31">
+        <svg className={styles.iosNotch} viewBox="0 0 219 31">
           <path
             d="M0 1V0h219v1a5 5 0 0 0-5 5v3c0 12.15-9.85 22-22 22H27C14.85 31 5 21.15 5 9V6a5 5 0 0 0-5-5z"
             fillRule="evenodd"
@@ -95,7 +89,7 @@ const DocDemo = (props) => {
   );
 
   return (
-    <div className="doc-demo">
+    <div>
       {modeToggle}
       {device}
       {props.source && sourceLink}
diff --git a/src/components/global/DocDemo/demo.css b/src/components/global/DocDemo/styles.module.css
similarity index 72%
rename from src/components/global/DocDemo/demo.css
rename to src/components/global/DocDemo/styles.module.css
index c9a0cb58085..04d56613376 100644
--- a/src/components/global/DocDemo/demo.css
+++ b/src/components/global/DocDemo/styles.module.css
@@ -1,19 +1,13 @@
-docs-demo {
-  display: block;
-}
-
-.docs-demo-device {
+.device {
   --device-padding: 1rem;
   --device-width: 344px;
   --device-height: 704px;
   --device-frame-width: 12px;
 
   padding: var(--device-padding);
-  /* position: sticky; */
-  /* top: 0; */
 }
 
-.docs-demo-mode-toggle {
+.modeToggle {
   align-items: center;
   display: flex;
   justify-content: center;
@@ -28,7 +22,7 @@ docs-demo {
   border-radius: 18px;
 }
 
-.docs-demo-mode-toggle button {
+.modeToggle button {
   background-color: transparent;
   border: none;
   border-radius: 16px;
@@ -36,7 +30,6 @@ docs-demo {
   color: #5b708b;
 
   cursor: pointer;
-  font-family: var(--font-family);
   font-size: 11px;
   letter-spacing: -0.02em;
   width: calc(50% - 2px);
@@ -46,12 +39,12 @@ docs-demo {
   transition: 200ms background-color ease, 200ms color ease;
 }
 
-.docs-demo-mode-toggle button:focus,
-.docs-demo-mode-toggle button:active {
+.modeToggle button:focus,
+.modeToggle button:active {
   outline: none;
 }
 
-.docs-demo-mode-toggle button.is-selected {
+.modeToggle button.selected {
   background-color: white;
   color: black;
 
@@ -59,7 +52,7 @@ docs-demo {
   box-shadow: 0px 2px 3px rgba(0, 16, 46, 0.15);
 }
 
-.docs-demo-device > figure {
+.device > figure {
   margin: 0;
 
   background-size: contain;
@@ -77,7 +70,7 @@ docs-demo {
   z-index: 1;
 }
 
-.docs-demo-device > figure > iframe {
+.device > figure > iframe {
   position: absolute;
 
   top: 0;
@@ -92,32 +85,33 @@ docs-demo {
 
   overflow: hidden;
 
-  -webkit-mask-image: -webkit-radial-gradient(white, black);
+  /* Clips the iframe to its rounded corners, which border-radius alone does not do in Chromium. */
+  mask-image: radial-gradient(white, black);
 
   z-index: 1;
 }
 
-.docs-demo-device.ios figure {
+.device.ios figure {
   background-image: url('./iphone-device-skin.png');
 
   border-radius: 54px;
 }
 
-.docs-demo-device.ios > figure > iframe {
+.device.ios > figure > iframe {
   border-radius: 38px;
 }
 
-.docs-demo-device.md figure {
+.device.md figure {
   background-image: url('./android-device-skin.png');
 
   border-radius: 44px;
 }
 
-.docs-demo-device.md > figure > iframe {
+.device.md > figure > iframe {
   border-radius: 32px;
 }
 
-.docs-demo-device.ios figure:after {
+.device.ios figure:after {
   background-color: rgba(0, 0, 0, 0.5);
   border-radius: 2px;
   bottom: 18px;
@@ -131,7 +125,7 @@ docs-demo {
   z-index: 1;
 }
 
-.docs-demo-device__ios-notch {
+.iosNotch {
   display: none;
   fill: #090a0d;
   left: 50%;
@@ -142,16 +136,16 @@ docs-demo {
   z-index: 2;
 }
 
-.docs-demo-device.ios .docs-demo-device__ios-notch,
-.docs-demo-device.ios figure:after {
+.device.ios .iosNotch,
+.device.ios figure:after {
   display: block;
 }
 
-.docs-demo-device__md-bar {
+.mdBar {
   display: none;
 }
 
-.docs-demo-device.md .docs-demo-device__md-bar {
+.device.md .mdBar {
   display: block;
   fill: rgba(125, 125, 125, 0.3);
   padding: 0.5rem 2.2rem;
@@ -165,7 +159,7 @@ docs-demo {
  * View Source Button
  */
 
-.docs-demo-source {
+.source {
   align-items: center;
   display: flex;
   font-size: 13px;
diff --git a/src/components/global/DocsCard/index.tsx b/src/components/global/DocsCard/index.tsx
index 3aa3ba4b16a..722f2a46c01 100644
--- a/src/components/global/DocsCard/index.tsx
+++ b/src/components/global/DocsCard/index.tsx
@@ -12,7 +12,6 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
   hoverIcon?: string;
   iconset?: string;
   img?: string;
-  size?: 'md' | 'lg';
 }
 
 function DocsCard(props: Props): ReactNode {
@@ -53,20 +52,19 @@ function DocsCard(props: Props): ReactNode {
   const className = clsx(props.className, {
     'Card-with-image': typeof props.img !== 'undefined',
     'Card-without-image': typeof props.img === 'undefined',
-    'Card-size-lg': props.size === 'lg',
   });
 
   if (isStatic) {
     return (
       <docs-card class={className}>
-        <div className={clsx(styles.card, 'docs-card')}>{content}</div>
+        <div className={styles.card}>{content}</div>
       </docs-card>
     );
   }
 
   return (
     <docs-card class={className}>
-      <Link to={props.href} className={clsx(styles.card, 'docs-card')}>
+      <Link to={props.href} className={styles.card}>
         {content}
       </Link>
     </docs-card>
diff --git a/src/components/global/DocsCard/styles.module.scss b/src/components/global/DocsCard/styles.module.scss
index 89e7e801302..b89fbb30123 100644
--- a/src/components/global/DocsCard/styles.module.scss
+++ b/src/components/global/DocsCard/styles.module.scss
@@ -21,23 +21,6 @@ docs-card {
   max-width: 30em;
 }
 
-docs-card.disabled,
-docs-card[disabled] {
-  position: relative;
-}
-
-docs-card.disabled::after,
-docs-card[disabled]::after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  background: rgba(232, 232, 232, 0.5);
-  pointer-events: none;
-  content: '';
-}
-
 .card {
   color: inherit;
   background-color: var(--docs-card-bg-c);
@@ -90,8 +73,7 @@ docs-card[disabled]::after {
     height: auto;
   }
 
-  .Card-icon,
-  .Card-iconset__container {
+  .Card-icon {
     width: 48px;
     height: 48px;
 
@@ -152,85 +134,9 @@ docs-card[disabled]::after {
     line-height: 1.4;
     margin-bottom: 0.45em;
     font-weight: 600;
-    color: var(--token-heading-color-dark);
   }
 
   .Card-without-image .Card-header {
     margin-bottom: 0.3em;
   }
-
-  .Card-header > svg {
-    fill: currentColor;
-    height: 1em;
-    margin-bottom: -0.125em;
-    width: auto;
-  }
-
-  .Card-size-lg {
-    font-size: 14px;
-  }
-
-  .Card-size-lg .Card-icon,
-  .Card-size-lg .Card-iconset__container {
-    width: 80px;
-    height: 80px;
-  }
-
-  .Card-size-lg.Card-without-image .Card-header {
-    font-size: 20px;
-  }
-
-  aside docs-card {
-    max-width: 240px;
-  }
-
-  aside .Card-container {
-    display: grid;
-    grid-template-columns: minmax(0, max-content) 1fr;
-    grid-template-rows: minmax(0, min-content);
-    grid-template-areas:
-      'icon title'
-      'icon body';
-  }
-
-  aside .Card-icon {
-    width: 32px;
-    height: 32px;
-    margin-right: 16px;
-    margin-bottom: 0;
-    grid-area: icon;
-  }
-
-  aside .Card-header {
-    grid-area: title;
-  }
-
-  aside .Card-header::after {
-    background-image: url('/img/new-tab.svg');
-    display: inline-block;
-    height: 13px;
-    width: 13px;
-    background-size: 13px 13px;
-    margin-left: 4px;
-    content: '';
-  }
-
-  aside .Card-content {
-    grid-area: body;
-    /* https://stackoverflow.com/questions/5269713/css-ellipsis-on-second-line */
-    max-height: 42px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-  }
-
-  aside .Card-icon + .Card-content {
-    margin-top: -6px;
-  }
-
-  .markdown-content p docs-card {
-    margin-top: 1em;
-  }
 }
diff --git a/src/components/global/DocsCards/cards.css b/src/components/global/DocsCards/cards.css
index cee05f91c3e..a6a11a0ea65 100644
--- a/src/components/global/DocsCards/cards.css
+++ b/src/components/global/DocsCards/cards.css
@@ -22,23 +22,3 @@ docs-cards > docs-card {
   font-size: inherit;
   max-width: none;
 }
-
-docs-cards > docs-card.tall {
-  grid-row: span 2;
-}
-
-docs-cards > docs-card.wide {
-  grid-column: span 2;
-}
-
-docs-cards.prioritized > docs-card:nth-child(-n + 5) {
-  font-size: 1.25em;
-}
-
-docs-cards.prioritized > docs-card:first-child {
-  grid-row: span 2;
-}
-
-docs-cards.max-measure > docs-card {
-  max-width: 50%;
-}
diff --git a/src/components/global/Playground/icons/IconDots.css b/src/components/global/Playground/icons/IconDots.module.css
similarity index 81%
rename from src/components/global/Playground/icons/IconDots.css
rename to src/components/global/Playground/icons/IconDots.module.css
index f37cb7f2556..8f76ea11650 100644
--- a/src/components/global/Playground/icons/IconDots.css
+++ b/src/components/global/Playground/icons/IconDots.module.css
@@ -1,16 +1,16 @@
-.icon__dots {
+.dots {
   position: relative;
 
   width: 50px;
   height: 50px;
 }
 
-.icon__dots circle {
+.dots circle {
   stroke-width: 0;
   fill: currentColor;
 }
 
-.icon__dots svg {
+.dots svg {
   position: absolute;
 
   top: 0;
@@ -24,19 +24,19 @@
   animation: spinner-dots 1s linear infinite;
 }
 
-.icon__dots svg:nth-of-type(1) {
+.dots svg:nth-of-type(1) {
   left: 14px;
   animation-delay: 0ms;
   animation-duration: 750ms;
 }
 
-.icon__dots svg:nth-of-type(2) {
+.dots svg:nth-of-type(2) {
   left: 0px;
   animation-delay: -110ms;
   animation-duration: 750ms;
 }
 
-.icon__dots svg:nth-of-type(3) {
+.dots svg:nth-of-type(3) {
   left: -14px;
   animation-delay: -220ms;
   animation-duration: 750ms;
diff --git a/src/components/global/Playground/icons/IconDots.tsx b/src/components/global/Playground/icons/IconDots.tsx
index 5d74a1822a9..e91b081d91e 100644
--- a/src/components/global/Playground/icons/IconDots.tsx
+++ b/src/components/global/Playground/icons/IconDots.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
-import './IconDots.css';
+import styles from './IconDots.module.css';
 
 export const IconDots = () => (
-  <div className="icon__dots">
+  <div className={styles.dots}>
     <svg viewBox="0 0 64 64">
       <circle transform="translate(32,32)" r="6"></circle>
     </svg>
diff --git a/src/components/global/PlaygroundTabs/styles.module.css b/src/components/global/PlaygroundTabs/styles.module.css
index 4d32cd2cae1..725edd4f7b3 100644
--- a/src/components/global/PlaygroundTabs/styles.module.css
+++ b/src/components/global/PlaygroundTabs/styles.module.css
@@ -39,10 +39,6 @@
   padding: 0 8px;
 }
 
-.tabNavItemHidden {
-  display: none;
-}
-
 .tabNavItem {
   position: sticky;
   /* Places the nav item above the tab item  */
@@ -69,7 +65,3 @@
   cursor: pointer;
   color: var(--tab-nav-btn-color);
 }
-
-.tabs__nav-button--hidden {
-  display: none;
-}
diff --git a/src/components/global/Tooltip/index.tsx b/src/components/global/Tooltip/index.tsx
index c53a7947363..37bc60dbeea 100644
--- a/src/components/global/Tooltip/index.tsx
+++ b/src/components/global/Tooltip/index.tsx
@@ -23,7 +23,7 @@ import {
   FloatingPortal,
 } from '@floating-ui/react';
 
-import './tooltip.css';
+import styles from './styles.module.css';
 
 interface TooltipProps {
   content: ReactNode;
@@ -62,8 +62,8 @@ export default function Tooltip({ content, children }: TooltipProps): ReactNode
       {cloneElement(children, getReferenceProps({ ...children.props, ref: referenceRef }))}
       {isMounted && (
         <FloatingPortal>
-          <div ref={refs.setFloating} className="tooltip__root" style={floatingStyles} {...getFloatingProps()}>
-            <div className="tooltip" style={transitionStyles}>
+          <div ref={refs.setFloating} className={styles.root} style={floatingStyles} {...getFloatingProps()}>
+            <div className={styles.tooltip} style={transitionStyles}>
               {content}
             </div>
           </div>
diff --git a/src/components/global/Tooltip/tooltip.css b/src/components/global/Tooltip/styles.module.css
similarity index 96%
rename from src/components/global/Tooltip/tooltip.css
rename to src/components/global/Tooltip/styles.module.css
index 72510f32e9b..704fd46c5d8 100644
--- a/src/components/global/Tooltip/tooltip.css
+++ b/src/components/global/Tooltip/styles.module.css
@@ -3,7 +3,7 @@
  * but gives it no appearance, so all of it lives here.
  */
 
-.tooltip__root {
+.root {
   z-index: 9999;
   max-width: min(350px, calc(100vw - 10px));
   pointer-events: none;
diff --git a/src/components/page/api/EncapsulationPill/index.tsx b/src/components/page/api/EncapsulationPill/index.tsx
index cf0bcece73d..5d96198b28e 100644
--- a/src/components/page/api/EncapsulationPill/index.tsx
+++ b/src/components/page/api/EncapsulationPill/index.tsx
@@ -10,7 +10,7 @@ export default function EncapsulationPill({ type, ...props }: { type: string; cl
   const toUrl = useBaseUrl(`reference/glossary#${type}`);
 
   return (
-    <Link to={toUrl} {...props} className={clsx(props.className, 'encapsulation-pill', styles.encapsulationPill)}>
+    <Link to={toUrl} {...props} className={clsx(props.className, styles.encapsulationPill)}>
       {type}
     </Link>
   );
diff --git a/src/components/page/api/EncapsulationPill/styles.module.scss b/src/components/page/api/EncapsulationPill/styles.module.scss
index 5757634a02a..4f0a4779227 100644
--- a/src/components/page/api/EncapsulationPill/styles.module.scss
+++ b/src/components/page/api/EncapsulationPill/styles.module.scss
@@ -16,6 +16,9 @@
 }
 
 .encapsulationPill {
+  position: absolute;
+  top: 0;
+
   display: inline-block;
 
   padding: 0.375rem;
diff --git a/src/components/page/intro/AppWizard/index.module.scss b/src/components/page/intro/AppWizard/index.module.scss
index 3116af2fd47..8c84fb80bd0 100644
--- a/src/components/page/intro/AppWizard/index.module.scss
+++ b/src/components/page/intro/AppWizard/index.module.scss
@@ -1,4 +1,4 @@
-@use '../../../../styles/mixins';
+@use '../../../../css/mixins';
 
 .appWizard {
   display: flex;
diff --git a/src/components/page/native/NativeEnterpriseCard/index.module.scss b/src/components/page/native/NativeEnterpriseCard/index.module.scss
index 46db6241d58..6a7e606fa76 100644
--- a/src/components/page/native/NativeEnterpriseCard/index.module.scss
+++ b/src/components/page/native/NativeEnterpriseCard/index.module.scss
@@ -1,67 +1,3 @@
-.nativeEnterpriseCards {
-  display: flex;
-
-  margin-inline-start: -1.5rem;
-  margin-block-start: -1.5rem;
-
-  @media (max-width: 767px) {
-    flex-direction: column;
-
-    :global {
-      .image-wrapper img {
-        max-height: 10rem;
-      }
-    }
-  }
-
-  > a {
-    display: block;
-    margin-inline-start: 1.5rem;
-    margin-block-start: 1.5rem;
-
-    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08), 0px 4px 8px rgba(0, 0, 0, 0.1);
-    border-radius: 12px;
-    overflow: hidden;
-
-    transition: all 150ms ease;
-  }
-
-  > a:hover,
-  > a:active,
-  > a:focus {
-    transform: translateY(-1px);
-    box-shadow: 0 0.35em 1.175em rgba(2, 8, 20, 0.1), 0 0.175em 0.5em rgba(2, 8, 20, 0.08);
-  }
-
-  :global {
-    .heading-group {
-      padding: 2rem;
-    }
-
-    .image-wrapper > img {
-      object-fit: cover;
-      width: 100%;
-    }
-
-    header {
-      font-weight: 600;
-      font-size: 1.25rem;
-      line-height: 24px;
-      letter-spacing: -0.02em;
-      color: var(--ifm-heading-color);
-
-      margin-block-end: 0.5rem;
-    }
-
-    p {
-      font-size: 0.875rem;
-      line-height: 160%;
-      letter-spacing: -0.01em;
-      color: var(--ifm-font-color-base);
-    }
-  }
-}
-
 .nativeEnterprise {
   margin-top: 2rem;
   margin-bottom: 2rem;
diff --git a/src/components/page/theming/ColorGenerator/styles.module.scss b/src/components/page/theming/ColorGenerator/styles.module.scss
index 6a119d03e41..4caa385b3a4 100644
--- a/src/components/page/theming/ColorGenerator/styles.module.scss
+++ b/src/components/page/theming/ColorGenerator/styles.module.scss
@@ -3,17 +3,6 @@
   flex-direction: column;
 }
 
-.preview-column {
-  max-width: 480px;
-  min-height: 700px;
-}
-
-.selector-column {
-  max-width: 600px;
-  height: 100%;
-  overflow-y: scroll;
-}
-
 .titleRow {
   display: flex;
   align-items: center;
@@ -57,15 +46,6 @@
   list-style-type: none;
 }
 
-.swatch {
-  display: block;
-  width: 24px;
-  height: 24px;
-  border-radius: 24px;
-  margin-right: 16px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-}
-
 .item {
   margin: 0;
   position: relative;
diff --git a/src/css/README.md b/src/css/README.md
new file mode 100644
index 00000000000..868b6db34b8
--- /dev/null
+++ b/src/css/README.md
@@ -0,0 +1,57 @@
+# CSS folder
+
+`custom.scss` is the global stylesheet, loaded through `customCss` in [docusaurus.config.js](/docusaurus.config.js). It holds the Infima variable overrides and the base element styles.
+
+The `theme` folder overrides markup rendered by `@docusaurus/theme-classic`. Each file is named after the component it styles, following the theme's own paths, for example `theme/Navbar/MobileSidebar.scss` for `@theme/Navbar/MobileSidebar`. `custom.scss` brings them in with the Sass `@use` rule.
+
+Markup rendered by our own swizzled components keeps its styles next to the component in [src/theme](/src/theme), the same way Docusaurus does. A wrapped component still renders upstream's markup inside it, so overrides for that markup stay in `theme/`. For example, `TOC` is wrapped: the wrapper's own classes live in `src/theme/TOC/styles.module.css`, and the overrides for upstream's table of contents live in `theme/TOC.scss`. Refer to [src/theme/README.md](/src/theme/README.md).
+
+## Writing an override
+
+Start each file with its themed variables, then the overrides.
+
+Light themed variables can be targeted using the following selector:
+
+```css
+html[data-theme='light'] {
+  --ifm-menu-color-background-active: red;
+}
+```
+
+Dark themed variables can be targeted using the following selector:
+
+```css
+html[data-theme='dark'] {
+  --ifm-menu-color-background-active: blue;
+}
+```
+
+Global variables can be overridden at root like this:
+
+```css
+:root {
+  --sidebar-spacing-horizontal: 1.5rem;
+}
+```
+
+`#__docusaurus` is the root element the site renders into, so nesting a rule under it matches the same elements but adds an ID's specificity. Use it when a rule overrides a property the theme or Infima already sets on that element. Their rules often tie with ours, and a tie goes to whichever stylesheet loads last, which can differ between dev and production builds. The ID makes ours win either way.
+
+Leave it out for variables, for elements the theme does not style, and in our own CSS modules, whose classes nothing else competes with. Once a rule carries the ID, anything that later overrides it needs the ID too, so add it only where there is a conflict.
+
+```scss
+// The theme's rule: .sidebar_abc { padding: 0.5rem; }  specificity 0,1,0
+
+// Ties with the theme's rule, so it may lose depending on load order: 0,1,0
+[class^='sidebar_'] {
+  padding: 1rem;
+}
+
+// Always wins: 1,1,0
+#__docusaurus {
+  [class^='sidebar_'] {
+    padding: 1rem;
+  }
+}
+```
+
+Prefer the stable `theme-` class names from `ThemeClassNames` over the hashed CSS module classes, such as `[class^='docItemCol_']`, since a hashed class can change between Docusaurus versions. Many elements have no `theme-` class, such as the admonition heading, so a hashed selector is the only option there. `[class^='name_']` only matches when that class comes first on the element, so check the upstream markup, or use `[class*='name_']` when other classes come before it.
diff --git a/src/styles/_mixins.scss b/src/css/_mixins.scss
similarity index 79%
rename from src/styles/_mixins.scss
rename to src/css/_mixins.scss
index 6bdbf6c71e3..5204167dec2 100644
--- a/src/styles/_mixins.scss
+++ b/src/css/_mixins.scss
@@ -5,8 +5,8 @@
 ///
 /// `$url` has to be passed by the caller rather than resolved here, because the
 /// two places this is used resolve relative paths differently. Sass inlines the
-/// partials under `components/` into `custom.scss`, so their paths are relative
-/// to `src/styles/`, while a `.module.scss` is compiled where it sits and its
+/// partials under `theme/` into `custom.scss`, so their paths are relative
+/// to `src/css/`, while a `.module.scss` is compiled where it sits and its
 /// paths are relative to its own directory.
 @mixin icon-mask($url, $size: 12px) {
   content: '';
diff --git a/src/styles/custom.scss b/src/css/custom.scss
similarity index 59%
rename from src/styles/custom.scss
rename to src/css/custom.scss
index f1133013798..b90e609b15c 100644
--- a/src/styles/custom.scss
+++ b/src/css/custom.scss
@@ -1,27 +1,26 @@
-/* stylelint-disable docusaurus/copyright-header */
 /**
- * Any CSS included here will be global. The classic template
- * bundles Infima by default. Infima is a CSS framework designed to
- * work well for content-centric websites.
+ * Global styles, loaded through `customCss` in docusaurus.config.js.
+ *
+ * This file holds the Infima variable overrides and the base element styles.
+ * Overrides for theme components live in `theme/`, one file per component,
+ * named after the component in `@docusaurus/theme-classic`. Components we
+ * swizzle keep their styles next to them in `src/theme`.
  */
 
-/* You can override the default Infima variables here. */
-
-@use './components/admonition';
-@use './components/back-to-top-button';
-@use './components/code';
-@use './components/doc-item';
-@use './components/doc-root';
-@use './components/doc-sidebar';
-@use './components/edit-this-page';
-@use './components/markdown';
-@use './components/navbar';
-@use './components/navbar-sidebar';
-@use './components/pagination';
-@use './components/search';
-@use './components/table';
-@use './components/tabs';
-@use './components/toc';
+@use './theme/Admonition';
+@use './theme/AnnouncementBar';
+@use './theme/BackToTopButton';
+@use './theme/CodeBlock';
+@use './theme/DocSidebar';
+@use './theme/EditThisPage';
+@use './theme/DocItem/Content';
+@use './theme/Navbar';
+@use './theme/Navbar/MobileSidebar';
+@use './theme/DocPaginator';
+@use './theme/SearchBar';
+@use './theme/MDXComponents/Table';
+@use './theme/Tabs';
+@use './theme/TOC';
 
 :root {
   --ifm-background-color: var(--token-primary-bg-c);
@@ -58,7 +57,6 @@ html[data-theme='light'] {
   --ifm-heading-color: var(--c-carbon-100);
   --ifm-secondary-heading-color: var(--c-carbon-300);
 
-  --ifm-code-background: var(--c-indigo-10);
   --ifm-font-color-base: var(--c-carbon-90);
   --ifm-info-color-bg: var(--c-carbon-90);
 }
@@ -110,18 +108,6 @@ a {
   }
 }
 
-body {
-  margin: 0;
-}
-
-.theme-doc-version-badge {
-  display: none;
-}
-
-ion-grid {
-  margin: 1em 0;
-}
-
 figure {
   margin: 0;
 }
@@ -131,11 +117,6 @@ figure > * {
   margin: 0 auto;
 }
 
-figure.device {
-  max-width: 400px;
-  margin: 0 auto;
-}
-
 figcaption {
   text-align: center;
 }
@@ -150,83 +131,8 @@ iframe {
   box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);
 }
 
-.git-link {
-  &::before {
-    content: '';
-    height: 1em;
-    width: 1em;
-    display: inline-block;
-    background-color: currentColor;
-    mask-repeat: no-repeat;
-    mask-position: center;
-    mask-size: 100% 100%;
-    mask-image: url(../../static/icons/code-branch.svg);
-    vertical-align: -0.1em;
-    margin-inline-end: 5px;
-  }
-}
-
-.cordova-ee-card {
-  max-width: 100%;
-}
-
-.cordova-ee-img {
-  width: 50px;
-  float: left;
-  margin-right: 20px;
-}
-
-.native-ee-detail {
-  float: right;
-  cursor: pointer;
-}
-
-.cordova-ee-card p {
-  margin: 1rem 0 0;
-}
-
-// OS Announcement Bar
-[class*='announcementBar_'] {
-  --docusaurus-announcement-bar-height: 3.5rem;
-
-  background: linear-gradient(90deg, #440f14, #5e1219 15%, #000 35%, #000 45%, #5e1219 85%, #440f14);
-
-  &:hover,
-  &:focus,
-  &:active {
-    strong {
-      color: var(--c-red-50);
-    }
-  }
-}
-
-[class*='announcementBarContent_'] {
-  padding: 0;
-
-  > a {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: var(--docusaurus-announcement-bar-height);
-
-    letter-spacing: 0.01em !important;
-    text-decoration: none !important;
-
-    color: #fff !important;
-
-    font-size: 1.04rem;
-    font-weight: 500;
-
-    strong {
-      font-weight: 500;
-
-      color: var(--c-red-70);
-
-      transition: color 0.2s ease-out;
-    }
-  }
-}
-
+// Its markdown sets these as plain class names instead of
+// importing a CSS module, so only global rules can match them.
 .install-button {
   background-color: var(--ifm-info-color-bg);
   border: 2px solid var(--ifm-font-color-base);
diff --git a/src/styles/components/_admonition.scss b/src/css/theme/Admonition.scss
similarity index 94%
rename from src/styles/components/_admonition.scss
rename to src/css/theme/Admonition.scss
index df575bd60b8..6741852cc9a 100644
--- a/src/styles/components/_admonition.scss
+++ b/src/css/theme/Admonition.scss
@@ -65,17 +65,13 @@ html[data-theme='dark'] {
     }
   }
 
-  [class^='admonitionContent_'] {
-    p {
-      a {
-        color: var(--admonition-link-c);
-        text-decoration: underline;
-      }
+  [class^='admonitionContent_'] p a {
+    color: var(--admonition-link-c);
+    text-decoration: underline;
+  }
 
-      code {
-        background: var(--admonition-code-c-bg);
-      }
-    }
+  [class^='admonitionContent_'] p code {
+    background: var(--admonition-code-c-bg);
   }
 
   &::before {
diff --git a/src/css/theme/AnnouncementBar.scss b/src/css/theme/AnnouncementBar.scss
new file mode 100644
index 00000000000..bf88bf3a08f
--- /dev/null
+++ b/src/css/theme/AnnouncementBar.scss
@@ -0,0 +1,40 @@
+.theme-announcement-bar {
+  --docusaurus-announcement-bar-height: 3.5rem;
+
+  background: linear-gradient(90deg, #440f14, #5e1219 15%, #000 35%, #000 45%, #5e1219 85%, #440f14);
+
+  &:hover,
+  &:focus,
+  &:active {
+    strong {
+      color: var(--c-red-50);
+    }
+  }
+}
+
+[class*='announcementBarContent_'] {
+  padding: 0;
+
+  > a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--docusaurus-announcement-bar-height);
+
+    letter-spacing: 0.01em !important;
+    text-decoration: none !important;
+
+    color: #fff !important;
+
+    font-size: 1.04rem;
+    font-weight: 500;
+
+    strong {
+      font-weight: 500;
+
+      color: var(--c-red-70);
+
+      transition: color 0.2s ease-out;
+    }
+  }
+}
diff --git a/src/styles/components/_back-to-top-button.scss b/src/css/theme/BackToTopButton.scss
similarity index 80%
rename from src/styles/components/_back-to-top-button.scss
rename to src/css/theme/BackToTopButton.scss
index 484aa37bf5a..6509298238e 100644
--- a/src/styles/components/_back-to-top-button.scss
+++ b/src/css/theme/BackToTopButton.scss
@@ -1,6 +1,6 @@
 //overrides
 #__docusaurus {
-  [class*='backToTopButton_'] {
+  .theme-back-to-top-button {
     &::after {
       mask: var(--ifm-menu-link-sublist-icon) 50% / 1rem 0.75rem no-repeat;
     }
diff --git a/src/styles/components/_code.scss b/src/css/theme/CodeBlock.scss
similarity index 89%
rename from src/styles/components/_code.scss
rename to src/css/theme/CodeBlock.scss
index a14f9cb6760..478ba560379 100644
--- a/src/styles/components/_code.scss
+++ b/src/css/theme/CodeBlock.scss
@@ -20,7 +20,6 @@ html[data-theme='dark'] {
 :not(pre) > code {
   position: relative;
   margin-block-start: -0.125rem;
-  background-color: inherit;
   vertical-align: baseline;
 
   background-color: var(--code-block-bg-c);
@@ -33,7 +32,7 @@ code {
 
 // Overrides
 #__docusaurus {
-  [class*='codeBlockContainer_'] {
+  .theme-code-block {
     --prism-background-color: var(--code-block-bg-c);
 
     box-shadow: none;
@@ -74,15 +73,6 @@ pre[class*='language-'] {
   /* box-shadow: 1px 1px .5em black inset; */
 }
 
-/* Inline code */
-:not(pre) > code[class*='language-'] {
-  padding: 0.15em 0.2em 0.05em;
-  border-radius: 0.3em;
-  border: 0.13em solid hsl(30, 20%, 40%);
-  box-shadow: 1px 1px 0.3em -0.1em black inset;
-  white-space: normal;
-}
-
 /* Tomorrow Comment */
 .token.comment,
 .token.prolog,
diff --git a/src/styles/components/_markdown.scss b/src/css/theme/DocItem/Content.scss
similarity index 60%
rename from src/styles/components/_markdown.scss
rename to src/css/theme/DocItem/Content.scss
index 047ef74d19a..6c5b5f7466c 100644
--- a/src/styles/components/_markdown.scss
+++ b/src/css/theme/DocItem/Content.scss
@@ -1,13 +1,9 @@
 html[data-theme='light'] {
-  --markdown-toc-title-c: var(--c-indigo-60);
-  --markdown-toc-list-item-c: var(--c-indigo-70);
   --markdown-text-intro-c: var(--c-carbon-80);
   --markdown-bold-c: var(--c-carbon-100);
 }
 
 html[data-theme='dark'] {
-  --markdown-toc-title-c: #fff;
-  --markdown-toc-list-item-c: #fff;
   --markdown-text-intro-c: var(--c-indigo-40);
   --markdown-bold-c: #fff;
 }
@@ -40,11 +36,6 @@ html[data-theme='dark'] {
     font-size: 0.813rem;
   }
 
-  .encapsulation-pill {
-    position: absolute;
-    top: 0;
-  }
-
   > * {
     max-width: 100%;
   }
@@ -90,8 +81,9 @@ html[data-theme='dark'] {
     margin-block-start: 1rem;
   }
 
-  //intro paragraphs
-  > header + p {
+  // The first two paragraphs after the title are the intro
+  > header + p,
+  > header + p + p {
     color: var(--markdown-text-intro-c);
     font-size: 1.25rem;
 
@@ -99,48 +91,5 @@ html[data-theme='dark'] {
     > b {
       color: var(--markdown-bold-c);
     }
-
-    + p {
-      color: var(--markdown-text-intro-c);
-      font-size: 1.25rem;
-
-      > strong,
-      > b {
-        color: var(--markdown-bold-c);
-      }
-    }
-  }
-
-  .table-of-contents {
-    margin-block-end: 3rem;
-
-    list-style: none;
-    padding: 0;
-
-    &__title {
-      color: var(--markdown-toc-title-c);
-      margin-block-end: 1.5rem;
-
-      font-weight: bold;
-      text-transform: uppercase;
-      font-size: 0.625rem;
-      line-height: 0.75rem;
-      letter-spacing: 0.08em;
-    }
-
-    li {
-      color: var(--markdown-toc-list-item-c);
-      font-size: 0.75rem;
-      line-height: 0.875rem;
-      margin: 0;
-
-      a {
-        color: inherit;
-      }
-
-      + li {
-        margin-block-start: 0.75rem;
-      }
-    }
   }
 }
diff --git a/src/css/theme/DocPaginator.scss b/src/css/theme/DocPaginator.scss
new file mode 100644
index 00000000000..7489113b6b3
--- /dev/null
+++ b/src/css/theme/DocPaginator.scss
@@ -0,0 +1,42 @@
+//overrides
+#__docusaurus {
+  .pagination-nav {
+    &__link {
+      border: none;
+
+      transition: color 0.2s ease-out;
+    }
+
+    // Previous item
+    &__link--prev {
+      padding-inline-start: 0;
+    }
+
+    &__link--prev .pagination-nav__label::before {
+      padding-inline-end: var(--icon-padding);
+      background-color: var(--ifm-background-color);
+      transform: translateX(calc(var(--icon-padding) * -1));
+      content: '←';
+    }
+
+    // Next item
+    &__link--next {
+      padding-inline-end: 0;
+    }
+
+    &__link--next .pagination-nav__label::after {
+      padding-inline-start: var(--icon-padding);
+      background-color: var(--ifm-background-color);
+      transform: translateX(calc(-100% + var(--icon-padding)));
+      content: '→';
+    }
+
+    &__label {
+      --icon-padding: 0.25rem;
+    }
+
+    &__sublabel {
+      margin-block-end: 1rem;
+    }
+  }
+}
diff --git a/src/styles/components/_doc-sidebar.scss b/src/css/theme/DocSidebar.scss
similarity index 68%
rename from src/styles/components/_doc-sidebar.scss
rename to src/css/theme/DocSidebar.scss
index e5830d897dc..94078da204d 100644
--- a/src/styles/components/_doc-sidebar.scss
+++ b/src/css/theme/DocSidebar.scss
@@ -29,7 +29,7 @@ html[data-theme='dark'] {
   --ifm-menu-color-background-hover: transparent;
 }
 
-//overrides
+// overrides
 #__docusaurus {
   .theme-doc-sidebar-container {
     background: var(--token-primary-bg-c);
@@ -42,18 +42,6 @@ html[data-theme='dark'] {
     height: 100vh;
 
     border-inline-end: 1px solid var(--sidebar-border-c);
-
-    [class^='sidebarViewport'] {
-      // Targets the logo
-      > a {
-        display: flex;
-        align-items: center;
-        height: var(--ifm-navbar-height);
-  
-        padding-inline-start: var(--sidebar-spacing-horizontal);
-        padding-inline-end: var(--sidebar-spacing-horizontal);
-      }
-    }
   }
 
   [class^='sidebar_'] {
@@ -88,32 +76,28 @@ html[data-theme='dark'] {
     will-change: initial !important;
 
     margin-top: 0;
+  }
 
-    .menu__list {
-      .menu__link--sublist {
-        margin-inline-start: calc(-1 * (var(--dropdown-icon-width) + var(--dropdown-icon-gap)));
+  .menu__list .menu__list .menu__link--sublist {
+    margin-inline-start: calc(-1 * (var(--dropdown-icon-width) + var(--dropdown-icon-gap)));
 
-        &::after {
-          // The chevron icon will have less opacity when it's not on the first level.
-          opacity: 0.6;
-        }
-      }
+    &::after {
+      // The chevron icon will have less opacity when it's not on the first level.
+      opacity: 0.6;
     }
+  }
 
-    &-item {
-      &:not(:first-child) {
-        margin-block-start: 0;
-      }
-      .menu__list {
-        .menu__link {
-          padding-inline-start: calc(var(--dropdown-icon-width) + var(--dropdown-icon-gap));
-        }
-      }
-      &-collapsible {
-        // This allows the item to be clickable across the entire width of the sidebar.
-        display: block;
-      }
-    }
+  .menu__list-item:not(:first-child) {
+    margin-block-start: 0;
+  }
+
+  .menu__list-item .menu__list .menu__link {
+    padding-inline-start: calc(var(--dropdown-icon-width) + var(--dropdown-icon-gap));
+  }
+
+  .menu__list-item-collapsible {
+    // This allows the item to be clickable across the entire width of the sidebar.
+    display: block;
   }
 
   .theme-doc-sidebar-item-category-level-1 > .menu__list > .menu__list-item:last-of-type {
@@ -140,12 +124,10 @@ html[data-theme='dark'] {
       background: initial;
     }
 
-    &:not(.menu__link--active):not(.menu__link--sublist) {
-      &:hover,
-      &:active,
-      &:focus {
-        opacity: 0.7;
-      }
+    &:not(.menu__link--active):not(.menu__link--sublist):hover,
+    &:not(.menu__link--active):not(.menu__link--sublist):active,
+    &:not(.menu__link--active):not(.menu__link--sublist):focus {
+      opacity: 0.7;
     }
   }
 
@@ -159,7 +141,7 @@ html[data-theme='dark'] {
     align-items: center;
     flex-direction: row-reverse;
     justify-content: flex-end;
-  
+
     &::after {
       background: var(--ifm-menu-link-sublist-icon) center / var(--dropdown-icon-width) var(--dropdown-icon-height);
       background-repeat: no-repeat;
@@ -176,15 +158,11 @@ html[data-theme='dark'] {
     }
   }
 
-  .theme-doc-sidebar-item-category-level-1 {
-    & > .menu__list-item-collapsible {
-      .menu__link {
-        color: var(--sidebar-category-c);
-  
-        font-weight: 600;
-        font-size: 0.938rem;
-        line-height: 100%;
-      }
-    }
+  .theme-doc-sidebar-item-category-level-1 > .menu__list-item-collapsible .menu__link {
+    color: var(--sidebar-category-c);
+
+    font-weight: 600;
+    font-size: 0.938rem;
+    line-height: 100%;
   }
 }
diff --git a/src/styles/components/_edit-this-page.scss b/src/css/theme/EditThisPage.scss
similarity index 100%
rename from src/styles/components/_edit-this-page.scss
rename to src/css/theme/EditThisPage.scss
diff --git a/src/styles/components/_table.scss b/src/css/theme/MDXComponents/Table.scss
similarity index 69%
rename from src/styles/components/_table.scss
rename to src/css/theme/MDXComponents/Table.scss
index c7d46e881aa..c5d9604dcca 100644
--- a/src/styles/components/_table.scss
+++ b/src/css/theme/MDXComponents/Table.scss
@@ -10,10 +10,6 @@ html[data-theme='dark'] {
   --ifm-table-stripe-background: var(--ifm-table-background);
 }
 
-.table-wrapper {
-  overflow-x: auto;
-}
-
 table,
 tr,
 td,
@@ -43,23 +39,3 @@ th,
 td {
   line-height: 1.6;
 }
-
-thead th:empty {
-  display: none;
-}
-
-.reference-table {
-  display: inline-table;
-}
-
-.reference-table th h3 {
-  margin: 0;
-}
-
-.reference-table p {
-  margin: 0;
-}
-
-.reference-table p + p {
-  margin-top: 2em;
-}
diff --git a/src/css/theme/Navbar.scss b/src/css/theme/Navbar.scss
new file mode 100644
index 00000000000..098388dbe0d
--- /dev/null
+++ b/src/css/theme/Navbar.scss
@@ -0,0 +1,266 @@
+@use '../mixins';
+
+html[data-theme='light'] {
+  --navbar-link-c: var(--c-indigo-80);
+
+  --navbar-separator-bg-c: var(--c-indigo-40);
+
+  --ifm-dropdown-background-color: var(--token-secondary-bg-c);
+
+  --navbar-icon-link-c: var(--c-indigo-60);
+}
+
+html[data-theme='dark'] {
+  --navbar-link-c: var(--c-gray-0);
+
+  --navbar-separator-bg-c: var(--c-carbon-80);
+
+  --navbar-icon-link-c: var(--c-white);
+}
+
+:root {
+  --navbar-dropdown-icon: var(--ifm-menu-link-sublist-icon);
+}
+
+//overrides
+#__docusaurus {
+  .navbar {
+    &__inner {
+      width: initial;
+      flex-grow: 1;
+      flex-wrap: nowrap;
+    }
+
+    &__items {
+      min-width: auto;
+    }
+
+    &__items:not(.navbar__items--right) {
+      .navbar__link {
+        @media (max-width: 996px) {
+          display: none;
+        }
+      }
+
+      :not(.cta).navbar__link {
+        @media (min-width: 996px) {
+          display: flex;
+        }
+
+        align-self: stretch;
+        align-items: center;
+
+        position: relative;
+
+        &::after {
+          content: '';
+          position: absolute;
+          height: 2px;
+          left: var(--ifm-navbar-item-padding-horizontal);
+          right: var(--ifm-navbar-item-padding-horizontal);
+          bottom: 0;
+
+          background: rgba(0, 0, 0, 0);
+
+          transition: background-color 0.2s ease-out;
+        }
+      }
+
+      :not(.cta).navbar__link--active {
+        color: var(--ifm-link-color);
+      }
+
+      :not(.cta).navbar__link--active::after {
+        background: var(--ifm-link-color);
+      }
+    }
+
+    &__items .cta {
+      display: flex;
+      align-items: center;
+      align-self: initial;
+
+      padding: 0.375rem 0.625rem;
+
+      background: linear-gradient(90deg, #495fff 0%, #18c6ff 114.68%);
+
+      color: #fff;
+
+      border-radius: 200px;
+
+      white-space: nowrap;
+
+      font-weight: 600;
+      font-size: 0.75rem;
+      line-height: 100%;
+
+      transition: opacity 0.2s ease-out;
+
+      margin-inline-start: 0.5rem;
+
+      @media (max-width: 1400px) {
+        display: none;
+      }
+
+      &:hover,
+      &:active {
+        opacity: 0.8;
+      }
+
+      &::after {
+        @include mixins.icon-mask('../../static/icons/arrow-forward-outline.svg');
+        margin-inline-start: 0.125rem;
+      }
+    }
+
+    &__items--right {
+      flex-grow: 1;
+
+      .icon-link,
+      [class*='toggle_'] {
+        padding: 0.5rem;
+        display: flex;
+
+        transition: opacity 0.2s ease-out;
+        color: var(--navbar-icon-link-c);
+
+        &:hover,
+        &:focus,
+        &:active {
+          opacity: 0.7;
+        }
+      }
+
+      .icon-link-mask::before {
+        content: '';
+        height: 16px;
+        display: flex;
+        background-color: currentColor;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: 100% 100%;
+      }
+
+      .icon-link-github::before {
+        mask-image: url("../../static/logos/github.svg");
+        width: 17px;
+      }
+
+      .icon-link-twitter::before {
+        mask-image: url("../../static/logos/twitter.svg");
+        width: 19px;
+      }
+
+      .icon-link-discord::before {
+        mask-image: url("../../static/logos/discord.svg");
+        width: 20px;
+      }
+
+      // Version dropdown
+      div.dropdown:nth-of-type(1) {
+        @media (max-width: 996px) {
+          display: none;
+        }
+      }
+
+      // Community and support dropdowns
+      div.dropdown:nth-of-type(3),
+      div.dropdown:nth-of-type(4) {
+        @media (max-width: 1216px) {
+          display: none;
+        }
+      }
+
+      // Theme toggle
+      div:nth-last-of-type(1) {
+        order: 4;
+      }
+
+      .icon-link-twitter {
+        order: 5;
+      }
+
+      .icon-link-discord {
+        order: 6;
+      }
+
+      .icon-link-github {
+        order: 7;
+      }
+    }
+
+    &__item {
+      transition: opacity 0.2s ease-out;
+
+      display: inline-block;
+    }
+
+    &__item.dropdown {
+      align-self: stretch;
+      display: flex;
+
+      .navbar__link {
+        display: flex;
+        align-items: center;
+
+        &::after {
+          position: static;
+
+          border: none;
+
+          background: var(--ifm-menu-link-sublist-icon) 50% / 0.5rem 0.3rem;
+          background-repeat: no-repeat;
+
+          min-width: 0.5rem;
+          min-height: 0.25rem;
+
+          transform: rotate(180deg) translateY(-0.125rem);
+        }
+      }
+
+      .dropdown__menu {
+        top: 100%;
+      }
+    }
+
+    &__item:not(.navbar__link--active).navbar__link:hover {
+      opacity: 0.8;
+    }
+
+    &__link {
+      font-weight: 500;
+      font-size: 0.875rem;
+      line-height: 17px;
+
+      color: var(--navbar-link-c);
+    }
+
+    &__brand {
+      display: none;
+    }
+
+    &__logo {
+      display: none;
+    }
+
+    .separator {
+      width: 1px;
+      height: 1.75rem;
+      background: var(--navbar-separator-bg-c);
+
+      margin-inline-start: 0.5rem;
+      margin-inline-end: 0.5rem;
+    }
+
+    .language {
+      padding: 0;
+      margin-inline-start: calc(-1 * var(--ifm-navbar-item-padding-horizontal));
+      margin-inline-end: -0.25rem;
+
+      &::after {
+        // Hide the chevron icon
+        display: none;
+      }
+    }
+  }
+}
diff --git a/src/styles/components/_navbar-sidebar.scss b/src/css/theme/Navbar/MobileSidebar.scss
similarity index 63%
rename from src/styles/components/_navbar-sidebar.scss
rename to src/css/theme/Navbar/MobileSidebar.scss
index 2e542a74580..d0e201e73e1 100644
--- a/src/styles/components/_navbar-sidebar.scss
+++ b/src/css/theme/Navbar/MobileSidebar.scss
@@ -5,31 +5,28 @@
 
     &__item {
       padding: 1rem var(--ifm-navbar-padding-horizontal);
+    }
 
-      .menu__list {
-        .separator {
-          display: none;
-        }
-        .icon-link {
-          display: none;
-        }
-      }
+    &__item .menu__list .separator {
+      display: none;
     }
 
-    &__brand {
-      .navbar__brand {
-        display: flex;
-      }
+    &__item .menu__list .icon-link {
+      display: none;
+    }
 
-      .navbar__logo {
-        display: block;
-        height: auto;
+    &__brand .navbar__brand {
+      display: flex;
+    }
 
-        img {
-          display: block;
-          height: auto;
-        }
-      }
+    &__brand .navbar__logo {
+      display: block;
+      height: auto;
+    }
+
+    &__brand .navbar__logo img {
+      display: block;
+      height: auto;
     }
 
     .cta {
diff --git a/src/styles/components/_search.scss b/src/css/theme/SearchBar.scss
similarity index 70%
rename from src/styles/components/_search.scss
rename to src/css/theme/SearchBar.scss
index b4c9f141eee..4a927150f64 100644
--- a/src/styles/components/_search.scss
+++ b/src/css/theme/SearchBar.scss
@@ -11,10 +11,8 @@ html[data-theme='light'] {
 
   --search-keys-border-c: var(--c-indigo-20);
 
-  .DocSearch-Button {
-    &:hover {
-      --docsearch-searchbox-shadow: inset 0 0 0 1px var(--c-indigo-50);
-    }
+  .DocSearch-Button:hover {
+    --docsearch-searchbox-shadow: inset 0 0 0 1px var(--c-indigo-50);
   }
 }
 
@@ -23,14 +21,12 @@ html[data-theme='dark'] {
 
   --search-keys-border-c: var(--c-gray-80);
 
-  .DocSearch-Button {
-    &:hover {
-      --docsearch-searchbox-shadow: inset 0 0 0 1px var(--c-gray-70);
-    }
+  .DocSearch-Button:hover {
+    --docsearch-searchbox-shadow: inset 0 0 0 1px var(--c-gray-70);
   }
 }
 
-//overrides
+// overrides
 #__docusaurus {
   [class^='navbarSearchContainer_'] {
     flex-grow: 1;
@@ -63,26 +59,26 @@ html[data-theme='dark'] {
       padding: 0.125rem;
       border: 1px solid var(--search-keys-border-c);
       border-radius: 6px;
+    }
 
-      .DocSearch-Button-Key {
-        position: static;
-        margin-inline-end: 0;
-        padding-block-end: 0;
+    .DocSearch-Button-Keys .DocSearch-Button-Key {
+      position: static;
+      margin-inline-end: 0;
+      padding-block-end: 0;
 
-        width: auto;
-        // DocSearch sizes these keys at 24px with its own font; keep them
-        // sized to the surrounding text so the keys stay inside the field.
-        height: 18px;
+      width: auto;
+      // DocSearch sizes these keys at 24px with its own font; keep them
+      // sized to the surrounding text so the keys stay inside the field.
+      height: 18px;
 
-        color: var(--c-indigo-50);
-        border-radius: 0;
+      color: var(--c-indigo-50);
+      border-radius: 0;
 
-        font-family: inherit;
-        font-size: inherit;
-        font-weight: 400;
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: 400;
 
-        border: none;
-      }
+      border: none;
     }
 
     .DocSearch-Search-Icon {
diff --git a/src/css/theme/TOC.scss b/src/css/theme/TOC.scss
new file mode 100644
index 00000000000..9f3fd4cb385
--- /dev/null
+++ b/src/css/theme/TOC.scss
@@ -0,0 +1,26 @@
+html[data-theme='light'] {
+  --toc-separator-c: var(--c-indigo-20);
+  --ifm-toc-link-color: var(--c-indigo-80);
+}
+
+html[data-theme='dark'] {
+  --toc-separator-c: var(--c-carbon-90);
+  --ifm-toc-link-color: var(--c-carbon-0);
+}
+
+//overrides
+#__docusaurus {
+  .theme-doc-toc-desktop {
+    position: static;
+    top: initial;
+    overflow: hidden;
+
+    max-height: initial;
+
+    padding-block-end: 1.25rem;
+
+    border-block-end: 1px solid var(--toc-separator-c);
+
+    line-height: 1.4;
+  }
+}
diff --git a/src/styles/components/_tabs.scss b/src/css/theme/Tabs.scss
similarity index 93%
rename from src/styles/components/_tabs.scss
rename to src/css/theme/Tabs.scss
index fa50e8f9923..87129063643 100644
--- a/src/styles/components/_tabs.scss
+++ b/src/css/theme/Tabs.scss
@@ -43,10 +43,10 @@ html[data-theme='dark'] {
 
     &:hover {
       background-color: inherit;
+    }
 
-      &:not(.tabs__item--active) {
-        opacity: 0.7;
-      }
+    &:hover:not(.tabs__item--active) {
+      opacity: 0.7;
     }
   }
 }
diff --git a/src/styles/README.md b/src/styles/README.md
deleted file mode 100644
index ed31fd126ca..00000000000
--- a/src/styles/README.md
+++ /dev/null
@@ -1,6 +0,0 @@
-# Styles folder
-
-This folder houses a global style file that is brought into the theme in [docusaurus.config.js](/docusaurus.config.js). In addition, there is a components folder that is used to style theme components instead of swizzling them.
-
-Related issue: https://github.com/facebook/docusaurus/pull/5987
-Since theme styles cannot be overridden at the moment, the base #\_\_docusaurus tag is being used to +1 the specificity of selectors.
diff --git a/src/styles/components/README.md b/src/styles/components/README.md
deleted file mode 100644
index 35572b81131..00000000000
--- a/src/styles/components/README.md
+++ /dev/null
@@ -1,37 +0,0 @@
-# Components folder
-
-This folder is used to style components that are used globally across the site. A good way to setup a file is to include any themed variables at the top, and the override styles below that. All these partials are imported into the base styles with the sass `@use` rule.
-
-Light themed variables can be targeted using the following selector:
-
-```css
-html[data-theme='light'] {
-  --ifm-menu-color-background-active: red;
-}
-```
-
-Dark themed variables can be targeted using the following selector:
-
-```css
-html[data-theme='dark'] {
-  --ifm-menu-color-background-active: blue;
-}
-```
-
-Global variables can be overridden at root like this:
-
-```css
-:root {
-  --sidebar-spacing-horizontal: 1.5rem;
-}
-```
-
-Styles can be overridden like this:
-
-```css
-#__docusaurus {
-  .class-to-override {
-    margin-block-start: 1rem;
-  }
-}
-```
diff --git a/src/styles/components/_doc-item.scss b/src/styles/components/_doc-item.scss
deleted file mode 100644
index 188b022cab1..00000000000
--- a/src/styles/components/_doc-item.scss
+++ /dev/null
@@ -1,78 +0,0 @@
-:root {
-  --doc-item-container-width: 42rem;
-}
-
-//overrides
-#__docusaurus {
-  //#region ------------ DocItem -------------
-  [class*='docItemCol_'] {
-    max-width: initial;
-    min-width: 0;
-
-    @media (min-width: 997px) {
-      max-width: initial !important;
-    }
-  }
-
-  [class*='docItemContainer_'] {
-    max-width: var(--doc-item-container-width);
-    flex-grow: 1;
-    min-width: 0;
-  }
-
-  [class*='docMainContainer_'] {
-    .doc-demo-wrapper {
-      @media (max-width: 1364px) {
-        display: none;
-      }
-
-      .doc-demo {
-        position: sticky;
-        top: calc(var(--ifm-navbar-height));
-
-        padding-block-end: 32px;
-
-        margin-block-start: 5rem;
-        overflow-y: auto;
-        max-height: calc(100vh - var(--ifm-navbar-height));
-      }
-    }
-
-    > .container {
-      > .row {
-        > .col {
-          display: flex;
-          justify-content: center;
-
-          min-width: 0;
-
-          // Docs Demo
-          &.col--4 {
-            @media (max-width: 1364px) {
-              // The docs demo is hidden on mobile and tablet.
-              // Since the docs demo is the only thing in the right column,
-              // the column should be hidden as well.
-              // Otherwise, it will be a blank column, making it
-              // look like there is a lot of empty space.
-              display: none;
-            }
-          }
-        }
-      }
-    }
-
-    .spacer {
-      flex-basis: 5rem;
-
-      @media (max-width: 996px) {
-        display: none;
-      }
-    }
-  }
-
-  [class^='docItemCol_'] {
-    margin-inline-start: auto;
-    margin-inline-end: auto;
-  }
-  //#endregion
-}
diff --git a/src/styles/components/_doc-root.scss b/src/styles/components/_doc-root.scss
deleted file mode 100644
index a7a57df67a3..00000000000
--- a/src/styles/components/_doc-root.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-//overrides
-#__docusaurus {
-  [class^='docMainContainer_'] {
-    max-width: initial;
-
-    > .container {
-      max-width: initial;
-
-      > .row {
-        flex-wrap: nowrap;
-      }
-    }
-  }
-
-  [class^='docRoot_'] {
-    > div {
-      flex-grow: 1;
-      min-width: 0;
-    }
-  }
-}
diff --git a/src/styles/components/_navbar.scss b/src/styles/components/_navbar.scss
deleted file mode 100644
index c526b6ee7b8..00000000000
--- a/src/styles/components/_navbar.scss
+++ /dev/null
@@ -1,300 +0,0 @@
-@use '../mixins';
-
-html[data-theme='light'] {
-  --navbar-link-c: var(--c-indigo-80);
-
-  --navbar-separator-bg-c: var(--c-indigo-40);
-
-  --ifm-dropdown-background-color: var(--token-secondary-bg-c);
-
-  --navbar-icon-link-c: var(--c-indigo-60);
-}
-
-html[data-theme='dark'] {
-  --navbar-link-c: var(--c-gray-0);
-
-  --navbar-separator-bg-c: var(--c-carbon-80);
-
-  --navbar-icon-link-c: var(--c-white);
-}
-
-:root {
-  --navbar-dropdown-icon: var(--ifm-menu-link-sublist-icon);
-}
-
-//overrides
-#__docusaurus {
-
-  .navbar {
-    &__inner {
-      width: initial;
-      flex-grow: 1;
-      flex-wrap: nowrap;
-    }
-
-    &__items {
-      min-width: auto;
-
-      &:not(.navbar__items--right) {
-        .navbar__link {
-          @media (max-width: 996px) {
-            display: none;
-          }
-        }
-        :not(.cta) {
-          &.navbar__link {
-            @media (min-width: 996px) {
-              display: flex;
-            }
-
-            align-self: stretch;
-            align-items: center;
-    
-            position: relative;
-    
-            &::after {
-              content: '';
-              position: absolute;
-              height: 2px;
-              left: var(--ifm-navbar-item-padding-horizontal);
-              right: var(--ifm-navbar-item-padding-horizontal);
-              bottom: 0;
-    
-              background: rgba(0, 0, 0, 0);
-    
-              transition: background-color 0.2s ease-out;
-            }
-    
-            &--active {
-              color: var(--ifm-link-color);
-    
-              &::after {
-                background: var(--ifm-link-color);
-              }
-            }
-          }
-        }
-      }
-
-      .cta {
-        display: flex;
-        align-items: center;
-        align-self: initial;
-
-        padding: 0.375rem 0.625rem;
-
-        background: linear-gradient(90deg, #495fff 0%, #18c6ff 114.68%);
-
-        color: #fff;
-
-        border-radius: 200px;
-
-        white-space: nowrap;
-
-        font-weight: 600;
-        font-size: 0.75rem;
-        line-height: 100%;
-
-        transition: opacity 0.2s ease-out;
-
-        margin-inline-start: 0.5rem;
-
-        @media (max-width: 1400px) {
-          display: none;
-        }
-
-        &:hover,
-        &:active {
-          opacity: 0.8;
-        }
-
-        &::after {
-          @include mixins.icon-mask('../../static/icons/arrow-forward-outline.svg');
-          margin-inline-start: 0.125rem;
-        }
-
-        svg {
-          margin-inline-start: 0.125rem;
-
-          &[class^='iconExternalLink'] {
-            display: none;
-          }
-        }
-      }
-
-      &--right {
-        flex-grow: 1;
-
-        .icon-link,
-        [class*='toggle_'] {
-          padding: 0.5rem;
-          display: flex;
-
-          transition: opacity 0.2s ease-out;
-          color: var(--navbar-icon-link-c);
-
-          &:hover,
-          &:focus,
-          &:active {
-            opacity: 0.7;
-          }
-        }
-
-        .icon-link {
-          &-mask {
-            &::before {
-              content: '';
-              height: 16px;
-              display: flex;
-              background-color: currentColor;
-              mask-repeat: no-repeat;
-              mask-position: center;
-              mask-size: 100% 100%;
-            }
-          }
-
-          &-github {
-            &::before {
-              mask-image: url("../../static/logos/github.svg");
-              width: 17px;
-            }
-          }
-    
-          &-twitter {
-            &::before {
-              mask-image: url("../../static/logos/twitter.svg");
-              width: 19px;
-            }
-          }
-
-          &-discord {
-            &::before {
-              mask-image: url("../../static/logos/discord.svg");
-              width: 20px;
-            }
-          }
-        }
-
-        div {
-          &.dropdown {
-            //version dropdown
-            &:nth-of-type(1) {
-              @media (max-width: 996px) {
-                display: none;
-              }
-            }
-            //community and support dropdowns
-            &:nth-of-type(3),
-            &:nth-of-type(4) {
-              @media (max-width: 1216px) {
-                display: none;
-              }
-            }
-          }
-
-          //theme toggle
-          &:nth-last-of-type(1) {
-            order: 4;
-          }
-        }
-
-        //twitter icon
-        .icon-link-twitter {
-          order: 5;
-        }
-
-        //discord icon
-        .icon-link-discord {
-          order: 6;
-        }
-
-        //github icon
-        .icon-link-github {
-          order: 7;
-        }
-      }
-    }
-
-    &__item {
-      transition: opacity 0.2s ease-out;
-
-      display: inline-block;
-
-      &.dropdown {
-        align-self: stretch;
-        display: flex;
-
-        .navbar__link {
-          display: flex;
-          align-items: center;
-
-          &::after {
-            position: static;
-
-            border: none;
-
-            background: var(--ifm-menu-link-sublist-icon) 50% / 0.5rem 0.3rem;
-            background-repeat: no-repeat;
-
-            min-width: 0.5rem;
-            min-height: 0.25rem;
-
-            transform: rotate(180deg) translateY(-0.125rem);
-          }
-        }
-
-        .dropdown__menu {
-          top: 100%;
-        }
-      }
-
-      &:not(.navbar__link--active) {
-        &.navbar__link {
-          &:hover {
-            opacity: 0.8;
-          }
-        }
-      }
-
-      &:not(.dropdown):not(.cta):not(.icon-link-mask) {
-        
-      }
-    }
-
-    &__link {
-      font-weight: 500;
-      font-size: 0.875rem;
-      line-height: 17px;
-
-      color: var(--navbar-link-c);
-    }
-
-    &__brand {
-      display: none;
-    }
-
-    &__logo {
-      display: none;
-    }
-
-    .separator {
-      width: 1px;
-      height: 1.75rem;
-      background: var(--navbar-separator-bg-c);
-
-      margin-inline-start: 0.5rem;
-      margin-inline-end: 0.5rem;
-    }
-
-    .language {
-      padding: 0;
-      margin-inline-start: calc(-1 * var(--ifm-navbar-item-padding-horizontal));
-      margin-inline-end: -0.25rem;
-
-      &::after {
-        // Hide the chevron icon
-        display: none;
-      }
-    }
-  }
-}
diff --git a/src/styles/components/_pagination.scss b/src/styles/components/_pagination.scss
deleted file mode 100644
index b0ba417b7c9..00000000000
--- a/src/styles/components/_pagination.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-//overrides
-#__docusaurus {
-  .pagination-nav {
-    &__link {
-      border: none;
-
-      transition: color 0.2s ease-out;
-
-      //Previous item
-      &--prev {
-        padding-inline-start: 0;
-
-        .pagination-nav__label {
-          &::before {
-            padding-inline-end: var(--icon-padding);
-            background-color: var(--ifm-background-color);
-            transform: translateX(calc(var(--icon-padding) * -1));
-            content: '←';
-          }
-        }
-      }
-
-      //Next item
-      &--next {
-        padding-inline-end: 0;
-  
-        .pagination-nav__label {
-          &::after {
-            padding-inline-start: var(--icon-padding);
-            background-color: var(--ifm-background-color);
-            transform: translateX(calc(-100% + var(--icon-padding)));
-            content: '→';
-          }
-        }
-      }
-    }
-
-    &__label {
-      --icon-padding: 0.25rem;
-    }
-
-    &__sublabel {
-      margin-block-end: 1rem;
-    }
-  }
-}
diff --git a/src/styles/components/_toc.scss b/src/styles/components/_toc.scss
deleted file mode 100644
index 82e1b39f694..00000000000
--- a/src/styles/components/_toc.scss
+++ /dev/null
@@ -1,94 +0,0 @@
-html[data-theme='light'] {
-  --toc-separator-c: var(--c-indigo-20);
-  --ifm-toc-link-color: var(--c-indigo-80);
-}
-
-html[data-theme='dark'] {
-  --toc-separator-c: var(--c-carbon-90);
-  --ifm-toc-link-color: var(--c-carbon-0);
-}
-
-:root {
-}
-
-//overrides
-#__docusaurus {
-  [class^='tableOfContents_'] {
-    position: static;
-    top: initial;
-    overflow: hidden;
-
-    max-height: initial;
-
-    padding-block-end: 1.25rem;
-
-    border-block-end: 1px solid var(--toc-separator-c);
-
-    line-height: 1.4;
-  }
-
-  .toc-wrapper {
-    overflow: auto;
-    position: sticky;
-    top: calc(var(--ifm-navbar-height) + 16px);
-    max-height: calc(100vh - var(--ifm-navbar-height) - 16px);
-
-    margin-block-start: 5rem;
-
-    padding-block-end: 2rem;
-
-    h2 {
-      font-size: 0.625rem;
-      line-height: 12px;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-      color: var(--c-indigo-60);
-    }
-
-    .table-of-contents {
-      padding: 0;
-      margin-inline-start: calc(-1 * var(--ifm-toc-padding-horizontal));
-      margin-inline-end: calc(-1 * var(--ifm-toc-padding-horizontal));
-
-      > li:first-of-type {
-        margin-block-start: 0;
-      }
-
-      > li:last-of-type {
-        margin-block-end: 0;
-      }
-    }
-
-    .theme-edit-this-page {
-      --edit-this-page-c: var(--ifm-heading-color);
-
-      margin-block-start: 1.25rem;
-      font-weight: 600;
-      font-size: 0.875rem;
-    }
-  }
-
-  .internal-ad {
-    cursor: pointer;
-
-    max-width: 148px;
-    display: block;
-    margin: 48px 0 0;
-
-    p {
-      font-size: 13px;
-      line-height: 19px;
-      font-weight: 400;
-      letter-spacing: 0.02em;
-
-      color: var(--ifm-font-color-base);
-      transition: 0.2s color;
-    }
-  }
-
-  [class^='tocCollapsible_'] {
-    @media (max-width: 996px) {
-      display: none;
-    }
-  }
-}
diff --git a/src/theme/DocItem/Layout/index.tsx b/src/theme/DocItem/Layout/index.tsx
index a06942b40b2..4b206759b31 100644
--- a/src/theme/DocItem/Layout/index.tsx
+++ b/src/theme/DocItem/Layout/index.tsx
@@ -7,6 +7,7 @@
  *
  * Reason for overriding:
  * - Add a phone demo to the right of the page, e.g. /docs
+ * - Remove the version badge and the mobile table of contents, which the site never shows
  */
 
 import React, {type ReactNode} from 'react';
@@ -15,14 +16,13 @@ import {useWindowSize} from '@docusaurus/theme-common';
 import {useDoc} from '@docusaurus/plugin-content-docs/client';
 import DocItemPaginator from '@theme/DocItem/Paginator';
 import DocVersionBanner from '@theme/DocVersionBanner';
-import DocVersionBadge from '@theme/DocVersionBadge';
 import DocItemFooter from '@theme/DocItem/Footer';
 import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
 import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
 import DocItemContent from '@theme/DocItem/Content';
 import ContentVisibility from '@theme/ContentVisibility';
 import type {Props} from '@theme/DocItem/Layout';
-import styles from '@docusaurus/theme-classic/lib/theme/DocItem/Layout/styles.module.css';
+import styles from './styles.module.css';
 
 // CUSTOM CODE
 import Head from '@docusaurus/Head';
@@ -90,13 +90,13 @@ export default function DocItemLayout({children, ...props}: Props): ReactNode {
       {/* The banner is rendered per version based on the versions config on docusaurus.config.js */}
       <DocVersionBanner />
       {/* ------- CUSTOM CODE END -------- */}
-      <div className="row">
+      {/* CUSTOM CODE - add docItemRow */}
+      <div className={clsx('row', styles.docItemRow)}>
         <div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
           <ContentVisibility metadata={metadata} />
           <div className={styles.docItemContainer}>
             <article>
-              <DocVersionBadge />
-              {docTOC.mobile}
+              {/* CUSTOM CODE - remove <DocVersionBadge /> and {docTOC.mobile} */}
               <DocItemContent>{children}</DocItemContent>
               <DocItemFooter />
             </article>
@@ -106,8 +106,8 @@ export default function DocItemLayout({children, ...props}: Props): ReactNode {
         {/* ------- CUSTOM CODE -------- */}
         {/* Ideally this would only render if there is a demoUrl and the it's a mobile device. However,the `windowSize` does not provide a tablet so we have to hide it through CSS. */}
         {demoUrl && (
-          <div className="col col--4">
-            <div className="doc-demo-wrapper">
+          <div className={clsx('col col--4', styles.docDemoCol)}>
+            <div className={styles.docDemoWrapper}>
               <DocDemo url={demoUrl} source={demoSourceUrl} />
             </div>
           </div>
diff --git a/src/theme/DocItem/Layout/styles.module.css b/src/theme/DocItem/Layout/styles.module.css
new file mode 100644
index 00000000000..f19b769db4f
--- /dev/null
+++ b/src/theme/DocItem/Layout/styles.module.css
@@ -0,0 +1,65 @@
+/**
+ * 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.
+ */
+
+.docItemContainer header + *,
+.docItemContainer article > *:first-child {
+  margin-top: 0;
+}
+
+@media (min-width: 997px) {
+  .docItemCol {
+    max-width: 75% !important;
+  }
+}
+
+/* CUSTOM CODE */
+.docItemCol {
+  max-width: initial;
+  min-width: 0;
+}
+
+@media (min-width: 997px) {
+  .docItemCol {
+    max-width: initial !important;
+  }
+}
+
+.docItemContainer {
+  max-width: var(--doc-item-container-width, 42rem);
+  flex-grow: 1;
+  min-width: 0;
+}
+
+.docItemRow {
+  flex-wrap: nowrap;
+}
+
+.docItemRow > :global(.col) {
+  display: flex;
+  justify-content: center;
+  min-width: 0;
+}
+
+/*
+ * The docs demo is hidden on mobile and tablet. It is the only thing in its
+ * column, so the column is hidden too, or it would leave a blank gap.
+ */
+@media (max-width: 1364px) {
+  .docItemRow > .docDemoCol {
+    display: none;
+  }
+}
+
+.docDemoWrapper > * {
+  position: sticky;
+  top: var(--ifm-navbar-height);
+  max-height: calc(100vh - var(--ifm-navbar-height));
+  margin-block-start: 5rem;
+  padding-block-end: 32px;
+  overflow-y: auto;
+}
+/* CUSTOM CODE END */
diff --git a/src/theme/DocRoot/Layout/Main/index.tsx b/src/theme/DocRoot/Layout/Main/index.tsx
index 1675410fc68..59babc5a002 100644
--- a/src/theme/DocRoot/Layout/Main/index.tsx
+++ b/src/theme/DocRoot/Layout/Main/index.tsx
@@ -10,9 +10,11 @@ import Main from '@theme-original/DocRoot/Layout/Main';
 import Navbar from '@theme/Navbar';
 import type { Props } from '@theme/DocRoot/Layout/Main';
 
+import styles from './styles.module.css';
+
 export default function MainWrapper(props: Props): ReactNode {
   return (
-    <div>
+    <div className={styles.mainWrapper}>
       <Navbar />
       <Main {...props} />
     </div>
diff --git a/src/theme/DocRoot/Layout/Main/styles.module.css b/src/theme/DocRoot/Layout/Main/styles.module.css
new file mode 100644
index 00000000000..cabac783777
--- /dev/null
+++ b/src/theme/DocRoot/Layout/Main/styles.module.css
@@ -0,0 +1,10 @@
+.mainWrapper {
+  flex-grow: 1;
+  min-width: 0;
+}
+
+/* Let the docs content use the full width next to the sidebar. */
+.mainWrapper > main,
+.mainWrapper > main > :global(.container) {
+  max-width: initial;
+}
diff --git a/src/theme/DocSidebar/index.tsx b/src/theme/DocSidebar/index.tsx
index e3e9c290b4e..3a9f921924b 100644
--- a/src/theme/DocSidebar/index.tsx
+++ b/src/theme/DocSidebar/index.tsx
@@ -13,6 +13,8 @@ import type { Props } from '@theme/DocSidebar';
 
 import Logo from '@theme-original/Logo';
 
+import styles from './styles.module.css';
+
 export default function DocSidebarWrapper(props: Props): ReactNode {
   const location = useLocation();
 
@@ -27,7 +29,7 @@ export default function DocSidebarWrapper(props: Props): ReactNode {
 
   return (
     <>
-      <Logo />
+      <Logo className={styles.logo} />
       <DocSidebar {...props} />
     </>
   );
diff --git a/src/theme/DocSidebar/styles.module.css b/src/theme/DocSidebar/styles.module.css
new file mode 100644
index 00000000000..bb811789df5
--- /dev/null
+++ b/src/theme/DocSidebar/styles.module.css
@@ -0,0 +1,6 @@
+.logo {
+  display: flex;
+  align-items: center;
+  height: var(--ifm-navbar-height);
+  padding-inline: var(--sidebar-spacing-horizontal);
+}
diff --git a/src/theme/EditMetaRow/index.tsx b/src/theme/EditMetaRow/index.tsx
index 12606c9f354..c8d36250415 100644
--- a/src/theme/EditMetaRow/index.tsx
+++ b/src/theme/EditMetaRow/index.tsx
@@ -24,7 +24,6 @@ import type {Props} from '@theme/EditMetaRow';
 
 import LastUpdated from '@theme/LastUpdated';
 
-import globalStyles from '@docusaurus/theme-classic/lib/theme/EditMetaRow/styles.module.css';
 import styles from './styles.module.css';
 
 export default function EditMetaRow({
@@ -50,7 +49,7 @@ export default function EditMetaRow({
     <div className={clsx('row', className)}>
       {/* CUSTOM CODE — "Edit this page | Copy page" as peer links on one row */}
       <div
-        className={clsx('col', globalStyles.noPrint, styles.editMetaActions)}>
+        className={clsx('col', styles.noPrint, styles.editMetaActions)}>
         {editUrl && <EditThisPage editUrl={editUrl} />}
         <CopyPageButton
           markdownUrl={markdownUrl}
@@ -63,7 +62,7 @@ export default function EditMetaRow({
       {/* CUSTOM CODE END */}
       {/* CUSTOM CODE — wrap the whole column in the conditional, not just its contents */}
       {(lastUpdatedAt || lastUpdatedBy) && (
-        <div className={clsx('col', globalStyles.lastUpdated)}>
+        <div className={clsx('col', styles.lastUpdated)}>
           <LastUpdated
             lastUpdatedAt={lastUpdatedAt}
             lastUpdatedBy={lastUpdatedBy}
diff --git a/src/theme/EditMetaRow/styles.module.css b/src/theme/EditMetaRow/styles.module.css
index 4f10b3935f4..1aefb65bbf7 100644
--- a/src/theme/EditMetaRow/styles.module.css
+++ b/src/theme/EditMetaRow/styles.module.css
@@ -1,3 +1,29 @@
+/**
+ * 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.
+ */
+
+.lastUpdated {
+  font-size: smaller;
+  font-style: italic;
+  margin-top: 0.2rem;
+}
+
+@media (min-width: 997px) {
+  .lastUpdated {
+    text-align: right;
+  }
+}
+
+@media print {
+  .noPrint {
+    display: none;
+  }
+}
+
+/* CUSTOM CODE */
 .editMetaActions {
   display: inline-flex;
   align-items: center;
diff --git a/src/theme/Icon/Edit/index.tsx b/src/theme/Icon/Edit/index.tsx
index c598a12f2e0..d9e22fa83e1 100644
--- a/src/theme/Icon/Edit/index.tsx
+++ b/src/theme/Icon/Edit/index.tsx
@@ -10,7 +10,7 @@ import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import type {Props} from '@theme/Icon/Edit';
 
-import styles from '@docusaurus/theme-classic/src/theme/Icon/Edit/styles.module.css';
+import styles from './styles.module.css';
 
 export default function IconEdit({className, ...restProps}: Props): ReactNode {
   return (
diff --git a/src/theme/Icon/Edit/styles.module.css b/src/theme/Icon/Edit/styles.module.css
new file mode 100644
index 00000000000..03ffe165641
--- /dev/null
+++ b/src/theme/Icon/Edit/styles.module.css
@@ -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.
+ */
+
+.iconEdit {
+  margin-right: 0.3em;
+  vertical-align: sub;
+}
diff --git a/src/theme/Layout/index.tsx b/src/theme/Layout/index.tsx
index a64e9d24f65..01d5da05876 100644
--- a/src/theme/Layout/index.tsx
+++ b/src/theme/Layout/index.tsx
@@ -20,7 +20,7 @@ import Footer from '@theme/Footer';
 import LayoutProvider from '@theme/Layout/Provider';
 import ErrorPageContent from '@theme/ErrorPageContent';
 import type {Props} from '@theme/Layout';
-import styles from '@docusaurus/theme-classic/src/theme/Layout/styles.module.css';
+import styles from './styles.module.css';
 
 export default function Layout(props: Props): ReactNode {
   const {
diff --git a/src/theme/Layout/styles.module.css b/src/theme/Layout/styles.module.css
new file mode 100644
index 00000000000..162cbd12574
--- /dev/null
+++ b/src/theme/Layout/styles.module.css
@@ -0,0 +1,28 @@
+/**
+ * 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.
+ */
+
+html,
+body {
+  height: 100%;
+}
+
+.mainWrapper {
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Docusaurus-specific utility class */
+:global(.docusaurus-mt-lg) {
+  margin-top: 3rem;
+}
+
+:global(#__docusaurus) {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
diff --git a/src/theme/MDXComponents/Table.tsx b/src/theme/MDXComponents/Table/index.tsx
similarity index 92%
rename from src/theme/MDXComponents/Table.tsx
rename to src/theme/MDXComponents/Table/index.tsx
index fdc582a1cb9..494dada7fd8 100644
--- a/src/theme/MDXComponents/Table.tsx
+++ b/src/theme/MDXComponents/Table/index.tsx
@@ -4,6 +4,8 @@
 
 import React, { type ComponentProps, type ReactElement, type ReactNode } from 'react';
 
+import styles from './styles.module.css';
+
 /** One `<th>` or `<td>`, the deepest level this component reaches into. */
 type Cell = ReactElement<{ children?: ReactNode }>;
 
@@ -22,7 +24,7 @@ export default function MDXTable({
   const hasTheadValue = !Array.isArray(tableHeadings) || tableHeadings.every(({ props }) => props.children);
 
   return (
-    <div className="table-wrapper">
+    <div className={styles.tableWrapper}>
       <table {...props} children={hasTheadValue ? children : children.slice(1)} />
     </div>
   );
diff --git a/src/theme/MDXComponents/Table/styles.module.css b/src/theme/MDXComponents/Table/styles.module.css
new file mode 100644
index 00000000000..34f75bb6e68
--- /dev/null
+++ b/src/theme/MDXComponents/Table/styles.module.css
@@ -0,0 +1,3 @@
+.tableWrapper {
+  overflow-x: auto;
+}
diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
index dc5469c2383..81cf45476d1 100644
--- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
+++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
@@ -17,8 +17,7 @@ import IconLanguage from '@theme/Icon/Language';
 import type {LinkLikeNavbarItemProps} from '@theme/NavbarItem';
 import type {Props} from '@theme/NavbarItem/LocaleDropdownNavbarItem';
 
-import styles from '@docusaurus/theme-classic/lib/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css';
-import customStyles from './styles.module.css';
+import styles from './styles.module.css';
 
 function useLocaleDropdownUtils() {
   const {
@@ -129,7 +128,7 @@ export default function LocaleDropdownNavbarItem({
         <>
           <IconLanguage className={styles.iconLanguage} />
           {/* CUSTOM CODE - added span in order to hide the text */}
-          <span className={customStyles.localeVisuallyHidden}>
+          <span className={styles.localeVisuallyHidden}>
             {dropdownLabel}
           </span>
         </>
diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css b/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css
index 296d3be96f6..336e50d5f37 100644
--- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css
+++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css
@@ -1,13 +1,25 @@
-.localeVisuallyHidden {
-  position: absolute;
-	position: absolute !important;
-	width: 1px !important;
-	height: 1px !important;
-	padding: 0 !important;
-	margin: -1px !important;
-	overflow: hidden !important;
-	clip: rect(0,0,0,0) !important;
-	white-space: nowrap !important;
-	border: 0 !important;
+/**
+ * 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.
+ */
+
+.iconLanguage {
+  vertical-align: text-bottom;
+  margin-right: 5px;
 }
 
+/* CUSTOM CODE */
+.localeVisuallyHidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+/* CUSTOM CODE END */
diff --git a/src/theme/README.md b/src/theme/README.md
index c831a53cc71..04aceae5c4e 100644
--- a/src/theme/README.md
+++ b/src/theme/README.md
@@ -4,7 +4,17 @@ This folder is used to override the base docusaurus theme. It houses [swizzled c
 
 Wrapped components import from `@theme-original` and are our own code, so they follow the repo's Prettier config. Ejected components are full copies of upstream, so each one is listed in `.prettierignore` by path to keep upstream's formatting so the copy can still be compared against `@docusaurus/theme-classic`. Add that entry as part of ejecting a component. Nothing in CI checks for it, so a missing entry means Prettier reformats the copy and the difference from upstream is lost without anyone noticing.
 
-All code updates should be marked with comments to allow more seamless version updating. The styles file for components that have been unsafely swizzled should absolutely not be edited. All styling should be done from the [component partials](/src/styles/components).
+All code updates should be marked with comments to allow more seamless version updating.
 
 - Original theme: [`@docusaurus/theme-classic`](https://docusaurus.io/docs/api/themes/@docusaurus/theme-classic)
 - [Original theme source](https://github.com/facebook/docusaurus/tree/v3.10.2/packages/docusaurus-theme-classic/src/theme)
+
+## Styles
+
+Where a component's styles live depends on who renders the markup:
+
+- **Ejected:** the markup is ours, so its styles live next to it. Keep a copy of upstream's `styles.module.css`, the same file `docusaurus swizzle --eject` creates, and add our rules between `/* CUSTOM CODE */` and `/* CUSTOM CODE END */`, leaving upstream's rules as they are.
+- **Wrapped:** the wrapper's own markup is styled in its own `styles.module.css`. The upstream markup it renders inside stays upstream's, so overrides for it go in [src/css/theme](/src/css/theme).
+- **Not swizzled:** overrides go in [src/css/theme](/src/css/theme).
+
+When a component that already has a file in `src/css/theme` gets swizzled, wrapping it leaves that file in place. Ejecting it moves the file's rules into the ejected copy's `styles.module.css` and removes the file along with its `@use` in `custom.scss`.
diff --git a/src/theme/TOC/index.tsx b/src/theme/TOC/index.tsx
index 750de6bf10a..149bbe65b58 100644
--- a/src/theme/TOC/index.tsx
+++ b/src/theme/TOC/index.tsx
@@ -19,6 +19,8 @@ import { usePluginData } from '@docusaurus/useGlobalData';
 import { PrismicRichText } from '@prismicio/react';
 import { useDoc } from '@docusaurus/plugin-content-docs/client';
 
+import styles from './styles.module.css';
+
 interface TOCProps extends Props {
   editUrl: string;
 }
@@ -38,12 +40,12 @@ export default function TOCWrapper(props: TOCProps): ReactNode {
   if (isEmpty) return null;
 
   return (
-    <div className="toc-wrapper">
+    <div className={styles.tocWrapper}>
       <Heading as="h2">Contents</Heading>
       <TOC {...props} />
       <EditThisPage editUrl={metadata.editUrl} />
       {activeAd && (
-        <div className="internal-ad">
+        <div className={styles.internalAd}>
           <Link
             to={activeAd.ad_url.url}
             target={activeAd.ad_url.target}
diff --git a/src/theme/TOC/styles.module.css b/src/theme/TOC/styles.module.css
new file mode 100644
index 00000000000..2855cbdd80b
--- /dev/null
+++ b/src/theme/TOC/styles.module.css
@@ -0,0 +1,54 @@
+.tocWrapper {
+  overflow: auto;
+  position: sticky;
+  top: calc(var(--ifm-navbar-height) + 16px);
+  max-height: calc(100vh - var(--ifm-navbar-height) - 16px);
+  margin-block-start: 5rem;
+  padding-block-end: 2rem;
+}
+
+.tocWrapper h2 {
+  font-size: 0.625rem;
+  line-height: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--c-indigo-60);
+}
+
+.tocWrapper :global(.table-of-contents) {
+  padding: 0;
+  margin-inline-start: calc(-1 * var(--ifm-toc-padding-horizontal));
+  margin-inline-end: calc(-1 * var(--ifm-toc-padding-horizontal));
+}
+
+.tocWrapper :global(.table-of-contents) > li:first-of-type {
+  margin-block-start: 0;
+}
+
+.tocWrapper :global(.table-of-contents) > li:last-of-type {
+  margin-block-end: 0;
+}
+
+.tocWrapper :global(.theme-edit-this-page) {
+  --edit-this-page-c: var(--ifm-heading-color);
+
+  margin-block-start: 1.25rem;
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+
+.internalAd {
+  cursor: pointer;
+  max-width: 148px;
+  display: block;
+  margin: 48px 0 0;
+}
+
+.internalAd p {
+  font-size: 13px;
+  line-height: 19px;
+  font-weight: 400;
+  letter-spacing: 0.02em;
+  color: var(--ifm-font-color-base);
+  transition: 0.2s color;
+}