@ankhorage/zora 1.5.1 → 2.1.0

package/src/components/text/resolveTextRecipe.test.ts

@@ -286,31 +286,34 @@ describe('resolveTextStyle', () => {
     );
   });
 
-  test('maps tones to semantic colors', () => {
-    expect(resolveTextStyle({ theme, breakpoint: 'base', tone: 'default' }).color).toBe(
+  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', tone: 'muted' }).color).toBe(
+    expect(resolveTextStyle({ theme, breakpoint: 'base', emphasis: 'muted' }).color).toBe(
       theme.semantics.content.muted,
     );
-    expect(resolveTextStyle({ theme, breakpoint: 'base', tone: 'subtle' }).color).toBe(
+    expect(resolveTextStyle({ theme, breakpoint: 'base', emphasis: 'subtle' }).color).toBe(
       theme.semantics.content.subtle,
     );
-    expect(resolveTextStyle({ theme, breakpoint: 'base', tone: 'inverse' }).color).toBe(
+    expect(resolveTextStyle({ theme, breakpoint: 'base', emphasis: 'inverse' }).color).toBe(
       theme.semantics.content.inverse,
     );
-    expect(resolveTextStyle({ theme, breakpoint: 'base', tone: 'primary' }).color).toBe(
-      theme.semantics.brand.base,
+    expect(resolveTextStyle({ theme, breakpoint: 'base', color: 'primary' }).color).toBe(
+      theme.semantics.action.primary.base,
     );
-    expect(resolveTextStyle({ theme, breakpoint: 'base', tone: 'danger' }).color).toBe(
-      theme.semantics.danger.base,
+    expect(resolveTextStyle({ theme, breakpoint: 'base', color: 'danger' }).color).toBe(
+      theme.semantics.action.danger.base,
     );
-    expect(resolveTextStyle({ theme, breakpoint: 'base', tone: 'success' }).color).toBe(
+    expect(resolveTextStyle({ theme, breakpoint: 'base', color: 'success' }).color).toBe(
       theme.semantics.success.base,
     );
-    expect(resolveTextStyle({ theme, breakpoint: 'base', tone: 'warning' }).color).toBe(
+    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', () => {
@@ -339,19 +342,20 @@ describe('resolveTextStyle', () => {
     expect(style.fontFamily).toBe('ZoraMediumItalic');
   });
 
-  test('resolves responsive variant, tone, align, and weight values', () => {
+  test('resolves responsive variant, color, emphasis, align, and weight values', () => {
     const style = resolveTextStyle({
       theme,
       breakpoint: 'md',
       variant: { base: 'bodySmall', md: 'lead' },
-      tone: { base: 'muted', md: 'primary' },
+      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.brand.base);
+    expect(style.color).toBe(theme.semantics.action.primary.base);
     expect(style.textAlign).toBe('left');
     expect(style.fontWeight).toBe(theme.typography.weights.semiBold);
   });

package/src/components/text/resolveTextRecipe.ts

@@ -3,11 +3,12 @@ import {
   type FontWeight,
   resolveResponsive,
   type Responsive,
+  type RoleSemantics,
   type SurfaceTheme,
 } from '@ankhorage/surface';
 import type { TextStyle } from 'react-native';
 
-import type { TextAlign, TextTone, TextVariant, TextWeight } from './types';
+import type { TextAlign, TextColor, TextEmphasis, TextVariant, TextWeight } from './types';
 
 interface VariantRecipe {
   fontSize: number;
@@ -21,7 +22,8 @@ interface ResolveTextStyleOptions {
   theme: SurfaceTheme;
   breakpoint: Breakpoint;
   variant?: Responsive<TextVariant>;
-  tone?: Responsive<TextTone>;
+  color?: Responsive<TextColor>;
+  emphasis?: Responsive<TextEmphasis>;
   weight?: Responsive<TextWeight>;
   align?: Responsive<TextAlign>;
   italic?: boolean;
@@ -109,22 +111,45 @@ function resolveVariantRecipe(
   }
 }
 
-function resolveToneColor(theme: SurfaceTheme, tone: TextTone): string {
-  switch (tone) {
+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 'primary':
-      return theme.semantics.brand.base;
-    case 'danger':
-      return theme.semantics.danger.base;
-    case 'success':
-      return theme.semantics.success.base;
-    case 'warning':
-      return theme.semantics.warning.base;
     case 'default':
     default:
       return theme.semantics.content.default;
@@ -135,13 +160,15 @@ export function resolveTextStyle({
   theme,
   breakpoint,
   variant,
-  tone,
+  color,
+  emphasis,
   weight,
   align,
   italic = false,
 }: ResolveTextStyleOptions): TextStyle {
   const resolvedVariant = resolveResponsive(variant, breakpoint) ?? 'body';
-  const resolvedTone = resolveResponsive(tone, breakpoint) ?? 'default';
+  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(
@@ -150,7 +177,7 @@ export function resolveTextStyle({
   );
 
   return {
-    color: resolveToneColor(theme, resolvedTone),
+    color: resolveTextColor(theme, resolvedEmphasis, resolvedColor),
     elevation: 0,
     fontFamily: resolveFontFamily({
       theme,

package/src/components/text/types.ts

@@ -2,19 +2,13 @@ import type { Responsive } from '@ankhorage/surface';
 import type React from 'react';
 import type { AccessibilityRole, TextStyle } from 'react-native';
 
+import type { ZoraColor, ZoraEmphasis } from '../../internal/recipes';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export type TextVariant = 'body' | 'lead' | 'bodySmall' | 'caption' | 'label' | 'eyebrow' | 'code';
 
-export type TextTone =
-  | 'default'
-  | 'muted'
-  | 'subtle'
-  | 'inverse'
-  | 'primary'
-  | 'danger'
-  | 'success'
-  | 'warning';
+export type TextColor = ZoraColor;
+export type TextEmphasis = ZoraEmphasis;
 
 export type TextWeight = 'regular' | 'medium' | 'semiBold' | 'bold';
 
@@ -25,7 +19,8 @@ export interface TextProps extends ZoraBaseProps {
   text?: string;
   i18nKey?: string;
   variant?: Responsive<TextVariant>;
-  tone?: Responsive<TextTone>;
+  color?: Responsive<TextColor>;
+  emphasis?: Responsive<TextEmphasis>;
   align?: Responsive<TextAlign>;
   weight?: Responsive<TextWeight>;
   italic?: boolean;

package/src/components/toolbar/ToolbarAction.tsx

@@ -13,8 +13,8 @@ function ToolbarActionInner({
   return (
     <IconButton
       {...props}
-      emphasis={active ? 'soft' : 'ghost'}
-      tone={active ? 'primary' : 'neutral'}
+      variant={active ? 'soft' : 'ghost'}
+      color={active ? 'primary' : 'neutral'}
       size="m"
     />
   );

package/src/index.ts

@@ -48,10 +48,11 @@ export {
 } from './components/form';
 export type {
   HeadingAlign,
+  HeadingColor,
+  HeadingEmphasis,
   HeadingLevel,
   HeadingProps,
   HeadingSize,
-  HeadingTone,
   HeadingWeight,
 } from './components/heading';
 export { Heading } from './components/heading';
@@ -89,7 +90,14 @@ export type { SelectOption, SelectProps } from './components/select';
 export { Select } from './components/select';
 export type { TabItem, TabsProps, TabsVariant } from './components/tabs';
 export { Tabs } from './components/tabs';
-export type { TextAlign, TextProps, TextTone, TextVariant, TextWeight } from './components/text';
+export type {
+  TextAlign,
+  TextColor,
+  TextEmphasis,
+  TextProps,
+  TextVariant,
+  TextWeight,
+} from './components/text';
 export { Text } from './components/text';
 export type { TextareaProps } from './components/textarea';
 export { Textarea } from './components/textarea';
@@ -120,6 +128,18 @@ export {
   Stack,
   Surface,
 } from './foundation';
+export type {
+  ZoraColor,
+  ZoraEmphasis,
+  ZoraPaletteColor,
+  ZoraStatusColor,
+} from './internal/colorModel';
+export {
+  ZORA_COLORS,
+  ZORA_EMPHASES,
+  ZORA_PALETTE_COLORS,
+  ZORA_STATUS_COLORS,
+} from './internal/colorModel';
 export type { AppShellProps } from './layout/app-shell';
 export { AppShell } from './layout/app-shell';
 export type { AuthLayoutProps } from './layout/auth-layout';
@@ -137,6 +157,10 @@ export { TopbarLayout } from './layout/topbar-layout';
 export type {
   ZoraComponentBlueprint,
   ZoraComponentCategory,
+  ZoraComponentEventMeta,
+  ZoraComponentEventPayloadFieldMeta,
+  ZoraComponentEventPayloadFieldType,
+  ZoraComponentEventPayloadKind,
   ZoraComponentI18nMeta,
   ZoraComponentMeta,
   ZoraComponentMetaRegistry,

package/src/internal/colorModel.ts

@@ -0,0 +1,39 @@
+import type {
+  SurfaceColor,
+  SurfaceEmphasis,
+  SurfacePaletteColor,
+  SurfaceStatusColor,
+} from '@ankhorage/surface';
+
+export type ZoraPaletteColor = SurfacePaletteColor;
+export type ZoraStatusColor = SurfaceStatusColor;
+export type ZoraColor = SurfaceColor;
+export type ZoraEmphasis = SurfaceEmphasis;
+
+export const ZORA_PALETTE_COLORS = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'quaternary',
+  'neutral',
+] as const satisfies readonly SurfacePaletteColor[];
+
+export const ZORA_STATUS_COLORS = [
+  'success',
+  'warning',
+  'error',
+  'info',
+] as const satisfies readonly SurfaceStatusColor[];
+
+export const ZORA_COLORS = [
+  ...ZORA_PALETTE_COLORS,
+  ...ZORA_STATUS_COLORS,
+  'danger',
+] as const satisfies readonly SurfaceColor[];
+
+export const ZORA_EMPHASES = [
+  'default',
+  'muted',
+  'subtle',
+  'inverse',
+] as const satisfies readonly SurfaceEmphasis[];

package/src/internal/recipes.test.ts

@@ -13,7 +13,7 @@ describe('recipes', () => {
   test('maps button defaults to a more opinionated large solid primary button', () => {
     expect(resolveButtonRecipe({})).toEqual({
       size: 'l',
-      tone: 'primary',
+      color: 'primary',
       variant: 'solid',
     });
   });
@@ -21,7 +21,7 @@ describe('recipes', () => {
   test('maps badge defaults to a soft medium primary badge', () => {
     expect(resolveBadgeRecipe({})).toEqual({
       size: 'm',
-      tone: 'primary',
+      color: 'primary',
       variant: 'soft',
     });
   });

package/src/internal/recipes.ts

@@ -3,43 +3,43 @@ import type {
   ButtonProps as SurfaceButtonProps,
   CardProps as SurfaceCardProps,
 } from '@ankhorage/surface';
-
-export type ZoraTone = NonNullable<SurfaceButtonProps['tone']>;
-export type ZoraEmphasis = NonNullable<SurfaceButtonProps['variant']>;
+export type { ZoraColor, ZoraEmphasis } from './colorModel';
+import type { ZoraColor } from './colorModel';
+export type ZoraButtonVariant = NonNullable<SurfaceButtonProps['variant']>;
 export type ZoraControlSize = NonNullable<SurfaceButtonProps['size']>;
-export type ZoraBadgeEmphasis = NonNullable<SurfaceBadgeProps['variant']>;
+export type ZoraBadgeVariant = NonNullable<SurfaceBadgeProps['variant']>;
 export type ZoraCardTone = 'default' | 'subtle' | 'outline';
 export type ZoraContentWidth = 'narrow' | 'default' | 'wide';
 
 export function resolveButtonRecipe({
-  tone = 'primary',
-  emphasis = 'solid',
+  color = 'primary',
+  variant = 'solid',
   size = 'l',
 }: {
-  tone?: ZoraTone;
-  emphasis?: ZoraEmphasis;
+  color?: ZoraColor;
+  variant?: ZoraButtonVariant;
   size?: ZoraControlSize;
-}): Pick<SurfaceButtonProps, 'size' | 'tone' | 'variant'> {
+}): Pick<SurfaceButtonProps, 'size' | 'color' | 'variant'> {
   return {
     size,
-    tone,
-    variant: emphasis,
+    color,
+    variant,
   };
 }
 
 export function resolveBadgeRecipe({
-  tone = 'primary',
-  emphasis = 'soft',
+  color = 'primary',
+  variant = 'soft',
   size = 'm',
 }: {
-  tone?: ZoraTone;
-  emphasis?: ZoraBadgeEmphasis;
+  color?: ZoraColor;
+  variant?: ZoraBadgeVariant;
   size?: ZoraControlSize;
-}): Pick<SurfaceBadgeProps, 'size' | 'tone' | 'variant'> {
+}): Pick<SurfaceBadgeProps, 'size' | 'color' | 'variant'> {
   return {
     size,
-    tone,
-    variant: emphasis,
+    color,
+    variant,
   };
 }
 

package/src/metadata/componentMeta.test.ts

@@ -4,6 +4,7 @@ import { join } from 'node:path';
 import { describe, expect, test } from 'bun:test';
 
 import { ZORA_COMPONENT_META } from './componentMeta';
+import type { ZoraComponentEventPayloadKind } from './types';
 
 const ROOT = process.cwd();
 const SRC_ROOT = join(ROOT, 'src');
@@ -62,6 +63,12 @@ describe('ZORA_COMPONENT_META public API', () => {
     const indexSource = readSource(INDEX_PATH);
     expect(indexSource).toContain('ZORA_COMPONENT_META');
   });
+
+  test('src/index.ts re-exports component event metadata types', () => {
+    const indexSource = readSource(INDEX_PATH);
+    expect(indexSource).toContain('ZoraComponentEventMeta');
+    expect(indexSource).toContain('ZoraComponentEventPayloadKind');
+  });
 });
 
 describe('ZORA_COMPONENT_META registry coverage', () => {
@@ -108,6 +115,35 @@ describe('ZORA_COMPONENT_META registry coverage', () => {
   });
 });
 
+describe('ZORA_COMPONENT_META event metadata', () => {
+  test('declares form submit metadata', () => {
+    const event = ZORA_COMPONENT_META.Form.events?.submit;
+    const eventType: ZoraComponentEventPayloadKind = event?.eventType ?? 'form.submit';
+
+    expect(eventType).toBe('form.submit');
+    expect(event?.payloadFields?.map((field) => field.path)).toEqual(['payload.values']);
+  });
+
+  test('declares button event metadata', () => {
+    const event = ZORA_COMPONENT_META.Button.events?.press;
+    const eventType: ZoraComponentEventPayloadKind = event?.eventType ?? 'button.press';
+
+    expect(eventType).toBe('button.press');
+    expect(event?.payloadFields).toEqual([]);
+  });
+
+  test('declares collection item metadata for list rows', () => {
+    const event = ZORA_COMPONENT_META.ListRow.events?.itemPress;
+    const eventType: ZoraComponentEventPayloadKind = event?.eventType ?? 'collection.itemPress';
+
+    expect(eventType).toBe('collection.itemPress');
+    expect(event?.payloadFields?.map((field) => field.path)).toEqual([
+      'payload.itemId',
+      'payload.item',
+    ]);
+  });
+});
+
 describe('ZORA_COMPONENT_META invariants', () => {
   test('every key matches meta.name', () => {
     for (const [key, meta] of Object.entries(ZORA_COMPONENT_META)) {

package/src/metadata/index.ts

@@ -2,6 +2,10 @@ export { ZORA_COMPONENT_META } from './componentMeta';
 export type {
   ZoraComponentBlueprint,
   ZoraComponentCategory,
+  ZoraComponentEventMeta,
+  ZoraComponentEventPayloadFieldMeta,
+  ZoraComponentEventPayloadFieldType,
+  ZoraComponentEventPayloadKind,
   ZoraComponentI18nMeta,
   ZoraComponentMeta,
   ZoraComponentMetaRegistry,

package/src/metadata/types.ts

@@ -1,3 +1,5 @@
+import type { ComponentEventDtoKind } from '@ankhorage/contracts';
+
 export type ZoraComponentCategory = 'foundation' | 'component' | 'pattern' | 'layout';
 
 export type ZoraComponentPropType =
@@ -53,6 +55,30 @@ export interface ZoraComponentI18nMeta {
   }[];
 }
 
+export type ZoraComponentEventPayloadKind = ComponentEventDtoKind | (string & {});
+
+export type ZoraComponentEventPayloadFieldType =
+  | 'boolean'
+  | 'number'
+  | 'object'
+  | 'record'
+  | 'string'
+  | 'unknown';
+
+export interface ZoraComponentEventPayloadFieldMeta {
+  readonly path: string;
+  readonly type: ZoraComponentEventPayloadFieldType;
+  readonly label?: string;
+  readonly description?: string;
+}
+
+export interface ZoraComponentEventMeta {
+  readonly label: string;
+  readonly eventType: ZoraComponentEventPayloadKind;
+  readonly description?: string;
+  readonly payloadFields?: readonly ZoraComponentEventPayloadFieldMeta[];
+}
+
 export interface ZoraComponentSlotMeta {
   label?: string;
   allowedChildren?: readonly string[];
@@ -65,6 +91,7 @@ export interface ZoraComponentMeta {
   directManifestNode: boolean;
   allowedChildren: readonly string[];
   blueprint?: ZoraComponentBlueprint;
+  events?: Readonly<Record<string, ZoraComponentEventMeta>>;
   i18n?: ZoraComponentI18nMeta;
   slots?: Readonly<Record<string, ZoraComponentSlotMeta>>;
   note?: string;

package/src/patterns/auth/ForgotPasswordForm.tsx

@@ -61,12 +61,12 @@ function ForgotPasswordFormInner({
           <Stack direction="row" gap="s" wrap="wrap">
             <Button
               disabled={disabled || loading}
-              emphasis="ghost"
+              variant="ghost"
               onPress={() => {
                 void onSignIn();
               }}
               size="s"
-              tone="neutral"
+              color="neutral"
             >
               {signInLabel}
             </Button>

package/src/patterns/auth/OtpForm.tsx

@@ -56,13 +56,13 @@ function OtpFormInner({
           <Stack direction="row" gap="s" wrap="wrap">
             <Button
               disabled={disabled || loading || resendDisabled}
-              emphasis="ghost"
+              variant="ghost"
               loading={resendLoading}
               onPress={() => {
                 void onResend();
               }}
               size="s"
-              tone="neutral"
+              color="neutral"
             >
               {resendLabel}
             </Button>

package/src/patterns/auth/SignInForm.tsx

@@ -74,12 +74,12 @@ function SignInFormInner({
             {onForgotPassword ? (
               <Button
                 disabled={disabled || loading}
-                emphasis="ghost"
+                variant="ghost"
                 onPress={() => {
                   void onForgotPassword();
                 }}
                 size="s"
-                tone="neutral"
+                color="neutral"
               >
                 {forgotPasswordLabel}
               </Button>
@@ -87,12 +87,12 @@ function SignInFormInner({
             {onSignUp ? (
               <Button
                 disabled={disabled || loading}
-                emphasis="ghost"
+                variant="ghost"
                 onPress={() => {
                   void onSignUp();
                 }}
                 size="s"
-                tone="neutral"
+                color="neutral"
               >
                 {signUpLabel}
               </Button>

package/src/patterns/auth/SignUpForm.tsx

@@ -53,12 +53,12 @@ function SignUpFormInner({
           <Stack direction="row" gap="s" wrap="wrap">
             <Button
               disabled={disabled || loading}
-              emphasis="ghost"
+              variant="ghost"
               onPress={() => {
                 void onSignIn();
               }}
               size="s"
-              tone="neutral"
+              color="neutral"
             >
               {signInLabel}
             </Button>

package/src/patterns/chat-list-item/ChatListItem.tsx

@@ -62,7 +62,7 @@ function renderUnreadCount(unreadCount: React.ReactNode) {
   }
 
   return (
-    <Badge size="s" tone="primary">
+    <Badge size="s" color="primary">
       {unreadCount}
     </Badge>
   );
@@ -126,7 +126,7 @@ function ChatListItemInner({
               shape={avatar?.shape}
               size={avatar?.size ?? (compact ? 's' : 'm')}
               source={avatar?.source}
-              tone={avatar?.tone}
+              color={avatar?.color}
             />
           )}
 
@@ -136,7 +136,7 @@ function ChatListItemInner({
                 <Box flex={1}>
                   <Text
                     numberOfLines={1}
-                    tone={disabled ? 'muted' : 'default'}
+                    emphasis={disabled ? 'muted' : 'default'}
                     variant="bodySmall"
                     weight={unread || selected ? 'semiBold' : 'medium'}
                   >
@@ -146,7 +146,8 @@ function ChatListItemInner({
                 {hasTimestamp ? (
                   <Text
                     numberOfLines={1}
-                    tone={unread ? 'primary' : 'subtle'}
+                    color={unread ? 'primary' : undefined}
+                    emphasis={unread ? 'default' : 'subtle'}
                     variant="caption"
                     weight={unread ? 'semiBold' : 'regular'}
                   >
@@ -162,7 +163,7 @@ function ChatListItemInner({
                       {hasPreview ? (
                         <Text
                           numberOfLines={1}
-                          tone={unread ? 'default' : 'muted'}
+                          emphasis={unread ? 'default' : 'muted'}
                           variant="bodySmall"
                           weight={unread ? 'medium' : 'regular'}
                         >
@@ -170,7 +171,7 @@ function ChatListItemInner({
                         </Text>
                       ) : null}
                       {hasMeta ? (
-                        <Text numberOfLines={1} tone="subtle" variant="caption">
+                        <Text numberOfLines={1} emphasis="subtle" variant="caption">
                           {meta}
                         </Text>
                       ) : null}

package/src/patterns/chat-list-item/types.ts

@@ -2,7 +2,7 @@ import type React from 'react';
 import type { ImageSourcePropType } from 'react-native';
 
 import type { AvatarShape, AvatarSize } from '../../components/avatar';
-import type { ZoraTone } from '../../internal/recipes';
+import type { ZoraColor } from '../../internal/recipes';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export interface ChatListAvatar {
@@ -12,7 +12,7 @@ export interface ChatListAvatar {
   label?: string;
   size?: AvatarSize;
   shape?: AvatarShape;
-  tone?: ZoraTone;
+  color?: ZoraColor;
 }
 
 export interface ChatListItemProps extends ZoraBaseProps {