Custom Themes via Theme Designer is unstable/broken

[MarcusNotheis]

Bug Description

When using the Theme Designer css_variables.css and the custom.css file (we need that for some specific overrides), the UI5 Web Components will not inject any theme.

Expected Behavior

My custom theme should load (like in 1.0.0-rc.15).

Additional Info
If you swap

    <link rel="stylesheet" href="css_variables.css" />
    <link rel="stylesheet" href="custom.css" />

to

    <link rel="stylesheet" href="custom.css" />
    <link rel="stylesheet" href="css_variables.css" />

the theme is loaded again, but this approach might invalidate some css variables that have been defined in custom.css.

Steps to Reproduce

1. Open https://codesandbox.io/s/mutable-framework-ytjbv?file=/public/index.html:231-334
2. See the error

Isolated Example

https://codesandbox.io/s/mutable-framework-ytjbv?file=/public/index.html:231-334

Context

• UI5 Web Components version: 1.0.1
• OS/Platform: macOS
• Browser: Chrome 95.0.4638.69 (Official Build) (x86_64)
• Affected component: @ui5/webcomponents-base, most probably:

  ui5-webcomponents/packages/base/src/theming/getThemeDesignerTheme.js

  Lines 44 to 47 in ce0dcd2

  	try {
  	themeName = metadata.Path.match(/\.([^.]+)\.css_variables$/)[1];
  	baseThemeName = metadata.Extends[0];
  	} catch (ex) {

Log Output / Stack Trace / Screenshots

Priority

• Low
• Medium
• High
• Very High

Stakeholder Info (if applicable)

• Organization: UI5 Web Components for React / SAP Customer Experience
• Bussiness impact: Unable to upgrade the to the ^1.0.0 versions because this breaks our custom theming.

[IlianaB]

Hello @SAP/ui5-webcomponents-team I am forwarding this issue to you, because it seems with the new UI5 Web Components 1.0.1 version custom themes cannot be loaded, the same way like in 1.0.0-rc.15.

[vladitasev]

Hi @MarcusNotheis

The problem is that both of these files contain a custom theme definition (metadata from Theme Designer). The one from custom.css seems to be:

which has invalid path in terms of theme recognition and the theme name cannot be properly extracted from the Path field. Probably in r.c.-15 it failed silently. I'll push a fix to prevent the JS error from happening.

I'll keep you updated.

Regards,
Vladi

[vladitasev]

Hi again @MarcusNotheis

There is a proposed fix, just to double-check that this is the expectation: The custom theme will be loaded from css_variables.css only, regardless of order. custom.css needs to be second in order to override some CSS Variables.

In the meantime, to overcome this error, you can delete the malformed metadata object from custom.css, namely this:

.sapThemeMetaData-UI5-sap-ui-core {
  background-image: url('data:text/plain;utf-8,{"Path": "UI5.sap/ui/core.custom_quartzlight.custom", "PathPattern": "/%frameworkId%/%libId%/themes/%themeId%/%fileId%.css", "Extends": ["sap_fiori_3","base"], "Engine": {"Name": "theming-engine", "Version": "1.66.0"}, "Version": { "Build": "1.96.0.20211116152438", "Source": "1.96.0"}}');
}

This is the part that breaks the code.

Compare to the one from css_variables.css:

.sapThemeMetaData-Base-baseLib{background-image: url('data:text/plain;utf-8,{"Path": "Base.baseLib.custom_quartzlight.css_variables", "PathPattern": "/%frameworkId%/%libId%/%themeId%/%fileId%.css", "Extends": ["sap_fiori_3","sap_base_fiori","baseTheme"], "Tags": ["Fiori_3","LightColorScheme"], "Engine": {"Name": "theming-engine", "Version": "1.66.0"}, "Version": { "Build": "11.1.34.20211116152438", "Source": "11.1.34"}}');}

Regards,
Vladi

[MarcusNotheis]

Hey @vladitasev,

thanks for reaching out, that's exactly what I would have expected :)
Unfortunately we can't remove the metadata from the custom.css file as we are using the Theme Designer API and not the exported files, but I'm already looking forward to the fix :)