@ankhorage/surface 1.3.1 → 2.0.0

package/dist/theme/types.d.ts

@@ -55,6 +55,8 @@ export interface ThemeSemantics {
     danger: RoleSemantics;
     success: RoleSemantics;
     warning: RoleSemantics;
+    error: RoleSemantics;
+    info: RoleSemantics;
     surface: SurfaceSemantics;
     content: ContentSemantics;
     border: BorderSemantics;
@@ -67,6 +69,8 @@ export interface ThemeTokens {
         secondary: string;
         accent: string;
         highlight: string;
+        tertiary: string;
+        quaternary: string;
         background: string;
         surface: string;
         text: string;
@@ -75,6 +79,7 @@ export interface ThemeTokens {
         error: string;
         success: string;
         warning: string;
+        info: string;
         [key: string]: string;
     };
     swatches: GeneratedThemeSwatches;

package/dist/theme/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/theme/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/theme/types.ts"],"names":[],"mappings":"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"}

package/dist/theme/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/theme/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { GeneratedThemeSwatches } from '@ankhorage/color-theory';\nimport type { ThemeConfig as ContractsThemeConfig } from '@ankhorage/contracts';\n\nexport type {\n  ColorHarmony,\n  ColorSwatch,\n  ColorSwatchStep,\n  GeneratedColorRole,\n  GeneratedThemeModeColors,\n  GeneratedThemeSwatches,\n  HexColor,\n  SemanticColorReferenceMap,\n  SemanticColorToken,\n} from '@ankhorage/color-theory';\nexport type { ThemeConfig, ThemeModeConfig } from '@ankhorage/contracts';\n\nexport interface NeutralSemantics {\n  bg: string;\n  bgSubtle: string;\n  surface: string;\n  surfaceHover: string;\n  surfaceActive: string;\n  border: string;\n  borderStrong: string;\n  divider: string;\n  text: string;\n  textMuted: string;\n  textSubtle: string;\n}\n\nexport interface RoleSemantics {\n  base: string;\n  hover: string;\n  strong: string;\n  softBg: string;\n  softHover: string;\n  softActive: string;\n  outline: string;\n  onSolidText: string;\n}\n\nexport interface SurfaceSemantics {\n  default: string;\n  subtle: string;\n  raised: string;\n}\n\nexport interface ContentSemantics {\n  default: string;\n  muted: string;\n  subtle: string;\n  inverse: string;\n}\n\nexport interface BorderSemantics {\n  default: string;\n  strong: string;\n  focus: string;\n}\n\nexport interface ActionSemantics {\n  primary: RoleSemantics;\n  neutral: RoleSemantics;\n  danger: RoleSemantics;\n}\n\nexport interface ThemeSemantics {\n  neutral: NeutralSemantics;\n  brand: RoleSemantics;\n  secondary: RoleSemantics;\n  accent: RoleSemantics;\n  highlight: RoleSemantics;\n  danger: RoleSemantics;\n  success: RoleSemantics;\n  warning: RoleSemantics;\n  surface: SurfaceSemantics;\n  content: ContentSemantics;\n  border: BorderSemantics;\n  action: ActionSemantics;\n}\n\nexport type FontWeight =\n  | '100'\n  | '200'\n  | '300'\n  | '400'\n  | '500'\n  | '600'\n  | '700'\n  | '800'\n  | '900'\n  | 'bold'\n  | 'normal';\n\nexport interface ThemeTokens {\n  colors: {\n    primary: string;\n    secondary: string;\n    accent: string;\n    highlight: string;\n    background: string;\n    surface: string;\n    text: string;\n    textSecondary: string;\n    border: string;\n    error: string;\n    success: string;\n    warning: string;\n    [key: string]: string;\n  };\n  swatches: GeneratedThemeSwatches;\n  semantics: ThemeSemantics;\n  spacing: {\n    none: 0;\n    xs: number;\n    s: number;\n    m: number;\n    l: number;\n    xl: number;\n    xxl: number;\n    [key: string]: number;\n  };\n  radii: {\n    none: 0;\n    s: number;\n    m: number;\n    l: number;\n    full: number;\n  };\n  typography: {\n    headings: Record<\n      1 | 2 | 3 | 4 | 5 | 6,\n      {\n        size: number;\n        lineHeight: number;\n        weight: 'regular' | 'medium' | 'semiBold' | 'bold';\n      }\n    >;\n    sizes: {\n      xs: number;\n      s: number;\n      m: number;\n      l: number;\n      xl: number;\n      xxl: number;\n      '3xl': number;\n      h1: number;\n      h2: number;\n      h3: number;\n      h4: number;\n      h5: number;\n      h6: number;\n      [key: string]: number;\n    };\n    weights: {\n      thin: FontWeight;\n      extraLight: FontWeight;\n      light: FontWeight;\n      regular: FontWeight;\n      medium: FontWeight;\n      semiBold: FontWeight;\n      bold: FontWeight;\n      extraBold: FontWeight;\n      black: FontWeight;\n    };\n    fonts: {\n      /** Map of weight -> fontFamily name for normal style */\n      normal: Record<FontWeight, string | undefined>;\n      /** Map of weight -> fontFamily name for italic style */\n      italic: Record<FontWeight, string | undefined>;\n    };\n  };\n  shadows: {\n    soft: number;\n    medium: number;\n    hard: number;\n    [key: string]: number;\n  };\n}\n\nexport interface SurfaceTheme extends ThemeTokens {\n  config: ContractsThemeConfig;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/theme/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { GeneratedThemeSwatches } from '@ankhorage/color-theory';\nimport type { ThemeConfig as ContractsThemeConfig } from '@ankhorage/contracts';\n\nexport type {\n  ColorHarmony,\n  ColorSwatch,\n  ColorSwatchStep,\n  GeneratedColorRole,\n  GeneratedThemeModeColors,\n  GeneratedThemeSwatches,\n  HexColor,\n  SemanticColorReferenceMap,\n  SemanticColorToken,\n} from '@ankhorage/color-theory';\nexport type { ThemeConfig, ThemeModeConfig } from '@ankhorage/contracts';\n\nexport interface NeutralSemantics {\n  bg: string;\n  bgSubtle: string;\n  surface: string;\n  surfaceHover: string;\n  surfaceActive: string;\n  border: string;\n  borderStrong: string;\n  divider: string;\n  text: string;\n  textMuted: string;\n  textSubtle: string;\n}\n\nexport interface RoleSemantics {\n  base: string;\n  hover: string;\n  strong: string;\n  softBg: string;\n  softHover: string;\n  softActive: string;\n  outline: string;\n  onSolidText: string;\n}\n\nexport interface SurfaceSemantics {\n  default: string;\n  subtle: string;\n  raised: string;\n}\n\nexport interface ContentSemantics {\n  default: string;\n  muted: string;\n  subtle: string;\n  inverse: string;\n}\n\nexport interface BorderSemantics {\n  default: string;\n  strong: string;\n  focus: string;\n}\n\nexport interface ActionSemantics {\n  primary: RoleSemantics;\n  neutral: RoleSemantics;\n  danger: RoleSemantics;\n}\n\nexport interface ThemeSemantics {\n  neutral: NeutralSemantics;\n  brand: RoleSemantics;\n  secondary: RoleSemantics;\n  accent: RoleSemantics;\n  highlight: RoleSemantics;\n  danger: RoleSemantics;\n  success: RoleSemantics;\n  warning: RoleSemantics;\n  error: RoleSemantics;\n  info: RoleSemantics;\n  surface: SurfaceSemantics;\n  content: ContentSemantics;\n  border: BorderSemantics;\n  action: ActionSemantics;\n}\n\nexport type FontWeight =\n  | '100'\n  | '200'\n  | '300'\n  | '400'\n  | '500'\n  | '600'\n  | '700'\n  | '800'\n  | '900'\n  | 'bold'\n  | 'normal';\n\nexport interface ThemeTokens {\n  colors: {\n    primary: string;\n    secondary: string;\n    accent: string;\n    highlight: string;\n    tertiary: string;\n    quaternary: string;\n    background: string;\n    surface: string;\n    text: string;\n    textSecondary: string;\n    border: string;\n    error: string;\n    success: string;\n    warning: string;\n    info: string;\n    [key: string]: string;\n  };\n  swatches: GeneratedThemeSwatches;\n  semantics: ThemeSemantics;\n  spacing: {\n    none: 0;\n    xs: number;\n    s: number;\n    m: number;\n    l: number;\n    xl: number;\n    xxl: number;\n    [key: string]: number;\n  };\n  radii: {\n    none: 0;\n    s: number;\n    m: number;\n    l: number;\n    full: number;\n  };\n  typography: {\n    headings: Record<\n      1 | 2 | 3 | 4 | 5 | 6,\n      {\n        size: number;\n        lineHeight: number;\n        weight: 'regular' | 'medium' | 'semiBold' | 'bold';\n      }\n    >;\n    sizes: {\n      xs: number;\n      s: number;\n      m: number;\n      l: number;\n      xl: number;\n      xxl: number;\n      '3xl': number;\n      h1: number;\n      h2: number;\n      h3: number;\n      h4: number;\n      h5: number;\n      h6: number;\n      [key: string]: number;\n    };\n    weights: {\n      thin: FontWeight;\n      extraLight: FontWeight;\n      light: FontWeight;\n      regular: FontWeight;\n      medium: FontWeight;\n      semiBold: FontWeight;\n      bold: FontWeight;\n      extraBold: FontWeight;\n      black: FontWeight;\n    };\n    fonts: {\n      /** Map of weight -> fontFamily name for normal style */\n      normal: Record<FontWeight, string | undefined>;\n      /** Map of weight -> fontFamily name for italic style */\n      italic: Record<FontWeight, string | undefined>;\n    };\n  };\n  shadows: {\n    soft: number;\n    medium: number;\n    hard: number;\n    [key: string]: number;\n  };\n}\n\nexport interface SurfaceTheme extends ThemeTokens {\n  config: ContractsThemeConfig;\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/surface",
   "type": "module",
-  "version": "1.3.1",
+  "version": "2.0.0",
   "description": "Stable UI foundation for React Native and React Native Web.",
   "homepage": "https://github.com/ankhorage/surface#readme",
   "bugs": {

package/src/components/badge/Badge.tsx

@@ -9,7 +9,7 @@ import type { BadgeProps } from './types';
 export function Badge({
   content,
   variant = 'soft',
-  tone = 'primary',
+  color = 'primary',
   size = 's',
   testID,
 }: BadgeProps) {
@@ -17,7 +17,7 @@ export function Badge({
   const controlSize = resolveControlSize(theme, size);
   const colors = resolveButtonColors(theme, {
     variant,
-    tone,
+    color,
     state: {
       disabled: false,
       focused: false,
@@ -39,7 +39,12 @@ export function Badge({
       }}
       testID={testID}
     >
-      <Text color={colors.contentColor} variant="bodySmall" weight="medium">
+      <Text
+        color={color}
+        emphasis={variant === 'solid' ? 'inverse' : 'default'}
+        variant="bodySmall"
+        weight="medium"
+      >
         {content}
       </Text>
     </Box>

package/src/components/badge/types.ts

@@ -2,12 +2,12 @@ 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 { SurfaceColor } from '../../surfaceColor';
 
 export interface BadgeProps {
   content?: React.ReactNode;
   variant?: Extract<ButtonVariant, 'solid' | 'soft' | 'outline'>;
-  tone?: Extract<ComponentTone, 'primary' | 'neutral' | 'danger' | 'success' | 'warning'>;
+  color?: SurfaceColor;
   size?: ControlSize;
   testID?: string;
 }

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';