@ankhorage/zora 0.12.3 → 0.13.1

package/src/internal/color/colorToneRecipes.test.ts

@@ -0,0 +1,89 @@
+import { describe, expect, test } from 'bun:test';
+
+import { ZORA_COLOR_TONES } from '../../theme/types';
+import {
+  getZoraColorToneRecipe,
+  getZoraColorToneRoleChromaFactor,
+  type ZoraColorToneRecipe,
+  type ZoraHueScaleRoleId,
+} from './index';
+
+const HUE_BACKED_ROLES: readonly ZoraHueScaleRoleId[] = [
+  'primary',
+  'secondary',
+  'accent',
+  'highlight',
+  'surfaceTint',
+];
+
+function expectFinitePositive(value: number) {
+  expect(Number.isFinite(value)).toBe(true);
+  expect(value).toBeGreaterThan(0);
+}
+
+function expectSaneRecipe(recipe: ZoraColorToneRecipe) {
+  expectFinitePositive(recipe.maxChroma);
+  expectFinitePositive(recipe.minMidChroma);
+  expect(recipe.minMidChroma).toBeLessThan(recipe.maxChroma);
+
+  for (const role of HUE_BACKED_ROLES) {
+    expectFinitePositive(getZoraColorToneRoleChromaFactor(recipe, role));
+  }
+}
+
+describe('color tone recipes', () => {
+  test('every ZORA color tone has a recipe', () => {
+    for (const colorTone of ZORA_COLOR_TONES) {
+      expect(getZoraColorToneRecipe(colorTone).colorTone).toBe(colorTone);
+    }
+  });
+
+  test('every recipe has sane chroma values and all hue-backed role factors', () => {
+    for (const colorTone of ZORA_COLOR_TONES) {
+      expectSaneRecipe(getZoraColorToneRecipe(colorTone));
+    }
+  });
+
+  test('records the initial background and foreground lane pairings', () => {
+    expect(getZoraColorToneRecipe('fluorescent').laneRecipe).toEqual({
+      backgroundTone: 'obsidian',
+      foregroundTone: 'fluorescent',
+    });
+    expect(getZoraColorToneRecipe('obsidian').laneRecipe).toEqual({
+      backgroundTone: 'obsidian',
+      foregroundTone: 'fluorescent',
+    });
+    expect(getZoraColorToneRecipe('pastel').laneRecipe).toEqual({
+      backgroundTone: 'pastel',
+      foregroundTone: 'jewel',
+    });
+    expect(getZoraColorToneRecipe('earth').laneRecipe).toEqual({
+      backgroundTone: 'earth',
+      foregroundTone: 'mineral',
+    });
+  });
+
+  test('surface tint remains lower intensity than foreground action roles', () => {
+    for (const colorTone of ZORA_COLOR_TONES) {
+      const recipe = getZoraColorToneRecipe(colorTone);
+      const surfaceTint = getZoraColorToneRoleChromaFactor(recipe, 'surfaceTint');
+
+      expect(surfaceTint).toBeLessThan(getZoraColorToneRoleChromaFactor(recipe, 'primary'));
+      expect(surfaceTint).toBeLessThan(getZoraColorToneRoleChromaFactor(recipe, 'accent'));
+      expect(surfaceTint).toBeLessThan(getZoraColorToneRoleChromaFactor(recipe, 'highlight'));
+    }
+  });
+
+  test('high-energy tones allow higher chroma than neutral and pastel', () => {
+    expect(getZoraColorToneRecipe('fluorescent').maxChroma).toBeGreaterThan(
+      getZoraColorToneRecipe('neutral').maxChroma,
+    );
+    expect(getZoraColorToneRecipe('fluorescent').maxChroma).toBeGreaterThan(
+      getZoraColorToneRecipe('pastel').maxChroma,
+    );
+  });
+
+  test('getter is deterministic', () => {
+    expect(getZoraColorToneRecipe('jewel')).toEqual(getZoraColorToneRecipe('jewel'));
+  });
+});

package/src/internal/color/colorToneRecipes.ts

