@ankhorage/zora 1.5.1 → 2.0.0

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 {

package/src/patterns/collection-editor/CollectionEditor.tsx

@@ -33,7 +33,7 @@ function CollectionEditorInner<TItem>({
       title={title}
       actions={
         onAdd ? (
-          <Button emphasis="soft" size="s" disabled={disabled} onPress={onAdd}>
+          <Button variant="soft" size="s" disabled={disabled} onPress={onAdd}>
             {addLabel}
           </Button>
         ) : null
@@ -42,7 +42,7 @@ function CollectionEditorInner<TItem>({
       <Stack gap="s">
         {isEmpty ? (
           <Box py="m">
-            <Text align="center" tone="muted">
+            <Text align="center" emphasis="muted">
               {emptyLabel}
             </Text>
           </Box>
@@ -70,7 +70,7 @@ function CollectionEditorInner<TItem>({
                         disabled={disabled ?? index === 0}
                         onPress={() => onMove(index, index - 1)}
                         size="s"
-                        emphasis="ghost"
+                        variant="ghost"
                       />
                       <IconButton
                         icon={{ name: 'arrow-down-outline' }}
@@ -78,7 +78,7 @@ function CollectionEditorInner<TItem>({
                         disabled={disabled ?? index === items.length - 1}
                         onPress={() => onMove(index, index + 1)}
                         size="s"
-                        emphasis="ghost"
+                        variant="ghost"
                       />
                     </>
                   ) : null}
@@ -86,11 +86,11 @@ function CollectionEditorInner<TItem>({
                     <IconButton
                       icon={{ name: 'trash-outline' }}
                       label="Remove"
-                      tone="danger"
+                      color="danger"
                       disabled={disabled}
                       onPress={() => onRemove(index)}
                       size="s"
-                      emphasis="ghost"
+                      variant="ghost"
                     />
                   ) : null}
                 </Stack>

package/src/patterns/confirm-dialog/ConfirmDialog.tsx

@@ -15,8 +15,8 @@ function ConfirmDialogInner({
   children,
   confirmLabel = 'Confirm',
   cancelLabel = 'Cancel',
-  confirmTone = 'danger',
-  confirmEmphasis = 'solid',
+  confirmColor = 'danger',
+  confirmVariant = 'solid',
   busy = false,
   closeOnBackdrop = true,
   onConfirm,
@@ -29,10 +29,10 @@ function ConfirmDialogInner({
       description={description}
       footer={
         <Stack direction={{ base: 'column', md: 'row' }} gap="s" justify="flex-end">
-          <Button emphasis="soft" onPress={onCancel} tone="neutral">
+          <Button variant="soft" onPress={onCancel} color="neutral">
             {cancelLabel}
           </Button>
-          <Button emphasis={confirmEmphasis} loading={busy} onPress={onConfirm} tone={confirmTone}>
+          <Button variant={confirmVariant} loading={busy} onPress={onConfirm} color={confirmColor}>
             {confirmLabel}
           </Button>
         </Stack>

package/src/patterns/confirm-dialog/types.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 
-import type { ZoraEmphasis, ZoraTone } from '../../internal/recipes';
+import type { ZoraButtonVariant, ZoraColor } from '../../internal/recipes';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export interface ConfirmDialogProps extends ZoraBaseProps {
@@ -10,8 +10,8 @@ export interface ConfirmDialogProps extends ZoraBaseProps {
   children?: React.ReactNode;
   confirmLabel?: React.ReactNode;
   cancelLabel?: React.ReactNode;
-  confirmTone?: ZoraTone;
-  confirmEmphasis?: ZoraEmphasis;
+  confirmColor?: ZoraColor;
+  confirmVariant?: ZoraButtonVariant;
   busy?: boolean;
   closeOnBackdrop?: boolean;
   onConfirm?: () => void;

package/src/patterns/disclosure-section/DisclosureSection.tsx

@@ -49,8 +49,8 @@ function DisclosureSectionInner({
           <IconButton
             icon={{ name: isOpen ? 'chevron-up-outline' : 'chevron-down-outline' }}
             label={isOpen ? 'Collapse' : 'Expand'}
-            emphasis="ghost"
-            tone="neutral"
+            variant="ghost"
+            color="neutral"
             size="s"
             disabled={disabled}
             onPress={toggleOpen}

package/src/patterns/empty-state/EmptyState.tsx

@@ -31,18 +31,18 @@ function EmptyStateInner({
           <Stack direction={{ base: 'column', md: 'row' }} gap="s">
             {primaryAction ? (
               <Button
-                emphasis={primaryAction.emphasis}
+                variant={primaryAction.variant}
                 onPress={primaryAction.onPress}
-                tone={primaryAction.tone}
+                color={primaryAction.color}
               >
                 {primaryAction.label}
               </Button>
             ) : null}
             {secondaryAction ? (
               <Button
-                emphasis={secondaryAction.emphasis ?? 'soft'}
+                variant={secondaryAction.variant ?? 'soft'}
                 onPress={secondaryAction.onPress}
-                tone={secondaryAction.tone ?? 'neutral'}
+                color={secondaryAction.color ?? 'neutral'}
               >
                 {secondaryAction.label}
               </Button>

package/src/patterns/empty-state/types.ts

@@ -1,13 +1,13 @@
 import type React from 'react';
 
-import type { ZoraEmphasis, ZoraTone } from '../../internal/recipes';
+import type { ZoraButtonVariant, ZoraColor } from '../../internal/recipes';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export interface EmptyStateAction {
   label: React.ReactNode;
   onPress: () => void;
-  tone?: ZoraTone;
-  emphasis?: ZoraEmphasis;
+  color?: ZoraColor;
+  variant?: ZoraButtonVariant;
 }
 
 export interface EmptyStateProps extends ZoraBaseProps {

package/src/patterns/form-field/FormField.tsx

@@ -25,7 +25,7 @@ function FormFieldInner({
             {label}
           </Text>
           {description ? (
-            <Text tone="muted" variant="bodySmall">
+            <Text emphasis="muted" variant="bodySmall">
               {description}
             </Text>
           ) : null}

package/src/patterns/hero/Hero.tsx

@@ -35,7 +35,7 @@ function HeroInner({
       <Stack align={contentAlign} gap={compact ? 's' : 'm'}>
         <Stack align={contentAlign} gap="xs">
           {eyebrow !== undefined ? (
-            <Text align={textAlign} tone="primary" variant="eyebrow">
+            <Text align={textAlign} color="primary" variant="eyebrow">
               {eyebrow}
             </Text>
           ) : null}
@@ -49,7 +49,7 @@ function HeroInner({
           {description !== undefined ? (
             <Text
               align={textAlign}
-              tone="muted"
+              emphasis="muted"
               variant={{ base: 'body', md: compact ? 'body' : 'lead' }}
             >
               {description}
@@ -100,9 +100,9 @@ function renderAction(action: HeroAction, role: 'primary' | 'secondary') {
   return (
     <Button
       disabled={action.disabled}
-      emphasis={action.emphasis ?? (role === 'primary' ? 'solid' : 'soft')}
+      variant={action.variant ?? (role === 'primary' ? 'solid' : 'soft')}
       onPress={action.onPress}
-      tone={action.tone ?? (role === 'primary' ? 'primary' : 'neutral')}
+      color={action.color ?? (role === 'primary' ? 'primary' : 'neutral')}
     >
       {action.label}
     </Button>

package/src/patterns/hero/types.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 
-import type { ZoraEmphasis, ZoraTone } from '../../internal/recipes';
+import type { ZoraButtonVariant, ZoraColor } from '../../internal/recipes';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export type HeroAlign = 'start' | 'center';
@@ -10,8 +10,8 @@ export type HeroTone = 'default' | 'subtle' | 'outline';
 export interface HeroAction {
   label: React.ReactNode;
   onPress: () => void;
-  tone?: ZoraTone;
-  emphasis?: ZoraEmphasis;
+  color?: ZoraColor;
+  variant?: ZoraButtonVariant;
   disabled?: boolean;
 }
 

package/src/patterns/image-preview/ImagePreview.tsx

@@ -63,7 +63,7 @@ function ImagePreviewInner({
             <Text variant="label" weight="semiBold">
               {emptyTitle}
             </Text>
-            <Text tone="muted" variant="bodySmall">
+            <Text emphasis="muted" variant="bodySmall">
               {emptyDescription}
             </Text>
           </Stack>

package/src/patterns/image-upload-field/ImageUploadField.tsx

@@ -206,12 +206,12 @@ function ImageUploadFieldInner({
           {acceptHint || maxSizeHint ? (
             <Stack gap="xs">
               {acceptHint ? (
-                <Text tone="muted" variant="caption">
+                <Text emphasis="muted" variant="caption">
                   {acceptHint}
                 </Text>
               ) : null}
               {maxSizeHint ? (
-                <Text tone="muted" variant="caption">
+                <Text emphasis="muted" variant="caption">
                   {maxSizeHint}
                 </Text>
               ) : null}
@@ -220,7 +220,7 @@ function ImageUploadFieldInner({
 
           {uploading ? (
             <Stack gap="xs">
-              <Text tone="muted" variant="caption">
+              <Text emphasis="muted" variant="caption">
                 Uploading…
               </Text>
               {progress !== null ? <Progress max={1} value={progress} /> : null}
@@ -240,9 +240,9 @@ function ImageUploadFieldInner({
             {value ? (
               <Button
                 disabled={actionsDisabled || uploading || removing}
-                emphasis="outline"
+                variant="outline"
                 loading={removing}
-                tone="danger"
+                color="danger"
                 onPress={() => {
                   void handleRemove();
                 }}
@@ -252,7 +252,7 @@ function ImageUploadFieldInner({
             ) : null}
 
             {isRenderable ? (
-              <Button disabled={false} emphasis="soft" tone="neutral" onPress={handlePreview}>
+              <Button disabled={false} variant="soft" color="neutral" onPress={handlePreview}>
                 Preview
               </Button>
             ) : null}
@@ -260,7 +260,7 @@ function ImageUploadFieldInner({
 
           {!isRenderable && value?.kind === 'storage' && value.publicUrl === undefined ? (
             <Box>
-              <Text tone="muted" variant="caption">
+              <Text emphasis="muted" variant="caption">
                 This image is stored, but no preview URL is available yet.
               </Text>
             </Box>
@@ -279,7 +279,7 @@ function ImageUploadFieldInner({
           <Stack gap="m">
             <ImagePreview asset={value} aspectRatio={aspectRatio} />
             <Stack direction="row" justify="flex-end">
-              <Button emphasis="soft" tone="neutral" onPress={closePreview}>
+              <Button variant="soft" color="neutral" onPress={closePreview}>
                 Close
               </Button>
             </Stack>

package/src/patterns/list/ListRow.tsx

@@ -99,12 +99,12 @@ function ListRowInner({
             {title}
           </Text>
           {description ? (
-            <Text tone="muted" variant="bodySmall">
+            <Text emphasis="muted" variant="bodySmall">
               {description}
             </Text>
           ) : null}
           {meta ? (
-            <Text tone="subtle" variant="caption">
+            <Text emphasis="subtle" variant="caption">
               {meta}
             </Text>
           ) : null}

package/src/patterns/message-bubble/MessageBubble.tsx

@@ -123,7 +123,7 @@ function MessageAvatar({
       shape={avatar.shape}
       size={avatar.size ?? (compact ? 'xs' : 's')}
       source={avatar.source}
-      tone={avatar.tone}
+      color={avatar.color}
     />
   );
 }
@@ -175,12 +175,12 @@ function MessageBubbleInner({
       >
         <Stack align={isSystem ? 'center' : 'flex-start'} gap={compact ? 'xxs' : 'xs'}>
           {hasAuthorName ? (
-            <Text tone="muted" variant="caption" weight="semiBold">
+            <Text emphasis="muted" variant="caption" weight="semiBold">
               {authorName}
             </Text>
           ) : null}
           {text != null ? (
-            <Text align={isSystem ? 'center' : undefined} tone={disabled ? 'muted' : 'default'}>
+            <Text align={isSystem ? 'center' : undefined} emphasis={disabled ? 'muted' : 'default'}>
               {text}
             </Text>
           ) : null}
@@ -193,17 +193,21 @@ function MessageBubbleInner({
               wrap="wrap"
             >
               {timestamp != null ? (
-                <Text tone="subtle" variant="caption">
+                <Text emphasis="subtle" variant="caption">
                   {timestamp}
                 </Text>
               ) : null}
               {meta != null ? (
-                <Text tone="subtle" variant="caption">
+                <Text emphasis="subtle" variant="caption">
                   {meta}
                 </Text>
               ) : null}
               {renderedStatus != null ? (
-                <Text tone={status === 'failed' ? 'danger' : 'subtle'} variant="caption">
+                <Text
+                  color={status === 'failed' ? 'danger' : undefined}
+                  emphasis={status === 'failed' ? 'default' : 'subtle'}
+                  variant="caption"
+                >
                   {renderedStatus}
                 </Text>
               ) : null}

package/src/patterns/message-bubble/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 type MessageBubbleDirection = 'incoming' | 'outgoing' | 'system';
@@ -16,7 +16,7 @@ export interface MessageBubbleAvatar {
   label?: string;
   size?: AvatarSize;
   shape?: AvatarShape;
-  tone?: ZoraTone;
+  color?: ZoraColor;
 }
 
 export interface MessageBubbleAuthor {

package/src/patterns/notice/Notice.tsx

@@ -13,13 +13,13 @@ function NoticeInner({
   description,
   children,
   actions,
-  tone = 'primary',
+  color = 'primary',
   testID,
 }: NoticeProps) {
   return (
     <Card
       description={description}
-      eyebrow={<Badge tone={tone}>{String(tone).toUpperCase()}</Badge>}
+      eyebrow={<Badge color={color}>{String(color).toUpperCase()}</Badge>}
       testID={testID}
       title={title}
       tone="subtle"

package/src/patterns/notice/types.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 
-import type { ZoraTone } from '../../internal/recipes';
+import type { ZoraColor } from '../../internal/recipes';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export interface NoticeProps extends ZoraBaseProps {
@@ -8,5 +8,5 @@ export interface NoticeProps extends ZoraBaseProps {
   description?: React.ReactNode;
   children?: React.ReactNode;
   actions?: React.ReactNode;
-  tone?: ZoraTone;
+  color?: ZoraColor;
 }

package/src/patterns/post-card/PostCard.tsx

@@ -59,7 +59,7 @@ function PostCardAuthor({ author, compact = false }: { author: PostAuthor; compa
         shape={avatar?.shape}
         size={avatar?.size ?? (compact ? 's' : 'm')}
         source={avatar?.source}
-        tone={avatar?.tone}
+        color={avatar?.color}
       />
       <Box flex={1}>
         <Stack gap="xxs">
@@ -67,7 +67,7 @@ function PostCardAuthor({ author, compact = false }: { author: PostAuthor; compa
             {author.name}
           </Text>
           {author.subtitle ? (
-            <Text tone="muted" variant="caption">
+            <Text emphasis="muted" variant="caption">
               {author.subtitle}
             </Text>
           ) : null}
@@ -125,11 +125,11 @@ function PostCardActions({ actions }: { actions: readonly PostAction[] }) {
         <Button
           key={action.id}
           disabled={action.disabled}
-          emphasis={action.selected ? 'soft' : 'ghost'}
+          variant={action.selected ? 'soft' : 'ghost'}
           leadingIcon={action.icon}
           onPress={action.onPress}
           size="s"
-          tone={action.selected ? 'primary' : 'neutral'}
+          color={action.selected ? 'primary' : 'neutral'}
         >
           <PostActionLabel action={action} />
         </Button>
@@ -146,7 +146,7 @@ function PostCommentPreviewItem({ comment }: { comment: PostCommentPreview }) {
         <Stack gap="xxs">
           <Text variant="bodySmall">{comment.text}</Text>
           {comment.meta ? (
-            <Text tone="subtle" variant="caption">
+            <Text emphasis="subtle" variant="caption">
               {comment.meta}
             </Text>
           ) : null}

package/src/patterns/post-card/types.ts

@@ -3,7 +3,7 @@ import type React from 'react';
 import type { ImageSourcePropType } from 'react-native';
 
 import type { AvatarShape, AvatarSize } from '../../components/avatar';
-import type { ZoraCardTone, ZoraTone } from '../../internal/recipes';
+import type { ZoraCardTone, ZoraColor } from '../../internal/recipes';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export interface PostAuthorAvatar {
@@ -13,7 +13,7 @@ export interface PostAuthorAvatar {
   label?: string;
   size?: AvatarSize;
   shape?: AvatarShape;
-  tone?: ZoraTone;
+  color?: ZoraColor;
 }
 
 export interface PostAuthor {

package/src/patterns/section-header/SectionHeader.tsx

@@ -26,13 +26,13 @@ function SectionHeaderInner({
       <Box flex={{ md: 1 }} width={{ base: '100%', md: 'auto' }}>
         <Stack gap="xs">
           {eyebrow ? (
-            <Text tone="muted" variant="caption" weight="semiBold">
+            <Text emphasis="muted" variant="caption" weight="semiBold">
               {eyebrow}
             </Text>
           ) : null}
           <Heading level={3}>{title}</Heading>
           {description ? (
-            <Text tone="muted" variant="bodySmall">
+            <Text emphasis="muted" variant="bodySmall">
               {description}
             </Text>
           ) : null}

package/src/patterns/settings-row/SettingsRow.tsx

@@ -34,7 +34,7 @@ function SettingsRowInner({
     >
       {meta ? (
         <Box pt="xs">
-          <Text tone="muted" variant="caption">
+          <Text emphasis="muted" variant="caption">
             {meta}
           </Text>
         </Box>