1import { describe, expect, it } from "vite-plus/test";
2
3import { getMobileThemeRuntimeVariables } from "./mobileThemeVariables";
4import type { MaterialYouPalette } from "./materialYouPalette";
5import { materialYouPaletteToMobileThemeVariables } from "./materialYouTheme.android";
6
7const palette: MaterialYouPalette = {
8 primary: "#6750A4FF",
9 onPrimary: "#FFFFFFFF",
10 primaryContainer: "#EADDFFFF",
11 onPrimaryContainer: "#21005DFF",
12 inversePrimary: "#D0BCFFFF",
13 secondaryContainer: "#E8DEF8FF",
14 onSecondaryContainer: "#1D192BFF",
15 tertiary: "#7D5260FF",
16 tertiaryContainer: "#FFD8E4FF",
17 onTertiaryContainer: "#31111DFF",
18 surface: "#FFFBFEFF",
19 onSurface: "#1C1B1FFF",
20 onSurfaceVariant: "#49454FFF",
21 surfaceContainer: "#F3EDF7FF",
22 surfaceContainerHigh: "#ECE6F0FF",
23 surfaceContainerHighest: "#E6E0E9FF",
24 surfaceContainerLow: "#F7F2FAFF",
25 surfaceContainerLowest: "#FFFFFFFF",
26 errorContainer: "#F9DEDCFF",
27 onErrorContainer: "#410E0BFF",
28 outline: "#79747EFF",
29 outlineVariant: "#CAC4D0FF",
30 scrim: "#000000FF",
31};
32
33describe("Material You system colors", () => {
34 it.each(["light", "dark"] as const)(
35 "uses the system surface for the Android frame in %s",
36 (appearance) => {
37 const variables = materialYouPaletteToMobileThemeVariables(
38 palette,
39 appearance,
40 getMobileThemeRuntimeVariables("material-you", appearance, "android"),
41 );
42 expect(variables["--color-header"]).toBe(palette.surfaceContainerHigh);
43 },
44 );
45
46 it("overrides the selected theme without mutating its base variables", () => {
47 const base = getMobileThemeRuntimeVariables("t3-code", "dark", "android");
48 const snapshot = { ...base };
49
50 const variables = materialYouPaletteToMobileThemeVariables(palette, "dark", base);
51
52 expect(base).toEqual(snapshot);
53 expect(variables["--color-screen"]).toBe(palette.surface);
54 expect(variables["--color-thread-canvas"]).toBe(palette.surfaceContainerLow);
55 expect(variables["--color-thread-selected"]).toBe(palette.surfaceContainer);
56 expect(variables["--color-header"]).toBe(palette.surfaceContainerHigh);
57 expect(variables["--color-grouped-card"]).toBe(palette.surfaceContainer);
58 expect(variables["--color-primary"]).toBe(palette.primary);
59 expect(variables["--color-placeholder"]).toBe("#1C1B1F9E");
60 });
61
62 it("uses the Messages-style RCS tones for sent messages", () => {
63 const base = getMobileThemeRuntimeVariables("t3-code", "dark", "android");
64 const dark = materialYouPaletteToMobileThemeVariables(
65 { ...palette, inversePrimary: "#A31D8DFF" },
66 "dark",
67 base,
68 );
69 const light = materialYouPaletteToMobileThemeVariables(
70 { ...palette, inversePrimary: "#A31D8DFF" },
71 "light",
72 getMobileThemeRuntimeVariables("t3-code", "light", "android"),
73 );
74
75 expect(dark["--color-user-bubble"]).toBe("#850073FF");
76 expect(dark["--color-user-bubble-foreground"]).toBe("#FFD7EFFF");
77 expect(light["--color-user-bubble"]).toBe(palette.primary);
78 expect(light["--color-user-bubble-foreground"]).toBe(palette.onPrimary);
79 });
80});