@@ -0,0 +1,167 @@
+import type { ZoraColorTone } from '../../theme/types';
+import type { ZoraHueScaleRoleId } from './scales';
+
+export interface ZoraColorToneLaneRecipe {
+  backgroundTone: ZoraColorTone;
+  foregroundTone: ZoraColorTone;
+}
+
+export interface ZoraColorToneRoleChromaFactors {
+  primary: number;
+  secondary: number;
+  accent: number;
+  highlight: number;
+  surfaceTint: number;
+}
+
+export interface ZoraColorToneRecipe {
+  colorTone: ZoraColorTone;
+  laneRecipe: ZoraColorToneLaneRecipe;
+  roleChromaFactors: ZoraColorToneRoleChromaFactors;
+  maxChroma: number;
+  minMidChroma: number;
+}
+
+const ZORA_COLOR_TONE_RECIPES = {
+  neutral: {
+    colorTone: 'neutral',
+    laneRecipe: { backgroundTone: 'neutral', foregroundTone: 'jewel' },
+    roleChromaFactors: {
+      primary: 0.72,
+      secondary: 0.48,
+      accent: 0.56,
+      highlight: 0.6,
+      surfaceTint: 0.12,
+    },
+    maxChroma: 0.14,
+    minMidChroma: 0.025,
+  },
+  pastel: {
+    colorTone: 'pastel',
+    laneRecipe: { backgroundTone: 'pastel', foregroundTone: 'jewel' },
+    roleChromaFactors: {
+      primary: 0.58,
+      secondary: 0.48,
+      accent: 0.55,
+      highlight: 0.62,
+      surfaceTint: 0.2,
+    },
+    maxChroma: 0.12,
+    minMidChroma: 0.02,
+  },
+  earth: {
+    colorTone: 'earth',
+    laneRecipe: { backgroundTone: 'earth', foregroundTone: 'mineral' },
+    roleChromaFactors: {
+      primary: 0.64,
+      secondary: 0.52,
+      accent: 0.58,
+      highlight: 0.6,
+      surfaceTint: 0.16,
+    },
+    maxChroma: 0.13,
+    minMidChroma: 0.022,
+  },
+  mineral: {
+    colorTone: 'mineral',
+    laneRecipe: { backgroundTone: 'mineral', foregroundTone: 'jewel' },
+    roleChromaFactors: {
+      primary: 0.7,
+      secondary: 0.56,
+      accent: 0.64,
+      highlight: 0.68,
+      surfaceTint: 0.16,
+    },
+    maxChroma: 0.14,
+    minMidChroma: 0.025,
+  },
+  muted: {
+    colorTone: 'muted',
+    laneRecipe: { backgroundTone: 'muted', foregroundTone: 'jewel' },
+    roleChromaFactors: {
+      primary: 0.6,
+      secondary: 0.5,
+      accent: 0.56,
+      highlight: 0.6,
+      surfaceTint: 0.14,
+    },
+    maxChroma: 0.12,
+    minMidChroma: 0.02,
+  },
+  jewel: {
+    colorTone: 'jewel',
+    laneRecipe: { backgroundTone: 'neutral', foregroundTone: 'jewel' },
+    roleChromaFactors: {
+      primary: 1,
+      secondary: 0.72,
+      accent: 0.85,
+      highlight: 1,
+      surfaceTint: 0.18,
+    },
+    maxChroma: 0.2,
+    minMidChroma: 0.04,
+  },
+  fluorescent: {
+    colorTone: 'fluorescent',
+    laneRecipe: { backgroundTone: 'obsidian', foregroundTone: 'fluorescent' },
+    roleChromaFactors: {
+      primary: 1.12,
+      secondary: 0.82,
+      accent: 1.05,
+      highlight: 1.18,
+      surfaceTint: 0.22,
+    },
+    maxChroma: 0.24,
+    minMidChroma: 0.045,
+  },
+  obsidian: {
+    colorTone: 'obsidian',
+    laneRecipe: { backgroundTone: 'obsidian', foregroundTone: 'fluorescent' },
+    roleChromaFactors: {
+      primary: 1.08,
+      secondary: 0.78,
+      accent: 1,
+      highlight: 1.12,
+      surfaceTint: 0.2,
+    },
+    maxChroma: 0.22,
+    minMidChroma: 0.04,
+  },
+  vaporwave: {
+    colorTone: 'vaporwave',
+    laneRecipe: { backgroundTone: 'pastel', foregroundTone: 'fluorescent' },
+    roleChromaFactors: {
+      primary: 0.95,
+      secondary: 0.72,
+      accent: 1,
+      highlight: 1.08,
+      surfaceTint: 0.24,
+    },
+    maxChroma: 0.2,
+    minMidChroma: 0.035,
+  },
+  monochromeAccent: {
+    colorTone: 'monochromeAccent',
+    laneRecipe: { backgroundTone: 'neutral', foregroundTone: 'jewel' },
+    roleChromaFactors: {
+      primary: 0.88,
+      secondary: 0.36,
+      accent: 0.95,
+      highlight: 0.88,
+      surfaceTint: 0.08,
+    },
+    maxChroma: 0.18,
+    minMidChroma: 0.035,
+  },
+} satisfies Record<ZoraColorTone, ZoraColorToneRecipe>;
+
+export function getZoraColorToneRecipe(colorTone: ZoraColorTone): ZoraColorToneRecipe {
+  return ZORA_COLOR_TONE_RECIPES[colorTone];
+}
+
+export function getZoraColorToneRoleChromaFactor(
+  recipe: ZoraColorToneRecipe,
+  role: ZoraHueScaleRoleId,
+): number {
+  return recipe.roleChromaFactors[role];
+}

