Overlay opacity utility classes (overlay-20/40/60/80) have no CSS implementation

[jjroelofs]

Summary

The overlay opacity modifier utility classes (dxpr-theme-util-overlay-20, dxpr-theme-util-overlay-40, dxpr-theme-util-overlay-60, dxpr-theme-util-overlay-80) are registered as predefined CSS class options in dxpr_theme.info.yml and appear in the DXPR Builder element class picker UI, but they have no corresponding CSS rules. Selecting them in the UI has no visual effect.

Steps to reproduce

1. Create a section with a background image in DXPR Builder
2. Add the class dxpr-theme-util-overlay-black — a black overlay appears at 90% opacity (correct)
3. Also add dxpr-theme-util-overlay-60 — nothing changes, the overlay remains at 90%

What is the current bug behavior?

The overlay color classes (overlay-black, overlay-white, etc.) work correctly — they create a ::after pseudo-element overlay with opacity: 0.9. However, the opacity modifier classes (overlay-20/40/60/80) are listed in dxpr_theme.info.yml as predefined class options but have no CSS to override the default 0.9 opacity. Users see them in the UI dropdown but they do nothing.

What is the expected correct behavior?

Adding dxpr-theme-util-overlay-60 alongside dxpr-theme-util-overlay-black should reduce the overlay opacity to 0.6. Each opacity modifier should override the ::after element's opacity:

• overlay-20 → 0.2
• overlay-40 → 0.4
• overlay-60 → 0.6
• overlay-80 → 0.8

Relevant logs and/or screenshots

In css/helpers/helper-classes.css, the overlay color classes are defined but no opacity modifier rules exist:

.html .dxpr-theme-util-overlay-black::after { background-color: #000; }
/* No rules for overlay-20, overlay-40, overlay-60, overlay-80 */

In dxpr_theme.info.yml, the classes are registered:

dxpr-theme-util-overlay-20: 'Overlay opacity 20%'
dxpr-theme-util-overlay-40: 'Overlay opacity 40%'
dxpr-theme-util-overlay-60: 'Overlay opacity 60%'
dxpr-theme-util-overlay-80: 'Overlay opacity 80%'

Possible fixes

Add CSS rules to scss/helpers/helper-classes.scss (after the overlay color rules at line ~153) and compile to css/helpers/helper-classes.css:

.dxpr-theme-util-overlay-20::after, .dxpr-theme-util-overlay-20 .YTPOverlay { opacity: 0.2; }
.dxpr-theme-util-overlay-40::after, .dxpr-theme-util-overlay-40 .YTPOverlay { opacity: 0.4; }
.dxpr-theme-util-overlay-60::after, .dxpr-theme-util-overlay-60 .YTPOverlay { opacity: 0.6; }
.dxpr-theme-util-overlay-80::after, .dxpr-theme-util-overlay-80 .YTPOverlay { opacity: 0.8; }

Scope of affected files

• scss/helpers/helper-classes.scss
• css/helpers/helper-classes.css