fix(List, DataList, DataTable): fix background colors + non-interactive table header spacing

[dreamwasp]

Overview

Fixes background colors + non-interactive table header spacing

PR Checklist

• [x] Related to designs: pre-existing designs
• [x] Related to JIRA ticket: [GTM-219]
• [x] I have run this code to verify it works
• [x] This PR includes unit tests for the code change
• [x] This PR includes testing instructions tests for the code change
• [x] The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

** There are aLOT of ugly red backgrounds everywhere! i will remove them from the examples before shipping, it just makes it easier to test the contrast**

1. Go to List story
2. See that all List variants have background colors except table + plain
3. See that DataTable has a background based on background-current
4. See that DataList has a background
5. See that non-interactive column headers are now correctly aligned with the other headers

PR Links and Envs

Repository	PR Link
Monolith	Monolith PR
Mono	Mono PR

[nx-cloud[bot]]

View your CI Pipeline Execution ↗ for commit 89854c4373f5ea926ebdf47fc26975b986da67f8

---

☁️ Nx Cloud last updated this comment at 2025-11-07 18:35:42 UTC

[codecademydev]

📬 Published Alpha Packages:

@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]

[github-actions[bot]]

🚀 Styleguide deploy preview ready!

Preview URL: https://690e3cbd40182d07a8091660--gamut-preview.netlify.app Deploy Logs: https://app.netlify.com/projects/gamut-preview/deploys/690e3cbd40182d07a8091660