[ RFP ] Theming Storefront UI

Question

The concept that I would like to see being widely used with Storefront UI is theming capability.

Let’s say someone is willing to make custom SFUI theme to use components in his/her app. Are in-component SCSS vars enough to fulfill this need OR we need to think about CSS as a theme so sfui css = default theme, custom css = other theme.

Idea 1

Current - via SCSS vars

Idea 2

Treating CSS as a theme while keeping HTML and JS as SFUI base.

In vue package we have everything needed for components to work, in shared package we have icons and styles so basically everything that could be consider a theme.

StorefrontUI should support theming capabilities which means you should be able to simply replace shared package as a source of assets and styles for your components.

To make this possible we need two things:

• generic HTML (we will make sure our components HTML is generic before releasing beta)
• good API for theming

In theory every component should look more or less like this

<script src="@storefrontui/vue/SfBreadcrumbs.js"></script>
<template lang="html" src="@storefrontui/vue/SfBreadcrumbs.html"></template>
<style lang="scss">
// theme css
</style>

But it requires people to actually create all those components. It would be much better if we could just override paths to default SCSS stylesheets. Even though the idea seems right I’m struggling with finding a proper way of handling this.

Having such theming mechanism may potentially make our in-component SCSS vars redundant. Maybe we are trying to fulfill too many use cases with them instead of providing a general solution.

Please let me know what do you think about this idea and if possible propose how such theming API should work. Also please lmk if you think we still need in-component SCSS vars with such system. Let’s make it great together 😉

[leomp12]

Second option sounds better, but I’m not sure if it works well with more complex components, even if we found a great API. At the truth, I think SASS variables is good enough, I just think we should use more global variables, but it’s also harder to style components with global variables then with internal ones, as we’re doing now. Maybe on next version we can do this migration from internals to globals (not only globals, but as possible).

[filrak]

@leomp12 I agree that moving as global as possible is the way to go. In a long run I was thinking about replacing SCSS vars with CSS vars so we can make a WYSIWYG editor of this vars (with pages from examples folder on live preview) so people can adjust the vars and generate sfui.scss file. Going more global with vars will help with that a lot.