From 9ad26a911de00af7396a418e590aac9ac3d6d8a1 Mon Sep 17 00:00:00 2001 From: Elliot Hesp Date: Tue, 26 May 2026 10:41:54 +0100 Subject: [PATCH 1/6] docs: update generated reference styling --- docs/reference.css | 104 +++++++++++++++++++++++++++++++++++++++++++++ typedoc.json | 4 +- 2 files changed, 107 insertions(+), 1 deletion(-) create mode 100644 docs/reference.css diff --git a/docs/reference.css b/docs/reference.css new file mode 100644 index 0000000000..091950f243 --- /dev/null +++ b/docs/reference.css @@ -0,0 +1,104 @@ +:root { + --light-color-background: lab(100% 0 0); + --light-color-background-secondary: lab(100% 0 0); + --light-color-accent: lab(90.952% 0 -.0000119209); + --dark-color-background: lab(2.75381% 0 0); + --dark-color-background-secondary: lab(2.75381% 0 0); + --dark-color-accent: lab(100% 0 0/.1); + --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; +} + +.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; +} + +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); +} + +@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); + } +} diff --git a/typedoc.json b/typedoc.json index 95455fee0d..500d4af980 100644 --- a/typedoc.json +++ b/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,9 +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" }, From 406c89fb569e512d7754f2204b6f3cae5bd70ff3 Mon Sep 17 00:00:00 2001 From: Elliot Hesp Date: Tue, 26 May 2026 10:46:53 +0100 Subject: [PATCH 2/6] docs: knock back body color --- docs/reference.css | 66 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) diff --git a/docs/reference.css b/docs/reference.css index 091950f243..b78feb2cc5 100644 --- a/docs/reference.css +++ b/docs/reference.css @@ -5,6 +5,8 @@ --dark-color-background: lab(2.75381% 0 0); --dark-color-background-secondary: lab(2.75381% 0 0); --dark-color-accent: lab(100% 0 0/.1); + --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; @@ -64,6 +66,70 @@ footer, .tsd-filter-visibility { margin-bottom: var(--reference-nav-item-padding-y); } +@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 { From ca4176672b955e17629a71586f9c22517121c930 Mon Sep 17 00:00:00 2001 From: Elliot Hesp Date: Tue, 26 May 2026 10:55:59 +0100 Subject: [PATCH 3/6] docs: improve sidebar active state --- docs/reference.css | 40 ++++++++++++++++++++++++++++++++++++++++ typedoc.json | 2 +- 2 files changed, 41 insertions(+), 1 deletion(-) diff --git a/docs/reference.css b/docs/reference.css index b78feb2cc5..0efbc8d29f 100644 --- a/docs/reference.css +++ b/docs/reference.css @@ -2,9 +2,11 @@ --light-color-background: lab(100% 0 0); --light-color-background-secondary: lab(100% 0 0); --light-color-accent: lab(90.952% 0 -.0000119209); + --light-color-active-menu-item: lab(96% 0 0); --dark-color-background: lab(2.75381% 0 0); --dark-color-background-secondary: lab(2.75381% 0 0); --dark-color-accent: lab(100% 0 0/.1); + --dark-color-active-menu-item: lab(100% 0 0 / 0.08); --reference-dark-body-text: lab(86% 0 0); --reference-light-body-text: lab(40% 0 0); --dim-footer-height: 0px; @@ -16,6 +18,8 @@ --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); } .tsd-toolbar-contents > .title { @@ -66,6 +70,42 @@ footer, .tsd-filter-visibility { 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 / 0.05); + } +} + +:root[data-theme="dark"] { + --reference-nav-hover-bg: lab(100% 0 0 / 0.05); +} + @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .col-content, :root:not([data-theme="light"]) .site-menu, diff --git a/typedoc.json b/typedoc.json index 500d4af980..397f70ded7 100644 --- a/typedoc.json +++ b/typedoc.json @@ -24,7 +24,7 @@ ], "out": "reference", "githubPages": true, - "router": "structure", + "router": "structure-dir", "navigation": { "includeFolders": true, "includeCategories": true, From 49b212fbec8ea2d27514ab5f9e6e62aaa1151ace Mon Sep 17 00:00:00 2001 From: Elliot Hesp Date: Tue, 26 May 2026 10:56:54 +0100 Subject: [PATCH 4/6] docs: update text size --- docs/reference.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/reference.css b/docs/reference.css index 0efbc8d29f..0aa8039c32 100644 --- a/docs/reference.css +++ b/docs/reference.css @@ -20,6 +20,7 @@ --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 { @@ -36,6 +37,10 @@ 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; } From 798f7b1b4b8c872486092cb70aa0101cd8645a1c Mon Sep 17 00:00:00 2001 From: Elliot Hesp Date: Tue, 26 May 2026 10:58:32 +0100 Subject: [PATCH 5/6] docs: improve css readability --- docs/reference.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/reference.css b/docs/reference.css index 0aa8039c32..3e0f8bf656 100644 --- a/docs/reference.css +++ b/docs/reference.css @@ -1,12 +1,12 @@ :root { --light-color-background: lab(100% 0 0); --light-color-background-secondary: lab(100% 0 0); - --light-color-accent: lab(90.952% 0 -.0000119209); + --light-color-accent: lab(91% 0 0); --light-color-active-menu-item: lab(96% 0 0); - --dark-color-background: lab(2.75381% 0 0); - --dark-color-background-secondary: lab(2.75381% 0 0); - --dark-color-accent: lab(100% 0 0/.1); - --dark-color-active-menu-item: lab(100% 0 0 / 0.08); + --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; @@ -103,12 +103,12 @@ footer, .tsd-filter-visibility { @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { - --reference-nav-hover-bg: lab(100% 0 0 / 0.05); + --reference-nav-hover-bg: lab(100% 0 0 / 5%); } } :root[data-theme="dark"] { - --reference-nav-hover-bg: lab(100% 0 0 / 0.05); + --reference-nav-hover-bg: lab(100% 0 0 / 5%); } @media (prefers-color-scheme: dark) { From 6b3f0449bfde19f8b4c465683ba5078359292287 Mon Sep 17 00:00:00 2001 From: Elliot Hesp Date: Tue, 26 May 2026 12:43:04 +0100 Subject: [PATCH 6/6] docs: update structure --- typedoc.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/typedoc.json b/typedoc.json index 397f70ded7..500d4af980 100644 --- a/typedoc.json +++ b/typedoc.json @@ -24,7 +24,7 @@ ], "out": "reference", "githubPages": true, - "router": "structure-dir", + "router": "structure", "navigation": { "includeFolders": true, "includeCategories": true,