@ankhorage/surface 7.0.0 → 9.0.0

package/src/features/layout/adapters/inbound/View.tsx

@@ -3,9 +3,9 @@ import { View as ReactNativeView } from 'react-native';
 
 import { useResponsiveRuntime } from '../../../../core/responsive';
 import { resolvePointerEvents } from '../../../../internal/resolvePointerEvents';
-import { useTheme } from '../../../../theme/ThemeContext';
 import type { ViewProps } from '../../../../types/layout';
 import { resolveViewStyles } from '../../../../utils/resolveViewStyles';
+import { useTheme } from '../../../theme/runtime';
 
 /*** Renders the token-aware responsive Surface adapter for React Native View. */
 export function View({

package/src/features/list/adapters/inbound/ListItem.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import { ButtonBase } from '../../../../primitives/button-base';
-import { useTheme } from '../../../../theme/ThemeContext';
-import type { SurfaceTheme } from '../../../../theme/types';
 import type { ListItemProps } from '../../../../types/list';
+import type { SurfaceTheme } from '../../../../types/theme';
 import { View } from '../../../layout/public';
+import { Pressable } from '../../../pressable/public';
+import { useTheme } from '../../../theme/runtime';
 import { Text } from '../../../typography/public';
 
 /*** Renders a static or interactive list item with shared row geometry and interaction states. */
@@ -30,7 +30,7 @@ function renderInteractiveListItem(
   theme: SurfaceTheme,
 ) {
   return (
-    <ButtonBase
+    <Pressable
       accessibilityLabel={props.accessibilityLabel}
       accessibilityRole="button"
       accessibilityState={{ disabled: props.disabled ?? false, selected: props.selected ?? false }}
@@ -51,7 +51,7 @@ function renderInteractiveListItem(
           testID={undefined}
         />
       )}
-    </ButtonBase>
+    </Pressable>
   );
 }
 

package/src/features/modal/adapters/inbound/Modal.tsx

@@ -5,10 +5,10 @@ import { FocusScope } from '../../../../internal/focus/FocusScope';
 import { Portal } from '../../../../internal/overlay/Portal';
 import { resolvePointerEvents } from '../../../../internal/resolvePointerEvents';
 import { resolveOverlayAnimation } from '../../../../internal/resolvers';
-import { useTheme } from '../../../../theme/ThemeContext';
 import type { ModalProps } from '../../../../types/modal';
 import { View } from '../../../layout/public';
 import { Surface } from '../../../surface/public';
+import { useTheme } from '../../../theme/runtime';
 
 const boxNonePointerEvents = resolvePointerEvents('box-none');
 

package/src/features/popover-menu/adapters/inbound/PopoverMenu.tsx

@@ -3,11 +3,11 @@ import { Pressable } from 'react-native';
 
 import { FocusScope } from '../../../../internal/focus/FocusScope';
 import { useFocusManager } from '../../../../internal/focus/useFocusManager';
-import { useTheme } from '../../../../theme/ThemeContext';
 import type { PopoverMenuAction, PopoverMenuProps } from '../../../../types/popoverMenu';
 import { View } from '../../../layout/public';
 import { Popover } from '../../../popover/public';
 import { Surface } from '../../../surface/public';
+import { useTheme } from '../../../theme/runtime';
 import { Text } from '../../../typography/public';
 import { usePopoverMenuController } from '../../composition/usePopoverMenuController';
 import { resolveNextMenuIndex } from '../../utils/resolveNextMenuIndex';

package/src/{primitives/button-base/ButtonBase.tsx → features/pressable/adapters/inbound/Pressable.tsx}

@@ -1,33 +1,22 @@
 import React from 'react';
-import { Platform, Pressable, type PressableStateCallbackType } from 'react-native';
+import {
+  Platform,
+  Pressable as ReactNativePressable,
+  type PressableStateCallbackType,
+} from 'react-native';
 
-import { useResponsiveRuntime } from '../../core/responsive';
+import { useResponsiveRuntime } from '../../../../core/responsive';
 import {
   type InteractionState,
   resolveFocusRingStyles,
   resolveInteractiveState,
-} from '../../internal/resolvers';
-import { useTheme } from '../../theme/ThemeContext';
-import { resolveViewStyles } from '../../utils/resolveViewStyles';
-import type { ButtonBaseProps } from './types';
+} from '../../../../internal/resolvers';
+import type { PressableProps } from '../../../../types/pressable';
+import { resolveViewStyles } from '../../../../utils/resolveViewStyles';
+import { useTheme } from '../../../theme/runtime';
 
