Processor for opacity

[Mario Santos]

Description

We'll want to change the opacity of some elements or paragraphs, and we should be able to do this from Gutenberg.

At this moment, we are planning to do this adding classes to each element, for both the text and the background, and process them from Frontity. Something like has-text-opacity-80 or has-background-opacity-80.

How it works

• If an element has the class has-text-opacity-XX, we should get the opacity number and change the color css property. We should create a function to convert to rgba (adding the opacity) inside the libraries of the theme. We can get the color of the element as explained here or get primary as default one.

• If an element has the class has-background-opacity-XX, we should get the opacity number and change the background-color css property. We can get the background color of the element as explained here.

• We should be able to use this inside React too, without classes. If we want to apply an opacity to one of the state.theme.colors from React, we should be able to do it.

Where to check

• Inside /common-styles/ page -> Div with background and text 60% opacity