@ankhorage/zora 7.0.0 → 8.0.0

package/src/features/typography/utils/resolveTextStyle.test.ts

@@ -0,0 +1,380 @@
+import type {
+  Breakpoint,
+  FontWeight,
+  Responsive,
+  RoleSemantics,
+  SurfaceTheme,
+} from '@ankhorage/surface';
+import { describe, expect, mock, test } from 'bun:test';
+
+const breakpointOrder: readonly Breakpoint[] = ['base', 'sm', 'md', 'lg', 'xl'];
+
+function isResponsiveRecord<T>(value: Responsive<T>): value is Partial<Record<Breakpoint, T>> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function readResponsiveValue<T>(
+  value: Partial<Record<Breakpoint, T>>,
+  breakpoint: Breakpoint,
+): T | undefined {
+  switch (breakpoint) {
+    case 'base':
+      return value.base;
+    case 'sm':
+      return value.sm;
+    case 'md':
+      return value.md;
+    case 'lg':
+      return value.lg;
+    case 'xl':
+      return value.xl;
+  }
+}
+
+function resolveResponsiveMock<T>(
+  value: Responsive<T> | undefined,
+  breakpoint: Breakpoint,
+): T | undefined {
+  if (value === undefined) return undefined;
+  if (!isResponsiveRecord(value)) return value;
+
+  const activeIndex = breakpointOrder.indexOf(breakpoint);
+  for (let i = activeIndex; i >= 0; i -= 1) {
+    const key = breakpointOrder.at(i);
+    if (!key) continue;
+    const candidate = readResponsiveValue(value, key);
+    if (candidate !== undefined) return candidate;
+  }
+
+  return undefined;
+}
+
+await mock.module('@ankhorage/surface', () => ({
+  resolveResponsive: resolveResponsiveMock,
+}));
+
+const { resolveTextStyle } = await import('./resolveTextStyle');
+
+const emptyFonts: Record<FontWeight, string | undefined> = {
+  '100': undefined,
+  '200': undefined,
+  '300': undefined,
+  '400': undefined,
+  '500': undefined,
+  '600': undefined,
+  '700': undefined,
+  '800': undefined,
+  '900': undefined,
+  bold: undefined,
+  normal: undefined,
+};
+
+function createRole(base: string): RoleSemantics {
+  return {
+    base,
+    hover: `${base}-hover`,
+    strong: `${base}-strong`,
+    softBg: `${base}-soft-bg`,
+    softHover: `${base}-soft-hover`,
+    softActive: `${base}-soft-active`,
+    outline: `${base}-outline`,
+    onSolidText: `${base}-on-solid-text`,
+  };
+}
+
+function createTestTheme(): SurfaceTheme {
+  return {
+    colors: {
+      primary: '#0f766e',
+      secondary: '#2563eb',
+      accent: '#7c3aed',
+      highlight: '#f59e0b',
+      background: '#ffffff',
+      surface: '#ffffff',
+      text: '#111827',
+      textSecondary: '#4b5563',
+      border: '#d1d5db',
+      error: '#dc2626',
+      success: '#16a34a',
+      warning: '#d97706',
+    },
+    config: {
+      id: 'zora-test',
+      name: 'ZORA Test',
+      light: {
+        primaryColor: '#0f766e',
+        harmony: 'analogous',
+      },
+      dark: {
+        primaryColor: '#2dd4bf',
+        harmony: 'analogous',
+      },
+    },
+    radii: {
+      none: 0,
+      s: 4,
+      m: 8,
+      l: 16,
+      full: 9999,
+    },
+    swatches: {
+      primary: {
+        50: '#f0fdfa',
+        100: '#ccfbf1',
+        200: '#99f6e4',
+        300: '#5eead4',
+        400: '#2dd4bf',
+        500: '#14b8a6',
+        600: '#0d9488',
+        700: '#0f766e',
+        800: '#115e59',
+        900: '#134e4a',
+        950: '#042f2e',
+      },
+      neutral: {
+        50: '#f9fafb',
+        100: '#f3f4f6',
+        200: '#e5e7eb',
+        300: '#d1d5db',
+        400: '#9ca3af',
+        500: '#6b7280',
+        600: '#4b5563',
+        700: '#374151',
+        800: '#1f2937',
+        900: '#111827',
+        950: '#030712',
+      },
+    },
+    semantics: {
+      neutral: {
+        bg: '#ffffff',
+        bgSubtle: '#f9fafb',
+        surface: '#ffffff',
+        surfaceHover: '#f3f4f6',
+        surfaceActive: '#e5e7eb',
+        border: '#d1d5db',
+        borderStrong: '#9ca3af',
+        divider: '#e5e7eb',
+        text: '#111827',
+        textMuted: '#4b5563',
+        textSubtle: '#6b7280',
+      },
+      brand: createRole('#0f766e'),
+      secondary: createRole('#2563eb'),
+      accent: createRole('#7c3aed'),
+      highlight: createRole('#f59e0b'),
+      danger: createRole('#dc2626'),
+      success: createRole('#16a34a'),
+      warning: createRole('#d97706'),
+      surface: {
+        default: '#ffffff',
+        subtle: '#f9fafb',
+        raised: '#ffffff',
+      },
+      content: {
+        default: '#111827',
+        muted: '#4b5563',
+        subtle: '#6b7280',
+        inverse: '#ffffff',
+      },
+      border: {
+        default: '#d1d5db',
+        strong: '#9ca3af',
+        focus: '#0f766e',
+      },
+      action: {
+        primary: createRole('#0f766e'),
+        neutral: createRole('#4b5563'),
+        danger: createRole('#dc2626'),
+      },
+    },
+    shadows: {
+      soft: 2,
+      medium: 4,
+      hard: 8,
+    },
+    spacing: {
+      none: 0,
+      xs: 4,
+      s: 8,
+      m: 16,
+      l: 24,
+      xl: 32,
+      xxl: 48,
+    },
+    typography: {
+      headings: {
+        1: { size: 32, lineHeight: 40, weight: 'bold' },
+        2: { size: 24, lineHeight: 32, weight: 'bold' },
+        3: { size: 20, lineHeight: 28, weight: 'bold' },
+        4: { size: 18, lineHeight: 24, weight: 'semiBold' },
+        5: { size: 16, lineHeight: 22, weight: 'semiBold' },
+        6: { size: 14, lineHeight: 20, weight: 'semiBold' },
+      },
+      sizes: {
+        xs: 12,
+        s: 14,
+        m: 16,
+        l: 18,
+        xl: 20,
+        xxl: 24,
+        '3xl': 30,
+        h1: 32,
+        h2: 24,
+        h3: 20,
+        h4: 18,
+        h5: 16,
+        h6: 14,
+      },
+      weights: {
+        thin: '100',
+        extraLight: '200',
+        light: '300',
+        regular: '400',
+        medium: '500',
+        semiBold: '600',
+        bold: '700',
+        extraBold: '800',
+        black: '900',
+      },
+      fonts: {
+        normal: { ...emptyFonts },
+        italic: { ...emptyFonts },
+      },
+    },
+  };
+}
+
+const theme = createTestTheme();
+
+describe('resolveTextStyle', () => {
+  test('resolves default body text from theme typography and content color', () => {
+    const style = resolveTextStyle({ theme, breakpoint: 'base' });
+
+    expect(style.fontSize).toBe(theme.typography.sizes.m);
+    expect(style.lineHeight).toBe(24);
+    expect(style.fontWeight).toBe(theme.typography.weights.regular);
+    expect(style.color).toBe(theme.semantics.content.default);
+    expect(style.elevation).toBe(0);
+  });
+
+  test('maps bodySmall, caption, and label recipes', () => {
+    expect(resolveTextStyle({ theme, breakpoint: 'base', variant: 'bodySmall' })).toMatchObject({
+      fontSize: theme.typography.sizes.s,
+      lineHeight: 20,
+      fontWeight: theme.typography.weights.regular,
+    });
+
+    expect(resolveTextStyle({ theme, breakpoint: 'base', variant: 'caption' })).toMatchObject({
+      fontSize: theme.typography.sizes.xs,
+      lineHeight: 16,
+      fontWeight: theme.typography.weights.regular,
+    });
+
+    expect(resolveTextStyle({ theme, breakpoint: 'base', variant: 'label' })).toMatchObject({
+      fontSize: theme.typography.sizes.s,
+      lineHeight: 18,
+      fontWeight: theme.typography.weights.medium,
+    });
+  });
+
+  test('resolves lead smaller on base and larger on md', () => {
+    expect(resolveTextStyle({ theme, breakpoint: 'base', variant: 'lead' })).toMatchObject({
+      fontSize: theme.typography.sizes.m,
+      lineHeight: 24,
+    });
+
+    expect(resolveTextStyle({ theme, breakpoint: 'md', variant: 'lead' })).toMatchObject({
+      fontSize: theme.typography.sizes.l,
+      lineHeight: 28,
+    });
+  });
+
+  test('resolves eyebrow uppercase, letter spacing, and semibold weight', () => {
+    const style = resolveTextStyle({ theme, breakpoint: 'base', variant: 'eyebrow' });
+
+    expect(style.textTransform).toBe('uppercase');
+    expect(style.letterSpacing).toBe(0.8);
+    expect(style.fontWeight).toBe(theme.typography.weights.semiBold);
+  });
+
+  test('resolves code as monospace text', () => {
+    expect(resolveTextStyle({ theme, breakpoint: 'base', variant: 'code' }).fontFamily).toBe(
+      'monospace',
+    );
+  });
+
+  test('maps emphasis and color to semantic colors', () => {
+    expect(resolveTextStyle({ theme, breakpoint: 'base', emphasis: 'default' }).color).toBe(
+      theme.semantics.content.default,
+    );
+    expect(resolveTextStyle({ theme, breakpoint: 'base', emphasis: 'muted' }).color).toBe(
+      theme.semantics.content.muted,
+    );
+    expect(resolveTextStyle({ theme, breakpoint: 'base', emphasis: 'subtle' }).color).toBe(
+      theme.semantics.content.subtle,
+    );
+    expect(resolveTextStyle({ theme, breakpoint: 'base', emphasis: 'inverse' }).color).toBe(
+      theme.semantics.content.inverse,
+    );
+    expect(resolveTextStyle({ theme, breakpoint: 'base', color: 'primary' }).color).toBe(
+      theme.semantics.action.primary.base,
+    );
+    expect(resolveTextStyle({ theme, breakpoint: 'base', color: 'danger' }).color).toBe(
+      theme.semantics.action.danger.base,
+    );
+    expect(resolveTextStyle({ theme, breakpoint: 'base', color: 'success' }).color).toBe(
+      theme.semantics.success.base,
+    );
+    expect(resolveTextStyle({ theme, breakpoint: 'base', color: 'warning' }).color).toBe(
+      theme.semantics.warning.base,
+    );
+    expect(
+      resolveTextStyle({ theme, breakpoint: 'base', color: 'primary', emphasis: 'inverse' }).color,
+    ).toBe(theme.semantics.action.primary.onSolidText);
+  });
+
+  test('allows explicit weight to override the recipe weight', () => {
+    const style = resolveTextStyle({
+      theme,
+      breakpoint: 'base',
+      variant: 'caption',
+      weight: 'bold',
+    });
+
+    expect(style.fontWeight).toBe(theme.typography.weights.bold);
+  });
+
+  test('uses italic font family when available', () => {
+    const fontTheme = createTestTheme();
+    fontTheme.typography.fonts.italic[fontTheme.typography.weights.medium] = 'ZoraMediumItalic';
+
+    const style = resolveTextStyle({
+      theme: fontTheme,
+      breakpoint: 'base',
+      italic: true,
+      weight: 'medium',
+    });
+
+    expect(style.fontStyle).toBe('italic');
+    expect(style.fontFamily).toBe('ZoraMediumItalic');
+  });
+
+  test('resolves responsive variant, color, emphasis, align, and weight values', () => {
+    const style = resolveTextStyle({
+      theme,
+      breakpoint: 'md',
+      variant: { base: 'bodySmall', md: 'lead' },
+      emphasis: { base: 'muted', md: 'default' },
+      color: { base: 'neutral', md: 'primary' },
+      align: { base: 'center', md: 'left' },
+      weight: { base: 'regular', md: 'semiBold' },
+    });
+
+    expect(style.fontSize).toBe(theme.typography.sizes.l);
+    expect(style.lineHeight).toBe(28);
+    expect(style.color).toBe(theme.semantics.action.primary.base);
+    expect(style.textAlign).toBe('left');
+    expect(style.fontWeight).toBe(theme.typography.weights.semiBold);
+  });
+});

