@motion-proto/live-tokens 0.96.0 → 0.97.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # Changelog
 
+## 0.97.0 — Custom colors
+
+### Added
+
+- **Every color picker offers custom colors.** A **Custom** row after Danger
+  lists the open theme's own colors, `--color-custom-1`, `--color-custom-2`
+  and so on, each holding one OKLCH value for light and dark. The row's
+  plus swatch starts a new color from the slot's current color and opens
+  the OKLCH editor; confirm assigns it to the slot in one undo step, and
+  cancel removes it. A slot picks an existing custom color as it picks a
+  palette step, opacity included. The pencil on a custom swatch edits it in
+  place, and the edit moves every slot that names it. The Tokens view gains a
+  **Custom Colours** section that lists, edits and removes them. Removing a
+  color that a component property, gradient stop or wash names first asks
+  for a replacement, preselects the nearest token, and rewrites each
+  reference with its opacity intact, all in one undo step.
+- **Themes carry an optional `customColors` field.**
+  `ColorsAndType.customColors` sits beside `gradients` and holds
+  `{ variable, color }` entries. The field is additive: a theme without it
+  loads with no custom colors, `THEME_SCHEMA_VERSION` stays 5, and no
+  migration runs. Save, export and import keep the list, and Adopt writes
+  each custom color into `tokens.generated.css` with the theme's other
+  variables. `set-colors` and `save-theme` carry the field through
+  unchanged. `tokens.css` and the shipped themes declare no custom color, so
+  `check-page` reports `unknown-token` for page CSS that names
+  `var(--color-custom-1)`; reach a custom color through a component property.
+
+## 0.96.1 — Vitest 5 peer range
+
+### Fixed
+
+- **Installs alongside Vitest 5.** The optional `vitest` peer range now reads
+  `^4.0 || ^5.0`. With `^4.0` alone, npm stopped any install that re-resolved
+  the tree with `ERESOLVE` once Vitest 5 sat anywhere in it, including as an
+  uninstalled optional peer of Vite's devtools. The `testing` contract helpers
+  pass the full suite on Vitest 5.
+
 ## 0.96.0 — Lightbox zoom readout in natural pixels
 
 ### Changed

package/bin/set-colors.mjs

