[dreamwasp]

Overview

Moves the rest of the gamut-docs site onto the generated color system. #59 added the Color system page; the older pages still described the old aliases (text, background, primary), the Core theme and palette names like navy and beige. This is the last PR in the color stack.

Pages rewritten

• concepts/color-modes.md: roles instead of aliases, modes as data-color-mode attributes, and how a brand and a mode combine.
• foundations/themes.md: the five brand themes, skillsoftTheme as the default, the shared SkillsoftTheme type, and coreTheme kept only until the move to roles is done.
• foundations/design-tokens.md: roles vs palette colors, --color-* custom properties, and elevation drawn in shadow-key and shadow-ambient.
• guides/supporting-dark-mode.md: roles, and Background choosing its content mode from the build-time table.
• guides/theming-your-app.md: passing a brand theme to GamutProvider, with role-based samples.
• guides/creating-a-custom-theme.md: replaces the hand-built createTheme palette with building a brand with @skillsoft/gamut-brand. It covers defineBrand, overrides, the CLI (--watch and --check), createBrandTheme, types and previewing in Storybook. The override example was run through generateBrand and passes.

Smaller fixes

• Code samples use roles instead of old names: installation (and SkillsoftTheme for the Emotion theme type), build your first page, prop groups, compose and variants, best practices and the ESLint rule examples.
• components/containers/card.mdx documents default and brand, which replace the color variants, and the interactive shadow. Its story embeds pointed at atoms-card--* ids that no longer exist; they now use containers-card--*.
• The button pages and BarChart no longer say "navy".
• concepts/color-system.md drops its note that Color modes still describes the old names.

The site's own colors

src/styles/gamut-core-theme.css hand-copied old Core's navy, hyper and beige into Starlight's variables. It's now gamut-theme.css, and loads @skillsoft/gamut-styles/tokens.css first. Each Starlight variable points at the palette color its Gamut role uses in that mode, so the site follows the Skillsoft brand.

Starlight switches modes with data-theme, not data-color-mode, so the roles' mode blocks don't apply and the mapping is per mode in the file. Starlight's cascade layers come after Gamut's, so its own color-scheme and base styles still win.

Not in this PR

• The gamut plugin pages still list percipio as a --theme value. That's the plugin's own flag, so it changes with the plugin.
• The Storybook theme pages (Foundations → Theme) are styleguide content, not this site.

Stacked on #63, with #59 merged in.

---

PR Checklist

• Related to designs:
• Related to JIRA ticket: GMT-1825
• Version plan added/updated (docs only; gamut-docs is private)
• 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

1. npx nx build gamut-docs: 154 pages build.
2. npx nx dev gamut-docs, then switch the site between light and dark. The chrome uses Skillsoft's paper, navy and blue instead of Core's beige, navy and violet.
3. Read Color modes, Themes, Design tokens, Supporting dark mode, Theming your app and Creating a custom theme. Check that no page names text, background, primary, navy, beige or hyper as colors.
4. On Card, the story embeds load.

🤖 Generated with Claude Code