Style inline badges from the badge macro

[JakeSCahill]

The shared badge inline macro (badge::[label=...]) emits .badge.badge--<label> spans, but docs-ui only styles .status-badge (the page-level beta pill), so inline badges render as unstyled plain text. This became visible when redpanda-data/docs#1808 registered the macro in the streaming playbook and used badge::[label=beta] for section-level beta markers (per team convention: page-level beta uses :page-beta:, section-level uses the badge macro).

Adds styling for the three standard labels (beta, deprecated, enterprise) plus the size=large variant, with dark-theme colors mirroring the existing status-badge palette. Graceful before/after: without this, badges read as plain "(beta)" text; with it, they render as small pills.

🤖 Generated with Claude Code

[netlify]

✅ Deploy Preview for docs-ui ready!

Name	Link
🔨 Latest commit	eaeb4a7
🔍 Latest deploy log	https://app.netlify.com/projects/docs-ui/deploys/6a670db394488b00088d770a
😎 Deploy Preview	https://deploy-preview-406--docs-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 31 (🟢 up 3 from production) Accessibility: 89 (no change from production) Best Practices: 92 (no change from production) SEO: 89 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: c730ac76-7bb5-43de-afe1-7164fabcd804

📥 Commits

Reviewing files that changed from the base of the PR and between a14d90c and eaeb4a7.

📒 Files selected for processing (1)

• src/css/doc.css

---

📝 Walkthrough

Walkthrough

Added .doc .badge styles for inline macro-generated pills, including shared sizing and typography, beta/deprecated/enterprise variants, a large modifier, and dark-theme color overrides.

Estimated code review effort: 1 (Trivial) | ~3 minutes

Possibly related PRs

• redpanda-data/docs-ui#376: Adds related pill-style badge styling and dark-mode overrides in src/css/doc.css.
• redpanda-data/docs-ui#398: Adds another badge variant in the same stylesheet.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: styling inline badges from the badge macro.
Description check	✅ Passed	The description matches the changeset and explains the new inline badge styling and variants.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/inline-badge-styles

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install timed out. The project may have too many dependencies for the sandbox.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[Feediver1]

Review: Style inline badges from the badge macro

Overview

Adds CSS for the shared badge::[label=...] inline macro, which currently renders as unstyled text because docs-ui only styles .status-badge (the page-level pill). New rules cover base .badge, three label variants (beta, deprecated, enterprise), a size=large variant, and dark-theme overrides. CSS-only, additive, one file.

Correctness — verified against the macro and existing styles

• Selectors match the emitted markup. Checked macros/badge.js in docs-extensions-and-macros: it emits class="badge badge--<label> badge--large" with the label lowercased and whitespace-hyphenated, so label=Beta (as used capitalized in the generated connector docs) correctly hits .badge--beta.
• Palette is faithful. .badge--beta matches .status-badge--beta exactly in both themes; .badge--enterprise reuses the --la purple; .badge--deprecated is new but follows the same construction (solid light palette, 0.15-alpha dark background with 0.3-alpha border). Hardcoded hex values match this file's existing convention.
• Dark-theme cascade is right. Dark rules override only colors; the border width/style comes from the light rule, which still applies.
• Tooltips work. The macro's data-tooltip attribute is picked up by the existing 12-activate-tooltips.js tippy initialization, so no JS changes are needed.

Suggestions

• Add cursor: help for badges with tooltips — .status-badge[data-tippy-content] has this affordance; .doc .badge[data-tooltip] { cursor: help; } would give the new badges parity, since without it there's no hint the pill is hoverable.
• Give the base .badge a neutral fallback palette. An unrecognized label (say badge::[label=Preview]) gets pill shape but transparent background and no border — half-styled. A gray default on .doc .badge, overridden by the label variants, degrades better.
• ToC side effect worth eyeballing: the on-this-page script copies headings with textContent, so a section title carrying a badge will show a literal "(beta)" suffix in the ToC — plain text, no pill. That's pre-existing macro behavior, not something this CSS causes, but the PR that starts using badges in section titles makes it visible; fine to defer.
• Include a before/after screenshot in the PR — a light/dark screenshot pair from the Antora preview is the effective "test" for a CSS-only change.

Risks

Low. Purely additive, scoped under .doc so it can't affect the header, nav, or ToC. doc.css has no existing bare .badge rules — only .status-badge* — so no collision. The generic class name .badge carries a small future-collision risk with any vendored CSS, but scoping under .doc mitigates it.

Verdict: correct and convention-consistent — good to merge as-is; the cursor and fallback suggestions are small enough to fold in now if desired.

🤖 Generated with Claude Code