cosmos-docusaurus-theme 1.1.4 → 1.1.6

package/CHANGELOG.md

@@ -7,6 +7,26 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ---
 
+## [1.1.6] — 2026-03-10
+
+### Changed
+
+- **Navbar right items**: unified ghost button style — external links (GitHub, npm…)
+  and the color mode toggle now share the same bordered appearance:
+  `1px solid border`, `border-radius: 8px`, identical hover (indigo border + tint)
+- Replaces the inconsistent circular toggle + plain text link combo
+
+## [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

package/package.json

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

package/src/css/theme.css

@@ -178,8 +178,8 @@ button[aria-label*="dark and light mode"]::after {
   content: attr(title);
   position: absolute;
   top: calc(100% + 10px);
-  left: 50%;
-  transform: translateX(-50%);
+  /* Right-align: button sits at the far right of the navbar */
+  right: 0;
   padding: 5px 10px;
   background: #111827;
   color: #e5e5e5;
@@ -195,13 +195,12 @@ button[aria-label*="dark and light mode"]::after {
   z-index: 100;
 }
 
-/* Arrow pointing up toward button */
+/* Arrow pointing up — aligned with button center */
 button[aria-label*="dark and light mode"]::before {
   content: '';
   position: absolute;
   top: calc(100% + 4px);
-  left: 50%;
-  transform: translateX(-50%);
+  right: 10px;
   border: 5px solid transparent;
   border-bottom-color: #1f2937;
   pointer-events: none;
@@ -370,6 +369,102 @@ 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;
+}
+
+/* ── Right navbar — unified ghost button style ───────────────────────────── */
+/* Both the external links (GitHub, npm…) and the color mode toggle get the  */
+/* same bordered ghost button treatment for visual consistency.               */
+
+/* External links on the right side (GitHub, npm, etc.) */
+.navbar__items--right .navbar__link {
+  border: 1px solid var(--ifm-toc-border-color);
+  border-radius: 8px;
+  padding: 5px 12px;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  transition: border-color 0.15s, background 0.15s, color 0.15s;
+}
+
+.navbar__items--right .navbar__link:hover {
+  border-color: var(--ifm-color-primary);
+  background: rgb(70, 95, 255, 0.08);
+  color: var(--ifm-color-primary);
+}
+
+/* Color mode toggle — match the ghost button style of external links */
+button[aria-label*="dark and light mode"] {
+  border: 1px solid var(--ifm-toc-border-color) !important;
+  border-radius: 8px !important;
+  padding: 5px 8px !important;
+  transition: border-color 0.15s, background 0.15s !important;
+}
+
+button[aria-label*="dark and light mode"]:hover {
+  border-color: var(--ifm-color-primary) !important;
+  background: rgb(70, 95, 255, 0.08) !important;
+}
+
+[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;