From d5a88fc7e6fc520000e9cd3ce6be5dc82aba0774 Mon Sep 17 00:00:00 2001 From: Kenny Lin Date: Mon, 11 May 2026 16:48:00 -0400 Subject: [PATCH 1/4] remove interactiveColors --- .../gamut-styles/src/variables/deprecated-colors.ts | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/packages/gamut-styles/src/variables/deprecated-colors.ts b/packages/gamut-styles/src/variables/deprecated-colors.ts index 30594995c0b..82f79e95520 100644 --- a/packages/gamut-styles/src/variables/deprecated-colors.ts +++ b/packages/gamut-styles/src/variables/deprecated-colors.ts @@ -4,18 +4,6 @@ import { corePalette } from './colors'; const { black, white } = corePalette; -/** - * @deprecated - * Using these variables directly is no longer supported. - * - * Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors) - */ - -export const interactiveColors = { - dark: corePalette.hyper, - light: corePalette.yellow, -} as const; - /** * @deprecated * Using these variables directly is no longer supported. From 3028a5fcba8382e458db1d3014b59f7ab844d871 Mon Sep 17 00:00:00 2001 From: Kenny Lin Date: Thu, 14 May 2026 16:33:27 -0400 Subject: [PATCH 2/4] removed deprecated colors --- packages/gamut-styles/README.md | 2 +- .../src/variables/deprecated-colors.ts | 143 ------------------ packages/gamut-styles/src/variables/index.ts | 2 - 3 files changed, 1 insertion(+), 146 deletions(-) delete mode 100644 packages/gamut-styles/src/variables/deprecated-colors.ts diff --git a/packages/gamut-styles/README.md b/packages/gamut-styles/README.md index a90586b56d5..f22feb71a10 100644 --- a/packages/gamut-styles/README.md +++ b/packages/gamut-styles/README.md @@ -5,7 +5,7 @@ Base SCSS for Codecademy ## Variables/ This folder houses all shared SCSS style variables. -It also contains a JavaScript file with color variables. +TypeScript color tokens and palettes live in `variables/colors.ts` and are exposed on themes as `theme.colors` (see `src/themes/`). Legacy `editorColors`, `platformColors`, `swatches`, and the flat deprecated `colors` map were removed from this package—use `corePalette` / `platformPalette` and theme color modes instead. ## Core/ diff --git a/packages/gamut-styles/src/variables/deprecated-colors.ts b/packages/gamut-styles/src/variables/deprecated-colors.ts deleted file mode 100644 index 82f79e95520..00000000000 --- a/packages/gamut-styles/src/variables/deprecated-colors.ts +++ /dev/null @@ -1,143 +0,0 @@ -import { flattenScale } from '@codecademy/variance'; - -import { corePalette } from './colors'; - -const { black, white } = corePalette; - -/** - * @deprecated - * Using these variables directly is no longer supported. - * - * Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors) - */ - -export const editorColors = { - blue: '#83fff5', - deepPurple: '#cc7bc2', - gray: '#939598', - green: '#b4d353', - orange: '#ff8973', - purple: '#b3ccff', - red: '#ea6c8b', - yellow: '#ffe083', -} as const; - -/** - * @deprecated - * Using these variables directly is no longer supported. - * - * Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors) - */ - -export const platformColors = { - mint: { - '500': '#37c3be', - '600': '#2c9c98', - '700': '#217572', - }, - purple: { - '200': '#c3c1d7', - '300': '#a5a1c2', - '400': '#8782ae', - '500': '#69639a', - '600': '#544f7b', - '700': '#3f3b5c', - '800': '#2a283e', - '900': '#15141f', - }, -} as const; - -/** - * @deprecated - * Using these variables directly is no longer supported. - * - * Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors) - */ - -export const swatches = { - beige: { - '0': '#FFF0E5', - }, - blue: { - '0': '#F5FCFF', - '300': '#66C4FF', - '500': '#1557FF', - '800': '#1D2340', - '900': '#10162f', - }, - green: { - '0': '#F5FFE3', - '400': '#AEE938', - '700': '#008A27', - }, - yellow: { - '0': '#FFFAE5', - '400': '#CCA900', - '500': '#FFD300', - }, - pink: { - '0': '#FFF5FF', - '400': '#F966FF', - }, - red: { - '500': '#E91C11', - }, - orange: { - '500': '#FF8C00', - }, - hyper: { - '400': '#5533FF', - '500': '#3A10E5', - }, - gray: { - '0': white, - '100': '#f6f5fa', - '200': '#dddce0', - '300': '#c4c3c7', - '400': '#a2a2a6', - '500': '#828285', - '600': '#646466', - '700': '#4b4b4d', - '800': '#323233', - '900': '#19191a', - }, -} as const; - -/** - * @deprecated - * Using these variables directly is no longer supported. - * - * Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors) - */ - -const trueColors = { - beige: swatches.beige[0], - blue: swatches.blue[500], - green: swatches.green[700], - hyper: swatches.hyper[500], - lightBlue: swatches.blue[300], - lightGreen: swatches.green[400], - navy: swatches.blue[900], - orange: swatches.orange[500], - paleBlue: swatches.blue[0], - paleGreen: swatches.green[0], - palePink: swatches.pink[0], - paleYellow: swatches.yellow[0], - pink: swatches.pink[400], - red: swatches.red[500], - yellow: swatches.yellow[500], - black, - white, -} as const; - -/** - * @deprecated - * Using these variables directly is no longer supported. - * - * Please use [`theme.colors`](https://gamut.codecademy.com/storybook/?path=/docs/foundations-theme--colors#standard-colors) - */ - -export const colors = { - ...flattenScale(swatches), - ...trueColors, -} as const; diff --git a/packages/gamut-styles/src/variables/index.ts b/packages/gamut-styles/src/variables/index.ts index 6a43dc3d8d1..d4f074462ef 100644 --- a/packages/gamut-styles/src/variables/index.ts +++ b/packages/gamut-styles/src/variables/index.ts @@ -5,5 +5,3 @@ export * from './responsive'; export * from './spacing'; export * from './timing'; export * from './typography'; -// Deprecated variables -export * from './deprecated-colors'; From caf7984279b85221e2ff15e7aeed0cba44194119 Mon Sep 17 00:00:00 2001 From: Kenny Lin Date: Fri, 15 May 2026 09:44:17 -0400 Subject: [PATCH 3/4] removed import warning --- packages/gamut-styles/utils/variables/index.js | 8 -------- 1 file changed, 8 deletions(-) delete mode 100644 packages/gamut-styles/utils/variables/index.js diff --git a/packages/gamut-styles/utils/variables/index.js b/packages/gamut-styles/utils/variables/index.js deleted file mode 100644 index 88af9701f32..00000000000 --- a/packages/gamut-styles/utils/variables/index.js +++ /dev/null @@ -1,8 +0,0 @@ -if (process.env.NODE_ENV === 'development') { - // eslint-disable-next-line no-console - console.warn( - 'Importing from `gamut-styles/utils/variables` is now deprecated, please import directly from the gamut-styles package' - ); -} - -export * from '../../dist/variables'; From b44569fb343c752bdff601dfd7fd4045706fda99 Mon Sep 17 00:00:00 2001 From: Kenny Lin Date: Fri, 15 May 2026 09:48:23 -0400 Subject: [PATCH 4/4] add version plan --- .nx/version-plans/version-plan-1778852866762.md | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 .nx/version-plans/version-plan-1778852866762.md diff --git a/.nx/version-plans/version-plan-1778852866762.md b/.nx/version-plans/version-plan-1778852866762.md new file mode 100644 index 00000000000..dd4727a7c45 --- /dev/null +++ b/.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