π«οΈ feat: Give the Dialog Scrims Theme-Owned Opacity Roles - #16492
Merged
Merged
Conversation
This was referenced Sep 29, 2026
berry-13
changed the title
berry-13
marked this pull request as ready for review
September 29, 2026 08:00
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
βΉοΈ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with π while any review is running, comments if it has suggestions, and reacts with π once all reviews finish with no findings. |
berry-13
force-pushed
the
theme-scrim-role
branch
from
September 29, 2026 08:19
ee57f14 to
7518788
Compare
Contributor
|
Lighthouse CI failed. The last 80 log lines contain the measured budgets and assertion failures. |
berry-13
added this pull request to stack #16502
September 29, 2026 11:36
berry-13
force-pushed
the
theme-scrim-role
branch
2 times, most recently
from
September 29, 2026 14:12
db78593 to
4ace4b7
Compare
The three dialog families carried their scrim alpha in each utility (bg-surface-overlay/80, /90, /65), so a theme could recolor a scrim but not set how much it dims. Add scrimOpacity, alertScrimOpacity and modalScrimOpacity, exposed as bg-scrim, bg-scrim-alert and bg-scrim-modal in the published tokens, defaulting to the 80%, 90% and 65% each family drew. ClickHouse takes Click UI's 0.75 from dialog.color.opaqueBackground, cited in the drift guard. A bundled scrim never lifts the page and, on a light canvas, separates the dialog by 3:1, which is why ClickHouse dark keeps a black overlay rather than Click UI's lighter gray.
β¦ettings Scenarios Both scenarios pinned the old bg-surface-overlay/80 literal: the morph counted elements carrying it and Settings compared its scrim with a probe of it, whose color-mix value serializes differently from the role's rgb(). They now use bg-scrim, the class DIALOG_SCRIM_CLASS exports.
berry-13
force-pushed
the
theme-scrim-role
branch
from
September 29, 2026 14:12
4ace4b7 to
8909977
Compare
Contributor
|
Lighthouse CI failed. The last 80 log lines contain the measured budgets and assertion failures. |
This was referenced Sep 29, 2026
berry-13
added a commit
that referenced
this pull request
Sep 29, 2026
The stylesheet-ownership check added in #16480 required every declared color token to be a theme key of its own, so the scrim tokens from #16492, which compose the surface-overlay role with a scrim opacity role, failed it once both landed on canary. A token is now owned when a variable its value reads is one a theme can set.
jeannotdamoiseaux
pushed a commit
to jeannotdamoiseaux/LibreChat
that referenced
this pull request
Oct 1, 2026
β¦AI#16492) * feat: Give the Dialog Scrims Theme-Owned Opacity Roles The three dialog families carried their scrim alpha in each utility (bg-surface-overlay/80, /90, /65), so a theme could recolor a scrim but not set how much it dims. Add scrimOpacity, alertScrimOpacity and modalScrimOpacity, exposed as bg-scrim, bg-scrim-alert and bg-scrim-modal in the published tokens, defaulting to the 80%, 90% and 65% each family drew. ClickHouse takes Click UI's 0.75 from dialog.color.opaqueBackground, cited in the drift guard. A bundled scrim never lifts the page and, on a light canvas, separates the dialog by 3:1, which is why ClickHouse dark keeps a black overlay rather than Click UI's lighter gray. * test: Read the Dialog Scrim Through Its Role Class in the Morph and Settings Scenarios Both scenarios pinned the old bg-surface-overlay/80 literal: the morph counted elements carrying it and Settings compared its scrim with a probe of it, whose color-mix value serializes differently from the role's rgb(). They now use bg-scrim, the class DIALOG_SCRIM_CLASS exports. (cherry picked from commit 2d7133f) Original-PR: LibreChat-AI#16492
jeannotdamoiseaux
pushed a commit
to jeannotdamoiseaux/LibreChat
that referenced
this pull request
Oct 1, 2026
The stylesheet-ownership check added in LibreChat-AI#16480 required every declared color token to be a theme key of its own, so the scrim tokens from LibreChat-AI#16492, which compose the surface-overlay role with a scrim opacity role, failed it once both landed on canary. A token is now owned when a variable its value reads is one a theme can set. (cherry picked from commit 75bb189) Original-PR: LibreChat-AI#16512
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
1 participant
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.
Pull Request
Summary
Each dialog family carried its scrim alpha in the utility itself (
bg-surface-overlay/80on OGDialog,/90on AlertDialog,/65on Dialog), so a theme could recolor the scrim but never set how much it dims. Click UI's scrim,dialog.color.opaqueBackground, is 0.75 in both modes.This adds three appearance roles,
scrimOpacity,alertScrimOpacityandmodalScrimOpacity, exposed asbg-scrim,bg-scrim-alertandbg-scrim-modalin the publishedtokens.cssand defaulting to the 80%, 90% and 65% each family drew, so the default and high-contrast themes are unchanged. ClickHouse takes Click UI's 0.75, cited in the drift guard, which now compares a scrim role with the alpha of Click UI's scrim color.Decision on whether a scrim may lift the page: no. A new guard holds every bundled palette's scrim to dimming the page, never lightening it, and on a light canvas to separating the dialog by 3:1. That is why ClickHouse dark keeps a black overlay rather than Click UI's
#606060, which would leave the dialog at about 2.1:1.The mobile drawer's scrim, its dark-mode edge and
Scrim.spec(berry-13#105, #145, #65) wait on #16248, which ownsUnifiedSidebar/**; they are tracked together in berry-13#199.Stack: link 4 of the theme-roles stack, based on #16491; merge from the bottom up.
Closes berry-13#181
Type of change
Testing
Tested environments/configuration:
Automated tests:
packages/client:npx jest src/theme(scrim defaults equal the three families' old alphas; every bundled palette's scrim dims without lifting and clears 3:1 on light canvases; opacity validation rejects1.5and75%; the Click UI drift guard).e2e/specs/mock/scenarios/scrim-opacity.spec.tsviareviewctl verify: default light and dark keep each family's rgba; ClickHouse light and dark dim at 0.75; the reference theme dims each family by its own role.e2e/specs/mock/scenarios/dialog-scrim-role.spec.ts(real OGDialog): all four scenarios pass on desktop light and dark. Its mobile runs time out before any scrim assertion, waiting for a conversation menu inside the closed mobile drawer; that is pre-existing in the spec, which π± feat: Give the Mobile Drawer One Place for Each ControlΒ #16248 also edits.npx tsc --noEmit -p packages/client,npx eslinton the changed files,sort-imports --check.Screenshots / recordings
ClickHouse theme, the Archived chats dialog over the chat page: the scrim moves from 80% to Click UI's 75%. The default theme renders unchanged, which the
scrim-opacity-default-*scenarios measure.Risk / compatibility
DIALOG_SCRIM_CLASSnow exportsbg-scrim; its one feature consumer (the shared-layout morph backdrop) follows. Package consumers without a theme get the same alphas throughtokens.cssfallbacks. The new appearance keys are ignored by an older reader.