Skip to content

fix(passage): let the stimulus tabs follow the theme PIE-818 - #3097

Merged
chillenious merged 1 commit into
developfrom
fix/PIE-818-passage-tabs-follow-theme
Aug 16, 2026
Merged

fix(passage): let the stimulus tabs follow the theme PIE-818#3097
chillenious merged 1 commit into
developfrom
fix/PIE-818-passage-tabs-follow-theme

Conversation

@chillenious

Copy link
Copy Markdown
Contributor

The paired-passage tabs stayed white with black ink on every color scheme while the
passage body beneath them went dark, because the tab fill, the tab ink and the selection
indicator came from MUI's palette (theme.palette.common.white / .black), which does not
follow --pie-*. They now read color.background() and color.text() from
@pie-lib/render-ui, which resolve to var(--pie-background, ...) and
var(--pie-text, ...) -- the same tokens the passage body already uses, so the tab now
carries the colour of the panel it opens.

The two #D9DADA borders -- the tab outline and the strip's bottom rule -- become
color.borderGray(). The literal measured roughly 1.2:1 against the dark schemes'
surfaces, and the tab outline is the only thing separating an unselected tab from the strip,
so it was effectively absent exactly where it did the most work. --pie-border-gray is
stepped to the 3:1 non-text minimum in every built-in scheme.

The strip behind the tabs keeps a host-supplied --pie-passage-header-background
unchanged on every scheme, which is deliberate: Knowledge Checks' pale green-blue is a
client decision and not a scheme's business to override. What changes is the no-host
fallback, from a white literal to color.backgroundDark(), so the strip follows the theme
instead of staying white over a dark body. That covers hosts which never opt in, including
the section player when its own card-header token is unset.

Both theme.palette.common.* lines carried "replace with color.background() once PD-2801
is DONE". PD-2801 is about adding background styling to OT's color-contrast class -- the
mechanism pie-theme superseded -- and has been Blocked since 2023, so it no longer gates
this.

Not changed: the selected indicator stays color.tertiary() and the MUI indicator bar
stays color.white(). Both already resolve through tokens every scheme sets, --pie-white
being remapped to the scheme's own background rather than to white.

Verification

Builds and lints clean. Not verified in a rendered dark scheme: reproducing the tabs needs a
passage-pair item from the datastore (E266912 in the ticket), which needs a session, and this
package has no standalone demo page with a pair. Someone with a dev login should walk the
repro in the ticket before this is called done.

Not in scope

Heather's Figma also gives the unselected tab a distinct darker fill, where the component
still distinguishes selection by .passage-label opacity plus the underline. That is a design
refinement rather than a theming defect, so it is left alone here.

The paired-passage tabs stayed white with black ink on every color scheme while the
passage body beneath them went dark, because the tab fill, the tab ink and the selection
indicator came from MUI's palette (`theme.palette.common.white` / `.black`), which does not
follow `--pie-*`. They now read `color.background()` and `color.text()` from
`@pie-lib/render-ui`, which resolve to `var(--pie-background, ...)` and
`var(--pie-text, ...)` -- the same tokens the passage body already uses, so the tab now
carries the colour of the panel it opens.

The two `#D9DADA` borders -- the tab outline and the strip's bottom rule -- become
`color.borderGray()`. The literal measured roughly 1.2:1 against the dark schemes'
surfaces, and the tab outline is the only thing separating an unselected tab from the strip,
so it was effectively absent exactly where it did the most work. `--pie-border-gray` is
stepped to the 3:1 non-text minimum in every built-in scheme.

The strip behind the tabs keeps a host-supplied `--pie-passage-header-background`
unchanged on every scheme, which is deliberate: Knowledge Checks' pale green-blue is a
client decision and not a scheme's business to override. What changes is the no-host
fallback, from a white literal to `color.backgroundDark()`, so the strip follows the theme
instead of staying white over a dark body. That covers hosts which never opt in, including
the section player when its own card-header token is unset.

Both `theme.palette.common.*` lines carried "replace with color.background() once PD-2801
is DONE". PD-2801 is about adding background styling to OT's `color-contrast` class -- the
mechanism pie-theme superseded -- and has been Blocked since 2023, so it no longer gates
this.

Not changed: the selected indicator stays `color.tertiary()` and the MUI indicator bar
stays `color.white()`. Both already resolve through tokens every scheme sets, `--pie-white`
being remapped to the scheme's own background rather than to white.
@chillenious
chillenious merged commit 6f27bf8 into develop Aug 16, 2026
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant