Kl gmt 1628 dep colors beta test

.github/workflows/publish-alpha.yml

@@ -27,6 +27,8 @@ jobs:
     runs-on: ubuntu-22.04
     timeout-minutes: 30
     steps:
+      - uses: actions/checkout@v4
+
       - uses: ./.github/actions/prerelease-publish
         with:
           node-auth-token: ${{ secrets.NODE_AUTH_TOKEN }}

.nx/version-plans/version-plan-1778852866762.md

@@ -0,0 +1,11 @@
+---
+gamut-illustrations: patch
+gamut-patterns: patch
+gamut-styles: major
+gamut-icons: patch
+gamut-tests: patch
+gamut-kit: major
+gamut: major
+---
+
+Remove deprecated colors from gamut-styles

packages/gamut-icons/CHANGELOG.md

@@ -1,3 +1,16 @@
+## 9.57.5 (2026-05-14)
+
+### 🧱 Updated Dependencies
+
+- Updated gamut-styles to 18.0.0
+- Updated gamut-tests to 6.0.1
+
+## 9.57.4 (2026-05-04)
+
+### 🧱 Updated Dependencies
+
+- Updated gamut-tests to 6.0.0
+
 ## 9.57.3 (2026-04-29)
 
 ### 🧱 Updated Dependencies

packages/gamut-icons/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@codecademy/gamut-icons",
   "description": "Icon library for codecademy.com",
-  "version": "9.57.3",
+  "version": "9.57.5",
   "author": "Codecademy <dev@codecademy.com>",
   "dependencies": {
-    "@codecademy/gamut-styles": "17.14.0",
+    "@codecademy/gamut-styles": "18.0.0",
     "@codecademy/variance": "0.26.1"
   },
   "files": [

packages/gamut-illustrations/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.58.11 (2026-05-14)
+
+### 🧱 Updated Dependencies
+
+- Updated gamut-styles to 18.0.0
+
 ## 0.58.10 (2026-04-29)
 
 ### 🧱 Updated Dependencies

packages/gamut-illustrations/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@codecademy/gamut-illustrations",
   "description": "Illustrations library for Codecademy",
-  "version": "0.58.10",
+  "version": "0.58.11",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "bugs": "https://github.com/Codecademy/gamut/issues",
   "dependencies": {
-    "@codecademy/gamut-styles": "17.14.0",
+    "@codecademy/gamut-styles": "18.0.0",
     "classnames": "^2.2.5"
   },
   "files": [

packages/gamut-kit/CHANGELOG.md

@@ -1,3 +1,46 @@
+## 0.6.599 (2026-05-20)
+
+### 🧱 Updated Dependencies
+
+- Updated gamut to 68.6.1
+
+## 0.6.598 (2026-05-14)
+
+### 🧱 Updated Dependencies
+
+- Updated gamut-illustrations to 0.58.11
+- Updated gamut-patterns to 0.10.30
+- Updated gamut-styles to 18.0.0
+- Updated gamut-icons to 9.57.5
+- Updated gamut-tests to 6.0.1
+- Updated gamut to 68.6.0
+
+## 0.6.597 (2026-05-08)
+
+### 🧱 Updated Dependencies
+
+- Updated gamut to 68.5.1
+
+## 0.6.596 (2026-05-04)
+
+### 🧱 Updated Dependencies
+
+- Updated gamut-icons to 9.57.4
+- Updated gamut-tests to 6.0.0
+- Updated gamut to 68.5.0
+
+## 0.6.595 (2026-05-04)
+
+### 🧱 Updated Dependencies
+
+- Updated gamut to 68.4.1
+
+## 0.6.594 (2026-05-04)
+
+### 🧱 Updated Dependencies
+
+- Updated gamut to 68.4.0
+
 ## 0.6.593 (2026-04-29)
 
 ### 🧱 Updated Dependencies

packages/gamut-kit/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@codecademy/gamut-kit",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "0.6.593",
+  "version": "0.6.599",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
-    "@codecademy/gamut": "68.3.0",
-    "@codecademy/gamut-icons": "9.57.3",
-    "@codecademy/gamut-illustrations": "0.58.10",
-    "@codecademy/gamut-patterns": "0.10.29",
-    "@codecademy/gamut-styles": "17.14.0",
-    "@codecademy/gamut-tests": "5.3.4",
+    "@codecademy/gamut": "68.6.1",
+    "@codecademy/gamut-icons": "9.57.5",
+    "@codecademy/gamut-illustrations": "0.58.11",
+    "@codecademy/gamut-patterns": "0.10.30",
+    "@codecademy/gamut-styles": "18.0.0",
+    "@codecademy/gamut-tests": "6.0.1",
     "@codecademy/variance": "0.26.1",
     "component-test-setup": "^0.3.1"
   },

packages/gamut-patterns/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.10.30 (2026-05-14)
+
+### 🧱 Updated Dependencies
+
+- Updated gamut-styles to 18.0.0
+
 ## 0.10.29 (2026-04-29)
 
 ### 🧱 Updated Dependencies

packages/gamut-patterns/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@codecademy/gamut-patterns",
   "description": "Pattern library for Codecademy",
-  "version": "0.10.29",
+  "version": "0.10.30",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "bugs": "https://github.com/Codecademy/gamut/issues",
   "dependencies": {
-    "@codecademy/gamut-styles": "17.14.0",
+    "@codecademy/gamut-styles": "18.0.0",
     "@codecademy/variance": "0.26.1",
     "classnames": "^2.2.5"
   },

packages/gamut-styles/CHANGELOG.md

@@ -1,3 +1,13 @@
+# 18.0.0 (2026-05-14)
+
+### ⚠️ Breaking Changes
+
+- Updates LXStudio theme to new guidelines ([#3341](https://github.com/Codecademy/gamut/pull/3341))
+
+### ❤️ Thank You
+
+- cassie spain @dreamwasp
+
 ## 17.14.0 (2026-04-29)
 
 ### 🚀 Features

packages/gamut-styles/README.md

@@ -1,23 +1,19 @@
 # Gamut Styles
 
-Base SCSS for Codecademy
+Design tokens, Emotion themes, and system props for the Gamut design system.
 
-## Variables/
+`@codecademy/gamut-styles` is the styling layer behind Gamut components. Wrap your app in `GamutProvider` to supply a theme; import tokens, system props, and helpers from the package entry (`src/index.ts`).
 
-This folder houses all shared SCSS style variables.
-It also contains a JavaScript file with color variables.
+**`variables/`** — Raw tokens (colors, spacing, typography, breakpoints, etc.) used to build themes.
 
-## Core/
+**`themes/`** — Composed Emotion themes. `coreTheme` (exported as `theme`) is the default; `platform`, `admin`, `lxStudio`, and `percipio` extend it for other contexts.
 
-This folder contains a base stylesheet for the app.
-This should be imported **once** in your application.
+**`variance/`** — System props and CSS-in-JS helpers for styled components.
 
-## Utils/
+Also exports color-mode utilities (`ColorMode`, `Background`), global styles, Emotion cache setup, and assorted styling helpers under `globals/`, `cache/`, `styles/`, and `utilities/`.
 
-This folder contains Sass functions (pure utilities with no stylesheet output values) and mixins (outputs CSS)
-to be used as needed both in Gamut and across the Codecademy app.
+```tsx
+import { GamutProvider, theme } from '@codecademy/gamut-styles';
 
-The `utils.scss` and `core.scss` just import the index files from their respective folders, to make the syntax to import them from elsewhere easier, e.g.:
-
-`@use "~@codecademy/gamut-styles/utils";`
-`@use "~@codecademy/gamut-styles/core";`
+<GamutProvider theme={theme}>{/* app */}</GamutProvider>;
+```

packages/gamut-styles/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut-styles",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "17.14.0",
+  "version": "18.0.0",
   "author": "Jake Hiller <jake@codecademy.com>",
   "dependencies": {
     "@codecademy/variance": "0.26.1",

packages/gamut-styles/src/__tests__/AssetProvider.test.tsx

@@ -13,36 +13,45 @@ jest.mock('../utilities/fontUtils', () => ({
   getFonts: require('./fontUtilsMock').getFontsMock,
 }));
 
-jest.mock('../remoteAssets/fonts', () => ({
-  webFonts: {
-    core: [
-      {
-        filePath: 'https://www.codecademy.com/gamut/apercu-regular-pro',
-        extensions: ['woff2', 'woff'],
-        name: 'Apercu',
-      },
-      {
-        filePath: 'https://www.codecademy.com/gamut/apercu-bold-pro',
-        extensions: ['woff2', 'woff'],
-        name: 'Apercu',
-        weight: 'bold',
-      },
-    ],
-    percipio: [
-      {
-        filePath: 'https://www.codecademy.com/gamut/roboto-regular',
-        extensions: ['woff2', 'woff'],
-        name: 'Roboto',
-      },
-      {
-        filePath: 'https://www.codecademy.com/gamut/roboto-bold',
-        extensions: ['woff2', 'woff'],
-        name: 'Roboto',
-        weight: 'bold',
-      },
-    ],
-  },
-}));
+jest.mock('../remoteAssets/fonts', () => {
+  const percipio = [
+    {
+      filePath: 'https://www.codecademy.com/gamut/SkillsoftText-Regular',
+      extensions: ['woff2', 'woff'],
+      name: 'Skillsoft Text',
+    },
+    {
+      filePath: 'https://www.codecademy.com/gamut/roboto-regular',
+      extensions: ['woff2', 'woff'],
+      name: 'Roboto',
+    },
+    {
+      filePath: 'https://www.codecademy.com/gamut/roboto-bold',
+      extensions: ['woff2', 'woff'],
+      name: 'Roboto',
+      weight: 'bold',
+    },
+  ];
+  return {
+    webFonts: {
+      core: [
+        {
+          filePath: 'https://www.codecademy.com/gamut/apercu-regular-pro',
+          extensions: ['woff2', 'woff'],
+          name: 'Apercu',
+        },
+        {
+          filePath: 'https://www.codecademy.com/gamut/apercu-bold-pro',
+          extensions: ['woff2', 'woff'],
+          name: 'Apercu',
+          weight: 'bold',
+        },
+      ],
+      percipio,
+      lxStudio: percipio,
+    },
+  };
+});
 
 const mockGetFonts = getFontsMock;
 

packages/gamut-styles/src/__tests__/fontLoading.test.tsx

@@ -10,24 +10,33 @@ jest.mock('../utilities/fontUtils', () => ({
   getFonts: require('./fontUtilsMock').getFontsMock,
 }));
 
-jest.mock('../remoteAssets/fonts', () => ({
-  webFonts: {
-    core: [
-      {
-        filePath: 'https://www.codecademy.com/gamut/apercu-regular-pro',
-        extensions: ['woff2', 'woff'],
-        name: 'Apercu',
-      },
-    ],
-    percipio: [
-      {
-        filePath: 'https://www.codecademy.com/gamut/roboto-regular',
-        extensions: ['woff2', 'woff'],
-        name: 'Roboto',
-      },
-    ],
-  },
-}));
+jest.mock('../remoteAssets/fonts', () => {
+  const percipio = [
+    {
+      filePath: 'https://www.codecademy.com/gamut/SkillsoftText-Regular',
+      extensions: ['woff2', 'woff'],
+      name: 'Skillsoft Text',
+    },
+    {
+      filePath: 'https://www.codecademy.com/gamut/roboto-regular',
+      extensions: ['woff2', 'woff'],
+      name: 'Roboto',
+    },
+  ];
+  return {
+    webFonts: {
+      core: [
+        {
+          filePath: 'https://www.codecademy.com/gamut/apercu-regular-pro',
+          extensions: ['woff2', 'woff'],
+          name: 'Apercu',
+        },
+      ],
+      percipio,
+      lxStudio: percipio,
+    },
+  };
+});
 
 const mockGetFonts = getFontsMock;