cosmos-docusaurus-theme 1.0.1 → 1.1.1

package/CHANGELOG.md

@@ -7,6 +7,40 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ---
 
+## [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
+
+- **Progress bar**: `--docusaurus-progress-bar-color` → brand indigo (light + dark)
+- **Announcement bar**: brand-colored banner with styled links and close button
+- **Breadcrumbs**: active crumb uses brand color with subtle hover background
+- **Tabs**: styled active tab border + color, hover state on inactive tabs
+- **Cards**: border, rounded corners (12px), hover effect with brand border
+- **Tags**: pill style with brand-colored background and border
+- **Back-to-top button**: brand indigo with hover state (both modes)
+- **Algolia DocSearch**: full `--docsearch-*` variable set for light and dark
+- **Demo**: now loads `cosmos-docusaurus-theme` as a real npm package (`file:..`)
+  instead of a local path — exactly mirrors real consumer setup
+- **Demo**: new "Native Features" page showcasing all newly styled elements
+
+### Changed
+
+- `demo/docusaurus.config.js`: `themes: ['cosmos-docusaurus-theme']` (was local path)
+- `demo/package.json`: added `cosmos-docusaurus-theme: "file:.."` dependency
+
 ## [1.0.1] — 2026-03-09
 
 ### Fixed

package/README.md

@@ -19,26 +19,47 @@
 ## Features
 
 - **CSS-only** — no swizzled components, no JavaScript
