| author |  Alex <me@pixp.cc> 2026-10-11 11:29:41-07:00 |
| committer |  GitHub <noreply@github.com> 2026-10-11 11:29:41-07:00 |
| log | 80cd57585d7e5ca19c9a495bb34cf3bda8b5d872 |
| tree | 5d98fc6d18dbcf7ad2a9d4fd23c10be232306a5d |
| parent | b9bf60907fb6eef292da7f19d464a5b16f82ee6b |
| signature | Signed by PGP key B5690EEEBB952194 |
fix(mobile): separate unfolded thread list from header (#13088)
3 files changed, 23 insertions(+), 5 deletions(-)
apps/mobile/src/lib/mobileTheme.test.ts+20-3
| ... | @@ -158,6 +158,21 @@ describe("mobile themes", () => { | ... | @@ -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 | it("applies palette overrides on top of the selected built-in theme", () => { | 176 | it("applies palette overrides on top of the selected built-in theme", () => { |
| 162 | const variables = getMobileThemeVariables("ocean", "dark", { | 177 | const variables = getMobileThemeVariables("ocean", "dark", { |
| 163 | "--color-primary": "#123456", | 178 | "--color-primary": "#123456", |
| ... | @@ -182,9 +197,11 @@ describe("mobile themes", () => { | ... | @@ -182,9 +197,11 @@ describe("mobile themes", () => { |
| 182 | runtime[platform === "android" ? "--color-header" : "--color-drawer"], | 197 | runtime[platform === "android" ? "--color-header" : "--color-drawer"], |
| 183 | runtime["--color-screen"], | 198 | runtime["--color-screen"], |
| 184 | ); | 199 | ); |
| 185 | expect(relativeLuminance(sidebar)).toBeLessThan( | 200 | if (platform === "ios") { |
| 186 | relativeLuminance(runtime["--color-thread-canvas"]), | 201 | expect(relativeLuminance(sidebar)).toBeLessThan( |
| 187 | ); | 202 | relativeLuminance(runtime["--color-thread-canvas"]), |
| 203 | ); | ||
| 204 | } | ||
| 188 | expect(contrastRatio(chrome, runtime["--color-screen"])).toBeGreaterThanOrEqual(1.06); | 205 | expect(contrastRatio(chrome, runtime["--color-screen"])).toBeGreaterThanOrEqual(1.06); |
| 189 | const foregroundRoles = | 206 | const foregroundRoles = |
| 190 | platform === "android" | 207 | platform === "android" |
apps/mobile/src/lib/mobileThemeVariables.test.ts+2-2
| ... | @@ -24,7 +24,7 @@ describe("mobile theme runtime variables", () => { | ... | @@ -24,7 +24,7 @@ describe("mobile theme runtime variables", () => { |
| 24 | }); | 24 | }); |
| 25 | 25 | ||
| 26 | it.each(MOBILE_THEME_IDS)( | 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 | (themeId) => { | 28 | (themeId) => { |
| 29 | for (const appearance of ["light", "dark"] as const) { | 29 | for (const appearance of ["light", "dark"] as const) { |
| 30 | const base = getMobileThemeVariables( | 30 | const base = getMobileThemeVariables( |
| ... | @@ -43,6 +43,7 @@ describe("mobile theme runtime variables", () => { | ... | @@ -43,6 +43,7 @@ describe("mobile theme runtime variables", () => { |
| 43 | 1, | 43 | 1, |
| 44 | ), | 44 | ), |
| 45 | "--color-header-foreground": base["--color-drawer-foreground"], | 45 | "--color-header-foreground": base["--color-drawer-foreground"], |
| 46 | "--color-drawer": base["--color-screen"], | ||
| 46 | }); | 47 | }); |
| 47 | expect(android["--color-header"]).toMatch(/^rgba\(\d+, \d+, \d+, 1\)$/); | 48 | expect(android["--color-header"]).toMatch(/^rgba\(\d+, \d+, \d+, 1\)$/); |
| 48 | } | 49 | } |
| ... | @@ -76,7 +77,6 @@ describe("mobile theme runtime variables", () => { | ... | @@ -76,7 +77,6 @@ describe("mobile theme runtime variables", () => { |
| 76 | expect(ios["--color-header-foreground"]).toBe(ios["--color-drawer-foreground"]); | 77 | expect(ios["--color-header-foreground"]).toBe(ios["--color-drawer-foreground"]); |
| 77 | } else { | 78 | } else { |
| 78 | expect(ios).toEqual(getMobileThemeVariables("t3-code", appearance)); | 79 | expect(ios).toEqual(getMobileThemeVariables("t3-code", appearance)); |
| 79 | expect(ios["--color-drawer"]).toBe(android["--color-drawer"]); | ||
| 80 | expect(ios["--color-drawer"]).toBe("#000000"); | 80 | expect(ios["--color-drawer"]).toBe("#000000"); |
| 81 | expect(ios["--color-thread-canvas"]).toBe("#0a0a0a"); | 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,5 +48,6 @@ export function getMobileThemeRuntimeVariables( |
| 48 | ...variables, | 48 | ...variables, |
| 49 | "--color-header": frame, | 49 | "--color-header": frame, |
| 50 | "--color-header-foreground": variables["--color-drawer-foreground"], | 50 | "--color-header-foreground": variables["--color-drawer-foreground"], |
| 51 | "--color-drawer": variables["--color-screen"], | ||
| 51 | }; | 52 | }; |
| 52 | } | 53 | } |