[LinKCoding]

Overview

This change is ported from changes made in gamut, see:
Codecademy/gamut#3441

Card hover animations now use the border radius of the active theme, so switching themes updates the radius instead of keeping the one computed from the static core scale.

• useCardElevation (packages/gamut/src/Card/styles.tsx) takes the Card's borderRadius token and reads borderRadii from useTheme(). String tokens resolve through the theme's scale, and other strings pass through. Responsive or function values resolve to undefined, because framer-motion needs a concrete value to animate.
• Card (packages/gamut/src/Card/index.tsx) passes the token to the hook and drops its own static lookup and the borderRadii import.
• Card.test.tsx checks that borderRadius resolves from the active theme for coreTheme, percipioTheme and lxStudioTheme.

PR Checklist

• Related to designs:
• Related to JIRA ticket: GMT-1817
• Changeset added (or empty changeset if no release)
• 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
• Package previews from this PR are passing end-to-end tests in all relevant consuming repositories

Testing Instructions

Don't make me tap the sign.

1. Open the Card stories in Storybook with the default (core) theme and hover an interactive Card. Note the corner radius (md is 4px).
2. Switch to a theme with a different radius scale (e.g. LX Studio) and hover the same Card. Check that the radius follows the new theme.
3. Set a different borderRadius token (e.g. lg, xl) on an interactive Card and repeat the theme switch. Check that the radius updates each time.
4. Check the patternLeft, patternRight and outline shadow variants on hover. The radius should stay correct while the shadow animates.
5. Run yarn jest packages/gamut/src/Card and confirm the tests pass.

PR Links and Envs

Repository	PR Link
Monolith	Monolith PR
Mono	Mono PR

[pkg-pr-new]

Open in StackBlitz

@skillsoft/eslint-plugin-gamut

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/eslint-plugin-gamut@74

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/eslint-plugin-gamut@74.tgz

@skillsoft/gamut

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut@74

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut@74.tgz

@skillsoft/gamut-agent-tools

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-agent-tools@74

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-agent-tools@74.tgz

@skillsoft/gamut-codemods

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-codemods@74

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-codemods@74.tgz

@skillsoft/gamut-icons

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-icons@74

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-icons@74.tgz

@skillsoft/gamut-illustrations

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-illustrations@74

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-illustrations@74.tgz

@skillsoft/gamut-patterns

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-patterns@74

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-patterns@74.tgz

@skillsoft/gamut-styles

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-styles@74

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-styles@74.tgz

@skillsoft/gamut-tests

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-tests@74

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-tests@74.tgz

@skillsoft/variance

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/variance@74

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/variance@74.tgz

commit: 8b7bec9

[codecov]

Codecov Report

❌ Patch coverage is 50.00000% with 3 lines in your changes missing coverage. Please review.
⚠️ Please upload report for BASE (main@9a616af). Learn more about missing BASE report.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
packages/gamut/src/Card/index.tsx	0.00%	2 Missing ⚠️
packages/gamut/src/Card/styles.tsx	75.00%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main      #74   +/-   ##
=======================================
  Coverage        ?   79.66%           
=======================================
  Files           ?      296           
  Lines           ?     6644           
  Branches        ?     2269           
=======================================
  Hits            ?     5293           
  Misses          ?     1342           
  Partials        ?        9           

Flag	Coverage Δ
pull-request	79.66% <50.00%> (?)

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

☔ View full report in Codecov by Harness.
📢 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.