@ankhorage/surface 1.4.0 → 2.0.1

package/src/internal/resolvers/resolveSelectionControlColors.ts

@@ -1,6 +1,7 @@
+import type { SurfaceColor } from '../../surfaceColor';
 import type { SurfaceTheme } from '../../theme/types';
 import type { FieldState } from './resolveFieldState';
-import { type ComponentTone, resolveTone } from './resolveTone';
+import { resolveSurfaceColor } from './resolveSurfaceColor';
 
 export interface ResolvedSelectionControlColors {
   backgroundColor: string;
@@ -15,20 +16,20 @@ export interface ResolvedSelectionControlColors {
 export function resolveSelectionControlColors(
   theme: SurfaceTheme,
   {
-    tone = 'primary',
+    color = 'primary',
     fieldState,
     checked,
     hovered = false,
     pressed = false,
   }: {
-    tone?: ComponentTone;
+    color?: SurfaceColor;
     fieldState: FieldState;
     checked: boolean;
     hovered?: boolean;
     pressed?: boolean;
   },
 ): ResolvedSelectionControlColors {
-  const semanticTone = resolveTone(theme, fieldState.invalid ? 'danger' : tone);
+  const semanticTone = resolveSurfaceColor(theme, fieldState.invalid ? 'error' : color);
   const isMuted = fieldState.disabled;
   const isInteractiveReadOnly = fieldState.readOnly && !fieldState.disabled;
 
@@ -47,7 +48,7 @@ export function resolveSelectionControlColors(
   }
 
   const uncheckedBorderColor = fieldState.invalid
-    ? theme.semantics.danger.outline
+    ? theme.semantics.error.outline
     : fieldState.focused
       ? theme.semantics.border.focus
       : theme.semantics.border.strong;

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

@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'bun:test';
+
+import { createTheme } from '../../theme/createTheme';
+import { resolveSurfaceColor } from './resolveSurfaceColor';
+
+describe('resolveSurfaceColor', () => {
+  it('maps every public surface color to a semantic role', () => {
+    const theme = createTheme();
+
+    expect(resolveSurfaceColor(theme, 'primary')).toBe(theme.semantics.action.primary);
+    expect(resolveSurfaceColor(theme, 'secondary')).toBe(theme.semantics.secondary);
+    expect(resolveSurfaceColor(theme, 'tertiary')).toBe(theme.semantics.accent);
+    expect(resolveSurfaceColor(theme, 'quaternary')).toBe(theme.semantics.highlight);
+    expect(resolveSurfaceColor(theme, 'neutral')).toBe(theme.semantics.action.neutral);
+    expect(resolveSurfaceColor(theme, 'success')).toBe(theme.semantics.success);
+    expect(resolveSurfaceColor(theme, 'warning')).toBe(theme.semantics.warning);
+    expect(resolveSurfaceColor(theme, 'error')).toBe(theme.semantics.error);
+    expect(resolveSurfaceColor(theme, 'info')).toBe(theme.semantics.info);
+    expect(resolveSurfaceColor(theme, 'danger')).toBe(theme.semantics.action.danger);
+  });
+});

package/src/internal/resolvers/resolveSurfaceColor.ts

@@ -0,0 +1,31 @@
+import type { SurfaceColor } from '../../surfaceColor';
+import type { RoleSemantics, SurfaceTheme } from '../../theme/types';
+
+export function resolveSurfaceColor(
+  theme: SurfaceTheme,
+  color: SurfaceColor = 'primary',
+): 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;
+  }
+}

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

@@ -4,7 +4,7 @@ import { createTheme } from '../../theme/createTheme';
 import { resolveTextColor } from './resolveTextColor';
 
 describe('resolveTextColor', () => {
-  it('maps semantic text tones through content aliases', () => {
+  it('maps semantic text emphases through content aliases', () => {
     const theme = createTheme();
 
     expect(resolveTextColor(theme, 'default')).toBe(theme.semantics.content.default);
@@ -13,11 +13,22 @@ describe('resolveTextColor', () => {
     expect(resolveTextColor(theme, 'inverse')).toBe(theme.semantics.content.inverse);
   });
 
-  it('supports semantic status tones for shared field and messaging copy', () => {
+  it('supports semantic colors for shared field and messaging copy', () => {
     const theme = createTheme();
 
-    expect(resolveTextColor(theme, 'danger')).toBe(theme.semantics.danger.base);
-    expect(resolveTextColor(theme, 'success')).toBe(theme.semantics.success.base);
-    expect(resolveTextColor(theme, 'warning')).toBe(theme.semantics.warning.base);
+    expect(resolveTextColor(theme, 'default', 'danger')).toBe(theme.semantics.action.danger.base);
+    expect(resolveTextColor(theme, 'default', 'success')).toBe(theme.semantics.success.base);
+    expect(resolveTextColor(theme, 'default', 'warning')).toBe(theme.semantics.warning.base);
+    expect(resolveTextColor(theme, 'default', 'error')).toBe(theme.semantics.error.base);
+    expect(resolveTextColor(theme, 'default', 'info')).toBe(theme.semantics.info.base);
+  });
+
+  it('maps inverse emphasis with a semantic color to role foreground text', () => {
+    const theme = createTheme();
+
+    expect(resolveTextColor(theme, 'inverse', 'primary')).toBe(
+      theme.semantics.action.primary.onSolidText,
+    );
+    expect(resolveTextColor(theme, 'inverse', 'error')).toBe(theme.semantics.error.onSolidText);
   });
 });

package/src/internal/resolvers/resolveTextColor.ts

@@ -1,39 +1,27 @@
-import { resolveToken } from '../../theme/resolveToken';
+import type { SurfaceColor, SurfaceEmphasis } from '../../surfaceColor';
 import type { SurfaceTheme } from '../../theme/types';
-
-export type TextTone =
-  | 'default'
-  | 'muted'
-  | 'subtle'
-  | 'inverse'
-  | 'danger'
-  | 'success'
-  | 'warning';
-export type TextColorValue = keyof SurfaceTheme['colors'] | string;
+import { resolveSurfaceColor } from './resolveSurfaceColor';
 
 export function resolveTextColor(
   theme: SurfaceTheme,
-  tone: TextTone = 'default',
-  color?: TextColorValue,
+  emphasis: SurfaceEmphasis = 'default',
+  color?: SurfaceColor,
 ): string {
   if (color) {
-    return resolveToken(theme.colors, color);
+    if (emphasis === 'inverse') {
+      return resolveSurfaceColor(theme, color).onSolidText;
+    }
+
+    return resolveSurfaceColor(theme, color).base;
   }
 
-  switch (tone) {
+  switch (emphasis) {
     case 'muted':
       return theme.semantics.content.muted;
     case 'subtle':
       return theme.semantics.content.subtle;
     case 'inverse':
       return theme.semantics.content.inverse;
-    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;
   }

package/src/primitives/heading/Heading.tsx

@@ -39,6 +39,8 @@ export const Heading: React.FC<HeadingProps> = ({
   children,
   level = 2,
   align,
+  color,
+  emphasis = 'default',
   numberOfLines,
   i18nKey,
   testID,
@@ -52,7 +54,7 @@ export const Heading: React.FC<HeadingProps> = ({
       accessibilityRole="header"
       testID={testID}
       numberOfLines={numberOfLines}
-      style={resolveHeadingTextStyle(theme, level, align)}
+      style={resolveHeadingTextStyle(theme, level, align, emphasis, color)}
     >
       {content}
     </Text>

package/src/primitives/heading/resolveHeadingStyle.test.ts

@@ -22,7 +22,7 @@ describe('resolveHeadingTextStyle', () => {
     expect(style.fontFamily).toBe('SpaceGrotesk_700Regular');
   });
 
-  it('shares the default content tone with the text primitive', () => {
+  it('shares the default content emphasis with the text primitive', () => {
     const theme = createTheme();
     const style = resolveHeadingTextStyle(theme, 2);
 

package/src/primitives/heading/resolveHeadingStyle.ts

@@ -2,6 +2,7 @@ import type { TextStyle } from 'react-native';
 
 import { resolveTextColor } from '../../internal/resolvers/resolveTextColor';
 import { resolveTextStyles } from '../../internal/resolvers/resolveTextStyles';
+import type { SurfaceColor, SurfaceEmphasis } from '../../surfaceColor';
 import type { SurfaceTheme } from '../../theme/types';
 import type { HeadingLevel, HeadingProps } from './types';
 
@@ -9,9 +10,11 @@ export function resolveHeadingTextStyle(
   theme: SurfaceTheme,
   level: HeadingLevel,
   align?: HeadingProps['align'],
+  emphasis: SurfaceEmphasis = 'default',
+  color?: SurfaceColor,
 ): TextStyle {
   return {
     ...resolveTextStyles(theme, { align, level }),
-    color: resolveTextColor(theme, 'default'),
+    color: resolveTextColor(theme, emphasis, color),
   };
 }

package/src/primitives/heading/types.ts

@@ -1,5 +1,7 @@
 import type React from 'react';
 
+import type { SurfaceColor, SurfaceEmphasis } from '../../surfaceColor';
+
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
 export interface HeadingProps {
@@ -7,6 +9,8 @@ export interface HeadingProps {
   children?: React.ReactNode;
   level?: HeadingLevel;
   align?: 'auto' | 'left' | 'right' | 'center' | 'justify';
+  color?: SurfaceColor;
+  emphasis?: SurfaceEmphasis;
   numberOfLines?: number;
   i18nKey?: string;
   testID?: string;

package/src/primitives/text/Text.tsx

@@ -32,7 +32,7 @@ export function Text({
   children,
   i18nKey,
   variant = 'body',
-  tone = 'default',
+  emphasis = 'default',
   color,
   align,
   weight,
@@ -56,7 +56,7 @@ export function Text({
           weight,
         }),
         {
-          color: resolveTextColor(theme, tone, color),
+          color: resolveTextColor(theme, emphasis, color),
         },
       ]}
     >

package/src/primitives/text/types.ts

@@ -1,15 +1,15 @@
 import type React from 'react';
 import type { TextStyle } from 'react-native';
 
-import type { TextColorValue, TextTone } from '../../internal/resolvers/resolveTextColor';
 import type { TextVariant, TextWeight } from '../../internal/resolvers/resolveTextStyles';
+import type { SurfaceColor, SurfaceEmphasis } from '../../surfaceColor';
 
 export interface TextProps {
   children?: React.ReactNode;
   i18nKey?: string;
   variant?: TextVariant;
-  tone?: TextTone;
-  color?: TextColorValue;
+  emphasis?: SurfaceEmphasis;
+  color?: SurfaceColor;
   align?: TextStyle['textAlign'];
   weight?: TextWeight;
   italic?: boolean;

package/src/surfaceColor.test.ts

@@ -0,0 +1,46 @@
+import { readFileSync } from 'node:fs';
+
+import { describe, expect, it } from 'bun:test';
+
+import type {
+  SurfaceColor,
+  SurfaceEmphasis,
+  SurfacePaletteColor,
+  SurfaceStatusColor,
+} from './index';
+import {
+  SURFACE_COLORS,
+  SURFACE_EMPHASES,
+  SURFACE_PALETTE_COLORS,
+  SURFACE_STATUS_COLORS,
+} from './surfaceColor';
+
+describe('surfaceColor public exports', () => {
+  it('exports canonical runtime color and emphasis lists from the root entrypoint', () => {
+    const indexSource = readFileSync(new URL('./index.ts', import.meta.url), 'utf8');
+
+    expect(indexSource).toContain("from './surfaceColor';");
+    expect(SURFACE_PALETTE_COLORS).toEqual([
+      'primary',
+      'secondary',
+      'tertiary',
+      'quaternary',
+      'neutral',
+    ]);
+    expect(SURFACE_STATUS_COLORS).toEqual(['success', 'warning', 'error', 'info']);
+    expect(SURFACE_COLORS).toEqual([...SURFACE_PALETTE_COLORS, ...SURFACE_STATUS_COLORS, 'danger']);
+    expect(SURFACE_EMPHASES).toEqual(['default', 'muted', 'subtle', 'inverse']);
+  });
+
+  it('keeps root-imported type contracts aligned with runtime lists', () => {
+    const paletteColor: SurfacePaletteColor = 'neutral';
+    const statusColor: SurfaceStatusColor = 'info';
+    const color: SurfaceColor = 'danger';
+    const emphasis: SurfaceEmphasis = 'muted';
+
+    expect(SURFACE_PALETTE_COLORS).toContain(paletteColor);
+    expect(SURFACE_STATUS_COLORS).toContain(statusColor);
+    expect(SURFACE_COLORS).toContain(color);
+    expect(SURFACE_EMPHASES).toContain(emphasis);
+  });
+});

package/src/surfaceColor.ts

@@ -0,0 +1,22 @@
+export const SURFACE_PALETTE_COLORS = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'quaternary',
+  'neutral',
+] as const;
+
+export const SURFACE_STATUS_COLORS = ['success', 'warning', 'error', 'info'] as const;
+
+export const SURFACE_COLORS = [
+  ...SURFACE_PALETTE_COLORS,
+  ...SURFACE_STATUS_COLORS,
+  'danger',
+] as const;
+
+export const SURFACE_EMPHASES = ['default', 'muted', 'subtle', 'inverse'] as const;
+
+export type SurfacePaletteColor = (typeof SURFACE_PALETTE_COLORS)[number];
+export type SurfaceStatusColor = (typeof SURFACE_STATUS_COLORS)[number];
+export type SurfaceColor = (typeof SURFACE_COLORS)[number];
+export type SurfaceEmphasis = (typeof SURFACE_EMPHASES)[number];

package/src/theme/colorEngine.test.ts

@@ -31,6 +31,8 @@ function expectRequiredSemanticRoles(semantics: ThemeSemantics) {
   expect(semantics.danger.base).toBeDefined();
   expect(semantics.success.base).toBeDefined();
   expect(semantics.warning.base).toBeDefined();
+  expect(semantics.error.base).toBeDefined();
+  expect(semantics.info.base).toBeDefined();
   expect(semantics.surface.default).toBeDefined();
   expect(semantics.content.default).toBeDefined();
   expect(semantics.border.default).toBeDefined();
@@ -78,10 +80,14 @@ describe('colorEngine', () => {
     expect(light.semantics.danger.base).toBe('#ef4444');
     expect(light.semantics.success.base).toBe('#22c55e');
     expect(light.semantics.warning.base).toBe('#f59e0b');
+    expect(light.semantics.error.base).toBe(light.semantics.danger.base);
+    expect(light.semantics.info.base).toBeDefined();
 
     expect(dark.semantics.danger.base).toBe('#ef4444');
     expect(dark.semantics.success.base).toBe('#22c55e');
     expect(dark.semantics.warning.base).toBe('#f59e0b');
+    expect(dark.semantics.error.base).toBe(dark.semantics.danger.base);
+    expect(dark.semantics.info.base).toBeDefined();
   });
 
   it('uses mode-aware role semantics for dark mode soft states', () => {

package/src/theme/colorEngine.ts

@@ -137,6 +137,9 @@ export function generatePalette(
   const danger = buildRoleSemantics(semanticStatusSwatches.danger, isDark);
   const success = buildRoleSemantics(semanticStatusSwatches.success, isDark);
   const warning = buildRoleSemantics(semanticStatusSwatches.warning, isDark);
+  // Keep destructive action and feedback error aligned until a dedicated error status swatch is introduced.
+  const error = danger;
+  const info = buildRoleSemantics(secondarySwatch, isDark);
 
   const surfaceSemantics: SurfaceSemantics = {
     default: neutral.surface,
@@ -168,14 +171,17 @@ export function generatePalette(
     secondary: secondarySwatch[500],
     accent: tertiarySwatch[500],
     highlight: quaternarySwatch[500],
+    tertiary: tertiarySwatch[500],
+    quaternary: quaternarySwatch[500],
     background: neutral.bg,
     surface: neutral.surface,
     text: neutral.text,
     textSecondary: neutral.textMuted,
     border: neutral.border,
-    error: danger.base,
+    error: error.base,
     success: success.base,
     warning: warning.base,
+    info: info.base,
   };
 
   return {
@@ -190,6 +196,8 @@ export function generatePalette(
       danger,
       success,
       warning,
+      error,
+      info,
       surface: surfaceSemantics,
       content,
       border,

package/src/theme/types.ts

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

package/dist/internal/resolvers/resolveTone.d.ts

@@ -1,4 +0,0 @@
-import type { RoleSemantics, SurfaceTheme } from '../../theme/types';
-export type ComponentTone = 'primary' | 'neutral' | 'danger' | 'success' | 'warning';
-export declare function resolveTone(theme: SurfaceTheme, tone?: ComponentTone): RoleSemantics;
-//# sourceMappingURL=resolveTone.d.ts.map

package/dist/internal/resolvers/resolveTone.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"resolveTone.d.ts","sourceRoot":"","sources":["../../../src/internal/resolvers/resolveTone.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAErE,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AAErF,wBAAgB,WAAW,CAAC,KAAK,EAAE,YAAY,EAAE,IAAI,GAAE,aAAyB,GAAG,aAAa,CAc/F"}

package/dist/internal/resolvers/resolveTone.js

@@ -1,16 +0,0 @@
-export function resolveTone(theme, tone = 'primary') {
-    switch (tone) {
-        case 'neutral':
-            return theme.semantics.action.neutral;
-        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;
-    }
-}
-//# sourceMappingURL=resolveTone.js.map

package/dist/internal/resolvers/resolveTone.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"resolveTone.js","sourceRoot":"","sources":["../../../src/internal/resolvers/resolveTone.ts"],"names":[],"mappings":"AAIA,MAAM,UAAU,WAAW,CAAC,KAAmB,EAAE,OAAsB,SAAS;IAC9E,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC;QACxC,KAAK,QAAQ;YACX,OAAO,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC;QACvC,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC;QACjC,KAAK,SAAS;YACZ,OAAO,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC;QACjC,KAAK,SAAS,CAAC;QACf;YACE,OAAO,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC;IAC1C,CAAC;AACH,CAAC","sourcesContent":["import type { RoleSemantics, SurfaceTheme } from '../../theme/types';\n\nexport type ComponentTone = 'primary' | 'neutral' | 'danger' | 'success' | 'warning';\n\nexport function resolveTone(theme: SurfaceTheme, tone: ComponentTone = 'primary'): RoleSemantics {\n  switch (tone) {\n    case 'neutral':\n      return theme.semantics.action.neutral;\n    case 'danger':\n      return theme.semantics.action.danger;\n    case 'success':\n      return theme.semantics.success;\n    case 'warning':\n      return theme.semantics.warning;\n    case 'primary':\n    default:\n      return theme.semantics.action.primary;\n  }\n}\n"]}

package/src/internal/resolvers/resolveTone.ts

@@ -1,19 +0,0 @@
-import type { RoleSemantics, SurfaceTheme } from '../../theme/types';
-
-export type ComponentTone = 'primary' | 'neutral' | 'danger' | 'success' | 'warning';
-
-export function resolveTone(theme: SurfaceTheme, tone: ComponentTone = 'primary'): RoleSemantics {
-  switch (tone) {
-    case 'neutral':
-      return theme.semantics.action.neutral;
-    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;
-  }
-}