Add color and opacity to group elements

There are only 3 types of element components: image, text, and group. Groups are used to control the size and position of its children, however there is more that could be done. Both image and text elements have in common the color and opacity properties. As such, the group could theoretically also control the color and opacity of its children.

If a group had the opacity set to 0.5, then a child image with opacity of 1 would only have effectively 0.5 opacity. If said child instead had 0.5 opacity, then it would have effectively 0.25 opacity(0.5 * 0.5). If the parent has color yellow and the child color blue, the child ends up with color green. And so on.

Why is this useful? For the same reason groups are already useful for positioning and scaling its children. When I want to control the color/opacity of a group of UI images/text at the same time. For example, If I want to fade out/fade in a UI screen, I currently have to iterate through each UI image/text to change the opacity, when I could just do that to the group if it was possible.

Start by reading the group, image, and text element implementations, focusing on how color and opacity are currently represented. Trace how group sizing and positioning affect children, then define completion as group color and opacity affecting descendant image and text elements with the combined values described in the issue.