1import { describe, expect, it } from "vite-plus/test";
2
3import { readDefaultMobileThemeVariables } from "./mobileTheme.test-support";
4import { getMobileThemeVariables, MOBILE_THEME_IDS, themeColorWithAlpha } from "./mobileTheme";
5import { getMobileThemeRuntimeVariables } from "./mobileThemeVariables";
6
7describe("mobile theme runtime variables", () => {
8 it("matches the standard base palette to the generated stylesheet", () => {
9 expect(getMobileThemeRuntimeVariables("t3-code", "light", "web")).toEqual(
10 readDefaultMobileThemeVariables("light"),
11 );
12 expect(getMobileThemeRuntimeVariables("t3-code", "dark", "web")).toEqual(
13 readDefaultMobileThemeVariables("dark"),
14 );
15 });
16
17 it("uses the same shared palette source as generated custom themes", () => {
18 expect(getMobileThemeRuntimeVariables("ocean", "light", "ios")).toEqual(
19 getMobileThemeVariables("ocean", "light"),
20 );
21 expect(getMobileThemeRuntimeVariables("iris", "dark", "ios")).toEqual(
22 getMobileThemeVariables("iris", "dark"),
23 );
24 });
25
26 it.each(MOBILE_THEME_IDS)(
27 "uses a screen-colored %s sidebar beneath an opaque Android frame",
28 (themeId) => {
29 for (const appearance of ["light", "dark"] as const) {
30 const base = getMobileThemeVariables(
31 themeId === "material-you" ? "t3-code" : themeId,
32 appearance,
33 );
34 const android = getMobileThemeRuntimeVariables(themeId, appearance, "android");
35 expect(android).toEqual({
36 ...base,
37 "--color-header": themeColorWithAlpha(
38 base[
39 themeId === "t3-code" || themeId === "material-you"
40 ? "--color-row-hover"
41 : "--color-drawer"
42 ],
43 1,
44 ),
45 "--color-header-foreground": base["--color-drawer-foreground"],
46 "--color-drawer": base["--color-screen"],
47 });
48 expect(android["--color-header"]).toMatch(/^rgba\(\d+, \d+, \d+, 1\)$/);
49 }
50 },
51 );
52
53 it.each(["t3-code", "material-you"] as const)(
54 "keeps the %s default Material frame distinct in both appearances",
55 (themeId) => {
56 for (const appearance of ["light", "dark"] as const) {
57 const variables = getMobileThemeRuntimeVariables(themeId, appearance, "android");
58 expect(variables["--color-header"]).toBe(
59 appearance === "light" ? "rgba(244, 244, 245, 1)" : "rgba(20, 20, 20, 1)",
60 );
61 for (const pane of ["--color-screen", "--color-sheet-solid", "--color-drawer"] as const) {
62 expect(variables["--color-header"]).not.toBe(themeColorWithAlpha(variables[pane], 1));
63 }
64 }
65 },
66 );
67
68 it.each(["t3-code", "material-you"] as const)(
69 "adapts %s iPad chrome without reversing the dark desktop hierarchy",
70 (themeId) => {
71 for (const appearance of ["light", "dark"] as const) {
72 const ios = getMobileThemeRuntimeVariables(themeId, appearance, "ios");
73 const android = getMobileThemeRuntimeVariables(themeId, appearance, "android");
74 if (appearance === "light") {
75 expect(ios["--color-drawer"]).toBe(android["--color-header"]);
76 expect(ios["--color-header"]).toBe(android["--color-header"]);
77 expect(ios["--color-header-foreground"]).toBe(ios["--color-drawer-foreground"]);
78 } else {
79 expect(ios).toEqual(getMobileThemeVariables("t3-code", appearance));
80 expect(ios["--color-drawer"]).toBe("#000000");
81 expect(ios["--color-thread-canvas"]).toBe("#0a0a0a");
82 }
83 expect(themeColorWithAlpha(ios["--color-thread-hover"], 1)).not.toBe(
84 themeColorWithAlpha(ios["--color-drawer"], 1),
85 );
86 expect(themeColorWithAlpha(ios["--color-thread-hover"], 1)).not.toBe(
87 themeColorWithAlpha(ios["--color-thread-selected"], 1),
88 );
89 for (const role of [
90 "--color-screen",
91 "--color-thread-canvas",
92 "--color-card",
93 "--color-composer-surface",
94 "--color-grouped-card",
95 ] as const) {
96 expect(ios[role]).toBe(android[role]);
97 }
98 }
99 },
100 );
101});