feat(borderColors): adding semantic and colormode compatible colors for borderColor

[LinKCoding]

Overview

Add semantic border colors to colormode

PR Checklist

• Related to designs: https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=441-33&m=dev
• Related to JIRA ticket: GM-861
• I have run this code to verify it works
• 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

Note:
'navy', 'navy-800', 'secondary', and 'text' are the same. So borderColors that used any of these named colors got updated to border-primary.

see: https://github.com/Codecademy/gamut/blob/main/packages/gamut-styles/src/variables/colors.ts#L44
and: https://github.com/Codecademy/gamut/blob/main/packages/gamut-styles/src/themes/core.ts#L75-L76

same idea for other named colors like text-secondary ==> border-secondary.
and text-disabled ==> border-disabled.

Gamut testing instructions:

1. Go to the preview
2. Go to the Colormode page
3. Look over the table to see that border-primary, border-secondary, border-tertiary, and border-disabled have been added for both light and dark mode.
4. Check out some components to see that the styling has been applied, e.g.: card, progressbar, the AboutHeader/ComponentHeader on any story.
5. check over some components that use the border: 1 or border: 2 shorthand, e.g. Badge (tertiary)

Mono/Portal-App testing instructions:

1. Visit the preview
2. Checkover some components to see that their borders are updated, below are some examples to checkover
3. Catalog page's hubspotlight (the box that has "Prepare for Top IT Certifications"
4. Catalog page's cards
5. Pricing page's FAQ section, the list items
6. Feel free to check more!

Monolith/Codecademy testing instructions:

1. Visit the preview
2. check that updated components have their border colors updated,, below are some examples to checkover:
3. the SVGs and radio selections in Appearance Settings
4. Feel free to check more (there's not much tho in monolith tbh)

PR Links and Envs

Repository	PR Link	PR Env
Monolith	Monolith PR	Monolith Env
Portal	Portal Link	Portal Env

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 44f1e75.

---

☁️ Nx Cloud last updated this comment at 2025-01-14 15:21:01 UTC

[aresnik11]

Everything looks good and works great!!!

[codecademydev]

📬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]

[codecademydev]

🚀 Styleguide deploy preview ready!

https://678680f2576c8799def705b8--gamut-preview.netlify.app

Deploy Logs