package/src/features/typography/utils/resolveTextStyle.ts

@@ -0,0 +1,220 @@
+import {
+  type Breakpoint,
+  type FontWeight,
+  resolveResponsive,
+  type Responsive,
+  type RoleSemantics,
+  type SurfaceTheme,
+} from '@ankhorage/surface';
+import type { TextStyle } from 'react-native';
+
+import type {
+  TextAlign,
+  TextColor,
+  TextEmphasis,
+  TextVariant,
+  TextWeight,
+} from '../../../types/text';
+/*** Resolves responsive text variants and theme semantics into a native text style. */
+export function resolveTextStyle({
+  theme,
+  breakpoint,
+  variant,
+  color,
+  emphasis,
+  weight,
+  align,
+  italic = false,
+}: ResolveTextStyleOptions): TextStyle {
+  const resolvedVariant = resolveResponsive(variant, breakpoint) ?? 'body';
+  const resolvedEmphasis = resolveResponsive(emphasis, breakpoint) ?? 'default';
+  const resolvedColor = resolveResponsive(color, breakpoint);
+  const resolvedAlign = resolveResponsive(align, breakpoint);
+  const recipe = resolveVariantRecipe(theme, resolvedVariant, breakpoint);
+  const resolvedWeight = resolveWeight(
+    theme,
+    resolveResponsive(weight, breakpoint) ?? recipe.weight,
+  );
+
+  return {
+    color: resolveTextColor(theme, resolvedEmphasis, resolvedColor),
+    elevation: 0,
+    fontFamily: resolveFontFamily({
+      theme,
+      variant: resolvedVariant,
+      weight: resolvedWeight,
+      italic,
+    }),
+    fontSize: recipe.fontSize,
+    fontStyle: italic ? 'italic' : 'normal',
+    fontWeight: resolvedWeight,
+    letterSpacing: recipe.letterSpacing,
+    lineHeight: recipe.lineHeight,
+    textAlign: resolvedAlign,
+    textTransform: recipe.textTransform,
+  };
+}
+
+interface VariantRecipe {
+  fontSize: number;
+  lineHeight: number;
+  weight: TextWeight;
+  textTransform?: TextStyle['textTransform'];
+  letterSpacing?: number;
+}
+
+interface ResolveTextStyleOptions {
+  theme: SurfaceTheme;
+  breakpoint: Breakpoint;
+  variant?: Responsive<TextVariant>;
+  color?: Responsive<TextColor>;
+  emphasis?: Responsive<TextEmphasis>;
+  weight?: Responsive<TextWeight>;
+  align?: Responsive<TextAlign>;
+  italic?: boolean;
+}
+
+function isMediumBreakpointOrLarger(breakpoint: Breakpoint): boolean {
+  return breakpoint === 'md' || breakpoint === 'lg' || breakpoint === 'xl';
+}
+
+function resolveWeight(theme: SurfaceTheme, weight: TextWeight): FontWeight {
+  switch (weight) {
+    case 'medium':
+      return theme.typography.weights.medium;
+    case 'semiBold':
+      return theme.typography.weights.semiBold;
+    case 'bold':
+      return theme.typography.weights.bold;
+    case 'regular':
+    default:
+      return theme.typography.weights.regular;
+  }
+}
+
+function resolveFontFamily({
+  theme,
+  variant,
+  weight,
+  italic,
+}: {
+  theme: SurfaceTheme;
+  variant: TextVariant;
+  weight: FontWeight;
+  italic: boolean;
+}): string | undefined {
+  if (variant === 'code') {
+    return 'monospace';
+  }
+
+  const fonts = italic ? theme.typography.fonts.italic : theme.typography.fonts.normal;
+
+  for (const [fontWeight, fontFamily] of Object.entries(fonts)) {
+    if (fontWeight === weight) {
+      return fontFamily;
+    }
+  }
+
+  return undefined;
+}
+
+function resolveVariantRecipe(
+  theme: SurfaceTheme,
+  variant: TextVariant,
+  breakpoint: Breakpoint,
+): VariantRecipe {
+  switch (variant) {
+    case 'lead':
+      return {
+        fontSize: isMediumBreakpointOrLarger(breakpoint)
+          ? theme.typography.sizes.l
+          : theme.typography.sizes.m,
+        lineHeight: isMediumBreakpointOrLarger(breakpoint) ? 28 : 24,
+        weight: 'regular',
+      };
+    case 'bodySmall':
+      return {
+        fontSize: theme.typography.sizes.s,
+        lineHeight: 20,
+        weight: 'regular',
+      };
+    case 'caption':
+      return {
+        fontSize: theme.typography.sizes.xs,
+        lineHeight: 16,
+        weight: 'regular',
+      };
+    case 'label':
+      return {
+        fontSize: theme.typography.sizes.s,
+        lineHeight: 18,
+        weight: 'medium',
+      };
+    case 'eyebrow':
+      return {
+        fontSize: theme.typography.sizes.xs,
+        lineHeight: 16,
+        weight: 'semiBold',
+        textTransform: 'uppercase',
+        letterSpacing: 0.8,
+      };
+    case 'code':
+      return {
+        fontSize: theme.typography.sizes.s,
+        lineHeight: 20,
+        weight: 'regular',
+      };
+    case 'body':
+    default:
+      return {
+        fontSize: theme.typography.sizes.m,
+        lineHeight: 24,
+        weight: 'regular',
+      };
+  }
+}
+
+function resolveRoleSemantics(theme: SurfaceTheme, color: TextColor): RoleSemantics {
+  switch (color) {
+    case 'secondary':
+      return theme.semantics.secondary;
+    case 'tertiary':
+      return theme.semantics.accent;
+    case 'quaternary':
+      return theme.semantics.highlight;
+    case 'neutral':
+      return theme.semantics.action.neutral;
+    case 'error':
+      return theme.semantics.error;
+    case 'info':
+      return theme.semantics.info;
+    case 'danger':
+      return theme.semantics.action.danger;
+    case 'success':
+      return theme.semantics.success;
+    case 'warning':
+      return theme.semantics.warning;
+    case 'primary':
+    default:
+      return theme.semantics.action.primary;
+  }
+}
+
+function resolveTextColor(theme: SurfaceTheme, emphasis: TextEmphasis, color?: TextColor): string {
+  if (color) {
+    const role = resolveRoleSemantics(theme, color);
+    return emphasis === 'inverse' ? role.onSolidText : role.base;
+  }
+
+  switch (emphasis) {
+    case 'muted':
+      return theme.semantics.content.muted;
+    case 'subtle':
+      return theme.semantics.content.subtle;
+    case 'inverse':
+      return theme.semantics.content.inverse;
+    case 'default':
+    default:
+      return theme.semantics.content.default;
+  }
+}

