Try CSS variable again

.pre-commit-config.yaml

@@ -1,6 +1,6 @@
 repos:
-  - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: "v3.1.0"
+  - repo: https://github.com/rbubley/mirrors-prettier
+    rev: "v3.5.3"
     hooks:
       - id: prettier
         args: ["--ignore-path", ".prettierignore"]

public/index.html

@@ -78,7 +78,7 @@ <h2 id="notification">Notification</h2>
       <readthedocs-notification class="raised toast"></readthedocs-notification>
       <readthedocs-notification class="inverted"></readthedocs-notification>
       <readthedocs-notification class="inverted raised"></readthedocs-notification>
-      <readthedocs-notification class="inverted" style="--readthedocs-notification-background-color: purple;"></readthedocs-notification>
+      <readthedocs-notification class="inverted" style="--readthedocs-notification-inverted-background-color: purple;"></readthedocs-notification>
       <readthedocs-notification class="titled raised"></readthedocs-notification>
       <readthedocs-notification class="titled inverted raised"></readthedocs-notification>
   </body>

src/application.js

@@ -28,7 +28,7 @@ import * as customscript from "./customscript";
 import * as application from "./application";
 import { default as objectPath } from "object-path";
 
-import doctoolsStyleSheet from "./doctools.css";
+import { defaultStyleSheet } from "./defaults.js";
 
 export class AddonsApplication {
   constructor() {
@@ -125,11 +125,7 @@ export class AddonsApplication {
     const elementHtml = document.querySelector("html");
     if (elementHtml) {
       // Inject styles at the parent DOM to set variables at :root
-      let styleSheet = doctoolsStyleSheet;
-      if (doctoolsStyleSheet instanceof CSSResult) {
-        styleSheet = doctoolsStyleSheet.styleSheet;
-      }
-      document.adoptedStyleSheets = [styleSheet];
+      document.adoptedStyleSheets = [defaultStyleSheet];
 
       // If we detect a documentation tool, set attributes on :root to allow
       // for CSS selectors to utilize these values.

src/defaults.css

@@ -0,0 +1,27 @@
+@layer defaults {
+  :root {
+    --readthedocs-font-family:
+      "Lato", "proxima-nova", "Helvetica Neue", "Arial", sans-serif;
+    --readthedocs-font-size: 1rem;
+  }
+
+  :root[data-readthedocs-tool="mkdocs-material"] {
+    --readthedocs-font-size: 0.58rem;
+  }
+
+  :root[data-readthedocs-tool="antora"] {
+    --readthedocs-font-size: 0.7rem;
+  }
+
+  :root[data-readthedocs-tool="mdbook"] {
+    --readthedocs-font-size: 1.3rem;
+  }
+
+  :root[data-readthedocs-tool="sphinx"][data-readthedocs-tool-theme="furo"] {
+    --readthedocs-font-size: 0.725rem;
+  }
+
+  :root[data-readthedocs-tool="sphinx"][data-readthedocs-tool-theme="immaterial"] {
+    --readthedocs-font-size: 0.58rem;
+  }
+}

src/defaults.js

@@ -0,0 +1,29 @@
+import styleSheetDefaults from "./defaults.css";
+import styleSheetFlyout from "./flyout.css";
+import styleSheetFiletreediff from "./filetreediff.css";
+import styleSheetNotification from "./notification.css";
+import styleSheetSearch from "./search.css";
+
+import { CSSResult } from "lit";
+
+// We use a native construct here as Lit's CSSResult is largely read only.
+export const defaultStyleSheet = new CSSStyleSheet();
+
+const styleSheets = [
+  styleSheetDefaults,
+  styleSheetFlyout,
+  styleSheetFiletreediff,
+  styleSheetNotification,
+  styleSheetSearch,
+];
+
+for (let styleSheet of styleSheets) {
+  if (styleSheet instanceof CSSResult) {
+    styleSheet = styleSheet.styleSheet;
+  }
+  for (const rule of styleSheet.cssRules) {
+    if (rule instanceof CSSLayerBlockRule && rule.name == "defaults") {
+      defaultStyleSheet.insertRule(rule.cssText);
+    }
+  }
+}

src/filetreediff.css

@@ -1,60 +1,53 @@
-/* Using --addons-* prefix variables for consistency and to allow for overrides */
-:host {
-  --addons-filetreediff-color: var(
-    --readthedocs-filetreediff-color,
-    rgb(252, 252, 252)
-  );
-  --addons-filetreediff-background-color: var(
-    --readthedocs-filetreediff-background-color,
-    rgb(39, 39, 37)
-  );
-  --addons-filetreediff-border-color: var(
-    --readthedocs-filetreediff-border-color,
-    #ddd
-  );
-  --addons-filetreediff-font-size: var(
-    --readthedocs-filetreediff-font-size,
-    0.85rem
-  );
-  --addons-filetreediff-label-color: var(
-    --readthedocs-filetreediff-label-color,
-    #333
-  );
+@layer defaults {
+  :root {
+    --readthedocs-filetreediff-font-size: calc(
+      var(--readthedocs-font-size) * 0.85
+    );
+    --readthedocs-filetreediff-font-family: var(--readthedocs-font-family);
+
+    --readthedocs-filetreediff-color: rgb(252, 252, 252);
+    --readthedocs-filetreediff-background-color: rgb(39, 39, 37);
+    --readthedocs-filetreediff-border-color: #ddd;
+    --readthedocs-filetreediff-label-color: #333;
+    --readthedocs-filetreediff-chunks-color: #27ae60;
+  }
 }
 
 :host > div {
   position: fixed;
   top: 0;
-  right: 1rem;
-  color: var(--addons-filetreediff-color);
-  background-color: var(--addons-filetreediff-background-color);
-  padding: 0.25rem 0.75rem;
-  box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1);
+  right: 1em;
+  color: var(--readthedocs-filetreediff-color);
+  background-color: var(--readthedocs-filetreediff-background-color);
+  padding: 0.25em 0.75em;
+  box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.1);
   z-index: 2000;
-  border-radius: 0 0 0.375rem 0.375rem;
-  font-size: var(--addons-filetreediff-font-size);
+  border-radius: 0 0 0.375em 0.375em;
+  font-size: var(--readthedocs-filetreediff-font-size);
+  font-family: var(--readthedocs-filetreediff-font-family);
 }
 
 :host > div > div {
   display: flex;
-  gap: 0.75rem;
+  gap: 0.75em;
   align-items: center;
 }
 
 :host > div > div > select {
   flex: 1;
-  padding: 0.25rem 0.5rem;
+  padding: 0.25em 0.5em;
   border: 0;
-  color: var(--addons-filetreediff-color);
-  background-color: var(--addons-filetreediff-background-color);
-  border-radius: 0.25rem;
+  color: var(--readthedocs-filetreediff-color);
+  background-color: var(--readthedocs-filetreediff-background-color);
+  border-radius: 0.25em;
   appearance: revert;
+  font-size: var(--readthedocs-filetreediff-font-size);
 }
 
 :host > div > div > label {
   display: flex;
   align-items: center;
-  gap: 0.35rem;
+  gap: 0.35em;
   white-space: nowrap;
   cursor: pointer;
 }
@@ -65,15 +58,15 @@
 
 :host > div > div > span:not(.chunks) {
   display: flex;
-  width: 0.5rem;
+  width: 0.5em;
   cursor: pointer;
 }
 
 :host > div > div > span.chunks {
-  color: var(--readthedocs-filetreediff-chunks-color, #27ae60);
+  color: var(--readthedocs-filetreediff-chunks-color);
   font-weight: bold;
   display: flex;
-  min-width: 2.5rem;
+  min-width: 2.5em;
 }
 
 :host > div > div > a {
@@ -90,11 +83,11 @@
 /* Expand to full width on smaller screens */
 @media (max-width: 768px) {
   :host > div {
-    width: calc(100% - 1rem);
+    width: calc(100% - 1em);
     margin: 0;
     right: 0;
     border-radius: 0;
-    padding: 0.5rem;
+    padding: 0.5em;
   }
 
   :host > div > div > select {