[Scrim] Update default scrim color to be more transparent

[macandcheese]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

The Scrim component has very little transparency by default.

In particular - in dark mode - Components like Dialog and Sheet that render Scrim, wind up with pretty low contrast between their default content containers and this Scrim.

In both light and dark mode - It's also just generally pretty hard to see the page context behind the Scrim.

Adjusting our defaults should help alleviate most of these issues, while still allowing adjustment via css properties for custom needs.

Acceptance Criteria

Scrim's transparency treatment is adjusted for both light and dark mode. From a design standpoint, we could also look at whether a Dialog or Scrim in light mode should render dark mode Scrim.

Relevant Info

Specific to dark mode - #3122 may provide additional improvement.

Which Component

Scrim

Dialog, Sheet would improve by way of this change but shouldn't require any direct change.

Example Use Case

Current	Propose something like:

Priority impact

impact - p3 - not time sensitive

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/calcite-ui-icons
• @esri/eslint-plugin-calcite-components

Esri team

N/A

[allyshah]

The Dashboards team is tracking this issue. This issue corresponds with our own issue: https://devtopia.esri.com/WebGIS/arcgis-dashboards/issues/8040

While our core issue is that there is low contrast between the dark mode dialogue and scrim, we would like to be sure that a "more transparent" scrim does not introduce visual noise as more of what's behind the scrim shows through- a scenario which can also result in low contrast between dialogue and scrim.

Thank you!

[macandcheese]

Makes sense! Note that there are times when "more of what's behind the scrim" showing through is desirable for some components and workflows (for instance showing what's behind Sheet / scrim with a lighter transparency while a user performs a quick action) - so while our updated default hopefully strikes that balance, overrides are possible / encouraged as needed with css properties for specific cases.

GH for example has a very transparent treatment.