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>
❌ 48 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
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 (gamut-sandbox PR #34) to gamut-styles: an OKLCH palette and 43 semantic roles, emitted as static
tokens.css, DTCG 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 moves them.Color system
gamut-styles/src/colorSystem— the generator, ported from the sandbox: a brand's hues in, a palette (8 slots × 11 grades) and 43 roles × 2 modes out.validate:tokenschecks parity with the sandbox (88 rungs, every role) and every contrast guarantee.colorSystem/contentModes.ts— which mode's content sits on each palette color, decided at build time. Matches whatBackgroundpicked at runtime on all 90 colors.colorSystem/migration.ts— design's old → new map and per-component slots (sandbox4b73c2a), checked for every brand: 32 aliases mapped once, 200 text and icon pairings clear their tier.Outputs
scripts/build-tokens.ts— writestokens.css(OKLCH), the same CSS as a string (tokensCss.ts), DTCG JSON andvalues.tsintosrc/tokens/generated(checked in). Refuses to emit if any 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. Carriestokens.cssastokensCss, andGamutProviderinjects it as an Emotion global, so React apps get the colors without loading a file (useTokens={false}opts out). The static file is for pages without React or Emotion. Also carriescontentModes.typings/theme.d.ts,GamutProvider,AssetProvider— gamut is typed against and defaults toskillsoftTheme.Background— readstheme.contentModesinstead of running polished's contrast math; polished is the fallback for the old themes.ColorMode,globals/Reboot—roleOrasks for the new role name and falls back to the old one, so the old themes keep working.remoteAssets/fonts.ts— fixes the skillsoft theme loading core's 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, aborder-defaultfloating border..storybook— a "Skillsoft (color spike)" theme option.GamutProviderinjectstokens.cssonly for that theme, so the old themes are unaffected.styleguide— Foundations/Color system/CSS contract: plain-CSS modes, CSS-only surfaces, gamut components inside a CSS-only dark subtree.Tooling
Three new gamut-styles devDependencies. All run at build time only: the generated files are checked in, and none of the three is in
dist.culori— the generator's color math:style-dictionary(pinned 5.7.0; the repo's 7-day package age gate blocks 5.7.1) — turns the DTCG files intotokens.css. A custom format adds the mode-block lines (color-scheme,color,--color-background-current) and the--gradient-*variables, andoutputReferenceskeeps roles asvar(--color-palette-…)references. It only formats our own DTCG; a small hand-written emitter could replace it later.jiti— runs the TypeScript scripts (build:tokens,validate:tokens) directly, without a compile step, so they can import the generator fromsrc/colorSystem.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→ 117 tests pass.--color-palette-primary-800computes to anoklch(...)value.main(core doesn't loadtokens.css).🤖 Generated with Claude Code