cosmos-docusaurus-theme 1.2.5 → 1.2.6

package/CHANGELOG.md

@@ -7,6 +7,29 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ---
 
+## [1.2.6] — 2026-03-10
+
+### Added
+
+- **Sidebar icons** — category icon system via `className: 'sidebar-cat-*'` in `sidebars.js`.
+  10 Lucide-style SVG icons (rocket, monitor, pencil, puzzle, sliders, folder, server,
+  database, layers, grid, code). CSS-only with dark-mode `filter:invert(1)`.
+- **Sidebar sub-menu vertical line** — Rackscope-style left border on nested items.
+  Sub-items: slightly smaller font, muted color, left padding.
+- **Sidebar version badge** — always pinned at the very bottom of the sidebar viewport
+  (`[class*="sidebarViewport"]` flex-column + `::after` outside scroll area).
+  Hardcoded backgrounds (#fff / #111827) to always cover scrolled content.
+- **Ctrl+K hint redesign** — ghost style: transparent chips with hairline border,
+  `+` separator via `::before`, opacity 0.7 at rest, 0.9 on input focus.
+  Preserves plugin positioning (only kbd elements restyled).
+
+### Changed
+
+- Search input: `min-width` 220px → 300px; font-family → `var(--ifm-font-family-base)` (Outfit)
+- Demo `docusaurus.config.js`: `{ type:'search' }` positioned before external links;
+  `searchBarShortcutHint: true`
+- Dockerfile: copies full project so `file:..` resolves during local dev
+
 ## [1.2.5] — 2026-03-10
 
 ### Fixed

package/package.json

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

package/src/css/theme.css

@@ -939,33 +939,31 @@ details > :not(summary) {
    > input.navbar__search-input.searchInput_xxx (CSS module).
    We need !important on background/color to beat the CSS module specificity.  */
 
+/* Search input — wider, Outfit font, consistent with Rackscope AppSearch */
 .navbar__search-input {
   height: 38px !important;
-  min-width: 220px !important;
+  min-width: 300px !important;
   border-radius: 8px !important;
   border: 1px solid var(--ifm-toc-border-color) !important;
+  font-family: var(--ifm-font-family-base) !important;
   font-size: 0.875rem !important;
-  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s !important;
-}
-
-/* Light (Slate): bg-gray-100 */
-.navbar__search-input {
   background-color: #f3f4f6 !important;
   color: #1a1714 !important;
+  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s !important;
 }
 
 .navbar__search-input::placeholder {
   color: #8a8479 !important;
+  font-family: var(--ifm-font-family-base) !important;
 }
 
-/* Dark (Void): bg-gray-800 */
 [data-theme='dark'] .navbar__search-input {
   background-color: #1f2937 !important;
   color: #e5e5e5 !important;
 }
 
 [data-theme='dark'] .navbar__search-input::placeholder {
-  color: #71717a !important;
+  color: #6b7280 !important;
 }
 
 .navbar__search-input:focus {
@@ -980,34 +978,50 @@ details > :not(summary) {
   box-shadow: 0 0 0 3px rgb(117, 146, 255, 0.12) !important;
 }
 
-/* ── Ctrl+K keyboard shortcut — compact pill style ───────────────────────── */
-/* Replaces the default split kbd elements with a unified minimal appearance  */
-[class*="searchHintContainer"] {
-  gap: 2px !important;
-}
+/* Ctrl+K hint — ghost style: transparent, blends into the input surface.
+   Uses currentColor border so it adapts to both Void and Slate automatically. */
 
-[class*="searchHint"] {
+/* Inner hint wrapper: flex row for the two keys */
+[class*="searchHint"]:not([class*="Container"]) {
   display: inline-flex !important;
   align-items: center !important;
-  gap: 1px !important;
+  gap: 0 !important;
+}
+
+/* Each key: ghost chip, no fill, hairline border */
+[class*="searchHintContainer"] kbd {
   background: transparent !important;
   border: 1px solid var(--ifm-toc-border-color) !important;
-  border-radius: 5px !important;
+  border-radius: 4px !important;
+  color: var(--ifm-font-color-secondary) !important;
+  font-family: var(--ifm-font-family-monospace) !important;
+  font-size: 0.6rem !important;
+  font-weight: 400 !important;
+  letter-spacing: 0.02em !important;
   padding: 1px 5px !important;
+  line-height: 1.6 !important;
   box-shadow: none !important;
+  opacity: 0.7 !important;
 }
 
-/* Individual kbd keys inside the hint */
-[class*="searchHint"] kbd {
-  background: transparent !important;
-  border: none !important;
-  border-radius: 0 !important;
-  color: var(--ifm-font-color-secondary) !important;
-  font-size: 0.68rem !important;
+/* "+" separator between the two kbd elements */
+[class*="searchHintContainer"] kbd + kbd {
+  margin-left: 2px !important;
+}
+
+[class*="searchHintContainer"] kbd + kbd::before {
+  content: '+';
   font-family: var(--ifm-font-family-monospace) !important;
-  padding: 0 !important;
-  box-shadow: none !important;
-  line-height: 1.4 !important;
+  font-size: 0.6rem !important;
+  color: var(--ifm-font-color-secondary) !important;
+  opacity: 0.5 !important;
+  margin-right: 2px !important;
+}
+
+/* Whole hint brightens on input focus — discovery moment */
+.navbar__search-input:focus ~ [class*="searchHintContainer"],
+.navbar__search-input:focus + [class*="searchHintContainer"] {
+  opacity: 0.9 !important;
 }
 
 /* ── Right-side navbar order: Search | GitHub/npm | Theme ────────────────── */
@@ -1097,6 +1111,176 @@ details > :not(summary) {
   background: #475467;
 }
 
+/* =============================================================================
+   SIDEBAR — RACKSCOPE STYLE
+   Vertical line for nested items + icon system via className + version footer.
+   ============================================================================= */
+
+/* ── Nested items — vertical left border ─────────────────────────────────── */
+/* Like Rackscope: [Category Title]                                           */
+/*                   │ sub item                                                */
+/*                   │ sub item                                                */
+
+.theme-doc-sidebar-menu .menu__list .menu__list {
+  margin-left: 8px;
+  padding-left: 12px;
+  border-left: 1.5px solid var(--ifm-toc-border-color);
+}
+
+[data-theme='dark'] .theme-doc-sidebar-menu .menu__list .menu__list {
+  border-left-color: #374151;  /* Void gray-700 — slightly more visible */
+}
+
+/* Sub-items: slightly smaller + muted when inactive */
+.menu__list .menu__list > .menu__list-item > .menu__link {
+  font-size: 0.8375rem;
+  padding-left: 12px;
+}
+
+.menu__list .menu__list > .menu__list-item > .menu__link:not(.menu__link--active) {
+  color: var(--ifm-font-color-secondary);
+}
+
+[data-theme='dark'] .menu__list .menu__list > .menu__list-item > .menu__link:not(.menu__link--active) {
+  color: #71717a;
+}
+
+/* ── Category icons — via className in sidebars.js ───────────────────────── */
+/* Usage: { type: 'category', label: '...', className: 'sidebar-cat-rocket'} */
+/* Icon = black SVG via ::before — inverted in dark mode with filter:invert   */
+
+[class*="sidebar-cat-"] > .menu__list-item-collapsible > .menu__link {
+  display: flex;
+  align-items: center;
+}
+
+[class*="sidebar-cat-"] > .menu__list-item-collapsible > .menu__link::before {
+  content: '';
+  display: inline-block;
+  flex-shrink: 0;
+  width: 15px;
+  height: 15px;
+  margin-right: 8px;
+  background-size: 15px 15px;
+  background-repeat: no-repeat;
+  background-position: center;
+  opacity: 0.6;
+  transition: opacity 0.12s;
+}
+
+/* Dark mode — invert the black SVG to white */
+[data-theme='dark'] [class*="sidebar-cat-"] > .menu__list-item-collapsible > .menu__link::before {
+  filter: invert(1);
+}
+
+/* Hover + active state — full opacity */
+[class*="sidebar-cat-"] > .menu__list-item-collapsible > .menu__link--active::before,
+[class*="sidebar-cat-"] > .menu__list-item-collapsible:hover > .menu__link::before {
+  opacity: 1;
+}
+
+/* ── Icon definitions (Lucide-style SVG, black stroke, 24×24) ───────────── */
+
+/* Rocket — Getting Started, Deployment */
+.sidebar-cat-rocket > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");
+}
+
+/* Monitor — Views */
+.sidebar-cat-monitor > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E");
+}
+
+/* Pencil — Editors */
+.sidebar-cat-pencil > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5z'/%3E%3C/svg%3E");
+}
+
+/* Puzzle — Plugins & Features */
+.sidebar-cat-puzzle > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h4a2 2 0 0 1 2 2v1a2 2 0 0 0 4 0v-1a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M14 2v4a2 2 0 0 1-2 2h-1a2 2 0 0 0 0 4h1a2 2 0 0 1 2 2v4'/%3E%3C/svg%3E");
+}
+
+/* SlidersHorizontal — Interface, Core, Settings */
+.sidebar-cat-sliders > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' y1='4' x2='14' y2='4'/%3E%3Cline x1='10' y1='4' x2='3' y2='4'/%3E%3Ccircle cx='12' cy='4' r='2'/%3E%3Cline x1='21' y1='12' x2='12' y2='12'/%3E%3Cline x1='8' y1='12' x2='3' y2='12'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Cline x1='21' y1='20' x2='16' y2='20'/%3E%3Cline x1='12' y1='20' x2='3' y2='20'/%3E%3Ccircle cx='14' cy='20' r='2'/%3E%3C/svg%3E");
+}
+
+/* FolderOpen — Configuration */
+.sidebar-cat-folder > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
+}
+
+/* Server — Infrastructure */
+.sidebar-cat-server > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='8' rx='2' ry='2'/%3E%3Crect x='2' y='14' width='20' height='8' rx='2' ry='2'/%3E%3Cline x1='6' y1='6' x2='6.01' y2='6'/%3E%3Cline x1='6' y1='18' x2='6.01' y2='18'/%3E%3C/svg%3E");
+}
+
+/* Database — Data & Plugins */
+.sidebar-cat-database > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M21 12c0 1.66-4 3-9 3s-9-1.34-9-3'/%3E%3Cpath d='M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5'/%3E%3C/svg%3E");
+}
+
+/* Layers — Component Reference */
+.sidebar-cat-layers > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z'/%3E%3Cpath d='M22 17.65l-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/%3E%3Cpath d='M22 12.65l-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E");
+}
+
+/* Grid2x2 — Showcase */
+.sidebar-cat-grid > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");
+}
+
+/* Code2 — API, Development, Architecture features */
+.sidebar-cat-code > .menu__list-item-collapsible > .menu__link::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
+}
+
+/* ── Sidebar version badge — always at the very bottom ───────────────────── */
+/* Architecture: .theme-doc-sidebar is the sticky viewport with fixed height.
+   Converting it to flex-column + making the scrollable nav flex:1 means the
+   ::after pseudo-element is a flex-child OUTSIDE the scroll area — always
+   pinned to the bottom regardless of content height or scroll position. */
+:root {
+  --cosmos-version: "cosmos v1.2.6";
+}
+
+/* Sidebar viewport — flex column so version badge is always pinned at the bottom.
+   Targets the CSS-module class via attribute substring match (Docusaurus 3). */
+[class*="sidebarViewport"] {
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+/* The scrollable menu fills the available space */
+[class*="sidebarViewport"] > .menu {
+  flex: 1 !important;
+  min-height: 0 !important;
+}
+
+/* Version badge — flex child OUTSIDE the scroll area, always at the very bottom */
+[class*="sidebarViewport"]::after {
+  content: var(--cosmos-version);
+  flex-shrink: 0;
+  display: block;
+  padding: 8px 0 12px;
+  text-align: center;
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.58rem;
+  font-weight: 500;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #9ca3af;
+  background: #fff;
+  border-top: 1px solid #e5e7eb;
+}
+
+[data-theme='dark'] [class*="sidebarViewport"]::after {
+  color: #374151;
+  background: #111827;
+  border-top-color: #1f2937;
+}
+
 /* =============================================================================
    OPTIONAL UTILITY CLASSES
    The following classes are not required for the theme to work.