cosmos-docusaurus-theme 1.1.8 → 1.2.1

package/CHANGELOG.md

@@ -7,6 +7,21 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ---
 
+## [1.2.0] — 2026-03-10
+
+### Changed — Rackscope design system alignment
+
+6 axes inspired by the `templates/default` component library:
+
+- **Border radius**: Cards `16px` (rounded-2xl), code `12px`, inline code `6px`, pagination `12px`
+- **Admonitions**: AlertBanner style — `rounded-2xl`, all-around border at semantic opacity, `padding: 16px 20px`
+- **Dark shadows**: shadow-card pattern on cards + code blocks (heavier on dark surfaces)
+- **Details/summary**: SectionCard style — `rounded-2xl`, chevron that rotates, dark bg-gray-900
+- **TOC active**: bg pill `rgb(70,95,255,0.08)` + border-radius + padding (mirrors sidebar active)
+- **Sidebar labels**: `10px` + `letter-spacing: 0.12em` — exact Rackscope LayoutLabel
+- **Typography**: `h1 font-weight: 800`, tight letter-spacing (`-0.04em` → `-0.01em`)
+- **Scrollbar**: `4px` (was 5px) — matches Rackscope index.css
+
 ## [1.1.6] — 2026-03-10
 
 ### Changed

package/package.json

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

package/src/css/theme.css

@@ -325,60 +325,87 @@ button[aria-label*="dark and light mode"]:hover::before {
   background: rgb(255,255,255,0.05);
 }
 
-/* Sidebar section separator — uppercase label */
+/* Sidebar section separator — exact Rackscope LayoutLabel pattern */
 .sidebar_menu_section_title {
-  font-size: 0.6875rem;
+  font-size: 0.625rem;  /* 10px — matches text-[10px] */
   font-weight: 700;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.12em;  /* tracking-wider */
   text-transform: uppercase;
-  color: #a3a3a3;  /* neutral gray-400 */
+  color: #a3a3a3;
   padding: 12px 12px 4px;
 }
 
 /* ── Code blocks ─────────────────────────────────────────────────────────── */
 .prism-code {
-  border-radius: 10px;
+  border-radius: 12px;  /* rounded-xl — matches Rackscope input/button radius */
   font-size: 0.8625rem;
   line-height: 1.65;
 }
 
-/* Inline code — subtle bordered style */
+[data-theme='dark'] .prism-code {
+  /* Heavier shadow in dark — matches Rackscope shadow-card pattern */
+  box-shadow: 0 1px 3px rgb(0, 0, 0, 0.4), 0 1px 2px rgb(0, 0, 0, 0.3);
+}
+
+/* Code block title bar */
+.codeBlockTitle_Ktv7 {
+  border-radius: 12px 12px 0 0;
+}
+
+/* Inline code — rounded-md, subtle bordered style */
 code {
-  border-radius: 5px;
-  padding: 2px 6px;
+  border-radius: 6px;
+  padding: 2px 7px;
   font-size: 0.875em;
   border: 1px solid var(--ifm-toc-border-color);
   background: var(--ifm-code-background);
 }
 
-/* ── Content headings ─────────────────────────────────────────────────────── */
-.markdown h1,
-.markdown h2,
-.markdown h3,
-.markdown h4 {
-  font-weight: 700;
-  letter-spacing: -0.3px;
+/* ── Content headings — tight letter-spacing (Rackscope -0.03em / -0.04em) ── */
+.markdown h1 {
+  font-weight: 800;
+  letter-spacing: -0.04em;
+  font-size: 2.2rem;
 }
 
-.markdown h1 { font-size: 2.2rem; }
-
 .markdown h2 {
+  font-weight: 700;
+  letter-spacing: -0.03em;
   font-size: 1.6rem;
   padding-bottom: 8px;
   border-bottom: 1px solid var(--ifm-toc-border-color);
   margin-top: 2.5rem;
 }
 
+.markdown h3 {
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  font-size: 1.25rem;
+}
+
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
 /* ── 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,
@@ -390,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;
 }
@@ -415,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 {
@@ -422,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 ───────────────────────────── */
@@ -471,52 +504,177 @@ 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;
+  transition: color 0.12s, background 0.12s;
+  border-radius: 5px;
+  padding: 2px 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);
-  transition: color 0.12s;
+  font-size: 0.8rem;
 }
 
-.table-of-contents__link:hover,
+[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);
+}
+
+[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) !important;
+  font-weight: 600;
+  background: rgb(70, 95, 255, 0.08);
+}
+
+[data-theme='dark'] .table-of-contents__link--active {
+  background: rgb(117, 146, 255, 0.1);
+}
+
+/* ── Details / Summary — SectionCard style ───────────────────────────────── */
+/* Matches Rackscope: rounded-2xl border border-gray-200 bg-white p-6
+   dark:border-gray-800 dark:bg-gray-900                                      */
+details {
+  border: 1px solid var(--ifm-toc-border-color);
+  border-radius: 16px;  /* rounded-2xl */
+  background: var(--ifm-background-surface-color);
+  margin-bottom: 1rem;
+  overflow: hidden;
+  transition: border-color 0.15s;
+}
+
+[data-theme='dark'] details {
+  background: #111827;
+  border-color: #1f2937;
+  box-shadow: 0 1px 3px rgb(0, 0, 0, 0.4), 0 1px 2px rgb(0, 0, 0, 0.3);
+}
+
+details > summary {
+  padding: 14px 20px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 0.9375rem;
+  color: var(--ifm-font-color-base);
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: background 0.12s;
+}
+
+details > summary:hover {
+  background: rgb(70, 95, 255, 0.04);
+}
+
+[data-theme='dark'] details > summary:hover {
+  background: rgb(255, 255, 255, 0.04);
+}
+
+details > summary::before {
+  content: '›';
+  font-size: 1.125rem;
   color: var(--ifm-color-primary);
-  font-weight: 500;
+  transition: transform 0.2s;
+  display: inline-block;
+  line-height: 1;
+}
+
+details[open] > summary::before {
+  transform: rotate(90deg);
+}
+
+details > :not(summary) {
+  padding: 0 20px 16px;
+  border-top: 1px solid var(--ifm-toc-border-color);
+  margin-top: 0;
+}
+
+[data-theme='dark'] details > :not(summary) {
+  border-top-color: #1f2937;
+}
+
+/* ── Admonitions — AlertBanner style (Rackscope rounded-2xl full border) ─── */
+/* Full all-around border with semantic opacity — matches Rackscope AlertBanner:
+   rounded-2xl border px-5 py-3.5 (border + bg at semantic opacity)           */
+.alert {
+  border-radius: 16px;     /* rounded-2xl */
+  border-left-width: 3px;  /* keep accent left stripe */
+  padding: 16px 20px;
 }
 
