feat: Updates to ThemeProvider, tokens, and transform to allow Logical vs Physical prop resolution

[LinKCoding]

Overview

• Adds a new prop, useLogicalProperties which defaults to true, to GamutProvider
• Updated margin and padding related props to include both physical and logical CSS properties
• Adds a new function to transform to resolve the correct CSS property to use
• Adds a new toolbar tool for switching between logical and physical CSS properties
• Adds documentation for useLogicalProperties

PR Checklist

• Related to designs:
• Related to JIRA ticket: GMT-1508
• 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

Don't make me tap the sign.

1. Go to Meta/Logical and physical CSS properties and review the info to be correct and organized well
2. Go to System/Props/Space and check over the token table and inspect the examples (should be using logical props)
3. Use the new toolbar button to switch to physical property and re-inspect the example
4. ...
5. 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 1f6e194

---

☁️ Nx Cloud last updated this comment at 2026-01-29 19:33:52 UTC

[nx-cloud]

🤖 Nx Cloud AI Fix Eligible

An automatically generated fix could have helped fix failing tasks for this run, but Self-healing CI is disabled for this workspace. Visit workspace settings to enable it and get automatic fixes in future runs.

_{To disable these notifications, a workspace admin can disable them in workspace settings.}

---

View your CI Pipeline Execution ↗ for commit 14d2a65

Command	Status	Duration	Result
nx run-many --target=build --all	❌ Failed	3s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-01-13 20:18:04 UTC

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (kl-gmt-1451-logical-props@1abd01c). Learn more about missing BASE report.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@                     Coverage Diff                      @@
##             kl-gmt-1451-logical-props    #3234   +/-   ##
============================================================
  Coverage                             ?   89.09%           
============================================================
  Files                                ?      236           
  Lines                                ?     4309           
  Branches                             ?     1478           
============================================================
  Hits                                 ?     3839           
  Misses                               ?      462           
  Partials                             ?        8           

Flag	Coverage Δ
pull-request	89.09% <ø> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[codecademydev]

📬 Published Alpha Packages:

@codecademy/gamut@68.0.1-alpha.d8b528.0
@codecademy/gamut-icons@9.54.3-alpha.d8b528.0
@codecademy/gamut-illustrations@0.58.3-alpha.d8b528.0
@codecademy/gamut-kit@0.6.580-alpha.d8b528.0
@codecademy/gamut-patterns@0.10.22-alpha.d8b528.0
@codecademy/gamut-styles@17.11.3-alpha.d8b528.0
@codecademy/gamut-tests@5.2.20-alpha.d8b528.0
@codecademy/styleguide@79.0.1-alpha.d8b528.0
@codecademy/variance@0.25.3-alpha.d8b528.0

[github-actions]

🚀 Styleguide deploy preview ready!

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

[LinKCoding]

Turns out that variant() was caching the CSS object created and thus not switching between logical and physical properties even after setting useLogicalProperties as false.

This was found downstream in createCss and also also for the MockGamutProvider