@ankhorage/zora 0.12.3 → 0.13.2

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 {

package/src/theme/createZoraThemeConfig.test.ts

@@ -16,10 +16,10 @@ describe('createZoraThemeConfig', () => {
     expect(themeConfig.name).toBe('ZORA');
     expect(isSixDigitHexColor(themeConfig.light.primaryColor)).toBe(true);
     expect(themeConfig.light.harmony).toBe('analogous');
-    expect(themeConfig.light.systemTone).toBe('jewel');
+    expect(themeConfig.light.colorTone).toBe('jewel');
     expect(isSixDigitHexColor(themeConfig.dark.primaryColor)).toBe(true);
     expect(themeConfig.dark.harmony).toBe('analogous');
-    expect(themeConfig.dark.systemTone).toBe('jewel');
+    expect(themeConfig.dark.colorTone).toBe('jewel');
 
     expect(themeConfig.light.primaryColor).not.toBe(themeConfig.dark.primaryColor);
 
@@ -33,17 +33,17 @@ describe('createZoraThemeConfig', () => {
       id: 'studio',
       primaryColor: '#0f766e',
       harmony: 'analogous',
-      tone: 'jewel',
+      colorTone: 'jewel',
     });
 
     expect(themeConfig.id).toBe('studio');
     expect(themeConfig.name).toBe('studio');
     expect(isSixDigitHexColor(themeConfig.light.primaryColor)).toBe(true);
     expect(themeConfig.light.harmony).toBe('analogous');
-    expect(themeConfig.light.systemTone).toBe('jewel');
+    expect(themeConfig.light.colorTone).toBe('jewel');
     expect(isSixDigitHexColor(themeConfig.dark.primaryColor)).toBe(true);
     expect(themeConfig.dark.harmony).toBe('analogous');
-    expect(themeConfig.dark.systemTone).toBe('jewel');
+    expect(themeConfig.dark.colorTone).toBe('jewel');
 
     expect(themeConfig.light.primaryColor).not.toBe(themeConfig.dark.primaryColor);
   });

package/src/theme/createZoraThemeConfig.ts

@@ -11,12 +11,12 @@ export function createZoraThemeConfig(theme: ZoraTheme = zoraDefaultTheme): Them
     light: {
       primaryColor: resolveModePrimaryColor(theme.primaryColor, 'light'),
       harmony: theme.harmony,
-      systemTone: theme.tone,
+      colorTone: theme.colorTone,
     },
     dark: {
       primaryColor: resolveModePrimaryColor(theme.primaryColor, 'dark'),
       harmony: theme.harmony,
-      systemTone: theme.tone,
+      colorTone: theme.colorTone,
     },
   };
 }

package/src/theme/types.ts

@@ -1,4 +1,4 @@
-import type { ThemeConfig } from '@ankhorage/surface';
+import type { ColorHarmony, ColorTone, ThemeConfig } from '@ankhorage/surface';
 
 export type ZoraThemeId = string;
 
@@ -6,22 +6,38 @@ export type ZoraThemeMode = 'light' | 'dark';
 
 export type ZoraHexColor = `#${string}`;
 
-export type ZoraColorHarmony =
-  | 'monochromatic'
-  | 'analogous'
-  | 'complementary'
-  | 'splitComplementary'
-  | 'triadic'
-  | 'tetradic';
+export const ZORA_COLOR_HARMONIES = [
+  'monochromatic',
+  'analogous',
+  'complementary',
+  'splitComplementary',
+  'triadic',
+  'tetradic',
+] as const satisfies readonly ColorHarmony[];
 
-export type ZoraColorTone = 'neutral' | 'pastel' | 'earth' | 'jewel' | 'fluorescent';
+export type ZoraColorHarmony = ColorHarmony;
+
+export const ZORA_COLOR_TONES = [
+  'neutral',
+  'pastel',
+  'earth',
+  'mineral',
+  'muted',
+  'jewel',
+  'fluorescent',
+  'obsidian',
+  'vaporwave',
+  'monochromeAccent',
+] as const satisfies readonly ColorTone[];
+
+export type ZoraColorTone = ColorTone;
 
 export interface ZoraTheme {
   id: ZoraThemeId;
   name?: string;
   primaryColor: ZoraHexColor;
   harmony: ZoraColorHarmony;
-  tone: ZoraColorTone;
+  colorTone: ZoraColorTone;
 }
 
 export interface ZoraComputedTheme {

package/src/theme/zoraDefaultTheme.ts

@@ -5,5 +5,5 @@ export const zoraDefaultTheme: ZoraTheme = {
   name: 'ZORA',
   primaryColor: '#0f766e',
   harmony: 'analogous',
-  tone: 'jewel',
+  colorTone: 'jewel',
 };