[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-codemods

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

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-codemods@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: ceae7ff

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (main@a105316). Learn more about missing BASE report.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@           Coverage Diff           @@
##             main      #51   +/-   ##
=======================================
  Coverage        ?   86.67%           
=======================================
  Files           ?      410           
  Lines           ?     7454           
  Branches        ?     2404           
=======================================
  Hits            ?     6461           
  Misses          ?      985           
  Partials        ?        8           

Flag	Coverage Δ
pull-request	86.67% <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.

[dreamwasp]

Draft repro story for this bug (Storybook: Foundations/ColorMode/Alias Background Bug): #65