Overview
The Design Set collection is where all of your design tokens, CSS variables, and other styles are stored. The fact that it is a collection means we can have multiple concepts stored for testing/use in our application. Making it easy to develop new ideas, without having to overwrite old work or starting new projects.
Here is a brief overview of what pages includes:
- Active checkbox toggle to determine which Design Set is currently used by the website
- Test path for viewing changes in the same screen with live preview
- Theme Toggle Handling
- Prose Handling
- Static CSS Generation
- Set classnames for html, body and the app wrapper div tag.
The resulting values are utilized by UnoCSS's generator to create a stylesheet that is statically included in layout.tsx.
Notes
Active status utilizes draft mode. Meaning you can demo different concepts and their impact on your site in draft mode, without exposing it publicly.
Publishing an update to the Design Set will automatically apply to all live pages, unless the Design Set is not active.