@ankhorage/zora 1.5.0 → 2.0.0

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/layout/screen/Screen.tsx

@@ -1,7 +1,7 @@
 import { ScrollArea } from '@ankhorage/surface';
 import React from 'react';
 
-import { Container, Stack } from '../../foundation';
+import { Box, Container, Stack } from '../../foundation';
 import { resolvePageMaxWidth } from '../../internal/recipes';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { ScreenProps } from './types';
@@ -25,10 +25,18 @@ function ScreenInner({
   );
 
   if (!scroll) {
-    return content;
+    return (
+      <Box bg="background" flex={1}>
+        {content}
+      </Box>
+    );
   }
 
-  return <ScrollArea>{content}</ScrollArea>;
+  return (
+    <ScrollArea bg="background" style={{ flex: 1 }}>
+      {content}
+    </ScrollArea>
+  );
 }
 
 export const Screen = withZoraThemeScope(ScreenInner);

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>

package/src/patterns/auth/OtpForm.tsx

@@ -56,13 +56,13 @@ function OtpFormInner({
           <Stack direction="row" gap="s" wrap="wrap">
             <Button
               disabled={disabled || loading || resendDisabled}
-              emphasis="ghost"
+              variant="ghost"
               loading={resendLoading}
               onPress={() => {
                 void onResend();
               }}
               size="s"
-              tone="neutral"
+              color="neutral"
             >
               {resendLabel}
             </Button>

package/src/patterns/auth/SignInForm.tsx

@@ -74,12 +74,12 @@ function SignInFormInner({
             {onForgotPassword ? (
               <Button
                 disabled={disabled || loading}
-                emphasis="ghost"
+                variant="ghost"
                 onPress={() => {
                   void onForgotPassword();
                 }}
                 size="s"
-                tone="neutral"
+                color="neutral"
               >
                 {forgotPasswordLabel}
               </Button>
@@ -87,12 +87,12 @@ function SignInFormInner({
             {onSignUp ? (
               <Button
                 disabled={disabled || loading}
-                emphasis="ghost"
+                variant="ghost"
                 onPress={() => {
                   void onSignUp();
                 }}
                 size="s"
-                tone="neutral"
+                color="neutral"
               >
                 {signUpLabel}
               </Button>

package/src/patterns/auth/SignUpForm.tsx

@@ -53,12 +53,12 @@ function SignUpFormInner({
           <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>

package/src/patterns/chat-list-item/ChatListItem.tsx

@@ -62,7 +62,7 @@ function renderUnreadCount(unreadCount: React.ReactNode) {
   }
 
   return (
-    <Badge size="s" tone="primary">
+    <Badge size="s" color="primary">
       {unreadCount}
     </Badge>
   );
@@ -126,7 +126,7 @@ function ChatListItemInner({
               shape={avatar?.shape}
               size={avatar?.size ?? (compact ? 's' : 'm')}
               source={avatar?.source}
-              tone={avatar?.tone}
+              color={avatar?.color}
             />
           )}
 
@@ -136,7 +136,7 @@ function ChatListItemInner({
                 <Box flex={1}>
                   <Text
                     numberOfLines={1}
-                    tone={disabled ? 'muted' : 'default'}
+                    emphasis={disabled ? 'muted' : 'default'}
                     variant="bodySmall"
                     weight={unread || selected ? 'semiBold' : 'medium'}
                   >
@@ -146,7 +146,8 @@ function ChatListItemInner({
                 {hasTimestamp ? (
                   <Text
                     numberOfLines={1}
-                    tone={unread ? 'primary' : 'subtle'}
+                    color={unread ? 'primary' : undefined}
+                    emphasis={unread ? 'default' : 'subtle'}
                     variant="caption"
                     weight={unread ? 'semiBold' : 'regular'}
                   >
@@ -162,7 +163,7 @@ function ChatListItemInner({
                       {hasPreview ? (
                         <Text
                           numberOfLines={1}
-                          tone={unread ? 'default' : 'muted'}
+                          emphasis={unread ? 'default' : 'muted'}
                           variant="bodySmall"
                           weight={unread ? 'medium' : 'regular'}
                         >
@@ -170,7 +171,7 @@ function ChatListItemInner({
                         </Text>
                       ) : null}
                       {hasMeta ? (
-                        <Text numberOfLines={1} tone="subtle" variant="caption">
+                        <Text numberOfLines={1} emphasis="subtle" variant="caption">
                           {meta}
                         </Text>
                       ) : null}

package/src/patterns/chat-list-item/types.ts

@@ -2,7 +2,7 @@ import type React from 'react';
 import type { ImageSourcePropType } from 'react-native';
 
 import type { AvatarShape, AvatarSize } from '../../components/avatar';
-import type { ZoraTone } from '../../internal/recipes';
+import type { ZoraColor } from '../../internal/recipes';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export interface ChatListAvatar {
@@ -12,7 +12,7 @@ export interface ChatListAvatar {
   label?: string;
   size?: AvatarSize;
   shape?: AvatarShape;
-  tone?: ZoraTone;
+  color?: ZoraColor;
 }
 
 export interface ChatListItemProps extends ZoraBaseProps {

package/src/patterns/collection-editor/CollectionEditor.tsx

@@ -33,7 +33,7 @@ function CollectionEditorInner<TItem>({
       title={title}
       actions={
         onAdd ? (
-          <Button emphasis="soft" size="s" disabled={disabled} onPress={onAdd}>
+          <Button variant="soft" size="s" disabled={disabled} onPress={onAdd}>
             {addLabel}
           </Button>
         ) : null
@@ -42,7 +42,7 @@ function CollectionEditorInner<TItem>({
       <Stack gap="s">
         {isEmpty ? (
           <Box py="m">
-            <Text align="center" tone="muted">
+            <Text align="center" emphasis="muted">
               {emptyLabel}
             </Text>
           </Box>
@@ -70,7 +70,7 @@ function CollectionEditorInner<TItem>({
                         disabled={disabled ?? index === 0}
                         onPress={() => onMove(index, index - 1)}
                         size="s"
-                        emphasis="ghost"
+                        variant="ghost"
                       />
                       <IconButton
                         icon={{ name: 'arrow-down-outline' }}
@@ -78,7 +78,7 @@ function CollectionEditorInner<TItem>({
                         disabled={disabled ?? index === items.length - 1}
                         onPress={() => onMove(index, index + 1)}
                         size="s"
-                        emphasis="ghost"
+                        variant="ghost"
                       />
                     </>
                   ) : null}
@@ -86,11 +86,11 @@ function CollectionEditorInner<TItem>({
                     <IconButton
                       icon={{ name: 'trash-outline' }}
                       label="Remove"
-                      tone="danger"
+                      color="danger"
                       disabled={disabled}
                       onPress={() => onRemove(index)}
                       size="s"
-                      emphasis="ghost"
+                      variant="ghost"
                     />
                   ) : null}
                 </Stack>

package/src/patterns/confirm-dialog/ConfirmDialog.tsx

@@ -15,8 +15,8 @@ function ConfirmDialogInner({
   children,
   confirmLabel = 'Confirm',
   cancelLabel = 'Cancel',
-  confirmTone = 'danger',
-  confirmEmphasis = 'solid',
+  confirmColor = 'danger',
+  confirmVariant = 'solid',
   busy = false,
   closeOnBackdrop = true,
   onConfirm,
@@ -29,10 +29,10 @@ function ConfirmDialogInner({
       description={description}
       footer={
         <Stack direction={{ base: 'column', md: 'row' }} gap="s" justify="flex-end">
-          <Button emphasis="soft" onPress={onCancel} tone="neutral">
+          <Button variant="soft" onPress={onCancel} color="neutral">
             {cancelLabel}
           </Button>
-          <Button emphasis={confirmEmphasis} loading={busy} onPress={onConfirm} tone={confirmTone}>
+          <Button variant={confirmVariant} loading={busy} onPress={onConfirm} color={confirmColor}>
             {confirmLabel}
           </Button>
         </Stack>

package/src/patterns/confirm-dialog/types.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 
-import type { ZoraEmphasis, ZoraTone } from '../../internal/recipes';
+import type { ZoraButtonVariant, ZoraColor } from '../../internal/recipes';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export interface ConfirmDialogProps extends ZoraBaseProps {
@@ -10,8 +10,8 @@ export interface ConfirmDialogProps extends ZoraBaseProps {
   children?: React.ReactNode;
   confirmLabel?: React.ReactNode;
   cancelLabel?: React.ReactNode;
-  confirmTone?: ZoraTone;
-  confirmEmphasis?: ZoraEmphasis;
+  confirmColor?: ZoraColor;
+  confirmVariant?: ZoraButtonVariant;
   busy?: boolean;
   closeOnBackdrop?: boolean;
   onConfirm?: () => void;

package/src/patterns/disclosure-section/DisclosureSection.tsx

@@ -49,8 +49,8 @@ function DisclosureSectionInner({
           <IconButton
             icon={{ name: isOpen ? 'chevron-up-outline' : 'chevron-down-outline' }}
             label={isOpen ? 'Collapse' : 'Expand'}
-            emphasis="ghost"
-            tone="neutral"
+            variant="ghost"
+            color="neutral"
             size="s"
             disabled={disabled}
             onPress={toggleOpen}

package/src/patterns/empty-state/EmptyState.tsx

@@ -31,18 +31,18 @@ function EmptyStateInner({
           <Stack direction={{ base: 'column', md: 'row' }} gap="s">
             {primaryAction ? (
               <Button
-                emphasis={primaryAction.emphasis}
+                variant={primaryAction.variant}
                 onPress={primaryAction.onPress}
-                tone={primaryAction.tone}
+                color={primaryAction.color}
               >
                 {primaryAction.label}
               </Button>
             ) : null}
             {secondaryAction ? (
               <Button
-                emphasis={secondaryAction.emphasis ?? 'soft'}
+                variant={secondaryAction.variant ?? 'soft'}
                 onPress={secondaryAction.onPress}
-                tone={secondaryAction.tone ?? 'neutral'}
+                color={secondaryAction.color ?? 'neutral'}
               >
                 {secondaryAction.label}
               </Button>

package/src/patterns/empty-state/types.ts

@@ -1,13 +1,13 @@
 import type React from 'react';
 
-import type { ZoraEmphasis, ZoraTone } from '../../internal/recipes';
+import type { ZoraButtonVariant, ZoraColor } from '../../internal/recipes';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export interface EmptyStateAction {
   label: React.ReactNode;
   onPress: () => void;
-  tone?: ZoraTone;
-  emphasis?: ZoraEmphasis;
+  color?: ZoraColor;
+  variant?: ZoraButtonVariant;
 }
 
 export interface EmptyStateProps extends ZoraBaseProps {

package/src/patterns/form-field/FormField.tsx

@@ -25,7 +25,7 @@ function FormFieldInner({
             {label}
           </Text>
           {description ? (
-            <Text tone="muted" variant="bodySmall">
+            <Text emphasis="muted" variant="bodySmall">
               {description}
             </Text>
           ) : null}