feat(PPDSC-2798): expose css variables

[mutebg]

PPDSC-2798

What

1. Background - why this is needed
2. What did you do - added CSS variables to theme provider
3. What does the reviewers should expect

I have done:

• Written unit tests against changes
• Written functional tests against the component and/or NewsKit site
• 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:

[pp-serviceaccount]

You can preview these changes on:
Documentation Site: http://ncu-newskit-docs.s3-website-eu-west-1.amazonaws.com/ppdsc-2798-expose-css-variables
Storybook: http://ncu-newskit-docs.s3-website-eu-west-1.amazonaws.com/ppdsc-2798-expose-css-variables/storybook

[mstuartf]

I think @LukeFinch's point about namespacing is a good one. But I think it's fine for now. If it turns out to be something we need, we could add support for an optional namespace prefix prop to be passed in along with exposeCssVariables.

[mutebg]

I think @LukeFinch's point about namespacing is a good one. But I think it's fine for now. If it turns out to be something we need, we could add support for an optional namespace prefix prop to be passed in along with exposeCssVariables.

Thanks, I totally agree, let's see if anyone needs that we can easily add it as an additional option to the theme provider.

The base branch was changed.

[LukeFinch]

Nice work 👏