package/src/internal/color/index.ts

@@ -1,3 +1,10 @@
+export {
+  getZoraColorToneRecipe,
+  getZoraColorToneRoleChromaFactor,
+  type ZoraColorToneLaneRecipe,
+  type ZoraColorToneRecipe,
+  type ZoraColorToneRoleChromaFactors,
+} from './colorToneRecipes';
 export {
   computeZoraHarmony,
   type ZoraComputedHarmony,
@@ -24,7 +31,9 @@ export {
 export {
   createZoraColorScale,
   type CreateZoraColorScaleOptions,
+  type CreateZoraHueScaleOptions,
   createZoraNeutralScale,
   createZoraPrimaryScale,
+  type ZoraHueScaleRoleId,
 } from './scales';
 export { ZORA_COLOR_SCALE_STEPS, type ZoraColorScale, type ZoraColorScaleStep } from './types';

package/src/internal/color/roleScales.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from 'bun:test';
 
-import type { ZoraHexColor } from '../../theme/types';
+import type { ZoraColorTone, ZoraHexColor } from '../../theme/types';
 import {
   assignZoraHarmonyRoleHues,
   computeZoraHarmony,
@@ -10,10 +10,8 @@ import {
   ZORA_COLOR_SCALE_ROLE_ORDER,
   ZORA_COLOR_SCALE_STEPS,
   type ZoraColorScale,
-  type ZoraColorScaleRoleId,
   type ZoraColorScaleStep,
   type ZoraComputedHueRoles,
-  type ZoraComputedRoleColorScales,
   type ZoraRoleColorScale,
 } from './index';
 
@@ -51,6 +49,24 @@ function buildHueRoles(assignments: ZoraComputedHueRoles['assignments']): ZoraCo
   };
 }
 
+function createCompleteHueRoles(): ZoraComputedHueRoles {
+  return buildHueRoles([
+    { role: 'primary', hue: 120, sourceSlotId: 'base' },
+    { role: 'secondary', hue: 200, sourceSlotId: 'a' },
+    { role: 'accent', hue: 280, sourceSlotId: 'b' },
+    { role: 'highlight', hue: 20, sourceSlotId: 'c' },
+    { role: 'surfaceTint', hue: 160, sourceSlotId: 'a' },
+  ]);
+}
+
+function createScales(colorTone: ZoraColorTone = 'jewel') {
+  return createZoraRoleColorScales({
+    colorTone,
+    hueRoles: createCompleteHueRoles(),
+    seed: '#0f766e',
+  });
+}
+
 function requireHueBackedSourceHue(role: ZoraRoleColorScale): number {
   if (typeof role.sourceHue !== 'number') {
     throw new Error(`[zora] Expected "${role.role}" role scale to include a sourceHue.`);
@@ -58,47 +74,19 @@ function requireHueBackedSourceHue(role: ZoraRoleColorScale): number {
   return role.sourceHue;
 }
 
-function expectRoleOrder(
-  scales: ZoraComputedRoleColorScales,
-  expected: readonly ZoraColorScaleRoleId[],
-) {
-  expect(scales.roles.map((entry) => entry.role)).toEqual([...expected]);
-}
-
 describe('createZoraRoleColorScales', () => {
   test('returns all roles exactly once in deterministic order', () => {
-    const hueRoles = buildHueRoles([
-      { role: 'primary', hue: 120, sourceSlotId: 'base' },
-      { role: 'secondary', hue: 200, sourceSlotId: 'a' },
-      { role: 'accent', hue: 280, sourceSlotId: 'b' },
-      { role: 'highlight', hue: 20, sourceSlotId: 'c' },
-      { role: 'surfaceTint', hue: 160, sourceSlotId: 'a' },
-    ]);
-
-    const scales: ZoraComputedRoleColorScales = createZoraRoleColorScales({
-      hueRoles,
-      seed: '#0f766e',
-    });
-
-    const expectedOrder: readonly ZoraColorScaleRoleId[] = ZORA_COLOR_SCALE_ROLE_ORDER;
-    expect(scales.roles).toHaveLength(expectedOrder.length);
+    const scales = createScales();
 
-    expectRoleOrder(scales, expectedOrder);
+    expect(scales.roles).toHaveLength(ZORA_COLOR_SCALE_ROLE_ORDER.length);
+    expect(scales.roles.map((entry) => entry.role)).toEqual([...ZORA_COLOR_SCALE_ROLE_ORDER]);
     expect(new Set(scales.roles.map((entry) => entry.role)).size).toBe(
       ZORA_COLOR_SCALE_ROLE_ORDER.length,
     );
   });
 
   test('every scale contains exactly all 50–950 keys and valid lowercase 6-digit hex values', () => {
-    const hueRoles = buildHueRoles([
-      { role: 'primary', hue: 120, sourceSlotId: 'base' },
-      { role: 'secondary', hue: 200, sourceSlotId: 'a' },
-      { role: 'accent', hue: 280, sourceSlotId: 'b' },
-      { role: 'highlight', hue: 20, sourceSlotId: 'c' },
-      { role: 'surfaceTint', hue: 160, sourceSlotId: 'a' },
-    ]);
-
-    const scales = createZoraRoleColorScales({ hueRoles, seed: '#0f766e' });
+    const scales = createScales();
 
     for (const role of scales.roles) {
       assertScaleKeys(role.scale);
@@ -109,31 +97,21 @@ describe('createZoraRoleColorScales', () => {
   });
 
   test('output is deterministic for the same input', () => {
-    const hueRoles = buildHueRoles([
-      { role: 'primary', hue: 120, sourceSlotId: 'base' },
-      { role: 'secondary', hue: 200, sourceSlotId: 'a' },
-      { role: 'accent', hue: 280, sourceSlotId: 'b' },
-      { role: 'highlight', hue: 20, sourceSlotId: 'c' },
-      { role: 'surfaceTint', hue: 160, sourceSlotId: 'a' },
-    ]);
-
-    const seed: ZoraHexColor = '#0f766e';
-
-    expect(createZoraRoleColorScales({ hueRoles, seed })).toEqual(
-      createZoraRoleColorScales({ hueRoles, seed }),
-    );
+    expect(createScales()).toEqual(createScales());
   });
 
   test('role hue is preserved approximately for mid steps', () => {
-    const hueRoles = buildHueRoles([
-      { role: 'primary', hue: 115, sourceSlotId: 'base' },
-      { role: 'secondary', hue: 210, sourceSlotId: 'a' },
-      { role: 'accent', hue: 300, sourceSlotId: 'b' },
-      { role: 'highlight', hue: 25, sourceSlotId: 'c' },
-      { role: 'surfaceTint', hue: 165, sourceSlotId: 'a' },
-    ]);
-
-    const scales = createZoraRoleColorScales({ hueRoles, seed: '#0f766e' });
+    const scales = createZoraRoleColorScales({
+      colorTone: 'jewel',
+      hueRoles: buildHueRoles([
+        { role: 'primary', hue: 115, sourceSlotId: 'base' },
+        { role: 'secondary', hue: 210, sourceSlotId: 'a' },
+        { role: 'accent', hue: 300, sourceSlotId: 'b' },
+        { role: 'highlight', hue: 25, sourceSlotId: 'c' },
+        { role: 'surfaceTint', hue: 165, sourceSlotId: 'a' },
+      ]),
+      seed: '#0f766e',
+    });
 
     const midSteps: ZoraColorScaleStep[] = [400, 500, 600, 700];
     for (const roleId of ['primary', 'secondary', 'accent', 'highlight', 'surfaceTint'] as const) {
@@ -148,21 +126,11 @@ describe('createZoraRoleColorScales', () => {
   });
 
   test('surfaceTint scale has lower chroma than primary/accent/highlight for mid steps', () => {
-    const hueRoles = buildHueRoles([
-      { role: 'primary', hue: 120, sourceSlotId: 'base' },
-      { role: 'secondary', hue: 200, sourceSlotId: 'a' },
-      { role: 'accent', hue: 280, sourceSlotId: 'b' },
-      { role: 'highlight', hue: 20, sourceSlotId: 'c' },
-      { role: 'surfaceTint', hue: 160, sourceSlotId: 'a' },
-    ]);
-
-    const scales = createZoraRoleColorScales({ hueRoles, seed: '#0f766e' });
-
+    const scales = createScales('jewel');
     const surfaceTint = getZoraRoleColorScale(scales, 'surfaceTint').scale;
     const primary = getZoraRoleColorScale(scales, 'primary').scale;
     const accent = getZoraRoleColorScale(scales, 'accent').scale;
     const highlight = getZoraRoleColorScale(scales, 'highlight').scale;
-
     const step: ZoraColorScaleStep = 500;
     const surfaceTintChroma = parseHexToOklch(surfaceTint[step]).c;
 
@@ -171,17 +139,36 @@ describe('createZoraRoleColorScales', () => {
     expect(surfaceTintChroma).toBeLessThan(parseHexToOklch(highlight[step]).c);
   });
 
-  test('neutral scale has low chroma', () => {
-    const hueRoles = buildHueRoles([
-      { role: 'primary', hue: 120, sourceSlotId: 'base' },
-      { role: 'secondary', hue: 200, sourceSlotId: 'a' },
-      { role: 'accent', hue: 280, sourceSlotId: 'b' },
-      { role: 'highlight', hue: 20, sourceSlotId: 'c' },
-      { role: 'surfaceTint', hue: 160, sourceSlotId: 'a' },
-    ]);
+  test('colorTone changes role chroma behavior internally', () => {
+    const neutral = createScales('neutral');
+    const fluorescent = createScales('fluorescent');
+    const step: ZoraColorScaleStep = 500;
 
-    const scales = createZoraRoleColorScales({ hueRoles, seed: '#0f766e' });
-    const neutral = getZoraRoleColorScale(scales, 'neutral').scale;
+    const neutralPrimary = parseHexToOklch(getZoraRoleColorScale(neutral, 'primary').scale[step]).c;
+    const fluorescentPrimary = parseHexToOklch(
+      getZoraRoleColorScale(fluorescent, 'primary').scale[step],
+    ).c;
+
+    expect(fluorescentPrimary).toBeGreaterThan(neutralPrimary);
+  });
+
+  test('pastel keeps surfaceTint lower chroma than fluorescent foreground roles', () => {
+    const pastel = createScales('pastel');
+    const fluorescent = createScales('fluorescent');
+    const step: ZoraColorScaleStep = 500;
+
+    const pastelSurfaceTint = parseHexToOklch(
+      getZoraRoleColorScale(pastel, 'surfaceTint').scale[step],
+    ).c;
+    const fluorescentAccent = parseHexToOklch(
+      getZoraRoleColorScale(fluorescent, 'accent').scale[step],
+    ).c;
+
+    expect(pastelSurfaceTint).toBeLessThan(fluorescentAccent);
+  });
+
+  test('neutral scale has low chroma', () => {
+    const neutral = getZoraRoleColorScale(createScales(), 'neutral').scale;
 
     for (const { hex } of getStepValues(neutral)) {
       expect(parseHexToOklch(hex).c).toBeLessThanOrEqual(0.03);
@@ -196,19 +183,13 @@ describe('createZoraRoleColorScales', () => {
       { role: 'surfaceTint', hue: 160, sourceSlotId: 'a' },
     ]);
 
-    expect(() => createZoraRoleColorScales({ hueRoles, seed: '#0f766e' })).toThrow('highlight');
+    expect(() =>
+      createZoraRoleColorScales({ colorTone: 'jewel', hueRoles, seed: '#0f766e' }),
+    ).toThrow('highlight');
   });
 
   test('no role scale contains pure black/white by default', () => {
-    const hueRoles = buildHueRoles([
-      { role: 'primary', hue: 120, sourceSlotId: 'base' },
-      { role: 'secondary', hue: 200, sourceSlotId: 'a' },
-      { role: 'accent', hue: 280, sourceSlotId: 'b' },
-      { role: 'highlight', hue: 20, sourceSlotId: 'c' },
-      { role: 'surfaceTint', hue: 160, sourceSlotId: 'a' },
-    ]);
-
-    const scales = createZoraRoleColorScales({ hueRoles, seed: '#0f766e' });
+    const scales = createScales();
 
     for (const role of scales.roles) {
       assertNoPureBlackOrWhite(role.scale);
@@ -216,18 +197,10 @@ describe('createZoraRoleColorScales', () => {
   });
 
   test('does not mutate input hueRoles', () => {
-    const assignments: ZoraComputedHueRoles['assignments'] = [
-      { role: 'primary', hue: 120, sourceSlotId: 'base' },
-      { role: 'secondary', hue: 200, sourceSlotId: 'a' },
-      { role: 'accent', hue: 280, sourceSlotId: 'b' },
-      { role: 'highlight', hue: 20, sourceSlotId: 'c' },
-      { role: 'surfaceTint', hue: 160, sourceSlotId: 'a' },
-    ];
-
-    const hueRoles: ZoraComputedHueRoles = buildHueRoles(assignments);
+    const hueRoles = createCompleteHueRoles();
     const snapshot = JSON.stringify(hueRoles);
 
-    createZoraRoleColorScales({ hueRoles, seed: '#0f766e' });
+    createZoraRoleColorScales({ colorTone: 'jewel', hueRoles, seed: '#0f766e' });
 
     expect(JSON.stringify(hueRoles)).toBe(snapshot);
   });
@@ -237,7 +210,7 @@ describe('createZoraRoleColorScales', () => {
     const harmony = computeZoraHarmony(seed, 'tetradic');
     const hueRoles = assignZoraHarmonyRoleHues(harmony);
 
-    const scales = createZoraRoleColorScales({ hueRoles, seed });
+    const scales = createZoraRoleColorScales({ colorTone: 'jewel', hueRoles, seed });
 
     expect(scales.roles.map((entry) => entry.role)).toEqual([...ZORA_COLOR_SCALE_ROLE_ORDER]);
     for (const role of scales.roles) {

package/src/internal/color/roleScales.ts

@@ -1,4 +1,5 @@
-import type { ZoraHexColor } from '../../theme/types';
+import type { ZoraColorTone, ZoraHexColor } from '../../theme/types';
+import { getZoraColorToneRecipe } from './colorToneRecipes';
 import { parseHexToOklch } from './oklch';
 import {
   getZoraHueRoleAssignment,
@@ -56,16 +57,19 @@ function resolveSeedChroma(seed: ZoraHexColor): number {
 }
 
 function createHueBackedRoleScale(options: {
+  colorTone: ZoraColorTone;
   hueRoles: ZoraComputedHueRoles;
   seedChroma: number;
   role: ZoraHueRoleId;
 }): ZoraRoleColorScale {
   const assignment = getZoraHueRoleAssignment(options.hueRoles, options.role);
+  const colorToneRecipe = getZoraColorToneRecipe(options.colorTone);
   const hueScaleRole: ZoraHueScaleRoleId = options.role;
   const hueScaleOptions: CreateZoraHueScaleOptions = {
     hue: assignment.hue,
     seedChroma: options.seedChroma,
     role: hueScaleRole,
+    colorToneRecipe,
   };
 
   return {
@@ -78,15 +82,41 @@ function createHueBackedRoleScale(options: {
 export function createZoraRoleColorScales(options: {
   hueRoles: ZoraComputedHueRoles;
   seed: ZoraHexColor;
+  colorTone: ZoraColorTone;
 }): ZoraComputedRoleColorScales {
   const seedChroma = resolveSeedChroma(options.seed);
 
   const roles: ZoraRoleColorScale[] = [
-    createHueBackedRoleScale({ hueRoles: options.hueRoles, seedChroma, role: 'primary' }),
-    createHueBackedRoleScale({ hueRoles: options.hueRoles, seedChroma, role: 'secondary' }),
-    createHueBackedRoleScale({ hueRoles: options.hueRoles, seedChroma, role: 'accent' }),
-    createHueBackedRoleScale({ hueRoles: options.hueRoles, seedChroma, role: 'highlight' }),
-    createHueBackedRoleScale({ hueRoles: options.hueRoles, seedChroma, role: 'surfaceTint' }),
+    createHueBackedRoleScale({
+      colorTone: options.colorTone,
+      hueRoles: options.hueRoles,
+      seedChroma,
+      role: 'primary',
+    }),
+    createHueBackedRoleScale({
+      colorTone: options.colorTone,
+      hueRoles: options.hueRoles,
+      seedChroma,
+      role: 'secondary',
+    }),
+    createHueBackedRoleScale({
+      colorTone: options.colorTone,
+      hueRoles: options.hueRoles,
+      seedChroma,
+      role: 'accent',
+    }),
+    createHueBackedRoleScale({
+      colorTone: options.colorTone,
+      hueRoles: options.hueRoles,
+      seedChroma,
+      role: 'highlight',
+    }),
+    createHueBackedRoleScale({
+      colorTone: options.colorTone,
+      hueRoles: options.hueRoles,
+      seedChroma,
+      role: 'surfaceTint',
+    }),
     {
       role: 'neutral',
       scale: createZoraNeutralScale(options.seed),

package/src/internal/color/scales.ts

@@ -1,4 +1,6 @@
 import type { ZoraHexColor } from '../../theme/types';
+import type { ZoraColorToneRecipe } from './colorToneRecipes';
+import { getZoraColorToneRoleChromaFactor } from './colorToneRecipes';
 import { clampOklchToGamut, formatOklchAsHex, parseHexToOklch } from './oklch';
 import { type ZoraColorScale, type ZoraColorScaleStep } from './types';
 
@@ -13,6 +15,7 @@ export interface CreateZoraHueScaleOptions {
   hue: number;
   seedChroma: number;
   role: ZoraHueScaleRoleId;
+  colorToneRecipe: ZoraColorToneRecipe;
 }
 
 const PRIMARY_LIGHTNESS_BY_STEP: Record<ZoraColorScaleStep, number> = {
@@ -62,14 +65,6 @@ const MIN_PRIMARY_SCALE_CHROMA = 0.04;
 const NEUTRAL_CHROMA = 0.012;
 const DEFAULT_NEUTRAL_HUE_DEGREES = 260;
 
-const ROLE_CHROMA_FACTOR = {
-  primary: 1,
-  secondary: 0.72,
-  accent: 0.85,
-  highlight: 1,
-  surfaceTint: 0.18,
-} satisfies Record<ZoraHueScaleRoleId, number>;
-
 function clampNumber(value: number, min: number, max: number): number {
   return Math.max(min, Math.min(value, max));
 }
@@ -85,12 +80,34 @@ function resolvePrimaryScaleChroma(seedChroma: number, step: ZoraColorScaleStep)
   return shouldEnforceMin ? Math.max(bounded, MIN_PRIMARY_SCALE_CHROMA) : bounded;
 }
 
+function resolveRoleScaleChroma(options: {
+  seedChroma: number;
+  step: ZoraColorScaleStep;
+  maxChroma: number;
+  minMidChroma: number;
+}): number {
+  const cappedSeedChroma = clampNumber(options.seedChroma, 0, options.maxChroma);
+  const multiplier = PRIMARY_CHROMA_MULTIPLIER_BY_STEP[options.step];
+  const scaled = cappedSeedChroma * multiplier;
+  const bounded = clampNumber(scaled, 0, options.maxChroma);
+  const shouldEnforceMin =
+    options.step >= 300 && options.step <= 700 && options.seedChroma >= options.minMidChroma;
+
+  return shouldEnforceMin ? Math.max(bounded, options.minMidChroma) : bounded;
+}
+
 function resolveHueScaleChroma(
   options: CreateZoraHueScaleOptions,
   step: ZoraColorScaleStep,
 ): number {
-  const factor = ROLE_CHROMA_FACTOR[options.role];
-  return resolvePrimaryScaleChroma(options.seedChroma * factor, step);
+  const factor = getZoraColorToneRoleChromaFactor(options.colorToneRecipe, options.role);
+
+  return resolveRoleScaleChroma({
+    seedChroma: options.seedChroma * factor,
+    step,
+    maxChroma: options.colorToneRecipe.maxChroma,
+    minMidChroma: options.colorToneRecipe.minMidChroma,
+  });
 }
 
 function createScaleEntries(options: CreateZoraColorScaleOptions): ZoraColorScale {