Optimize ThemeImporter Implementation

[davips96]

In the initial POC, ThemeImporter was used to add CSS files to UI elements depending on the theme. While this approach was helpful to validate the POC, it doesn't scale and will require each UI element to have additional code to implement the styles. We could instead move our themed UI styles to their own directory as common CSS variables, then use these CSS variables in each component's dedicated style files. At build time, ThemeImporter would then select the appropriate variables file to load into the app.

We might encounter a situation where a theme requires a custom style. ThemeImporter could also be used to modify CSS files before React transformations occur. We could create a fake CSS @ line (forgot what it's called tbh) that are included only if the theme matches.

This is an example of this functionality:

.my-element-class {
  my-property: my-css-var;
}

@theme (theme-1) {
  .my-element-class {
    other-property: css-value;
  }
}

Using this, ThemeImporter can detect the @theme and remove the line and squiggly brackets to make the class override take effect. We can also add error handling for property overrides in the class, because in-css-themes should never override the properties of the css class this way, it should be done through CSS variables.

ACs:

• Modify ThemeImporter's functionality to select "global" theme files containing CSS variables instead of adding CSS imports to TSX files.
• Add @theme logic to ThemeImporter
• Add error handling for duplicated class properties.

[davips96]

I think CSS might already have @theme, so we can use another name, but the idea is the same.