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

.changeset/color-roles-component-behavior.md

@@ -0,0 +1,9 @@
+---
+'@skillsoft/gamut': minor
+---
+
+Component behavior from design's component map that the role swap didn't cover.
+
+- A selected DataList or DataTable row takes the `state-selected` veil over its fill, with the hover veil on top when hovered. `ListRow` takes an `isSelected` prop for the same tint.
+- Table rows are `surface-raised`, with `surface-sunken` stripes, instead of transparent.
+- ProgressBar's label at `large` and `xl` sizes is two-tone: `text-inverse` on the bar and `text-default` where it runs onto the track, so a short bar's label stays readable.

.changeset/color-roles-components.md

@@ -0,0 +1,18 @@
+---
+'@skillsoft/gamut': minor
+---
+
+Components use the color system's roles, following design's component map.
+
+- **Breaking:** every color name a component uses is a role (`surface-raised`, `text-subtle`, `action-primary`, `state-hover`, …). Code that passes old names (`background`, `primary`, `navy`, `text-disabled`) to gamut props has to move; the `color-roles` codemod in `@skillsoft/gamut-codemods` does most of it.
+- **Breaking:** old `coreTheme` doesn't define the roles, so components lose their colors on it. Use `originalCodecademyTheme`, its rebuild, or `skillsoftTheme`. Admin, platform and lxStudio are rebuilt as brands and keep their names.
+- Buttons map onto the action families: `secondary` is `action-neutral`, `interface` merges into primary, labels on fills are `text-inverse`, every variant takes the `action-primary` focus ring, and StrokeButton and TextButton hover and press with veils.
+- Fields are `surface-raised` with a `border-default` edge; field hover is `border-strong`, so blue only means focus. Floating surfaces (menus, popovers, tooltips, toasts, the SelectDropdown menu) are `surface-raised` with a `border-subtle` hairline and the theme's raised shadow. A checked Radio is `action-primary`.
+- **Breaking:** Card's `variant` is `default` or `brand`. `white`, `beige` and `navy` become `default` (`surface-raised`); `yellow` and `hyper` become `brand`, the featured card on the brand gradient. Every card has a `border-subtle` hairline. An interactive card has the raised shadow at rest, and the `state-hover` veil with the raised-hover shadow on hover; its border no longer changes. A card that isn't interactive has no shadow.
+- CTAButton's shadow comes from the theme's elevation: the soft raised shadow on most brands, old core's hard offset on Original Codecademy.
+- Modal and Flyout's scrim is `shadow-scrim`, and Flyout's panel has a `border-subtle` inner edge.
+- ProgressBar's blue and yellow bars are `text-default` on a sunken track. Block Tabs follow the page's mode instead of forcing dark.
+- `Tag`: navigation and suggestion tags have no fill of their own, so they sit on the surface they're on. Disabled tags drop the `action-disabled` fill and take the disabled ink, keeping their edge.
+- Every input-like control fills with `surface-raised`, an unchecked Checkbox included. Placeholders are `text-subtle`, an error is a 2px `text-error` outline at rest, and an edited field keeps its `border-default` outline. A disabled DatePicker field now looks disabled, and its error ring draws. FormGroup descriptions are `text-subtle`.
+- The checker pattern behind Modal, Toast, PreviewTip and the DatePicker calendar is drawn only on Original Codecademy, in `border-subtle`. Themes from before the color system keep it.
+- Smaller fixes from design's map: link hover is `action-primary-hover`, link focus rings are `action-primary`, the Breadcrumbs separator is `text-subtle`, List row hover is a veil over the row's fill, focus is a ring without a fill, and Shimmer is a `surface-sunken` base with a `surface-raised` sweep.

.changeset/color-system-brands.md

