Skip to content

Fix non-urgent toast inline link being invisible on light theme#33632

Draft
999purple999 wants to merge 1 commit into
element-hq:developfrom
999purple999:fix/33494-non-urgent-toast-link-light-theme
Draft

Fix non-urgent toast inline link being invisible on light theme#33632
999purple999 wants to merge 1 commit into
element-hq:developfrom
999purple999:fix/33494-non-urgent-toast-link-light-theme

Conversation

@999purple999
Copy link
Copy Markdown

Fixes #33494.

cc @t3chguy since you're the most recent committer to _NonUrgentToastContainer.pcss.

The bug

In light theme, the requests inline link inside the Your server isn't responding to some requests toast is invisible — the text collapses into the toast's background.

Root cause

apps/web/res/css/structures/_NonUrgentToastContainer.pcss hard-codes the container's background to #17191c and its base text colour to #fff, with an explicit comment:

/* We don't use variables on the colours because we want it to be the same */
/* in all themes. */
background-color: #17191c;
color: #fff;

So the container is always dark, in every theme. But the inline requests link is rendered as AccessibleButton kind="link_inline", whose colour rule in apps/web/res/css/views/elements/_AccessibleButton.pcss is:

&.mx_AccessibleButton_kind_link,
&.mx_AccessibleButton_kind_link_inline {
    color: var(--cpd-color-text-primary);
}

--cpd-color-text-primary is theme-dependent. In light theme it resolves to a dark colour. Dark text on #17191c is effectively invisible — that is the bug.

The fix

Pin the inline-link colour to #fff inside .mx_NonUrgentToastContainer_toast, so it follows the container's intentional theme-independent styling. The fix is scoped to the container and the specific link_inline kind, so it cannot leak outside the non-urgent toasts and it does not affect any other inline links elsewhere in the app.

.mx_NonUrgentToastContainer_toast {
    /* ... existing ... */

    .mx_AccessibleButton.mx_AccessibleButton_kind_link_inline {
        color: #fff;
    }
}

+10 LOC including the explanatory comment.

Verification

  • Pure CSS change, no behaviour change outside .mx_NonUrgentToastContainer_toast.
  • Selector specificity: .mx_NonUrgentToastContainer .mx_NonUrgentToastContainer_toast .mx_AccessibleButton.mx_AccessibleButton_kind_link_inline (0,4,0) overrides the upstream &.mx_AccessibleButton_kind_link_inline (0,2,0) — no !important needed.
  • Manual visual confirmation against the issue screenshot: the dark toast is unchanged, the previously-invisible requests link now shows white.
  • No new tests added (visual-only change, no logic).

Fixes element-hq#33494.

The non-urgent toast container (`.mx_NonUrgentToastContainer_toast`)
hard-codes its background to `#17191c` and its base text colour to
`#fff` "in all themes" (per the existing comment). However, an inline
link inside the toast (e.g. the "requests" link in the
`Your server isn't responding to some requests` echo failure toast)
is rendered as `AccessibleButton kind="link_inline"`, whose colour
rule in `_AccessibleButton.pcss` is `var(--cpd-color-text-primary)`.
That token resolves to a dark colour in light theme and a light
colour in dark theme.

So in light theme: the toast keeps its dark background, but the link
text inherits the light theme's dark `--cpd-color-text-primary`,
collapsing into the dark background and effectively becoming
invisible. In dark theme there is no problem because the token
resolves light.

Pin the inline-link colour to `#fff` inside the container so it
follows the container's intentional theme-independent styling. No
behaviour change outside this container; other inline links keep
their theme-aware colour.

The fix is scoped to `.mx_NonUrgentToastContainer_toast .mx_AccessibleButton.mx_AccessibleButton_kind_link_inline` so it cannot leak into other toasts.
@CLAassistant
Copy link
Copy Markdown

CLAassistant commented May 27, 2026

CLA assistant check
All committers have signed the CLA.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

T-Defect Z-Community-PR Issue is solved by a community member's PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

"Your server isn't responding to some requests": "requests" text not visible on light theme

3 participants