package/src/features/typography/utils/resolveTextThemeRecipe.ts

@@ -0,0 +1,54 @@
+import type { ThemeRecipeOverrideValue } from '@ankhorage/contracts';
+
+import type {
+  TextAlign,
+  TextColor,
+  TextEmphasis,
+  TextVariant,
+  TextWeight,
+} from '../../../types/text';
+
+export function resolveTextThemeRecipe(fields: Readonly<Record<string, ThemeRecipeOverrideValue>>) {
+  return {
+    variant: readVariant(fields.variant),
+    color: readColor(fields.color),
+    emphasis: readEmphasis(fields.emphasis),
+    align: readAlign(fields.align),
+    weight: readWeight(fields.weight),
+    italic: typeof fields.italic === 'boolean' ? fields.italic : undefined,
+  };
+}
+
+function readVariant(value: ThemeRecipeOverrideValue | undefined): TextVariant | undefined {
+  if (value === 'body' || value === 'lead' || value === 'bodySmall' || value === 'caption')
+    return value;
+  if (value === 'label' || value === 'eyebrow' || value === 'code') return value;
+  return undefined;
+}
+
+function readColor(value: ThemeRecipeOverrideValue | undefined): TextColor | undefined {
+  if (typeof value !== 'string') return undefined;
+  if (value === 'primary' || value === 'secondary' || value === 'tertiary') return value;
+  if (value === 'quaternary' || value === 'neutral' || value === 'danger') return value;
+  if (value === 'success' || value === 'warning' || value === 'error' || value === 'info')
+    return value;
+  return undefined;
+}
+
+function readEmphasis(value: ThemeRecipeOverrideValue | undefined): TextEmphasis | undefined {
+  if (value === 'default' || value === 'muted' || value === 'subtle' || value === 'inverse')
+    return value;
+  return undefined;
+}
+
+function readAlign(value: ThemeRecipeOverrideValue | undefined): TextAlign | undefined {
+  if (value === 'auto' || value === 'left' || value === 'right') return value;
+  if (value === 'center' || value === 'justify') return value;
+  return undefined;
+}
+
+function readWeight(value: ThemeRecipeOverrideValue | undefined): TextWeight | undefined {
+  if (value === 'regular' || value === 'medium' || value === 'semiBold' || value === 'bold')
+    return value;
+  return undefined;
+}