@@ -0,0 +1,16 @@
+---
+'@skillsoft/gamut-styles': minor
+'@skillsoft/variance': minor
+'@skillsoft/gamut': minor
+---
+
+Brands on the generated color system.
+
+- **Breaking:** `tokens.css` puts its rules in `@layer tokens`, with `reset, base, tokens, recipes, utilities` declared first.
+- Adds `originalCodecademyTheme`, today's core colors, fonts and hard-offset elevation rebuilt on the generated system. `tokens.css` carries a palette block per brand under `[data-brand]`.
+- A brand can override a palette step with an exact hex, or point a role at a different step (and, optionally, a different alpha) in one mode. Overrides go through the same contrast checks as generated values.
+- `ColorMode` on generated themes sets `data-color-mode` and `data-brand` instead of injecting every role variable.
+- Fixes `Background` painting the flipped mode's color for an alias `bg`, such as `bg="primary"`.
+- `Alert`: General uses `surface-brand-subtle`. Gradient alerts size their gradient to the alert, not the viewport. Status alerts (error, success, notice) put their status ink on the message, and a floating Alert's border takes the same ink. The CTA follows the Alert's color mode instead of always rendering dark.
+- Original Codecademy no longer pins navy and beige; their generated steps are used as is. Yellow stays exact.
+- **Breaking:** the `backdrop` role is renamed `shadow-scrim`, and two shadow roles are added: `shadow-key` and `shadow-ambient`, the two layers every elevation shadow is drawn in. Brand themes' `elevation` now uses them, so shadows no longer render `undefined`: Skillsoft gets the soft raised shadow, and Original Codecademy keeps old core's hard offset with a transparent `shadow-ambient`.

.changeset/color-system-legacy-brands.md

@@ -0,0 +1,11 @@
+---
+'@skillsoft/gamut-styles': minor
+---
+
+Rebuild `adminTheme`, `platformTheme` and `lxStudioTheme` as brands of the generated color system, so they define every color role.
+
+- Each brand takes its colors from what the old theme rendered in each job, including what it inherited from core, such as lxStudio's yellow accent. Admin and platform inherit Original Codecademy's pins (yellow exact; navy and beige not pinned). lxStudio pins only its near-white page; its yellow is generated, and its dark mode keeps the sapphire primary instead of core's yellow one.
+- Fonts, weights and lxStudio's radii are unchanged. Elevation is the soft shadow drawn in the shadow roles; only Original Codecademy keeps the hard offset. `platformTheme` still starts in dark mode and keeps its `editor-*` code editor colors with their old values.
+- The two-color brand gradient pairs primary with accent-alt for every brand with a yellow accent.
+- **Visual change:** the rebuilt themes aren't pixel-identical to the old ones; role grades come from design's system. Old color names that only these themes had are gone.
+- **Breaking:** `percipioTheme` and the `PercipioTheme` type are removed. `skillsoftTheme`, the new default, replaces it: it keeps Percipio's fonts, font weights and resting shadow, with colors generated from the Skillsoft brand's hues. Use `skillsoftTheme` wherever an app used `percipioTheme`.

.changeset/color-system-tokens.md

@@ -0,0 +1,12 @@
+---
+'@skillsoft/gamut-styles': minor
+'@skillsoft/gamut': minor
+---
+
+Add the generated OKLCH color system.
+
+- `@skillsoft/gamut-styles/tokens`, `/tokens.css` and `/tokens/*.tokens.json` export an OKLCH palette and 43 semantic roles in light and dark, as static CSS, DTCG JSON and TS constants. The `tokens` entry has no React or Emotion dependency.
+- `skillsoftTheme` is the new default theme. Its color values come from `tokens.css`, which `GamutProvider` injects; pass `useTokens={false}` if the page loads `@skillsoft/gamut-styles/tokens.css` itself. The static file also works without React or Emotion.
+- `Background` picks the content mode from a build-time table on generated themes, instead of measuring contrast at runtime.
+- The core, admin, platform, lxStudio and percipio themes are removed from this release. Brand themes built on the generator (originalCodecademy and the others) return in the PRs that follow.
+- `Alert` follows design's mapping: status tints, an icon color per variant, and the brand gradient on Feature.

.changeset/color-system-white-label.md

