feat: Add border related logical props

[LinKCoding]

Overview

• 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
• Updated Stories related to border related props

PR Checklist

• Related to designs:
• Related to JIRA ticket: GMT-1510
• 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 Foundations/System/Props/Border in Storybook
2. Use the LogicalProps toggle in the toolbar to switch between "Logical" and "Physical" modes
3. Inspect the rendered elements in each example to verify:

• In Logical mode: Properties like border-inline-start, border-block-end-width, border-start-start-radius are used
• In Physical mode: Properties like border-left, border-bottom-width, border-top-left-radius are used

4. Repeat for Foundations/System/Props/Color to verify border color props
5. Verify the TokenTable shows the correct properties based on the selected mode
6. 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 f7c2f59

---

☁️ Nx Cloud last updated this comment at 2026-02-06 19:46:30 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.

[codecademydev]

📬 Published Alpha Packages:

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

[github-actions]

🚀 Styleguide deploy preview ready!

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