@ankhorage/zora 25.8.15 → 25.8.17

package/src/features/tabletop/meta.ts

@@ -1,5 +1,37 @@
 import type { ZoraComponentMeta } from '../../types/authoring';
 
+const tabletopPresentationProps = {
+  shape: {
+    type: 'enum',
+    category: 'Table',
+    label: 'Shape',
+    enum: ['circle', 'oval', 'rounded'],
+    default: 'oval',
+    authoring: { authority: 'instance' },
+  },
+  cardSize: {
+    type: 'enum',
+    category: 'Cards',
+    label: 'Card size',
+    enum: ['small', 'medium', 'large'],
+    default: 'small',
+    authoring: { authority: 'instance' },
+  },
+  disabled: {
+    type: 'boolean',
+    category: 'State',
+    label: 'Disabled',
+    default: false,
+    authoring: { authority: 'instance' },
+  },
+  accessibilityLabel: {
+    type: 'string',
+    category: 'Accessibility',
+    label: 'Accessibility label',
+    authoring: { authority: 'instance' },
+  },
+} as const;
+
 export const cardBackMeta = {
   name: 'CardBack',
   category: 'component',
@@ -163,14 +195,6 @@ export const tabletopTableMeta = {
       label: 'Center sublabel',
       authoring: { authority: 'instance' },
     },
-    shape: {
-      type: 'enum',
-      category: 'Table',
-      label: 'Shape',
-      enum: ['circle', 'oval', 'rounded'],
-      default: 'oval',
-      authoring: { authority: 'instance' },
-    },
     seatCount: {
       type: 'enum',
       category: 'Players',
@@ -178,27 +202,7 @@ export const tabletopTableMeta = {
       enum: [2, 3, 4, 5, 6, 7, 8, 9, 10],
       authoring: { authority: 'instance' },
     },
-    cardSize: {
-      type: 'enum',
-      category: 'Cards',
-      label: 'Card size',
-      enum: ['small', 'medium', 'large'],
-      default: 'small',
-      authoring: { authority: 'instance' },
-    },
-    disabled: {
-      type: 'boolean',
-      category: 'State',
-      label: 'Disabled',
-      default: false,
-      authoring: { authority: 'instance' },
-    },
-    accessibilityLabel: {
-      type: 'string',
-      category: 'Accessibility',
-      label: 'Accessibility label',
-      authoring: { authority: 'instance' },
-    },
+    ...tabletopPresentationProps,
   },
 } as const satisfies ZoraComponentMeta;
 export const pokerTrainingTableMeta = {
@@ -245,34 +249,6 @@ export const pokerTrainingTableMeta = {
       default: 100,
       authoring: { authority: 'instance' },
     },
-    shape: {
-      type: 'enum',
-      category: 'Table',
-      label: 'Shape',
-      enum: ['circle', 'oval', 'rounded'],
-      default: 'oval',
-      authoring: { authority: 'instance' },
-    },
-    cardSize: {
-      type: 'enum',
-      category: 'Cards',
-      label: 'Card size',
-      enum: ['small', 'medium', 'large'],
-      default: 'small',
-      authoring: { authority: 'instance' },
-    },
-    disabled: {
-      type: 'boolean',
-      category: 'State',
-      label: 'Disabled',
-      default: false,
-      authoring: { authority: 'instance' },
-    },
-    accessibilityLabel: {
-      type: 'string',
-      category: 'Accessibility',
-      label: 'Accessibility label',
-      authoring: { authority: 'instance' },
-    },
+    ...tabletopPresentationProps,
   },
 } as const satisfies ZoraComponentMeta;

package/src/features/time-picker/composition/TimePickerContent.tsx

@@ -4,7 +4,7 @@ import { ScrollView, StyleSheet } from 'react-native';
 import type { TimePickerProps } from '../../../types/time-picker';
 import { Button } from '../../button/public';
 import { View } from '../../layout/public';
-import { Text } from '../../typography/public';
+import { PickerHeader } from '../../picker/composition/PickerHeader';
 
 const MINUTES_PER_DAY = 24 * 60;
 const DEFAULT_STEP_MINUTES = 30;
@@ -69,28 +69,6 @@ interface TimePickerContentProps extends Pick<
   onSelect: (value: string) => void;
 }
 