-- **Dark mode first-class** (default), full light mode support
+- **Dark mode first-class** (default) with full light mode support
 - **[Outfit](https://fonts.google.com/specimen/Outfit)** + **JetBrains Mono** typography
-- **Indigo** brand palette (`#465fff`) mapped to Infima variables
-- Styled navbar, sidebar, code blocks, admonitions, tables, pagination, footer, scrollbar
-- Optional utility classes for API reference and status docs
+- **Indigo** brand palette (`#465fff`) — Void dark / Slate light design tokens
+- Covers **every native Docusaurus element** out of the box:
+
+| Element | Styled |
+|---|:---:|
+| Navbar + sidebar | ✅ |
+| Code blocks + inline code | ✅ |
+| Admonitions (note/tip/warning/danger) | ✅ |
+| Tables | ✅ |
+| Pagination + breadcrumbs | ✅ |
+| Footer + scrollbar | ✅ |
+| **Tabs** | ✅ |
+| **Cards** | ✅ |
+| **Tags / pill badges** | ✅ |
+| **Announcement bar** | ✅ |
+| **Back-to-top button** | ✅ |
+| **Progress bar** | ✅ |
+| **Algolia DocSearch** | ✅ |
+
+- Optional utility classes: `.method-get/post/put/delete`, `.status-ok/warn/crit/unknown`
 - Compatible with **Docusaurus 3+**
 
 ---
 
 ## Screenshots
 
-> Dark mode (default) — navbar, sidebar, code blocks, admonitions
+> Dark mode (default) — Void palette: navbar, sidebar, code blocks
 
 ![Dark mode screenshot](https://raw.githubusercontent.com/SckyzO/cosmos-docusaurus-theme/main/docs/screenshots/dark.png)
 
-> Light mode
+> Light mode — Slate palette: Components showcase
 
 ![Light mode screenshot](https://raw.githubusercontent.com/SckyzO/cosmos-docusaurus-theme/main/docs/screenshots/light.png)
 
-> See the full theme live at **[sckyzo.github.io/cosmos-docusaurus-theme](https://sckyzo.github.io/cosmos-docusaurus-theme/)**
+> Native features — tabs, cards, tags, breadcrumbs, DocSearch
+
+![Native features screenshot](https://raw.githubusercontent.com/SckyzO/cosmos-docusaurus-theme/main/docs/screenshots/features.png)
+
+> See all features live at **[sckyzo.github.io/cosmos-docusaurus-theme](https://sckyzo.github.io/cosmos-docusaurus-theme/)**
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cosmos-docusaurus-theme",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "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 ───────────────────────────────────────────────────────── */
@@ -362,6 +389,185 @@ code {
   box-shadow: 0 0 0 3px rgb(70, 95, 255, 0.12);
 }
 
+/* ── Progress bar (page loading indicator) ───────────────────────────────── */
+:root {
+  --docusaurus-progress-bar-color: #465fff;
+}
+
+[data-theme='dark'] {
+  --docusaurus-progress-bar-color: #7592ff;
+}
+
+/* ── Announcement bar ─────────────────────────────────────────────────────── */
+.announcement {
+  background-color: #465fff;
+  color: #fff;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.announcement a {
+  color: #dde9ff;
+  text-decoration: underline;
+}
+
+.announcement a:hover {
+  color: #fff;
+}
+
+.announcement-close {
+  color: rgb(255,255,255,0.7);
+}
+
+.announcement-close:hover {
+  color: #fff;
+}
+
+[data-theme='dark'] .announcement {
+  background-color: #3641f5;
+}
+
+/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */
+:root {
+  --ifm-breadcrumb-color-active:            #465fff;
+  --ifm-breadcrumb-item-background-active:  rgb(70, 95, 255, 0.08);
+  --ifm-breadcrumb-border-radius:           6px;
+  --ifm-breadcrumb-padding-horizontal:      8px;
+  --ifm-breadcrumb-padding-vertical:        4px;
+  --ifm-breadcrumb-separator-size-multiplier: 0.6;
+}
+
+.breadcrumbs__link {
+  border-radius: 6px;
+  font-size: 0.8125rem;
+  transition: background 0.12s, color 0.12s;
+}
+
+/* ── Tabs ────────────────────────────────────────────────────────────────── */
+:root {
+  --ifm-tabs-color:               #5c574f;
+  --ifm-tabs-color-active:        #465fff;
+  --ifm-tabs-color-active-border: #465fff;
+  --ifm-tabs-padding-horizontal:  16px;
+  --ifm-tabs-padding-vertical:    10px;
+}
+
+[data-theme='dark'] {
+  --ifm-tabs-color: #a3a3a3;
+}
+
+.tabs__item {
+  border-radius: 6px 6px 0 0;
+  font-weight: 500;
+  font-size: 0.875rem;
+  transition: color 0.12s, background 0.12s;
+}
+
+.tabs__item:hover:not(.tabs__item--active) {
+  background: var(--ifm-breadcrumb-item-background-active);
+  color: var(--ifm-color-primary);
+}
+
+/* ── Cards ───────────────────────────────────────────────────────────────── */
+:root {
+  --ifm-card-background-color: #fff;
+  --ifm-card-border-radius:    12px;
+}
+
+[data-theme='dark'] {
+  --ifm-card-background-color: #111827;  /* Void gray-900 */
+}
+
+.card {
+  border: 1px solid var(--ifm-toc-border-color);
+  border-radius: var(--ifm-card-border-radius);
+  box-shadow: var(--ifm-global-shadow-lw);
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.card:hover {
+  border-color: var(--ifm-color-primary);
+  box-shadow: var(--ifm-global-shadow-md);
+}
+
+/* ── Tags ────────────────────────────────────────────────────────────────── */
+:root {
+  --ifm-tag-background:    rgb(70, 95, 255, 0.08);
+  --ifm-tag-color:         #465fff;
+  --ifm-tag-border-color:  rgb(70, 95, 255, 0.2);
+}
+
+[data-theme='dark'] {
+  --ifm-tag-background:   rgb(117, 146, 255, 0.1);
+  --ifm-tag-color:        #7592ff;
+  --ifm-tag-border-color: rgb(117, 146, 255, 0.25);
+}
+
+.tag {
+  border-radius: 20px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 2px 10px;
+  transition: background 0.12s, color 0.12s;
+}
+
+/* ── Back-to-top button ──────────────────────────────────────────────────── */
+.theme-back-to-top-button {
+  background-color: #465fff;
+  border-radius: 8px;
+}
+
+.theme-back-to-top-button:hover {
+  background-color: #3641f5;
+}
+
+[data-theme='dark'] .theme-back-to-top-button {
+  background-color: #7592ff;
+}
+
+[data-theme='dark'] .theme-back-to-top-button:hover {
+  background-color: #9cb9ff;
+}
+
+/* ── Algolia DocSearch ───────────────────────────────────────────────────── */
+/* Applied when Algolia search is configured in themeConfig.algolia.         */
+[data-theme='light'] .DocSearch {
+  --docsearch-primary-color:             #465fff;
+  --docsearch-text-color:                #1a1714;
+  --docsearch-muted-color:               #5c574f;
+  --docsearch-container-background:      rgb(26, 23, 20, 0.6);
+  --docsearch-modal-background:          #fff;
+  --docsearch-modal-shadow:              0px 8px 24px rgb(0, 0, 0, 0.12);
+  --docsearch-searchbox-background:      #f9fafb;
+  --docsearch-searchbox-focus-background:#fff;
+  --docsearch-searchbox-shadow:          inset 0 0 0 2px #465fff;
+  --docsearch-hit-color:                 #1a1714;
+  --docsearch-hit-active-color:          #fff;
+  --docsearch-hit-background:            #fff;
+  --docsearch-hit-shadow:                0 1px 3px rgb(0, 0, 0, 0.08);
+  --docsearch-footer-background:         #f9fafb;
+  --docsearch-logo-color:                #465fff;
+}
+
+[data-theme='dark'] .DocSearch {
+  --docsearch-primary-color:             #7592ff;
+  --docsearch-text-color:                #e5e5e5;
+  --docsearch-muted-color:               #a3a3a3;
+  --docsearch-container-background:      rgb(3, 7, 18, 0.8);
+  --docsearch-modal-background:          #111827;
+  --docsearch-modal-shadow:              0px 8px 24px rgb(0, 0, 0, 0.4);
+  --docsearch-searchbox-background:      #030712;
+  --docsearch-searchbox-focus-background:#030712;
+  --docsearch-searchbox-shadow:          inset 0 0 0 2px #7592ff;
+  --docsearch-hit-color:                 #e5e5e5;
+  --docsearch-hit-active-color:          #fff;
+  --docsearch-hit-background:            #1f2937;
+  --docsearch-hit-shadow:                none;
+  --docsearch-footer-background:         #030712;
+  --docsearch-key-gradient:              linear-gradient(-26.5deg, #1f2937 0%, #111827 100%);
+  --docsearch-logo-color:                #7592ff;
+}
+
 /* ── Scrollbar — thin, TailAdmin style ───────────────────────────────────── */
 ::-webkit-scrollbar {
   width: 5px;