Replies: 2 comments
-
|
Hello Sananes 😉 I really like this idea. Maybe you can describe in more detail what problem you see in the current structure we have. And if this design system can't be achieved with TailwindCss? There are already some tools that can convert a style dictionary into a TailwindCss configuration, see here and also this blog post. Perhaps the first step would be to develop/work on a very small POC to see what kind of changes are needed in the code and structure to get a better feel for what that change means and where changes are needed. If this is a viable path for us, I also need to talk to the marketing department about Figma design and perhaps official templates/screens. Let me know what you think 💡 |
Beta Was this translation helpful? Give feedback.
-
|
This project takes an approach of using lit driven web components to create buttons etc. The big difference is the way styles are done. They define styles externally using less and very strict use of vars, meaning the derived themes are very basic and simple, so the extended elements literally just extend the core code. The themes are compiled and injected into the component at runtime. They make heavy use of css vars and css parts to essentially have a publicly available selector to pierce the shadow dom, in a controlled way. |
Beta Was this translation helpful? Give feedback.
-
I believe Shopware is heading in the right direction, but I see an opportunity to take it even further. Developing a cohesive design system would greatly benefit the platform. This includes grouping design properties such as colors, typography, and spacing in a consistent manner across all designs. Currently, it seems that components such as buttons and inputs are hard-coded, which can make global updates a challenge.
As a product designer with a strong background in frontend development, I would love to assist in creating a design system for Shopware. Here is what i'd love to contribute with:
Beta Was this translation helpful? Give feedback.
All reactions