@ankhorage/zora 1.5.1 → 2.1.0

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>