@@ -0,0 +1,14 @@
+---
+'@skillsoft/gamut-brand': minor
+'@skillsoft/gamut-styles': minor
+---
+
+Add `@skillsoft/gamut-brand`, for teams building their own brand on gamut, and give every brand its own `tokens.css`.
+
+- `@skillsoft/gamut-brand` is new, and build-time only: install it as a dev dependency. `defineBrand({ name, hues })` types a brand, and `gamut-brand build <brand file>` writes its `values.ts`, `tokens.css` and DTCG JSON, refusing a brand that fails a contrast check. `--watch` regenerates when the brand file changes; `--check` fails CI when the files are out of date. The generator, the role table, the checks and gamut's own brands moved here from `@skillsoft/gamut-styles`.
+- `createBrandTheme`, `BrandBase` and `BrandValues` are exported from `@skillsoft/gamut-styles`. `createBrandTheme(values, base)` turns a generated `values.ts` into a theme with the same type as gamut's own, so system props and styling functions stay typed against it.
+- Each theme now carries only its own brand's colors. `GamutProvider` injects that brand's CSS, which puts its palette and its initial mode on `:root`, so a page starts in the right brand and mode without attributes on `<html>`. A brand's role overrides apply under a bare `data-color-mode` too.
+- **Breaking:** the generated files moved to one folder per brand. Import `@skillsoft/gamut-styles/tokens/<brand>.css` for a brand's CSS (`tokens.css` is still the default brand) and `@skillsoft/gamut-styles/tokens/<brand>/{palette,light,dark}.tokens.json` for its DTCG files. `tokens/brands/*` is gone, and `brands` in `@skillsoft/gamut-styles/tokens` now includes the default brand.
+- **Breaking:** `initialMode` moved from `createBrandTheme`'s second argument to the brand (`defineBrand({ initialMode: 'dark' })`), because the brand's CSS has to know it. `BrandBase` now requires gamut's font family and font weight keys.
+- `platformTheme` now starts in dark mode in its CSS as well as in its theme, so a server-rendered page starts dark.
+- The DTCG mode files include each brand's role overrides. They had the default roles for every brand.

.changeset/config.json

