added z-index soft scale

[LinKCoding]

Overview

Introduces a semantic z-index scale for Gamut so components stack predictably instead of relying on scattered magic numbers.

• Adds a new zIndexes token scale (packages/gamut-styles/src/variables/zIndexes.ts) with values spaced by 100 — underlay, base, foreground, floating, appBar, flyout, modal, popover, topmost — resolving to CSS vars (e.g. var(--zIndexes-modal)).
• Wires the zIndex system prop to the new scale (scale: 'zIndexes') while adding an allowRawValue escape hatch to the variance Prop config so raw numeric/global values (e.g. zIndex={550}) are still accepted for deliberate in-between cases.
• Adds a companion isolation system prop so components can establish a local stacking context (isolation: 'isolate') without needing a position change.
• Adds a new no-raw-z-index ESLint rule (packages/eslint-plugin-gamut) that flags raw numeric zIndex values in style objects and JSX props, and enables it in the recommended config.
• Migrates existing components off raw z-index numbers onto the new tokens, including Overlay/Modal, Flyout, Popover/PopoverContainer, Menu, SelectDropdown, Tabs, Tip (PreviewTip/shared), Toaster, List/TableHeader, DataList EmptyRows, BodyPortal, PatternBackdrop, ProgressBar, Typography/Text, Anchor, BarChart GridLines, and DatePicker calendar elements.
• Updates BodyPortal's default z-index to the floating token and adds isolation, with new tests (BodyPortal.test.tsx).
• Updates SelectDropdown's menu portal default z-index and adds coverage (SelectDropdown.test.tsx).
• Adds a new Storybook "ZIndex" foundations page and updates the "Positioning" docs/stories and the "ESLint rules" docs page to cover the new scale and lint rule.
• Updates the gamut-z-index agent skill (and related gamut-review, gamut-component-first, etc. skills) to document the new scale and rule.
• Adds a changeset (minor bump) across @skillsoft/eslint-plugin-gamut, @skillsoft/gamut, @skillsoft/gamut-agent-tools, @skillsoft/gamut-styles, and @skillsoft/variance.

PR Checklist

• Related to designs:
• Related to JIRA ticket: GMT-308
• Version plan added/updated (or not needed)
• 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

Don't make me tap the sign.

1. In the SelectDropdown story/docs page, open the dropdown and confirm the menu renders above surrounding content (not clipped by any overflow: hidden ancestor) and closes/selects correctly.
2. Visit the new Foundations/ZIndex styleguide page and confirm the token table renders and matches zIndexes.ts (underlay through topmost).
3. Run the eslint-plugin-gamut test suite (no-raw-z-index.test.ts) and confirm a raw zIndex={2} in a sample component is flagged, and zIndexes.foreground is not.
4. Open a Popover/Modal/Dialog story and confirm they still open, close, and stack correctly relative to page content after the ref fixes.
5. ...
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 823d46a

Command	Status	Duration	Result
nx run-many --target=verify --parallel=3 --all	✅ Succeeded	5s	View ↗
nx run-many --target=build --all	✅ Succeeded	47s	View ↗

💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗

---

☁️ Nx Cloud last updated this comment at 2026-10-05 19:46:11 UTC

[codecov]

Codecov Report

❌ Patch coverage is 91.66667% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 90.84%. Comparing base (8767ae7) to head (cef14b4).
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
packages/gamut/src/Tip/PreviewTip/elements.tsx	66.66%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3397      +/-   ##
==========================================
- Coverage   91.33%   90.84%   -0.49%     
==========================================
  Files         407      277     -130     
  Lines        6840     5920     -920     
  Branches     2226     2014     -212     
==========================================
- Hits         6247     5378     -869     
+ Misses        584      533      -51     
  Partials        9        9              

Flag	Coverage Δ
main	?
pull-request	90.84% <91.66%> (?)

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.

[codecademydev]

📬 Published Alpha Packages:

Package	Version	npm	Diff
@codecademy/gamut	73.6.3-alpha.e6625d.0	npm	diff
@codecademy/gamut-icons	10.2.1-alpha.e6625d.0	npm	diff
@codecademy/gamut-illustrations	1.1.1-alpha.e6625d.0	npm	diff
@codecademy/gamut-kit	3.0.26-alpha.e6625d.0	npm	diff
@codecademy/gamut-patterns	1.1.1-alpha.e6625d.0	npm	diff
@codecademy/gamut-styles	21.2.1-alpha.e6625d.0	npm	diff
@codecademy/gamut-tests	7.1.1-alpha.e6625d.0	npm	diff
@codecademy/variance	1.1.1-alpha.e6625d.0	npm	diff
eslint-plugin-gamut	3.1.1-alpha.e6625d.0	npm	diff

[github-actions]

🚀 Styleguide deploy preview ready!

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