@ankhorage/surface 1.4.0 → 2.0.1

package/dist/theme/colorEngine.js

@@ -82,6 +82,9 @@ export function generatePalette(config, mode = 'light') {
     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 = {
         default: neutral.surface,
         subtle: neutral.bgSubtle,
@@ -108,14 +111,17 @@ export function generatePalette(config, mode = 'light') {
         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 {
         colors,
@@ -129,6 +135,8 @@ export function generatePalette(config, mode = 'light') {
             danger,
             success,
             warning,
+            error,
+            info,
             surface: surfaceSemantics,
             content,
             border,

package/dist/theme/colorEngine.js.map

@@ -1 +1 @@
-{"version":3,"file":"colorEngine.js","sourceRoot":"","sources":["../../src/theme/colorEngine.ts"],"names":[],"mappings":"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","sourcesContent":["import type {\n  ColorSwatch,\n  GeneratedThemeModeColors,\n  GeneratedThemeSwatches,\n  HexColor,\n  SemanticColorReferenceMap,\n  SemanticColorToken,\n} from '@ankhorage/color-theory';\nimport {\n  createDefaultSemanticStatusSwatches,\n  generateThemeModeColors,\n  getReadableForeground,\n  parseHexColorOrThrow,\n} from '@ankhorage/color-theory';\nimport type { ThemeConfig } from '@ankhorage/contracts';\n\nimport type {\n  ActionSemantics,\n  BorderSemantics,\n  ContentSemantics,\n  NeutralSemantics,\n  RoleSemantics,\n  SurfaceSemantics,\n  ThemeSemantics,\n} from './types';\n\n/**\n * Surface semantic resolver: maps color-theory SemanticColorToken references\n * to hex values from the generated swatches.\n */\nexport type SurfaceSemanticColors = Record<SemanticColorToken, HexColor>;\n\nexport function resolveSemanticColors(\n  generated: GeneratedThemeModeColors,\n  references: SemanticColorReferenceMap,\n): SurfaceSemanticColors {\n  return Object.fromEntries(\n    Object.entries(references).map(([token, ref]) => {\n      const swatch = generated.swatches[ref.role];\n      if (!swatch) {\n        throw new Error(`Missing swatch for role '${ref.role}' (token: '${token}')`);\n      }\n      return [token, swatch[ref.step]];\n    }),\n  ) as SurfaceSemanticColors;\n}\n\nfunction buildNeutralSemantics(neutralSwatch: ColorSwatch, isDark: boolean): NeutralSemantics {\n  if (isDark) {\n    return {\n      bg: neutralSwatch[950],\n      bgSubtle: neutralSwatch[900],\n      surface: neutralSwatch[900],\n      surfaceHover: neutralSwatch[800],\n      surfaceActive: neutralSwatch[700],\n      border: neutralSwatch[800],\n      borderStrong: neutralSwatch[600],\n      divider: neutralSwatch[800],\n      text: neutralSwatch[50],\n      textMuted: neutralSwatch[200],\n      textSubtle: neutralSwatch[300],\n    };\n  }\n  return {\n    bg: neutralSwatch[50],\n    bgSubtle: neutralSwatch[100],\n    surface: neutralSwatch[100],\n    surfaceHover: neutralSwatch[200],\n    surfaceActive: neutralSwatch[300],\n    border: neutralSwatch[200],\n    borderStrong: neutralSwatch[300],\n    divider: neutralSwatch[200],\n    text: neutralSwatch[900],\n    textMuted: neutralSwatch[700],\n    textSubtle: neutralSwatch[600],\n  };\n}\n\nfunction buildRoleSemantics(swatch: ColorSwatch, isDark: boolean): RoleSemantics {\n  const base = swatch[500];\n  const { foreground: onSolidText } = getReadableForeground(base);\n\n  if (isDark) {\n    return {\n      base,\n      hover: swatch[400],\n      strong: swatch[300],\n      softBg: swatch[900],\n      softHover: swatch[800],\n      softActive: swatch[700],\n      outline: swatch[500],\n      onSolidText,\n    };\n  }\n\n  return {\n    base,\n    hover: swatch[600],\n    strong: swatch[700],\n    softBg: swatch[100],\n    softHover: swatch[200],\n    softActive: swatch[300],\n    outline: swatch[400],\n    onSolidText,\n  };\n}\n\nexport function generatePalette(\n  config: ThemeConfig,\n  mode: 'light' | 'dark' = 'light',\n): {\n  colors: Record<string, string>;\n  swatches: GeneratedThemeSwatches;\n  semantics: ThemeSemantics;\n} {\n  const modeConfig = mode === 'dark' ? config.dark : config.light;\n  const isDark = mode === 'dark';\n\n  // Throws deterministically on invalid primary color\n  parseHexColorOrThrow(modeConfig.primaryColor);\n\n  const generated = generateThemeModeColors(modeConfig);\n\n  const { swatches } = generated;\n  const neutralSwatch = swatches.neutral;\n\n  const neutral = buildNeutralSemantics(neutralSwatch, isDark);\n  const brand = buildRoleSemantics(swatches.primary, isDark);\n\n  // Fallback to primary swatch for missing ordinal roles\n  const secondarySwatch = swatches.secondary ?? swatches.primary;\n  const tertiarySwatch = swatches.tertiary ?? swatches.primary;\n  const quaternarySwatch = swatches.quaternary ?? swatches.primary;\n\n  const semanticStatusSwatches = createDefaultSemanticStatusSwatches().swatches;\n\n  const danger = buildRoleSemantics(semanticStatusSwatches.danger, isDark);\n  const success = buildRoleSemantics(semanticStatusSwatches.success, isDark);\n  const warning = buildRoleSemantics(semanticStatusSwatches.warning, isDark);\n\n  const surfaceSemantics: SurfaceSemantics = {\n    default: neutral.surface,\n    subtle: neutral.bgSubtle,\n    raised: neutral.surface,\n  };\n\n  const content: ContentSemantics = {\n    default: neutral.text,\n    muted: neutral.textMuted,\n    subtle: neutral.textSubtle,\n    inverse: brand.onSolidText,\n  };\n\n  const border: BorderSemantics = {\n    default: neutral.border,\n    strong: neutral.borderStrong,\n    focus: brand.outline,\n  };\n\n  const action: ActionSemantics = {\n    primary: brand,\n    neutral: buildRoleSemantics(neutralSwatch, isDark),\n    danger,\n  };\n\n  const colors: Record<string, string> = {\n    primary: brand.base,\n    secondary: secondarySwatch[500],\n    accent: tertiarySwatch[500],\n    highlight: quaternarySwatch[500],\n    background: neutral.bg,\n    surface: neutral.surface,\n    text: neutral.text,\n    textSecondary: neutral.textMuted,\n    border: neutral.border,\n    error: danger.base,\n    success: success.base,\n    warning: warning.base,\n  };\n\n  return {\n    colors,\n    swatches,\n    semantics: {\n      neutral,\n      brand,\n      secondary: buildRoleSemantics(secondarySwatch, isDark),\n      accent: buildRoleSemantics(tertiarySwatch, isDark),\n      highlight: buildRoleSemantics(quaternarySwatch, isDark),\n      danger,\n      success,\n      warning,\n      surface: surfaceSemantics,\n      content,\n      border,\n      action,\n    },\n  };\n}\n"]}
+{"version":3,"file":"colorEngine.js","sourceRoot":"","sources":["../../src/theme/colorEngine.ts"],"names":[],"mappings":"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","sourcesContent":["import type {\n  ColorSwatch,\n  GeneratedThemeModeColors,\n  GeneratedThemeSwatches,\n  HexColor,\n  SemanticColorReferenceMap,\n  SemanticColorToken,\n} from '@ankhorage/color-theory';\nimport {\n  createDefaultSemanticStatusSwatches,\n  generateThemeModeColors,\n  getReadableForeground,\n  parseHexColorOrThrow,\n} from '@ankhorage/color-theory';\nimport type { ThemeConfig } from '@ankhorage/contracts';\n\nimport type {\n  ActionSemantics,\n  BorderSemantics,\n  ContentSemantics,\n  NeutralSemantics,\n  RoleSemantics,\n  SurfaceSemantics,\n  ThemeSemantics,\n} from './types';\n\n/**\n * Surface semantic resolver: maps color-theory SemanticColorToken references\n * to hex values from the generated swatches.\n */\nexport type SurfaceSemanticColors = Record<SemanticColorToken, HexColor>;\n\nexport function resolveSemanticColors(\n  generated: GeneratedThemeModeColors,\n  references: SemanticColorReferenceMap,\n): SurfaceSemanticColors {\n  return Object.fromEntries(\n    Object.entries(references).map(([token, ref]) => {\n      const swatch = generated.swatches[ref.role];\n      if (!swatch) {\n        throw new Error(`Missing swatch for role '${ref.role}' (token: '${token}')`);\n      }\n      return [token, swatch[ref.step]];\n    }),\n  ) as SurfaceSemanticColors;\n}\n\nfunction buildNeutralSemantics(neutralSwatch: ColorSwatch, isDark: boolean): NeutralSemantics {\n  if (isDark) {\n    return {\n      bg: neutralSwatch[950],\n      bgSubtle: neutralSwatch[900],\n      surface: neutralSwatch[900],\n      surfaceHover: neutralSwatch[800],\n      surfaceActive: neutralSwatch[700],\n      border: neutralSwatch[800],\n      borderStrong: neutralSwatch[600],\n      divider: neutralSwatch[800],\n      text: neutralSwatch[50],\n      textMuted: neutralSwatch[200],\n      textSubtle: neutralSwatch[300],\n    };\n  }\n  return {\n    bg: neutralSwatch[50],\n    bgSubtle: neutralSwatch[100],\n    surface: neutralSwatch[100],\n    surfaceHover: neutralSwatch[200],\n    surfaceActive: neutralSwatch[300],\n    border: neutralSwatch[200],\n    borderStrong: neutralSwatch[300],\n    divider: neutralSwatch[200],\n    text: neutralSwatch[900],\n    textMuted: neutralSwatch[700],\n    textSubtle: neutralSwatch[600],\n  };\n}\n\nfunction buildRoleSemantics(swatch: ColorSwatch, isDark: boolean): RoleSemantics {\n  const base = swatch[500];\n  const { foreground: onSolidText } = getReadableForeground(base);\n\n  if (isDark) {\n    return {\n      base,\n      hover: swatch[400],\n      strong: swatch[300],\n      softBg: swatch[900],\n      softHover: swatch[800],\n      softActive: swatch[700],\n      outline: swatch[500],\n      onSolidText,\n    };\n  }\n\n  return {\n    base,\n    hover: swatch[600],\n    strong: swatch[700],\n    softBg: swatch[100],\n    softHover: swatch[200],\n    softActive: swatch[300],\n    outline: swatch[400],\n    onSolidText,\n  };\n}\n\nexport function generatePalette(\n  config: ThemeConfig,\n  mode: 'light' | 'dark' = 'light',\n): {\n  colors: Record<string, string>;\n  swatches: GeneratedThemeSwatches;\n  semantics: ThemeSemantics;\n} {\n  const modeConfig = mode === 'dark' ? config.dark : config.light;\n  const isDark = mode === 'dark';\n\n  // Throws deterministically on invalid primary color\n  parseHexColorOrThrow(modeConfig.primaryColor);\n\n  const generated = generateThemeModeColors(modeConfig);\n\n  const { swatches } = generated;\n  const neutralSwatch = swatches.neutral;\n\n  const neutral = buildNeutralSemantics(neutralSwatch, isDark);\n  const brand = buildRoleSemantics(swatches.primary, isDark);\n\n  // Fallback to primary swatch for missing ordinal roles\n  const secondarySwatch = swatches.secondary ?? swatches.primary;\n  const tertiarySwatch = swatches.tertiary ?? swatches.primary;\n  const quaternarySwatch = swatches.quaternary ?? swatches.primary;\n\n  const semanticStatusSwatches = createDefaultSemanticStatusSwatches().swatches;\n\n  const danger = buildRoleSemantics(semanticStatusSwatches.danger, isDark);\n  const success = buildRoleSemantics(semanticStatusSwatches.success, isDark);\n  const warning = buildRoleSemantics(semanticStatusSwatches.warning, isDark);\n  // Keep destructive action and feedback error aligned until a dedicated error status swatch is introduced.\n  const error = danger;\n  const info = buildRoleSemantics(secondarySwatch, isDark);\n\n  const surfaceSemantics: SurfaceSemantics = {\n    default: neutral.surface,\n    subtle: neutral.bgSubtle,\n    raised: neutral.surface,\n  };\n\n  const content: ContentSemantics = {\n    default: neutral.text,\n    muted: neutral.textMuted,\n    subtle: neutral.textSubtle,\n    inverse: brand.onSolidText,\n  };\n\n  const border: BorderSemantics = {\n    default: neutral.border,\n    strong: neutral.borderStrong,\n    focus: brand.outline,\n  };\n\n  const action: ActionSemantics = {\n    primary: brand,\n    neutral: buildRoleSemantics(neutralSwatch, isDark),\n    danger,\n  };\n\n  const colors: Record<string, string> = {\n    primary: brand.base,\n    secondary: secondarySwatch[500],\n    accent: tertiarySwatch[500],\n    highlight: quaternarySwatch[500],\n    tertiary: tertiarySwatch[500],\n    quaternary: quaternarySwatch[500],\n    background: neutral.bg,\n    surface: neutral.surface,\n    text: neutral.text,\n    textSecondary: neutral.textMuted,\n    border: neutral.border,\n    error: error.base,\n    success: success.base,\n    warning: warning.base,\n    info: info.base,\n  };\n\n  return {\n    colors,\n    swatches,\n    semantics: {\n      neutral,\n      brand,\n      secondary: buildRoleSemantics(secondarySwatch, isDark),\n      accent: buildRoleSemantics(tertiarySwatch, isDark),\n      highlight: buildRoleSemantics(quaternarySwatch, isDark),\n      danger,\n      success,\n      warning,\n      error,\n      info,\n      surface: surfaceSemantics,\n      content,\n      border,\n      action,\n    },\n  };\n}\n"]}

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.4.0",
+  "version": "2.0.1",
   "description": "Stable UI foundation for React Native and React Native Web.",
   "homepage": "https://github.com/ankhorage/surface#readme",
   "bugs": {
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@ankhorage/color-theory": "^0.0.7",
-    "@ankhorage/contracts": "^1.3.1"
+    "@ankhorage/contracts": "^1.7.0"
   },
   "files": [
     "dist",

package/src/components/action-sheet/ActionSheet.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+
+import { FocusScope } from '../../internal/focus/FocusScope';
+import { Portal } from '../../internal/overlay/Portal';
+import { resolveOverlayAnimation } from '../../internal/resolvers';
+import { Box, Stack, Surface } from '../../layout';
+import { Text } from '../../primitives/text';
+import { useTheme } from '../../theme/ThemeContext';
+import { ActionSheetItem } from './ActionSheetItem';
+import type { ActionSheetProps } from './types';
+
+export function ActionSheet({
+  visible,
+  onDismiss,
+  title,
+  description,
+  children,
+  cancelLabel = 'Cancel',
+  closeOnBackdrop = true,
+  testID,
+}: ActionSheetProps) {
+  const { theme } = useTheme();
+  const animation = resolveOverlayAnimation('modal');
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Portal layer="modal" visible={visible}>
+      <View
+        pointerEvents="box-none"
+        style={{
+          bottom: 0,
+          left: 0,
+          position: 'absolute',
+          right: 0,
+          top: 0,
+        }}
+      >
+        <Pressable
+          onPress={closeOnBackdrop ? onDismiss : undefined}
+          style={{
+            backgroundColor: theme.semantics.neutral.text,
+            bottom: 0,
+            left: 0,
+            opacity: animation.backdropOpacity,
+            position: 'absolute',
+            right: 0,
+            top: 0,
+          }}
+          testID={testID ? `${testID}-backdrop` : undefined}
+        />
+        <FocusScope
+          active={visible}
+          onEscape={onDismiss}
+          testID={testID ? `${testID}-focus` : undefined}
+        >
+          <Box
+            pointerEvents="box-none"
+            style={{
+              flex: 1,
+              justifyContent: 'flex-end',
+            }}
+          >
+            <View
+              accessible
+              accessibilityViewIsModal
+              style={{
+                alignSelf: 'center',
+                maxWidth: 560,
+                padding: 16,
+                width: '100%',
+              }}
+            >
+              <Surface
+                p="m"
+                style={{
+                  borderRadius: 24,
+                  shadowOpacity: 0.16,
+                  shadowRadius: 18,
+                  shadowOffset: { width: 0, height: -8 },
+                }}
+                testID={testID}
+                variant="raised"
+              >
+                <Stack gap="s">
+                  {title || description ? (
+                    <Box px="m" py="s">
+                      <Stack gap="xxs">
+                        {title ? (
+                          <Text align="center" variant="label" weight="semiBold">
+                            {title}
+                          </Text>
+                        ) : null}
+                        {description ? (
+                          <Text align="center" emphasis="muted" variant="bodySmall">
+                            {description}
+                          </Text>
+                        ) : null}
+                      </Stack>
+                    </Box>
+                  ) : null}
+                  <Stack gap="xxs">{children}</Stack>
+                  {onDismiss ? (
+                    <ActionSheetItem
+                      label={cancelLabel}
+                      onPress={onDismiss}
+                      testID={testID ? `${testID}-cancel` : undefined}
+                    />
+                  ) : null}
+                </Stack>
+              </Surface>
+            </View>
+          </Box>
+        </FocusScope>
+      </View>
+    </Portal>
+  );
+}

package/src/components/action-sheet/ActionSheetItem.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { Box, Inline, Stack } from '../../layout';
+import { ButtonBase } from '../../primitives/button-base';
+import { Text } from '../../primitives/text';
+import type { ActionSheetItemProps } from './types';
+
+export function ActionSheetItem({
+  label,
+  description,
+  leading,
+  trailing,
+  color,
+  disabled = false,
+  selected = false,
+  onPress,
+  testID,
+}: ActionSheetItemProps) {
+  return (
+    <ButtonBase
+      accessibilityRole="button"
+      accessibilityState={{ disabled, selected }}
+      disabled={disabled}
+      onPress={onPress}
+      radius="m"
+      testID={testID}
+    >
+      {(state) => (
+        <Box
+          px="m"
+          py="m"
+          radius="m"
+          style={{
+            opacity: state.disabled ? 0.56 : 1,
+          }}
+        >
+          <Inline align="center" gap="m" justify="space-between" wrap="nowrap">
+            {leading ? <Box>{leading}</Box> : null}
+            <Box flex={1}>
+              <Stack gap="xxs">
+                <Text color={color} variant="body" weight={selected ? 'semiBold' : 'medium'}>
+                  {label}
+                </Text>
+                {description ? (
+                  <Text emphasis="muted" variant="bodySmall">
+                    {description}
+                  </Text>
+                ) : null}
+              </Stack>
+            </Box>
+            {trailing ? <Box>{trailing}</Box> : null}
+          </Inline>
+        </Box>
+      )}
+    </ButtonBase>
+  );
+}

package/src/components/action-sheet/index.ts

@@ -0,0 +1,3 @@
+export { ActionSheet } from './ActionSheet';
+export { ActionSheetItem } from './ActionSheetItem';
+export type { ActionSheetItemProps, ActionSheetProps } from './types';

package/src/components/action-sheet/types.ts

@@ -0,0 +1,26 @@
+import type React from 'react';
+
+import type { SurfaceColor } from '../../surfaceColor';
+
+export interface ActionSheetProps {
+  visible: boolean;
+  onDismiss?: (() => void) | undefined;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  children?: React.ReactNode;
+  cancelLabel?: React.ReactNode;
+  closeOnBackdrop?: boolean;
+  testID?: string;
+}
+
+export interface ActionSheetItemProps {
+  label: React.ReactNode;
+  description?: React.ReactNode;
+  leading?: React.ReactNode;
+  trailing?: React.ReactNode;
+  color?: SurfaceColor;
+  disabled?: boolean;
+  selected?: boolean;
+  onPress?: (() => void) | undefined;
+  testID?: string;
+}

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