@ankhorage/zora 1.5.1 → 2.1.0

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', () => {

package/src/components/heading/resolveHeadingRecipe.ts

@@ -1,12 +1,20 @@
-import type { FontWeight, SurfaceTheme } from '@ankhorage/surface';
+import type { FontWeight, RoleSemantics, SurfaceTheme } from '@ankhorage/surface';
 import type { TextStyle } from 'react-native';
 
-import type { HeadingAlign, HeadingLevel, HeadingSize, HeadingTone, HeadingWeight } from './types';
+import type {
+  HeadingAlign,
+  HeadingColor,
+  HeadingEmphasis,
+  HeadingLevel,
+  HeadingSize,
+  HeadingWeight,
+} from './types';
 
 interface ResolveHeadingRecipeOptions {
   level: HeadingLevel;
   size?: HeadingSize;
-  tone?: HeadingTone;
+  color?: HeadingColor;
+  emphasis?: HeadingEmphasis;
   align?: HeadingAlign;
   weight?: HeadingWeight;
   italic?: boolean;
@@ -72,22 +80,49 @@ function resolveSizeRecipe(theme: SurfaceTheme, size: HeadingSize): HeadingRecip
   };
 }
 
-function resolveToneColor(theme: SurfaceTheme, tone: HeadingTone): string {
-  switch (tone) {
+function resolveRoleSemantics(theme: SurfaceTheme, color: HeadingColor): RoleSemantics {
+  switch (color) {
+    case 'secondary':
+      return theme.semantics.secondary;
+    case 'tertiary':
+      return theme.semantics.accent;
+    case 'quaternary':
+      return theme.semantics.highlight;
+    case 'neutral':
+      return theme.semantics.action.neutral;
+    case 'error':
+      return theme.semantics.error;
+    case 'info':
+      return theme.semantics.info;
+    case 'danger':
+      return theme.semantics.action.danger;
+    case 'success':
+      return theme.semantics.success;
+    case 'warning':
+      return theme.semantics.warning;
+    case 'primary':
+    default:
+      return theme.semantics.action.primary;
+  }
+}
+
+function resolveHeadingColor(
+  theme: SurfaceTheme,
+  emphasis: HeadingEmphasis,
+  color?: HeadingColor,
+): string {
+  if (color) {
+    const role = resolveRoleSemantics(theme, color);
+    return emphasis === 'inverse' ? role.onSolidText : role.base;
+  }
+
+  switch (emphasis) {
     case 'muted':
       return theme.semantics.content.muted;
     case 'subtle':
       return theme.semantics.content.subtle;
     case 'inverse':
       return theme.semantics.content.inverse;
-    case 'primary':
-      return theme.semantics.brand.base;
-    case 'danger':
-      return theme.semantics.danger.base;
-    case 'success':
-      return theme.semantics.success.base;
-    case 'warning':
-      return theme.semantics.warning.base;
     case 'default':
     default:
       return theme.semantics.content.default;
@@ -112,13 +147,21 @@ function resolveFontFamily({
 
 export function resolveHeadingRecipe(
   theme: SurfaceTheme,
-  { align, italic = false, level, size, tone = 'default', weight }: ResolveHeadingRecipeOptions,
+  {
+    align,
+    color,
+    emphasis = 'default',
+    italic = false,
+    level,
+    size,
+    weight,
+  }: ResolveHeadingRecipeOptions,
 ): TextStyle {
   const recipe = resolveSizeRecipe(theme, size ?? resolveHeadingSizeFromLevel(level));
   const resolvedWeight = resolveWeight(theme, weight ?? recipe.weight);
 
   return {
-    color: resolveToneColor(theme, tone),
+    color: resolveHeadingColor(theme, emphasis, color),
     elevation: 0,
     fontFamily: resolveFontFamily({ theme, weight: resolvedWeight, italic }),
     fontSize: recipe.fontSize,

package/src/components/heading/types.ts

@@ -2,21 +2,15 @@ import type { Responsive } from '@ankhorage/surface';
 import type React from 'react';
 import type { AccessibilityRole, TextStyle } from 'react-native';
 
+import type { ZoraColor, ZoraEmphasis } from '../../internal/recipes';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
 export type HeadingSize = 'display' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
-export type HeadingTone =
-  | 'default'
-  | 'muted'
-  | 'subtle'
-  | 'inverse'
-  | 'primary'
-  | 'danger'
-  | 'success'
-  | 'warning';
+export type HeadingColor = ZoraColor;
+export type HeadingEmphasis = ZoraEmphasis;
 
 export type HeadingAlign = NonNullable<TextStyle['textAlign']>;
 
@@ -28,7 +22,8 @@ export interface HeadingProps extends ZoraBaseProps {
   i18nKey?: string;
   level?: HeadingLevel;
   size?: Responsive<HeadingSize>;
-  tone?: Responsive<HeadingTone>;
+  color?: Responsive<HeadingColor>;
+  emphasis?: Responsive<HeadingEmphasis>;
   align?: Responsive<HeadingAlign>;
   weight?: Responsive<HeadingWeight>;
   italic?: boolean;

package/src/components/icon-button/IconButton.tsx

@@ -10,20 +10,20 @@ function IconButtonInner({
   mode: _mode,
   icon,
   label,
-  emphasis = 'ghost',
-  tone = 'neutral',
+  variant = 'ghost',
+  color = 'neutral',
   size = 'm',
   ...props
 }: IconButtonProps) {
-  const recipe = resolveButtonRecipe({ emphasis, tone, size });
+  const recipe = resolveButtonRecipe({ color, variant, size });
 
   return (
     <SurfaceIconButton
       {...props}
       icon={icon}
       accessibilityLabel={label}
+      color={recipe.color}
       size={recipe.size}
-      tone={recipe.tone}
       variant={recipe.variant}
     />
   );

package/src/components/icon-button/types.ts

@@ -1,13 +1,13 @@
 import type { ButtonIconSpec } from '@ankhorage/surface';
 
-import type { ZoraControlSize, ZoraEmphasis, ZoraTone } from '../../internal/recipes';
+import type { ZoraButtonVariant, ZoraColor, ZoraControlSize } from '../../internal/recipes';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export interface IconButtonProps extends ZoraBaseProps {
   icon: ButtonIconSpec;
   label: string;
-  emphasis?: ZoraEmphasis;
-  tone?: ZoraTone;
+  variant?: ZoraButtonVariant;
+  color?: ZoraColor;
   size?: ZoraControlSize;
   disabled?: boolean;
   loading?: boolean;

package/src/components/input/Input.tsx

@@ -44,9 +44,9 @@ function InputInner({
             icon={trailingAction.icon}
             label={trailingAction.label}
             disabled={disabled ?? readOnly}
-            emphasis="ghost"
+            variant="ghost"
             size={size === 'l' ? 'm' : size}
-            tone="neutral"
+            color="neutral"
             onPress={trailingAction.onPress}
           />
         ) : trailingIcon ? (

package/src/components/media-card/MediaCard.tsx

@@ -91,7 +91,7 @@ function MediaCardInner({
             <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}
@@ -100,7 +100,7 @@ function MediaCardInner({
                   {badges ? <Box>{badges}</Box> : null}
                 </Stack>
                 {description ? (
-                  <Text tone="muted" variant="bodySmall">
+                  <Text emphasis="muted" variant="bodySmall">
                     {description}
                   </Text>
                 ) : null}

package/src/components/metric-card/MetricCard.tsx

@@ -20,7 +20,7 @@ function MetricCardInner({
   description,
   icon,
   delta,
-  deltaTone = 'neutral',
+  deltaColor = 'neutral',
   actions,
   tone = 'default',
   compact = false,
@@ -29,7 +29,7 @@ function MetricCardInner({
   const { theme } = useZoraTheme();
   const isInteractive = Boolean(onPress) && !actions;
 
-  const badgeRecipe = resolveBadgeRecipe({ tone: deltaTone, emphasis: 'soft', size: 's' });
+  const badgeRecipe = resolveBadgeRecipe({ color: deltaColor, variant: 'soft', size: 's' });
   const iconColor = theme.semantics.content.muted;
 
   return (
@@ -51,14 +51,14 @@ function MetricCardInner({
                   size={resolveIconSize('s')}
                 />
               ) : null}
-              <Text tone="muted" variant="caption" weight="semiBold">
+              <Text emphasis="muted" variant="caption" weight="semiBold">
                 {label}
               </Text>
               {delta != null ? (
                 <Badge
-                  emphasis={badgeRecipe.variant}
+                  variant={badgeRecipe.variant}
                   size={badgeRecipe.size}
-                  tone={badgeRecipe.tone}
+                  color={badgeRecipe.color}
                 >
                   {delta}
                 </Badge>
@@ -68,7 +68,7 @@ function MetricCardInner({
             <Heading level={compact ? 3 : 2}>{value}</Heading>
 
             {description ? (
-              <Text tone="muted" variant="bodySmall">
+              <Text emphasis="muted" variant="bodySmall">
                 {description}
               </Text>
             ) : null}

package/src/components/metric-card/types.ts

@@ -1,7 +1,7 @@
 import type { ButtonIconSpec } from '@ankhorage/surface';
 import type React from 'react';
 
-import type { ZoraCardTone, ZoraTone } from '../../internal/recipes';
+import type { ZoraCardTone, ZoraColor } from '../../internal/recipes';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export interface MetricCardProps extends ZoraBaseProps {
@@ -10,7 +10,7 @@ export interface MetricCardProps extends ZoraBaseProps {
   description?: React.ReactNode;
   icon?: ButtonIconSpec;
   delta?: React.ReactNode;
-  deltaTone?: ZoraTone;
+  deltaColor?: ZoraColor;
   actions?: React.ReactNode;
   tone?: ZoraCardTone;
   compact?: boolean;

package/src/components/modal/Modal.tsx

@@ -42,7 +42,7 @@ function ModalInner({
             <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/progress/Progress.tsx

@@ -24,13 +24,13 @@ function ProgressInner({
   testID,
   value,
   max = 100,
-  tone = 'primary',
+  color = 'primary',
   size = 'm',
 }: ProgressProps) {
   const { theme } = useZoraTheme();
   const fraction = resolveProgressFraction({ value, max });
   const height = resolveProgressHeight(size);
-  const role = resolveProgressRole(theme, tone);
+  const role = resolveProgressRole(theme, color);
 
   return (
     <Box

package/src/components/progress/types.ts

@@ -1,17 +1,27 @@
 import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';
 
-import type { ZoraControlSize, ZoraTone } from '../../internal/recipes';
+import type { ZoraColor, ZoraControlSize } from '../../internal/recipes';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export interface ProgressProps extends ZoraBaseProps {
   value: number;
   max?: number;
-  tone?: ZoraTone;
+  color?: ZoraColor;
   size?: ZoraControlSize;
 }
 
-export function resolveProgressRole(theme: SurfaceTheme, tone: ZoraTone): RoleSemantics {
-  switch (tone) {
+export function resolveProgressRole(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':

package/src/components/radio/RadioGroup.tsx

@@ -15,7 +15,7 @@ function RadioGroupInner<TValue extends string>({
   options,
   orientation = 'vertical',
   gap = 's',
-  tone = 'primary',
+  color = 'primary',
   size = 'm',
   invalid = false,
   readOnly = false,
@@ -47,7 +47,7 @@ function RadioGroupInner<TValue extends string>({
             invalid={invalid}
             readOnly={readOnly}
             size={size}
-            tone={tone}
+            color={color}
             onSelect={onValueChange}
           />
         ))}
@@ -65,7 +65,7 @@ function RadioGroupItem<TValue extends string>({
   invalid,
   readOnly,
   size,
-  tone,
+  color,
   onSelect,
 }: {
   option: RadioGroupOption<TValue>;
@@ -74,7 +74,7 @@ function RadioGroupItem<TValue extends string>({
   invalid: boolean;
   readOnly: boolean;
   size: NonNullable<RadioGroupProps<TValue>['size']>;
-  tone: NonNullable<RadioGroupProps<TValue>['tone']>;
+  color: NonNullable<RadioGroupProps<TValue>['color']>;
   onSelect: (value: TValue) => void;
 }) {
   return (
@@ -84,7 +84,7 @@ function RadioGroupItem<TValue extends string>({
       invalid={invalid}
       readOnly={readOnly}
       size={size}
-      tone={tone}
+      color={color}
       testID={option.testID}
       onCheckedChange={(nextChecked) => {
         if (nextChecked) onSelect(option.value);
@@ -93,7 +93,7 @@ function RadioGroupItem<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/radio/types.ts

@@ -18,7 +18,7 @@ export interface RadioGroupProps<TValue extends string>
     ZoraBaseProps,
     Pick<
       Omit<SurfaceRadioProps, 'mode' | 'themeId'>,
-      'tone' | 'size' | 'invalid' | 'readOnly' | 'disabled'
+      'color' | 'size' | 'invalid' | 'readOnly' | 'disabled'
     > {
   value: TValue;
   onValueChange: (value: TValue) => void;

package/src/components/rating/Rating.tsx

@@ -14,11 +14,11 @@ function RatingInner({
   testID,
   value,
   max = 5,
-  tone = 'warning',
+  color = 'warning',
   size = 'm',
 }: RatingProps) {
   const { theme } = useZoraTheme();
-  const role = resolveRatingRole(theme, tone);
+  const role = resolveRatingRole(theme, color);
   const segments = resolveRatingSegments({ value, max });
   const iconSize = resolveIconSize(size);
 

package/src/components/rating/types.ts

@@ -1,17 +1,27 @@
 import type { RoleSemantics, SurfaceTheme } from '@ankhorage/surface';
 
-import type { ZoraControlSize, ZoraTone } from '../../internal/recipes';
+import type { ZoraColor, ZoraControlSize } from '../../internal/recipes';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export interface RatingProps extends ZoraBaseProps {
   value: number;
   max?: number;
-  tone?: ZoraTone;
+  color?: ZoraColor;
   size?: ZoraControlSize;
 }
 
-export function resolveRatingRole(theme: SurfaceTheme, tone: ZoraTone): RoleSemantics {
-  switch (tone) {
+export function resolveRatingRole(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':

package/src/components/tabs/Tabs.tsx

@@ -28,8 +28,8 @@ function TabsInner<TValue extends string = string>({
       return (
         <Button
           key={item.value}
-          emphasis={isActive ? 'solid' : 'ghost'}
-          tone="neutral"
+          variant={isActive ? 'solid' : 'ghost'}
+          color="neutral"
           size={size}
           disabled={isDisabled}
           onPress={() => onValueChange(item.value)}
@@ -46,8 +46,8 @@ function TabsInner<TValue extends string = string>({
       return (
         <Button
           key={item.value}
-          emphasis={isActive ? 'soft' : 'ghost'}
-          tone={isActive ? 'primary' : 'neutral'}
+          variant={isActive ? 'soft' : 'ghost'}
+          color={isActive ? 'primary' : 'neutral'}
           size={size}
           disabled={isDisabled}
           onPress={() => onValueChange(item.value)}
@@ -71,15 +71,19 @@ function TabsInner<TValue extends string = string>({
         }}
       >
         <Button
-          emphasis="ghost"
-          tone="neutral"
+          variant="ghost"
+          color="neutral"
           size={size}
           disabled={isDisabled}
           onPress={() => onValueChange(item.value)}
           leadingIcon={item.icon}
           testID={item.testID}
         >
-          <Text tone={isActive ? 'primary' : 'muted'} weight={isActive ? 'semiBold' : 'regular'}>
+          <Text
+            color={isActive ? 'primary' : undefined}
+            emphasis={isActive ? 'default' : 'muted'}
+            weight={isActive ? 'semiBold' : 'regular'}
+          >
             {item.label}
           </Text>
           {item.badge}

package/src/components/text/Text.tsx

@@ -38,7 +38,8 @@ function TextInner({
   text,
   i18nKey,
   variant = 'body',
-  tone = 'default',
+  color,
+  emphasis = 'default',
   align,
   weight,
   italic = false,
@@ -59,7 +60,8 @@ function TextInner({
     theme,
     breakpoint,
     variant: resolvedVariant,
-    tone,
+    color,
+    emphasis,
     align,
     weight,
     italic,

package/src/components/text/index.ts

@@ -1,2 +1,9 @@
 export { Text } from './Text';
-export type { TextAlign, TextProps, TextTone, TextVariant, TextWeight } from './types';
+export type {
+  TextAlign,
+  TextColor,
+  TextEmphasis,
+  TextProps,
+  TextVariant,
+  TextWeight,
+} from './types';

package/src/components/text/meta.ts

@@ -1,3 +1,4 @@
+import { ZORA_COLORS, ZORA_EMPHASES } from '../../internal/colorModel';
 import type { ZoraComponentMeta } from '../../metadata';
 
 export const textMeta = {
@@ -9,7 +10,7 @@ export const textMeta = {
     label: 'Text',
     defaultProps: {
       text: 'Text',
-      tone: 'default',
+      emphasis: 'default',
       variant: 'body',
     },
   },
@@ -35,11 +36,17 @@ export const textMeta = {
       enum: ['body', 'lead', 'bodySmall', 'caption', 'label', 'eyebrow', 'code'],
       default: 'body',
     },
-    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,
       default: 'default',
     },
     align: {