-/*** Renders the shared title block used by picker overlays. */
-function PickerHeader({
-  description,
-  title,
-}: {
-  description: React.ReactNode | undefined;
-  title: React.ReactNode;
-}) {
-  return (
-    <View gap="xxs">
-      <Text align="center" variant="label" weight="semiBold">
-        {title}
-      </Text>
-      {description ? (
-        <Text align="center" emphasis="muted" variant="bodySmall">
-          {description}
-        </Text>
-      ) : null}
-    </View>
-  );
-}
-
 /*** Renders one accessible selectable time option. */
 function TimePickerOption({
   formatTime,

package/src/features/time-picker/composition/TimePickerField.tsx

@@ -1,9 +1,7 @@
-import { Field } from '@ankhorage/surface';
 import type React from 'react';
 
 import type { TimePickerProps } from '../../../types/time-picker';
-import { View } from '../../layout/public';
-import { Text } from '../../typography/public';
+import { PickerField } from '../../picker/composition/PickerField';
 
 /*** Renders the shared TimePicker field frame around a platform-specific trigger. */
 export function TimePickerField({
@@ -15,18 +13,7 @@ export function TimePickerField({
   required,
   testID,
 }: TimePickerFieldProps) {
-  return (
-    <Field
-      disabled={disabled}
-      errorText={error}
-      invalid={Boolean(error)}
-      label={label ? renderLabel(label, description) : undefined}
-      required={required}
-      testID={testID}
-    >
-      {children}
-    </Field>
-  );
+  return <PickerField {...{ children, description, disabled, error, label, required, testID }} />;
 }
 
 interface TimePickerFieldProps extends Pick<
@@ -35,19 +22,3 @@ interface TimePickerFieldProps extends Pick<
 > {
   children: React.ReactNode;
 }
-
-/*** Renders the picker label and optional supporting description. */
-function renderLabel(label: React.ReactNode, description: React.ReactNode | undefined) {
-  return (
-    <View gap="xs">
-      <Text variant="label" weight="semiBold">
-        {label}
-      </Text>
-      {description ? (
-        <Text emphasis="muted" variant="bodySmall">
-          {description}
-        </Text>
-      ) : null}
-    </View>
-  );
-}

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

@@ -1,5 +1,5 @@
 import type { ZoraThemeRecipeMeta } from '../../../types/theme-recipe';
-import { ZORA_COLORS, ZORA_EMPHASES } from '../../theme/colorModel';
+import { typographyThemeRecipeFields } from './typographyThemeRecipeFields';
 
 export const headingThemeRecipeMeta = {
   name: 'Heading',
@@ -11,23 +11,6 @@ export const headingThemeRecipeMeta = {
       label: 'Size',
       options: ['display', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
     },
-    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 },
+    ...typographyThemeRecipeFields,
   },
 } as const satisfies ZoraThemeRecipeMeta;

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

@@ -1,4 +1,4 @@
-import type { FontWeight, RoleSemantics, SurfaceTheme } from '@ankhorage/surface';
+import type { SurfaceTheme } from '@ankhorage/surface';
 import type { TextStyle } from 'react-native';
 
 import type {
@@ -10,6 +10,7 @@ import type {
   HeadingWeight,
 } from '../../../types/heading';
 import { resolveHeadingSizeFromLevel } from './resolveHeadingSizeFromLevel';
+import { resolveTypographyStyleTokens } from './resolveTypographyStyleTokens';
 export function resolveHeadingRecipe(
   theme: SurfaceTheme,
   {
@@ -23,15 +24,21 @@ export function resolveHeadingRecipe(
   }: ResolveHeadingRecipeOptions,
 ): TextStyle {
   const recipe = resolveSizeRecipe(theme, size ?? resolveHeadingSizeFromLevel(level));
-  const resolvedWeight = resolveWeight(theme, weight ?? recipe.weight);
+  const tokens = resolveTypographyStyleTokens({
+    theme,
+    color,
+    emphasis,
+    weight: weight ?? recipe.weight,
+    italic,
+  });
 
   return {
-    color: resolveHeadingColor(theme, emphasis, color),
+    color: tokens.color,
     elevation: 0,
-    fontFamily: resolveFontFamily({ theme, weight: resolvedWeight, italic }),
+    fontFamily: tokens.fontFamily,
     fontSize: recipe.fontSize,
     fontStyle: italic ? 'italic' : 'normal',
-    fontWeight: resolvedWeight,
+    fontWeight: tokens.fontWeight,
     lineHeight: recipe.lineHeight,
     textAlign: align,
   };
@@ -89,86 +96,3 @@ function resolveSizeRecipe(theme: SurfaceTheme, size: HeadingSize): HeadingRecip
     weight: heading.weight,
   };
 }
-
-function resolveRoleSemantics(theme: SurfaceTheme, color: HeadingColor): 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 resolveHeadingColor(
-  theme: SurfaceTheme,
-  emphasis: HeadingEmphasis,
-  color?: HeadingColor,
-): 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;
-  }
-}
-
-function resolveWeight(theme: SurfaceTheme, weight: HeadingWeight): 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,
-  weight,
-  italic,
-}: {
-  theme: SurfaceTheme;
-  weight: FontWeight;
-  italic: boolean;
-}): string | undefined {
-  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;
-}

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

