Commit 80cd57585d7e5ca19c9a495bb34cf3bda8b5d872 | the-knife

3 files changed, 23 insertions(+), 5 deletions(-)

apps/mobile/src/lib/mobileTheme.test.ts+20-3

...	...	@@ -158,6 +158,21 @@ describe("mobile themes", () => {
158	158	}
159	159	});
160	160
	161	it.each(MOBILE_THEME_IDS)("keeps %s sidebar text readable on Android", (themeId) => {
	162	for (const appearance of ["light", "dark"] as const) {
	163	const variables = getMobileThemeRuntimeVariables(themeId, appearance, "android");
	164	for (const foreground of [
	165	"--color-drawer-foreground",
	166	"--color-drawer-foreground-muted",
	167	] as const) {
	168	expect(
	169	contrastRatio(variables[foreground], variables["--color-drawer"]),
	170	`${appearance}: ${foreground}`,
	171	).toBeGreaterThanOrEqual(4.5);
	172	}
	173	}
	174	});
	175
161	176	it("applies palette overrides on top of the selected built-in theme", () => {
162	177	const variables = getMobileThemeVariables("ocean", "dark", {
163	178	"--color-primary": "#123456",
...	...	@@ -182,9 +197,11 @@ describe("mobile themes", () => {
182	197	runtime[platform === "android" ? "--color-header" : "--color-drawer"],
183	198	runtime["--color-screen"],
184	199	);
185		expect(relativeLuminance(sidebar)).toBeLessThan(
186		relativeLuminance(runtime["--color-thread-canvas"]),
187		);
	200	if (platform === "ios") {
	201	expect(relativeLuminance(sidebar)).toBeLessThan(
	202	relativeLuminance(runtime["--color-thread-canvas"]),
	203	);
	204	}
188	205	expect(contrastRatio(chrome, runtime["--color-screen"])).toBeGreaterThanOrEqual(1.06);
189	206	const foregroundRoles =
190	207	platform === "android"

apps/mobile/src/lib/mobileThemeVariables.test.ts+2-2

...	...	@@ -24,7 +24,7 @@ describe("mobile theme runtime variables", () => {
24	24	});
25	25
26	26	it.each(MOBILE_THEME_IDS)(
27		"keeps %s colors on Android with an opaque Material frame",
	27	"uses a screen-colored %s sidebar beneath an opaque Android frame",
28	28	(themeId) => {
29	29	for (const appearance of ["light", "dark"] as const) {
30	30	const base = getMobileThemeVariables(
...	...	@@ -43,6 +43,7 @@ describe("mobile theme runtime variables", () => {
43	43	1,
44	44	),
45	45	"--color-header-foreground": base["--color-drawer-foreground"],
	46	"--color-drawer": base["--color-screen"],
46	47	});
47	48	expect(android["--color-header"]).toMatch(/^rgba$\d+, \d+, \d+, 1$$/);
48	49	}
...	...	@@ -76,7 +77,6 @@ describe("mobile theme runtime variables", () => {
76	77	expect(ios["--color-header-foreground"]).toBe(ios["--color-drawer-foreground"]);
77	78	} else {
78	79	expect(ios).toEqual(getMobileThemeVariables("t3-code", appearance));
79		expect(ios["--color-drawer"]).toBe(android["--color-drawer"]);
80	80	expect(ios["--color-drawer"]).toBe("#000000");
81	81	expect(ios["--color-thread-canvas"]).toBe("#0a0a0a");
82	82	}

apps/mobile/src/lib/mobileThemeVariables.ts+1

...	...	@@ -48,5 +48,6 @@ export function getMobileThemeRuntimeVariables(
48	48	...variables,
49	49	"--color-header": frame,
50	50	"--color-header-foreground": variables["--color-drawer-foreground"],
	51	"--color-drawer": variables["--color-screen"],
51	52	};
52	53	}