1import type { MaterialColors } from "@expo/ui/jetpack-compose";
2import { flattenThemeColor, type MobileThemeVariables } from "./mobileTheme";
3
4export function createNativeThemeColors(colors: MobileThemeVariables): MaterialColors {
5 const roles = {
6 primary: colors["--color-primary"],
7 onPrimary: colors["--color-primary-foreground"],
8 primaryContainer: colors["--color-thread-selected"],
9 onPrimaryContainer: colors["--color-thread-selected-foreground"],
10 inversePrimary: colors["--color-primary-foreground"],
11 secondary: colors["--color-secondary"],
12 onSecondary: colors["--color-secondary-foreground"],
13 secondaryContainer: colors["--color-subtle-strong"],
14 onSecondaryContainer: colors["--color-secondary-foreground"],
15 tertiary: colors["--color-primary"],
16 onTertiary: colors["--color-primary-foreground"],
17 tertiaryContainer: colors["--color-thread-selected"],
18 onTertiaryContainer: colors["--color-thread-selected-foreground"],
19 background: colors["--color-screen"],
20 onBackground: colors["--color-foreground"],
21 surface: colors["--color-screen"],
22 onSurface: colors["--color-foreground"],
23 surfaceVariant: colors["--color-card-alt"],
24 onSurfaceVariant: colors["--color-foreground-muted"],
25 surfaceTint: colors["--color-primary"],
26 inverseSurface: colors["--color-foreground"],
27 inverseOnSurface: colors["--color-screen"],
28 error: colors["--color-danger-foreground"],
29 onError: colors["--color-danger"],
30 errorContainer: colors["--color-danger"],
31 onErrorContainer: colors["--color-danger-foreground"],
32 outline: colors["--color-input-border"],
33 outlineVariant: colors["--color-separator"],
34 scrim: "#000000",
35 surfaceBright: colors["--color-card-alt"],
36 surfaceDim: colors["--color-input"],
37 surfaceContainer: colors["--color-grouped-card"],
38 surfaceContainerHigh: colors["--color-card-alt"],
39 surfaceContainerHighest: colors["--color-subtle-strong"],
40 surfaceContainerLow: colors["--color-sheet-solid"],
41 surfaceContainerLowest: colors["--color-input"],
42 primaryFixed: colors["--color-primary"],
43 primaryFixedDim: colors["--color-primary"],
44 onPrimaryFixed: colors["--color-primary-foreground"],
45 onPrimaryFixedVariant: colors["--color-primary-foreground"],
46 secondaryFixed: colors["--color-secondary"],
47 secondaryFixedDim: colors["--color-secondary"],
48 onSecondaryFixed: colors["--color-secondary-foreground"],
49 onSecondaryFixedVariant: colors["--color-secondary-foreground"],
50 tertiaryFixed: colors["--color-primary"],
51 tertiaryFixedDim: colors["--color-primary"],
52 onTertiaryFixed: colors["--color-primary-foreground"],
53 onTertiaryFixedVariant: colors["--color-primary-foreground"],
54 } satisfies Record<keyof MaterialColors, string>;
55 // Material scheme roles are opaque. Composite translucent RN fills onto the canvas.
56 return Object.fromEntries(
57 Object.entries(roles).map(([role, color]) => [
58 role,
59 flattenThemeColor(color, colors["--color-screen"]),
60 ]),
61 ) as MaterialColors;
62}