feat(gamut-styles)!: rebuild admin, platform and lxStudio as brands; skillsoftTheme replaces percipioTheme by dreamwasp · Pull Request #58 · Codecademy/skillsoft-gamut

dreamwasp · 2026-10-29T14:40:19Z

Overview

Rebuilds adminTheme, platformTheme and lxStudioTheme as brands of the generated color system, so every theme defines every color role. Without this, those themes lose their colors as soon as components move onto roles (#54). percipioTheme is removed: skillsoftTheme, the new default from #52, replaces it.

Brands

colorSystem/brands/{admin,platform,lxStudio}.ts: each slot takes its hue from what the old theme rendered in that job, including what it inherited from core. Navy and beige aren't pinned (design, 2026-10-29): pinned, they carried far more chroma than the generated surfaces beside them.
- admin: Original Codecademy with a blue-500 primary.
- platform: Original Codecademy on a blue-0 page, which stays pinned.
- lxStudio: sapphire, its own success green, everything else from core. Only its near-white page is pinned; its yellow is generated, and its dark primary stays sapphire.
Admin and platform share Original Codecademy's pins, yellow dark primary and gradient through coreFamilyOverrides, but not its transparent shadow-ambient.
The two-color gradient pairs primary with accent-alt for every brand with a yellow accent, the same change design asked for on Original Codecademy.

Themes

themes/{admin,platform,lxStudio}.ts: built with createBrandTheme. Fonts, weights and lxStudio's radii are unchanged. Elevation is the soft shadow drawn in the shadow roles (design's sandbox, df33b47); only Original Codecademy keeps the hard offset.
createBrandTheme takes borderRadii and initialMode. platformTheme starts in dark mode and adds its editor-* code editor colors with their old values, declared only by its own GamutProvider.
percipioTheme, the PercipioTheme type, the percipio brand, its Storybook theme option and its Foundations page are removed. skillsoftTheme keeps Percipio's fonts, font weights and resting shadow, with colors generated from the Skillsoft brand's hues.

Checks and tests

The styling contract test only reads the token blocks of the brand it tests. New tests cover platform's dark start and editor colors, lxStudio's radii, every brand's elevation, and that only Original Codecademy makes shadow-ambient transparent.

What to look at

Status separation is reported, not enforced. Like Original Codecademy, these keep the old themes' own status colors.
tokens.css grows from 30 KB to 55 KB raw, or 3.6 to 4.2 KB gzipped, because every brand's palette ships to every app.
Not carried over: lxStudio's interface on hyper (no interface role) and old hover shades (hover grades are design's).

PR Checklist

Related to designs: gamut-sandbox PR fix: update spinner to match cc gamut #34 (stacey/color-tokens-v2)
Related to JIRA ticket: GMT-1825
Version plan added/updated (.changeset/color-system-legacy-brands.md)
I have run this code to verify it works
This PR includes unit tests for the code change
This PR includes testing instructions for the code change

Testing Instructions

yarn workspace @skillsoft/gamut-styles build:tokens: no diff in src/tokens/generated/.
yarn workspace @skillsoft/gamut-styles validate:tokens: every check passes for all five brands.
npx jest -c packages/gamut-styles/jest.config.ts packages/gamut-styles: 274 tests pass.
In Storybook, switch the theme to Admin, Platform and LX Studio on a story that uses roles (Molecules/Alert). Colors render in both modes, and Platform starts dark.

🤖 Generated with Claude Code

…s brands Each old theme becomes a brand of the generated color system, so every theme defines every role and components on roles work under all of them. - Hues come from what the old theme rendered in each job, including what it inherited from core. Page backgrounds, text and yellow are pinned. Percipio and lxStudio keep core's yellow accent and dark mode. - Fonts, weights, elevation and lxStudio's radii are unchanged. createBrandTheme takes `borderRadii` and `initialMode`; platform starts in dark mode and adds its editor-* colors with their old values. - The two-color gradient pairs primary with accent-alt for every brand with a yellow accent, as design asked for Original Codecademy. - validate-tokens treats a polished rounding tie as agreement with the content-mode table and reports it (percipio primary-600). - The styling contract test only reads the blocks of the brand it tests. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

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

Design feedback on the comparison page (2026-10-29): pinned navy-800 carries much more chroma than the generated surfaces beside it. As for Original Codecademy (#52), lxStudio uses the generated step at navy's hue. Admin and platform inherit Original Codecademy's pins, so they follow; platform's blue-0 and the near-white pages are nearly achromatic and stay. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

dreamwasp

Fix from design feedback on the brand comparison page (2026-10-29).

dreamwasp · 2026-10-29T16:11:16Z

+ * reads it) and core's dark mode, primary yellow included. Old lxStudio has
+ * no second accent, so `accent-alt` stays on the gamut default (sandbox D4).
+ *
+ * Navy isn't pinned, as for Original Codecademy: pinned, it carries much


Design feedback (2026-10-29): the pinned navy at neutral-dark-1100 looked out of place next to the generated surfaces. Same fix as Original Codecademy in #52: navy isn't pinned, and the generated step at its hue is used. Admin and platform pick this up through Original Codecademy's overrides. The near-white pages (#FAFBFC, platform's blue-0) and percipio's #222325 are nearly achromatic, so they stay pinned.

- percipioTheme, the PercipioTheme type and the percipio brand are removed, with its Storybook theme option and Foundations page. The Percipio fonts and elevation stay, since skillsoftTheme and lxStudioTheme use them. - lxStudio's yellow is generated rather than pinned; only its near-white page stays pinned, and its dark primary stays sapphire. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