@@ -1,23 +1,14 @@
 import type { ThemeRecipeOverrideValue } from '@ankhorage/contracts';
 
-import type {
-  HeadingAlign,
-  HeadingColor,
-  HeadingEmphasis,
-  HeadingSize,
-  HeadingWeight,
-} from '../../../types/heading';
+import type { HeadingSize } from '../../../types/heading';
+import { resolveTypographyThemeRecipeFields } from './resolveTypographyThemeRecipeFields';
 
 export function resolveHeadingThemeRecipe(
   fields: Readonly<Record<string, ThemeRecipeOverrideValue>>,
 ) {
   return {
     size: readSize(fields.size),
-    color: readColor(fields.color),
-    emphasis: readEmphasis(fields.emphasis),
-    align: readAlign(fields.align),
-    weight: readWeight(fields.weight),
-    italic: typeof fields.italic === 'boolean' ? fields.italic : undefined,
+    ...resolveTypographyThemeRecipeFields(fields),
   };
 }
 
@@ -26,30 +17,3 @@ function readSize(value: ThemeRecipeOverrideValue | undefined): HeadingSize | un
   if (value === 'h4' || value === 'h5' || value === 'h6') return value;
   return undefined;
 }
-
-function readColor(value: ThemeRecipeOverrideValue | undefined): HeadingColor | 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): HeadingEmphasis | undefined {
-  if (value === 'default' || value === 'muted' || value === 'subtle' || value === 'inverse')
-    return value;
-  return undefined;
-}
-
-function readAlign(value: ThemeRecipeOverrideValue | undefined): HeadingAlign | undefined {
-  if (value === 'auto' || value === 'left' || value === 'right') return value;
-  if (value === 'center' || value === 'justify') return value;
-  return undefined;
-}
-
-function readWeight(value: ThemeRecipeOverrideValue | undefined): HeadingWeight | undefined {
-  if (value === 'regular' || value === 'medium' || value === 'semiBold' || value === 'bold')
-    return value;
-  return undefined;
-}

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

@@ -1,9 +1,7 @@
 import {
   type Breakpoint,
-  type FontWeight,
   resolveResponsive,
   type Responsive,
-  type RoleSemantics,
   type SurfaceTheme,
 } from '@ankhorage/surface';
 import type { TextStyle } from 'react-native';
@@ -15,6 +13,7 @@ import type {
   TextVariant,
   TextWeight,
 } from '../../../types/text';
+import { resolveTypographyStyleTokens } from './resolveTypographyStyleTokens';
 /*** Resolves responsive text variants and theme semantics into a native text style. */
 export function resolveTextStyle({
   theme,
@@ -31,23 +30,21 @@ export function resolveTextStyle({
   const resolvedColor = resolveResponsive(color, breakpoint);
   const resolvedAlign = resolveResponsive(align, breakpoint);
   const recipe = resolveVariantRecipe(theme, resolvedVariant, breakpoint);
-  const resolvedWeight = resolveWeight(
+  const tokens = resolveTypographyStyleTokens({
     theme,
-    resolveResponsive(weight, breakpoint) ?? recipe.weight,
-  );
+    color: resolvedColor,
+    emphasis: resolvedEmphasis,
+    weight: resolveResponsive(weight, breakpoint) ?? recipe.weight,
+    italic,
+  });
 
   return {
-    color: resolveTextColor(theme, resolvedEmphasis, resolvedColor),
+    color: tokens.color,
     elevation: 0,
-    fontFamily: resolveFontFamily({
-      theme,
-      variant: resolvedVariant,
-      weight: resolvedWeight,
-      italic,
-    }),
+    fontFamily: resolvedVariant === 'code' ? 'monospace' : tokens.fontFamily,
     fontSize: recipe.fontSize,
     fontStyle: italic ? 'italic' : 'normal',
-    fontWeight: resolvedWeight,
+    fontWeight: tokens.fontWeight,
     letterSpacing: recipe.letterSpacing,
     lineHeight: recipe.lineHeight,
     textAlign: resolvedAlign,
@@ -78,46 +75,6 @@ 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,
@@ -173,48 +130,3 @@ function resolveVariantRecipe(
       };
   }
 }
-
-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

@@ -1,21 +1,12 @@
 import type { ThemeRecipeOverrideValue } from '@ankhorage/contracts';
 
-import type {
-  TextAlign,
-  TextColor,
-  TextEmphasis,
-  TextVariant,
-  TextWeight,
-} from '../../../types/text';
+import type { TextVariant } from '../../../types/text';
+import { resolveTypographyThemeRecipeFields } from './resolveTypographyThemeRecipeFields';
 
 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,
+    ...resolveTypographyThemeRecipeFields(fields),
   };
 }
 
@@ -25,30 +16,3 @@ function readVariant(value: ThemeRecipeOverrideValue | undefined): TextVariant |
   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;
-}