cosmos-docusaurus-theme 1.2.0 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cosmos-docusaurus-theme",
-  "version": "1.2.0",
+  "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

@@ -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);
 }