We're not providing an overlay (backdrop), as Codex itself can't know where the ProgressBar is put, it shouldn't be part of the ProgressBar component IMO. The token is available as background-color-backdrop-light.

I think the request is worth considering. In Wikidata, we're using a Progress bar to indicate the reloading of an entire results page. The bar needs to be centered and have a backdrop in this context. It'd be great if there were a simpler way to reuse the styling of the overlay selector included in Dialog (under .cdx-dialog-backdrop). The backdrop doesn't necessarily need to be included within the Progress bar component (although that would be handy in our use case), but maybe available as a mixin (which we couldn't reuse in our sass environment) or class?

There are a bunch of tokens that will be reused in every context, regardles of the position of the element:

background-color: @background-color-backdrop-light;
z-index: @z-index-overlay-backdrop;
min-height: @size-full;
width: @size-viewport-width-full;	
height: @size-viewport-height-full;
height: -webkit-fill-available;

I agree that a mixin for general use could make sense here. Curious to get the perspective of others.

A mixin would be an easy option for sharing just the overlay styles. We could also conside creating an Overlay component that at least has:

• The styles needed to show the overlay on top of everything else with the appropriate background color
• A slot for whatever content goes in the overlay (like a dialog or progress bar)

A more complex thing to include would be keyboard nav/focus handling, which we do for the Dialog since it's an interactive component. But to support the use case of a simple progress bar, we could keep all that in the Dialog component for now if possible, and just create an Overlay component with the right styles. As Sarai mentioned, a Less mixin wouldn't be useful to WMDE, but a component would be.