@ankhorage/surface 1.3.1 → 2.0.0

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