Utility Classes

Optional CSS classes for use in MDX pages. All included in theme.css — no extra import needed.

Buttons .btn-*

Primary  Secondary  Danger

Sizes: Small  Large

<a class="btn btn-primary" href="/docs/getting-started">Get started</a>
<a class="btn btn-secondary" href="/docs/customization">Customize</a>
<a class="btn btn-primary btn-lg" href="#">Large CTA</a>

Release badges .badge-new/beta/deprecated/experimental

Inline pill labels for marking feature lifecycle state.

New  Beta  Deprecated  Experimental

## Slurm integration <span class="badge-new">New</span>
## CSV export <span class="badge-deprecated">Deprecated</span>

HTTP method labels .method-*

GET /api/topology/rooms

POST /api/topology/rooms

PUT /api/topology/rooms/{id}

PATCH /api/topology/rooms/{id}

DELETE /api/topology/rooms/{id}

<span class="method-get">GET</span> `/api/topology/rooms`

Status labels .status-* / .state-*

Node	Status
web-01	OK
db-primary	WARN
cache-01	CRIT
worker-03	UNKNOWN

.state-ok/warn/crit/unknown are identical aliases.

Numbered steps <ol className="steps">

1. Install — run npm install cosmos-docusaurus-theme
2. Register — add 'cosmos-docusaurus-theme' to the themes array
3. Configure — set defaultMode: 'dark' in colorMode
4. Start — run npm start and open localhost:3000

<ol class="steps">
  <li><strong>Install</strong> — <code>npm install cosmos-docusaurus-theme</code></li>
  <li><strong>Register</strong> — add to <code>themes</code> array</li>
</ol>

Timeline <ul className="timeline">

• v2.1.0 — Buttons, steps, timeline, blockquote, kbd, tooltip, 4-col footer
• v2.0.3 — Full lint suite: ESLint, Prettier, markdownlint, Makefile
• v2.0.2 — Dynamic version badge via injectHtmlTags()
• v2.0.1 — Tables full-width desktop, scrollable mobile
• v2.0.0 — 8 native Docusaurus components, GHCR workflow fix

<ul class="timeline">
  <li><strong>v2.1.0</strong> — New utility classes</li>
  <li><strong>v2.0.0</strong> — Major refactor</li>
</ul>

Check list <ul className="list-check">

• CSS-only — no JavaScript, no React component swizzling
• Dark-first with full light mode support (Void + Slate palettes)
• Outfit + JetBrains Mono typography
• Every native Docusaurus element styled
• Sidebar icons, sub-menu line, version badge
• Local search (easyops-cn) palette overrides

<ul class="list-check">
  <li>CSS-only — no JavaScript</li>
  <li>Dark-first with full light mode support</li>
</ul>

Docusaurus built-in badges

primary  secondary  stable  beta  deprecated

<span class="badge badge--success">stable</span>
<span class="badge badge--warning">beta</span>
<span class="badge badge--danger">deprecated</span>