Fix non-urgent toast inline link being invisible on light theme#33632
Draft
999purple999 wants to merge 1 commit into
Draft
Fix non-urgent toast inline link being invisible on light theme#33632999purple999 wants to merge 1 commit into
999purple999 wants to merge 1 commit into
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #33494.
cc @t3chguy since you're the most recent committer to
_NonUrgentToastContainer.pcss.The bug
In light theme, the
requestsinline link inside theYour server isn't responding to some requeststoast is invisible — the text collapses into the toast's background.Root cause
apps/web/res/css/structures/_NonUrgentToastContainer.pcsshard-codes the container's background to#17191cand its base text colour to#fff, with an explicit comment:So the container is always dark, in every theme. But the inline
requestslink is rendered asAccessibleButton kind="link_inline", whose colour rule inapps/web/res/css/views/elements/_AccessibleButton.pcssis:--cpd-color-text-primaryis theme-dependent. In light theme it resolves to a dark colour. Dark text on#17191cis effectively invisible — that is the bug.The fix
Pin the inline-link colour to
#fffinside.mx_NonUrgentToastContainer_toast, so it follows the container's intentional theme-independent styling. The fix is scoped to the container and the specificlink_inlinekind, so it cannot leak outside the non-urgent toasts and it does not affect any other inline links elsewhere in the app.+10 LOC including the explanatory comment.
Verification
.mx_NonUrgentToastContainer_toast..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!importantneeded.requestslink now shows white.