fix(mobile-tabs-pager): paint Background.OnContainer on pagerRoot so panes mounted outside PageRoot inherit readable text on native
This commit is contained in:
parent
eb29c28ff0
commit
e9c3cc5ddc
1 changed files with 13 additions and 0 deletions
|
|
@ -15,6 +15,18 @@ import { color } from 'folds';
|
|||
// (a) the inter-pane gap during a swipe — the gap colour the user
|
||||
// asked for is "light blue same as the header", which IS this
|
||||
// SurfaceVariant tone — and (b) any sub-pixel rounding seam at rest.
|
||||
//
|
||||
// `color: Background.OnContainer` mirrors what the route-level
|
||||
// `<PageRoot>` would have set via its `ContainerColor({ variant:
|
||||
// 'Background' })` wrapper. We mount Direct/Channels/Bots directly
|
||||
// here, bypassing PageRoot for the swipe-pager experience, so without
|
||||
// this declaration the form labels rendered inside the per-pane
|
||||
// StreamHeader curtain (`<Text size="L400">` for Username/Server/
|
||||
// Options) had `color: inherit` cascading all the way up to `body`,
|
||||
// which sets no color → browser default black. The labels became
|
||||
// invisible against the dark form background only on native (where the
|
||||
// pager activates). Desktop / web go through PageRoot and inherit the
|
||||
// expected light tone for free.
|
||||
export const pagerRoot = style({
|
||||
position: 'relative',
|
||||
flex: '1 1 0',
|
||||
|
|
@ -24,6 +36,7 @@ export const pagerRoot = style({
|
|||
overflow: 'hidden',
|
||||
touchAction: 'pan-y',
|
||||
backgroundColor: color.SurfaceVariant.Container,
|
||||
color: color.Background.OnContainer,
|
||||
});
|
||||
|
||||
// Shared static tabs row painted ABOVE the strip. Reserves the
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue