@ankhorage/surface 1.4.0 → 2.0.0

package/src/components/button/Button.tsx

@@ -12,7 +12,7 @@ import type { ButtonProps } from './types';
 export function Button({
   children,
   variant = 'solid',
-  tone = 'primary',
+  color = 'primary',
   size = 'm',
   disabled = false,
   loading = false,
@@ -41,9 +41,14 @@ export function Button({
       {(state) => {
         const colors = resolveButtonColors(theme, {
           variant,
-          tone,
+          color,
           state,
         });
+        const textEmphasis =
+          colors.contentColor === theme.semantics.content.muted ? 'muted' : 'default';
+        const resolvedTextColor = textEmphasis === 'muted' ? undefined : color;
+        const resolvedTextEmphasis =
+          textEmphasis === 'muted' ? 'muted' : variant === 'solid' ? 'inverse' : 'default';
         const iconSize = resolveIconSize(theme, size);
 
         return (
@@ -78,7 +83,8 @@ export function Button({
                   </View>
                 ) : null}
                 <Text
-                  color={colors.contentColor}
+                  color={resolvedTextColor}
+                  emphasis={resolvedTextEmphasis}
                   variant={controlSize.textVariant}
                   weight="semiBold"
                 >

package/src/components/button/types.ts

@@ -2,9 +2,9 @@ import type React from 'react';
 
 import type { ControlSize } from '../../internal/resolvers/resolveControlSize';
 import type { ButtonVariant } from '../../internal/resolvers/resolveInteractiveColors';
-import type { ComponentTone } from '../../internal/resolvers/resolveTone';
 import type { ButtonBaseProps } from '../../primitives/button-base';
 import type { IconProps } from '../../primitives/icon';
+import type { SurfaceColor } from '../../surfaceColor';
 
 export interface ButtonIconSpec {
   name: IconProps['name'];
@@ -17,7 +17,7 @@ export interface ButtonProps extends Omit<
 > {
   children?: React.ReactNode;
   variant?: ButtonVariant;
-  tone?: ComponentTone;
+  color?: SurfaceColor;
   size?: ControlSize;
   loading?: boolean;
   leadingIcon?: ButtonIconSpec;

package/src/components/checkbox/Checkbox.tsx

@@ -18,7 +18,7 @@ export function Checkbox({
   checked,
   defaultChecked = false,
   onCheckedChange,
-  tone = 'primary',
+  color = 'primary',
   size = 'm',
   disabled = false,
   invalid = false,
@@ -69,8 +69,12 @@ export function Checkbox({
           fieldState,
           hovered: interactionState.hovered,
           pressed: interactionState.pressed,
-          tone,
+          color,
         });
+        const labelEmphasis =
+          colors.labelColor === theme.semantics.content.muted ? 'muted' : 'default';
+        const indicatorColor = fieldState.invalid ? 'error' : color;
+        const indicatorEmphasis = disabled ? 'muted' : 'inverse';
 
         return (
           <Box
@@ -93,14 +97,19 @@ export function Checkbox({
               }}
             >
               {isChecked ? (
-                <Text color={colors.indicatorColor} variant="caption" weight="bold">
+                <Text
+                  color={disabled ? undefined : indicatorColor}
+                  emphasis={indicatorEmphasis}
+                  variant="caption"
+                  weight="bold"
+                >
                   ✓
                 </Text>
               ) : null}
             </Box>
             {children ? (
               <Box ml="s">
-                <Text color={colors.labelColor}>{children}</Text>
+                <Text emphasis={labelEmphasis}>{children}</Text>
               </Box>
             ) : null}
           </Box>

package/src/components/checkbox/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 CheckboxProps extends Omit<
   ButtonBaseProps,
@@ -12,7 +12,7 @@ export interface CheckboxProps extends Omit<
   checked?: boolean;
   defaultChecked?: boolean;
   onCheckedChange?: ((checked: boolean) => void) | undefined;
-  tone?: ComponentTone;
+  color?: SurfaceColor;
   size?: ControlSize;
   invalid?: boolean;
   readOnly?: boolean;

package/src/components/field/Field.tsx

@@ -28,15 +28,23 @@ export function Field({
   return (
     <Stack gap="xs" testID={testID}>
       {label ? (
-        <Label required={required} tone={presentation.labelTone}>
+        <Label
+          color={presentation.labelColor}
+          emphasis={presentation.labelEmphasis}
+          required={required}
+        >
           {label}
         </Label>
       ) : null}
       <Box>{children}</Box>
       {hasErrorText ? (
-        <HelperText tone={presentation.helperTone}>{errorText}</HelperText>
+        <HelperText color={presentation.helperColor} emphasis={presentation.helperEmphasis}>
+          {errorText}
+        </HelperText>
       ) : helperText ? (
-        <HelperText tone={presentation.helperTone}>{helperText}</HelperText>
+        <HelperText color={presentation.helperColor} emphasis={presentation.helperEmphasis}>
+          {helperText}
+        </HelperText>
       ) : null}
     </Stack>
   );

package/src/components/helper-text/HelperText.tsx

@@ -3,9 +3,9 @@ import React from 'react';
 import { Text } from '../../primitives/text';
 import type { HelperTextProps } from './types';
 
-export function HelperText({ children, tone = 'muted', testID }: HelperTextProps) {
+export function HelperText({ children, emphasis = 'muted', color, testID }: HelperTextProps) {
   return (
-    <Text testID={testID} tone={tone} variant="caption">
+    <Text color={color} emphasis={emphasis} testID={testID} variant="caption">
       {children}
     </Text>
   );

package/src/components/helper-text/types.ts

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

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

@@ -11,7 +11,7 @@ export function IconButton({
   icon,
   accessibilityLabel,
   variant = 'ghost',
-  tone = 'primary',
+  color = 'primary',
   size = 'm',
   disabled = false,
   onPress,
@@ -30,7 +30,7 @@ export function IconButton({
       testID={testID}
     >
       {(state) => {
-        const colors = resolveButtonColors(theme, { state, tone, variant });
+        const colors = resolveButtonColors(theme, { color, state, variant });
 
         return (
           <Box

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

@@ -1,8 +1,8 @@
 import type { ControlSize } from '../../internal/resolvers/resolveControlSize';
 import type { ButtonVariant } from '../../internal/resolvers/resolveInteractiveColors';
-import type { ComponentTone } from '../../internal/resolvers/resolveTone';
 import type { ButtonBaseProps } from '../../primitives/button-base';
 import type { IconProps } from '../../primitives/icon';
+import type { SurfaceColor } from '../../surfaceColor';
 
 export interface IconButtonProps extends Omit<
   ButtonBaseProps,
@@ -14,6 +14,6 @@ export interface IconButtonProps extends Omit<
   };
   accessibilityLabel: string;
   variant?: ButtonVariant;
-  tone?: ComponentTone;
+  color?: SurfaceColor;
   size?: ControlSize;
 }

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

@@ -50,7 +50,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 +70,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';