[LinKCoding]

Overview

Introduces a shared z-index scale so stacking order across Gamut components is consistent, with an ESLint rule and docs to keep raw z-index values out of new code.

• Adds zIndexes in packages/gamut-styles/src/variables/zIndexes.ts (exported from variables/index.ts) and wires it into the core theme (themes/core.ts) and variables/elements.ts. Theme snapshots are updated.
• Updates the variance config (gamut-styles/src/variance/config.ts, variance/src/types/config.ts) so zIndex accepts theme scale keys and raw values.
• Migrates components from hardcoded z-index values to the scale: Anchor, BarChart GridLines, BodyPortal, Box, Button, DataList EmptyRows, DatePicker calendar, Flyout, List/TableHeader, Menu, Overlay, PatternBackdrop, Popover, PopoverContainer, ProgressBar, Tabs, Tip (Inline/Preview), Toaster, and Typography/Text.
• Adds isolation: isolate in places where stacking contexts needed containing.
• Updates the SelectDropdown default z-index and menuPortal styles, and the z-index type for SelectDropdown.
• Adds the no-raw-z-index rule to eslint-plugin-gamut (with tests), and enables it in recommended.ts.
• Adds unit tests for BodyPortal and the SelectDropdown menuPortal.
• Adds a z-index foundations docs page (gamut-docs), plus updates to the design tokens, ESLint rules, system props, and foundations index pages.
• Adds Storybook stories for z-index in Positioning.stories.tsx, and updates the SelectDropdown and InfoTip stories and the DataList/DataTable docs.
• Rewrites the gamut-z-index agent skill and updates related skills (gamut-modal, gamut-select-dropdown, gamut-review, gamut-datalist, gamut-datatable, gamut-component-first, gamut-menu, gamut-system-props, gamut-writing).

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. (npx nx test eslint-plugin-gamut)
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

[pkg-pr-new]

Open in StackBlitz

@skillsoft/eslint-plugin-gamut

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

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

@skillsoft/gamut

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

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

@skillsoft/gamut-agent-tools

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

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

@skillsoft/gamut-icons

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

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

@skillsoft/gamut-illustrations

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

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

@skillsoft/gamut-patterns

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

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

@skillsoft/gamut-styles

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

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

@skillsoft/gamut-tests

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

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

@skillsoft/variance

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

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

commit: 6d10377

[codecov]

Codecov Report

❌ Patch coverage is 96.15385% with 2 lines in your changes missing coverage. Please review.
⚠️ Please upload report for BASE (main@b3b7251). Learn more about missing BASE report.
✅ 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      #11   +/-   ##
=======================================
  Coverage        ?   91.35%           
=======================================
  Files           ?      396           
  Lines           ?     6642           
  Branches        ?     2187           
=======================================
  Hits            ?     6068           
  Misses          ?      565           
  Partials        ?        9           

Flag	Coverage Δ
pull-request	91.35% <96.15%> (?)

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.