Optics, a RoleModel Design System is an scss package that provides base styles and components that can be integrated and customized in a variety of projects.
https://shoelace.style/ is a web components library with a full token system. While in some ways their color system competes with this system, their web components provide a well-thought-out implementation of complex components such as modals, dialogs, dropdowns, menus, etc.
We have used Shoelace on a few internal projects and have learned to map this design system's tokens over to the shoelace tokens to allow their components to match closer with our tokens.
This addon would need to define:
[ ] How general tokens map
[ ] How light mode tokens map
[ ] How dark mode tokens map
[ ] For components that we can't quite map perfectly, we should add generic overrides to make it use our color patterns.
[ ] Documentation for how to include the add-on, and best practices for how to customize it further based on the needs of your application.
Jeremy-Walton
commented
1 year ago 
https://shoelace.style/ is a web components library with a full token system. While in some ways their color system competes with this system, their web components provide a well-thought-out implementation of complex components such as modals, dialogs, dropdowns, menus, etc.
We have used Shoelace on a few internal projects and have learned to map this design system's tokens over to the shoelace tokens to allow their components to match closer with our tokens.
This addon would need to define: