Skip to content

added z-index soft scale#3397

Draft
LinKCoding wants to merge 8 commits into
mainfrom
kl-gmt-308-zindex
Draft

added z-index soft scale#3397
LinKCoding wants to merge 8 commits into
mainfrom
kl-gmt-308-zindex

Conversation

@LinKCoding

Copy link
Copy Markdown
Contributor

Overview

PR Checklist

  • Related to designs:
  • Related to JIRA ticket: [ABC-123]
  • 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. Go to story X
  2. Do something
  3. Do that something in dark mode
  4. Check it with VO
  5. Finish and do a celebratory dance

PR Links and Envs

Repository PR Link
Monolith Monolith PR
Mono Mono PR

@nx-cloud

nx-cloud Bot commented Jul 8, 2026

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit 2b82038


☁️ Nx Cloud last updated this comment at 2026-07-10 20:56:17 UTC

@codecov

codecov Bot commented Jul 8, 2026

Copy link
Copy Markdown

❌ 5 Tests Failed:

Tests completed Failed Passed Skipped
1330 5 1325 0
View the top 3 failed test(s) by shortest run time
themes lxStudio - theme shape
Stack Traces | 0.006s run time
Error: expect(received).toMatchSnapshot()

Snapshot name: `themes lxStudio - theme shape 1`

- Snapshot  - 22
+ Received  + 16

@@ -77,11 +77,11 @@
      "elements": {
        "headerHeight": {
          "base": "4rem",
          "md": "5rem",
        },
-       "headerZ": 400,
+       "headerZ": 300,
      },
      "modes": {
        "dark": {
          "background": "#10162F",
          "background-contrast": "#000000",
@@ -150,21 +150,19 @@
          "text-disabled": "rgba(16,22,47,0.63)",
          "text-secondary": "rgba(16,22,47,0.75)",
        },
      },
      "zIndices": {
-       "appBar": 400,
+       "appBar": 300,
        "base": 0,
-       "flyout": 500,
+       "floating": 200,
+       "flyout": 400,
        "foreground": 100,
-       "modal": 600,
-       "popover": 700,
-       "portal": 200,
-       "toaster": 800,
-       "tooltip": 900,
+       "modal": 500,
+       "popover": 600,
+       "topmost": 700,
        "underlay": -100,
-       "widget": 300,
      },
    },
    "_variables": {
      "mode": {
        "--color-background": "var(--color-white)",
@@ -271,22 +269,20 @@
        "--color-yellow-0": "#FFFAE5",
        "--color-yellow-400": "#CCA900",
        "--color-yellow-500": "#FFD300",
        "--color-yellow-900": "#211B00",
        "--elements-headerHeight": "4rem",
-       "--elements-headerZ": 400,
-       "--zIndices-appBar": 400,
+       "--elements-headerZ": 300,
+       "--zIndices-appBar": 300,
        "--zIndices-base": 0,
-       "--zIndices-flyout": 500,
+       "--zIndices-floating": 200,
+       "--zIndices-flyout": 400,
        "--zIndices-foreground": 100,
-       "--zIndices-modal": 600,
-       "--zIndices-popover": 700,
-       "--zIndices-portal": 200,
-       "--zIndices-toaster": 800,
-       "--zIndices-tooltip": 900,
+       "--zIndices-modal": 500,
+       "--zIndices-popover": 600,
+       "--zIndices-topmost": 700,
        "--zIndices-underlay": -100,
-       "--zIndices-widget": 300,
        "@media only screen and (min-width: 1024px)": {
          "--elements-headerHeight": "5rem",
        },
      },
    },
@@ -546,16 +542,14 @@
      "96": "6rem",
    },
    "zIndices": {
      "appBar": "var(--zIndices-appBar)",
      "base": "var(--zIndices-base)",
+     "floating": "var(--zIndices-floating)",
      "flyout": "var(--zIndices-flyout)",
      "foreground": "var(--zIndices-foreground)",
      "modal": "var(--zIndices-modal)",
      "popover": "var(--zIndices-popover)",
-     "portal": "var(--zIndices-portal)",
-     "toaster": "var(--zIndices-toaster)",
-     "tooltip": "var(--zIndices-tooltip)",
+     "topmost": "var(--zIndices-topmost)",
      "underlay": "var(--zIndices-underlay)",
-     "widget": "var(--zIndices-widget)",
    },
  }
    at .../themes/__tests__/theme.test.ts:14:54
    at Object.<anonymous> (.../jest-each/build/bind.js:81:13)
    at Promise.then.completed (.../jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (.../jest-circus/build/utils.js:231:10)
    at _callCircusTest (.../jest-circus/build/run.js:316:40)
    at async _runTest (.../jest-circus/build/run.js:252:3)
    at async _runTestsForDescribeBlock (.../jest-circus/build/run.js:126:9)
    at async _runTestsForDescribeBlock (.../jest-circus/build/run.js:121:9)
    at async run (.../jest-circus/build/run.js:71:3)
    at async runAndTransformResultsToJestFormat (.../build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at async jestAdapter (.../build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at async runTestInternal (.../jest-runner/build/runTest.js:367:16)
    at async runTest (.../jest-runner/build/runTest.js:444:34)
themes percipio - theme shape
Stack Traces | 0.008s run time
Error: expect(received).toMatchSnapshot()

Snapshot name: `themes percipio - theme shape 1`

- Snapshot  - 22
+ Received  + 16

@@ -90,11 +90,11 @@
      "elements": {
        "headerHeight": {
          "base": "4rem",
          "md": "5rem",
        },
-       "headerZ": 400,
+       "headerZ": 300,
      },
      "modes": {
        "dark": {
          "background": "#10162F",
          "background-contrast": "#000000",
@@ -163,21 +163,19 @@
          "text-disabled": "#AFB6C2",
          "text-secondary": "rgba(34, 35, 37, 0.75)",
        },
      },
      "zIndices": {
-       "appBar": 400,
+       "appBar": 300,
        "base": 0,
-       "flyout": 500,
+       "floating": 200,
+       "flyout": 400,
        "foreground": 100,
-       "modal": 600,
-       "popover": 700,
-       "portal": 200,
-       "toaster": 800,
-       "tooltip": 900,
+       "modal": 500,
+       "popover": 600,
+       "topmost": 700,
        "underlay": -100,
-       "widget": 300,
      },
    },
    "_variables": {
      "mode": {
        "--color-background": "var(--color-white)",
@@ -297,22 +295,20 @@
        "--color-yellow-0": "#FFFAE5",
        "--color-yellow-400": "#CCA900",
        "--color-yellow-500": "#FFD300",
        "--color-yellow-900": "#211B00",
        "--elements-headerHeight": "4rem",
-       "--elements-headerZ": 400,
-       "--zIndices-appBar": 400,
+       "--elements-headerZ": 300,
+       "--zIndices-appBar": 300,
        "--zIndices-base": 0,
-       "--zIndices-flyout": 500,
+       "--zIndices-floating": 200,
+       "--zIndices-flyout": 400,
        "--zIndices-foreground": 100,
-       "--zIndices-modal": 600,
-       "--zIndices-popover": 700,
-       "--zIndices-portal": 200,
-       "--zIndices-toaster": 800,
-       "--zIndices-tooltip": 900,
+       "--zIndices-modal": 500,
+       "--zIndices-popover": 600,
+       "--zIndices-topmost": 700,
        "--zIndices-underlay": -100,
-       "--zIndices-widget": 300,
        "@media only screen and (min-width: 1024px)": {
          "--elements-headerHeight": "5rem",
        },
      },
    },
@@ -583,16 +579,14 @@
      "96": "6rem",
    },
    "zIndices": {
      "appBar": "var(--zIndices-appBar)",
      "base": "var(--zIndices-base)",
+     "floating": "var(--zIndices-floating)",
      "flyout": "var(--zIndices-flyout)",
      "foreground": "var(--zIndices-foreground)",
      "modal": "var(--zIndices-modal)",
      "popover": "var(--zIndices-popover)",
-     "portal": "var(--zIndices-portal)",
-     "toaster": "var(--zIndices-toaster)",
-     "tooltip": "var(--zIndices-tooltip)",
+     "topmost": "var(--zIndices-topmost)",
      "underlay": "var(--zIndices-underlay)",
-     "widget": "var(--zIndices-widget)",
    },
  }
    at .../themes/__tests__/theme.test.ts:14:54
    at Object.<anonymous> (.../jest-each/build/bind.js:81:13)
    at Promise.then.completed (.../jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (.../jest-circus/build/utils.js:231:10)
    at _callCircusTest (.../jest-circus/build/run.js:316:40)
    at async _runTest (.../jest-circus/build/run.js:252:3)
    at async _runTestsForDescribeBlock (.../jest-circus/build/run.js:126:9)
    at async _runTestsForDescribeBlock (.../jest-circus/build/run.js:121:9)
    at async run (.../jest-circus/build/run.js:71:3)
    at async runAndTransformResultsToJestFormat (.../build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at async jestAdapter (.../build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at async runTestInternal (.../jest-runner/build/runTest.js:367:16)
    at async runTest (.../jest-runner/build/runTest.js:444:34)
themes core - theme shape
Stack Traces | 0.014s run time
Error: expect(received).toMatchSnapshot()

Snapshot name: `themes core - theme shape 1`

- Snapshot  - 22
+ Received  + 16

@@ -74,11 +74,11 @@
      "elements": {
        "headerHeight": {
          "base": "4rem",
          "md": "5rem",
        },
-       "headerZ": 400,
+       "headerZ": 300,
      },
      "modes": {
        "dark": {
          "background": "#10162F",
          "background-contrast": "#000000",
@@ -147,21 +147,19 @@
          "text-disabled": "rgba(16,22,47,0.63)",
          "text-secondary": "rgba(16,22,47,0.75)",
        },
      },
      "zIndices": {
-       "appBar": 400,
+       "appBar": 300,
        "base": 0,
-       "flyout": 500,
+       "floating": 200,
+       "flyout": 400,
        "foreground": 100,
-       "modal": 600,
-       "popover": 700,
-       "portal": 200,
-       "toaster": 800,
-       "tooltip": 900,
+       "modal": 500,
+       "popover": 600,
+       "topmost": 700,
        "underlay": -100,
-       "widget": 300,
      },
    },
    "_variables": {
      "mode": {
        "--color-background": "var(--color-white)",
@@ -265,22 +263,20 @@
        "--color-yellow-0": "#FFFAE5",
        "--color-yellow-400": "#CCA900",
        "--color-yellow-500": "#FFD300",
        "--color-yellow-900": "#211B00",
        "--elements-headerHeight": "4rem",
-       "--elements-headerZ": 400,
-       "--zIndices-appBar": 400,
+       "--elements-headerZ": 300,
+       "--zIndices-appBar": 300,
        "--zIndices-base": 0,
-       "--zIndices-flyout": 500,
+       "--zIndices-floating": 200,
+       "--zIndices-flyout": 400,
        "--zIndices-foreground": 100,
-       "--zIndices-modal": 600,
-       "--zIndices-popover": 700,
-       "--zIndices-portal": 200,
-       "--zIndices-toaster": 800,
-       "--zIndices-tooltip": 900,
+       "--zIndices-modal": 500,
+       "--zIndices-popover": 600,
+       "--zIndices-topmost": 700,
        "--zIndices-underlay": -100,
-       "--zIndices-widget": 300,
        "@media only screen and (min-width: 1024px)": {
          "--elements-headerHeight": "5rem",
        },
      },
    },
@@ -535,16 +531,14 @@
      "96": "6rem",
    },
    "zIndices": {
      "appBar": "var(--zIndices-appBar)",
      "base": "var(--zIndices-base)",
+     "floating": "var(--zIndices-floating)",
      "flyout": "var(--zIndices-flyout)",
      "foreground": "var(--zIndices-foreground)",
      "modal": "var(--zIndices-modal)",
      "popover": "var(--zIndices-popover)",
-     "portal": "var(--zIndices-portal)",
-     "toaster": "var(--zIndices-toaster)",
-     "tooltip": "var(--zIndices-tooltip)",
+     "topmost": "var(--zIndices-topmost)",
      "underlay": "var(--zIndices-underlay)",
-     "widget": "var(--zIndices-widget)",
    },
  }
    at .../themes/__tests__/theme.test.ts:14:54
    at Object.<anonymous> (.../jest-each/build/bind.js:81:13)
    at Promise.then.completed (.../jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (.../jest-circus/build/utils.js:231:10)
    at _callCircusTest (.../jest-circus/build/run.js:316:40)
    at async _runTest (.../jest-circus/build/run.js:252:3)
    at async _runTestsForDescribeBlock (.../jest-circus/build/run.js:126:9)
    at async _runTestsForDescribeBlock (.../jest-circus/build/run.js:121:9)
    at async run (.../jest-circus/build/run.js:71:3)
    at async runAndTransformResultsToJestFormat (.../build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at async jestAdapter (.../build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at async runTestInternal (.../jest-runner/build/runTest.js:367:16)
    at async runTest (.../jest-runner/build/runTest.js:444:34)
themes admin - theme shape
Stack Traces | 0.017s run time
Error: expect(received).toMatchSnapshot()

Snapshot name: `themes admin - theme shape 1`

- Snapshot  - 22
+ Received  + 16

@@ -74,11 +74,11 @@
      "elements": {
        "headerHeight": {
          "base": "4rem",
          "md": "5rem",
        },
-       "headerZ": 400,
+       "headerZ": 300,
      },
      "modes": {
        "dark": {
          "background": "#10162F",
          "background-contrast": "#000000",
@@ -147,21 +147,19 @@
          "text-disabled": "rgba(16,22,47,0.63)",
          "text-secondary": "rgba(16,22,47,0.75)",
        },
      },
      "zIndices": {
-       "appBar": 400,
+       "appBar": 300,
        "base": 0,
-       "flyout": 500,
+       "floating": 200,
+       "flyout": 400,
        "foreground": 100,
-       "modal": 600,
-       "popover": 700,
-       "portal": 200,
-       "toaster": 800,
-       "tooltip": 900,
+       "modal": 500,
+       "popover": 600,
+       "topmost": 700,
        "underlay": -100,
-       "widget": 300,
      },
    },
    "_variables": {
      "mode": {
        "--color-background": "var(--color-white)",
@@ -265,22 +263,20 @@
        "--color-yellow-0": "#FFFAE5",
        "--color-yellow-400": "#CCA900",
        "--color-yellow-500": "#FFD300",
        "--color-yellow-900": "#211B00",
        "--elements-headerHeight": "4rem",
-       "--elements-headerZ": 400,
-       "--zIndices-appBar": 400,
+       "--elements-headerZ": 300,
+       "--zIndices-appBar": 300,
        "--zIndices-base": 0,
-       "--zIndices-flyout": 500,
+       "--zIndices-floating": 200,
+       "--zIndices-flyout": 400,
        "--zIndices-foreground": 100,
-       "--zIndices-modal": 600,
-       "--zIndices-popover": 700,
-       "--zIndices-portal": 200,
-       "--zIndices-toaster": 800,
-       "--zIndices-tooltip": 900,
+       "--zIndices-modal": 500,
+       "--zIndices-popover": 600,
+       "--zIndices-topmost": 700,
        "--zIndices-underlay": -100,
-       "--zIndices-widget": 300,
        "@media only screen and (min-width: 1024px)": {
          "--elements-headerHeight": "5rem",
        },
      },
    },
@@ -535,16 +531,14 @@
      "96": "6rem",
    },
    "zIndices": {
      "appBar": "var(--zIndices-appBar)",
      "base": "var(--zIndices-base)",
+     "floating": "var(--zIndices-floating)",
      "flyout": "var(--zIndices-flyout)",
      "foreground": "var(--zIndices-foreground)",
      "modal": "var(--zIndices-modal)",
      "popover": "var(--zIndices-popover)",
-     "portal": "var(--zIndices-portal)",
-     "toaster": "var(--zIndices-toaster)",
-     "tooltip": "var(--zIndices-tooltip)",
+     "topmost": "var(--zIndices-topmost)",
      "underlay": "var(--zIndices-underlay)",
-     "widget": "var(--zIndices-widget)",
    },
  }
    at .../themes/__tests__/theme.test.ts:14:54
    at Object.<anonymous> (.../jest-each/build/bind.js:81:13)
    at Promise.then.completed (.../jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (.../jest-circus/build/utils.js:231:10)
    at _callCircusTest (.../jest-circus/build/run.js:316:40)
    at async _runTest (.../jest-circus/build/run.js:252:3)
    at async _runTestsForDescribeBlock (.../jest-circus/build/run.js:126:9)
    at async _runTestsForDescribeBlock (.../jest-circus/build/run.js:121:9)
    at async run (.../jest-circus/build/run.js:71:3)
    at async runAndTransformResultsToJestFormat (.../build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at async jestAdapter (.../build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at async runTestInternal (.../jest-runner/build/runTest.js:367:16)
    at async runTest (.../jest-runner/build/runTest.js:444:34)
themes platform - theme shape
Stack Traces | 0.027s run time
Error: expect(received).toMatchSnapshot()

Snapshot name: `themes platform - theme shape 1`

- Snapshot  - 22
+ Received  + 16

@@ -94,11 +94,11 @@
      "elements": {
        "headerHeight": {
          "base": "4rem",
          "md": "5rem",
        },
-       "headerZ": 400,
+       "headerZ": 300,
      },
      "modes": {
        "dark": {
          "background": "#10162F",
          "background-contrast": "#000000",
@@ -219,21 +219,19 @@
          "text-disabled": "rgba(16,22,47,0.63)",
          "text-secondary": "rgba(16,22,47,0.75)",
        },
      },
      "zIndices": {
-       "appBar": 400,
+       "appBar": 300,
        "base": 0,
-       "flyout": 500,
+       "floating": 200,
+       "flyout": 400,
        "foreground": 100,
-       "modal": 600,
-       "popover": 700,
-       "portal": 200,
-       "toaster": 800,
-       "tooltip": 900,
+       "modal": 500,
+       "popover": 600,
+       "topmost": 700,
        "underlay": -100,
-       "widget": 300,
      },
    },
    "_variables": {
      "mode": {
        "--color-background": "var(--color-navy-800)",
@@ -383,22 +381,20 @@
        "--color-yellow-0": "#FFFAE5",
        "--color-yellow-400": "#CCA900",
        "--color-yellow-500": "#FFD300",
        "--color-yellow-900": "#211B00",
        "--elements-headerHeight": "4rem",
-       "--elements-headerZ": 400,
-       "--zIndices-appBar": 400,
+       "--elements-headerZ": 300,
+       "--zIndices-appBar": 300,
        "--zIndices-base": 0,
-       "--zIndices-flyout": 500,
+       "--zIndices-floating": 200,
+       "--zIndices-flyout": 400,
        "--zIndices-foreground": 100,
-       "--zIndices-modal": 600,
-       "--zIndices-popover": 700,
-       "--zIndices-portal": 200,
-       "--zIndices-toaster": 800,
-       "--zIndices-tooltip": 900,
+       "--zIndices-modal": 500,
+       "--zIndices-popover": 600,
+       "--zIndices-topmost": 700,
        "--zIndices-underlay": -100,
-       "--zIndices-widget": 300,
        "@media only screen and (min-width: 1024px)": {
          "--elements-headerHeight": "5rem",
        },
      },
    },
@@ -751,16 +747,14 @@
      "96": "6rem",
    },
    "zIndices": {
      "appBar": "var(--zIndices-appBar)",
      "base": "var(--zIndices-base)",
+     "floating": "var(--zIndices-floating)",
      "flyout": "var(--zIndices-flyout)",
      "foreground": "var(--zIndices-foreground)",
      "modal": "var(--zIndices-modal)",
      "popover": "var(--zIndices-popover)",
-     "portal": "var(--zIndices-portal)",
-     "toaster": "var(--zIndices-toaster)",
-     "tooltip": "var(--zIndices-tooltip)",
+     "topmost": "var(--zIndices-topmost)",
      "underlay": "var(--zIndices-underlay)",
-     "widget": "var(--zIndices-widget)",
    },
  }
    at .../themes/__tests__/theme.test.ts:14:54
    at Object.<anonymous> (.../jest-each/build/bind.js:81:13)
    at Promise.then.completed (.../jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (.../jest-circus/build/utils.js:231:10)
    at _callCircusTest (.../jest-circus/build/run.js:316:40)
    at async _runTest (.../jest-circus/build/run.js:252:3)
    at async _runTestsForDescribeBlock (.../jest-circus/build/run.js:126:9)
    at async _runTestsForDescribeBlock (.../jest-circus/build/run.js:121:9)
    at async run (.../jest-circus/build/run.js:71:3)
    at async runAndTransformResultsToJestFormat (.../build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at async jestAdapter (.../build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at async runTestInternal (.../jest-runner/build/runTest.js:367:16)
    at async runTest (.../jest-runner/build/runTest.js:444:34)

To view more test analytics, go to the Test Analytics Dashboard
📋 Got 3 mins? Take this short survey to help us improve Test Analytics.

@LinKCoding LinKCoding force-pushed the kl-gmt-308-zindex branch from c09f2fd to 715f4f0 Compare July 8, 2026 20:19
@codecademydev

Copy link
Copy Markdown
Collaborator

📬 Published Alpha Packages:

Package Version npm Diff
@codecademy/gamut 72.2.5-alpha.6e0ede.0 npm diff
@codecademy/gamut-icons 9.57.11-alpha.6e0ede.0 npm diff
@codecademy/gamut-illustrations 0.58.16-alpha.6e0ede.0 npm diff
@codecademy/gamut-kit 3.0.9-alpha.6e0ede.0 npm diff
@codecademy/gamut-patterns 0.10.35-alpha.6e0ede.0 npm diff
@codecademy/gamut-styles 20.0.3-alpha.6e0ede.0 npm diff
@codecademy/gamut-tests 6.0.6-alpha.6e0ede.0 npm diff
@codecademy/variance 0.26.2-alpha.6e0ede.0 npm diff
eslint-plugin-gamut 2.4.4-alpha.6e0ede.0 npm diff

@github-actions

Copy link
Copy Markdown
Contributor

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants