Utility Classes

Optional CSS classes for use in MDX pages. All are included in theme.css, so no extra import is 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 + IBM Plex 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

Infima ships these badge colors. The theme darkens badge--success, badge--warning, and badge--danger to meet WCAG AA contrast; badge--primary and badge--secondary keep the Infima defaults.

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>