@@ -8,6 +8,7 @@
   "fixed": [
     [
       "@skillsoft/gamut-agent-tools",
+      "@skillsoft/gamut-brand",
       "@skillsoft/gamut-codemods",
       "@skillsoft/gamut-icons",
       "@skillsoft/gamut-illustrations",

.changeset/gamut-codemods-color-roles.md

@@ -0,0 +1,13 @@
+---
+'@skillsoft/gamut-codemods': minor
+---
+
+Add a `color-roles` preset that moves Gamut color names onto the generated color system's roles, using design's migration map.
+
+- Renames and merges are applied. Names that split, were retired or are still pending stay in place, with a `/* color-roles: … */` comment carrying design's rule, and keep failing the type check until someone picks.
+- Old palette names (`navy`, `gray-200`) and color names built at runtime get a warning.
+- Old `--color-*` CSS variables are renamed to `--color-<role>` in `.css`, `.scss` and `.less` files and inside JS strings and template literals; splits get the same comment. The type check can't see stylesheets, so the leftovers report lists every one left. Indented-syntax `.sass` isn't rewritten.
+- Card's `variant` moves onto design's two: `white`, `beige` and `navy` become `default`, `yellow` and `hyper` become `brand`. A `navy` card gets a comment, since it now renders light.
+- Old theme names move to the brand themes that replace them: `percipioTheme` → `skillsoftTheme`, `coreTheme` → `originalCodecademyTheme`, and the `PercipioTheme` type → `SkillsoftTheme`. An aliased import (`percipioTheme as theme`) only changes the imported name. A `CoreTheme` type gets a comment pointing at `SkillsoftTheme`, which types every brand.
+- Follows design's map: `shadow-primary` and `shadow-secondary` split onto `shadow-key` and `shadow-ambient`.
+- Presets can bring their own manifest type, pre-filter and leftovers report. `scope-swap` is unchanged.

.prettierignore

@@ -12,3 +12,4 @@ packages/gamut-codemods/**/__testfixtures__
 
 /.nx/cache
 /.nx/workspace-data
+packages/gamut-styles/src/tokens/generated

packages/.storybook/components/Elements/DocsContainer.tsx

@@ -1,14 +1,15 @@
 import {
   AssetProvider,
-  coreTheme,
+  skillsoftTheme,
   createEmotionCache,
   GamutProvider,
   platformPalette,
   adminTheme,
   lxStudioTheme,
-  percipioTheme,
   CoreTheme,
   platformTheme,
+  skillsoftTheme,
+  originalCodecademyTheme,
   ColorMode,
 } from '@skillsoft/gamut-styles';
 import {
@@ -21,24 +22,24 @@ import { useMemo } from 'react';
 import { HelmetProvider } from 'react-helmet-async';
 import { createGamutDocsTheme } from '../../theming/GamutTheme';
 import { createTheme } from '@skillsoft/variance';
-export const storybookTheme = createTheme(coreTheme)
+export const storybookTheme = createTheme(skillsoftTheme)
   .addColors(platformPalette)
   .build();
 
 const themeMap = {
-  core: coreTheme,
+  core: skillsoftTheme,
   admin: adminTheme,
   lxStudio: lxStudioTheme,
-  percipio: percipioTheme,
   platform: platformTheme,
+  skillsoft: skillsoftTheme,
+  originalCodecademy: originalCodecademyTheme,
 } as const;
 
 const themeSpecificStories = {
   'foundations-theme-lx-studio-theme--docs': 'lxStudio',
-  'foundations-theme-percipio-theme--docs': 'percipio',
   'foundations-theme-platform-theme--docs': 'platform',
   'foundations-theme-admin-theme--docs': 'admin',
-  'foundations-theme-core-theme--docs': 'core',
+  'foundations-theme-core-theme--docs': 'originalCodecademy',
 };
 export const DocsContainer: React.FC<{
   context: DocsContextProps;
@@ -51,7 +52,7 @@ export const DocsContainer: React.FC<{
     ?.storyId;
 
   const globalTheme =
-    (context as any).store.userGlobals?.globals?.theme || 'core';
+    (context as any).store.userGlobals?.globals?.theme || 'skillsoft';
   const globalLogicalProps = (context as any).store.userGlobals?.globals
     ?.logicalProps;
   const useLogicalProperties = globalLogicalProps !== 'false';

packages/.storybook/main.ts

@@ -209,6 +209,26 @@ const config: StorybookConfig = {
             '../gamut-styles/src/variance/config'
           ),
         },
+        // Public subpaths of gamut-styles (see its `exports`), pointed at
+        // source like the bare specifier above.
+        {
+          find: /^@skillsoft\/gamut-styles\/tokens$/,
+          replacement: resolve(__dirname, '../gamut-styles/src/tokens'),
+        },
+        {
+          find: /^@skillsoft\/gamut-styles\/tokens\.css(\?.*)?$/,
+          replacement: `${resolve(
+            __dirname,
+            '../gamut-styles/src/tokens/generated/skillsoft/tokens.css'
+          )}$1`,
+        },
+        {
+          find: /^@skillsoft\/gamut-styles\/tokens\/(\w+)\.css(\?.*)?$/,
+          replacement: `${resolve(
+            __dirname,
+            '../gamut-styles/src/tokens/generated'
+          )}/$1/tokens.css$2`,
+        },
         ...normalizeAlias(config.resolve?.alias),
       ],
     };

packages/.storybook/preview.ts

@@ -94,14 +94,14 @@ export const globalTypes = {
   theme: {
     name: 'Theme',
     description: 'Global theme for components',
-    defaultValue: 'core',
+    defaultValue: 'skillsoft',
     toolbar: {
       icon: 'paintbrush',
       items: [
-        { value: 'core', title: 'Core' },
+        { value: 'skillsoft', title: 'Skillsoft' },
+        { value: 'originalCodecademy', title: 'Original Codecademy' },
         { value: 'admin', title: 'Admin' },
         { value: 'lxStudio', title: 'LX Studio' },
-        { value: 'percipio', title: 'Percipio' },
         { value: 'platform', title: 'Learning Platform' },
       ],
       showName: true,

packages/.storybook/systemProps.ts

@@ -1,4 +1,4 @@
-import { coreTheme, system } from '@skillsoft/gamut-styles';
+import { skillsoftTheme, system } from '@skillsoft/gamut-styles';
 import type {
   ArgTypesEnhancer,
   StrictInputType,
@@ -51,12 +51,12 @@ const categoryRank = (category: string | undefined) =>
 export const isSystemPropCategory = (category: string | undefined) =>
   categoryRank(category) >= 0;
 
-const themeScales = coreTheme as unknown as Record<
+const themeScales = skillsoftTheme as unknown as Record<
   string,
   Record<string, unknown> | undefined
 >;
 
-// Token names come from the Core theme; other themes may define more or fewer.
+// Token names come from the skillsoft theme.
 const getScaleTokens = ({ scale }: SystemPropConfig) =>
   typeof scale === 'string' ? Object.keys(themeScales[scale] ?? {}) : [];
 

packages/.storybook/theming/GamutThemeProvider.tsx

@@ -4,11 +4,12 @@ import {
   corePalette,
   ColorModes,
   GamutProvider,
-  coreTheme,
+  skillsoftTheme,
   adminTheme,
   lxStudioTheme,
-  percipioTheme,
   platformTheme,
+  skillsoftTheme,
+  originalCodecademyTheme,
 } from '@skillsoft/gamut-styles';
 import { Theme } from '@emotion/react';
 
@@ -25,11 +26,12 @@ const themeBackground: Record<ColorModes, 'white' | 'navy'> = {
 };
 
 const themeMap = {
-  core: coreTheme,
+  core: skillsoftTheme,
   admin: adminTheme,
   lxStudio: lxStudioTheme,
-  percipio: percipioTheme,
   platform: platformTheme,
+  skillsoft: skillsoftTheme,
+  originalCodecademy: originalCodecademyTheme,
 } as const;
 
 type GlobalsContext = {
@@ -46,9 +48,27 @@ export const withEmotion = (Story: any, context: GlobalsContext) => {
   const selectedTheme = context.globals.theme;
   const useLogicalProperties = context.globals.logicalProps === 'true';
   const direction = context.globals.direction ?? 'ltr';
-  const background = corePalette[themeBackground[colorMode]];
-  const storyRef = useRef<HTMLDivElement>(null);
   const currentTheme = themeMap[selectedTheme];
+  /*
+   * Generated themes (they carry contentModes) take their values from their
+   * brand's tokens.css, not Emotion. GamutProvider injects it; the test
+   * provider below runs without globals, so it injects the theme's own copy.
+   * Only for those: tokens.css also sets white, black and background-current
+   * on :root, which would leak into the other themes. They have none of
+   * core's primitives, so `navy` doesn't exist there; the story sits on their
+   * own surface-default.
+   */
+  const generated = 'contentModes' in currentTheme ? currentTheme : undefined;
+  const tokens = generated && <style>{generated.tokensCss}</style>;
+  const bg = (
+    generated
+      ? generated.modes[colorMode]['surface-default']
+      : themeBackground[colorMode]
+  ) as 'white';
+  const background = generated
+    ? (generated._tokens.colors as Record<string, string>)[bg]
+    : corePalette[themeBackground[colorMode]];
+  const storyRef = useRef<HTMLDivElement>(null);
 
   useLayoutEffect(() => {
     const storyEl = storyRef.current?.closest(
@@ -72,11 +92,8 @@ export const withEmotion = (Story: any, context: GlobalsContext) => {
         useLogicalProperties={useLogicalProperties}
         theme={currentTheme as unknown as Theme}
       >
-        <Background
-          alwaysSetVariables
-          bg={themeBackground[colorMode]}
-          ref={storyRef}
-        >
+        {tokens}
+        <Background alwaysSetVariables bg={bg} ref={storyRef}>
           {Story()}
         </Background>
       </GamutProvider>
@@ -89,11 +106,7 @@ export const withEmotion = (Story: any, context: GlobalsContext) => {
       useLogicalProperties={useLogicalProperties}
       theme={currentTheme as unknown as Theme}
     >
-      <Background
-        alwaysSetVariables
-        bg={themeBackground[colorMode]}
-        ref={storyRef}
-      >
+      <Background alwaysSetVariables bg={bg} ref={storyRef}>
         {Story()}
       </Background>
     </GamutProvider>