@ankhorage/zora 1.5.0 → 2.0.0

package/src/components/avatar/Avatar.tsx

@@ -3,11 +3,11 @@ import React from 'react';
 import { Image } from 'react-native';
 
 import { Box } from '../../foundation';
-import type { ZoraTone } from '../../internal/recipes';
+import type { ZoraColor } from '../../internal/recipes';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Icon } from '../icon';
-import { Text, type TextTone, type TextVariant } from '../text';
+import { Text, type TextVariant } from '../text';
 import { resolveAvatarInitials } from './resolveAvatarInitials';
 import type { AvatarProps, AvatarShape, AvatarSize } from './types';
 
@@ -19,10 +19,20 @@ const AVATAR_SIZES: Record<AvatarSize, number> = {
   xl: 64,
 };
 
-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 'primary':
       return theme.semantics.action.primary;
+    case 'error':
+      return theme.semantics.error;
+    case 'info':
+      return theme.semantics.info;
     case 'danger':
       return theme.semantics.action.danger;
     case 'success':
@@ -35,8 +45,8 @@ function resolveRoleSemantics(theme: SurfaceTheme, tone: ZoraTone): RoleSemantic
   }
 }
 
-function resolveTextTone(tone: ZoraTone): TextTone {
-  return tone === 'neutral' ? 'default' : tone;
+function resolveTextColor(color: ZoraColor): ZoraColor | undefined {
+  return color === 'neutral' ? undefined : color;
 }
 
 function resolveTextVariant(size: AvatarSize): TextVariant {
@@ -69,20 +79,20 @@ function AvatarInner({
   label,
   size = 'm',
   shape = 'circle',
-  tone = 'neutral',
+  color = 'neutral',
 }: AvatarProps) {
   const { theme } = useZoraTheme();
   const resolvedSize = AVATAR_SIZES[size];
   const resolvedInitials = initials ?? resolveAvatarInitials(name);
-  const role = resolveRoleSemantics(theme, tone);
-  const backgroundColor = tone === 'neutral' ? theme.semantics.neutral.surface : role.softBg;
-  const contentColor = tone === 'neutral' ? theme.semantics.content.default : role.base;
+  const role = resolveRoleSemantics(theme, color);
+  const backgroundColor = color === 'neutral' ? theme.semantics.neutral.surface : role.softBg;
+  const contentColor = color === 'neutral' ? theme.semantics.content.default : role.base;
   const radius = resolveRadius(shape);
 
   const renderFallback = () => {
     if (resolvedInitials) {
       return (
-        <Text tone={resolveTextTone(tone)} variant={resolveTextVariant(size)} weight="semiBold">
+        <Text color={resolveTextColor(color)} variant={resolveTextVariant(size)} weight="semiBold">
           {resolvedInitials}
         </Text>
       );

package/src/components/avatar/types.ts

@@ -1,7 +1,7 @@
 import type { ButtonIconSpec } from '@ankhorage/surface';
 import type { ImageSourcePropType } from 'react-native';
 
-import type { ZoraTone } from '../../internal/recipes';
+import type { ZoraColor } from '../../internal/recipes';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export type AvatarSize = 'xs' | 's' | 'm' | 'l' | 'xl';
@@ -16,5 +16,5 @@ export interface AvatarProps extends ZoraBaseProps {
   label?: string;
   size?: AvatarSize;
   shape?: AvatarShape;
-  tone?: ZoraTone;
+  color?: ZoraColor;
 }

package/src/components/avatar-group/AvatarGroup.tsx

@@ -44,7 +44,7 @@ function AvatarGroupInner({
         shape={shape}
         size={size}
         source={item.source}
-        tone={item.tone}
+        color={item.color}
       />
     </Box>
   );
@@ -63,7 +63,7 @@ function AvatarGroupInner({
             initials={overflowLabel(overflowCount)}
             size={size}
             shape={shape}
-            tone="neutral"
+            color="neutral"
           />
         </Box>
       ) : null}

package/src/components/avatar-group/types.ts

@@ -1,7 +1,7 @@
 import type { ButtonIconSpec } from '@ankhorage/surface';
 import type { ImageSourcePropType } from 'react-native';
 
-import type { ZoraTone } from '../../internal/recipes';
+import type { ZoraColor } from '../../internal/recipes';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 import type { AvatarShape, AvatarSize } from '../avatar';
 
@@ -12,7 +12,7 @@ export interface AvatarGroupItem {
   initials?: string;
   iconFallback?: ButtonIconSpec;
   label?: string;
-  tone?: ZoraTone;
+  color?: ZoraColor;
 }
 
 export interface AvatarGroupProps extends ZoraBaseProps {

package/src/components/badge/Badge.tsx

@@ -9,19 +9,19 @@ function BadgeInner({
   themeId: _themeId,
   mode: _mode,
   children,
-  tone,
-  emphasis,
+  color,
+  variant,
   size,
   ...props
 }: BadgeProps) {
-  const recipe = resolveBadgeRecipe({ tone, emphasis, size });
+  const recipe = resolveBadgeRecipe({ color, variant, size });
 
   return (
     <SurfaceBadge
       {...props}
       content={children}
+      color={recipe.color}
       size={recipe.size}
-      tone={recipe.tone}
       variant={recipe.variant}
     />
   );

package/src/components/badge/types.ts

@@ -1,15 +1,15 @@
 import type { BadgeProps as SurfaceBadgeProps } from '@ankhorage/surface';
 import type React from 'react';
 
-import type { ZoraBadgeEmphasis, ZoraControlSize, ZoraTone } from '../../internal/recipes';
+import type { ZoraBadgeVariant, ZoraColor, ZoraControlSize } from '../../internal/recipes';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export interface BadgeProps
   extends
     ZoraBaseProps,
-    Omit<SurfaceBadgeProps, 'content' | 'size' | 'tone' | 'variant' | 'mode' | 'themeId'> {
+    Omit<SurfaceBadgeProps, 'content' | 'size' | 'color' | 'variant' | 'mode' | 'themeId'> {
   children?: React.ReactNode;
-  tone?: ZoraTone;
-  emphasis?: ZoraBadgeEmphasis;
+  color?: ZoraColor;
+  variant?: ZoraBadgeVariant;
   size?: ZoraControlSize;
 }

package/src/components/button/Button.tsx

@@ -8,15 +8,15 @@ import type { ButtonProps } from './types';
 function ButtonInner({
   themeId: _themeId,
   mode: _mode,
-  tone,
-  emphasis,
+  color,
+  variant,
   size,
   ...props
 }: ButtonProps) {
-  const recipe = resolveButtonRecipe({ tone, emphasis, size });
+  const recipe = resolveButtonRecipe({ color, variant, size });
 
   return (
-    <SurfaceButton {...props} size={recipe.size} tone={recipe.tone} variant={recipe.variant} />
+    <SurfaceButton {...props} color={recipe.color} size={recipe.size} variant={recipe.variant} />
   );
 }
 

package/src/components/button/meta.ts

@@ -1,3 +1,4 @@
+import { ZORA_COLORS } from '../../internal/colorModel';
 import type { ZoraComponentMeta } from '../../metadata';
 
 export const buttonMeta = {
@@ -9,8 +10,8 @@ export const buttonMeta = {
     label: 'Button',
     defaultProps: {
       children: 'Continue',
-      tone: 'primary',
-      emphasis: 'solid',
+      color: 'primary',
+      variant: 'solid',
       size: 'm',
     },
   },
@@ -21,17 +22,17 @@ export const buttonMeta = {
       label: 'Label',
       default: 'Continue',
     },
-    tone: {
+    color: {
       type: 'enum',
       category: 'Style',
-      label: 'Tone',
-      enum: ['primary', 'neutral', 'danger', 'success', 'warning'],
+      label: 'Color',
+      enum: [...ZORA_COLORS],
       default: 'primary',
     },
-    emphasis: {
+    variant: {
       type: 'enum',
       category: 'Style',
-      label: 'Emphasis',
+      label: 'Variant',
       enum: ['solid', 'outline', 'ghost', 'soft'],
       default: 'solid',
     },

package/src/components/button/types.ts

@@ -1,14 +1,14 @@
 import type { ButtonIconSpec, ButtonProps as SurfaceButtonProps } from '@ankhorage/surface';
 import type React from 'react';
 
-import type { ZoraControlSize, ZoraEmphasis, ZoraTone } from '../../internal/recipes';
+import type { ZoraButtonVariant, ZoraColor, ZoraControlSize } from '../../internal/recipes';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export interface ButtonProps
-  extends ZoraBaseProps, Omit<SurfaceButtonProps, 'children' | 'size' | 'tone' | 'variant'> {
+  extends ZoraBaseProps, Omit<SurfaceButtonProps, 'children' | 'size' | 'color' | 'variant'> {
   children?: React.ReactNode;
-  tone?: ZoraTone;
-  emphasis?: ZoraEmphasis;
+  color?: ZoraColor;
+  variant?: ZoraButtonVariant;
   size?: ZoraControlSize;
   leadingIcon?: ButtonIconSpec;
   trailingIcon?: ButtonIconSpec;

package/src/components/card/Card.tsx

@@ -46,13 +46,13 @@ function CardInner({
             <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}
                 {title ? <Heading level={compact ? 4 : 3}>{title}</Heading> : null}
                 {description ? (
-                  <Text tone="muted" variant="bodySmall">
+                  <Text emphasis="muted" variant="bodySmall">
                     {description}
                   </Text>
                 ) : null}

package/src/components/checkbox/CheckboxGroup.tsx

@@ -15,7 +15,7 @@ function CheckboxGroupInner<TValue extends string>({
   options,
   orientation = 'vertical',
   gap = 's',
-  tone = 'primary',
+  color = 'primary',
   size = 'm',
   invalid = false,
   readOnly = false,
@@ -47,7 +47,7 @@ function CheckboxGroupInner<TValue extends string>({
             invalid={invalid}
             readOnly={readOnly}
             size={size}
-            tone={tone}
+            color={color}
             value={value}
             onValueChange={onValueChange}
           />
@@ -66,7 +66,7 @@ function CheckboxGroupItem<TValue extends string>({
   invalid,
   readOnly,
   size,
-  tone,
+  color,
   value,
   onValueChange,
 }: {
@@ -76,7 +76,7 @@ function CheckboxGroupItem<TValue extends string>({
   invalid: boolean;
   readOnly: boolean;
   size: NonNullable<CheckboxGroupProps<TValue>['size']>;
-  tone: NonNullable<CheckboxGroupProps<TValue>['tone']>;
+  color: NonNullable<CheckboxGroupProps<TValue>['color']>;
   value: readonly TValue[];
   onValueChange: (value: TValue[]) => void;
 }) {
@@ -87,7 +87,7 @@ function CheckboxGroupItem<TValue extends string>({
       invalid={invalid}
       readOnly={readOnly}
       size={size}
-      tone={tone}
+      color={color}
       testID={option.testID}
       onCheckedChange={(nextChecked) => {
         const nextValue = nextChecked
@@ -100,7 +100,7 @@ function CheckboxGroupItem<TValue extends string>({
       <Stack gap="xs">
         <Text>{option.label}</Text>
         {option.description ? (
-          <Text variant="caption" tone="muted">
+          <Text emphasis="muted" variant="caption">
             {option.description}
           </Text>
         ) : null}

package/src/components/checkbox/types.ts

@@ -19,7 +19,7 @@ export interface CheckboxGroupProps<TValue extends string>
     ZoraBaseProps,
     Pick<
       Omit<SurfaceCheckboxProps, 'mode' | 'themeId'>,
-      'tone' | 'size' | 'invalid' | 'readOnly' | 'disabled'
+      'color' | 'size' | 'invalid' | 'readOnly' | 'disabled'
     > {
   value: readonly TValue[];
   onValueChange: (value: TValue[]) => void;

package/src/components/chip/Chip.tsx

@@ -33,7 +33,7 @@ function ChipInner({
   icon,
   selected = false,
   disabled = false,
-  tone = 'neutral',
+  color = 'neutral',
   size = 's',
   onPress,
 }: ChipProps) {
@@ -42,14 +42,13 @@ function ChipInner({
   const iconSize = resolveIconSize(size);
 
   const renderContent = (state: ChipInteractionState) => {
-    const colors = resolveChipColors({ theme, tone, selected, state });
-    const textTone = state.disabled
-      ? 'muted'
-      : selected
-        ? tone === 'neutral'
-          ? 'default'
-          : tone
-        : 'default';
+    const colors = resolveChipColors({ theme, color, selected, state });
+    const textColor = state.disabled
+      ? undefined
+      : selected && color !== 'neutral'
+        ? color
+        : undefined;
+    const textEmphasis = state.disabled ? 'muted' : 'default';
 
     return (
       <Box
@@ -73,7 +72,7 @@ function ChipInner({
               size={iconSize}
             />
           ) : null}
-          <Text tone={textTone} variant="label">
+          <Text color={textColor} emphasis={textEmphasis} variant="label">
             {children}
           </Text>
         </Inline>

package/src/components/chip/resolveChipColors.ts

@@ -1,10 +1,20 @@
 import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';
 
-import type { ZoraTone } from '../../internal/recipes';
+import type { ZoraColor } from '../../internal/recipes';
 import type { ChipColors, ChipInteractionState } from './types';
 
-function resolveChipRole(theme: SurfaceTheme, tone: ZoraTone): RoleSemantics {
-  switch (tone) {
+function resolveChipRole(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':
@@ -21,12 +31,12 @@ function resolveChipRole(theme: SurfaceTheme, tone: ZoraTone): RoleSemantics {
 
 export function resolveChipColors({
   theme,
-  tone,
+  color,
   selected,
   state,
 }: {
   theme: SurfaceTheme;
-  tone: ZoraTone;
+  color: ZoraColor;
   selected: boolean;
   state: ChipInteractionState;
 }): ChipColors {
@@ -39,7 +49,7 @@ export function resolveChipColors({
     };
   }
 
-  const role = resolveChipRole(theme, tone);
+  const role = resolveChipRole(theme, color);
 
   if (selected) {
     return {

package/src/components/chip/types.ts

@@ -1,7 +1,7 @@
 import type { ButtonIconSpec } from '@ankhorage/surface';
 import type React from 'react';
 
-import type { ZoraControlSize, ZoraTone } from '../../internal/recipes';
+import type { ZoraColor, ZoraControlSize } from '../../internal/recipes';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export interface ChipProps extends ZoraBaseProps {
@@ -9,7 +9,7 @@ export interface ChipProps extends ZoraBaseProps {
   icon?: ButtonIconSpec;
   selected?: boolean;
   disabled?: boolean;
-  tone?: ZoraTone;
+  color?: ZoraColor;
   size?: ZoraControlSize;
   onPress?: () => void;
 }

package/src/components/chip-group/ChipGroup.tsx

@@ -21,7 +21,7 @@ function ChipGroupInner<TValue extends string = string>({
   value,
   onValueChange,
   multiple,
-  tone = 'neutral',
+  color = 'neutral',
   size = 's',
   wrap = true,
   disabled,
@@ -49,7 +49,7 @@ function ChipGroupInner<TValue extends string = string>({
         selected={isSelected}
         size={size}
         testID={item.testID}
-        tone={tone}
+        color={color}
       >
         {item.label}
       </Chip>

package/src/components/chip-group/types.ts

@@ -1,7 +1,7 @@
 import type { ButtonIconSpec } from '@ankhorage/surface';
 import type React from 'react';
 
-import type { ZoraControlSize, ZoraTone } from '../../internal/recipes';
+import type { ZoraColor, ZoraControlSize } from '../../internal/recipes';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export interface ChipGroupItem<TValue extends string = string> {
@@ -14,7 +14,7 @@ export interface ChipGroupItem<TValue extends string = string> {
 
 interface ChipGroupBaseProps<TValue extends string> extends ZoraBaseProps {
   items: readonly ChipGroupItem<TValue>[];
-  tone?: ZoraTone;
+  color?: ZoraColor;
   size?: ZoraControlSize;
   wrap?: boolean;
   disabled?: boolean;

package/src/components/drawer/Drawer.tsx

@@ -39,7 +39,7 @@ function DrawerInner({
           <Stack gap="xs">
             {title ? <Heading level={3}>{title}</Heading> : null}
             {description ? (
-              <Text tone="muted" variant="bodySmall">
+              <Text emphasis="muted" variant="bodySmall">
                 {description}
               </Text>
             ) : null}

package/src/components/form/FormError.tsx

@@ -15,7 +15,7 @@ function FormErrorInner({ themeId: _themeId, mode: _mode, error, testID }: FormE
 
   return (
     <Box borderColor={theme.colors.error} borderWidth={1} p="s" radius="m" testID={testID}>
-      <Text tone="danger" variant="bodySmall">
+      <Text color="error" variant="bodySmall">
         {error}
       </Text>
     </Box>

package/src/components/form/FormField.tsx

@@ -77,7 +77,7 @@ function renderLabel(label: React.ReactNode, description: React.ReactNode | unde
         {label}
       </Text>
       {description ? (
-        <Text tone="muted" variant="bodySmall">
+        <Text emphasis="muted" variant="bodySmall">
           {description}
         </Text>
       ) : null}

package/src/components/heading/Heading.tsx

@@ -39,7 +39,8 @@ function HeadingInner({
   i18nKey,
   level = 2,
   size,
-  tone = 'default',
+  color,
+  emphasis = 'default',
   align,
   weight,
   italic = false,
@@ -56,7 +57,8 @@ function HeadingInner({
   const { breakpoint } = useResponsiveRuntime();
   const content = resolveHeadingContent({ children, text, i18nKey });
   const resolvedSize = resolveResponsive(size, breakpoint) ?? resolveHeadingSizeFromLevel(level);
-  const resolvedTone = resolveResponsive(tone, breakpoint) ?? 'default';
+  const resolvedColor = resolveResponsive(color, breakpoint);
+  const resolvedEmphasis = resolveResponsive(emphasis, breakpoint) ?? 'default';
   const resolvedAlign = resolveResponsive(align, breakpoint);
   const resolvedWeight = resolveResponsive(weight, breakpoint);
 
@@ -79,7 +81,8 @@ function HeadingInner({
         italic,
         level,
         size: resolvedSize,
-        tone: resolvedTone,
+        color: resolvedColor,
+        emphasis: resolvedEmphasis,
         weight: resolvedWeight,
       })}
     >

package/src/components/heading/index.ts

@@ -1,9 +1,10 @@
 export { Heading } from './Heading';
 export type {
   HeadingAlign,
+  HeadingColor,
+  HeadingEmphasis,
   HeadingLevel,
   HeadingProps,
   HeadingSize,
-  HeadingTone,
   HeadingWeight,
 } from './types';

package/src/components/heading/meta.ts

@@ -1,3 +1,4 @@
+import { ZORA_COLORS, ZORA_EMPHASES } from '../../internal/colorModel';
 import type { ZoraComponentMeta } from '../../metadata';
 
 export const headingMeta = {
@@ -34,11 +35,17 @@ export const headingMeta = {
       enum: [1, 2, 3, 4, 5, 6],
       default: 2,
     },
-    tone: {
+    color: {
       type: 'enum',
       category: 'Style',
-      label: 'Tone',
-      enum: ['default', 'muted', 'subtle', 'inverse', 'primary', 'danger', 'success', 'warning'],
+      label: 'Color',
+      enum: ZORA_COLORS,
+    },
+    emphasis: {
+      type: 'enum',
+      category: 'Style',
+      label: 'Emphasis',
+      enum: ZORA_EMPHASES,
     },
     align: {
       type: 'enum',

package/src/components/heading/resolveHeadingRecipe.test.ts

@@ -230,28 +230,31 @@ describe('resolveHeadingRecipe', () => {
     expect(style.fontWeight).toBe(theme.typography.weights.bold);
   });
 
-  test('maps semantic tones to theme colors', () => {
-    expect(resolveHeadingRecipe(theme, { level: 2, tone: 'primary' }).color).toBe(
-      theme.semantics.brand.base,
+  test('maps semantic emphasis and colors to theme colors', () => {
+    expect(resolveHeadingRecipe(theme, { level: 2, color: 'primary' }).color).toBe(
+      theme.semantics.action.primary.base,
     );
-    expect(resolveHeadingRecipe(theme, { level: 2, tone: 'muted' }).color).toBe(
+    expect(resolveHeadingRecipe(theme, { level: 2, emphasis: 'muted' }).color).toBe(
       theme.semantics.content.muted,
     );
-    expect(resolveHeadingRecipe(theme, { level: 2, tone: 'subtle' }).color).toBe(
+    expect(resolveHeadingRecipe(theme, { level: 2, emphasis: 'subtle' }).color).toBe(
       theme.semantics.content.subtle,
     );
-    expect(resolveHeadingRecipe(theme, { level: 2, tone: 'inverse' }).color).toBe(
+    expect(resolveHeadingRecipe(theme, { level: 2, emphasis: 'inverse' }).color).toBe(
       theme.semantics.content.inverse,
     );
-    expect(resolveHeadingRecipe(theme, { level: 2, tone: 'danger' }).color).toBe(
-      theme.semantics.danger.base,
+    expect(resolveHeadingRecipe(theme, { level: 2, color: 'danger' }).color).toBe(
+      theme.semantics.action.danger.base,
     );
-    expect(resolveHeadingRecipe(theme, { level: 2, tone: 'success' }).color).toBe(
+    expect(resolveHeadingRecipe(theme, { level: 2, color: 'success' }).color).toBe(
       theme.semantics.success.base,
     );
-    expect(resolveHeadingRecipe(theme, { level: 2, tone: 'warning' }).color).toBe(
+    expect(resolveHeadingRecipe(theme, { level: 2, color: 'warning' }).color).toBe(
       theme.semantics.warning.base,
     );
+    expect(
+      resolveHeadingRecipe(theme, { level: 2, color: 'primary', emphasis: 'inverse' }).color,
+    ).toBe(theme.semantics.action.primary.onSolidText);
   });
 
   test('applies alignment', () => {