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

LinKCoding · 2026-01-13T20:17:17Z

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.

Go to Meta/Logical and physical CSS properties and review the info to be correct and organized well
Go to System/Props/Space and check over the token table and inspect the examples (should be using logical props)
Use the new toolbar button to switch to physical property and re-inspect the example
...
Finish and do a celebratory dance 🎉

PR Links and Envs

Repository	PR Link
Monolith	Monolith PR
Mono	Mono PR

nx-cloud · 2026-01-13T20:18:04Z

View your CI Pipeline Execution ↗ for commit 1f6e194

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

nx-cloud · 2026-01-13T20:18:05Z

🤖 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

…dding

codecov · 2026-01-29T18:25:12Z

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 · 2026-01-29T19:35:05Z

📬 Published Alpha Packages:

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

github-actions · 2026-01-29T19:37:04Z

🚀 Styleguide deploy preview ready!

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

LinKCoding · 2026-01-29T20:18:27Z

packages/gamut/src/List/__tests__/List.test.tsx

    expect(rowEl).toHaveStyle({ columnGap: theme.spacing[40] });
  });

+  // Note: Only testing one mode here since variant() caches styles after first render.


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

working PoC

14d2a65

LinKCoding requested a review from a team as a code owner January 13, 2026 20:17

LinKCoding requested review from aresnik11 and dreamwasp January 13, 2026 20:17

LinKCoding changed the base branch from main to kl-gmt-1451-logical-props January 13, 2026 20:17

LinKCoding marked this pull request as draft January 13, 2026 20:19

LinKCoding added 2 commits January 13, 2026 16:48

fix build and format

5560977

lint fixes

06c6c6c

LinKCoding removed request for aresnik11 and dreamwasp January 14, 2026 18:46

LinKCoding added 18 commits January 14, 2026 13:47

some more refactoring

ced05b1

fix existing test failures

3b6ceed

add test for getPropertyMode

c82eaba

updated gamutprovider to include useLogicalProperties

b41b484

fix failiing tests

a87a22e

more test fixes

fdf51c7

formatted

e52c44f

add logicalprops switcher to toolbar

2b26f40

updated shorthand in margin related CSS properties

c58bb38

fix linting issue re: physical

182e36b

update docs to show logical prop updates to margin related props

594aeb2

updated padding too

45c09ae

updated Usage Guide and clean up

5e7b999

add new file to explain logical and physical properties

7ec0399

update docs for readibility

0d65d1a

formatted and cleaned up

2322842

fix tests and edit MockGamutProvider to use useLogicalProperties

5478544

Merge branch 'kl-gmt-1451-logical-props' into kl-gmt-1508v2-margin-pa…

09696e1

…dding

temp fix for test failure

1f6e194

LinKCoding commented Jan 29, 2026

View reviewed changes

LinKCoding marked this pull request as ready for review January 29, 2026 21:56

LinKCoding requested review from aresnik11 and dreamwasp January 29, 2026 21:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

LinKCoding commented Jan 13, 2026 •

edited

Loading

Uh oh!

nx-cloud bot commented Jan 13, 2026 •

edited

Loading

Uh oh!

nx-cloud bot commented Jan 13, 2026

Uh oh!

codecov bot commented Jan 29, 2026 •

edited

Loading

Uh oh!

codecademydev commented Jan 29, 2026

Uh oh!

github-actions bot commented Jan 29, 2026

Uh oh!

LinKCoding Jan 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

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

Are you sure you want to change the base?

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

Conversation

LinKCoding commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

PR Checklist

Testing Instructions

PR Links and Envs

Uh oh!

nx-cloud bot commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nx-cloud bot commented Jan 13, 2026

🤖 Nx Cloud AI Fix Eligible

Uh oh!

codecov bot commented Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

codecademydev commented Jan 29, 2026

Uh oh!

github-actions bot commented Jan 29, 2026

Uh oh!

LinKCoding Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

LinKCoding commented Jan 13, 2026 •

edited

Loading

nx-cloud bot commented Jan 13, 2026 •

edited

Loading

codecov bot commented Jan 29, 2026 •

edited

Loading