@@ -82,6 +82,7 @@ export async function runSetColors({
   const { colors, report } = buildColors(input, {
     cssVariables: live.cssVariables,
     gradients: live.gradients,
+    customColors: live.customColors,
   });
 
   const next = {

package/bin/setup-claude.mjs

@@ -19,7 +19,7 @@ import { join } from 'node:path';
 
 // The package owns this prefix in a project's skills directory. A skill without
 // it is the project's own and is never touched, whatever the flags say.
-const SKILL_PREFIX = 'live-tokens-';
+export const SKILL_PREFIX = 'live-tokens-';
 
 const SAMPLE_PROMPTS = {
   'live-tokens-create-page': 'build a pricing page using live-tokens components',
@@ -44,7 +44,7 @@ export function runSetupClaude({ pkgRoot, cwd, force = false }) {
     throw new Error(`No bundled skills found at ${srcSkills}. Is the package installed correctly?`);
   }
 
-  const shipped = directoriesIn(srcSkills);
+  const shipped = directoriesIn(srcSkills).filter((name) => name.startsWith(SKILL_PREFIX));
   if (shipped.length === 0) {
     throw new Error('No bundled skills to install.');
   }

package/dist-plugin/setColors/index.cjs

@@ -1098,7 +1098,13 @@ function buildColors(input, carry = {}) {
   for (const t of gradients) cssVariables[t.variable] = formatGradientValue(t);
   Object.assign(cssVariables, shadowVars(carry.cssVariables ?? {}, baseColors.Canvas));
   return {
-    colors: { editorConfigs: configs, harmonyAxes, gradients, cssVariables },
+    colors: {
+      editorConfigs: configs,
+      harmonyAxes,
+      gradients,
+      ...carry.customColors ? { customColors: carry.customColors } : {},
+      cssVariables
+    },
     report: {
       ...report,
       gradients: gradients === carry.gradients ? "carried" : "recipes",

package/dist-plugin/setColors/index.d.cts

@@ -1,4 +1,4 @@
-import { P as PaletteConfig, H as HarmonyAxis, G as GradientDiskToken, O as Oklch, d as HarmonyMode } from '../themeTypes-B8_Idrp4.cjs';
+import { P as PaletteConfig, H as HarmonyAxis, G as GradientDiskToken, b as CustomColorDiskToken, O as Oklch, e as HarmonyMode } from '../themeTypes-BaTQUyac.cjs';
 export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-BpIK_Obx.cjs';
 export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-4N-Orzzi.cjs';
 
@@ -44,12 +44,14 @@ interface ColorsInput {
     canvasGradient?: boolean;
 }
 /** The live colors and type this pass reads before it replaces the color
- *  state: the override bag, so every name no palette owns rides through, and
- *  the swatch gradients, so user-tuned ones survive. Shadow opacity is
- *  derived, not carried — see `shadowVars`. */
+ *  state: the override bag, so every name no palette owns rides through, the
+ *  swatch gradients, so user-tuned ones survive, and the custom colours, which
+ *  ride through untouched. Shadow opacity is derived, not carried — see
+ *  `shadowVars`. */
 interface CarryForward {
     cssVariables?: Record<string, string>;
     gradients?: GradientDiskToken[];
+    customColors?: CustomColorDiskToken[];
 }
 interface ContrastCheck {
     textVar: string;
@@ -80,6 +82,9 @@ interface ColorsState {
     editorConfigs: Record<string, PaletteConfig>;
     harmonyAxes: HarmonyAxis[];
     gradients: GradientDiskToken[];
+    /** Present only when the carried colours and type held the field, so a
+     *  recolor adds no key to a theme that never had one. */
+    customColors?: CustomColorDiskToken[];
     cssVariables: Record<string, string>;
 }
 interface BuildColorsResult {

package/dist-plugin/setColors/index.d.ts

@@ -1,4 +1,4 @@
-import { P as PaletteConfig, H as HarmonyAxis, G as GradientDiskToken, O as Oklch, d as HarmonyMode } from '../themeTypes-B8_Idrp4.js';
+import { P as PaletteConfig, H as HarmonyAxis, G as GradientDiskToken, b as CustomColorDiskToken, O as Oklch, e as HarmonyMode } from '../themeTypes-BaTQUyac.js';
 export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-BpIK_Obx.js';
 export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-4N-Orzzi.js';
 
@@ -44,12 +44,14 @@ interface ColorsInput {
     canvasGradient?: boolean;
 }
 /** The live colors and type this pass reads before it replaces the color
- *  state: the override bag, so every name no palette owns rides through, and
- *  the swatch gradients, so user-tuned ones survive. Shadow opacity is
- *  derived, not carried — see `shadowVars`. */
+ *  state: the override bag, so every name no palette owns rides through, the
+ *  swatch gradients, so user-tuned ones survive, and the custom colours, which
+ *  ride through untouched. Shadow opacity is derived, not carried — see
+ *  `shadowVars`. */
 interface CarryForward {
     cssVariables?: Record<string, string>;
     gradients?: GradientDiskToken[];
+    customColors?: CustomColorDiskToken[];
 }
 interface ContrastCheck {
     textVar: string;
@@ -80,6 +82,9 @@ interface ColorsState {
     editorConfigs: Record<string, PaletteConfig>;
     harmonyAxes: HarmonyAxis[];
     gradients: GradientDiskToken[];
+    /** Present only when the carried colours and type held the field, so a
+     *  recolor adds no key to a theme that never had one. */
+    customColors?: CustomColorDiskToken[];
     cssVariables: Record<string, string>;
 }
 interface BuildColorsResult {

package/dist-plugin/setColors/index.js

@@ -483,7 +483,13 @@ function buildColors(input, carry = {}) {
   for (const t of gradients) cssVariables[t.variable] = formatGradientValue(t);
   Object.assign(cssVariables, shadowVars(carry.cssVariables ?? {}, baseColors.Canvas));
   return {
-    colors: { editorConfigs: configs, harmonyAxes, gradients, cssVariables },
+    colors: {
+      editorConfigs: configs,
+      harmonyAxes,
+      gradients,
+      ...carry.customColors ? { customColors: carry.customColors } : {},
+      cssVariables
+    },
     report: {
       ...report,
       gradients: gradients === carry.gradients ? "carried" : "recipes",

package/dist-plugin/setGeometry/index.d.cts

@@ -1,4 +1,4 @@
-import { A as AliasDiskValue, a as ComponentConfig } from '../themeTypes-B8_Idrp4.cjs';
+import { A as AliasDiskValue, a as ComponentConfig } from '../themeTypes-BaTQUyac.cjs';
 export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-BpIK_Obx.cjs';
 export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-4N-Orzzi.cjs';
 

package/dist-plugin/setGeometry/index.d.ts

@@ -1,4 +1,4 @@
-import { A as AliasDiskValue, a as ComponentConfig } from '../themeTypes-B8_Idrp4.js';
+import { A as AliasDiskValue, a as ComponentConfig } from '../themeTypes-BaTQUyac.js';
 export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-BpIK_Obx.js';
 export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-4N-Orzzi.js';
 

package/dist-plugin/setType/index.d.cts

@@ -1,4 +1,4 @@
-import { c as FontStackVariable, C as ColorsAndType, b as FontStack, F as FontSource } from '../themeTypes-B8_Idrp4.cjs';
+import { d as FontStackVariable, C as ColorsAndType, c as FontStack, F as FontSource } from '../themeTypes-BaTQUyac.cjs';
 export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-BpIK_Obx.cjs';
 
 type PairingSlot = 'display' | 'body' | 'serif' | 'mono' | 'editorial';

package/dist-plugin/setType/index.d.ts

@@ -1,4 +1,4 @@
-import { c as FontStackVariable, C as ColorsAndType, b as FontStack, F as FontSource } from '../themeTypes-B8_Idrp4.js';
+import { d as FontStackVariable, C as ColorsAndType, c as FontStack, F as FontSource } from '../themeTypes-BaTQUyac.js';
 export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-BpIK_Obx.js';
 
 type PairingSlot = 'display' | 'body' | 'serif' | 'mono' | 'editorial';

package/dist-plugin/{themeTypes-B8_Idrp4.d.cts → themeTypes-BaTQUyac.d.cts}

@@ -181,6 +181,12 @@ interface GradientDiskToken {
         opacity?: number;
     }[];
 }
+/** On-disk shape of one `--color-custom-N` token: a theme-owned colour that
+ *  holds its own OKLCH value, one value for light and dark alike. */
+interface CustomColorDiskToken {
+    variable: string;
+    color: Oklch;
+}
 /**
  * Where a live component config resolved from: the unsaved `_working`
  * buffer, or the open theme's embedded copy. Every theme carries every
@@ -208,6 +214,9 @@ interface ColorsAndType {
     /** Absent on files saved before gradients round-tripped; the loader keeps
      *  the stock defaults then, which match what those files rendered. */
     gradients?: GradientDiskToken[];
+    /** Absent when the theme holds no custom colour; the loader reads that as
+     *  an empty list. */
+    customColors?: CustomColorDiskToken[];
     /** Four fixed harmony axes, each owning a hue with an optional bound family. */
     harmonyAxes?: HarmonyAxis[];
     /**
@@ -257,4 +266,4 @@ interface ComponentConfig {
     schemaVersion?: number;
 }
 
-export type { AliasDiskValue as A, ColorsAndType as C, FontSource as F, GradientDiskToken as G, HarmonyAxis as H, Oklch as O, PaletteConfig as P, ComponentConfig as a, FontStack as b, FontStackVariable as c, HarmonyMode as d };
+export type { AliasDiskValue as A, ColorsAndType as C, FontSource as F, GradientDiskToken as G, HarmonyAxis as H, Oklch as O, PaletteConfig as P, ComponentConfig as a, CustomColorDiskToken as b, FontStack as c, FontStackVariable as d, HarmonyMode as e };

package/dist-plugin/{themeTypes-B8_Idrp4.d.ts → themeTypes-BaTQUyac.d.ts}

@@ -181,6 +181,12 @@ interface GradientDiskToken {
         opacity?: number;
     }[];
 }
+/** On-disk shape of one `--color-custom-N` token: a theme-owned colour that
+ *  holds its own OKLCH value, one value for light and dark alike. */
+interface CustomColorDiskToken {
+    variable: string;
+    color: Oklch;
+}
 /**
  * Where a live component config resolved from: the unsaved `_working`
  * buffer, or the open theme's embedded copy. Every theme carries every
@@ -208,6 +214,9 @@ interface ColorsAndType {
     /** Absent on files saved before gradients round-tripped; the loader keeps
      *  the stock defaults then, which match what those files rendered. */
     gradients?: GradientDiskToken[];
+    /** Absent when the theme holds no custom colour; the loader reads that as
+     *  an empty list. */
+    customColors?: CustomColorDiskToken[];
     /** Four fixed harmony axes, each owning a hue with an optional bound family. */
     harmonyAxes?: HarmonyAxis[];
     /**
@@ -257,4 +266,4 @@ interface ComponentConfig {
     schemaVersion?: number;
 }
 
-export type { AliasDiskValue as A, ColorsAndType as C, FontSource as F, GradientDiskToken as G, HarmonyAxis as H, Oklch as O, PaletteConfig as P, ComponentConfig as a, FontStack as b, FontStackVariable as c, HarmonyMode as d };
+export type { AliasDiskValue as A, ColorsAndType as C, FontSource as F, GradientDiskToken as G, HarmonyAxis as H, Oklch as O, PaletteConfig as P, ComponentConfig as a, CustomColorDiskToken as b, FontStack as c, FontStackVariable as d, HarmonyMode as e };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.96.0",
+  "version": "0.97.0",
   "type": "module",
   "sideEffects": [
     "**/*.css"
@@ -56,6 +56,7 @@
     "dist-plugin",
     "src/testing-js",
     ".claude/skills",
+    "!.claude/skills/evaluate",
     "!.claude/skills/**/skill-alt.md",
     "bin",
     "template",
@@ -204,6 +205,7 @@
     "check:smoke-install": "bash scripts/smoke-install.sh",
     "check:smoke-create": "bash scripts/smoke-create.sh",
     "eval": "bash scripts/eval.sh",
+    "eval:billing": "bash scripts/eval-billing.sh",
     "build:eval-project": "bash scripts/build-eval-project.sh",
     "check:smoke-component-tests": "bash scripts/smoke-component-tests.sh",
     "check:smoke-page-tests": "bash scripts/smoke-page-tests.sh",
@@ -216,7 +218,7 @@
     "sass": "^1.0",
     "svelte": "^5",
     "vite": "^8",
-    "vitest": "^4.0"
+    "vitest": "^4.0 || ^5.0"
   },
   "peerDependenciesMeta": {
     "@playwright/test": {

package/src/editor/component-editor/scaffolding/VariantGroup.svelte

@@ -818,13 +818,6 @@
     color: var(--ui-text-tertiary);
   }
 
-  /* Anchor dropdown to the trigger's right edge; the toolbar sits flush against
-     the editor's right gutter, so a left-anchored dropdown would clip. */
-  .canvas-toolbar :global(.ui-ts-dropdown) {
-    left: auto;
-    right: 0;
-  }
-
   .variant-tabs {
     display: inline-flex;
     flex-wrap: wrap;

package/src/editor/core/store/editorPersistence.ts

@@ -19,6 +19,7 @@ import { storageKey } from './editorConfig';
 import { store } from './editorCore';
 import { quietGet, quietSet } from '../storage/storage';
 import { isGradientSlot, makeDefaultGradients } from '../themes/slices/gradients';
+import { isCustomColorList } from '../themes/slices/customColors';
 import { seedShadowsFromDom } from '../themes/slices/shadows';
 import { makeDefaultWashScale, type WashFamily } from '../themes/slices/washes';
 import { normalizeColumnsState } from '../themes/slices/columns';
@@ -73,6 +74,13 @@ function migrateGradients(state: EditorState): EditorState {
   return { ...state, gradients: { tokens: makeDefaultGradients() } };
 }
 
+// Persisted state from before custom colours gets the empty default from the
+// shallow merge; anything else that is not a well-formed list loads as empty.
+function migrateCustomColors(state: EditorState): EditorState {
+  if (isCustomColorList(state.customColors?.tokens)) return state;
+  return { ...state, customColors: { tokens: [] } };
+}
+
 // `hydrate` shallow-merges the persisted `components` bag over the default, so
 // a slice serialized by an older build can lack fields added since (e.g.
 // `config`, added with the two-field alias/config split). `componentsToVars`
@@ -205,7 +213,7 @@ export function hydrate(): void {
     store.set(
       normalizeHarmonyAxes(
         normalizeBaseAnchors(
-          normalizePaletteBasis(normalizePaletteLabels(normalizeComponents(normalizeColumns(normalizeWashes(migrateGradients(merged)))))),
+          normalizePaletteBasis(normalizePaletteLabels(normalizeComponents(normalizeColumns(normalizeWashes(migrateCustomColors(migrateGradients(merged))))))),
         ),
       ),
     );

package/src/editor/core/store/editorRenderer.ts

@@ -21,6 +21,7 @@ import {
   washesToVars,
   shadowsToVars,
   gradientsToVars,
+  customColorsToVars,
   componentsToVars,
 } from './editorStore';
 
@@ -34,6 +35,7 @@ export function deriveCssVars(state: EditorState): Record<string, string> {
   if (state.gradients.tokens.length > 0) {
     Object.assign(out, gradientsToVars(state.gradients));
   }
+  Object.assign(out, customColorsToVars(state.customColors));
   Object.assign(out, palettesToVars(state.palettes));
   Object.assign(out, componentsToVars(state.components));
   Object.assign(out, resolveFontStackValues(state.fonts.stacks, state.fonts.sources));

package/src/editor/core/store/editorStore.ts

@@ -74,6 +74,10 @@ import {
   loadGradientsFromFile,
   makeDefaultGradients,
 } from '../themes/slices/gradients';
+import {
+  customColorsToVars,
+  loadCustomColorsFromFile,
+} from '../themes/slices/customColors';
 import {
   componentBaseline,
   getComponentOwnedVarNames,
@@ -102,6 +106,7 @@ function emptyState(): EditorState {
     columns: defaultColumns(),
     components: {},
     gradients: { tokens: makeDefaultGradients() },
+    customColors: { tokens: [] },
     harmonyAxes: defaultHarmonyAxes(),
     cssVars: {},
   };
@@ -179,6 +184,20 @@ export {
   removeGradientToken,
 } from '../themes/slices/gradients';
 
+export {
+  customColorsToVars,
+  nextCustomColorSlot,
+  isCustomColorSlot,
+  addCustomColor,
+  setCustomColor,
+  removeCustomColor,
+  customColorUsages,
+  describeCustomColorUsages,
+  nearestColorToken,
+  replaceAndRemoveCustomColor,
+} from '../themes/slices/customColors';
+export type { CustomColorUsage } from '../themes/slices/customColors';
+
 export {
   componentsToVars,
   getComponentOwnedVarNames,
@@ -404,6 +423,7 @@ export function colorsAndTypeToState(colorsAndType: ColorsAndType): EditorState
   // begin with).
   for (const load of Object.values(domainLoaders)) load(next, rawVars);
   loadGradientsFromFile(next, colorsAndType.gradients, rawVars);
+  loadCustomColorsFromFile(next, colorsAndType.customColors, rawVars);
   next.harmonyAxes = sanitizeHarmonyAxes(renameBackgroundHarmonyFamily(colorsAndType.harmonyAxes), next.palettes);
   next.cssVars = rawVars;
   return next;
@@ -438,12 +458,17 @@ function colorsAndTypeContent(state: EditorState): Omit<ColorsAndType, 'name' |
   if (state.gradients.tokens.length > 0) {
     Object.assign(cssVariables, gradientsToVars(state.gradients));
   }
+  // An empty list writes no field, so a theme that never held a custom colour
+  // still compares equal to the buffer its load produced.
+  const hasCustomColors = state.customColors.tokens.length > 0;
+  if (hasCustomColors) Object.assign(cssVariables, customColorsToVars(state.customColors));
   return {
     editorConfigs: state.palettes,
     cssVariables,
     fontSources: state.fonts.sources,
     fontStacks: state.fonts.stacks,
     gradients: state.gradients.tokens,
+    ...(hasCustomColors ? { customColors: state.customColors.tokens } : {}),
     harmonyAxes: state.harmonyAxes,
     schemaVersion: CURRENT_COLORS_AND_TYPE_SCHEMA_VERSION,
   };

package/src/editor/core/store/editorTypes.ts

@@ -1,6 +1,7 @@
 import type { PaletteConfig, FontSource, FontStack } from '../themes/themeTypes';
 import type { GradientStop, GradientValue, LinearDirection } from '../themes/parsers/gradient';
 import type { HarmonyAxis } from '../palettes/colorHarmony';
+import type { Oklch } from '../palettes/oklch';
 import type { ColumnViewport, ColumnViewportValues } from '../themes/slices/columns';
 
 export interface ShadowGlobals {
@@ -80,6 +81,13 @@ export interface GradientToken {
   stops: GradientTokenStop[];
 }
 
+/** A theme-owned `--color-custom-N` colour. Slots name it the way they name a
+ *  palette step, so one edit moves every slot that names it. */
+export interface CustomColorToken {
+  variable: string;
+  color: Oklch;
+}
+
 /** Structured gradient payload carried inline on a component alias.
  *  `GradientToken` minus `variable` (the alias key itself is the binding).
  *  Used when a component owns a per-instance gradient that doesn't share the
@@ -123,6 +131,7 @@ export interface EditorState {
   columns: ColumnsState;
   components: Record<string, ComponentSlice>;
   gradients: { tokens: GradientToken[] };
+  customColors: { tokens: CustomColorToken[] };
   /** Four fixed numbered axes (index 0 is the anchor); each owns a hue;
    *  family is the live-bound color or null. */
   harmonyAxes: HarmonyAxis[];

package/src/editor/core/themes/buildColors.ts

@@ -26,7 +26,7 @@ import { SHADOW_VAR_NAMES, parseShadowCss, shadowTokenCss } from './parsers/shad
 import { AA_BODY, AA_LARGE, contrastRatio, findLForContrast } from '../palettes/contrast';
 import { type HarmonyAxis, type HarmonyMode } from '../palettes/colorHarmony';
 import { defaultPaletteConfig } from '../../ui/palette/paletteMath';
-import type { GradientDiskToken, PaletteConfig } from './themeTypes';
+import type { CustomColorDiskToken, GradientDiskToken, PaletteConfig } from './themeTypes';
 
 export interface ColorsInput {
   scheme: SchemeDirection;
@@ -41,12 +41,14 @@ export interface ColorsInput {
 }
 
 /** The live colors and type this pass reads before it replaces the color
- *  state: the override bag, so every name no palette owns rides through, and
- *  the swatch gradients, so user-tuned ones survive. Shadow opacity is
- *  derived, not carried — see `shadowVars`. */
+ *  state: the override bag, so every name no palette owns rides through, the
+ *  swatch gradients, so user-tuned ones survive, and the custom colours, which
+ *  ride through untouched. Shadow opacity is derived, not carried — see
+ *  `shadowVars`. */
 export interface CarryForward {
   cssVariables?: Record<string, string>;
   gradients?: GradientDiskToken[];
+  customColors?: CustomColorDiskToken[];
 }
 
 export interface ContrastCheck {
@@ -80,6 +82,9 @@ export interface ColorsState {
   editorConfigs: Record<string, PaletteConfig>;
   harmonyAxes: HarmonyAxis[];
   gradients: GradientDiskToken[];
+  /** Present only when the carried colours and type held the field, so a
+   *  recolor adds no key to a theme that never had one. */
+  customColors?: CustomColorDiskToken[];
   cssVariables: Record<string, string>;
 }
 
@@ -467,7 +472,13 @@ export function buildColors(input: ColorsInput, carry: CarryForward = {}): Build
   Object.assign(cssVariables, shadowVars(carry.cssVariables ?? {}, baseColors.Canvas));
 
   return {
-    colors: { editorConfigs: configs, harmonyAxes, gradients, cssVariables },
+    colors: {
+      editorConfigs: configs,
+      harmonyAxes,
+      gradients,
+      ...(carry.customColors ? { customColors: carry.customColors } : {}),
+      cssVariables,
+    },
     report: {
       ...report,
       gradients: gradients === carry.gradients ? 'carried' : 'recipes',