Allow Dialog to have a blurred background

[v3gard]

Is your feature request related to a problem? Please describe.

Before we give our users access to our Restricted data (WR0158), we require them to acknowledge the fact. We currently do this using a Scrim with a custom container inside.

Describe the solution you'd like

The Dialog component already takes advantage of the <dialog> HTML element. We propose adding styling opportunities to the Dialog, or just a isBlurred property that effectively blurs the background information (before acknowledgement is given).

Describe alternatives you've considered
As seen in the above screenshot, it is also possible to create a custom solution using Scrim, e.g.

export const StyledScrim = styled(Scrim)({
    position: "fixed",
    display: "flex",
    top: 0,
    left: 0,
    backdropFilter: "blur(5px)",
    boxShadow: "0px 0px 20px 0px rgba(0,0,0,0.75)",
});

export const StyledContainer = styled.div({
    backgroundColor: tokens.colors.ui.background__default.hex,
    width: "500px !important",
    padding: "1rem",
    boxShadow: "0px 0px 24px 0px rgba(0,0,0,0.75)",
    borderRadius: "4px",
});

But we think it is better to agree on a shared component with a generic solution to this problem.

Additional context

N/A

[oddvernes]

This sounds like something the designers should weigh in on but for now, you can always overwrite the eds Dialog backdrop in this slightly roundabout way:
give the eds Dialog a className such as .blurred-dialog and then add

dialog:has(.blurred-dialog)::backdrop {
    backdrop-filter: blur(5px);
  }

To your global styles (either styled-components createGlobalStyle or app.css or whatever you have)