@ankhorage/zora 1.5.0 → 2.0.0

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>

package/src/patterns/theme-composer/ThemeComposer.tsx

@@ -144,7 +144,7 @@ function ThemeComposerInner({
               testID={testID ? `${testID}-name-input` : undefined}
             />
             {nameError ? (
-              <Text tone="danger" variant="bodySmall">
+              <Text color="danger" variant="bodySmall">
                 {nameError}
               </Text>
             ) : null}
@@ -152,7 +152,7 @@ function ThemeComposerInner({
           <Stack gap="xs">
             <Text variant="label">ID</Text>
             <Text
-              tone="muted"
+              emphasis="muted"
               variant="bodySmall"
               testID={testID ? `${testID}-id-display` : undefined}
             >
@@ -201,7 +201,7 @@ function ThemeComposerInner({
             />
           </Stack>
           {hexError ? (
-            <Text tone="danger" variant="bodySmall">
+            <Text color="danger" variant="bodySmall">
               {hexError}
             </Text>
           ) : null}
@@ -245,41 +245,41 @@ function ThemeComposerInner({
           </Stack>
           <Stack gap="xs">
             <Text variant="label">Primary color</Text>
-            <Text tone="muted" variant="bodySmall">
+            <Text emphasis="muted" variant="bodySmall">
               {value.primaryColor}
             </Text>
           </Stack>
           <Stack gap="xs">
             <Text variant="label">Harmony</Text>
-            <Text tone="muted" variant="bodySmall">
+            <Text emphasis="muted" variant="bodySmall">
               {value.harmony}
             </Text>
           </Stack>
           <Heading level={4}>Heading</Heading>
           <Text>Body text — this shows default text color and weight.</Text>
-          <Text tone="muted" variant="bodySmall">
+          <Text emphasis="muted" variant="bodySmall">
             Muted caption text.
           </Text>
           <Stack direction="row" gap="s" align="center">
-            <Button tone="primary" emphasis="solid" size="m">
+            <Button color="primary" variant="solid" size="m">
               Primary
             </Button>
-            <Button tone="neutral" emphasis="soft" size="m">
+            <Button color="neutral" variant="soft" size="m">
               Neutral
             </Button>
-            <Button tone="danger" emphasis="ghost" size="m">
+            <Button color="danger" variant="ghost" size="m">
               Danger
             </Button>
           </Stack>
           <Stack direction="row" gap="s" align="center">
-            <Badge tone="primary">Primary</Badge>
-            <Badge tone="success" emphasis="soft">
+            <Badge color="primary">Primary</Badge>
+            <Badge color="success" variant="soft">
               Success
             </Badge>
-            <Badge tone="warning" emphasis="soft">
+            <Badge color="warning" variant="soft">
               Warning
             </Badge>
-            <Badge tone="danger" emphasis="soft">
+            <Badge color="danger" variant="soft">
               Danger
             </Badge>
           </Stack>
@@ -295,8 +295,8 @@ function ThemeComposerInner({
       {/* Submit */}
       {onSubmit ? (
         <Button
-          tone="primary"
-          emphasis="solid"
+          color="primary"
+          variant="solid"
           onPress={handleSubmit}
           testID={testID ? `${testID}-submit` : undefined}
         >

package/src/patterns/tile-grid/PaletteItem.tsx

@@ -44,7 +44,7 @@ function PaletteItemInner({
           {title}
         </Heading>
         {description ? (
-          <Text align="center" tone="muted" variant="caption">
+          <Text align="center" emphasis="muted" variant="caption">
             {description}
           </Text>
         ) : null}

package/src/patterns/timeline/Timeline.tsx

@@ -5,14 +5,24 @@ import { Heading } from '../../components/heading';
 import { Icon } from '../../components/icon';
 import { Text } from '../../components/text';
 import { Box, Inline, Stack } from '../../foundation';
-import type { ZoraTone } from '../../internal/recipes';
+import type { ZoraColor } from '../../internal/recipes';
 import { resolveIconSize } from '../../internal/recipes';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { TimelineItem, TimelineProps } from './types';
 
-function resolveRoleSemantics(theme: SurfaceTheme, tone: ZoraTone): RoleSemantics {
-  switch (tone) {
+function resolveRoleSemantics(theme: SurfaceTheme, color: ZoraColor): RoleSemantics {
+  switch (color) {
+    case 'secondary':
+      return theme.semantics.secondary;
+    case 'tertiary':
+      return theme.semantics.accent;
+    case 'quaternary':
+      return theme.semantics.highlight;
+    case 'error':
+      return theme.semantics.error;
+    case 'info':
+      return theme.semantics.info;
     case 'primary':
       return theme.semantics.action.primary;
     case 'danger':
@@ -80,13 +90,13 @@ function TimelineInner({
           <Inline align="flex-start" gap="s" justify="space-between" wrap="wrap">
             <Heading level={compact ? 4 : 3}>{item.title}</Heading>
             {item.meta ? (
-              <Text tone="muted" variant="caption">
+              <Text emphasis="muted" variant="caption">
                 {item.meta}
               </Text>
             ) : null}
           </Inline>
           {item.description ? (
-            <Text tone="muted" variant="bodySmall">
+            <Text emphasis="muted" variant="bodySmall">
               {item.description}
             </Text>
           ) : null}

package/src/patterns/timeline/types.ts

@@ -1,7 +1,7 @@
 import type { ButtonIconSpec } from '@ankhorage/surface';
 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 TimelineItem {
@@ -9,7 +9,7 @@ export interface TimelineItem {
   title: React.ReactNode;
   description?: React.ReactNode;
   meta?: React.ReactNode;
-  status?: ZoraTone;
+  status?: ZoraColor;
   icon?: ButtonIconSpec;
   testID?: string;
 }

package/src/patterns/tree-view/TreeItem.tsx

@@ -56,7 +56,7 @@ function TreeItemInner<TId extends string = string>({
                 label={isExpanded ? 'Collapse' : 'Expand'}
                 onPress={() => onToggleExpand(node.id)}
                 size="s"
-                emphasis="ghost"
+                variant="ghost"
               />
             ) : null}
           </Stack>

package/src/patterns/zora-tab-bar/ZoraTabBar.tsx

@@ -1,25 +1,48 @@
-import { TabBar as SurfaceTabBar } from '@ankhorage/surface';
 import React from 'react';
+import { Pressable, Text as ReactNativeText } from 'react-native';
 
-import { Surface } from '../../foundation';
+import { Icon } from '../../components/icon';
+import { Box, Surface } from '../../foundation';
 import {
   createTabBarItemPressHandler,
   resolveNavigationItems,
 } from '../../internal/resolveZoraNavigationItems';
+import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { ZoraTabBarProps } from './types';
 
+function resolveAccessibilityLabel(
+  label: React.ReactNode,
+  explicitLabel?: string,
+): string | undefined {
+  if (explicitLabel !== undefined) {
+    return explicitLabel;
+  }
+
+  if (typeof label === 'string') {
+    return label;
+  }
+
+  if (typeof label === 'number') {
+    return String(label);
+  }
+
+  return undefined;
+}
+
 function ZoraTabBarInner({
   themeId: _themeId,
   mode: _mode,
   state,
   navigation,
   descriptors,
+  insets,
   routeMap,
   compact = false,
   chrome = 'raised',
   testID,
 }: ZoraTabBarProps) {
+  const { theme } = useZoraTheme();
   const resolved = resolveNavigationItems({
     state,
     descriptors,
@@ -27,19 +50,85 @@ function ZoraTabBarInner({
     kind: 'tab',
   });
 
-  const items = resolved.map((item) => ({
-    id: item.route.key,
-    label: item.label,
-    icon: item.metadata?.icon,
-    badge: item.metadata?.badge,
-    active: item.active,
-    disabled: item.disabled,
-    onPress: createTabBarItemPressHandler({ item, navigation }),
-    accessibilityLabel: item.metadata?.accessibilityLabel,
-    testID: item.metadata?.testID,
-  }));
-
-  const content = <SurfaceTabBar compact={compact} items={items} testID={testID} />;
+  const bottomInset = insets?.bottom ?? 0;
+  const minHeight = compact ? 56 : 64;
+  const labelSize = compact ? theme.typography.sizes.xs : theme.typography.sizes.s;
+  const labelWeight = theme.typography.weights.medium;
+  const content = (
+    <Box
+      bg="surface"
+      style={{
+        borderTopColor: theme.semantics.border.default,
+        borderTopWidth: 1,
+        flexDirection: 'row',
+        minHeight: minHeight + bottomInset,
+        paddingBottom: bottomInset,
+      }}
+      testID={testID}
+    >
+      {resolved.map((item) => {
+        const { active } = item;
+        const { disabled } = item;
+        const contentColor = disabled
+          ? theme.semantics.content.subtle
+          : active
+            ? theme.semantics.action.primary.base
+            : theme.semantics.content.muted;
+        const backgroundColor = active
+          ? theme.semantics.action.primary.softBg
+          : theme.semantics.surface.default;
+
+        return (
+          <Pressable
+            accessibilityLabel={resolveAccessibilityLabel(
+              item.label,
+              item.metadata?.accessibilityLabel,
+            )}
+            accessibilityRole="tab"
+            accessibilityState={{ selected: active, disabled }}
+            disabled={disabled}
+            key={item.route.key}
+            onPress={createTabBarItemPressHandler({ item, navigation })}
+            style={{
+              alignItems: 'center',
+              backgroundColor,
+              flex: 1,
+              justifyContent: 'center',
+              minHeight,
+              opacity: disabled ? 0.48 : 1,
+              paddingHorizontal: theme.spacing.s,
+              paddingVertical: compact ? theme.spacing.xs : theme.spacing.s,
+            }}
+            testID={
+              item.metadata?.testID ?? (testID ? `${testID}-item-${item.route.key}` : undefined)
+            }
+          >
+            {item.metadata?.icon ? (
+              <Icon
+                color={contentColor}
+                name={item.metadata.icon.name}
+                provider={item.metadata.icon.provider}
+                size={compact ? theme.spacing.m : theme.spacing.l}
+              />
+            ) : null}
+            <ReactNativeText
+              numberOfLines={1}
+              style={{
+                color: contentColor,
+                fontSize: labelSize,
+                fontWeight: labelWeight,
+                lineHeight: compact ? 16 : 20,
+                marginTop: item.metadata?.icon ? theme.spacing.xs : 0,
+                textAlign: 'center',
+              }}
+            >
+              {item.label}
+            </ReactNativeText>
+          </Pressable>
+        );
+      })}
+    </Box>
+  );
 
   if (chrome === 'none') {
     return content;