cosmos-docusaurus-theme 1.2.6 → 2.0.1

package/CHANGELOG.md

@@ -7,6 +7,30 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ---
 
+## [2.0.1] — 2026-03-10
+
+### Fixed
+
+- **Tables full-width**: `display:table; width:100%` on desktop (>996px),
+  `display:block; overflow-x:auto` on mobile — responsive, never breaks layout
+
+## [2.0.0] — 2026-03-10
+
+### Added — Native Docusaurus component coverage
+
+1. **Color mode toggle icons** — sun (amber `#fbbf24`) in dark mode, moon (brand indigo `#7592ff`) in light mode via CSS `filter` colorization
+2. **TOCCollapsible** — mobile table-of-contents styled as bordered card with uppercase monospace label, matching sidebar section labels
+3. **DocCard / DocCardList** — auto-generated category index cards follow Void/Slate palette with hover lift
+4. **Announcement bar close button** — `×` styled with opacity + hover bg tint
+5. **Tag pages** — `/docs/tags/...` pages use pill tags with brand hover state
+6. **Mobile search** — search input collapses to `2rem` icon-only on ≤576px, expands on focus with smooth width transition
+7. **prefers-reduced-motion** — all transitions and animations disabled when the OS accessibility setting is active
+
+### Fixed
+
+- **Docker GHCR push timeout** — `provenance: false` + `sbom: false` on `docker/build-push-action` eliminates attestation overhead that caused network timeouts; `timeout-minutes: 30` on job; `docker/setup-buildx-action` added explicitly
+- **CSS comments** — removed stale TailAdmin references, fixed redundant inline color-name comments
+
 ## [1.2.6] — 2026-03-10
 
 ### Added

package/package.json

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

package/src/css/theme.css

@@ -10,8 +10,7 @@
  * Font:  Outfit + JetBrains Mono for code
  *
  * Usage:
- *   In docusaurus.config.js → theme.customCss:
- *   require.resolve('cosmos-docusaurus-theme')
+ *   themes: ['cosmos-docusaurus-theme']
  *
  * @see https://github.com/SckyzO/cosmos-docusaurus-theme
  * @license MIT
