cosmos-docusaurus-theme 1.1.3 → 1.1.5

package/CHANGELOG.md

@@ -7,6 +7,25 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ---
 
+## [1.1.5] — 2026-03-10
+
+### Fixed
+
+- **Tooltip**: right-aligned to prevent viewport overflow; appears below button
+- **Tables dark mode**: direct overrides on `th`/`td`/`thead` — CSS variables
+  were not cascaded to table cells by Infima
+- **Cards dark mode**: direct `background-color: #111827` override
+- **Breadcrumbs**: explicit active/inactive link colors + separator in dark mode
+- **Toggle button**: subtle hover background for better visibility
+
+## [1.1.4] — 2026-03-10
+
+### Fixed
+
+- Tooltip now appears **below** the toggle button instead of above (was clipped
+  by the top of the viewport since the navbar sits at the very top of the page)
+- Arrow direction corrected accordingly (points up toward the button)
+
 ## [1.1.3] — 2026-03-10
 
 ### Added

package/package.json

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

package/src/css/theme.css

@@ -177,9 +177,9 @@ button[aria-label*="dark and light mode"] {
 button[aria-label*="dark and light mode"]::after {
   content: attr(title);
   position: absolute;
-  bottom: calc(100% + 10px);
-  left: 50%;
-  transform: translateX(-50%);
+  top: calc(100% + 10px);
+  /* Right-align: button sits at the far right of the navbar */
+  right: 0;
   padding: 5px 10px;
   background: #111827;
   color: #e5e5e5;
@@ -195,15 +195,14 @@ button[aria-label*="dark and light mode"]::after {
   z-index: 100;
 }
 
-/* Arrow pointing down from tooltip */
+/* Arrow pointing up — aligned with button center */
 button[aria-label*="dark and light mode"]::before {
   content: '';
   position: absolute;
-  bottom: calc(100% + 4px);
-  left: 50%;
-  transform: translateX(-50%);
+  top: calc(100% + 4px);
+  right: 10px;
   border: 5px solid transparent;
-  border-top-color: #1f2937;
+  border-bottom-color: #1f2937;
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.15s ease;
@@ -223,7 +222,8 @@ button[aria-label*="dark and light mode"]:hover::before {
 }
 
 [data-theme='light'] button[aria-label*="dark and light mode"]::before {
-  border-top-color: #e5e7eb;
+  border-bottom-color: #e5e7eb;
+  border-top-color: transparent;
 }
 
 /* ── Navbar ──────────────────────────────────────────────────────────────── */
@@ -369,6 +369,72 @@ code {
   margin-top: 2.5rem;
 }
 
+/* ── Tables — direct overrides (CSS variables not reliably cascaded) ─────── */
+
+/* Dark mode: Void gray-800 borders, gray-900 header */
+[data-theme='dark'] table {
+  border-color: #1f2937;
+}
+
+[data-theme='dark'] th,
+[data-theme='dark'] td {
+  border-color: #1f2937;
+}
+
+[data-theme='dark'] thead,
+[data-theme='dark'] thead tr {
+  background-color: #111827;
+}
+
+[data-theme='dark'] tr:nth-child(2n) {
+  background-color: rgb(255, 255, 255, 0.03);
+}
+
+/* Light mode: Slate gray-200 borders, gray-50 header */
+[data-theme='light'] table {
+  border-color: #e5e7eb;
+}
+
+[data-theme='light'] th,
+[data-theme='light'] td {
+  border-color: #e5e7eb;
+}
+
+[data-theme='light'] thead,
+[data-theme='light'] thead tr {
+  background-color: #f9fafb;
+}
+
+/* ── Cards — direct background override ──────────────────────────────────── */
+[data-theme='dark'] .card {
+  background-color: #111827;
+  border-color: #1f2937;
+}
+
+/* ── Breadcrumbs — explicit active + separator colors ────────────────────── */
+.breadcrumbs__link--active,
+.breadcrumbs__item--active .breadcrumbs__link {
+  color: var(--ifm-color-primary);
+}
+
+[data-theme='dark'] .breadcrumbs__item + .breadcrumbs__item::before {
+  color: #374151;
+}
+
+[data-theme='dark'] .breadcrumbs__link:not(.breadcrumbs__link--active) {
+  color: #a3a3a3;
+}
+
+/* ── Color mode toggle button — subtle hover ─────────────────────────────── */
+button[aria-label*="dark and light mode"]:hover {
+  background: rgb(70, 95, 255, 0.08);
+  border-radius: 6px;
+}
+
+[data-theme='dark'] button[aria-label*="dark and light mode"] {
+  color: #e5e5e5;
+}
+
 /* ── Table of contents (right panel) ─────────────────────────────────────── */
 .table-of-contents__link {
   font-size: 0.8125rem;