@ankhorage/zora 1.5.1 → 2.0.0

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

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