package/src/features/typography/utils/textThemeRecipeMeta.ts

@@ -0,0 +1,34 @@
+import { ZORA_COLORS, ZORA_EMPHASES } from '../../../internal/colorModel';
+import type { ZoraThemeRecipeMeta } from '../../../metadata/themeRecipeTypes';
+
+export const textThemeRecipeMeta = {
+  name: 'Text',
+  kind: 'component',
+  description: 'Maps semantic Text presentation defaults into runtime props.',
+  fields: {
+    variant: {
+      type: 'choice',
+      label: 'Typography variant',
+      options: ['body', 'lead', 'bodySmall', 'caption', 'label', 'eyebrow', 'code'],
+      default: 'body',
+    },
+    color: { type: 'choice', label: 'Color', options: ZORA_COLORS },
+    emphasis: {
+      type: 'choice',
+      label: 'Emphasis',
+      options: ZORA_EMPHASES,
+      default: 'default',
+    },
+    align: {
+      type: 'choice',
+      label: 'Align',
+      options: ['auto', 'left', 'right', 'center', 'justify'],
+    },
+    weight: {
+      type: 'choice',
+      label: 'Weight',
+      options: ['regular', 'medium', 'semiBold', 'bold'],
+    },
+    italic: { type: 'boolean', label: 'Italic', default: false },
+  },
+} as const satisfies ZoraThemeRecipeMeta;