Skip to content

Color stack preview: rebuilt with the --color- prefix (do not merge) - #73

Draft
dreamwasp wants to merge 148 commits into
mainfrom
cass-gmt-1825-color-preview-rebuild
Draft

dreamwasp wants to merge 148 commits into
mainfrom
cass-gmt-1825-color-preview-rebuild

Conversation

@dreamwasp

@dreamwasp dreamwasp commented Nov 10, 2026 •

Copy link
Copy Markdown
Contributor

Summary

Rebuilds the color stack preview (formerly #60) from the renamed stack, so the @skillsoft/* pkg.pr.new alphas match the current --color-* prefix and main.

Merged, in order: main, cass-gmt-1825-color-system (#50), cass-gmt-1825-color-brands (#52), cass-gmt-1825-color-legacy-brands (#58), cass-gmt-1825-color-components (#54), cass-gmt-1825-color-docs (#59), cass-gmt-1825-color-behavior (#63), cass-gmt-1825-color-white-label (#66), cass-gmt-1825-color-codemod (#53), cass-gmt-1825-color-site (#67).

Not included: #69 (static-styles, a separate draft).

Notes

Testing

  1. npx jest in packages/gamut-styles: 228 tests pass.
  2. npx jest in packages/gamut-brand: 282 tests pass.
  3. npx jest in packages/variance: 104 tests pass.
  4. npx jest in packages/gamut-codemods: 133 tests pass.
  5. npx jest in packages/gamut: 950 tests pass.

🤖 Generated with Claude Code

dreamwasp and others added 30 commits October 20, 2026 10:07
…eset

Adds @skillsoft/gamut-codemods: the CLI (clean-tree guard, --dry, --only,
--no-report, --force), the runner for ast, splice, and file migrations,
the shared helpers (module-string finder, leftovers report, version-range
checks, flat ESLint config detection), the preset registry, and the
fixture harness.

The scope-swap preset has its package map but no migrations yet, so a run
only reports the lines that still name an old package. Each breaking
change lands its migration in its own PR.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…swap

scope-rename swaps @Codecademy/gamut* and eslint-plugin-gamut for their
@SkillSoft names in every module position and in comments. package-json,
mdx-imports, and yarnrc cover dependencies, MDX ESM blocks, and
.yarnrc.yml lists.

@codecademy/gamut-kit has no replacement, so package-json and mf-shared
expand it into the packages it bundled. In Module Federation config that
makes Gamut a real singleton, which the checklist calls out.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ides

moved-exports moves Video and VideoProps from the root to
@Codecademy/gamut/Video (scope-rename then swaps the scope).
markdown-video-overrides adds explicit iframeOverride/videoOverride to
each <Markdown>, since it no longer renders video through Video by
default, and drops the removed skipDefaultOverrides keys. tsconfig-dom
warns about tsconfigs without "dom", which Video used to supply.

On the Gamut side, a Video/package.json stub makes the subpath resolve
under node10, MarkdownVideo no longer passes NaN sizes, and a one-line
<video> is no longer wrapped in a <p>.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ectDropdown elements

Exports formFieldStyles, formFieldPaddingStyles, conditionalStyles,
ButtonBaseProps, HTMLToReactNode, MenuToolTipWrapper, and Menu's list
elements from the root. The list elements and SelectDropdown's option
component are renamed (MenuList*, MenuListButton, IconOptionComponent) so
they don't collide with the public List component and IconOption type.

The deep-imports codemod rewrites known /dist/ paths to the root, keeps
local names across renames, merges into existing imports, and warns on
paths with no public replacement.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
eslint-comments rewrites gamut/ directives to @skillsoft/gamut/, and
eslint-config updates the plugin name, plugin: extends, and rule keys in
legacy .eslintrc files. Under a flat config the prefix is the plugins key,
so eslint-comments skips itself and the checklist explains why.

Also types eslint-plugin-gamut's recommended severities as literals, so the
plugin fits ESLint's Plugin type in a typed flat config.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@skillsoft/gamut ships strict-ESM .mjs. With experimental.esmExternals
off, Next require()s server externals and default imports from
@emotion/styled and react-select break while it collects page data.
next-config is report-only: dropping the flag can take other config with
it, so it warns and adds a checklist item instead of rewriting.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ap-skill

# Conflicts:
#	packages/gamut-codemods/README.md
#	packages/gamut-codemods/src/presets/scope-swap/index.ts
# Conflicts:
#	packages/gamut-codemods/README.md
#	packages/gamut-codemods/src/__tests__/lib.test.ts
#	packages/gamut-codemods/src/presets/scope-swap/index.ts
…p-skill

# Conflicts:
#	packages/gamut-codemods/README.md
#	packages/gamut-codemods/src/__tests__/cli.test.ts
#	packages/gamut-codemods/src/presets/scope-swap/index.ts
The skill works alongside the scope-swap codemod: it reads the warnings,
leftovers, and next steps, and helps with what the codemod can't rewrite.
BREAKING_CHANGES.md lists every change in the move, and
NEXT_EMOTION_INTEROP.md covers the Next.js esmExternals fallback.

Also restores the end-to-end and MDX fixtures that run every migration
together, and fixes the cli.test merge between the sibling branches.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
CodeQL read `migration.match(file)` in cli.ts as String.prototype.match
on a command-line argument and flagged js/regex-injection. Nothing builds
a regex from the path; the method just had the same name.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…migrations

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…migrations

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…migrations

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…migrations

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The package-json warning already names each range that's newer than the
fork point, so the extra next step only repeated it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…rkdown

# Conflicts:
#	packages/gamut-codemods/src/presets/scope-swap/index.ts
# Conflicts:
#	packages/gamut-codemods/src/presets/scope-swap/index.ts
# Conflicts:
#	packages/gamut-codemods/src/presets/scope-swap/index.ts
…swap-skill

# Conflicts:
#	packages/gamut-codemods/src/presets/scope-swap/index.ts
dreamwasp and others added 21 commits November 10, 2026 08:48
The stack emitted --colors-* (the color scale's name) while main uses
--color-*. This restores the singular prefix everywhere: the generator's
Style Dictionary prefix, ColorMode's scale key, the variance package (back to
main), gamut-styles, the Alert and codemod-facing names, and the docs.

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
…ands

# Conflicts:
#	packages/.storybook/preview.ts
#	packages/.storybook/theming/GamutThemeProvider.tsx
… prefix

The codemod emitted --colors-<role>. main and gamut-styles use --color-, so the
rewrite now emits --color-<role> too: the stylesheet rename, the JS var
rewrite, the changeset and the fixtures. A rewritten name is a role, and no
role is also an old alias key, so a second run leaves it alone.

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
Covers the variance createTheme and gamut-styles ColorMode prefixes, the
gamut-brand Style Dictionary prefix, the docs and the regenerated tokens.

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
Covers the variance createTheme and gamut-styles ColorMode prefixes, the
gamut-brand Style Dictionary prefix, the docs site and the regenerated tokens.

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
…review-new

# Conflicts:
#	packages/gamut-styles/src/Background.tsx
#	packages/gamut-styles/src/__tests__/Background.test.tsx
#	packages/gamut/src/Alert/__tests__/Alert.test.tsx
#	packages/gamut/src/Menu/elements.tsx
#	packages/gamut/src/Modals/__tests__/Modal.test.tsx
#	packages/styleguide/src/lib/Molecules/Flyout/Flyout.stories.tsx
#	packages/styleguide/src/lib/Molecules/Menu/Menu.stories.tsx
#	packages/styleguide/src/lib/Molecules/Modals/Modal/Modal.stories.tsx
#	packages/styleguide/src/lib/Molecules/Tabs/Tabs.stories.tsx
#	packages/styleguide/src/lib/Molecules/Tips/InfoTip/InfoTip.stories.tsx
… cass-gmt-1825-color-preview-new

# Conflicts:
#	packages/.storybook/components/Elements/DocsContainer.tsx
#	packages/.storybook/preview.ts
#	packages/.storybook/theming/GamutThemeProvider.tsx
#	packages/gamut-styles/src/__tests__/AssetProvider.test.tsx
#	packages/gamut-styles/src/__tests__/Background.test.tsx
#	packages/gamut-styles/src/__tests__/fontLoading.test.tsx
#	packages/gamut-styles/src/colorSystem/README.md
#	packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap
#	packages/gamut-styles/src/themes/__tests__/theme.test.ts
#	packages/gamut-styles/src/themes/admin.ts
#	packages/gamut-styles/src/themes/index.ts
#	packages/gamut-styles/src/themes/lxStudio.ts
#	packages/gamut-styles/src/themes/platform.ts
… cass-gmt-1825-color-preview-new

# Conflicts:
#	packages/.storybook/preview.ts
#	packages/.storybook/theming/GamutThemeProvider.tsx
#	packages/gamut-brand/src/__tests__/system.test.ts
#	packages/gamut-styles/scripts/build-tokens.ts
#	packages/gamut-styles/scripts/validate-tokens.ts
#	packages/gamut-styles/src/__tests__/stylingContract.test.tsx
#	packages/gamut-styles/src/colorSystem/README.md
#	packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap
#	packages/gamut-styles/src/tokens/generated/tokens.css
#	packages/gamut-styles/src/tokens/generated/tokensCss.ts
…s' into cass-gmt-1825-color-preview-new

# Conflicts:
#	.changeset/color-system-brands.md
#	packages/gamut-brand/src/__tests__/system.test.ts
#	packages/gamut-styles/scripts/build-tokens.ts
#	packages/gamut-styles/scripts/validate-tokens.ts
#	packages/gamut-styles/src/colorSystem/README.md
#	packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap
#	packages/gamut-styles/src/themes/__tests__/brandElevation.test.ts
#	packages/gamut-styles/src/themes/__tests__/theme.test.ts
#	packages/gamut-styles/src/themes/platform.ts
#	packages/gamut-styles/src/tokens/generated/tokens.css
#	packages/gamut-styles/src/tokens/generated/tokensCss.ts
#	packages/gamut/src/Alert/__tests__/Alert.test.tsx
…into cass-gmt-1825-color-preview-new

# Conflicts:
#	.changeset/color-system-brands.md
#	packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap
#	packages/gamut-styles/src/themes/__tests__/theme.test.ts
#	packages/gamut/src/Alert/__tests__/Alert.test.tsx
…ass-gmt-1825-color-preview-new

# Conflicts:
#	packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap
#	packages/gamut-styles/src/themes/__tests__/theme.test.ts
#	packages/gamut/src/Alert/__tests__/Alert.test.tsx
…to cass-gmt-1825-color-preview-new

# Conflicts:
#	packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap
#	packages/gamut-styles/src/themes/__tests__/theme.test.ts
#	packages/gamut/src/Alert/__tests__/Alert.test.tsx
… into cass-gmt-1825-color-preview-new

# Conflicts:
#	.changeset/color-system-brands.md
#	packages/gamut-brand/README.md
#	packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap
#	packages/gamut-styles/src/themes/__tests__/theme.test.ts
#	packages/gamut/src/Alert/__tests__/Alert.test.tsx
@pkg-pr-new

pkg-pr-new Bot commented Nov 10, 2026 •

Copy link
Copy Markdown

Open in StackBlitz

@skillsoft/eslint-plugin-gamut

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

@skillsoft/gamut

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut@73
yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut@73.tgz

@skillsoft/gamut-agent-tools

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

@skillsoft/gamut-brand

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-brand@73
yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-brand@73.tgz

@skillsoft/gamut-codemods

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-codemods@73
yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-codemods@73.tgz

@skillsoft/gamut-icons

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

@skillsoft/gamut-illustrations

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

@skillsoft/gamut-patterns

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

@skillsoft/gamut-styles

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

@skillsoft/gamut-tests

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

@skillsoft/variance

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

commit: 8a4f749

@codecov

codecov Bot commented Nov 10, 2026 •

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 91.93729% with 72 lines in your changes missing coverage. Please review.
✅ Project coverage is 83.11%. Comparing base (4138841) to head (8a4f749).
⚠️ Report is 1 commits behind head on main.
✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
packages/gamut-brand/src/emit.ts 75.90% 20 Missing ⚠️
...gamut-codemods/src/migrations/color-roles/index.ts 90.95% 16 Missing and 1 partial ⚠️
packages/gamut-brand/src/migration.ts 88.00% 11 Missing and 1 partial ⚠️
...es/gamut-codemods/src/presets/color-roles/index.ts 50.00% 11 Missing ⚠️
packages/gamut-brand/src/brand.ts 93.47% 3 Missing ⚠️
...ds/src/migrations/color-roles-stylesheets/index.ts 93.33% 2 Missing ⚠️
packages/gamut-styles/src/Background.tsx 77.77% 2 Missing ⚠️
packages/gamut-styles/src/ColorMode.tsx 85.71% 2 Missing ⚠️
packages/gamut-brand/src/system.ts 98.75% 1 Missing ⚠️
...mut-codemods/src/migrations/color-roles/cssVars.ts 97.29% 1 Missing ⚠️
... and 1 more
Additional details and impacted files
@@            Coverage Diff             @@
##             main      #73      +/-   ##
==========================================
+ Coverage   79.78%   83.11%   +3.32%     
==========================================
  Files         296      459     +163     
  Lines        6643     8621    +1978     
  Branches     2287     2831     +544     
==========================================
+ Hits         5300     7165    +1865     
- Misses       1334     1446     +112     
- Partials        9       10       +1     
Flag Coverage Δ
main ?
pull-request 83.11% <91.93%> (?)

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.

- Restore Menu, Flyout, Modal, and Tabs stories to main's versions; the
  stack's rewrites used @skillsoft/gamut self-imports the lint rule rejects.
  Their port is tracked as a follow-up.
- Sort imports in Alert, AssetProvider, and fontLoading tests.
- Remove the four snapshots for retired themes from theme.test.ts.snap, so
  jest --ci no longer fails on obsolete snapshots.
- yarn dedupe: resolve duplicate call-bind, side-channel, qs, and friends.
- roundTrip.ts: replace the two regexes CodeQL flagged as polynomial ReDoS
  with string splitting, and strip Style Dictionary /** */ notes before
  parsing declarations.

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
const blocks = css.split('}').flatMap((raw) => {
// Style Dictionary puts `/** … */` notes after declarations; without
// stripping them, a note swallows the next declaration's name.
const chunk = raw.replace(/\/\*[\s\S]*?\*\//g, '');
dreamwasp and others added 2 commits November 11, 2026 08:41
action-disabled is a fill token and contrast-exempt; it is not a text
color. Disabled labels and control text now use text-subtle, which
passes contrast on the surface. Fills, tracks and borders stay on
action-disabled. Matches PR 34 (stacey/color-tokens-v2).

Also: ProgressBar Large story expects its two decorative 75% copies
instead of one.

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
CssContract's Surfaces story asserted contrast on raw palette steps that
no role pairs with. Move them to a PaletteFills story with color-contrast
disabled (same a11y.config pattern as SelectDropdown). Surfaces keeps the
six surface roles, which validate:tokens already holds. Corrects the
primary-600 comment: validate:tokens does not report it.

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>

This branch has not been deployed

No deployments
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