cosmos-docusaurus-theme 1.1.0 → 1.1.2

package/CHANGELOG.md

@@ -7,6 +7,26 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ---
 
+## [1.1.2] — 2026-03-10
+
+### Added
+
+- `.state-ok`, `.state-warn`, `.state-crit`, `.state-unknown` — aliases for projects
+  that use `.state-*` naming convention (identical colors to `.status-*`)
+
+## [1.1.1] — 2026-03-09
+
+### Fixed
+
+- **Navbar regression**: dark mode navbar was rendering white with dark text. Root cause:
+  `--ifm-navbar-background-color` CSS variable was not reliably applied in Docusaurus 3
+  SSG/CSR builds. Fix: add direct CSS property overrides on `.navbar` and `.navbar__link`
+  instead of relying solely on CSS custom properties.
+- Dark mode navbar: `background-color: #111827` (Void gray-900) forced directly on element
+- Dark mode footer: `background-color: #030712` (Void gray-950) forced directly
+- Dark mode `.main-wrapper`: `background-color: #030712` forced directly
+- Navbar links/brand/toggle: explicit `color: #e5e5e5` in dark mode
+
 ## [1.1.0] — 2026-03-09
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cosmos-docusaurus-theme",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "A clean, dark-first Docusaurus CSS theme based on TailAdmin design system with Outfit typography",
   "keywords": [
     "docusaurus",

package/src/css/theme.css

@@ -176,8 +176,23 @@ html {
   background: rgb(70, 95, 255, 0.08);
 }
 
+/* Force direct properties — CSS variables alone are not reliable for navbar
+   in all Docusaurus deployment modes (SSG, CSR, file:// local builds). */
 [data-theme='dark'] .navbar {
-  border-bottom-color: #1f2937;  /* Void gray-800 */
+  background-color: #111827;   /* Void gray-900 — same as AppHeader dark:bg-gray-dark */
+  border-bottom-color: #1f2937; /* Void gray-800 */
+}
+
+[data-theme='dark'] .navbar__link {
+  color: #e5e5e5;
+}
+
+[data-theme='dark'] .navbar__brand {
+  color: #e5e5e5;
+}
+
+[data-theme='dark'] .navbar__toggle {
+  color: #e5e5e5;
 }
 
 /* ── Sidebar ─────────────────────────────────────────────────────────────── */
@@ -347,7 +362,19 @@ code {
 }
 
 [data-theme='dark'] .footer {
-  border-top-color: #1f2937;  /* Void gray-800 */
+  background-color: #030712;   /* Void gray-950 — AppLayout dark:bg-gray-950 */
+  border-top-color: #1f2937;   /* Void gray-800 */
+  color: #a3a3a3;
+}
+
+/* Force dark background on main page body — mirrors AppLayout dark:bg-gray-950 */
+[data-theme='dark'] .main-wrapper {
+  background-color: #030712;
+}
+
+/* Doc article area — keep surface color consistent */
+[data-theme='dark'] article {
+  color: #e5e5e5;
 }
 
 /* ── Pagination nav ───────────────────────────────────────────────────────── */
@@ -625,3 +652,24 @@ code {
   color: #6b7280;  /* neutral gray-500 */
   font-weight: 600;
 }
+
+/* Aliases for projects that use .state-* naming (e.g. Rackscope docs) */
+.state-ok {
+  color: #12b76a;
+  font-weight: 600;
+}
+
+.state-warn {
+  color: #f79009;
+  font-weight: 600;
+}
+
+.state-crit {
+  color: #f04438;
+  font-weight: 600;
+}
+
+.state-unknown {
+  color: #6b7280;
+  font-weight: 600;
+}