@ankhorage/zora 0.12.2 → 0.13.1

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';
 
@@ -7,6 +9,15 @@ export interface CreateZoraColorScaleOptions {
   role?: 'primary' | 'neutral';
 }
 
+export type ZoraHueScaleRoleId = 'primary' | 'secondary' | 'accent' | 'highlight' | 'surfaceTint';
+
+export interface CreateZoraHueScaleOptions {
+  hue: number;
+  seedChroma: number;
+  role: ZoraHueScaleRoleId;
+  colorToneRecipe: ZoraColorToneRecipe;
+}
+
 const PRIMARY_LIGHTNESS_BY_STEP: Record<ZoraColorScaleStep, number> = {
   50: 0.97,
   100: 0.93,
@@ -69,6 +80,36 @@ 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 = 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 {
   const seed = parseHexToOklch(options.seed);
 
@@ -143,3 +184,11 @@ export function createZoraPrimaryScale(seed: ZoraHexColor): ZoraColorScale {
 export function createZoraNeutralScale(seed: ZoraHexColor = '#94a3b8'): ZoraColorScale {
   return createZoraColorScale({ seed, role: 'neutral' });
 }
+
+export function createZoraHueScale(options: CreateZoraHueScaleOptions): ZoraColorScale {
+  return createScaleFromRamp({
+    hue: options.hue,
+    chromaByStep: (step) => resolveHueScaleChroma(options, step),
+    lightnessByStep: PRIMARY_LIGHTNESS_BY_STEP,
+  });
+}

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',
 };