feat(Tag): update read only tag styles to be less prominent

[aresnik11]

Overview

The current read-only tag variant is too visually prominent, drawing attention away from the core content. Per design's request, this updates the read-only tag to use background-disabled for background and text for text color.

PR Checklist

• Related to designs:
• Related to JIRA ticket: GMT-299
• Version plan added/updated (or not needed)
• I have run this code to verify it works
• This PR includes unit tests for the code change
• This PR includes testing instructions tests for the code change
• The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

1. Go to Tag story
2. Confirm the read only variant is much less prominent
3. Do that something in dark mode
4. Finish and do a celebratory dance

PR Links and Envs

Repository	PR Link
Monolith	Monolith PR
Mono	Mono PR

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 7ad8367

---

☁️ Nx Cloud last updated this comment at 2026-07-22 15:03:52 UTC

[codecov]

⚠️ JUnit XML file not found

The CLI was unable to find any JUnit XML files to upload.
For more help, visit our troubleshooting guide.

[dreamwasp]

ship it

[codecademydev]

📬 Published Alpha Packages:

Package	Version	npm	Diff
@codecademy/gamut	72.2.6-alpha.705d2c.0	npm	diff
@codecademy/gamut-icons	9.57.11-alpha.705d2c.0	npm	diff
@codecademy/gamut-illustrations	0.58.16-alpha.705d2c.0	npm	diff
@codecademy/gamut-kit	3.0.10-alpha.705d2c.0	npm	diff
@codecademy/gamut-patterns	0.10.35-alpha.705d2c.0	npm	diff
@codecademy/gamut-styles	20.0.3-alpha.705d2c.0	npm	diff
@codecademy/gamut-tests	6.0.6-alpha.705d2c.0	npm	diff
@codecademy/variance	0.26.2-alpha.705d2c.0	npm	diff
eslint-plugin-gamut	2.4.4-alpha.705d2c.0	npm	diff

[github-actions]

🚀 Styleguide deploy preview ready!

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