feat(PPDSC-2095): add opacity tokens and gradients to the theme

[evgenitsn]

PPDSC-2095

What

• Added opacity and gradients tokens to the theme files.
• Updated the style presets that were using hardcoded opacity values to tokens.

I have done:

• Written functional tests against the component and/or NewsKit site
• Written unit tests against changes
• Updated relevant documentation

I have tested manually:

• The feature's functionality is working as expected on Chrome, Firefox, Safari and Edge
• The screen reader reads and flows through the elements as expected.
• There are no new errors in the browser console coming from this PR.
• When visual test is not added, it renders correctly on different browsers and mobile viewports (Safari, Firefox, small mobile viewport, tablet)
• The Playground feature is working as expected

Before:

After:

Who should review this PR:

How to test:

[newskit-engineering]

You can preview these changes on:
Documentation Site: http://ncu-newskit-docs.s3-website-eu-west-1.amazonaws.com/ppdsc-2095-add-opacity-tokens-and-gradients-to-the-theme
Storybook: http://ncu-newskit-docs.s3-website-eu-west-1.amazonaws.com/ppdsc-2095-add-opacity-tokens-and-gradients-to-the-theme/storybook

[mutebg]

I think is not part of the ticket but there is 1 more place that uses opacity if you can update it as well src/theme/presets/transition-presets.ts
Apart from that ready to approve, everything looks good!

[evgenitsn]

@mutebg Yes I was wondering whether we should update the transition-presets.ts as well but I wasn't sure.
I've now updated it.