fix(material/theming): fix color + opacity for firefox

[wagnermaciel]

The color + opacity logic for when color is a css variable uses css that is currently not supported on firefox. This happens when users opt into the new system-variables system).

To fix this, we need to refactor our color + opacity logic to use something supported by firefox.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}