chore: Add DocFX alert block styling to documentation template

[Copilot]

GitHub Issue: closes #21787

PR Type:

• 📚 Documentation content changes

What is the current behavior? 🤔

DocFX alert blocks (NOTE, TIP, IMPORTANT, WARNING, CAUTION) in documentation lack visual distinction and styling, making them blend in with regular content.

What is the new behavior? 🚀

Alert blocks now have color-coded backgrounds and left borders:

• NOTE/TIP: Blue theme ($blue with lightened background)
• IMPORTANT/WARNING: Orange theme ($orange with lightened background)
• CAUTION: Red theme ($red with lightened background)

Implementation uses a SCSS mixin to eliminate code duplication:

@mixin alert-block($bg-color, $border-color, $text-color) {
  background-color: $bg-color;
  border-left: 4px solid $border-color;
  padding: 16px 20px;
  margin: 16px 0;
  border-radius: 4px;
  // ...
}

Background colors are derived using lighten() function from existing color variables for maintainability.

PR Checklist ✅

Please check if your PR fulfills the following requirements:

• 📝 Commits must be following the Conventional Commits specification.
• 🧪 Added Runtime tests, UI tests, or a manual test sample for the changes have been added (for bug fixes / features) (if applicable)
• 📚 Docs have been added/updated which fit documentation template (for bug fixes / features)
• 🖼️ Validated PR Screenshots Compare Test Run results.
• ❗ Contains NO breaking changes

Other information ℹ️

Preview available at: https://unodocsprstaging.z13.web.core.windows.net/pr-22211/docs/index.html

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.