Skip to content

feat(scrim): improve opacity and customizable token #13628

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
Amretasre002762670 wants to merge 6 commits into
base: dev
Choose a base branch
from
Open

feat(scrim): improve opacity and customizable token #13628

Amretasre002762670 wants to merge 6 commits into from
+21 −9

Conversation

@Amretasre002762670
Copy link
Contributor

@Amretasre002762670 Amretasre002762670 commented Jan 3, 2026

Related Issue: #11666

Summary

  • Adjust scrim color and opacity for better contrast in both light and dark modes.
  • Added --calcite-scrim-opacity token for customization.

@Amretasre002762670 Amretasre002762670 added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jan 3, 2026
@github-actions github-actions bot added the enhancement Issues tied to a new feature or request. label Jan 3, 2026
@Amretasre002762670 Amretasre002762670 added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 3, 2026
@Amretasre002762670 Amretasre002762670 added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 3, 2026
@Amretasre002762670 Amretasre002762670 added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 5, 2026
driskull
driskull reviewed Jan 5, 2026
View reviewed changes
Copy link
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just some comments! :)

packages/components/src/components/scrim/scrim.scss Outdated
overflow-hidden;
animation: calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;
background-color: var(--calcite-scrim-background, var(--calcite-color-transparent-scrim));
opacity: var(--calcite-scrim-opacity, 0.7);
Copy link
Member

@driskull driskull Jan 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should the fallback value of 0.7 use the theme() to get the token for the value so that it stays in sync with the token value?

packages/design-tokens/src/tokens/semantic/color/dark.json
Copy link
Member

@driskull driskull Jan 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we be updating design tokens in a separate PR so that the conventional commit and changelog shows the update for the token?

Copy link
Contributor Author

@Amretasre002762670 Amretasre002762670 Jan 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have raised a separate PR for design tokens.

driskull
driskull reviewed Jan 5, 2026
View reviewed changes
packages/components/src/components/scrim/scrim.scss
overflow-hidden;
animation: calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;
background-color: var(--calcite-scrim-background, var(--calcite-color-transparent-scrim));
opacity: var(--calcite-scrim-opacity, theme("opacity.70"));
Copy link
Member

@driskull driskull Jan 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Once the token PR lands #13636, shouldn't there be be a token to use here for "color.transparent.scrim" or similar instead of the "opacity.70"?

@github-actions
Copy link
Contributor

github-actions bot commented Jan 13, 2026

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

@github-actions github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Jan 13, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@driskull driskull driskull left review comments

@jcfranco jcfranco Awaiting requested review from jcfranco

At least 1 approving review is required to merge this pull request.

Assignees

@Amretasre002762670 Amretasre002762670

Labels

enhancement Issues tied to a new feature or request. pr ready for visual snapshots Adding this label will run visual snapshot testing. Stale Issues or pull requests that have not had recent activity.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@Amretasre002762670 @driskull