[TabContainer]: CSS variables not loaded correctly // Scoping suffix issue?

[michellehung-0]

Bug Description

Hello team,

I am facing an issue with the TabContainer component in my micro-frontend application where an incorrect font colour is applied to inactive Tab headers. This is because the CSS variable --sapTab_Selected_TextColor is used for the font colour, but this variable appears as 'undefined' in the browser dev tools.

I found that this CSS variable is defined in theming-base-content v.11.29.3, which is the version defined in the micro-frontend application. However, it seems to still be using an older version of theming-base-content, v.11.9.0, that was loaded from the app the micro-frontend is embedded in. And --sapTab_Selected_TextColor is not defined in this older version.

Scoping suffixes are used in this micro-frontend, so a Button tag appears as <ui5-button-dmui5v2> , whereas in the application it is embedded in uses Button tags like so <ui5-button>. With this scoping, the micro-frontend should be loading its own version of theming-base-content, but this appears to not be the behaviour. As such, there seems to be an issue with the scoping mechanism that is supposed to prompt the micro-frontend to fetch its own versions of each dependency.

Would you be able to help resolve this issue? Thank you!

Kindly,
Michelle

Affected Component

No response

Expected Behaviour

Expected Behaviour: Scoped micro-frontend fetches resources from theming-base-content version 11.29.3, as 11.29.3 is what is defined in the package.json.

Observed Behaviour: Scoped micro-frontend uses theming-base-content version 11.9.0, which was loaded from the app the micro-frontend is loaded from.

Isolated Example

No response

Steps to Reproduce

1. Access a scoped micro-frontend that lists @sap-theming/theming-base-content v.11.29.3 in the package.json
2. Load the micro-frontend from an app that lists @sap-theming/theming-base-content v.11.9.0 in the package.json
3. In the micro-frontend, render a TabContainer from ui5-webcomponents-react with 2 Tabs
4. Observe the inactive tab headers in sap_horizon_dark theme, the font colour is black instead of white

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

2.15.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[nnaydenow]

Contacted you offline