Kl gmt 1704 gamut elevation tokens by LinKCoding · Pull Request #3410 · Codecademy/gamut

LinKCoding · 2026-08-12T16:02:48Z

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

Go to story X
Do something
Do that something in dark mode
Check it with VO
Finish and do a celebratory dance

PR Links and Envs

Repository	PR Link
Monolith	Monolith PR
Mono	Mono PR

nx-cloud · 2026-08-12T16:04:03Z

View your CI Pipeline Execution ↗ for commit 8878e2c

☁️ Nx Cloud last updated this comment at 2026-08-13 13:57:22 UTC

codecov · 2026-08-12T16:11:55Z

❌ 5 Tests Failed:

Tests completed	Failed	Passed	Skipped
1264	5	1259	0

View the top 3 failed test(s) by shortest run time

themes admin - theme shape

Stack Traces | 0.003s run time

Error: expect(received).toMatchSnapshot()

Snapshot name: `themes admin - theme shape 1`

- Snapshot  - 0
+ Received  + 8

@@ -389,10 +389,18 @@
    },
    "elements": {
      "headerHeight": "var(--elements-headerHeight)",
      "headerZ": "var(--elements-headerZ)",
    },
+   "elevation": {
+     "hover-shadow": "-8px 8px 0 0 var(--color-shadow-primary)",
+     "hover-transform": "translate(4px, -4px)",
+     "hoverMirrored-shadow": "8px 8px 0 0 var(--color-shadow-primary)",
+     "hoverMirrored-transform": "translate(-4px, -4px)",
+     "rest-shadow": "0 0 0 0 var(--color-shadow-primary)",
+     "rest-transform": "none",
+   },
    "fontFamily": {
      "accent": ""Suisse", "Apercu", -apple-system, BlinkMacSystemFont,
  "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
  "Helvetica Neue", sans-serif",
      "base": ""Apercu", -apple-system, BlinkMacSystemFont, "Segoe UI",
    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 lxStudio - theme shape

Stack Traces | 0.003s run time

Error: expect(received).toMatchSnapshot()

Snapshot name: `themes lxStudio - theme shape 1`

- Snapshot  - 0
+ Received  + 8

@@ -398,10 +398,18 @@
    },
    "elements": {
      "headerHeight": "var(--elements-headerHeight)",
      "headerZ": "var(--elements-headerZ)",
    },
+   "elevation": {
+     "hover-shadow": "-8px 8px 0 0 var(--color-shadow-primary)",
+     "hover-transform": "translate(4px, -4px)",
+     "hoverMirrored-shadow": "8px 8px 0 0 var(--color-shadow-primary)",
+     "hoverMirrored-transform": "translate(-4px, -4px)",
+     "rest-shadow": "0 0 0 0 var(--color-shadow-primary)",
+     "rest-transform": "none",
+   },
    "fontFamily": {
      "accent": ""Skillsoft Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
  "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
  sans-serif",
      "base": ""Skillsoft Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
    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.004s run time

Error: expect(received).toMatchSnapshot()

Snapshot name: `themes percipio - theme shape 1`

- Snapshot  - 0
+ Received  + 8

@@ -437,10 +437,18 @@
    },
    "elements": {
      "headerHeight": "var(--elements-headerHeight)",
      "headerZ": "var(--elements-headerZ)",
    },
+   "elevation": {
+     "hover-shadow": "0 1px 4px 0 var(--color-shadow-primary), 0 2px 11px 0 var(--color-shadow-secondary)",
+     "hover-transform": "none",
+     "hoverMirrored-shadow": "0 1px 4px 0 var(--color-shadow-primary), 0 2px 11px 0 var(--color-shadow-secondary)",
+     "hoverMirrored-transform": "none",
+     "rest-shadow": "0 1px 4px 0 var(--color-shadow-primary), 0 2px 7px 0 var(--color-shadow-primary)",
+     "rest-transform": "none",
+   },
    "fontFamily": {
      "accent": ""Skillsoft Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
  "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
  sans-serif",
      "base": ""Skillsoft Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
    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.006s run time

Error: expect(received).toMatchSnapshot()

Snapshot name: `themes core - theme shape 1`

- Snapshot  - 0
+ Received  + 8

@@ -389,10 +389,18 @@
    },
    "elements": {
      "headerHeight": "var(--elements-headerHeight)",
      "headerZ": "var(--elements-headerZ)",
    },
+   "elevation": {
+     "hover-shadow": "-8px 8px 0 0 var(--color-shadow-primary)",
+     "hover-transform": "translate(4px, -4px)",
+     "hoverMirrored-shadow": "8px 8px 0 0 var(--color-shadow-primary)",
+     "hoverMirrored-transform": "translate(-4px, -4px)",
+     "rest-shadow": "0 0 0 0 var(--color-shadow-primary)",
+     "rest-transform": "none",
+   },
    "fontFamily": {
      "accent": ""Suisse", "Apercu", -apple-system, BlinkMacSystemFont,
  "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
  "Helvetica Neue", sans-serif",
      "base": ""Apercu", -apple-system, BlinkMacSystemFont, "Segoe UI",
    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.006s run time

Error: expect(received).toMatchSnapshot()

Snapshot name: `themes platform - theme shape 1`

- Snapshot  - 0
+ Received  + 8

@@ -553,10 +553,18 @@
    },
    "elements": {
      "headerHeight": "var(--elements-headerHeight)",
      "headerZ": "var(--elements-headerZ)",
    },
+   "elevation": {
+     "hover-shadow": "-8px 8px 0 0 var(--color-shadow-primary)",
+     "hover-transform": "translate(4px, -4px)",
+     "hoverMirrored-shadow": "8px 8px 0 0 var(--color-shadow-primary)",
+     "hoverMirrored-transform": "translate(-4px, -4px)",
+     "rest-shadow": "0 0 0 0 var(--color-shadow-primary)",
+     "rest-transform": "none",
+   },
    "fontFamily": {
      "accent": ""Suisse", "Apercu", -apple-system, BlinkMacSystemFont,
  "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
  "Helvetica Neue", sans-serif",
      "base": ""Apercu", -apple-system, BlinkMacSystemFont, "Segoe UI",
    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.}

codecademydev · 2026-08-13T13:58:19Z

📬 Published Alpha Packages:

Package	Version	npm	Diff
`@codecademy/gamut`	`72.5.2-alpha.319fdb.0`	npm	diff
`@codecademy/gamut-icons`	`9.57.12-alpha.319fdb.0`	npm	diff
`@codecademy/gamut-illustrations`	`0.58.17-alpha.319fdb.0`	npm	diff
`@codecademy/gamut-kit`	`3.0.15-alpha.319fdb.0`	npm	diff
`@codecademy/gamut-patterns`	`0.10.36-alpha.319fdb.0`	npm	diff
`@codecademy/gamut-styles`	`20.1.1-alpha.319fdb.0`	npm	diff
`@codecademy/gamut-tests`	`6.0.7-alpha.319fdb.0`	npm	diff
`@codecademy/variance`	`0.26.2-alpha.319fdb.0`	npm	diff
`eslint-plugin-gamut`	`2.4.4-alpha.319fdb.0`	npm	diff

github-actions · 2026-08-13T14:00:13Z

🚀 Styleguide deploy preview ready!

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

LinKCoding added 2 commits August 10, 2026 16:02

created elevation scales for respective themes

9ccf5c9

move scale to theme file

e488f5b

LinKCoding added 4 commits August 12, 2026 12:12

update elevation scale and update card styles to use the scale

677f893

go back to separate files for elevation

71aa7fc

update Card styles to use elevation tokens

e0cd7c1

start on doc changes

8878e2c

Navigation Menu

Uh oh!

Kl gmt 1704 gamut elevation tokens - #3410

Kl gmt 1704 gamut elevation tokens#3410
LinKCoding wants to merge 6 commits into
mainfrom
kl-gmt-1704-gamut-elevation-tokens

LinKCoding commented Aug 12, 2026

Uh oh!

nx-cloud Bot commented Aug 12, 2026 •

edited

Loading

Uh oh!

codecov Bot commented Aug 12, 2026 •

edited

Loading

Uh oh!

codecademydev commented Aug 13, 2026

Uh oh!

github-actions Bot commented Aug 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

LinKCoding commented Aug 12, 2026

Overview

PR Checklist

Testing Instructions

PR Links and Envs

Uh oh!

nx-cloud Bot commented Aug 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov Bot commented Aug 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ 5 Tests Failed:

Uh oh!

codecademydev commented Aug 13, 2026

Uh oh!

github-actions Bot commented Aug 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

nx-cloud Bot commented Aug 12, 2026 •

edited

Loading

codecov Bot commented Aug 12, 2026 •

edited

Loading