…-legacy-brands - admin, platform and lxStudio take the soft elevation drawn in the shadow roles; only Original Codecademy keeps the hard offset (design's sandbox, df33b47: the hard offset is the Codecademy theme's only). - Original Codecademy's overrides split into coreFamilyOverrides (the pins, the yellow dark primary, the gradient), which admin and platform share, and its own transparent shadow-ambient, which they don't. - Tokens regenerated; theme snapshots updated for the shadow roles. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

dreamwasp

Design's sandbox update, 2026-11-03 (df33b47), merged in from #52. Notes on the lines below.

dreamwasp · 2026-11-04T13:49:09Z

+  name: 'admin',
+  fontFamily,
+  fontWeight,
+  elevation: softElevation,


Design's sandbox update, 2026-11-03: the hard offset shadow is for the Codecademy theme only, so admin, platform and lxStudio take the soft shadow drawn in shadow-key and shadow-ambient. Before this, their coreElevation read shadow-primary, which brand themes don't define, so their shadows rendered undefined.

dreamwasp · 2026-11-04T13:49:09Z

+ * primary with accent-alt instead of the yellow accent, so it reads blue to
+ * violet rather than blue to yellow (design, Stacey, 2026-10-28).
+ */
+export const coreFamilyOverrides: BrandOverrides = {


Admin and platform spread Original Codecademy's overrides, which would also have made their shadow-ambient transparent and dropped half of the soft shadow. The shared pins now live in coreFamilyOverrides; the transparent ambient layer is Original Codecademy's alone. brandElevation.test.ts checks that only Original Codecademy overrides it.

… cass-gmt-1825-color-legacy-brands

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

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

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

…gacy-brands

… cass-gmt-1825-color-legacy-brands

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

… cass-gmt-1825-color-legacy-brands # Conflicts: # .changeset/color-system-brands.md # 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__/fontLoading.test.tsx # 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/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 # packages/gamut-styles/src/tokens/generated/tokens.css # packages/gamut-styles/src/tokens/generated/tokensCss.ts # packages/gamut/src/Alert/__tests__/Alert.test.tsx

dreamwasp mentioned this pull request Oct 29, 2026

feat(gamut)!: move components onto color roles #54

Draft

6 tasks done

dreamwasp and others added 2 commits October 29, 2026 12:04

Merge branch 'cass-gmt-1825-color-brands' into cass-gmt-1825-color-le…

dd90133

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

dreamwasp mentioned this pull request Oct 29, 2026

feat(gamut-styles)!: brands, overrides and Original Codecademy on the color system #52

Draft

6 of 7 tasks

dreamwasp commented Oct 29, 2026

View reviewed changes

dreamwasp mentioned this pull request Oct 29, 2026

docs(gamut-docs): add the color system concept page #59

Draft

2 of 6 tasks

dreamwasp and others added 2 commits November 4, 2026 08:46

dreamwasp commented Nov 4, 2026

View reviewed changes

Merge remote-tracking branch 'origin/cass-gmt-1825-color-brands' into…

aea6fd2

… cass-gmt-1825-color-legacy-brands

dreamwasp added a commit that referenced this pull request Nov 4, 2026

Merge #58 (design's sandbox update, df33b47) into cass-gmt-1825-color…

9dfdd52

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

chore(gamut-styles): changeset says skillsoftTheme replaces percipioT…

c0cec9f

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

dreamwasp changed the title ~~feat(gamut-styles)!: rebuild admin, platform, percipio and lxStudio as brands~~ feat(gamut-styles)!: rebuild admin, platform and lxStudio as brands; skillsoftTheme replaces percipioTheme Nov 4, 2026

Merge cass-gmt-1825-color-brands into cass-gmt-1825-color-legacy-brands

b9789a9

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

dreamwasp mentioned this pull request Nov 4, 2026

chore: color stack preview (do not merge) #60

Closed

dreamwasp added 2 commits November 4, 2026 11:19

Merge branch 'cass-gmt-1825-color-brands' into cass-gmt-1825-color-le…

06ad077

…gacy-brands

Merge remote-tracking branch 'origin/cass-gmt-1825-color-brands' into…

fef0319

… cass-gmt-1825-color-legacy-brands

dreamwasp mentioned this pull request Nov 5, 2026

feat(gamut-brand)!: one tokens.css per brand, and white-label tooling #66

Draft

5 of 6 tasks

refactor: use the singular --color- prefix for color variables

09e0187

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

dreamwasp mentioned this pull request Nov 10, 2026

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

Draft

Navigation Menu

Repository navigation

feat(gamut-styles)!: rebuild admin, platform and lxStudio as brands; skillsoftTheme replaces percipioTheme - #58

feat(gamut-styles)!: rebuild admin, platform and lxStudio as brands; skillsoftTheme replaces percipioTheme#58
dreamwasp wants to merge 12 commits into
cass-gmt-1825-color-brandsfrom
cass-gmt-1825-color-legacy-brands

dreamwasp commented Oct 29, 2026 •

edited

Loading

Uh oh!

dreamwasp left a comment

Uh oh!

dreamwasp Oct 29, 2026

Uh oh!

dreamwasp left a comment

Uh oh!

dreamwasp Nov 4, 2026

Uh oh!

dreamwasp Nov 4, 2026

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

dreamwasp commented Oct 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

PR Checklist

Testing Instructions

Uh oh!

dreamwasp left a comment

Choose a reason for hiding this comment

Uh oh!

dreamwasp Oct 29, 2026

Choose a reason for hiding this comment

Uh oh!

dreamwasp left a comment

Choose a reason for hiding this comment

Uh oh!

dreamwasp Nov 4, 2026

Choose a reason for hiding this comment

Uh oh!

dreamwasp Nov 4, 2026

Choose a reason for hiding this comment

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

dreamwasp commented Oct 29, 2026 •

edited

Loading