Fix Version/s: None
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/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?)
|Status||To Do [ 10001 ]||In Progress [ 3 ]|
|Summary||Implement dark/light theme architecture in rubin-style-dictioanry||Implement dark/light theme architecture in rubin-style-dictionary|
|Resolution||Done [ 10000 ]|
|Status||In Progress [ 3 ]||Done [ 10002 ]|
Implemented as rubin-style-dictionary 0.2.1. See https://style-dictionary.lsst.io/v/0.2.1/ and https://style-dictionary.lsst.io/v/0.2.1/organization-overview.html in particular for how global and component and themed tokens are structured.