[dreamwasp]

Overview

Fixes <Background bg="primary"> on core painting dark mode's yellow on a light page. Background passed the alias to ColorMode, which set --color-background-current: var(--color-primary) on the same element that redefines --color-primary for the flipped mode. Any alias bg that flips the mode did the same. It now passes the palette color the alias resolves to in the outer mode, which is the same in every mode.

Bug fixes

• gamut-styles/src/Background.tsx — bg={trueColor} instead of bg={bg}.
• gamut-styles/src/__tests__/Background.test.tsx — every alias in every theme and mode (372 cases): --color-background-current is the alias's palette color in the outer mode.

---

PR Checklist

• Related to designs: N/A
• Related to JIRA ticket: GMT-1825
• 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 for the code change
• Package previews from this PR are passing end-to-end tests in all relevant consuming repositories

Testing Instructions

1. yarn nx test gamut-styles → 449 tests pass. The 372 new alias cases (every alias, five themes, both modes) all fail without the fix: on core light, bg="primary" writes var(--color-primary), which resolves to yellow-500 in the flipped mode.
2. yarn nx test gamut → 1761 tests pass.
3. Storybook, Core, light mode: render <Background bg="primary">. The box is hyper (#3A10E5), not yellow.
4. grep -rn "<Background bg=\"" packages/gamut/src for alias bgs in gamut itself; each should still look right in both modes.

Conflicts with #50 on Background.tsx (one line). Whichever lands second takes bg={trueColor}.

🤖 Generated with Claude Code

[pkg-pr-new]

Open in StackBlitz

@skillsoft/eslint-plugin-gamut

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

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

@skillsoft/gamut

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

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

@skillsoft/gamut-agent-tools

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

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

@skillsoft/gamut-icons

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

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

@skillsoft/gamut-illustrations

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

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

@skillsoft/gamut-patterns

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

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

@skillsoft/gamut-styles

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

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

@skillsoft/gamut-tests

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

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

@skillsoft/variance

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

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

commit: bb9748f

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 88.90%. Comparing base (74156ac) to head (bb9748f).
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main      #51      +/-   ##
==========================================
+ Coverage   88.71%   88.90%   +0.18%     
==========================================
  Files         355      388      +33     
  Lines        6149     6514     +365     
  Branches     1987     2126     +139     
==========================================
+ Hits         5455     5791     +336     
- Misses        684      713      +29     
  Partials       10       10              

Flag	Coverage Δ
main	?
pull-request	88.90% <100.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.