Implement a new liminal glass treatment for the Dialog component.

Component-by-component breakdown

This design uses many subcomponents that work together to create the end result – all listed below, grouped by their responsibilities.

All needed assets are available in this zip archive.

Backdrop/overlay

1. Background blur

   • A completely transparent, full screen layer with backdrop-filter(24px) – acts as part of the modal's backdrop/overlay. No progressive blur needed.

2. Background glow

   • Uses dialog-background-glow.avif asset.
   • A simple, subtle glow image that acts as a part of the modal's backdrop/overlay. Adds subtle color.
   • Displayed at 30% opacity.
   • Position it at top: 0: left: 0, and make it a full-screen element.
   • Use only the bottom 50% of the image, set the background-position-x to center, and set the background-size to twice the width of the screen and twice the width of the height.

Glass sheet

3. Glass sheet fill

   • A semi-translucent panel with rounded corners (32px) designed to resemble a sheet of glass.
   • Composed of a simple radial gradient fill: `background: radial-gradient(107.42% 123.59% at 50% 100%, rgba(191, 143, 254, 0.14) 0%, rgba(75, 138, 149, 0.01) 100%);

4. Glass sheet stroke

   • A separate layer which adds a border to the sheet of glass.
   • Uses a linear gradient to approximate the effect of light refracting and falling off through the border of the glass.
   • CSS does not directly support using a linear gradient as a border background, so some kind of workaround will be required (inset, pseudo-element, masked div, etc.)
   • This layer should be masked using the luminance mask.

Highlights

5. Highlight (unclipped)

   • Uses dialog-highlight.avif asset.
   • This image simulates an additional highlight at the top of the modal's glass.
   • Position this image at the top of the modal, to create the impression of light hitting and reacting with the top of the glass.
   • Its width should match that of the modal.
   • Set its opacity to 10%.

6. Highlight (clipped)

   • Identical in placement, size and image to the above layer, but clipped to the modal's boundaries. This "doubling-up" creates the impression of some light remaining trapped in the modal's glass.
   • Use overflow: none or some other technique to ensure this image doesn't spill out of the modal.

7. Rainbow (unclipped)

   • Uses dialog-highlight-rainbow.avif asset.
   • This image simulates rainbow refractions through mist and glass.
   • Use only the bottom 30% of the image, and position it at 20% of the modal glass's y position. Width should be 200vw.
   • Use the plus-lighter blend mode with 10% opacity.

8. Rainbow (clipped)

   • Identical in placement, size and image to the above layer, but clipped to the modal's boundaries. This "doubling-up" creates the impression of some light remaining trapped in the modal's glass.
   • Use overflow: none or some other technique to ensure this image doesn't spill out of the modal.
   • Use the plus-lighter blend mode with 10% opacity.

Mask

In this design, a luminance mask is used to control the direction and amplitude at light across a field.

Use this mask on the specified elements to create the impression of light falling off over

distance:

background: radial-gradient(144.9% 90.61% at 46.96% 13.01%, #FFF 0%, rgba(255, 255, 255, 0.00) 87.02%);

Notes

• In this issue, we only need to implement for phones in portrait and landscape.

  • The only dialog at present is the Gesture Cheatsheet, which is currently only supported on phones.
  • In a future PR, the Gesture Cheatsheet will be expanded to support desktops as well.
  • At that point, we'll make incremental improvements to the code developed here to support larger screen sizes.

• Note that the content of the Gesture Cheatsheet itself, including the dialog's header and buttons, have not changed at all.

  • These will be changed in follow-up PRs.