@ankhorage/zora 1.5.1 → 2.0.0

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: {

package/src/components/text/resolveTextRecipe.test.ts

@@ -286,31 +286,34 @@ describe('resolveTextStyle', () => {
     );
   });
 
-  test('maps tones to semantic colors', () => {
-    expect(resolveTextStyle({ theme, breakpoint: 'base', tone: 'default' }).color).toBe(
+  test('maps emphasis and color to semantic colors', () => {
+    expect(resolveTextStyle({ theme, breakpoint: 'base', emphasis: 'default' }).color).toBe(
       theme.semantics.content.default,
     );
-    expect(resolveTextStyle({ theme, breakpoint: 'base', tone: 'muted' }).color).toBe(
+    expect(resolveTextStyle({ theme, breakpoint: 'base', emphasis: 'muted' }).color).toBe(
       theme.semantics.content.muted,
     );
-    expect(resolveTextStyle({ theme, breakpoint: 'base', tone: 'subtle' }).color).toBe(
+    expect(resolveTextStyle({ theme, breakpoint: 'base', emphasis: 'subtle' }).color).toBe(
       theme.semantics.content.subtle,
     );
-    expect(resolveTextStyle({ theme, breakpoint: 'base', tone: 'inverse' }).color).toBe(
+    expect(resolveTextStyle({ theme, breakpoint: 'base', emphasis: 'inverse' }).color).toBe(
       theme.semantics.content.inverse,
     );
-    expect(resolveTextStyle({ theme, breakpoint: 'base', tone: 'primary' }).color).toBe(
-      theme.semantics.brand.base,
+    expect(resolveTextStyle({ theme, breakpoint: 'base', color: 'primary' }).color).toBe(
+      theme.semantics.action.primary.base,
     );
-    expect(resolveTextStyle({ theme, breakpoint: 'base', tone: 'danger' }).color).toBe(
-      theme.semantics.danger.base,
+    expect(resolveTextStyle({ theme, breakpoint: 'base', color: 'danger' }).color).toBe(
+      theme.semantics.action.danger.base,
     );
-    expect(resolveTextStyle({ theme, breakpoint: 'base', tone: 'success' }).color).toBe(
+    expect(resolveTextStyle({ theme, breakpoint: 'base', color: 'success' }).color).toBe(
       theme.semantics.success.base,
     );
-    expect(resolveTextStyle({ theme, breakpoint: 'base', tone: 'warning' }).color).toBe(
+    expect(resolveTextStyle({ theme, breakpoint: 'base', color: 'warning' }).color).toBe(
       theme.semantics.warning.base,
     );
+    expect(
+      resolveTextStyle({ theme, breakpoint: 'base', color: 'primary', emphasis: 'inverse' }).color,
+    ).toBe(theme.semantics.action.primary.onSolidText);
   });
 
   test('allows explicit weight to override the recipe weight', () => {
@@ -339,19 +342,20 @@ describe('resolveTextStyle', () => {
     expect(style.fontFamily).toBe('ZoraMediumItalic');
   });
 
-  test('resolves responsive variant, tone, align, and weight values', () => {
+  test('resolves responsive variant, color, emphasis, align, and weight values', () => {
     const style = resolveTextStyle({
       theme,
       breakpoint: 'md',
       variant: { base: 'bodySmall', md: 'lead' },
-      tone: { base: 'muted', md: 'primary' },
+      emphasis: { base: 'muted', md: 'default' },
+      color: { base: 'neutral', md: 'primary' },
       align: { base: 'center', md: 'left' },
       weight: { base: 'regular', md: 'semiBold' },
     });
 
     expect(style.fontSize).toBe(theme.typography.sizes.l);
     expect(style.lineHeight).toBe(28);
-    expect(style.color).toBe(theme.semantics.brand.base);
+    expect(style.color).toBe(theme.semantics.action.primary.base);
     expect(style.textAlign).toBe('left');
     expect(style.fontWeight).toBe(theme.typography.weights.semiBold);
   });

package/src/components/text/resolveTextRecipe.ts

@@ -3,11 +3,12 @@ import {
   type FontWeight,
   resolveResponsive,
   type Responsive,
+  type RoleSemantics,
   type SurfaceTheme,
 } from '@ankhorage/surface';
 import type { TextStyle } from 'react-native';
 
-import type { TextAlign, TextTone, TextVariant, TextWeight } from './types';
+import type { TextAlign, TextColor, TextEmphasis, TextVariant, TextWeight } from './types';
 
 interface VariantRecipe {
   fontSize: number;
@@ -21,7 +22,8 @@ interface ResolveTextStyleOptions {
   theme: SurfaceTheme;
   breakpoint: Breakpoint;
   variant?: Responsive<TextVariant>;
-  tone?: Responsive<TextTone>;
+  color?: Responsive<TextColor>;
+  emphasis?: Responsive<TextEmphasis>;
   weight?: Responsive<TextWeight>;
   align?: Responsive<TextAlign>;
   italic?: boolean;
@@ -109,22 +111,45 @@ function resolveVariantRecipe(
   }
 }
 
-function resolveToneColor(theme: SurfaceTheme, tone: TextTone): string {
-  switch (tone) {
+function resolveRoleSemantics(theme: SurfaceTheme, color: TextColor): 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 resolveTextColor(theme: SurfaceTheme, emphasis: TextEmphasis, color?: TextColor): 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;
@@ -135,13 +160,15 @@ export function resolveTextStyle({
   theme,
   breakpoint,
   variant,
-  tone,
+  color,
+  emphasis,
   weight,
   align,
   italic = false,
 }: ResolveTextStyleOptions): TextStyle {
   const resolvedVariant = resolveResponsive(variant, breakpoint) ?? 'body';
-  const resolvedTone = resolveResponsive(tone, breakpoint) ?? 'default';
+  const resolvedEmphasis = resolveResponsive(emphasis, breakpoint) ?? 'default';
+  const resolvedColor = resolveResponsive(color, breakpoint);
   const resolvedAlign = resolveResponsive(align, breakpoint);
   const recipe = resolveVariantRecipe(theme, resolvedVariant, breakpoint);
   const resolvedWeight = resolveWeight(
@@ -150,7 +177,7 @@ export function resolveTextStyle({
   );
 
   return {
-    color: resolveToneColor(theme, resolvedTone),
+    color: resolveTextColor(theme, resolvedEmphasis, resolvedColor),
     elevation: 0,
     fontFamily: resolveFontFamily({
       theme,

package/src/components/text/types.ts

@@ -2,19 +2,13 @@ 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 TextVariant = 'body' | 'lead' | 'bodySmall' | 'caption' | 'label' | 'eyebrow' | 'code';
 
-export type TextTone =
-  | 'default'
-  | 'muted'
-  | 'subtle'
-  | 'inverse'
-  | 'primary'
-  | 'danger'
-  | 'success'
-  | 'warning';
+export type TextColor = ZoraColor;
+export type TextEmphasis = ZoraEmphasis;
 
 export type TextWeight = 'regular' | 'medium' | 'semiBold' | 'bold';
 
@@ -25,7 +19,8 @@ export interface TextProps extends ZoraBaseProps {
   text?: string;
   i18nKey?: string;
   variant?: Responsive<TextVariant>;
-  tone?: Responsive<TextTone>;
+  color?: Responsive<TextColor>;
+  emphasis?: Responsive<TextEmphasis>;
   align?: Responsive<TextAlign>;
   weight?: Responsive<TextWeight>;
   italic?: boolean;

package/src/components/toolbar/ToolbarAction.tsx

@@ -13,8 +13,8 @@ function ToolbarActionInner({
   return (
     <IconButton
       {...props}
-      emphasis={active ? 'soft' : 'ghost'}
-      tone={active ? 'primary' : 'neutral'}
+      variant={active ? 'soft' : 'ghost'}
+      color={active ? 'primary' : 'neutral'}
       size="m"
     />
   );

package/src/index.ts

@@ -48,10 +48,11 @@ export {
 } from './components/form';
 export type {
   HeadingAlign,
+  HeadingColor,
+  HeadingEmphasis,
   HeadingLevel,
   HeadingProps,
   HeadingSize,
-  HeadingTone,
   HeadingWeight,
 } from './components/heading';
 export { Heading } from './components/heading';
@@ -89,7 +90,14 @@ export type { SelectOption, SelectProps } from './components/select';
 export { Select } from './components/select';
 export type { TabItem, TabsProps, TabsVariant } from './components/tabs';
 export { Tabs } from './components/tabs';
-export type { TextAlign, TextProps, TextTone, TextVariant, TextWeight } from './components/text';
+export type {
+  TextAlign,
+  TextColor,
+  TextEmphasis,
+  TextProps,
+  TextVariant,
+  TextWeight,
+} from './components/text';
 export { Text } from './components/text';
 export type { TextareaProps } from './components/textarea';
 export { Textarea } from './components/textarea';
@@ -120,6 +128,18 @@ export {
   Stack,
   Surface,
 } from './foundation';
+export type {
+  ZoraColor,
+  ZoraEmphasis,
+  ZoraPaletteColor,
+  ZoraStatusColor,
+} from './internal/colorModel';
+export {
+  ZORA_COLORS,
+  ZORA_EMPHASES,
+  ZORA_PALETTE_COLORS,
+  ZORA_STATUS_COLORS,
+} from './internal/colorModel';
 export type { AppShellProps } from './layout/app-shell';
 export { AppShell } from './layout/app-shell';
 export type { AuthLayoutProps } from './layout/auth-layout';

package/src/internal/colorModel.ts

@@ -0,0 +1,39 @@
+import type {
+  SurfaceColor,
+  SurfaceEmphasis,
+  SurfacePaletteColor,
+  SurfaceStatusColor,
+} from '@ankhorage/surface';
+
+export type ZoraPaletteColor = SurfacePaletteColor;
+export type ZoraStatusColor = SurfaceStatusColor;
+export type ZoraColor = SurfaceColor;
+export type ZoraEmphasis = SurfaceEmphasis;
+
+export const ZORA_PALETTE_COLORS = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'quaternary',
+  'neutral',
+] as const satisfies readonly SurfacePaletteColor[];
+
+export const ZORA_STATUS_COLORS = [
+  'success',
+  'warning',
+  'error',
+  'info',
+] as const satisfies readonly SurfaceStatusColor[];
+
+export const ZORA_COLORS = [
+  ...ZORA_PALETTE_COLORS,
+  ...ZORA_STATUS_COLORS,
+  'danger',
+] as const satisfies readonly SurfaceColor[];
+
+export const ZORA_EMPHASES = [
+  'default',
+  'muted',
+  'subtle',
+  'inverse',
+] as const satisfies readonly SurfaceEmphasis[];

package/src/internal/recipes.test.ts

@@ -13,7 +13,7 @@ describe('recipes', () => {
   test('maps button defaults to a more opinionated large solid primary button', () => {
     expect(resolveButtonRecipe({})).toEqual({
       size: 'l',
-      tone: 'primary',
+      color: 'primary',
       variant: 'solid',
     });
   });
@@ -21,7 +21,7 @@ describe('recipes', () => {
   test('maps badge defaults to a soft medium primary badge', () => {
     expect(resolveBadgeRecipe({})).toEqual({
       size: 'm',
-      tone: 'primary',
+      color: 'primary',
       variant: 'soft',
     });
   });

package/src/internal/recipes.ts

@@ -3,43 +3,43 @@ import type {
   ButtonProps as SurfaceButtonProps,
   CardProps as SurfaceCardProps,
 } from '@ankhorage/surface';
-
-export type ZoraTone = NonNullable<SurfaceButtonProps['tone']>;
-export type ZoraEmphasis = NonNullable<SurfaceButtonProps['variant']>;
+export type { ZoraColor, ZoraEmphasis } from './colorModel';
+import type { ZoraColor } from './colorModel';
+export type ZoraButtonVariant = NonNullable<SurfaceButtonProps['variant']>;
 export type ZoraControlSize = NonNullable<SurfaceButtonProps['size']>;
-export type ZoraBadgeEmphasis = NonNullable<SurfaceBadgeProps['variant']>;
+export type ZoraBadgeVariant = NonNullable<SurfaceBadgeProps['variant']>;
 export type ZoraCardTone = 'default' | 'subtle' | 'outline';
 export type ZoraContentWidth = 'narrow' | 'default' | 'wide';
 
 export function resolveButtonRecipe({
-  tone = 'primary',
-  emphasis = 'solid',
+  color = 'primary',
+  variant = 'solid',
   size = 'l',
 }: {
-  tone?: ZoraTone;
-  emphasis?: ZoraEmphasis;
+  color?: ZoraColor;
+  variant?: ZoraButtonVariant;
   size?: ZoraControlSize;
-}): Pick<SurfaceButtonProps, 'size' | 'tone' | 'variant'> {
+}): Pick<SurfaceButtonProps, 'size' | 'color' | 'variant'> {
   return {
     size,
-    tone,
-    variant: emphasis,
+    color,
+    variant,
   };
 }
 
 export function resolveBadgeRecipe({
-  tone = 'primary',
-  emphasis = 'soft',
+  color = 'primary',
+  variant = 'soft',
   size = 'm',
 }: {
-  tone?: ZoraTone;
-  emphasis?: ZoraBadgeEmphasis;
+  color?: ZoraColor;
+  variant?: ZoraBadgeVariant;
   size?: ZoraControlSize;
-}): Pick<SurfaceBadgeProps, 'size' | 'tone' | 'variant'> {
+}): Pick<SurfaceBadgeProps, 'size' | 'color' | 'variant'> {
   return {
     size,
-    tone,
-    variant: emphasis,
+    color,
+    variant,
   };
 }
 

package/src/patterns/auth/ForgotPasswordForm.tsx

@@ -61,12 +61,12 @@ function ForgotPasswordFormInner({
           <Stack direction="row" gap="s" wrap="wrap">
             <Button
               disabled={disabled || loading}
-              emphasis="ghost"
+              variant="ghost"
               onPress={() => {
                 void onSignIn();
               }}
               size="s"
-              tone="neutral"
+              color="neutral"
             >
               {signInLabel}
             </Button>