feat(docs): added color tables to background utilities

[duvalale]

Related issues

Closes #3489

Description

Improves background documentation by displaying them in color tables like in color utilities docs.

Checklists

• I have read the contributing guidelines
• My change follows the developer guide
• My change follows the page structure defined in [OUDS] Create a component page template for the doc #3045
• Title and DOM structure is correct
• Links have been updated (title change impacts links for example)

Progression (for Core Team only)

• Code review
• Commit on ouds/main following conventional commit

Live previews

• https://deploy-preview-3782--boosted.netlify.app/

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	16c8c60
🔍 Latest deploy log	https://app.netlify.com/projects/boosted/deploys/6aaa4e8920e7f00008bbf53a
😎 Deploy Preview	https://deploy-preview-3782--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

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

[louismaximepiton]

Just a quick comment, but it would be great to also have the associated theme that should be used in combination of the class

[Copilot]

🟡 Changes recommended

The updated background documentation no longer clearly surfaces the per-utility recommended data-bs-theme values (a key requirement of #3489), and the current table rendering introduces at least one misleading preview case (transparent).

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

This PR updates the background utilities documentation to present background-related utilities in a tabular “color table” format (similar to the color utilities docs), and extends the shared ColorTable shortcode to support non-token-based class lists.

Changes:

• Replaces several <Example> blocks in utilities/background.mdx with <ColorTable> instances for Bootstrap compatibility and OUDS background/surface/always/opacity groupings.
• Enhances ColorTable.astro to support basicClasses (non-token-driven rows) and an optional hasBackdrop flag, and refactors token collection into a single tokens list.

File summaries

File	Description
site/src/content/docs/utilities/background.mdx	Switches background utility documentation examples to ColorTable tables, including Bootstrap-compatibility and OUDS token-backed sections.
site/src/components/shortcodes/ColorTable.astro	Adds support for basicClasses-driven tables and optional backdrop indication, and refactors token extraction/rendering accordingly.

Review details

Suppressed comments (1)

site/src/components/shortcodes/ColorTable.astro:140

• Same issue as the light-mode column: the preview class name for basicClasses is derived from getUsage(token.colorName) without colorPrefix, which can break the default getUsage implementation and is inconsistent with the usage cell.

Pass colorPrefix and use a boolean value for class:list for clarity.

                    class:list={['w-100 h-100 mb-none d-flex justify-content-center align-items-center', basicClasses.length > 0 ? { [ getUsage(token.colorName).replace('.', '')]: token.colorName } : {}]}

• Files reviewed: 2/2 changed files
• Comments generated: 3
• Review effort level: Lite

---

💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.