-/* ── Admonitions — TailAdmin semantic color palette ──────────────────────── */
+/* Light mode — 5% opacity bg, 25% opacity border */
 .alert--info {
+  border-color: rgb(70, 95, 255, 0.25);
   border-left-color: #465fff;
   background: rgb(70, 95, 255, 0.05);
 }
 
 .alert--success {
+  border-color: rgb(18, 183, 106, 0.25);
   border-left-color: #12b76a;
   background: rgb(18, 183, 106, 0.05);
 }
 
 .alert--warning {
+  border-color: rgb(247, 144, 9, 0.25);
   border-left-color: #f79009;
   background: rgb(247, 144, 9, 0.05);
 }
 
 .alert--danger {
+  border-color: rgb(240, 68, 56, 0.25);
   border-left-color: #f04438;
   background: rgb(240, 68, 56, 0.05);
 }
 
+/* Dark mode — 8% opacity bg, 20% opacity border (subtle on dark surface) */
 [data-theme='dark'] .alert--info {
+  border-color: rgb(70, 95, 255, 0.2);
   background: rgb(70, 95, 255, 0.08);
 }
 
 [data-theme='dark'] .alert--success {
+  border-color: rgb(18, 183, 106, 0.2);
   background: rgb(18, 183, 106, 0.08);
 }
 
 [data-theme='dark'] .alert--warning {
+  border-color: rgb(247, 144, 9, 0.2);
   background: rgb(247, 144, 9, 0.08);
 }
 
 [data-theme='dark'] .alert--danger {
+  border-color: rgb(240, 68, 56, 0.2);
   background: rgb(240, 68, 56, 0.08);
 }
 
@@ -561,7 +719,7 @@ button[aria-label*="dark and light mode"]:hover {
 /* ── Pagination nav ───────────────────────────────────────────────────────── */
 .pagination-nav__link {
   border-color: var(--ifm-toc-border-color);
-  border-radius: 10px;
+  border-radius: 12px;  /* rounded-xl — matches Rackscope button radius */
   transition: border-color 0.15s, box-shadow 0.15s;
 }
 
@@ -570,6 +728,10 @@ button[aria-label*="dark and light mode"]:hover {
   box-shadow: 0 0 0 3px rgb(70, 95, 255, 0.12);
 }
 
+[data-theme='dark'] .pagination-nav__link:hover {
+  box-shadow: 0 4px 12px rgb(0, 0, 0, 0.3), 0 0 0 2px rgb(117, 146, 255, 0.2);
+}
+
 /* ── Progress bar (page loading indicator) ───────────────────────────────── */
 :root {
   --docusaurus-progress-bar-color: #465fff;
@@ -652,7 +814,7 @@ button[aria-label*="dark and light mode"]:hover {
 /* ── Cards ───────────────────────────────────────────────────────────────── */
 :root {
   --ifm-card-background-color: #fff;
-  --ifm-card-border-radius:    12px;
+  --ifm-card-border-radius:    16px;  /* rounded-2xl — matches Rackscope SectionCard */
 }
 
 [data-theme='dark'] {
@@ -666,11 +828,20 @@ button[aria-label*="dark and light mode"]:hover {
   transition: border-color 0.15s, box-shadow 0.15s;
 }
 
+/* Dark mode: heavier shadow — matches Rackscope shadow-card pattern */
+[data-theme='dark'] .card {
+  box-shadow: 0 1px 3px rgb(0, 0, 0, 0.4), 0 1px 2px rgb(0, 0, 0, 0.3);
+}
+
 .card:hover {
   border-color: var(--ifm-color-primary);
   box-shadow: var(--ifm-global-shadow-md);
 }
 
+[data-theme='dark'] .card:hover {
+  box-shadow: 0 10px 25px rgb(0, 0, 0, 0.5), 0 4px 6px rgb(0, 0, 0, 0.2);
+}
+
 /* ── Tags ────────────────────────────────────────────────────────────────── */
 :root {
   --ifm-tag-background:    rgb(70, 95, 255, 0.08);
@@ -749,10 +920,10 @@ button[aria-label*="dark and light mode"]:hover {
   --docsearch-logo-color:                #7592ff;
 }
 
-/* ── Scrollbar — thin, TailAdmin style ───────────────────────────────────── */
+/* ── Scrollbar — 4px, matches Rackscope index.css ───────────────────────── */
 ::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
+  width: 4px;
+  height: 4px;
 }
 
 ::-webkit-scrollbar-track {