Adjust opacity color to work better across light and dark variations

[richtabor]

The current opacity color only works great on light backgrounds. If we adjust it a bit I'm sure we can find a color (perhaps around #7a7a7a33 that works better on light and dark.

The original is on the left:

https://github.com/user-attachments/assets/35c732d0-704e-419e-91b0-9ba561ae06fd

cc @beafialho

[beafialho]

It's a little hard to see in both light and dark. Why can't the opacity color preset just use the opacity color tone from each style?

[carolinan]

It's a little hard to see in both light and dark. Why can't the opacity color preset just use the opacity color tone from each style?

I am not sure I understand. "opacity color tone from each style" ?

I think you meant that the color palette presets have different colors for the opacity. For example sunrise has DB9AB133. The section styles can only apply the current color palette.

[richtabor]

The section styles can only apply the current color palette.

Section styles can't define new colors, only assign colors-and only when values are not applied directly to blocks (like the border color is).

[richtabor]

We can try using color-mix for that opacity color in theme.json using a % of the current color—rather than a fixed value. I think that could work.

[jasmussen]

The proposed solution can work, if we don't find better alternatives 👍 👍