How can someone that integrates Sparnatural in its own webpage customize the CSS ?

[tfrancart]

As the CSS is compiled and minified at compile-time, I don't think someone using this can adapt.
We have requests to be able to customize the CSS, maybe only the values that are in the "themes.scss" file. Maybe that file could be left external to the compiled CSS, so that users can adapt it (without having to recompile the whole thing) ?

See also #410 to provide 2 or 3 default color themes, which could be a temporary workaround

@SteinerPascal do you have an idea on this ?

In relation to this, I would find it nice if the "backgroundColor" config property be also part of the CSS theme, and not part of the settings passed to the Javascript. This would be more consistent.

[SteinerPascal]

Hi yes okay well i would not adivse on the customizing CSS solution. Because this would mean that people have to adapt the css within /node_modules folder. Now this folder should always remain idempotent regarding installs. Because as soon as Sparnatural would update, npm would pull the new version and overwrite the sparnatural folder within the node_modules ( and therefore the css as well). Additionally, the node_modules/ folder gets often deleted when having build or dependency issues. So if somebody deletes the node_modules/ folder and then does a reinstall with npm install would cause the css to be changed back again.

Edit:
Also if somebody uses sparnatural in its project and adapts the css within the node_modules will only work if this person also pushes its node_modules folder on his GitHub project (which obviously nobody does). otherwise somebody will download the project using sparnatual and do a npm install and npm will pull the sparnatural on the registry which has default css styling.

I would handle it incode i think... Maybe something like a single configuration property being a styling object. This could look like this in a website integration:

let style = {
  backgroundBaseColor: 'blabla',
  arrowColor: 'hexvalue',
  ...
}

Please note: I'm not an expert on these things so maybe you get a second opinion on this...

[tfrancart]

I see it more as a CSS custom properties thing : https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

[SteinerPascal]

Cool! yes I like it. If I understood it correctly, then there are two goals here. The first is to provide 2-3 different themes and the second objective is to provide the possibility to let the site authors adapt the component and it's vars. But there are definitely some things to consider. For the first goal I can see something similar like here:
https://sap.github.io/ui5-webcomponents/playground/customizing/theme/
Where we provide some single css theme sheets and people can just import their favourite?

For the second objective:
https://vaadin.com/blog/styling-web-components-with-css-variables
But I hink some things have to be considered here:

• Namespaces for css are sometimes encabsulated in FrontEnd frameworks or by css bundlers
• The css variable namespace should be best kept on Sparnatural scope. We don't want to clutter global namespaces
• This requires some good documentation
• This requires the site author to include the customization in their css

As you already thought, for the first solution this requires some webpack managing. But it seems pretty easy. If you or @antoine37120 provide two theme styles in seperate css sheets than i will handle the webpack part. Just open a new branch or for that

[SteinerPascal]

Be aware though that I think the theme should import the sparnatural.scss and not sparnatural.scss imports multiple themes.
Like so: https://webdesign.tutsplus.com/tutorials/how-to-use-sass-to-build-one-project-with-multiple-themes--cms-22104

[SteinerPascal]

@tfrancart I'm going to close this since I think it's done? Otherwise just reopen it

[tfrancart]

Hi @SteinerPascal ! Trying here because I am not sure you check your Siemens email : I will be in Bern this Wednesday 1st and Thursday 2nd. Any chance we can meet ? I also stop in Basel. Cheers Le lun. 27 févr. 2023 à 10:41, SteinerPascal ***@***.***> a écrit :

@tfrancart <https://github.com/tfrancart> I'm going to close this since I think it's done? Otherwise just reopen it — Reply to this email directly, view it on GitHub <#435 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAU2H4L5NBUCTSNVCUNIZHLWZRZFNANCNFSM6AAAAAATPTNNXU> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- *Thomas Francart* -* SPARNA* Web de *données* | Architecture de l'*information* | Accès aux *connaissances* blog : blog.sparna.fr, site : sparna.fr, linkedin : fr.linkedin.com/in/thomasfrancart tel : +33 (0)6.71.11.25.97, skype : francartthomas

[SteinerPascal]

Hi @tfrancart, I have ansered via mail!