1import {
2 flattenThemeColor,
3 themeColorWithAlpha,
4 type MobileThemeMode,
5 type MobileThemeVariables,
6} from "../lib/mobileTheme";
7
8export interface WidgetPalette {
9 background: string;
10 foreground: string;
11 secondary: string;
12 accent: string;
13 track: string;
14 danger: string;
15}
16
17export interface WidgetTheme {
18 mode: MobileThemeMode;
19 light: WidgetPalette;
20 dark: WidgetPalette;
21}
22
23export function createWidgetTheme(
24 mode: MobileThemeMode,
25 palettes: Readonly<Record<"light" | "dark", MobileThemeVariables>>,
26): WidgetTheme {
27 const palette = (variables: MobileThemeVariables) => ({
28 background: variables["--color-card"],
29 foreground: variables["--color-foreground"],
30 secondary: variables["--color-foreground-secondary"],
31 accent: variables["--color-primary"],
32 // Surface tokens can coincide; a foreground blend keeps the unfilled track visible.
33 track: flattenThemeColor(
34 themeColorWithAlpha(variables["--color-foreground"], 0.16),
35 variables["--color-card"],
36 ),
37 danger: variables["--color-danger-foreground"],
38 });
39 return { mode, light: palette(palettes.light), dark: palette(palettes.dark) };
40}