docs: update generated reference API styling (#9031)

(cherry picked from commit 30d41b9)

Author: Ehesp

docs/reference.css

@@ -0,0 +1,215 @@
+:root {
+  --light-color-background: lab(100% 0 0);
+  --light-color-background-secondary: lab(100% 0 0);
+  --light-color-accent: lab(91% 0 0);
+  --light-color-active-menu-item: lab(96% 0 0);
+  --dark-color-background: lab(3% 0 0);
+  --dark-color-background-secondary: lab(3% 0 0);
+  --dark-color-accent: lab(100% 0 0 / 10%);
+  --dark-color-active-menu-item: lab(100% 0 0 / 8%);
+  --reference-dark-body-text: lab(86% 0 0);
+  --reference-light-body-text: lab(40% 0 0);
+  --dim-footer-height: 0px;
+  --dim-toolbar-contents-height: 3.5rem;
+  --dim-container-main-margin-y: 0px;
+  --reference-column-padding-top: 1.5rem;
+  --reference-content-padding-x: 2rem;
+  --reference-nav-nested-indent: .8rem;
+  --reference-nav-item-padding-y: 0.3rem;
+  --reference-header-logo: url("https://static.invertase.io/assets/react-native-firebase-favicon.png");
+  --reference-header-logo-size: 1.75rem;
+  --reference-nav-active-radius: 0.375rem;
+  --reference-nav-hover-bg: lab(98% 0 0);
+  --reference-header-actions-font-size: 0.875rem;
+}
+
+.tsd-toolbar-contents > .title {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+.tsd-toolbar-contents > .title::before {
+  content: "";
+  width: var(--reference-header-logo-size);
+  height: var(--reference-header-logo-size);
+  flex-shrink: 0;
+  background: var(--reference-header-logo) center / contain no-repeat;
+}
+
+#tsd-toolbar-links a {
+  font-size: var(--reference-header-actions-font-size);
+}
+
+footer, .tsd-filter-visibility {
+  display: none;
+}
+
+.tsd-navigation.settings {
+  margin-bottom: 2rem;
+}
+
+.tsd-nested-navigation {
+  margin-left: calc(var(--reference-nav-nested-indent) * 2);
+}
+
+.tsd-nested-navigation > li > details {
+  margin-left: calc(-1 * var(--reference-nav-nested-indent));
+}
+
+.tsd-small-nested-navigation {
+  margin-left: var(--reference-nav-nested-indent);
+}
+
+.tsd-small-nested-navigation > li > details {
+  margin-left: calc(-1 * var(--reference-nav-nested-indent));
+}
+
+.site-menu .tsd-navigation a,
+.site-menu .tsd-navigation .tsd-accordion-summary {
+  padding-top: var(--reference-nav-item-padding-y);
+  padding-bottom: var(--reference-nav-item-padding-y);
+}
+
+#tsd-sidebar-links a {
+  margin-bottom: var(--reference-nav-item-padding-y);
+}
+
+.tsd-navigation a.current,
+.tsd-page-navigation a.current {
+  background: var(--color-active-menu-item);
+  color: var(--color-text);
+  border-radius: var(--reference-nav-active-radius);
+}
+
+.site-menu .tsd-navigation a,
+.site-menu .tsd-navigation .tsd-accordion-summary,
+#tsd-sidebar-links a {
+  border-radius: var(--reference-nav-active-radius);
+  text-decoration: none;
+}
+
+.site-menu .tsd-navigation a:hover,
+.site-menu .tsd-navigation .tsd-accordion-summary:hover,
+#tsd-sidebar-links a:hover {
+  text-decoration: none;
+  background: var(--reference-nav-hover-bg);
+}
+
+.site-menu .tsd-navigation a.current:hover,
+#tsd-sidebar-links a.current:hover {
+  background: var(--color-active-menu-item);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --reference-nav-hover-bg: lab(100% 0 0 / 5%);
+  }
+}
+
+:root[data-theme="dark"] {
+  --reference-nav-hover-bg: lab(100% 0 0 / 5%);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .col-content,
+  :root:not([data-theme="light"]) .site-menu,
+  :root:not([data-theme="light"]) .page-menu,
+  :root:not([data-theme="light"]) #tsd-sidebar-links {
+    --color-text: var(--reference-dark-body-text);
+  }
+
+  :root:not([data-theme="light"]) .col-content {
+    color: var(--reference-dark-body-text);
+  }
+
+  :root:not([data-theme="light"]) .col-content :is(h1, h2, h3, h4, h5, h6) {
+    color: var(--dark-color-text);
+  }
+}
+
+:root[data-theme="dark"] .col-content,
+:root[data-theme="dark"] .site-menu,
+:root[data-theme="dark"] .page-menu,
+:root[data-theme="dark"] #tsd-sidebar-links {
+  --color-text: var(--reference-dark-body-text);
+}
+
+:root[data-theme="dark"] .col-content {
+  color: var(--reference-dark-body-text);
+}
+
+:root[data-theme="dark"] .col-content :is(h1, h2, h3, h4, h5, h6) {
+  color: var(--dark-color-text);
+}
+
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme="dark"]) .col-content,
+  :root:not([data-theme="dark"]) .site-menu,
+  :root:not([data-theme="dark"]) .page-menu,
+  :root:not([data-theme="dark"]) #tsd-sidebar-links {
+    --color-text: var(--reference-light-body-text);
+  }
+
+  :root:not([data-theme="dark"]) .col-content {
+    color: var(--reference-light-body-text);
+  }
+
+  :root:not([data-theme="dark"]) .col-content :is(h1, h2, h3, h4, h5, h6) {
+    color: var(--light-color-text);
+  }
+}
+
+:root[data-theme="light"] .col-content,
+:root[data-theme="light"] .site-menu,
+:root[data-theme="light"] .page-menu,
+:root[data-theme="light"] #tsd-sidebar-links {
+  --color-text: var(--reference-light-body-text);
+}
+
+:root[data-theme="light"] .col-content {
+  color: var(--reference-light-body-text);
+}
+
+:root[data-theme="light"] .col-content :is(h1, h2, h3, h4, h5, h6) {
+  color: var(--light-color-text);
+}
+
+@media (min-width: 770px) {
+  /* TypeDoc re-applies this at desktop breakpoints — override in the same query */
+  .container-main {
+    --dim-container-main-margin-y: 0px;
+    min-height: 0;
+  }
+
+  /*
+   * Sidebar max-height is computed from layout vars; padding must stay inside
+   * that box (TypeDoc defaults to content-box, which adds padding on top).
+   */
+  .col-sidebar,
+  .site-menu,
+  .page-menu {
+    box-sizing: border-box;
+  }
+
+  .site-menu {
+    margin-top: 0;
+    padding: var(--reference-column-padding-top) 0;
+  }
+
+  .col-content {
+    padding-top: var(--reference-column-padding-top);
+    padding-left: var(--reference-content-padding-x);
+    padding-right: var(--reference-content-padding-x);
+  }
+
+  .col-content .tsd-page-title h1 {
+    margin-top: 0;
+  }
+}
+
+@media (min-width: 1200px) {
+  .page-menu {
+    padding-top: var(--reference-column-padding-top);
+  }
+}

typedoc.json

@@ -1,6 +1,7 @@
 {
   "$schema": "https://typedoc.org/schema.json",
   "name": "React Native Firebase",
+  "customCss": "./docs/reference.css",
   "entryPointStrategy": "packages",
   "entryPoints": [
     "packages/app",
@@ -37,8 +38,10 @@
   "searchInComments": true,
   "hideGenerator": true,
   "cleanOutputDir": true,
-  "titleLink": "https://github.com/invertase/react-native-firebase",
+  "titleLink": "/",
+  "favicon": "https://static.invertase.io/assets/react-native-firebase-favicon.png",
   "navigationLinks": {
+    "Documentation": "https://rnfirebase.io",
     "GitHub": "https://github.com/invertase/react-native-firebase",
     "npm": "https://www.npmjs.com/search?q=scope%3Areact-native-firebase"
   },