cosmos-docusaurus-theme 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,26 @@
+# Changelog
+
+All notable changes to this project are documented here.
+
+The format follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
+This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+---
+
+## [1.0.0] — 2024-03-09
+
+### Added
+
+- Initial release of `cosmos-docusaurus-theme`
+- CSS-only theme based on TailAdmin design system
+- Proper Docusaurus theme plugin via `getClientModules()` — use with `themes: ['cosmos-docusaurus-theme']`
+- Backwards-compatible CSS import via `cosmos-docusaurus-theme/css/theme.css`
+- Light and dark mode support (`[data-theme='dark']`)
+- Outfit + JetBrains Mono typography loaded from Google Fonts
+- Indigo brand palette (`#465fff`) mapped to Infima CSS variables
+- Styled: navbar, sidebar, code blocks, admonitions, tables, pagination, footer, scrollbar
+- Optional utility classes: `.method-get/post/put/delete/patch`, `.status-ok/warn/crit/unknown`
+- Demo site deployed to GitHub Pages
+- CI workflow: stylelint + npm audit + demo build
+- Publish workflow: npm publish + GitHub Pages deploy on `v*` tags
+- Dependabot for npm and GitHub Actions

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 SckyzO
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,136 @@
+# cosmos-docusaurus-theme
+
+[![npm version](https://img.shields.io/npm/v/cosmos-docusaurus-theme.svg)](https://www.npmjs.com/package/cosmos-docusaurus-theme)
+[![npm downloads](https://img.shields.io/npm/dm/cosmos-docusaurus-theme.svg)](https://www.npmjs.com/package/cosmos-docusaurus-theme)
+[![CI](https://github.com/SckyzO/cosmos-docusaurus-theme/actions/workflows/ci.yml/badge.svg)](https://github.com/SckyzO/cosmos-docusaurus-theme/actions/workflows/ci.yml)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+
+A clean, dark-first Docusaurus theme based on the [TailAdmin](https://tailadmin.com) design system.
+
+- **CSS-only** — no swizzled components, no JavaScript
+- **Dark mode first-class** (default), full light mode support
+- **Outfit** + **JetBrains Mono** typography
+- **Indigo** brand palette (`#465fff`) mapped to Infima variables
+- Compatible with **Docusaurus 3+**
+
+**[Live Demo](https://sckyzo.github.io/cosmos-docusaurus-theme)**
+
+---
+
+## Screenshots
+
+> Light and dark mode — navbar, sidebar, code blocks, admonitions
+
+<!-- Screenshots are added after the first gh-pages deployment -->
+
+---
+
+## Installation
+
+```bash
+npm install cosmos-docusaurus-theme
+```
+
+## Usage
+
+Register it as a Docusaurus theme plugin in `docusaurus.config.js`:
+
+```js title="docusaurus.config.js"
+export default {
+  themes: ['cosmos-docusaurus-theme'],
+
+  themeConfig: {
+    colorMode: {
+      defaultMode: 'dark',
+      respectPrefersColorScheme: true,
+    },
+  },
+};
+```
+
+The CSS is injected automatically. No `customCss` entry needed.
+
+### Alternative — direct CSS import
+
+If you prefer to control injection manually:
+
+```js title="docusaurus.config.js"
+export default {
+  presets: [
+    ['classic', {
+      theme: {
+        customCss: [require.resolve('cosmos-docusaurus-theme/css/theme.css')],
+      },
+    }],
+  ],
+};
+```
+
+---
+
+## Customization
+
+Override any Infima variable after the theme import:
+
+```css title="src/css/custom.css"
+/* Change brand color */
+:root {
+  --ifm-color-primary:         #e11d48;
+  --ifm-color-primary-dark:    #be123c;
+  --ifm-color-primary-darker:  #9f1239;
+  --ifm-color-primary-darkest: #881337;
+  --ifm-color-primary-light:   #fb7185;
+  --ifm-color-primary-lighter: #fda4af;
+  --ifm-color-primary-lightest:#ffe4e6;
+}
+
+/* Change font */
+:root {
+  --ifm-font-family-base: 'Inter', system-ui, sans-serif;
+}
+
+/* Adjust sidebar width */
+:root {
+  --ifm-sidebar-width: 320px;
+  --doc-sidebar-width: 320px;
+}
+```
+
+---
+
+## Utility classes
+
+The theme ships optional utility classes for API and operational docs:
+
+| Class            | Usage                                  |
+|------------------|----------------------------------------|
+| `.method-get`    | HTTP GET label (green, monospace)      |
+| `.method-post`   | HTTP POST label (blue, monospace)      |
+| `.method-put`    | HTTP PUT label (orange, monospace)     |
+| `.method-delete` | HTTP DELETE label (red, monospace)     |
+| `.method-patch`  | HTTP PATCH label (purple, monospace)   |
+| `.status-ok`     | OK state (green, bold)                 |
+| `.status-warn`   | WARN state (orange, bold)              |
+| `.status-crit`   | CRIT state (red, bold)                 |
+| `.status-unknown`| UNKNOWN state (gray, bold)             |
+
+---
+
+## Development
+
+```bash
+# Install root dependencies (stylelint)
+npm install
+
+# Lint the CSS
+npm run lint
+
+# Start the demo site locally
+cd demo && npm install && npm run start
+```
+
+---
+
+## License
+
+[MIT](LICENSE) — © SckyzO

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "cosmos-docusaurus-theme",
+  "version": "1.0.0",
+  "description": "A clean, dark-first Docusaurus CSS theme based on TailAdmin design system with Outfit typography",
+  "keywords": [
+    "docusaurus",
+    "docusaurus-theme",
+    "theme",
+    "tailadmin",
+    "css",
+    "dark-mode",
+    "outfit",
+    "infima"
+  ],
+  "homepage": "https://sckyzo.github.io/cosmos-docusaurus-theme",
+  "bugs": {
+    "url": "https://github.com/SckyzO/cosmos-docusaurus-theme/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SckyzO/cosmos-docusaurus-theme.git"
+  },
+  "license": "MIT",
+  "author": "SckyzO",
+  "main": "src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./css/theme.css": "./src/css/theme.css"
+  },
+  "files": [
+    "src/",
+    "LICENSE",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "lint:css": "stylelint \"src/css/**/*.css\"",
+    "lint": "npm run lint:css",
+    "audit:check": "npm audit --audit-level=moderate"
+  },
+  "devDependencies": {
+    "stylelint": "^17.4.0",
+    "stylelint-config-standard": "^40.0.0"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/css/theme.css

@@ -0,0 +1,447 @@
+/**
+ * Cosmos Docusaurus Theme
+ *
+ * A clean, dark-first Docusaurus CSS theme based on the TailAdmin design system.
+ * Colors, typography, shadows and spacing extracted from TailAdmin's design tokens.
+ * Mapped to Docusaurus Infima CSS variables for seamless integration.
+ *
+ * Brand: #465fff (indigo)
+ * Font:  Outfit (same as TailAdmin) + JetBrains Mono for code
+ *
+ * Usage:
+ *   In docusaurus.config.js → theme.customCss:
+ *   require.resolve('cosmos-docusaurus-theme')
+ *
+ * @see https://github.com/SckyzO/cosmos-docusaurus-theme
+ * @license MIT
+ */
+
+/* ── Outfit + JetBrains Mono fonts ───────────────────────────────────────── */
+@import 'https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap';
+
+/* ── 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 */
+  --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;
+  --ifm-font-weight-bold:      600;
+  --ifm-line-height-base:      1.7;
+  --ifm-code-font-size:        93%;
+  --ifm-h1-font-size:          2.2rem;
+  --ifm-h2-font-size:          1.6rem;
+  --ifm-h3-font-size:          1.25rem;
+
+  /* Background — TailAdmin gray-50 / white */
+  --ifm-background-color:          #f9fafb;  /* gray-50 */
+  --ifm-background-surface-color:  #fff;  /* white */
+
+  /* Text — TailAdmin gray-900 / gray-500 */
+  --ifm-font-color-base:      #101828;  /* gray-900 */
+  --ifm-font-color-secondary: #667085;  /* gray-500 */
+
+  /* Navbar — 72px height to match TailAdmin header proportions */
+  --ifm-navbar-height:              72px;
+  --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:          #344054;  /* gray-700 */
+  --ifm-navbar-link-hover-color:    #465fff;  /* brand-500 */
+  --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: #f2f4f7; /* gray-100 */
+
+  /* Links */
+  --ifm-link-color:        #465fff;
+  --ifm-link-hover-color:  #3641f5;
+
+  /* Borders — TailAdmin gray-200 */
+  --ifm-toc-border-color:   #e4e7ec;
+  --ifm-hr-border-color:    #e4e7ec;
+  --ifm-color-emphasis-300: #e4e7ec;
+  --ifm-color-emphasis-600: #667085;
+
+  /* Code blocks */
+  --ifm-code-background:   #f2f4f7;  /* gray-100 */
+  --prism-background-color:#1d2939;  /* gray-800 — TailAdmin dark surface */
+  --docusaurus-highlighted-code-line-bg: rgb(70, 95, 255, 0.1);
+
+  /* Shadows — from TailAdmin elevation tokens */
+  --ifm-global-shadow-md:   0px 4px 8px -2px rgb(16,24,40,0.10), 0px 2px 4px -2px rgb(16,24,40,0.06);
+  --ifm-global-shadow-lw:   0px 1px 2px 0px rgb(16,24,40,0.05);
+
+  /* Menu item spacing */
+  --ifm-menu-link-padding-horizontal: 12px;
+  --ifm-menu-link-padding-vertical:   8px;
+
+  /* Table */
+  --ifm-table-border-color:    #e4e7ec;
+  --ifm-table-head-background: #f9fafb;
+}
+
+/* ── 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 */
+  --docusaurus-highlighted-code-line-bg: rgb(117, 146, 255, 0.15);
+
+  /* Background — TailAdmin dark surfaces */
+  --ifm-background-color:         #0f1117;   /* deeper than gray-dark for body */
+  --ifm-background-surface-color: #1a2231;   /* gray-dark — card/sidebar surfaces */
+  --ifm-navbar-background-color:  #1a2231;
+  --ifm-footer-background-color:  #0c111d;   /* gray-950 */
+
+  /* Text */
+  --ifm-font-color-base:      #e4e7ec;  /* light body text */
+  --ifm-font-color-secondary: #98a2b3;  /* muted / secondary text */
+
+  /* Borders — TailAdmin gray-700 */
+  --ifm-toc-border-color:   #344054;
+  --ifm-hr-border-color:    #344054;
+  --ifm-color-emphasis-300: #344054;
+  --ifm-color-emphasis-600: #98a2b3;
+  --ifm-table-border-color: #344054;
+  --ifm-table-head-background: #1d2939;
+
+  /* Links */
+  --ifm-link-color:       #7592ff;
+  --ifm-link-hover-color: #9cb9ff;
+
+  /* Navbar */
+  --ifm-navbar-link-color:       #d0d5dd;  /* gray-300 */
+  --ifm-navbar-link-hover-color: #7592ff;
+  --ifm-navbar-link-active-color:#7592ff;
+  --ifm-navbar-shadow: 0px 1px 0px 0px #344054;
+
+  /* Code */
+  --ifm-code-background: #1d2939;
+
+  /* Sidebar collapse button */
+  --docusaurus-collapse-button-bg-hover-color: rgb(255,255,255,0.05);
+}
+
+/* ── Global body ─────────────────────────────────────────────────────────── */
+html {
+  /* Enable Outfit OpenType features for better number and letter rendering */
+  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+  -webkit-font-smoothing: antialiased;
+}
+
+/* ── Navbar ──────────────────────────────────────────────────────────────── */
+.navbar {
+  border-bottom: 1px solid var(--ifm-toc-border-color);
+  box-shadow: none;
+  padding: 0 24px;
+}
+
+.navbar__brand {
+  font-weight: 700;
+  font-size: 1.125rem;
+  letter-spacing: -0.3px;
+  gap: 10px;
+}
+
+.navbar__logo {
+  height: 28px;
+}
+
+.navbar__link {
+  font-weight: 500;
+  font-size: 0.875rem;
+  border-radius: 6px;
+  padding: 6px 10px;
+  transition: background 0.15s, color 0.15s;
+}
+
+.navbar__link:hover {
+  background: rgb(70, 95, 255, 0.08);
+}
+
+[data-theme='dark'] .navbar {
+  border-bottom-color: #344054;
+}
+
+/* ── Sidebar ─────────────────────────────────────────────────────────────── */
+.theme-doc-sidebar-container {
+  border-right: 1px solid var(--ifm-toc-border-color) !important;
+}
+
+[data-theme='dark'] .theme-doc-sidebar-container {
+  border-right-color: #344054 !important;
+  background: #1a2231;
+}
+
+.theme-doc-sidebar-menu {
+  padding: 12px 8px;
+  font-size: 0.875rem;
+}
+
+/* Sidebar nav items — rounded, smooth transitions */
+.menu__list-item--collapsed .menu__link,
+.menu__list-item .menu__link {
+  border-radius: 8px;
+  font-weight: 500;
+  transition: background 0.12s, color 0.12s;
+}
+
+/* Active sidebar link — TailAdmin: bg-brand-50 + text-brand-500 */
+.menu__link--active,
+.menu__link--active:hover {
+  background: #ecf3ff;  /* brand-50 */
+  color: #465fff;       /* brand-500 */
+  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 */
+}
+
+/* Sidebar collapsible category */
+.menu__list-item-collapsible {
+  border-radius: 8px;
+}
+
+.menu__list-item-collapsible:hover {
+  background: #f2f4f7;  /* gray-100 */
+}
+
+[data-theme='dark'] .menu__list-item-collapsible:hover {
+  background: rgb(255,255,255,0.05);
+}
+
+/* Sidebar section separator — uppercase label style from TailAdmin */
+.sidebar_menu_section_title {
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #98a2b3;  /* gray-400 */
+  padding: 12px 12px 4px;
+}
+
+/* ── Code blocks ─────────────────────────────────────────────────────────── */
+.prism-code {
+  border-radius: 10px;
+  font-size: 0.8625rem;
+  line-height: 1.65;
+}
+
+/* Inline code — subtle bordered style */
+code {
+  border-radius: 5px;
+  padding: 2px 6px;
+  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;
+}
+
+.markdown h1 { font-size: 2.2rem; }
+
+.markdown h2 {
+  font-size: 1.6rem;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--ifm-toc-border-color);
+  margin-top: 2.5rem;
+}
+
+/* ── Table of contents (right panel) ─────────────────────────────────────── */
+.table-of-contents__link {
+  font-size: 0.8125rem;
+  color: var(--ifm-font-color-secondary);
+  transition: color 0.12s;
+}
+
+.table-of-contents__link:hover,
+.table-of-contents__link--active {
+  color: var(--ifm-color-primary);
+  font-weight: 500;
+}
+
+/* ── Admonitions — TailAdmin semantic color palette ──────────────────────── */
+.alert--info {
+  border-left-color: #465fff;
+  background: rgb(70, 95, 255, 0.05);
+}
+
+.alert--success {
+  border-left-color: #12b76a;
+  background: rgb(18, 183, 106, 0.05);
+}
+
+.alert--warning {
+  border-left-color: #f79009;
+  background: rgb(247, 144, 9, 0.05);
+}
+
+.alert--danger {
+  border-left-color: #f04438;
+  background: rgb(240, 68, 56, 0.05);
+}
+
+[data-theme='dark'] .alert--info {
+  background: rgb(70, 95, 255, 0.08);
+}
+
+[data-theme='dark'] .alert--success {
+  background: rgb(18, 183, 106, 0.08);
+}
+
+[data-theme='dark'] .alert--warning {
+  background: rgb(247, 144, 9, 0.08);
+}
+
+[data-theme='dark'] .alert--danger {
+  background: rgb(240, 68, 56, 0.08);
+}
+
+/* ── Badges ───────────────────────────────────────────────────────────────── */
+.badge--success {
+  background: #12b76a;
+  color: white;
+}
+
+.badge--warning {
+  background: #f79009;
+  color: white;
+}
+
+.badge--danger {
+  background: #f04438;
+  color: white;
+}
+
+/* ── Footer ───────────────────────────────────────────────────────────────── */
+.footer {
+  border-top: 1px solid var(--ifm-toc-border-color);
+  font-size: 0.875rem;
+}
+
+[data-theme='dark'] .footer {
+  border-top-color: #344054;
+}
+
+/* ── Pagination nav ───────────────────────────────────────────────────────── */
+.pagination-nav__link {
+  border-color: var(--ifm-toc-border-color);
+  border-radius: 10px;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.pagination-nav__link:hover {
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 0 0 3px rgb(70, 95, 255, 0.12);
+}
+
+/* ── Scrollbar — thin, TailAdmin style ───────────────────────────────────── */
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #d0d5dd;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #98a2b3;
+}
+
+[data-theme='dark'] ::-webkit-scrollbar-thumb {
+  background: #344054;
+}
+
+[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
+  background: #475467;
+}
+
+/* =============================================================================
+   OPTIONAL UTILITY CLASSES
+   The following classes are not required for the theme to work.
+   Include them when building API reference or status documentation.
+   ============================================================================= */
+
+/* HTTP method badges — useful for API reference pages */
+.method-get {
+  color: #12b76a;
+  font-weight: 700;
+  font-family: var(--ifm-font-family-monospace);
+}
+
+.method-post {
+  color: #465fff;
+  font-weight: 700;
+  font-family: var(--ifm-font-family-monospace);
+}
+
+.method-put {
+  color: #f79009;
+  font-weight: 700;
+  font-family: var(--ifm-font-family-monospace);
+}
+
+.method-delete {
+  color: #f04438;
+  font-weight: 700;
+  font-family: var(--ifm-font-family-monospace);
+}
+
+.method-patch {
+  color: #9b59b6;
+  font-weight: 700;
+  font-family: var(--ifm-font-family-monospace);
+}
+
+/* Status / health state labels — useful for operational docs */
+.status-ok {
+  color: #12b76a;
+  font-weight: 600;
+}
+
+.status-warn {
+  color: #f79009;
+  font-weight: 600;
+}
+
+.status-crit {
+  color: #f04438;
+  font-weight: 600;
+}
+
+.status-unknown {
+  color: #667085;
+  font-weight: 600;
+}

package/src/index.js

@@ -0,0 +1,40 @@
+/**
+ * cosmos-docusaurus-theme
+ *
+ * A Docusaurus theme plugin that injects the Cosmos CSS theme.
+ * Implemented as a proper Docusaurus theme via getClientModules() so that
+ * consumers can use the standard `themes` array in their config:
+ *
+ *   themes: ['cosmos-docusaurus-theme']
+ *
+ * No component swizzling — CSS-only override of Infima variables.
+ *
+ * @see https://docusaurus.io/docs/api/plugin-methods/lifecycle-apis#getClientModules
+ */
+
+'use strict';
+
+const path = require('path');
+
+/**
+ * @param {import('@docusaurus/types').LoadContext} _context
+ * @param {object} _options
+ * @returns {import('@docusaurus/types').Plugin}
+ */
+function cosmosDocusaurusTheme(_context, _options) {
+  return {
+    name: 'cosmos-docusaurus-theme',
+
+    /**
+     * Return the CSS file as a client module so Docusaurus injects it
+     * into the page bundle automatically.
+     *
+     * @returns {string[]}
+     */
+    getClientModules() {
+      return [path.resolve(__dirname, 'css/theme.css')];
+    },
+  };
+}
+
+module.exports = cosmosDocusaurusTheme;