We'd like to implement theming (namely, light and dark modes) in our design tokens (https://github.com/lsst-sqre/rubin-style-dictionary). How we generally do themeing in CSS with CSS custom properties that get overridden in a body.dark CSS selector (https://github.com/lsst-sqre/www_lsst_io/blob/61efefb702fabecbd4842182df6bb2390dee0835/src/components/globalStyles.js#L231).

The purpose of this ticket is to figure out how to architect/organize themes in style-dictionary and export CSS variables such that the light theme is exported with either the :root or body selector and dark theme with a body.dark selector.

For inspiration, see 

• https://github.com/amzn/style-dictionary/tree/3.0/examples/advanced/component-cti
• https://github.com/didoo/style-dictionary-demo (their brands might be our themes)
• https://github.com/amzn/style-dictionary/issues/474 (Themeable in formats)
• https://github.com/amzn/style-dictionary/issues/455 (Question: how to represent tokens that have one value in platform A but multiple values in platform B)
• https://github.com/amzn/style-dictionary/issues/450 (Question: how can I group tokens under themes?) This speaks to the didoo demo.
• https://github.com/amzn/style-dictionary/issues/268 (Should we consider token organization a primary use case?)