@ankhorage/surface 1.4.0 → 2.0.1

package/src/components/label/Label.tsx

@@ -3,12 +3,18 @@ import React from 'react';
 import { Text } from '../../primitives/text';
 import type { LabelProps } from './types';
 
-export function Label({ children, required = false, tone = 'default', testID }: LabelProps) {
+export function Label({
+  children,
+  required = false,
+  emphasis = 'default',
+  color,
+  testID,
+}: LabelProps) {
   return (
-    <Text testID={testID} tone={tone} variant="label" weight="medium">
+    <Text color={color} emphasis={emphasis} testID={testID} variant="label" weight="medium">
       {children}
       {required ? (
-        <Text tone="danger" variant="label" weight="medium">
+        <Text color="error" variant="label" weight="medium">
           {' *'}
         </Text>
       ) : null}

package/src/components/label/types.ts

@@ -1,10 +1,11 @@
 import type React from 'react';
 
-import type { TextTone } from '../../internal/resolvers/resolveTextColor';
+import type { SurfaceColor, SurfaceEmphasis } from '../../surfaceColor';
 
 export interface LabelProps {
   children?: React.ReactNode;
   required?: boolean;
-  tone?: Extract<TextTone, 'default' | 'muted' | 'danger'>;
+  emphasis?: Extract<SurfaceEmphasis, 'default' | 'muted'>;
+  color?: Extract<SurfaceColor, 'error'>;
   testID?: string;
 }

package/src/components/list-item/ListItem.tsx

@@ -34,7 +34,7 @@ function ListItemContent({
           </Text>
         ) : null}
         {description ? (
-          <Text numberOfLines={2} tone="muted" variant="bodySmall">
+          <Text emphasis="muted" numberOfLines={2} variant="bodySmall">
             {description}
           </Text>
         ) : null}

package/src/components/menu/Menu.tsx

@@ -156,14 +156,7 @@ export function Menu({ trigger, items, onDismiss, closeOnSelect = true, testID }
                         }}
                         testID={testID ? `${testID}-item-${item.id}` : undefined}
                       >
-                        <Text
-                          color={
-                            selected
-                              ? theme.semantics.action.neutral.base
-                              : theme.semantics.content.default
-                          }
-                          variant="bodySmall"
-                        >
+                        <Text color={selected ? 'neutral' : undefined} variant="bodySmall">
                           {item.label}
                         </Text>
                       </Box>

package/src/components/navigation/NavigationItem.tsx

@@ -60,7 +60,8 @@ export function NavigationItem({ item, compact = false, testID }: NavigationItem
             ) : null}
             <Box flex={1}>
               <Text
-                color={presentation.contentColor}
+                color={active && !disabled ? 'primary' : undefined}
+                emphasis={disabled ? 'muted' : 'default'}
                 numberOfLines={1}
                 variant={compact ? 'bodySmall' : 'body'}
                 weight="medium"

package/src/components/navigation/TabBarItem.tsx

@@ -66,7 +66,8 @@ export function TabBarItem({ item, compact = false, testID }: TabBarItemProps) {
             ) : null}
             {item.label ? (
               <Text
-                color={contentColor}
+                color={active && !disabled ? 'primary' : undefined}
+                emphasis={active && !disabled ? 'default' : 'muted'}
                 numberOfLines={1}
                 variant={compact ? 'bodySmall' : 'label'}
                 weight="medium"

package/src/components/radio/Radio.tsx

@@ -18,7 +18,7 @@ export function Radio({
   checked,
   defaultChecked = false,
   onCheckedChange,
-  tone = 'primary',
+  color = 'primary',
   size = 'm',
   disabled = false,
   invalid = false,
@@ -69,8 +69,10 @@ export function Radio({
           fieldState,
           hovered: interactionState.hovered,
           pressed: interactionState.pressed,
-          tone,
+          color,
         });
+        const labelEmphasis =
+          colors.labelColor === theme.semantics.content.muted ? 'muted' : 'default';
 
         return (
           <Box
@@ -105,7 +107,7 @@ export function Radio({
             </Box>
             {children ? (
               <Box ml="s">
-                <Text color={colors.labelColor}>{children}</Text>
+                <Text emphasis={labelEmphasis}>{children}</Text>
               </Box>
             ) : null}
           </Box>

package/src/components/radio/types.ts

@@ -1,8 +1,8 @@
 import type React from 'react';
 
 import type { ControlSize } from '../../internal/resolvers/resolveControlSize';
-import type { ComponentTone } from '../../internal/resolvers/resolveTone';
 import type { ButtonBaseProps } from '../../primitives/button-base';
+import type { SurfaceColor } from '../../surfaceColor';
 
 export interface RadioProps extends Omit<
   ButtonBaseProps,
@@ -12,7 +12,7 @@ export interface RadioProps extends Omit<
   checked?: boolean;
   defaultChecked?: boolean;
   onCheckedChange?: ((checked: boolean) => void) | undefined;
-  tone?: ComponentTone;
+  color?: SurfaceColor;
   size?: ControlSize;
   invalid?: boolean;
   readOnly?: boolean;

package/src/components/switch/Switch.tsx

@@ -18,7 +18,7 @@ export function Switch({
   checked,
   defaultChecked = false,
   onCheckedChange,
-  tone = 'primary',
+  color = 'primary',
   size = 'm',
   disabled = false,
   invalid = false,
@@ -69,8 +69,10 @@ export function Switch({
           fieldState,
           hovered: interactionState.hovered,
           pressed: interactionState.pressed,
-          tone,
+          color,
         });
+        const labelEmphasis =
+          colors.labelColor === theme.semantics.content.muted ? 'muted' : 'default';
 
         return (
           <Box
@@ -105,7 +107,7 @@ export function Switch({
             </Box>
             {children ? (
               <Box ml="s">
-                <Text color={colors.labelColor}>{children}</Text>
+                <Text emphasis={labelEmphasis}>{children}</Text>
               </Box>
             ) : null}
           </Box>

package/src/components/switch/types.ts

@@ -1,8 +1,8 @@
 import type React from 'react';
 
 import type { ControlSize } from '../../internal/resolvers/resolveControlSize';
-import type { ComponentTone } from '../../internal/resolvers/resolveTone';
 import type { ButtonBaseProps } from '../../primitives/button-base';
+import type { SurfaceColor } from '../../surfaceColor';
 
 export interface SwitchProps extends Omit<
   ButtonBaseProps,
@@ -12,7 +12,7 @@ export interface SwitchProps extends Omit<
   checked?: boolean;
   defaultChecked?: boolean;
   onCheckedChange?: ((checked: boolean) => void) | undefined;
-  tone?: ComponentTone;
+  color?: SurfaceColor;
   size?: ControlSize;
   invalid?: boolean;
   readOnly?: boolean;

package/src/components/tabs/Tab.tsx

@@ -69,11 +69,7 @@ export function Tab({ value, children, disabled = false, testID }: TabProps) {
           opacity: disabled ? 0.64 : 1,
         }}
       >
-        <Text
-          color={selected ? theme.semantics.action.primary.base : theme.semantics.content.default}
-          variant="label"
-          weight="medium"
-        >
+        <Text color={selected ? 'primary' : undefined} variant="label" weight="medium">
           {children}
         </Text>
       </Box>

package/src/components/toast/Toast.tsx

@@ -3,23 +3,51 @@ import { Pressable } from 'react-native';
 
 import { Box, Inline, Surface } from '../../layout';
 import { Text } from '../../primitives/text';
+import type { SurfaceColor } from '../../surfaceColor';
 import { useTheme } from '../../theme/ThemeContext';
+import type { SurfaceTheme } from '../../theme/types';
 import type { ToastProps } from './types';
 
-export function Toast({ title, description, tone = 'default', onDismiss, testID }: ToastProps) {
+function resolveToastStatusColor(theme: SurfaceTheme, status: ToastProps['status']) {
+  switch (status) {
+    case 'success':
+      return theme.semantics.success.base;
+    case 'warning':
+      return theme.semantics.warning.base;
+    case 'error':
+      return theme.semantics.error.base;
+    case 'info':
+      return theme.semantics.info.base;
+    default:
+      return theme.semantics.action.primary.base;
+  }
+}
+
+function resolveToastStatusTextColor(status: ToastProps['status']): SurfaceColor {
+  switch (status) {
+    case 'success':
+      return 'success';
+    case 'warning':
+      return 'warning';
+    case 'error':
+      return 'error';
+    case 'info':
+      return 'info';
+    default:
+      return 'primary';
+  }
+}
+
+export function Toast({ title, description, status = 'default', onDismiss, testID }: ToastProps) {
   const { theme } = useTheme();
-  const toneColor =
-    tone === 'success'
-      ? theme.semantics.success.base
-      : tone === 'danger'
-        ? theme.semantics.danger.base
-        : theme.semantics.action.primary.base;
+  const statusColor = resolveToastStatusColor(theme, status);
+  const statusTextColor = resolveToastStatusTextColor(status);
 
   return (
     <Surface
       p="m"
       style={{
-        borderLeftColor: toneColor,
+        borderLeftColor: statusColor,
         borderLeftWidth: 3,
         minWidth: 280,
         shadowOpacity: 0.14,
@@ -36,7 +64,7 @@ export function Toast({ title, description, tone = 'default', onDismiss, testID
               {title}
             </Text>
           ) : null}
-          {description ? <Text tone="muted">{description}</Text> : null}
+          {description ? <Text emphasis="muted">{description}</Text> : null}
         </Box>
         {onDismiss ? (
           <Pressable
@@ -45,7 +73,7 @@ export function Toast({ title, description, tone = 'default', onDismiss, testID
             onPress={onDismiss}
             testID={testID ? `${testID}-dismiss` : undefined}
           >
-            <Text color={toneColor}>×</Text>
+            <Text color={statusTextColor}>×</Text>
           </Pressable>
         ) : null}
       </Inline>

package/src/components/toast/ToastProvider.tsx

@@ -92,9 +92,9 @@ export function ToastProvider({
               description={toast.description}
               key={toast.id}
               onDismiss={() => dismissToast(toast.id)}
+              status={toast.status}
               testID={toast.testID}
               title={toast.title}
-              tone={toast.tone}
             />
           ))}
         </Stack>

package/src/components/toast/index.ts

@@ -1,3 +1,3 @@
 export { Toast } from './Toast';
 export { ToastProvider, useToast } from './ToastProvider';
-export type { ToastOptions, ToastProps, ToastTone } from './types';
+export type { ToastOptions, ToastProps, ToastStatus } from './types';

package/src/components/toast/types.ts

@@ -1,11 +1,13 @@
 import type React from 'react';
 
-export type ToastTone = 'default' | 'success' | 'danger';
+import type { SurfaceStatusColor } from '../../surfaceColor';
+
+export type ToastStatus = 'default' | SurfaceStatusColor;
 
 export interface ToastProps {
   title?: React.ReactNode;
   description?: React.ReactNode;
-  tone?: ToastTone;
+  status?: ToastStatus;
   onDismiss?: (() => void) | undefined;
   testID?: string;
 }

package/src/components/tooltip/Tooltip.tsx

@@ -98,7 +98,7 @@ export function Tooltip({
             testID={testID}
             variant="raised"
           >
-            <Text color={theme.semantics.content.inverse} variant="caption">
+            <Text emphasis="inverse" variant="caption">
               {content}
             </Text>
           </Surface>

package/src/examples/DocsExamples.tsx

@@ -42,8 +42,8 @@ export function ProviderExample() {
     <ThemeProvider initialConfig={docsThemeConfig}>
       <Stack gap="m" p="l">
         <Text variant="body">Surface starter</Text>
-        <Badge content="Foundation" tone="success" />
-        <Button tone="warning" variant="soft">
+        <Badge color="success" content="Foundation" />
+        <Button color="warning" variant="soft">
           Continue
         </Button>
       </Stack>
@@ -66,7 +66,7 @@ export function FormAndOverlayExample() {
           <Checkbox defaultChecked>Weekly updates</Checkbox>
           <Radio>Product announcements</Radio>
           <Switch readOnly>Read-only setting</Switch>
-          <HelperText tone="danger">Invalid fields should reuse the same danger tone.</HelperText>
+          <HelperText color="error">Invalid fields should reuse the same error color.</HelperText>
         </Stack>
         <Modal visible={false}>
           <Text>Modal content</Text>
@@ -106,7 +106,7 @@ export function NavigationExample() {
           trigger={<Text>Open menu</Text>}
         />
         <Box>
-          <Text tone="success">Theme overrides can stay semantic.</Text>
+          <Text color="success">Theme overrides can stay semantic.</Text>
         </Box>
       </Stack>
     </ThemeProvider>

package/src/index.test.ts

@@ -34,6 +34,7 @@ const expectedRootExports = [
   "export * from './core/responsive';",
   "export * from './layout';",
   "export { Image } from './primitives/image';",
+  "export {\n  SURFACE_COLORS,\n  SURFACE_EMPHASES,\n  SURFACE_PALETTE_COLORS,\n  SURFACE_STATUS_COLORS,\n} from './surfaceColor';",
   "export * from './theme';",
 ] as const;
 

package/src/index.ts

@@ -1,3 +1,5 @@
+export type { ActionSheetItemProps, ActionSheetProps } from './components/action-sheet';
+export { ActionSheet, ActionSheetItem } from './components/action-sheet';
 export type { BadgeProps } from './components/badge';
 export { Badge } from './components/badge';
 export type { ButtonIconSpec, ButtonProps } from './components/button';
@@ -50,7 +52,7 @@ export type { TextInputProps } from './components/text-input';
 export { TextInput } from './components/text-input';
 export type { TextareaProps } from './components/textarea';
 export { Textarea } from './components/textarea';
-export type { ToastOptions, ToastProps, ToastTone } from './components/toast';
+export type { ToastOptions, ToastProps, ToastStatus } from './components/toast';
 export { Toast, ToastProvider, useToast } from './components/toast';
 export type { TooltipProps } from './components/tooltip';
 export { Tooltip } from './components/tooltip';
@@ -70,6 +72,18 @@ export type { ImageFit, ImageProps, SurfaceImageSource } from './primitives/imag
 export { Image } from './primitives/image';
 export type { TextProps } from './primitives/text';
 export { Text } from './primitives/text';
+export type {
+  SurfaceColor,
+  SurfaceEmphasis,
+  SurfacePaletteColor,
+  SurfaceStatusColor,
+} from './surfaceColor';
+export {
+  SURFACE_COLORS,
+  SURFACE_EMPHASES,
+  SURFACE_PALETTE_COLORS,
+  SURFACE_STATUS_COLORS,
+} from './surfaceColor';
 export * from './theme';
 export { isDeepEqual } from './utils/deepEqual';
 export { deepMerge } from './utils/deepMerge';

package/src/internal/resolvers/index.ts

@@ -10,6 +10,6 @@ export * from './resolveOverlayAnimation';
 export * from './resolveOverlayZIndex';
 export * from './resolveSelectionControlBehavior';
 export * from './resolveSelectionControlColors';
+export * from './resolveSurfaceColor';
 export * from './resolveTextColor';
 export * from './resolveTextStyles';
-export * from './resolveTone';

package/src/internal/resolvers/resolveFieldPresentation.test.ts

@@ -4,28 +4,30 @@ import { resolveFieldPresentation } from './resolveFieldPresentation';
 import { resolveFieldState } from './resolveFieldState';
 
 describe('resolveFieldPresentation', () => {
-  it('keeps label and helper tones aligned for default fields', () => {
+  it('keeps label and helper text presentation aligned for default fields', () => {
     expect(resolveFieldPresentation(resolveFieldState({}))).toEqual({
-      helperTone: 'default',
-      labelTone: 'default',
+      helperEmphasis: 'default',
+      labelEmphasis: 'default',
     });
   });
 
   it('mutes both label and helper text for disabled and read-only fields', () => {
     expect(resolveFieldPresentation(resolveFieldState({ disabled: true }))).toEqual({
-      helperTone: 'muted',
-      labelTone: 'muted',
+      helperEmphasis: 'muted',
+      labelEmphasis: 'muted',
     });
     expect(resolveFieldPresentation(resolveFieldState({ readOnly: true }))).toEqual({
-      helperTone: 'muted',
-      labelTone: 'muted',
+      helperEmphasis: 'muted',
+      labelEmphasis: 'muted',
     });
   });
 
-  it('elevates invalid fields to the danger tone', () => {
+  it('elevates invalid fields to the error color', () => {
     expect(resolveFieldPresentation(resolveFieldState({ invalid: true, readOnly: true }))).toEqual({
-      helperTone: 'danger',
-      labelTone: 'danger',
+      helperColor: 'error',
+      helperEmphasis: 'default',
+      labelColor: 'error',
+      labelEmphasis: 'default',
     });
   });
 });

package/src/internal/resolvers/resolveFieldPresentation.ts

@@ -1,30 +1,32 @@
+import type { SurfaceColor, SurfaceEmphasis } from '../../surfaceColor';
 import type { FieldState } from './resolveFieldState';
-import type { TextTone } from './resolveTextColor';
-
-type FieldPresentationTone = Extract<TextTone, 'default' | 'muted' | 'danger'>;
 
 export interface ResolvedFieldPresentation {
-  helperTone: FieldPresentationTone;
-  labelTone: FieldPresentationTone;
+  helperColor?: Extract<SurfaceColor, 'error'>;
+  helperEmphasis: Extract<SurfaceEmphasis, 'default' | 'muted'>;
+  labelColor?: Extract<SurfaceColor, 'error'>;
+  labelEmphasis: Extract<SurfaceEmphasis, 'default' | 'muted'>;
 }
 
 export function resolveFieldPresentation(fieldState: FieldState): ResolvedFieldPresentation {
   if (fieldState.invalid) {
     return {
-      helperTone: 'danger',
-      labelTone: 'danger',
+      helperColor: 'error',
+      helperEmphasis: 'default',
+      labelColor: 'error',
+      labelEmphasis: 'default',
     };
   }
 
   if (fieldState.disabled || fieldState.readOnly) {
     return {
-      helperTone: 'muted',
-      labelTone: 'muted',
+      helperEmphasis: 'muted',
+      labelEmphasis: 'muted',
     };
   }
 
   return {
-    helperTone: 'default',
-    labelTone: 'default',
+    helperEmphasis: 'default',
+    labelEmphasis: 'default',
   };
 }

package/src/internal/resolvers/resolveInteractiveColors.test.ts

@@ -5,11 +5,11 @@ import { resolveFieldState } from './resolveFieldState';
 import { resolveButtonColors, resolveInputColors } from './resolveInteractiveColors';
 
 describe('resolveInteractiveColors', () => {
-  it('maps button variant, tone, and state through semantic slots', () => {
+  it('maps button variant, color, and state through semantic slots', () => {
     const theme = createTheme();
     const solid = resolveButtonColors(theme, {
       variant: 'solid',
-      tone: 'primary',
+      color: 'primary',
       state: {
         disabled: false,
         focused: false,
@@ -19,7 +19,7 @@ describe('resolveInteractiveColors', () => {
     });
     const outline = resolveButtonColors(theme, {
       variant: 'outline',
-      tone: 'danger',
+      color: 'danger',
       state: {
         disabled: false,
         focused: false,
@@ -50,7 +50,7 @@ describe('resolveInteractiveColors', () => {
       }),
     );
 
-    expect(focusedInvalid.borderColor).toBe(theme.semantics.danger.base);
+    expect(focusedInvalid.borderColor).toBe(theme.semantics.error.base);
     expect(readOnly.backgroundColor).toBe(theme.semantics.surface.subtle);
     expect(readOnly.placeholderColor).toBe(theme.semantics.content.muted);
   });

package/src/internal/resolvers/resolveInteractiveColors.ts

@@ -1,7 +1,8 @@
+import type { SurfaceColor } from '../../surfaceColor';
 import type { SurfaceTheme } from '../../theme/types';
 import type { FieldState } from './resolveFieldState';
 import type { InteractionState } from './resolveInteractiveState';
-import { type ComponentTone, resolveTone } from './resolveTone';
+import { resolveSurfaceColor } from './resolveSurfaceColor';
 
 export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'soft';
 
@@ -16,11 +17,11 @@ export function resolveButtonColors(
   theme: SurfaceTheme,
   {
     variant,
-    tone,
+    color,
     state,
   }: {
     variant: ButtonVariant;
-    tone: ComponentTone;
+    color: SurfaceColor;
     state: InteractionState;
   },
 ): ResolvedInteractiveColors {
@@ -33,7 +34,7 @@ export function resolveButtonColors(
     };
   }
 
-  const semanticTone = resolveTone(theme, tone);
+  const semanticTone = resolveSurfaceColor(theme, color);
 
   switch (variant) {
     case 'outline':
@@ -99,9 +100,7 @@ export function resolveInputColors(
       backgroundColor: fieldState.readOnly
         ? theme.semantics.surface.subtle
         : theme.semantics.surface.default,
-      borderColor: fieldState.focused
-        ? theme.semantics.danger.base
-        : theme.semantics.danger.outline,
+      borderColor: fieldState.focused ? theme.semantics.error.base : theme.semantics.error.outline,
       contentColor: theme.semantics.content.default,
       placeholderColor: theme.semantics.content.muted,
     };

package/src/internal/resolvers/resolveSelectionControlColors.test.ts

@@ -5,12 +5,12 @@ import { resolveFieldState } from './resolveFieldState';
 import { resolveSelectionControlColors } from './resolveSelectionControlColors';
 
 describe('resolveSelectionControlColors', () => {
-  it('maps checked controls through the selected tone semantics', () => {
+  it('maps checked controls through the selected color semantics', () => {
     const theme = createTheme();
     const colors = resolveSelectionControlColors(theme, {
       checked: true,
       fieldState: resolveFieldState({ focused: true }),
-      tone: 'primary',
+      color: 'primary',
     });
 
     expect(colors.borderColor).toBe(theme.semantics.action.primary.base);
@@ -18,24 +18,24 @@ describe('resolveSelectionControlColors', () => {
     expect(colors.labelColor).toBe(theme.semantics.content.default);
   });
 
-  it('maps invalid unchecked controls through danger/border semantics', () => {
+  it('maps invalid unchecked controls through error/border semantics', () => {
     const theme = createTheme();
     const colors = resolveSelectionControlColors(theme, {
       checked: false,
       fieldState: resolveFieldState({ invalid: true }),
-      tone: 'primary',
+      color: 'primary',
     });
 
-    expect(colors.borderColor).toBe(theme.semantics.danger.outline);
-    expect(colors.trackColor).toBe(theme.semantics.danger.outline);
+    expect(colors.borderColor).toBe(theme.semantics.error.outline);
+    expect(colors.trackColor).toBe(theme.semantics.error.outline);
   });
 
-  it('mutes disabled controls regardless of tone', () => {
+  it('mutes disabled controls regardless of color', () => {
     const theme = createTheme();
     const colors = resolveSelectionControlColors(theme, {
       checked: true,
       fieldState: resolveFieldState({ disabled: true }),
-      tone: 'danger',
+      color: 'danger',
     });
 
     expect(colors.labelColor).toBe(theme.semantics.content.muted);