Repository navigation
Conversation
…t (WIP) Builds on the color system spike (gamut-sandbox PR #34; generator at dffd84b, unchanged through 4b73c2a). - tokens.css owns the color values: skillsoftTheme no longer injects the palette, so OKLCH renders through Emotion too. Mode blocks set color-scheme, color and a default --color-background-current. - Content modes decided at build time (colorSystem/contentModes.ts). Background reads theme.contentModes instead of running polished; the table matches the runtime choice on all 90 palette colors. - Design's migration map (sandbox migration.ts at 4b73c2a) ported in place of legacyAliases.ts, with its alias, role and component-slot contrast checks, run for any brand. - Alert follows design's mapping. - ColorMode, Background and Reboot fall back to the old role names, so ColorMode keeps working on every theme. gamut is typed against skillsoftTheme with no legacy names, so the gamut build still fails (284 type errors in 66 files). Findings in Base Camp gamut/color-tokens/. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This was referenced Oct 27, 2026
❌ 44 Tests Failed:
View the top 3 failed test(s) by shortest run time
To view more test analytics, go to the Test Analytics Dashboard |
React apps get the color values without loading tokens.css: the build also
writes it as a string, generated themes carry it as `tokensCss`, and
GamutProvider renders it as an Emotion global, first among its globals.
`useTokens={false}` opts out for pages that load the static file. The
static file stays for pages without React or Emotion. Storybook drops its
own injection outside the test path.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ystem # Conflicts: # yarn.lock
dreamwasp
added a commit
that referenced
this pull request
Nov 4, 2026
…om design's map Design's feedback on the drafts: inputs use surface-raised. The fields already did; an unchecked Checkbox didn't, and a disabled DatePicker never looked disabled (its `:disabled` rule is on a div). Its error ring was the raw string `feedback-error`, so it never drew. The rest comes from an audit against design's component map (sandbox df33b47) and the elevation proposal (sandbox #50): - Field placeholder `text-subtle` (the selector was `&:placeholder`), error a 2px `text-error` outline at rest, `activated` keeps `border-default`; the same in SelectDropdown, whose disabled value is `text-subtle` and whose focused selected option keeps its selected veil. - Checkbox disabled check mark and Disclosure's disabled overline are `surface-raised` knockouts. Radio's disabled ring is `border-default`; its error hover ring is `action-primary`. - FormGroupDescription `text-subtle`, Breadcrumbs separator `text-subtle`, Anchor hover `action-primary-hover` and focus rings `action-primary`. - List: hover is a veil over the row's fill, focus a ring with no fill, the first row's top rule `border-subtle`, the table header rule `border-default`, the scroll shadow `border-subtle`. - Shimmer: `surface-sunken` with a `surface-raised` sweep, no rgba. - The checker pattern (Modal, Toast, PreviewTip, DatePicker calendar) only on Original Codecademy, in `border-subtle`; the calendar gets a `border-subtle` edge. - The Core Theme page says brand themes draw shadows in shadow-key and shadow-ambient. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This was referenced Nov 4, 2026
…spike The generator (src/colorSystem/), its scripts (build-tokens, validate-tokens), the sandbox fixture and the tenant probe are a spike, not shipped API. They move to cass-gmt-1825-color-spike, which is the full tree from this commit's parent. The generated output under src/tokens/generated/ stays here, because the runtime needs it. Removes the build-only dependencies (culori, jiti, style-dictionary). Runtime code imported nothing from colorSystem, only comments, which now point at the spike branch. Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
…5-color-spike" This reverts commit 8c0fcd9.
…nerator The package README covers what ships: the token exports, tokens in the browser, naming and known limits for consumers. The colorSystem README covers the generator: pipeline, commands, what CI checks, and generator gaps. Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
…ystem # Conflicts: # packages/gamut-styles/src/__tests__/Background.test.tsx
dreamwasp
marked this pull request as ready for review
November 9, 2026 19:36
core, admin, platform, lxStudio and percipio are removed. skillsoftTheme is the only theme here; the brand themes built on the generator (originalCodecademy, then admin, platform and lxStudio) come back in the PRs that follow. Storybook's theme toolbar and docs container map to skillsoftTheme only, and the tests that compared old themes now run against skillsoftTheme. Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
dreamwasp
marked this pull request as draft
November 10, 2026 16:24
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Overview
Adds the generated color system from design's sandbox to gamut-styles: an OKLCH palette (8 slots × 11 grades) and 43 semantic roles in light and dark. The output is checked in as static
tokens.css, DTCG-shaped JSON and TS constants. Static CSS owns every color value; the Emotion theme only names them.Draft: gamut doesn't build yet (284 type errors in 66 files), because components still use the old color names. The codemod in #53 migrates them. gamut-styles typechecks with no errors.
Color system
gamut-styles/src/colorSystem: the generator. A brand's hues go in; the palette and roles come out.validate:tokenschecks parity with design's reference fixture (88 rungs, every role) and the contrast guarantees.contentModes.ts: which mode's content sits on each palette color, decided at build time. Matches whatBackgroundpicked at runtime on all 90 colors.migration.ts: design's old → new color map and per-component slots. Checked for every brand: 32 aliases mapped once, 200 text and icon pairings clear their tier.packages/gamut-styles/src/colorSystem/README.md: the generator's pipeline, commands, CI coverage and known gaps.packages/gamut-styles/README.md: the color tokens for consumers (exports, tokens in the browser, naming, known limits).Outputs
src/tokens/generated/:tokens.css, the same CSS as a string (tokensCss.ts), the DTCG-shaped JSON files andvalues.ts, all checked in.build:tokenswrites them and refuses to emit if a check fails.@skillsoft/gamut-styles/tokens,/tokens.css,/tokens/*.tokens.json: new exports. Thetokensentry has no React or Emotion dependency.Theme and runtime
themes/skillsoft.ts: the new default theme, built from the generated values. It carriestokens.cssastokensCss, andGamutProviderinjects it through Emotion by default (useTokens={false}opts out).typings/theme.d.ts,GamutProvider,AssetProvider: gamut is typed against and defaults toskillsoftTheme.Background: readstheme.contentModeswhen the theme has it, and keeps polished's contrast math as the fallback for themes without it.ColorMode,globals/Reboot:roleOrasks for the new role name and falls back to the old one, for brand themes that define old names.remoteAssets/fonts.ts: the skillsoft theme loads its own fonts instead of Percipio's.Components and Storybook
gamut/src/Alert: design's mapping: status tints, an icon color per variant, the brand gradient on Feature, and aborder-defaultfloating border..storybook: the theme toolbar offers Skillsoft only.GamutProviderinjectstokens.cssfor it.styleguide: Foundations / Color system / CSS contract. Plain-CSS modes, CSS-only surfaces, and gamut components inside a CSS-only dark subtree.Dependencies
Three gamut-styles devDependencies, used only by the build scripts. None of them is in
dist:culori: the generator's color math (OKLCH and sRGB conversion, the gamut boundary, WCAG contrast, ΔE 2000, color-blindness simulation).style-dictionary(pinned at 5.7.0): renderstokens.cssfrom the DTCG files.jiti: runs the TypeScript scripts (build:tokens,validate:tokens) without a compile step.Stacked PRs: #52 builds on this, and #66 moves the generator into
@skillsoft/gamut-brandso a team can build its own brand.PR Checklist
Testing Instructions
yarn workspace @skillsoft/gamut-styles validate:tokens→ "all checks pass".yarn workspace @skillsoft/gamut-styles build:tokens, thengit status→ no changes (the checked-in output is current).yarn nx test gamut-styles→ 206 tests in 13 suites pass.