[discovery] Implement composite design tokens

[adamstankiewicz]

As a follow-up to https://github.com/openedx/paragon/pull/1992 (https://github.com/openedx/paragon/issues/1947), we would like to migrate to using composite tokens similar to what's proposed in the W3C spec for the following tokens types:

• Shadow
• Transition
• Typography
• Border

By using composite tokens, each component of a style property is explicitly defined as its own attribute as opposed to assuming the value to be a platform-specific implementation (e.g., CSS).

style-dictionary does support composite tokens but its default transforms/filters do no handle them already, so we may need to write custom transformers. There is a collection of useful transformers we might be able to use as a starting point. Examples:

• Transforming composite shadow tokens to CSS
• Transforming composite typography tokens to CSS

Additional Resources

• https://design-tokens.github.io/community-group/format/#composite-design-token
• https://design-tokens.github.io/community-group/format/#shadow
• https://design-tokens.github.io/community-group/format/#transition
• https://design-tokens.github.io/community-group/format/#typography
• https://design-tokens.github.io/community-group/format/#border