-/*** Resolves one Pressable state into the canonical Surface interaction state. */
-function getInteractionState(
-  pressableState: PressableStateCallbackType,
-  hovered: boolean,
-  focused: boolean,
-  disabled: boolean,
-): InteractionState {
-  return resolveInteractiveState({
-    pressed: pressableState.pressed,
-    hovered,
-    focused,
-    disabled,
-  });
-}
-
-/*** Renders the low-level token-aware Pressable boundary shared by Surface controls. */
-export function ButtonBase({
+/*** Renders the token-aware Surface adapter for React Native Pressable. */
+export function Pressable({
   children,
   disabled = false,
   interactionPolicy = 'enabled',
@@ -39,17 +28,18 @@ export function ButtonBase({
   style,
   testID,
   ...props
-}: ButtonBaseProps) {
+}: PressableProps) {
   const { theme } = useTheme();
   const { breakpoint } = useResponsiveRuntime();
   const [hovered, setHovered] = React.useState(false);
   const [focused, setFocused] = React.useState(false);
   const isWeb = Platform.OS === 'web';
   const resolvedViewStyles = resolveViewStyles(theme, breakpoint, props);
-  const passive = interactionPolicy === 'passive';
+  const pressHandlers = resolvePressHandlers(interactionPolicy, onPress, onLongPress);
 
   return (
-    <Pressable
+    <ReactNativePressable
+      {...pressHandlers}
       accessibilityLabel={accessibilityLabel}
       accessibilityRole={accessibilityRole}
       accessibilityState={{ ...accessibilityState, disabled }}
@@ -60,10 +50,8 @@ export function ButtonBase({
       }}
       onHoverIn={isWeb ? () => setHovered(true) : undefined}
       onHoverOut={isWeb ? () => setHovered(false) : undefined}
-      onLongPress={passive ? undefined : onLongPress}
-      onPress={passive ? undefined : onPress}
       style={(pressableState) => {
-        const state = getInteractionState(pressableState, hovered, focused, disabled);
+        const state = resolveInteractionState(pressableState, hovered, focused, disabled);
         return [
           resolvedViewStyles,
           resolveFocusRingStyles(theme.semantics.border.focus, state.focused, isWeb),
@@ -73,9 +61,35 @@ export function ButtonBase({
       testID={testID}
     >
       {(pressableState) => {
-        const state = getInteractionState(pressableState, hovered, focused, disabled);
+        const state = resolveInteractionState(pressableState, hovered, focused, disabled);
         return typeof children === 'function' ? children(state) : children;
       }}
-    </Pressable>
+    </ReactNativePressable>
   );
 }
+
+/*** Resolves press handlers according to the shared interaction policy. */
+function resolvePressHandlers(
+  interactionPolicy: PressableProps['interactionPolicy'],
+  onPress: PressableProps['onPress'],
+  onLongPress: PressableProps['onLongPress'],
+) {
+  return interactionPolicy === 'passive'
+    ? { onLongPress: undefined, onPress: undefined }
+    : { onLongPress, onPress };
+}
+
+/*** Resolves one native Pressable state into the canonical Surface interaction state. */
+function resolveInteractionState(
+  pressableState: PressableStateCallbackType,
+  hovered: boolean,
+  focused: boolean,
+  disabled: boolean,
+): InteractionState {
+  return resolveInteractiveState({
+    pressed: pressableState.pressed,
+    hovered,
+    focused,
+    disabled,
+  });
+}

package/src/features/pressable/public.ts

@@ -0,0 +1,2 @@
+export type { PressableProps } from '../../types/pressable';
+export { Pressable } from './adapters/inbound/Pressable';

package/src/features/surface/adapters/inbound/Surface.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { ViewStyle } from 'react-native';
 
-import { useTheme } from '../../../../theme/ThemeContext';
 import type { SurfaceProps, SurfaceVariant } from '../../../../types/surface';
 import { View } from '../../../layout/public';
+import { useTheme } from '../../../theme/runtime';
 
 /*** Renders a themed content surface with semantic elevation and border variants. */
 export function Surface({ variant = 'default', radius = 'm', style, ...props }: SurfaceProps) {

package/src/features/tabs/adapters/inbound/Tab.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Pressable, type ViewStyle } from 'react-native';
 
-import { useTheme } from '../../../../theme/ThemeContext';
 import type { TabProps } from '../../../../types/tabs';
 import { View } from '../../../layout/public';
+import { useTheme } from '../../../theme/runtime';
 import { Text } from '../../../typography/public';
 import { useTabRegistration } from '../../composition/useTabRegistration';
 import { useTabsContext } from '../../composition/useTabsContext';

package/src/features/theme/adapters/inbound/ThemeProvider.tsx

@@ -0,0 +1,46 @@
+import type { ThemeConfig } from '@ankhorage/contracts';
+import { deepMerge } from '@ankhorage/utility/object';
+import { useMemo, useState } from 'react';
+
+import { ResponsiveProvider } from '../../../../core/responsive/ResponsiveProvider';
+import { OverlayProvider } from '../../../../internal/overlay/OverlayProvider';
+import type { ThemeProviderProps, ThemeRuntime } from '../../../../types/theme';
+import { useFontRuntime } from '../../../font/adapters/inbound/useFontRuntime';
+import { createTheme } from '../../application/use-cases/createTheme';
+import { ThemeRuntimeContext } from './ThemeRuntimeContext';
+
+/*** Install the app-level Surface theme together with global responsive and overlay runtime. */
+export function ThemeProvider({
+  children,
+  initialConfig,
+  initialMode = 'light',
+}: ThemeProviderProps) {
+  const defaultTheme = useMemo(() => createTheme(), []);
+  const [config, setConfig] = useState<ThemeConfig>(() =>
+    initialConfig ? deepMerge(defaultTheme.config, initialConfig) : defaultTheme.config,
+  );
+  const [mode, setMode] = useState(initialMode);
+  const { activeFontId } = useFontRuntime();
+
+  const theme = useMemo(
+    () => createTheme(config, mode, activeFontId),
+    [activeFontId, config, mode],
+  );
+  const value = useMemo<ThemeRuntime>(
+    () => ({
+      theme,
+      mode,
+      setThemeConfig: (nextConfig) => setConfig((previous) => deepMerge(previous, nextConfig)),
+      setMode,
+    }),
+    [mode, theme],
+  );
+
+  return (
+    <ResponsiveProvider>
+      <ThemeRuntimeContext value={value}>
+        <OverlayProvider>{children}</OverlayProvider>
+      </ThemeRuntimeContext>
+    </ResponsiveProvider>
+  );
+}

package/src/features/theme/adapters/inbound/ThemeRuntimeContext.tsx

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+
+import type { ThemeRuntime } from '../../../../types/theme';
+import { createTheme } from '../../application/use-cases/createTheme';
+
+const defaultTheme = createTheme();
+
+/*** Holds the active Surface theme runtime for component consumption. */
+export const ThemeRuntimeContext = createContext<ThemeRuntime>({
+  theme: defaultTheme,
+  mode: 'light',
+  setThemeConfig: () => undefined,
+  setMode: () => undefined,
+});

package/src/features/theme/adapters/inbound/ThemeScope.test.tsx

@@ -0,0 +1,52 @@
+import { expect, test } from 'bun:test';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import type { ThemeRuntime } from '../../../../types/theme';
+import { createTheme } from '../../application/use-cases/createTheme';
+import { ThemeRuntimeContext } from './ThemeRuntimeContext';
+import { ThemeScope } from './ThemeScope';
+import { useTheme } from './useTheme';
+
+function ThemeProbe() {
+  const { mode, theme } = useTheme();
+  return <span>{`${theme.config.id}:${mode}:${theme.colorDiagnostics.mode}`}</span>;
+}
+
+const parentRuntime: ThemeRuntime = {
+  theme: createTheme(),
+  mode: 'light',
+  setThemeConfig: () => undefined,
+  setMode: () => undefined,
+};
+
+test('overrides mode without mutating the parent theme runtime', () => {
+  const markup = renderToStaticMarkup(
+    <ThemeRuntimeContext value={parentRuntime}>
+      <ThemeProbe />
+      <ThemeScope mode="dark">
+        <ThemeProbe />
+      </ThemeScope>
+      <ThemeProbe />
+    </ThemeRuntimeContext>,
+  );
+
+  expect(markup).toContain('default:light:light');
+  expect(markup).toContain('default:dark:dark');
+  expect(markup.match(/default:light:light/g)).toHaveLength(2);
+});
+
+test('deep-merges a nested config override while preserving the parent config', () => {
+  const markup = renderToStaticMarkup(
+    <ThemeRuntimeContext value={parentRuntime}>
+      <ThemeProbe />
+      <ThemeScope themeConfig={{ id: 'scoped' }}>
+        <ThemeProbe />
+      </ThemeScope>
+      <ThemeProbe />
+    </ThemeRuntimeContext>,
+  );
+
+  expect(markup).toContain('scoped:light:light');
+  expect(markup.match(/default:light:light/g)).toHaveLength(2);
+  expect(parentRuntime.theme.config.id).toBe('default');
+});

package/src/features/theme/adapters/inbound/ThemeScope.tsx

@@ -0,0 +1,29 @@
+import { deepMerge } from '@ankhorage/utility/object';
+import { useMemo } from 'react';
+
+import type { ThemeRuntime, ThemeScopeProps } from '../../../../types/theme';
+import { useFontRuntime } from '../../../font/adapters/inbound/useFontRuntime';
+import { createTheme } from '../../application/use-cases/createTheme';
+import { ThemeRuntimeContext } from './ThemeRuntimeContext';
+import { useTheme } from './useTheme';
+
+/*** Apply a nested Surface theme or mode override without remounting app-level providers. */
+export function ThemeScope({ children, themeConfig, mode }: ThemeScopeProps) {
+  const parent = useTheme();
+  const { activeFontId } = useFontRuntime();
+  const scopedMode = mode ?? parent.mode;
+  const scopedConfig = useMemo(
+    () => (themeConfig ? deepMerge(parent.theme.config, themeConfig) : parent.theme.config),
+    [parent.theme.config, themeConfig],
+  );
+  const theme = useMemo(
+    () => createTheme(scopedConfig, scopedMode, activeFontId),
+    [activeFontId, scopedConfig, scopedMode],
+  );
+  const value = useMemo<ThemeRuntime>(
+    () => ({ ...parent, theme, mode: scopedMode }),
+    [parent, scopedMode, theme],
+  );
+
+  return <ThemeRuntimeContext value={value}>{children}</ThemeRuntimeContext>;
+}

package/src/features/theme/adapters/inbound/useTheme.ts

@@ -0,0 +1,9 @@
+import { use } from 'react';
+
+import type { ThemeRuntime } from '../../../../types/theme';
+import { ThemeRuntimeContext } from './ThemeRuntimeContext';
+
+/*** Read the active Surface theme runtime. */
+export function useTheme(): ThemeRuntime {
+  return use(ThemeRuntimeContext);
+}

package/src/features/theme/application/use-cases/createTheme.ts

@@ -0,0 +1,71 @@
+import type { ThemeConfig } from '@ankhorage/contracts';
+
+import type { FontWeight, SurfaceTheme } from '../../../../types/theme';
+import { generatePalette } from '../../domain/generatePalette';
+import { resolveGlobalTokens } from '../../utils/resolveGlobalTokens';
+
+const DEFAULT_CONFIG: ThemeConfig = {
+  id: 'default',
+  name: 'Default',
+  light: { primaryColor: '#3B82F6', harmony: 'monochromatic' },
+  dark: { primaryColor: '#3B82F6', harmony: 'monochromatic' },
+};
+
+/*** Resolve canonical persisted theme source into the complete Surface runtime theme. */
+export function createTheme(
+  config: ThemeConfig = DEFAULT_CONFIG,
+  mode: 'light' | 'dark' = 'light',
+  activeFontId?: string | null,
+): SurfaceTheme {
+  const { colors, swatches, semantics, colorDiagnostics } = generatePalette(config, mode);
+  const baseTheme: SurfaceTheme = {
+    ...resolveGlobalTokens(config.tokens),
+    colors,
+    swatches,
+    semantics,
+    colorDiagnostics,
+    config,
+  };
+  return activeFontId ? withActiveFont(baseTheme, activeFontId) : baseTheme;
+}
+
+/*** Return a theme with generated module font-family names without mutating the base theme. */
+function withActiveFont(theme: SurfaceTheme, activeFontId: string): SurfaceTheme {
+  const familyName = toPascalCase(activeFontId);
+  return {
+    ...theme,
+    typography: {
+      ...theme.typography,
+      fonts: {
+        normal: createFontMap(theme.typography.fonts.normal, familyName, 'Regular'),
+        italic: createFontMap(theme.typography.fonts.italic, familyName, 'Italic'),
+      },
+    },
+  };
+}
+
+function createFontMap(
+  fallback: Record<FontWeight, string | undefined>,
+  familyName: string,
+  style: 'Regular' | 'Italic',
+): Record<FontWeight, string | undefined> {
+  return {
+    ...fallback,
+    '100': `${familyName}_100${style}`,
+    '200': `${familyName}_200${style}`,
+    '300': `${familyName}_300${style}`,
+    '400': `${familyName}_400${style}`,
+    '500': `${familyName}_500${style}`,
+    '600': `${familyName}_600${style}`,
+    '700': `${familyName}_700${style}`,
+    '800': `${familyName}_800${style}`,
+    '900': `${familyName}_900${style}`,
+  };
+}
+
+function toPascalCase(value: string): string {
+  return value
+    .split(/[- ]+/)
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('');
+}

package/src/{theme → features/theme/application/use-cases}/createThemeOverrides.test.ts

@@ -1,12 +1,14 @@
 import type { ThemeConfig } from '@ankhorage/contracts';
 import { describe, expect, it } from 'bun:test';
 
-import { createTheme, DEFAULT_CONFIG, DEFAULT_TOKENS } from './createTheme';
+import { DEFAULT_TOKENS } from '../../constants';
+import { createTheme } from './createTheme';
+
+const defaultConfig = createTheme().config;
 
 describe('createTheme authored global tokens', () => {
   it('preserves defaults when no authored overrides exist', () => {
-    const theme = createTheme(DEFAULT_CONFIG);
-
+    const theme = createTheme(defaultConfig);
     expect(theme.spacing).toEqual(DEFAULT_TOKENS.spacing);
     expect(theme.radii).toEqual(DEFAULT_TOKENS.radii);
     expect(theme.typography.sizes).toEqual(DEFAULT_TOKENS.typography.sizes);
@@ -16,7 +18,7 @@ describe('createTheme authored global tokens', () => {
 
   it('merges authored global tokens without copying omitted defaults into config', () => {
     const config: ThemeConfig = {
-      ...DEFAULT_CONFIG,
+      ...defaultConfig,
       tokens: {
         spacing: { m: 18, hero: 64 },
         radii: { l: 20, pill: 999 },
@@ -28,9 +30,7 @@ describe('createTheme authored global tokens', () => {
         shadows: { soft: 3, floating: 12 },
       },
     };
-
     const theme = createTheme(config);
-
     expect(theme.spacing).toMatchObject({ xs: 4, m: 18, hero: 64 });
     expect(theme.radii).toMatchObject({ m: 8, l: 20, pill: 999 });
     expect(theme.typography.sizes).toMatchObject({ s: 14, m: 17, display: 44 });
@@ -41,9 +41,8 @@ describe('createTheme authored global tokens', () => {
   });
 
   it('keeps module-derived font families isolated per resolved theme', () => {
-    const withFont = createTheme(DEFAULT_CONFIG, 'light', 'source-sans');
-    const withoutFont = createTheme(DEFAULT_CONFIG);
-
+    const withFont = createTheme(defaultConfig, 'light', 'source-sans');
+    const withoutFont = createTheme(defaultConfig);
     expect(withFont.typography.fonts.normal['400']).toBe('SourceSans_400Regular');
     expect(withoutFont.typography.fonts.normal['400']).toBeUndefined();
     expect(DEFAULT_TOKENS.typography.fonts.normal['400']).toBeUndefined();

package/src/{theme → features/theme/application/use-cases}/createThemeValidation.test.ts

@@ -1,7 +1,9 @@
 import type { ThemeConfig, ThemeGlobalTokenOverrides } from '@ankhorage/contracts';
 import { describe, expect, it } from 'bun:test';
 
-import { createTheme, DEFAULT_CONFIG } from './createTheme';
+import { createTheme } from './createTheme';
+
+const defaultConfig = createTheme().config;
 
 describe('createTheme token validation', () => {
   it('rejects negative or non-finite numeric tokens', () => {
@@ -46,5 +48,5 @@ describe('createTheme token validation', () => {
 });
 
 function withTokens(tokens: ThemeGlobalTokenOverrides): ThemeConfig {
-  return { ...DEFAULT_CONFIG, tokens };
+  return { ...defaultConfig, tokens };
 }

package/src/features/theme/constants.ts

@@ -0,0 +1,68 @@
+import type { FontWeight, ThemeTokens } from '../../types/theme';
+
+const EMPTY_FONT_MAP: Record<FontWeight, string | undefined> = {
+  '100': undefined,
+  '200': undefined,
+  '300': undefined,
+  '400': undefined,
+  '500': undefined,
+  '600': undefined,
+  '700': undefined,
+  '800': undefined,
+  '900': undefined,
+  bold: undefined,
+  normal: undefined,
+};
+
+const DEFAULT_TOKENS: Omit<ThemeTokens, 'colors' | 'swatches' | 'semantics' | 'colorDiagnostics'> =
+  {
+    spacing: { none: 0, xs: 4, s: 8, m: 16, l: 24, xl: 32, xxl: 48 },
+    radii: { none: 0, s: 4, m: 8, l: 16, full: 9999 },
+    typography: {
+      headings: {
+        1: { size: 32, lineHeight: 40, weight: 'bold' },
+        2: { size: 24, lineHeight: 32, weight: 'bold' },
+        3: { size: 20, lineHeight: 28, weight: 'bold' },
+        4: { size: 18, lineHeight: 24, weight: 'semiBold' },
+        5: { size: 16, lineHeight: 22, weight: 'semiBold' },
+        6: { size: 14, lineHeight: 20, weight: 'semiBold' },
+      },
+      sizes: {
+        xs: 12,
+        s: 14,
+        m: 16,
+        l: 18,
+        xl: 20,
+        xxl: 24,
+        '3xl': 30,
+        h1: 32,
+        h2: 24,
+        h3: 20,
+        h4: 18,
+        h5: 16,
+        h6: 14,
+      },
+      weights: {
+        thin: '100',
+        extraLight: '200',
+        light: '300',
+        regular: '400',
+        medium: '500',
+        semiBold: '600',
+        bold: '700',
+        extraBold: '800',
+        black: '900',
+      },
+      fonts: { normal: { ...EMPTY_FONT_MAP }, italic: { ...EMPTY_FONT_MAP } },
+    },
+    shadows: { soft: 2, medium: 4, hard: 8 },
+  };
+
+export const SURFACE_COLOR_POLICY = {
+  disabledContrast: 3,
+  surfaceSeparation: 1.05,
+  textContrast: 4.5,
+  uiContrast: 3,
+} as const;
+
+export { DEFAULT_TOKENS };

package/src/{theme → features/theme/domain}/createSurfaceColorDiagnosticCollector.ts

@@ -11,7 +11,10 @@ import {
   selectColorSwatchStep,
 } from '@ankhorage/color-theory';
 
-import type { SurfaceColorSelectionDiagnostic, SurfaceContrastDiagnostic } from './types';
+import type {
+  SurfaceColorSelectionDiagnostic,
+  SurfaceContrastDiagnostic,
+} from '../../../types/theme';
 
 /** Collect deterministic Color Theory evidence while Surface resolves semantic colors. */
 export function createSurfaceColorDiagnosticCollector() {

package/src/{theme → features/theme/domain}/createSurfaceSemanticPolicy.ts

@@ -8,13 +8,13 @@ import type {
 } from '@ankhorage/color-theory';
 import { parseHexColorOrThrow } from '@ankhorage/color-theory';
 
-import { SURFACE_COLOR_POLICY } from './surfaceColorPolicy';
 import type {
   ContentSemantics,
   NeutralSemantics,
   SurfaceContrastDiagnostic,
   SurfaceSemantics,
-} from './types';
+} from '../../../types/theme';
+import { SURFACE_COLOR_POLICY } from '../constants';
 
 type ResolvedSemanticColors = Record<SemanticColorToken, HexColor>;