@ankhorage/zora 1.5.1 → 2.0.0

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>