Svelte team asked some feedback about this RFC : Passing CSS custom properties to components](https://github.com/sveltejs/rfcs/blob/style-properties/text/0000-style-properties.md)
I'm not a big design system user, so I would very much like to get feedback from people who are. Would this solve your problems? What have we missed?
Hello,
I won't give any implementation feedback here at the moment, but some context of our team usage and direction.
We're working on a Svelte app and a design system which partially uses Svelte. The target of the design system is broader than the Svelte app.
At the moment, we expose (using npm packages) :
- atomic assets/tokens : colors in various forms (JSON, CSS, LESS, XML), fonts, pictograms in SVGs. Some of these assets are extracted from the designer's sketchfile.
- an "UIKit", which is completely CSS based (leveraged by PostCSS) + eventually the corresponding PostCSS pipeline
- a collection of Svelte components using items above as dependencies. Those components are exposed in Svelte, compiled modules and WebComponents.
- All of this lives in a monorepo, motorized by Lerna.
Theming (like making themes for a collection of UI elements) is not an primary goal for us. At first we aim for a way to guarantee design, branding and UI/UX consistency across a lot of various applications and projects (not all Svelte-based).
We still need to see how some of our decisions are playing at scale, but, at the moment, we still rely on postCSS as a style composition/inclusion mechanism and preprocess on Svelte side.
The plan is to use both Svelte's scoped style mechanism and class-based-contract approach (bootstrap like).
Of course this RFC will raise a lot of interest within the team.
:global()is a little awkard to use- complex context-based appearance variations will be easier with "theming-like" mechanisms, both for design systems and complex apps.
- class-based-contract is a proven approach but can be fragile at some level