Fix guardrail card contrast in dark mode

[AKiffAhamed]

Purpose

Fix the low-contrast Supported Guardrails cards in dark mode reported in #11639.

Goals

Ensure that the card backgrounds and text remain readable in both light and dark themes.

Approach

Changed the 11 Supported Guardrails cards in en/docs/ai-gateway/ai-guardrails/overview.md to use the theme-aware --md-surface-fg-color variable instead of the light-mode-only --md-primary-fg-color--lightest variable. This lets the cards use the appropriate surface color for each documentation theme.

User stories

Documentation users can read the Supported Guardrails names and descriptions when viewing the page in dark mode.

Release note

Improved dark-mode readability for the Supported Guardrails cards.

Documentation

This PR directly updates the affected documentation page: AI Guardrails.

Training

N/A — this is a documentation styling correction only.

Certification

N/A — this documentation-only change does not affect certification exams.

Marketing

N/A — no marketing content is required for this documentation styling correction.

Automation tests

• Unit tests: N/A — no application code changed.
• Integration tests: N/A — no runtime behavior changed.

Security checks

• No application code or dependencies changed.
• No secrets, credentials, or personal data were added.
• FindSecurityBugs is not applicable to this documentation-only change.

Samples

N/A — no samples were changed.

Related PRs

N/A.

Migrations

N/A — no migration is required.

Test environment

The documentation was built locally with MkDocs in non-strict mode. The generated page was checked for the updated theme variable. Strict mode reports existing Material theme plugin configuration warnings unrelated to this change.

Learning

The fix uses the existing WSO2 documentation theme variables so the card surface adapts to the selected light or dark color scheme without introducing new CSS or dependencies.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[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: 140d183a-2860-45e3-8591-023be8406c66

📥 Commits

Reviewing files that changed from the base of the PR and between cfc521b and ecf8d0e.

📒 Files selected for processing (1)

• en/docs/ai-gateway/ai-guardrails/overview.md

Included review availability: Your plan includes up to 1 review per rolling hour; 0 remain after this review.

---

📝 Walkthrough

Summary

• Updated 11 Supported Guardrails cards in overview.md.
• Replaced the fixed lightest primary color with --md-surface-fg-color.
• Improved card readability in light and dark themes.
• No application code, dependencies, or runtime behavior changed.

Walkthrough

Updated all supported guardrail cards to use var(--md-surface-fg-color, #f5f5f5) instead of var(--md-primary-fg-color--lightest, #f5f5f5). Card links and descriptions remain unchanged.

Suggested reviewers: chamilaadhi, tharikagithub

Merge Risk: ⚪ Minimal · up to ecf8d

This localized documentation-only change updates the Supported Guardrails cards to use a theme-aware surface color for improved readability in dark mode; no actionable merge-blocking risk remains beyond normal checks and review.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the main change: fixing contrast for guardrail cards in dark mode.
Description check	✅ Passed	The description covers the required purpose, goals, approach, testing, and impact sections for this documentation-only fix.
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

---

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.}