Add support for `opacity` style property to theme.json

[mikachan]

What problem does this address?

Users are not currently able to set the opacity of an element just from the theme.json file or Global Styles. This is a common design choice for things such as button pseudo states.

What is your proposed solution?

Add support for the opacity property.

[npneeraj]

@mikachan please assign me this issue / feature . I can contribute to add/do the above following task.

[mikachan]

Done, thank you! ✨ I'm happy to review a PR when you're ready.

[npneeraj]

@mikachan I have read the docs and the theme.json file but I am confused where to add the opacity property since the theme.json seems to be of declaration file. I could not find the CSS file. Please share some hints or relevant resources that could be of any help, since I am new to OpenSource World.

[mikachan]

Hi @npneeraj. Here are some links that may help to explain the theme.json file further:

• Themes handbook page on theme.json
• theme.json schema docs
• Creating a theme.json file tutorial

This issue is for adding support for the opacity property to the theme.json file so it can be used to style blocks.

Here is a similar PR for adding support for box-shadow: #41972

If you prefer, I can start a PR for this, and I'm happy for you to help by contributing code or reviewing it.

[npneeraj]

Hi @mikachan . Thanks for sharing the above resources.
Please start a PR for this for future code contributions and code-reviews.

[hanneslsm]

Hey @npneeraj – any progress on this?
This is becoming important since the File block has a hard coded opacity value on hover which can't be overwritten via the theme.json yet:

gutenberg/packages/block-library/src/file/style.scss

Line 45 in 8f3392b

opacity: 0.85;

[npneeraj]

Hi @hanneslsm - sorry to say, it appears to be a dead-end.

[t-hamano]

I'd like to confirm if it's still worth working on this issue. Personally, I think it is.