@@ -22,16 +21,16 @@
 
 /* ── Light mode ──────────────────────────────────────────────────────────── */
 :root {
-  /* Primary brand colors — TailAdmin brand-* palette */
-  --ifm-color-primary:         #465fff;  /* brand-500 */
-  --ifm-color-primary-dark:    #3641f5;  /* brand-600 */
-  --ifm-color-primary-darker:  #2a31d8;  /* brand-700 */
-  --ifm-color-primary-darkest: #252dae;  /* brand-800 */
-  --ifm-color-primary-light:   #7592ff;  /* brand-400 */
-  --ifm-color-primary-lighter: #9cb9ff;  /* brand-300 */
-  --ifm-color-primary-lightest:#dde9ff;  /* brand-100 */
-
-  /* Typography — TailAdmin uses Outfit as the primary typeface */
+  /* Brand palette (indigo) — matches Rackscope accent color */
+  --ifm-color-primary:         #465fff;
+  --ifm-color-primary-dark:    #3641f5;
+  --ifm-color-primary-darker:  #2a31d8;
+  --ifm-color-primary-darkest: #252dae;
+  --ifm-color-primary-light:   #7592ff;
+  --ifm-color-primary-lighter: #9cb9ff;
+  --ifm-color-primary-lightest:#dde9ff;
+
+  /* Typography — Outfit + JetBrains Mono, same as Rackscope app */
   --ifm-font-family-base:      'Outfit', system-ui, -apple-system, sans-serif;
   --ifm-font-family-monospace: 'JetBrains Mono', 'Fira Code', monospace;
   --ifm-font-size-base:        16.5px;
@@ -43,8 +42,8 @@
   --ifm-h3-font-size:          1.25rem;
 
   /* Background — Slate: Tailwind gray-50 / white */
-  --ifm-background-color:          #f9fafb;  /* gray-50 */
-  --ifm-background-surface-color:  #fff;     /* white */
+  --ifm-background-color:          #f9fafb;
+  --ifm-background-surface-color:  #fff;     
 
   /* Text — Slate: warm brown tones (not cold blue-gray) */
   --ifm-font-color-base:      #1a1714;  /* warm near-black */
@@ -55,14 +54,14 @@
   --ifm-navbar-background-color:    #fff;
   --ifm-navbar-shadow:              0px 1px 3px 0px rgb(16,24,40,0.10), 0px 1px 2px 0px rgb(16,24,40,0.06);
   --ifm-navbar-link-color:          #2c2822;  /* warm dark text */
-  --ifm-navbar-link-hover-color:    #465fff;  /* brand-500 */
+  --ifm-navbar-link-hover-color:    #465fff;
   --ifm-navbar-link-active-color:   #465fff;
 
   /* Sidebar */
   --ifm-sidebar-width:         280px;
   --doc-sidebar-width:         280px;
   --ifm-sidebar-padding:       16px;
-  --docusaurus-collapse-button-bg-hover-color: #f3f4f6; /* gray-100 */
+  --docusaurus-collapse-button-bg-hover-color: #f3f4f6; 
 
   /* Links */
   --ifm-link-color:        #465fff;
@@ -95,20 +94,20 @@
 /* ── Dark mode ───────────────────────────────────────────────────────────── */
 [data-theme='dark'] {
   /* Primary — lighter variant for readability on dark backgrounds */
-  --ifm-color-primary:         #7592ff;  /* brand-400 */
-  --ifm-color-primary-dark:    #465fff;  /* brand-500 */
-  --ifm-color-primary-darker:  #3641f5;  /* brand-600 */
-  --ifm-color-primary-darkest: #2a31d8;  /* brand-700 */
-  --ifm-color-primary-light:   #9cb9ff;  /* brand-300 */
-  --ifm-color-primary-lighter: #c2d6ff;  /* brand-200 */
-  --ifm-color-primary-lightest:#dde9ff;  /* brand-100 */
+  --ifm-color-primary:         #7592ff;
+  --ifm-color-primary-dark:    #465fff;
+  --ifm-color-primary-darker:  #3641f5;
+  --ifm-color-primary-darkest: #2a31d8;
+  --ifm-color-primary-light:   #9cb9ff;
+  --ifm-color-primary-lighter: #c2d6ff;
+  --ifm-color-primary-lightest:#dde9ff;
   --docusaurus-highlighted-code-line-bg: rgb(117, 146, 255, 0.15);
 
   /* Background — Void: Tailwind gray-950 / gray-900 neutral blacks */
   --ifm-background-color:         #030712;  /* gray-950 — deepest background */
   --ifm-background-surface-color: #111827;  /* gray-900 — cards, sidebar, panels */
-  --ifm-navbar-background-color:  #111827;  /* gray-900 */
-  --ifm-footer-background-color:  #030712;  /* gray-950 */
+  --ifm-navbar-background-color:  #111827;
+  --ifm-footer-background-color:  #030712;
 
   /* Text — neutral grays, no blue tint */
   --ifm-font-color-base:      #e5e5e5;  /* neutral light */
@@ -133,7 +132,7 @@
   --ifm-navbar-shadow: 0px 1px 0px 0px #1f2937;
 
   /* Code */
-  --ifm-code-background: #1f2937;  /* gray-800 */
+  --ifm-code-background: #1f2937;
 
   /* Sidebar collapse button */
   --docusaurus-collapse-button-bg-hover-color: rgb(255,255,255,0.05);
@@ -304,21 +303,21 @@ button[aria-label*="dark and light mode"]:hover::before {
   transition: background 0.12s, color 0.12s;
 }
 
-/* Active sidebar link — TailAdmin: bg-brand-50 + text-brand-500 */
+/* Active sidebar link — brand tint bg + brand color text */
 .menu__link--active,
 .menu__link--active:hover {
-  background: #ecf3ff;  /* brand-50 */
-  color: #465fff;       /* brand-500 */
+  background: #ecf3ff;
+  color: #465fff;       
   font-weight: 600;
 }
 
 [data-theme='dark'] .menu__link--active,
 [data-theme='dark'] .menu__link--active:hover {
   background: rgb(70, 95, 255, 0.12);
-  color: #7592ff;  /* brand-400 */
+  color: #7592ff;
 }
 
-/* Sidebar collapsible category */
+/* Sidebar category toggle */
 .menu__list-item-collapsible {
   border-radius: 8px;
 }
@@ -398,6 +397,23 @@ code {
 
 /* ── Tables — direct overrides (CSS variables not reliably cascaded) ─────── */
 
+/* Full-width tables on desktop; scrollable on mobile.
+   Infima forces display:block which caps width — we override for desktop,
+   and restore scrollable block on narrow viewports. */
+.markdown table {
+  display: table !important;
+  width: 100% !important;
+}
+
+@media (width <= 996px) {
+  .markdown table {
+    display: block !important;
+    overflow-x: auto !important;
+    max-width: 100% !important;
+    width: max-content !important;
+  }
+}
+
 /* 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 {
@@ -1281,6 +1297,175 @@ details > :not(summary) {
   border-top-color: #1f2937;
 }
 
+/* =============================================================================
+   NATIVE DOCUSAURUS COMPONENTS
+   ============================================================================= */
+
+/* ── 1. Color mode toggle icons ──────────────────────────────────────────── */
+/* Sun = amber shown in dark mode (hints "switch to light").
+   Moon = brand indigo shown in light mode (hints "switch to dark").
+   Uses CSS filter to colorize since Docusaurus SVG paths use hardcoded fill. */
+
+/* Dark mode shows the sun icon */
+[data-theme='dark'] [class*="toggleButton"] [class*="lightToggleIcon"],
+[data-theme='dark'] [class*="toggleButton"] svg {
+  filter: drop-shadow(0 0 0 #fbbf24) sepia(1) saturate(4) hue-rotate(5deg) brightness(1.1);
+}
+
+/* Light mode shows the moon icon */
+[data-theme='light'] [class*="toggleButton"] [class*="darkToggleIcon"],
+[data-theme='light'] [class*="toggleButton"] svg {
+  filter: drop-shadow(0 0 0 #7592ff) sepia(1) saturate(6) hue-rotate(190deg) brightness(0.9);
+}
+
+/* ── 2. TOCCollapsible (mobile table of contents) ────────────────────────── */
+[class*="tocCollapsible"] {
+  border: 1px solid var(--ifm-toc-border-color);
+  border-radius: 10px;
+  margin-bottom: 1rem;
+  overflow: hidden;
+}
+
+[class*="tocCollapsibleButton"] {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 10px 14px;
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.68rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--ifm-font-color-secondary);
+  transition: color 0.12s, background 0.12s;
+}
+
+[class*="tocCollapsibleButton"]:hover {
+  color: var(--ifm-color-primary);
+  background: rgb(70, 95, 255, 0.04);
+}
+
+[class*="tocCollapsibleContent"] {
+  border-top: 1px solid var(--ifm-toc-border-color);
+  padding: 8px 0;
+}
+
+/* ── 3. DocCard / DocCardList (auto-generated category index pages) ─────── */
+[class*="cardContainer"] > article.card {
+  height: 100%;
+  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
+}
+
+[class*="cardContainer"] > article.card:hover {
+  transform: translateY(-2px);
+}
+
+[class*="cardContainer"] a {
+  text-decoration: none;
+}
+
+/* Category card title */
+[class*="cardContainer"] h2 {
+  font-size: 1rem;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+}
+
+/* Category card description */
+[class*="cardContainer"] p {
+  font-size: 0.875rem;
+  color: var(--ifm-font-color-secondary);
+  margin: 0;
+}
+
+/* ── 4. Announcement bar close button ────────────────────────────────────── */
+.announcement-close,
+[class*="announcementBarClose"] {
+  color: rgb(255, 255, 255, 0.65) !important;
+  border-radius: 6px !important;
+  padding: 4px 6px !important;
+  transition: color 0.15s, background 0.15s !important;
+}
+
+.announcement-close:hover,
+[class*="announcementBarClose"]:hover {
+  color: #fff !important;
+  background: rgb(255, 255, 255, 0.12) !important;
+}
+
+/* ── 5. Tag pages (/docs/tags/...) ───────────────────────────────────────── */
+[class*="tagList"] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+[class*="tagItem"] a,
+[class*="tag_"] {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--ifm-toc-border-color);
+  border-radius: 20px;
+  padding: 4px 14px;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--ifm-font-color-base);
+  text-decoration: none;
+  transition: border-color 0.15s, background 0.15s, color 0.15s;
+}
+
+[class*="tagItem"] a:hover,
+[class*="tag_"]:hover {
+  border-color: var(--ifm-color-primary);
+  background: rgb(70, 95, 255, 0.06);
+  color: var(--ifm-color-primary);
+}
+
+/* ── 7. Responsive search ─────────────────────────────────────────────────── */
+/* On mobile the input collapses — restore sizing on focus */
+@media (width <= 576px) {
+  .navbar__search-input {
+    min-width: 0 !important;
+    width: 2rem !important;
+    padding-left: 2rem !important;
+    transition: width 0.25s ease, background-color 0.15s !important;
+  }
+
+  .navbar__search-input:focus {
+    width: 220px !important;
+  }
+}
+
+/* ── 8. prefers-reduced-motion ───────────────────────────────────────────── */
+/* Respects the OS-level "reduce motion" accessibility setting by
+   disabling all transitions and animations. */
+@media (prefers-reduced-motion: reduce) {
+  .navbar,
+  .theme-doc-sidebar-container,
+  .menu__link,
+  .main-wrapper,
+  article,
+  .footer,
+  .table-of-contents__link,
+  .pagination-nav__link,
+  .prism-code,
+  .alert,
+  .card,
+  [class*="sidebar-cat-"] > .menu__list-item-collapsible > .menu__link,
+  [class*="toggleIcon"],
+  button[aria-label*="dark and light mode"] {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
 /* =============================================================================
    OPTIONAL UTILITY CLASSES
    The following classes are not required for the theme to work.