build: Provide combined CSS output file for distribution

[adrianbruntonsagecom]

Extends the build process to provide a CSS file for use directly by consumers. Changes made:

• Reverts inclusion of media queries and specific CSS classes by build process to ensure it is as generic as possible
• An all.css file is made available for each brand token type (frozenproduct, marketing & product) which contains the following features:
  • Media query for large screen tokens configurable by a new --global-size-breakpoint-min-width token
  • Consolidation to remove any tokens across screen sizes which are present with the same value in other descending screen sizes
  • Formatter to rename light/dark mode token to add a suffix and include the light-dark function where ever used. This will allow consumers to switch to light/dark mode (or device specified) on a page or section level using the color-scheme css property: https://web.dev/articles/light-dark

A single CSS file has been used because for most of the token levels as the tokens are often dependant on each other. EG, it doesn't make sense to include the light tokens only without also including dark tokens when the components now require both for the light-dark function. Similarly with the screen size tokens - one screen size is insufficient given the use of media queries.

This makes both responsiveness and light/dark mode a built in an expected feature of the tokens for consumers to use.

An example index.html file has been provided in each distributed brand token directory to aid consumption of these tokens and show how they can be implemented with light/dark modes.

[carbonci]

🎉 This PR is included in version 5.0.0-beta.23 🎉

The release is available on:

• v5.0.0-beta.23
• GitHub release

Your semantic-release bot 📦🚀