cosmos-docusaurus-theme 1.2.0 → 1.2.2

package/CHANGELOG.md

@@ -7,6 +7,21 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ---
 
+## [1.2.2] — 2026-03-10
+
+### Added
+
+- **`@easyops-cn/docusaurus-search-local` native support** — CSS palette overrides
+  so the search dropdown matches Void (dark) / Slate (light) out of the box.
+  Set `--search-local-*` variables and `--ifm-navbar-search-input-*` for both modes.
+  Navbar search input styled as ghost button matching navbar external links.
+- Demo site ships with `@easyops-cn/docusaurus-search-local` pre-configured
+
+### Changed
+
+- Screenshots updated to 2560×1440 (2K) with search bar visible
+- New `search.png` screenshot of active search dropdown
+
 ## [1.2.0] — 2026-03-10
 
 ### Changed — Rackscope design system alignment

package/README.md

@@ -2,7 +2,7 @@
 
 <div align="center">
 
-**A clean, dark-first Docusaurus theme based on [TailAdmin](https://tailadmin.com) design system.**
+**The design system behind [Rackscope](https://rackscope.dev), packaged for any Docusaurus 3 site.**
 
 [![npm version](https://img.shields.io/npm/v/cosmos-docusaurus-theme.svg?style=flat-square)](https://www.npmjs.com/package/cosmos-docusaurus-theme)
 [![npm downloads](https://img.shields.io/npm/dm/cosmos-docusaurus-theme.svg?style=flat-square)](https://www.npmjs.com/package/cosmos-docusaurus-theme)
@@ -10,73 +10,52 @@
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square)](LICENSE)
 [![Docusaurus](https://img.shields.io/badge/Docusaurus-3.x-green?style=flat-square)](https://docusaurus.io)
 
-### [Live Demo](https://sckyzo.github.io/cosmos-docusaurus-theme/) &nbsp;·&nbsp; [Release notes](https://github.com/SckyzO/cosmos-docusaurus-theme/releases) &nbsp;·&nbsp; [npm](https://www.npmjs.com/package/cosmos-docusaurus-theme)
+### [Live Demo](https://sckyzo.github.io/cosmos-docusaurus-theme/) &nbsp;·&nbsp; [Releases](https://github.com/SckyzO/cosmos-docusaurus-theme/releases) &nbsp;·&nbsp; [npm](https://www.npmjs.com/package/cosmos-docusaurus-theme)
 
 </div>
 
 ---
 
-## Features
+A **CSS-only** Docusaurus theme built from the same design system that powers
+[Rackscope](https://rackscope.dev) — a production monitoring platform for datacenters and HPC clusters.
+Dark-first, opinionated, and refined.
 
-- **CSS-only** — no swizzled components, no JavaScript
-- **Dark mode first-class** (default) with full light mode support
-- **[Outfit](https://fonts.google.com/specimen/Outfit)** + **JetBrains Mono** typography
-- **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+**
+- **Void** dark palette — deep neutral blacks (`#030712 / #111827`) with indigo accents
+- **Slate** light palette — warm white surfaces with brown text tones, not cold blue-gray
+- **Outfit** display typeface + **JetBrains Mono** for code
+- Zero JavaScript, no swizzled components — pure CSS override of Docusaurus Infima
+- Every element covered: admonitions, tabs, cards, tables, details, DocSearch, breadcrumbs…
+- Smooth dark/light transition, ghost-button navbar, TOC active state, 4px scrollbar
 
 ---
 
 ## Screenshots
 
-> Dark mode (default) — Void palette: navbar, sidebar, code blocks
+> Dark mode — Void palette — with local search
 
-![Dark mode screenshot](https://raw.githubusercontent.com/SckyzO/cosmos-docusaurus-theme/main/docs/screenshots/dark.png)
+![Dark mode](https://raw.githubusercontent.com/SckyzO/cosmos-docusaurus-theme/main/docs/screenshots/dark.png)
 
-> Light mode — Slate palette: Components showcase
+> Search — dropdown styled to Void/Slate palette
 
-![Light mode screenshot](https://raw.githubusercontent.com/SckyzO/cosmos-docusaurus-theme/main/docs/screenshots/light.png)
+![Search active](https://raw.githubusercontent.com/SckyzO/cosmos-docusaurus-theme/main/docs/screenshots/search.png)
 
-> Native features — tabs, cards, tags, breadcrumbs, DocSearch
+> Light mode — Slate palette — admonitions AlertBanner style
 
-![Native features screenshot](https://raw.githubusercontent.com/SckyzO/cosmos-docusaurus-theme/main/docs/screenshots/features.png)
+![Light mode](https://raw.githubusercontent.com/SckyzO/cosmos-docusaurus-theme/main/docs/screenshots/light.png)
 
-> See all features live at **[sckyzo.github.io/cosmos-docusaurus-theme](https://sckyzo.github.io/cosmos-docusaurus-theme/)**
+> See all components live → **[sckyzo.github.io/cosmos-docusaurus-theme](https://sckyzo.github.io/cosmos-docusaurus-theme/)**
 
 ---
 
-## Installation
+## Quick start
 
 ```bash
 npm install cosmos-docusaurus-theme
 ```
 
-## Usage
-
-Register as a Docusaurus theme plugin in `docusaurus.config.js`:
-
 ```js title="docusaurus.config.js"
 export default {
   themes: ['cosmos-docusaurus-theme'],
-
   themeConfig: {
     colorMode: {
       defaultMode: 'dark',
@@ -86,30 +65,54 @@ export default {
 };
 ```
 
-The CSS is injected automatically via `getClientModules()`. No `customCss` entry needed.
+### Try it instantly with Docker
 
-### Alternative — direct CSS import
+Zero npm install required — the full demo runs in a container:
 
-```js title="docusaurus.config.js"
-export default {
-  presets: [
-    ['classic', {
-      theme: {
-        customCss: [require.resolve('cosmos-docusaurus-theme/css/theme.css')],
-      },
-    }],
-  ],
-};
+```bash
+git clone https://github.com/SckyzO/cosmos-docusaurus-theme.git
+cd cosmos-docusaurus-theme
+docker compose up
+# → http://localhost:3000
+```
+
+Or pull from GitHub Container Registry:
+
+```bash
+docker run -p 3000:3000 ghcr.io/sckyzo/cosmos-docusaurus-theme:latest
 ```
 
 ---
 
+## What's covered
+
+| Element | Styled |
+|---|:---:|
+| Navbar + ghost buttons | ✅ |
+| Sidebar + section labels | ✅ |
+| Code blocks (all languages) | ✅ |
+| Admonitions — AlertBanner style, rounded-2xl | ✅ |
+| Tables | ✅ |
+| Tabs + synced tabs | ✅ |
+| Details/summary — SectionCard style | ✅ |
+| Cards — rounded-2xl + dark shadow | ✅ |
+| Tags + Badges | ✅ |
+| Breadcrumbs | ✅ |
+| TOC — H2/H3 hierarchy + active pill | ✅ |
+| Pagination | ✅ |
+| Announcement bar | ✅ |
+| Back-to-top + Progress bar | ✅ |
+| Algolia DocSearch | ✅ |
+| Smooth dark/light transition | ✅ |
+
+---
+
 ## Customization
 
-Override any Infima variable in your own `custom.css` after the theme is loaded:
+Override any CSS variable in your own `custom.css`:
 
 ```css title="src/css/custom.css"
-/* Change brand color */
+/* Brand color */
 :root {
   --ifm-color-primary:         #e11d48;
   --ifm-color-primary-dark:    #be123c;
@@ -120,40 +123,34 @@ Override any Infima variable in your own `custom.css` after the theme is loaded:
   --ifm-color-primary-lightest:#ffe4e6;
 }
 
-/* Change font */
+/* Font */
 :root {
   --ifm-font-family-base: 'Inter', system-ui, sans-serif;
 }
 ```
 
+See the [Color Tokens](https://sckyzo.github.io/cosmos-docusaurus-theme/color-tokens) page
+for all available tokens (dark + light with visual swatches).
+
 ---
 
 ## Utility classes
 
-| Class            | Usage                               |
-|------------------|-------------------------------------|
-| `.method-get`    | HTTP GET label (green, monospace)   |
-| `.method-post`   | HTTP POST label (blue, monospace)   |
-| `.method-put`    | HTTP PUT label (orange, monospace)  |
-| `.method-delete` | HTTP DELETE label (red, monospace)  |
-| `.method-patch`  | HTTP PATCH label (purple, monospace)|
-| `.status-ok`     | OK state (green, bold)              |
-| `.status-warn`   | WARN state (orange, bold)           |
-| `.status-crit`   | CRIT state (red, bold)              |
-| `.status-unknown`| UNKNOWN state (gray, bold)          |
+| Class | Usage |
+|---|---|
+| `.method-get/post/put/delete/patch` | HTTP method labels (monospace, semantic color) |
+| `.status-ok/warn/crit/unknown` | Health state labels |
+| `.state-ok/warn/crit/unknown` | Aliases for the above |
 
 ---
 
 ## Development
 
 ```bash
-# Install root dependencies (stylelint)
-npm install
-
-# Lint the CSS
-npm run lint
+npm install          # stylelint devDeps
+npm run lint         # CSS lint
 
-# Start the demo site locally
+# Demo site
 cd demo && npm install && npm run start
 ```
 

package/package.json

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

package/src/css/theme.css

@@ -392,14 +392,20 @@ code {
 
 /* ── Tables — direct overrides (CSS variables not reliably cascaded) ─────── */
 
-/* Dark mode: Void gray-800 borders, gray-900 header */
+/* Dark mode — Infima applies --ifm-table-head-background directly on th,
+   so we must target th explicitly (higher specificity than thead).           */
 [data-theme='dark'] table {
-  border-color: #1f2937;
+  border-color: #374151;  /* gray-700 — slightly more visible than gray-800 */
+}
+
+[data-theme='dark'] th {
+  background-color: #111827;  /* Void gray-900 */
+  color: #e5e5e5;
+  border-color: #374151;
 }
 
-[data-theme='dark'] th,
 [data-theme='dark'] td {
-  border-color: #1f2937;
+  border-color: #374151;
 }
 
 [data-theme='dark'] thead,
@@ -411,12 +417,16 @@ code {
   background-color: rgb(255, 255, 255, 0.03);
 }
 
-/* Light mode: Slate gray-200 borders, gray-50 header */
+/* Light mode — Slate gray-200 borders, gray-50 header */
 [data-theme='light'] table {
   border-color: #e5e7eb;
 }
 
-[data-theme='light'] th,
+[data-theme='light'] th {
+  background-color: #f9fafb;
+  border-color: #e5e7eb;
+}
+
 [data-theme='light'] td {
   border-color: #e5e7eb;
 }
@@ -436,6 +446,8 @@ code {
 .breadcrumbs__link--active,
 .breadcrumbs__item--active .breadcrumbs__link {
   color: var(--ifm-color-primary);
+  /* No background on active breadcrumb — avoids computed #080d25 artifact */
+  background: none;
 }
 
 [data-theme='dark'] .breadcrumbs__item + .breadcrumbs__item::before {
@@ -443,7 +455,7 @@ code {
 }
 
 [data-theme='dark'] .breadcrumbs__link:not(.breadcrumbs__link--active) {
-  color: #a3a3a3;
+  color: #9ca3af;  /* gray-400 — readable on Void dark without being dominant */
 }
 
 /* ── Right navbar — unified ghost button style ───────────────────────────── */
@@ -492,32 +504,59 @@ button[aria-label*="dark and light mode"]:hover {
 }
 
 /* ── Table of contents (right panel) ─────────────────────────────────────── */
+
+/* Left border line — matches Void gray-800 in dark, gray-200 in light */
+.table-of-contents {
+  border-left: 1px solid var(--ifm-toc-border-color) !important;
+}
+
 .table-of-contents__link {
   font-size: 0.8125rem;
-  color: var(--ifm-font-color-secondary);
   transition: color 0.12s, background 0.12s;
-  border-radius: 6px;
+  border-radius: 5px;
   padding: 2px 6px;
-  margin-left: -6px;
+  margin-left: -7px;
   display: block;
 }
 
+/* H2-level TOC items (direct children) — more prominent */
+.table-of-contents > ul > li > .table-of-contents__link {
+  font-weight: 500;
+  color: var(--ifm-font-color-base);
+  font-size: 0.8125rem;
+}
+
+[data-theme='dark'] .table-of-contents > ul > li > .table-of-contents__link {
+  color: #d1d5db;  /* gray-300 — matches Rackscope sidebar label prominence */
+}
+
+/* H3-level TOC items (nested) — muted secondary */
+.table-of-contents > ul > li > ul .table-of-contents__link {
+  color: var(--ifm-font-color-secondary);
+  font-size: 0.8rem;
+}
+
+[data-theme='dark'] .table-of-contents > ul > li > ul .table-of-contents__link {
+  color: #71717a;  /* zinc-500 — subtle */
+}
+
+/* Hover state */
 .table-of-contents__link:hover {
   color: var(--ifm-color-primary);
   background: rgb(70, 95, 255, 0.06);
 }
 
-/* Active TOC link — bg pill like sidebar active item */
+[data-theme='dark'] .table-of-contents__link:hover {
+  background: rgb(117, 146, 255, 0.08);
+}
+
+/* Active — bg pill, brand color */
 .table-of-contents__link--active {
-  color: var(--ifm-color-primary);
+  color: var(--ifm-color-primary) !important;
   font-weight: 600;
   background: rgb(70, 95, 255, 0.08);
 }
 
-[data-theme='dark'] .table-of-contents__link:hover {
-  background: rgb(117, 146, 255, 0.08);
-}
-
 [data-theme='dark'] .table-of-contents__link--active {
   background: rgb(117, 146, 255, 0.1);
 }
@@ -842,6 +881,62 @@ details > :not(summary) {
   background-color: #9cb9ff;
 }
 
+/* ── @easyops-cn/docusaurus-search-local ────────────────────────────────── */
+/* Palette overrides for the local search plugin.                            */
+/* https://github.com/easyops-cn/docusaurus-search-local                     */
+/* All values mirror Void (dark) / Slate (light) design tokens.              */
+
+/* Light mode (Slate) */
+:root {
+  /* Modal dropdown */
+  --search-local-modal-background: #fff;
+  --search-local-modal-shadow:
+    0 8px 24px rgb(0, 0, 0, 0.12),
+    inset 1px 1px 0 0 rgb(255, 255, 255, 0.8);
+  /* Result items */
+  --search-local-hit-background: #fff;
+  --search-local-hit-shadow: 0 1px 3px rgb(0, 0, 0, 0.08);
+  --search-local-hit-color: #1a1714;
+  /* Muted text (paths, icons) */
+  --search-local-muted-color: #8a8479;
+  /* Brand highlight */
+  --search-local-highlight-color: #465fff;
+  --search-local-input-active-border-color: #465fff;
+  /* Navbar search input */
+  --ifm-navbar-search-input-background-color: #f3f4f6;
+  --ifm-navbar-search-input-color: #1a1714;
+  --ifm-navbar-search-input-placeholder-color: #8a8479;
+}
+
+/* Dark mode (Void) */
+[data-theme='dark'] {
+  --search-local-modal-background: #111827;  /* Void gray-900 */
+  --search-local-modal-shadow:
+    inset 1px 1px 0 0 #2c2e40,
+    0 8px 32px rgb(0, 0, 0, 0.5);
+  --search-local-hit-background: #1f2937;    /* Void gray-800 */
+  --search-local-hit-shadow: none;
+  --search-local-hit-color: #e5e5e5;
+  --search-local-muted-color: #71717a;
+  --search-local-highlight-color: #7592ff;
+  --search-local-input-active-border-color: #7592ff;
+  /* Navbar search input */
+  --ifm-navbar-search-input-background-color: #1f2937;
+  --ifm-navbar-search-input-color: #e5e5e5;
+  --ifm-navbar-search-input-placeholder-color: #a3a3a3;
+}
+
+/* Navbar search input — styled as ghost button to match navbar buttons */
+.navbar__search-input {
+  border-radius: 8px;
+  border: 1px solid var(--ifm-toc-border-color);
+  transition: border-color 0.15s;
+}
+
+.navbar__search-input:focus {
+  border-color: var(--ifm-color-primary);
+}
+
 /* ── Algolia DocSearch ───────────────────────────────────────────────────── */
 /* Applied when Algolia search is configured in themeConfig.algolia.         */
 [data-theme='light'] .DocSearch {