feat: Logical properties

[LinKCoding]

Overview

Updates
Gamut:

• 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
• Added logical properties for border related CSS properties
  • Border: borderX, borderY, borderTop, borderRight, borderBottom, borderLeft
  • Border Width: borderWidthX, borderWidthY, borderWidthTop, borderWidthRight, borderWidthBottom, borderWidthLeft
  • Border Color: borderColorX, borderColorY, borderColorTop, borderColorRight, borderColorBottom, borderColorLeft
  • Border Style: borderStyleX, borderStyleY, borderStyleTop, borderStyleRight, borderStyleBottom, borderStyleLeft
  • Border Radius: borderRadiusLeft, borderRadiusRight, borderRadiusTop, borderRadiusBottom, borderRadiusTopLeft, borderRadiusTopRight, borderRadiusBottomLeft, borderRadiusBottomRight
• Adds a new function to transform to resolve the correct CSS property to use
• Addresses resulting test failures due to mismatched style expectations

Storybook:

• Splits up Props into separate pages each related to their respective collection of props
• Adds a new toolbar tool for switching between logical and physical CSS properties
• Adds a new toolbar tool for switching direction (LTR to RTL and vice versa)
• Adds documentation for useLogicalProperties

PR Checklist

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

Related PRs:

• GamutTheme + Margin + Padding
• Border
• Typography + Layout

Testing Instructions

Don't make me tap the sign.

1. Go to story X
2. Do something
3. Do that something in dark mode
4. Check it with VO
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 f3d0b83

---

☁️ Nx Cloud last updated this comment at 2026-02-09 21:44:04 UTC

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 82.03%. Comparing base (d7c3a3f) to head (f3d0b83).
✅ All tests successful. No failed tests found.

❗ There is a different number of reports uploaded between BASE (d7c3a3f) and HEAD (f3d0b83). Click for more details.

HEAD has 1 upload less than BASE

Flag	BASE (d7c3a3f)	HEAD (f3d0b83)
main	1	0

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3218      +/-   ##
==========================================
- Coverage   89.78%   82.03%   -7.75%     
==========================================
  Files         361       75     -286     
  Lines        5120     1414    -3706     
  Branches     1611      465    -1146     
==========================================
- Hits         4597     1160    -3437     
+ Misses        515      251     -264     
+ Partials        8        3       -5     

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

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.1.0-alpha.4172fd.0
@codecademy/gamut-icons@9.56.0-alpha.4172fd.0
@codecademy/gamut-illustrations@0.58.3-alpha.4172fd.0
@codecademy/gamut-kit@0.7.0-alpha.4172fd.0
@codecademy/gamut-patterns@0.10.22-alpha.4172fd.0
@codecademy/gamut-styles@17.12.0-alpha.4172fd.0
@codecademy/gamut-tests@5.3.0-alpha.4172fd.0
@codecademy/styleguide@79.2.0-alpha.4172fd.0
@codecademy/variance@0.26.0-alpha.4172fd.0

[github-actions]

🚀 Styleguide deploy preview ready!

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