feat: LX Studio theme

[aresnik11]

Overview

Adds a new LX Studio theme, updates navy-400 and white-400 colors, and adds new theme pages in storybook

PR Checklist

• Related to designs: https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=78900-79361&m=dev
• Related to JIRA ticket: GM-1011, GM-1023, GM-1054
• 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. View the Core Theme storybook page
2. Confirm navy-400 and white-400 have been updated to rgba(16, 22, 47, 0.47) and rgba(255, 255, 255, 0.35) respectively
3. Visit the new LX Studio theme storybook page
4. Confirm you see everything specific to the lx studio theme! Colors, border radius, font family
5. Visit the new platform theme storybook page
6. Confirm you see the platform specific colors
7. Visit the new admin theme page
8. Confirm you see the admin specific colors

PR Links and Envs

Repository	PR Link	PR Env
Monolith	Monolith PR	Monolith Env
Portal	Portal Link	Portal Env
Another Repo	Another Link	Another Env

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 8e43db4.

---

☁️ Nx Cloud last updated this comment at 2025-03-27 16:16:04 UTC

[dreamwasp]

this looks great and i loveeeeee the new documentation! there are a couple places using static colors (mainly alerts) that i think may need to get swapped over (stacey qs~) but we can do that as we find those instances.

i also tested in admin here and it looks great there - https://github.com/codecademy-engineering/mono/pull/9671

just holding till the monolith is passing CI ✨

[LinKCoding]

LGTM!

[codecademydev]

📬Published Alpha Packages:

@codecademy/gamut@59.3.1-alpha.8e43db.0
@codecademy/gamut-icons@9.40.1-alpha.8e43db.0
@codecademy/gamut-illustrations@0.54.1-alpha.8e43db.0
@codecademy/gamut-kit@0.6.488-alpha.8e43db.0
@codecademy/gamut-patterns@0.10.7-alpha.8e43db.0
@codecademy/gamut-styles@17.5.2-alpha.8e43db.0
@codecademy/gamut-tests@5.2.6-alpha.8e43db.0
@codecademy/styleguide@70.5.1-alpha.8e43db.0

[codecademydev]

🚀 Styleguide deploy preview ready!

https://67e57a144084ec0a75efd0ac--gamut-preview.netlify.app

Deploy Logs