Fix: dark-theme contrast for tw-style badges in billboard content (#22942)

[Auguzcht]

What type of PR is this? (check all applicable)

• Bug Fix
• Refactor
• Feature
• Optimization
• Documentation Update

---

Description

This PR improves dark-mode accessibility contrast for learning track level badges (e.g. "Beginner", "Intermediate") rendered inside billboard/page content.

During investigation, I traced the rendering path and confirmed that the low-contrast badge styling is not coming from a hardcoded component within the repository, but rather from admin-authored markdown/HTML content injected through Forem’s billboard/page rendering pipeline.

Relevant rendering paths:

• Billboard: app/models/billboard.rb → app/views/shared/_billboard.html.erb
• Pages: app/models/page.rb → app/views/pages/show.en.html.erb

The problematic styling originates from tw-* utility-style classes embedded in rendered content (likely authored externally or via admin tooling), which can result in insufficient contrast when rendered inside dark-themed card surfaces.

Approach

Instead of modifying or relying on DB/content changes, this PR introduces a scoped CSS guardrail that ensures badge-like elements inside rendered billboard content remain accessible across themes.

The fix applies semantic pill-like styling using Forem’s design tokens (--pill-bg, --pill-color, --pill-border) to enforce consistent contrast in dark mode.

Key Design Decision

• Prefer defensive styling at render boundary rather than modifying or sanitizing DB-authored content
• Maintain compatibility with existing Forem design system conventions
• Avoid global overrides to reduce regression risk across unrelated UI

Trade-offs considered

• Global CSS override for all badges → rejected due to high regression risk
• Hardcoding light text → rejected due to theme inconsistency risk
• Rewriting content at DB level → out of scope and unsafe for admin-generated content
• Component-level redesign → too large for scope of issue

---

Related Tickets & Documents

• Related Issue In dark theme under Dev Education Tracks we see accessibility issue of contrast #22942
• Closes In dark theme under Dev Education Tracks we see accessibility issue of contrast #22942

---

QA Instructions, Screenshots, Recordings

How to test

1. Navigate to Dev Education Pack / Learning Tracks page
2. Enable dark mode
3. Inspect "Beginner / Intermediate" badges in learning track cards
4. Verify:
   • Text remains readable in dark theme
   • Border and background contrast are consistent
   • No unintended visual changes in light mode

Devices tested

• Desktop Chrome (Dark mode)
• Firefox (Dark mode)

---

UI accessibility checklist

• Semantic HTML implemented?
• Keyboard operability supported?
• Checked with axe DevTools and addressed Critical and Serious issues?
• Color contrast tested?

---

Added/updated tests?

• Yes
• No

Why: This is a styling-level accessibility guardrail applied at the presentation layer; existing visual regression coverage and manual QA are sufficient for this scope.

---

[optional] Post deployment tasks

None required.

---

[optional] What gif best describes this PR or how it makes you feel?

[github-actions]

Thank you for opening this PR! We appreciate you!

For all pull requests coming from third-party forks we will need to
review the PR before we can process it through our CI pipelines.

A Forem Team member will review this contribution and get back to
you as soon as possible!

[Copilot]

Pull request overview

Improves dark-mode contrast for “badge/pill” elements authored via admin markdown/HTML (with tw-* utility classes) when rendered inside billboard/page content.

Changes:

• Adds a CSS “guardrail” rule to restyle certain tw-* badge-like elements using Forem pill design tokens.
• Ensures badge text/border/background remain theme-appropriate (notably in dark mode).