Themes: Wrap themes with class name + Embed locale

Is your feature request related to a problem or use case? Please describe. For the use case of Angular libraries we run into a few limitations mixed with the need to copy those assets into dist and any consuming project will then also need to copy those distribution entities into its own distribution folder in order for files to be fetched by ids successfully.

Focusing on themes.. The example project specifies that when the themes switch it fetches like https://localhost:8080/themes/my-theme-file.css. In my case because i'm creating a package that is consumed by other projects it would be best to avoid extra dependencies that need to be copied.

Describe the solution you'd like To circumvent the problems I mentioned we can avoid this if IDS has alternative ways to bundle those assets into the build rather than having raw assets that get copied. For example: My library will have a root level component which imports/@use the themes file and by applying a class name at the root level it will cascade the new variables. So in essence, we won't fetch any files when the theme changes. We will bundle those definitions with the component and apply the theme when a class name is matched.

Currently we have in our theme files code like this:

:root {
   --myVar: blue;
}

Which would change to this:

.ids-theme-light {
   --myVar:blue;
}

And my angular components scss file would only have this inside:

@use 'ids-enterprise-wc/themes/theme-definitions.css';

Now in order to switch themes in my library all I need to do is assign the class ids-theme-light at the root level and those color definitions will cascade on the page. No fetching necessary.

Describe alternatives you've considered Considered copying the assets just like in the example angular project but that will impose a requirement on any consuming project to perform the same step. In addition I ran into an exception in the DOM when switching the theme but that's a diverging conversation.

Additional context Angular project of type "library" does not have the ability to copy assets from node_modules: I can copy assets from within my sourceRoot directory but it is a hack to get that to work properly.

infor-design / enterprise-wc

Themes: Wrap themes with class name + Embed locale #1741