Fix Version/s: None
The purpose of this ticket is to create an "npm" package that contains reusable elements for Science Platform websites and applications based on a React and styled-components stack. This package can also be used by the documentation portal (https://github.com/lsst-sqre/www_lsst_io). Specific goals are:
- Encode colours in YAML files in such a way that those colours can be imported/embedded into style sheets or other components.
- Provide a source for reusable base style sheets
- Provide an importable package for styled-components and other common react components.
The outcome of this ticket is that we've decided to use Style Dictionary, from Amazon. With this set up, we encode design tokens in YAML files and can export those tokens into any sort of export format. We've started with exports to CSS custom properties and ES6 modules. The repo is: https://github.com/lsst-sqre/rubin-style-dictionary
This is packed in a node package, @lsst-sqre/rubin-style-dictionary, that we publish to GitHub Packages through a GitHub Actions release workflow.
A major inspiration for this work is: